/* ============================================================
   Haricode — capa compartida del design system
   Base, navegación, botones y pie. Se apoya en tokens.css.
   ============================================================ */

@view-transition{navigation:auto}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--surface-0);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  font-weight:var(--fw-regular);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}

.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

h1,h2,h3,h4{font-weight:var(--fw-semibold);line-height:var(--lh-heading);letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(var(--fs-3xl),5.5vw,var(--fs-5xl));line-height:var(--lh-tight);letter-spacing:-.035em}
h2{font-size:clamp(var(--fs-2xl),4vw,var(--fs-3xl));letter-spacing:-.03em}
h3{font-size:var(--fs-lg)}

/* El filete de marca. Es el único sitio donde los dos colores del isotipo
   aparecen juntos. Por repetirse en cada sección deja de ser adorno y pasa
   a ser firma: unos 64 px² por sección, muy por debajo de la regla del 5 %. */
.eyebrow{
  display:block;font-size:var(--fs-sm);font-weight:var(--fw-medium);
  letter-spacing:.02em;color:var(--text-3);margin-bottom:var(--sp-4);
}
.eyebrow::before{
  content:"";display:block;width:44px;height:2px;margin-bottom:var(--sp-4);
  background:var(--brand-rule);border-radius:1px;
}
.final .eyebrow::before,.cta .eyebrow::before{margin-inline:auto}

/* El punto final del titular, en acento */
h1 .dot,h2 .dot{color:var(--accent)}

/* El concepto que da nombre a una sección, encendido. Es el único texto del
   sitio con degradado y halo: si se repitiera dejaría de significar nada.
   El degradado se recorta contra los glifos, así que el halo va por detrás
   con text-shadow —el color transparente del texto no lo afecta—. */
.glow{padding-right:.06em}   /* el degradado no corta la última letra */
/* El color transparente solo se declara donde el degradado puede pintarse:
   sin el recorte contra el texto, la palabra desaparecería. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .glow{
    background:var(--brand-rule-lit);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    text-shadow:0 0 18px var(--glow-warm),0 0 56px var(--glow-cool);
  }
}

/* ── ISOTIPO COMO GRAFISMO ──────────────────────────────────
   El conector en S del logotipo, en trazo fino y muy tenue. Presencia de
   marca sin ruido: es la forma propia de Haricode, no una figura genérica.
   Nota: el #000 de las mask-image no es color de interfaz sino canal alfa
   ("opaco"), por eso no sale de tokens.css. */
.brand-mark{
  position:absolute;pointer-events:none;color:var(--text);
  opacity:.05;z-index:0;
}
.brand-mark svg{width:100%;height:100%;display:block}
.brand-mark path{
  fill:none;stroke:currentColor;stroke-width:1.4;
  vector-effect:non-scaling-stroke;
}
.measure{max-width:var(--measure)}

.skip-link{
  position:fixed;top:-60px;left:16px;z-index:200;background:var(--text);color:var(--surface-0);
  padding:11px 17px;border-radius:var(--r-control);font-weight:var(--fw-semibold);
}
.skip-link:focus{top:12px}

/* ── NAVEGACIÓN ─────────────────────────────────────────── */
header.site-hdr{
  position:sticky;top:0;z-index:60;
  background:var(--surface-blur);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease);
}
header.site-hdr.shrunk{border-bottom-color:var(--border)}
.navbar{
  max-width:var(--container);margin:0 auto;padding:var(--sp-4) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);
}
.nb-logo{flex-shrink:0;display:flex;align-items:center}
.nb-logo img{width:auto;height:22px}
.pill{display:flex;align-items:center;gap:var(--sp-1)}
.pill a{
  font-size:var(--fs-sm);font-weight:var(--fw-regular);color:var(--text-2);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r-control);white-space:nowrap;
  transition:color var(--dur),background var(--dur);
}
.pill a:hover{color:var(--text);background:var(--surface-2)}
.pill a.active{color:var(--text)}
.nb-right{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}
.agenda{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  background:var(--accent);color:var(--on-accent);font-weight:var(--fw-medium);font-size:var(--fs-sm);
  padding:10px 16px;border-radius:var(--r-control);
  transition:background var(--dur) var(--ease);
}
.agenda:hover{background:var(--accent-hover)}
.agenda svg{width:15px;height:15px}

.menu-btn{
  display:none;background:transparent;border:1px solid var(--border);
  width:40px;height:40px;border-radius:var(--r-control);cursor:pointer;padding:0;
}
.menu-btn .ham{position:relative;display:block;width:16px;height:12px;margin:0 auto}
.menu-btn .ham i{
  position:absolute;left:0;right:0;height:1.5px;background:var(--text);
  transition:transform .28s var(--ease),opacity .18s;
}
.menu-btn .ham i:nth-child(1){top:0}
.menu-btn .ham i:nth-child(2){top:5px}
.menu-btn .ham i:nth-child(3){top:10px}
.menu-btn.open .ham i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-btn.open .ham i:nth-child(2){opacity:0}
.menu-btn.open .ham i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.mobile-menu{display:none}

/* ── BOTONES ────────────────────────────────────────────── */
.btn-primary,.button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  background:var(--accent);color:var(--on-accent);font-weight:var(--fw-medium);font-size:var(--fs-sm);
  padding:13px 22px;border-radius:var(--r-control);
  transition:background var(--dur) var(--ease);
}
.btn-primary:hover,.button:hover{background:var(--accent-hover)}

.btn-secondary,.button.secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  background:transparent;border:1px solid var(--border-strong);color:var(--text);
  font-weight:var(--fw-medium);font-size:var(--fs-sm);
  padding:12px 22px;border-radius:var(--r-control);
  transition:border-color var(--dur),background var(--dur);
}
.btn-secondary:hover,.button.secondary:hover{border-color:var(--text-3);background:var(--surface-2)}

.btn-quiet{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  color:var(--text);font-weight:var(--fw-medium);font-size:var(--fs-sm);
  border-bottom:1px solid var(--border-strong);padding-bottom:3px;
  transition:border-color var(--dur),color var(--dur);
}
.btn-quiet:hover{border-color:var(--text)}

/* ── SUPERFICIES ────────────────────────────────────────── */
.card{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-card);
  padding:var(--sp-6);
  transition:border-color var(--dur),background var(--dur);
}
.card:hover{border-color:var(--border-strong);background:var(--surface-3)}

/* ── PIE ────────────────────────────────────────────────── */
footer.site-foot{border-top:1px solid var(--border);padding:var(--sp-8) 0 var(--sp-7)}
.foot{display:flex;justify-content:space-between;gap:var(--sp-7);flex-wrap:wrap;align-items:flex-start}
.foot img{width:auto;height:22px;margin-bottom:var(--sp-4)}
.foot .desc{color:var(--text-3);font-size:var(--fs-sm);max-width:34ch;line-height:1.55}
.foot-links{display:flex;gap:var(--sp-8);flex-wrap:wrap}
.foot-links .col span{
  display:block;font-size:var(--fs-xs);font-weight:var(--fw-medium);
  color:var(--text-3);margin-bottom:var(--sp-3);
}
.foot-links .col a{
  display:block;color:var(--text-2);font-size:var(--fs-sm);margin-bottom:var(--sp-2);
  transition:color var(--dur);
}
.foot-links .col a:hover{color:var(--text)}
.foot-base{
  margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--border);
  display:flex;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;
  color:var(--text-3);font-size:var(--fs-xs);
}

/* ── APARICIÓN AL DESPLAZAR ─────────────────────────────────
   Un único movimiento en todo el sitio: subir mientras aparece.
   El estado inicial solo se aplica con JS activo (.js): sin él,
   el contenido se ve, que es lo que importa. */
.js .reveal{
  opacity:0;transform:translateY(var(--rise));
  transition:opacity var(--dur-reveal) var(--ease-reveal),
             transform var(--dur-reveal) var(--ease-reveal);
  will-change:opacity,transform;
}
.js .reveal.in{opacity:1;transform:none}
.reveal.in{will-change:auto}

/* Titulares partidos en palabras: el mismo movimiento, escalonado.
   El texto sigue completo en el DOM; el conjunto lleva aria-label
   y las palabras van ocultas al lector de pantalla. */
/* inline-block para poder transformarla, sin relleno propio: cualquier
   padding vertical aquí entra en el cálculo del alto de línea e infla
   el titular entero. */
.split-word{display:inline-block}
.js .words .split-word{
  opacity:0;transform:translateY(var(--rise));
  transition:opacity var(--dur-reveal) var(--ease-reveal),
             transform var(--dur-reveal) var(--ease-reveal);
}
.js .words.in .split-word{opacity:1;transform:none}

/* Bloque cuyos hijos entran escalonados en lugar de moverse en conjunto.
   Se usa donde hay un titular partido: así el titular gobierna su propio
   movimiento y no arrastra además el del bloque. */
.js .stagger>*{
  opacity:0;transform:translateY(var(--rise));
  transition:opacity var(--dur-reveal) var(--ease-reveal),
             transform var(--dur-reveal) var(--ease-reveal);
}
.js .stagger>*:nth-child(2){transition-delay:70ms}
.js .stagger>*:nth-child(3){transition-delay:140ms}
.js .stagger>*:nth-child(4){transition-delay:210ms}
.js .stagger>*:nth-child(5){transition-delay:280ms}
.js .stagger>*:nth-child(6){transition-delay:350ms}
.js .stagger.in>*{opacity:1;transform:none}
/* un titular partido ya se mueve por palabras: no lo movemos dos veces */
.js .stagger>.words,
.js .hero-in>.words{opacity:1;transform:none;transition:none;animation:none}

/* Entrada de la portada: ocurre al cargar, no al desplazar */
.js .hero-in>*{
  opacity:0;transform:translateY(var(--rise));
  animation:rise var(--dur-reveal) var(--ease-reveal) forwards;
}
.js .hero-in>*:nth-child(1){animation-delay:.05s}
.js .hero-in>*:nth-child(2){animation-delay:.12s}
.js .hero-in>*:nth-child(3){animation-delay:.19s}
.js .hero-in>*:nth-child(4){animation-delay:.26s}
.js .hero-in>*:nth-child(5){animation-delay:.33s}
@keyframes rise{to{opacity:1;transform:none}}

/* ── RESPONSIVO ─────────────────────────────────────────── */
@media(max-width:1000px){
  .pill{display:none}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center}
  .mobile-menu{
    display:flex;flex-direction:column;
    position:absolute;top:100%;left:0;right:0;
    background:var(--surface-1);border-bottom:1px solid var(--border);
    padding:var(--sp-2) var(--gutter) var(--sp-4);
    opacity:0;transform:translateY(-8px);pointer-events:none;
    transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  }
  .mobile-menu.open{opacity:1;transform:none;pointer-events:auto}
  .mobile-menu a{
    padding:var(--sp-3) 0;color:var(--text-2);font-size:var(--fs-base);
    border-bottom:1px solid var(--border);
  }
  .mobile-menu a:last-child{border-bottom:0}
  .mobile-menu a.active{color:var(--text)}
}
@media(max-width:560px){
  .agenda span{display:none}
  .agenda{padding:10px 12px}
  .foot-links{gap:var(--sp-6)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,
  .js .words .split-word,
  .js .stagger>*,
  .js .hero-in>*{opacity:1!important;transform:none!important;animation:none!important;transition-delay:0s!important}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ============================================================
   HOO — el acompañante de preguntas frecuentes
   ------------------------------------------------------------
   Botón flotante que abre un panel con las preguntas de la propia
   página. No trae respuestas nuevas: lee las que ya están en el HTML
   (section.faq details), así que lo que Hoo contesta es exactamente lo
   que Google indexa. Si esa lista cambia, el panel cambia solo.

   Todo el marcado lo crea assets/hoo.js. Sin JavaScript no existe el
   botón, y no pasa nada: las preguntas siguen visibles en la página,
   que es donde viven de verdad.
   ============================================================ */

.hoo-launcher{
  position:fixed;right:var(--gutter);bottom:var(--gutter);z-index:60;
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);
  border:1px solid var(--border);border-radius:var(--r-pill);
  background:var(--surface-blur);backdrop-filter:blur(12px);
  color:var(--text);font:var(--fw-medium) var(--fs-sm)/1 var(--font);
  cursor:pointer;box-shadow:var(--shadow);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.hoo-launcher[hidden]{display:none}
.hoo-launcher:hover,.hoo-launcher:focus-visible{border-color:var(--border-strong);transform:translateY(-2px)}
.hoo-launcher img{width:40px;height:auto;display:block;filter:drop-shadow(0 0 12px var(--hoo-glow))}
/* En un teléfono el botón se queda solo con Hoo: la etiqueta ocuparía
   media pantalla para decir algo que la ilustración ya dice. */
@media(max-width:600px){ .hoo-launcher span{display:none} .hoo-launcher{padding:var(--sp-2)} }

.hoo-panel{
  position:fixed;right:var(--gutter);bottom:var(--gutter);z-index:61;
  display:flex;flex-direction:column;
  width:min(384px,calc(100vw - var(--gutter) * 2));max-height:min(560px,calc(100vh - var(--gutter) * 2));
  border:1px solid var(--border);border-radius:var(--r-card);
  background:var(--surface-2);box-shadow:var(--shadow);overflow:hidden;
}
/* El panel responde a un clic, así que entra en 260 ms y no en los 900 ms
   de una aparición al desplazar: es la misma gramática (subir mientras
   aparece) a la velocidad que pide una interacción. */
.hoo-panel[hidden]{display:none}
.js .hoo-panel{opacity:0;transform:translateY(var(--rise));transition:opacity .26s var(--ease),transform .26s var(--ease)}
.js .hoo-panel.open{opacity:1;transform:none}

.hoo-head{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4);border-bottom:1px solid var(--border);background:var(--surface-3);
}
.hoo-head img{width:36px;height:auto;display:block;filter:drop-shadow(0 0 10px var(--hoo-glow-soft))}
.hoo-head .hoo-name{font-weight:var(--fw-medium);font-size:var(--fs-sm);color:var(--text);line-height:1.3}
.hoo-head .hoo-role{display:block;font-weight:var(--fw-regular);font-size:var(--fs-xs);color:var(--text-3)}
.hoo-close{
  margin-left:auto;display:grid;place-items:center;width:32px;height:32px;
  border:1px solid transparent;border-radius:var(--r-control);
  background:none;color:var(--text-2);cursor:pointer;font-size:var(--fs-md);line-height:1;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.hoo-close:hover,.hoo-close:focus-visible{color:var(--text);border-color:var(--border)}

.hoo-body{padding:var(--sp-4);overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:var(--sp-3)}
.hoo-msg{
  max-width:88%;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-card);
  font-size:var(--fs-sm);line-height:var(--lh-body);
}
.hoo-msg.from-hoo{background:var(--surface-1);border:1px solid var(--border);color:var(--text-2);align-self:flex-start}
.hoo-msg.from-hoo strong{color:var(--text);font-weight:var(--fw-medium)}
.hoo-msg.from-you{background:var(--accent-quiet);border:1px solid var(--border);color:var(--text);align-self:flex-end}
.hoo-msg a{color:var(--text);text-decoration:underline;text-underline-offset:2px}

.hoo-suggestions{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-1)}
.hoo-suggestions button{
  text-align:left;padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-control);
  background:var(--surface-1);color:var(--text-2);cursor:pointer;
  font:var(--fw-regular) var(--fs-sm)/1.45 var(--font);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.hoo-suggestions button:hover,.hoo-suggestions button:focus-visible{color:var(--text);border-color:var(--border-strong);background:var(--surface-3)}

.hoo-foot{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border);background:var(--surface-1)}
.hoo-foot p{margin:0 0 var(--sp-2);font-size:var(--fs-xs);color:var(--text-3);line-height:1.5}
.hoo-foot .button{width:100%;justify-content:center}

@media(prefers-reduced-motion:reduce){
  .js .hoo-panel{transition:none;opacity:1;transform:none}
  .hoo-launcher{transition:none}
  .hoo-launcher:hover,.hoo-launcher:focus-visible{transform:none}
}

/* Ilustración de Hoo que acompaña a un titular. Va al lado del texto y a su
   tamaño, no a lo ancho de la página: es un apoyo del argumento, no una
   portada. Sin recuadro ni fondo propios —solo el radio de tarjeta— para que
   no compita con las tarjetas reales que hay alrededor.

   La proporción se reserva antes de que cargue: el hueco no salta, y el salto
   de maquetación es de las pocas cosas de diseño que Google mide. */
.hoo-figure{margin:0;max-width:380px;justify-self:end}
.hoo-figure img{display:block;width:100%;height:auto;aspect-ratio:3 / 2;border-radius:var(--r-card)}
.hoo-figure figcaption{margin-top:var(--sp-3);font-size:var(--fs-xs);color:var(--text-3);line-height:1.5}

/* El titular de una banda y su ilustración, en dos columnas. */
.band-lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:var(--sp-8);align-items:center;margin-bottom:var(--sp-8)}
.band-lead .band-head{margin-bottom:0}

/* Lo mismo en el hero de una guía o una página de servicio. */
.hero-in.with-figure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:var(--sp-8);align-items:center}
.hero-in.with-figure .crumbs{grid-column:1 / -1}

@media(max-width:900px){
  /* En una columna la ilustración va después del texto y centrada: apretarla
     contra un lado del móvil la haría ilegible. */
  .band-lead,.hero-in.with-figure{grid-template-columns:1fr;gap:var(--sp-6)}
  .hoo-figure{justify-self:center;max-width:420px}
}

/* Hoo en la 404. Es el único sitio donde la mascota aparece sola y grande:
   una página de error es exactamente donde una marca puede permitirse un
   gesto humano, porque no hay nada que vender y sí una disculpa que dar. */
.hoo-404{width:160px;height:auto;margin:0 auto var(--sp-5);display:block;filter:drop-shadow(0 0 24px var(--hoo-glow-soft))}

/* ── FORMULARIOS DE CAPTURA ──────────────────────────────────
   Vivían solo en home.css, es decir solo en la portada. Desde que las 45
   páginas cierran con formulario, la base tiene que estar en la hoja que
   todas cargan. */
.lead-form{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-card);
  padding:var(--sp-6);display:grid;gap:var(--sp-4);
}
.lead-form .row{display:grid;gap:var(--sp-2)}
.lead-form label{font-size:var(--fs-xs);color:var(--text-3)}
.lead-form label span{color:var(--accent);margin-left:2px}
.lead-form input,.lead-form select,.lead-form textarea{
  font:inherit;font-size:var(--fs-sm);color:var(--text);
  background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-control);
  padding:var(--sp-3) var(--sp-4);width:100%;
  transition:border-color var(--dur);
}
.lead-form textarea{resize:vertical;line-height:1.5}
.lead-form input::placeholder,.lead-form textarea::placeholder{color:var(--text-3)}
.lead-form :is(input,select,textarea):focus-visible{outline:none;border-color:var(--border-strong)}
.lead-form :is(input,select,textarea)[aria-invalid="true"]{border-color:var(--accent)}
.lead-form .btn-primary{width:100%;justify-content:center;margin-top:var(--sp-2)}
.lead-form .form-note{color:var(--text-3);font-size:var(--fs-xs);line-height:1.5;text-align:center}

/* Trampa para robots: fuera de la vista pero legible por un lector de
   pantalla que la anuncia como "no llenar", y sin display:none para que
   los rellenadores automáticos sí la vean. */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ── CIERRE DE PÁGINA CON CAPTURA ───────────────────────────
   El formulario a la izquierda, la salida sin compromiso a la derecha.
   Quien está listo escribe; quien no, agenda el consultorio. */
.cta-panel{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:var(--sp-5);align-items:start;text-align:left;
  max-width:860px;margin:0 auto var(--sp-6);
}
.cta .cta-panel p{max-width:none;margin:0}
.cta-form{margin:0}
.cta-form .btn-primary{margin-top:var(--sp-2)}
.cta-alt{
  display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start;
  background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--r-card);padding:var(--sp-6);
}
.cta .cta-alt-lead{color:var(--text);font-size:var(--fs-md);line-height:1.4}
.cta .cta-alt-note{color:var(--text-3);font-size:var(--fs-xs);line-height:1.5}
.cta-alt .button{width:100%;justify-content:center}
.cta .hero-actions{margin-top:var(--sp-5)}

@media(max-width:860px){
  .cta-panel{grid-template-columns:1fr;gap:var(--sp-4)}
}