/* =====================================================================
   Jonatan Hats -- páginas internas (v1.4.0)

   Se carga en todas las páginas MENOS la landing (ver functions.php): la
   Home no recibe este archivo, así que nada de aquí puede alterarla.
   Depende de main.css (tokens de :root, tipografías, .jh-btn, .jh-dialog).

   1. Fondo de los cuadros de producto (--stage)
   2. Menú: "estás aquí"
   3. Guía de tallas (página /guia-de-tallas/)
   4. Guía de tallas en ventana (ficha de producto)
   ===================================================================== */

/* ---------- 1. fondo de los cuadros de producto ----------
   El producto recortado (PNG/WebP transparente) se apoya siempre sobre este
   fondo: tarjetas, galería, familias. Con o sin foto, el cuadro es el mismo. */
:root{
  --stage:radial-gradient(ellipse 78% 70% at 50% 36%, #2B1C10 0%, #1A110A 58%, #140D07 100%);
}

/* ---------- 2. menú: "estás aquí" ----------
   Vive en main.css (indicador común a la Home y a las páginas internas). */

/* ---------- 3. guía de tallas ---------- */
.jh-guide{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:0 72px; align-items:start;}
.jh-guide-main{min-width:0;}
.jh-guide-title{margin:14px 0 18px; font-size:clamp(34px,4.6vw,58px); line-height:1.04; color:var(--ink);}
.jh-guide-lede{max-width:560px; margin:0 0 32px; font-size:16.5px; line-height:1.7; color:var(--ink-dim);}
.jh-guide-h{margin:0 0 18px; font-size:clamp(21px,2.2vw,26px); line-height:1.2; color:var(--ink);}

.jh-guide-visual{margin:0 0 44px; padding:20px 24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--stage); color:var(--ink-dim);}
.jh-guide-visual svg{display:block; width:100%; height:auto; max-height:300px;}
.jh-gv-line{color:var(--ink-dim);}
.jh-gv-tape{stroke:var(--accent);}
.jh-gv-tape-back{stroke:var(--accent); opacity:.55;}
.jh-gv-ticks{stroke:var(--accent-ink);}
.jh-gv-ann{stroke:var(--ink-faint);}
.jh-gv-marks circle{fill:var(--bg-raised); stroke:var(--accent); stroke-width:1.4;}
.jh-gv-marks text{font-family:"Fraunces", Georgia, serif; font-size:12px; font-weight:600; text-anchor:middle; fill:var(--accent-strong);}
.jh-gv-legend{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin:14px 0 0; padding:0; list-style:none; font-size:13px; color:var(--ink-dim);}
.jh-gv-legend li{display:flex; align-items:center; gap:8px;}
.jh-gv-legend span{display:inline-flex; align-items:center; justify-content:center; flex:0 0 22px; width:22px; height:22px; border:1px solid var(--accent); border-radius:50%; font-family:"Fraunces", Georgia, serif; font-size:12px; font-weight:600; color:var(--accent-strong);}

.jh-guide-table .jh-sizetable{max-width:none;}
.jh-guide-table .jh-sizeguide-note{margin:18px 0 0; font-size:14px;}

.jh-guide-side{min-width:0; padding:34px 34px 30px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-raised);}

.jh-steps-list{margin:0 0 28px; padding:0; list-style:none; border-top:1px solid var(--line);}
.jh-gstep{display:grid; grid-template-columns:46px minmax(0,1fr); gap:14px; padding:18px 0; border-bottom:1px solid var(--line);}
.jh-gstep-n{font-family:"Fraunces", Georgia, serif; font-size:20px; font-weight:600; line-height:1.3; color:var(--accent);}
.jh-gstep-t{margin:0 0 6px; font-family:"Fraunces", Georgia, serif; font-size:17.5px; font-weight:600; line-height:1.3; color:var(--ink);}
.jh-gstep p{margin:0; font-size:14.5px; line-height:1.7; color:var(--ink-dim);}

.jh-size-help-box{padding:22px 22px 24px; border:1px solid var(--line-strong); border-left:3px solid var(--accent); border-radius:var(--radius); background:var(--bg-raised-2);}
.jh-size-help-t{margin:0 0 6px; font-family:"Fraunces", Georgia, serif; font-size:19px; font-weight:600; color:var(--ink);}
.jh-size-help-d{margin:0 0 16px; font-size:14px; line-height:1.65; color:var(--ink-dim);}

@media(max-width:1000px){
  .jh-guide{grid-template-columns:minmax(0,1fr); gap:48px;}

}
@media(max-width:480px){
  .jh-guide-visual{padding:14px 10px; margin-bottom:36px;}
  .jh-gv-legend{flex-direction:column; align-items:flex-start;}
  .jh-guide-side{padding:24px 18px 22px;}
  .jh-gstep{grid-template-columns:36px minmax(0,1fr); gap:10px;}
  .jh-gstep-n{font-size:17px;}
}

/* ---------- 3b. página de la guía: escritorio en una sola pantalla ----------
   En escritorio la página completa cabe en la pantalla al abrirla, sin
   desplazarse: a la izquierda título, ilustración (más pequeña) y tabla lado
   a lado; a la derecha los 5 pasos y la ayuda por WhatsApp, compactos.
   Solo afecta a /guia-de-tallas/ (.jh-guide-page); el modal no cambia.
   En móvil y tableta se mantiene la columna única. */
@media(min-width:1001px){
  .jh-guide-page.jh-page{padding:28px 0 32px; min-height:0;}
  .jh-guide-page .jh-guide{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 40px;}
  .jh-guide-page .jh-guide-main{display:grid; grid-template-columns:170px minmax(0,1fr); column-gap:20px; align-items:start;}
  .jh-guide-page .jh-guide-main > .jh-eyebrow,
  .jh-guide-page .jh-guide-title,
  .jh-guide-page .jh-guide-lede{grid-column:1 / -1;}
  .jh-guide-page .jh-guide-title{margin:8px 0 10px; font-size:clamp(32px,3.2vw,42px);}
  .jh-guide-page .jh-guide-lede{max-width:600px; margin:0 0 18px; font-size:14.5px; line-height:1.6;}
  .jh-guide-page .jh-guide-visual{margin:0; padding:12px 10px 14px;}
  .jh-guide-page .jh-guide-visual svg{max-height:210px;}
  .jh-guide-page .jh-gv-legend{flex-direction:column; align-items:flex-start; gap:6px; margin-top:10px; font-size:12px; line-height:1.35;}
  .jh-guide-page .jh-gv-legend span{flex-basis:20px; width:20px; height:20px; font-size:11px;}
  .jh-guide-page .jh-guide-h{margin:0 0 8px; font-size:19px;}
  .jh-guide-page .jh-guide-table .jh-sizetable th,
  .jh-guide-page .jh-guide-table .jh-sizetable td{padding:5px 10px; font-size:13.5px; line-height:1.45;}
  .jh-guide-page .jh-guide-table .jh-sizetable thead th{padding-top:0; font-size:11px;}
  .jh-guide-page .jh-guide-table .jh-sizetable tbody th{font-size:15px;}
  .jh-guide-page .jh-guide-table .jh-sizeguide-note{margin:10px 0 0; font-size:12.5px; line-height:1.5;}
  .jh-guide-page .jh-guide-side{padding:22px 26px 22px;}
  .jh-guide-page .jh-steps-list{margin:0 0 16px;}
  .jh-guide-page .jh-gstep{grid-template-columns:34px minmax(0,1fr); gap:10px; padding:10px 0;}
  .jh-guide-page .jh-gstep-n{font-size:16px; line-height:1.35;}
  .jh-guide-page .jh-gstep-t{margin:0 0 3px; font-size:15px;}
  .jh-guide-page .jh-gstep p{font-size:13px; line-height:1.55;}
  .jh-guide-page .jh-size-help-box{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"t b" "d b"; gap:2px 16px; align-items:center; padding:12px 14px 12px 16px;}
  .jh-guide-page .jh-size-help-box .jh-btn{grid-area:b;}
  .jh-guide-page .jh-size-help-t{grid-area:t; margin:0; font-size:16px;}
  .jh-guide-page .jh-size-help-d{grid-area:d; margin:0; font-size:12.5px; line-height:1.5;}
}
/* escritorio con poca altura (portátiles): un poco más compacto */
@media(min-width:1001px) and (max-height:760px){
  .jh-guide-page.jh-page{padding-top:18px;}
  .jh-guide-page .jh-guide-title{font-size:32px; margin:4px 0 6px;}
  .jh-guide-page .jh-guide-lede{margin-bottom:12px;}
  .jh-guide-page .jh-guide-table .jh-sizetable th,
  .jh-guide-page .jh-guide-table .jh-sizetable td{padding:4px 12px; font-size:13px;}
  .jh-guide-page .jh-guide-side{padding:14px 22px;}
  .jh-guide-page .jh-gstep{padding:6px 0;}
  .jh-guide-page .jh-steps-list{margin-bottom:10px;}
  .jh-guide-page .jh-guide-h{margin-bottom:6px; font-size:18px;}
  .jh-guide-page .jh-guide-table .jh-sizeguide-note{margin-top:6px;}
  .jh-guide-page .jh-gstep p{font-size:12.5px; line-height:1.5;}
}

/* ---------- 4. guía en ventana ----------
   En escritorio se ve COMPLETA, sin desplazamiento interno: encabezado, tabla
   52–62, nota y ayuda por WhatsApp a la izquierda; "¿Cómo medir tu cabeza?"
   con los 5 pasos a la derecha. Compactación por espacios y filas, no por
   tamaño de letra. En móvil puede desplazarse. */
.jh-dialog--guide{width:min(1060px, calc(100vw - 32px)); max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px);}
.jh-dialog--guide .jh-dialog-box{padding:20px 28px 22px;}
.jh-dialog--guide .jh-dialog-head{align-items:center; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line);}
.jh-dialog--guide .jh-dialog-head > div{display:flex; align-items:baseline; gap:14px;}
.jh-dialog--guide .jh-dialog-head h2{margin:0; font-size:22px;}
.jh-dialog--guide .jh-dialog-close{width:36px; height:36px;}
.jh-dialog-actions{display:flex; align-items:center; gap:18px;}
.jh-dialog-full{font-size:13px; color:var(--accent); text-decoration:none; white-space:nowrap;}
.jh-dialog-full:hover{color:var(--accent-strong); text-decoration:underline; text-underline-offset:3px;}
.jh-dialog-full:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
.jh-dialog-guide{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:6px 36px; align-items:start;}
.jh-dialog-guide .jh-sizetable{max-width:none;}
.jh-dialog-guide .jh-sizetable th,.jh-dialog-guide .jh-sizetable td{padding:5px 12px; font-size:13.5px; line-height:1.45;}
.jh-dialog-guide .jh-sizetable thead th{padding-top:0; font-size:11px;}
.jh-dialog-guide .jh-sizetable tbody th{font-size:15px;}
.jh-dialog-guide .jh-sizeguide-note{margin:10px 0 14px; font-size:12.5px; line-height:1.55;}
.jh-dialog-guide .jh-guide-h{margin:0 0 6px; font-size:18px;}
.jh-dialog-guide .jh-steps-list{margin:0;}
.jh-dialog-guide .jh-gstep{grid-template-columns:30px minmax(0,1fr); gap:10px; padding:9px 0;}
.jh-dialog-guide .jh-gstep-n{font-size:14px; line-height:1.4;}
.jh-dialog-guide .jh-gstep-t{margin:0 0 2px; font-size:14.5px;}
.jh-dialog-guide .jh-gstep p{font-size:13px; line-height:1.55;}
/* ayuda: franja a todo el ancho bajo las dos columnas (texto a la izquierda, botón a la derecha) */
.jh-dialog-guide-help{grid-column:1 / -1;}
.jh-dialog-guide .jh-size-help-box{display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"t d b"; gap:4px 18px; align-items:center; padding:12px 14px 12px 18px;}
.jh-dialog-guide .jh-size-help-t{grid-area:t; margin:0; font-size:15.5px;}
.jh-dialog-guide .jh-size-help-d{grid-area:d; margin:0; font-size:12.5px; line-height:1.5;}
.jh-dialog-guide .jh-size-help-box .jh-btn{grid-area:b;}
/* pantallas de escritorio bajas (portátiles): un poco más compacto */
@media(min-width:861px) and (max-height:760px){
  .jh-dialog--guide .jh-dialog-box{padding:16px 26px 18px;}
  .jh-dialog--guide .jh-dialog-head{margin-bottom:10px; padding-bottom:10px;}
  .jh-dialog-guide .jh-sizetable th,.jh-dialog-guide .jh-sizetable td{padding:4px 12px; font-size:13px;}
  .jh-dialog-guide .jh-sizetable tbody th{font-size:14px;}
  .jh-dialog-guide .jh-gstep{padding:7px 0;}
  .jh-dialog-guide .jh-gstep p{font-size:12.5px; line-height:1.5;}
  .jh-dialog-guide .jh-sizeguide-note{margin:8px 0 10px;}
}
@media(max-width:860px){
  .jh-dialog-actions{gap:12px;}
  .jh-dialog--guide .jh-dialog-head{flex-wrap:wrap; row-gap:8px;}
  .jh-dialog-actions{display:contents;}
  .jh-dialog-full{order:3; flex:0 0 100%; font-size:12.5px;}
  .jh-dialog--guide .jh-dialog-close{margin-left:auto;}
  .jh-dialog-guide .jh-sizetable th,.jh-dialog-guide .jh-sizetable td{padding:6px 8px;}
  .jh-dialog-guide .jh-size-help-box{grid-template-columns:minmax(0,1fr); grid-template-areas:"t" "d" "b"; gap:4px;}
  .jh-dialog-guide-help{grid-column:auto;}
  .jh-dialog-guide .jh-size-help-box .jh-btn{justify-self:start; margin-top:8px;}
  .jh-dialog-guide{grid-template-columns:minmax(0,1fr); gap:24px;}
  .jh-dialog--guide .jh-dialog-box{padding:18px 16px 22px;}
  .jh-dialog--guide .jh-dialog-head > div{flex-direction:column; gap:4px;}
}