/* ---------------------------------------------------------------------------
   farmearaura.com — chrome compartido: cabecera y pie.
   Depende de /css/tokens.css. Se sirve como /css/shell.css y lo enlazan TODAS
   las plantillas via <!--HEADCSS-->.

   Antes cada plantilla repetia estas ~90 lineas inline (siete copias que ya
   habian divergido: dos estructuras de cabecera distintas, el logo sin <span>
   en las de articulo, bordes con hex sueltos). Aca viven una sola vez.

   Va en su propio archivo y no en components.css porque se enlaza en TODAS
   las paginas y components.css no (las de articulo no lo usan).
--------------------------------------------------------------------------- */

/* ===== Cabecera =========================================================== */
.site-header{
  position:sticky;top:0;z-index:var(--z-header);
  padding-top:env(safe-area-inset-top);
  transition:background var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease-out);
  border-bottom:1px solid transparent;
}
/* Al hacer scroll se vuelve translucida (lo agrega el script del nav). */
.site-header.is-scrolled{
  background:rgba(7,3,16,.78);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
/* Siempre el contenedor del sistema (1200px), en todas las paginas: con
   el CTA la fila ya no entra en el ancho de columna de cada
   plantilla (antes 520 en la home, 720 en articulos...). */
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  max-width:var(--container);margin:0 auto;
  min-height:72px;padding:0 var(--gutter);
}

.logo{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-display);font-weight:700;font-size:16px;
  letter-spacing:.02em;text-transform:uppercase;text-decoration:none;
  color:var(--ink-hi);white-space:nowrap;
}
.logo::before{
  content:"";display:inline-block;width:1.2em;height:1.2em;margin-right:.35em;
  vertical-align:-.22em;background:var(--grad-aura);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18.5h18v2H3zM3 7l4.6 4.2L12 4l4.4 7.2L21 7l-1.6 9.5H4.6z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18.5h18v2H3zM3 7l4.6 4.2L12 4l4.4 7.2L21 7l-1.6 9.5H4.6z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.logo span{
  color:var(--aura-300);
  background:var(--grad-aura);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ===== Nav ================================================================ */
.nav{display:flex;gap:2px;align-items:center}
.nav>a,.nav .item>a{
  position:relative;display:inline-flex;align-items:center;min-height:38px;
  padding:9px 10px;border-radius:var(--r-pill);
  font-size:var(--t-sm);font-weight:600;color:var(--ink-lo);text-decoration:none;
  white-space:nowrap; /* "Duelos Historia" partia en dos y estiraba la barra */
  transition:color var(--t-fast) var(--ease-out);
}
.nav>a:hover,.nav .item>a:hover{color:var(--ink-hi)}
/* Subrayado en gradiente que crece desde el centro. */
.nav>a::after,.nav .item>a::after{
  content:"";position:absolute;left:10px;right:10px;bottom:4px;height:2px;
  border-radius:2px;background:var(--grad-aura);
  transform:scaleX(0);transform-origin:center;
  transition:transform var(--t-base) var(--ease-out);
}
.nav>a:hover::after,.nav .item>a:hover::after{transform:scaleX(1)}
.nav>a[aria-current="page"],.nav .item>a[aria-current="page"]{
  color:var(--ink-hi);background:rgba(139,92,246,.16);
}
.nav>a[aria-current="page"]::after,.nav .item>a[aria-current="page"]::after{transform:scaleX(1)}

.nav .item{position:relative;display:flex;align-items:center}
.nav .caret{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:38px;margin-left:-6px;padding:0;border:0;background:none;
  color:var(--ink-lo);font-size:10px;line-height:1;cursor:pointer;
  border-radius:var(--r-pill);
  transition:transform var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out);
}
.nav .caret:hover{color:var(--ink-hi)}
.nav .item.open .caret{color:var(--ink-hi);transform:rotate(180deg)}

.nav .sub{
  display:none;position:absolute;top:100%;right:0;margin-top:2px;z-index:30;
  min-width:160px;flex-direction:column;gap:2px;padding:6px;
  border-radius:var(--r-md);background:var(--surface-2);
  border:1px solid var(--line);box-shadow:var(--glow-md);
}
.nav .item.open .sub{display:flex;animation:navsub var(--t-fast) var(--ease-out) both}
@media (hover:hover) and (pointer:fine){
  .nav .item:hover .sub{display:flex;animation:navsub var(--t-fast) var(--ease-out) both}
}
@keyframes navsub{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.nav .sub a{
  display:block;padding:11px 12px;border-radius:7px;
  font-size:var(--t-sm);font-weight:600;color:var(--ink-lo);
  text-decoration:none;white-space:nowrap;
}
.nav .sub a:hover{background:var(--surface-3);color:var(--ink-hi)}
.nav .sub a[aria-current="page"]{color:var(--ink-hi);background:var(--surface-3)}

/* ===== Acciones de la cabecera ============================================
   nav_data.add_header_actions() arma, despues del logo:
     .site-header__menu  (el nav; en mobile, la hoja de menu)
     .site-header__actions (CTA a la calculadora + boton de menu)
   El CTA va aca y no con .btn de components.css porque las paginas de
   articulo no enlazan components.css. */
.site-header__menu{display:flex;align-items:center;gap:var(--s-2);margin-left:auto}
.site-header__actions{display:flex;align-items:center;gap:var(--s-2)}

.header-cta{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 18px;
  border-radius:var(--r-pill);background:var(--grad-cta);color:var(--ink-hi);
  font-family:var(--font-body);font-weight:700;font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.04em;text-decoration:none;white-space:nowrap;
  box-shadow:var(--glow-cta);
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out);
}
.header-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 40px -10px rgba(168,85,247,.85),0 0 0 1px rgba(232,121,249,.5) inset;
}
.header-cta__icon{width:14px;height:14px;flex:none;fill:currentColor}

.menu-btn{
  display:none;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;padding:0;border-radius:var(--r-pill);cursor:pointer;
  background:none;border:1px solid var(--line-strong);color:var(--ink-hi);
}
.menu-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.menu-btn__close{display:none}
.site-header.is-open .menu-btn__open{display:none}
.site-header.is-open .menu-btn__close{display:inline}

/* Justo por encima del corte de la hoja la fila completa entra apretada en
   frances (el nav mas largo): se achica el aire entre items. Medido contra el
   borde del contenido a 1100px. */
@media (min-width:1100px) and (max-width:1279px){
  .site-header__inner{gap:var(--s-2)}
  .nav>a,.nav .item>a{padding:9px 7px}
  .nav>a::after,.nav .item>a::after{left:7px;right:7px}
  .nav .caret{width:26px;margin-left:-5px}
}

/* ===== Menu mobile: hoja a pantalla completa =============================
   Debajo de 1100px la fila completa (logo + 5 items + CTA) no
   entra en todos los idiomas (el frances es el mas largo), asi que el nav y
   el selector pasan a una hoja; el CTA queda siempre visible en la barra. */
@media (max-width:1099px){
  .menu-btn{display:inline-flex}
  .site-header__actions{margin-left:auto}
  .site-header__menu{
    display:none;position:fixed;left:0;right:0;bottom:0;
    top:calc(72px + env(safe-area-inset-top));z-index:var(--z-modal);
    flex-direction:column;align-items:stretch;gap:var(--s-6);margin:0;
    padding:var(--s-4) var(--gutter) calc(var(--s-7) + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;
    background-color:var(--void);background-image:var(--aurora-1),var(--aurora-2);
    border-top:1px solid var(--line);
  }
  .site-header.is-open .site-header__menu{display:flex}
  /* el backdrop-filter de .is-scrolled haria que la hoja (position:fixed)
     se posicione contra la cabecera en vez de contra la ventana */
  .site-header.is-open{background:var(--void);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--line)}
  /* el bloqueo va en <body>, no en <html>: con overflow en <html>, el
     overflow-x:hidden de <body> deja de propagarse al viewport, <body> pasa
     a ser el contenedor de scroll de la cabecera sticky y esta se va con
     la pagina scrolleada */
  html.menu-open body{overflow:hidden}

  .site-header__menu .nav{flex-direction:column;align-items:stretch;gap:0}
  .site-header__menu .nav>a,.site-header__menu .nav .item>a{
    min-height:54px;padding:12px 4px;border-radius:0;
    font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--ink-hi);
  }
  .site-header__menu .nav>a,.site-header__menu .nav .item{border-bottom:1px solid var(--line)}
  .site-header__menu .nav>a::after,.site-header__menu .nav .item>a::after{display:none}
  .site-header__menu .nav>a[aria-current="page"],.site-header__menu .nav .item>a[aria-current="page"]{
    background:none;color:var(--flare-300);
  }
  .site-header__menu .nav .item{flex-direction:column;align-items:stretch}
  .site-header__menu .nav .caret{display:none}
  .site-header__menu .nav .sub,
  .site-header__menu .nav .item:hover .sub{
    display:flex;position:static;min-width:0;margin:-6px 0 10px;padding:0 0 0 14px;
    background:none;border:0;box-shadow:none;animation:none;
  }
  .site-header__menu .nav .sub a{padding:10px 4px;font-size:var(--t-sm)}
}

/* la corona no entra junto al CTA mas largo por debajo de ~540px */
@media (max-width:540px){.logo::before{display:none}}
@media (max-width:480px){
  .site-header__inner{min-height:60px;gap:var(--s-2);padding:0 14px}
  .logo{font-size:14px}
  .site-header__menu{top:calc(60px + env(safe-area-inset-top))}
  .header-cta{padding:9px 14px;font-size:11px}
}
/* Telefonos angostos: logo + CTA + menu tienen que entrar en 320px con el
   CTA mas largo ("Calculate your aura"). Medido en headless Chrome. */
@media (max-width:400px){
  .site-header__inner{gap:4px;padding:0 12px}
  .site-header__actions{gap:4px}
  .logo{font-size:12px}
  .header-cta{padding:8px 10px;font-size:10px;letter-spacing:0}
  .header-cta__icon{display:none}
}

/* ===== Entrada al hacer scroll ============================================
   El script del nav marca con .reveal solo los bloques que al cargar estan
   fuera de pantalla (nunca lo que ya se ve: sin parpadeo y sin efecto en el
   LCP) y les agrega .is-visible la primera vez que entran. Sin JS, sin
   IntersectionObserver o con prefers-reduced-motion no se marca nada. */
.reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out);
}
.reveal.is-visible{opacity:1;transform:none}

/* ===== Aviso de cookies ===================================================
   Solo el estilo por ahora: la logica (mostrarlo, guardar la eleccion y
   recien entonces cargar analytics) llega despues. Aceptar y Rechazar usan
   la MISMA clase -- mismo tamanio, peso y contraste, ninguno destacado --
   porque la audiencia es de 11 a 17 anios: nada de empujar el "si".
   "Configurar" es un link terciario. Markup esperado:
     <div class="consent-banner" role="dialog" aria-labelledby="cb-t">
       <p class="consent-banner__title" id="cb-t">...</p>
       <p class="consent-banner__text">... <a href="...">...</a></p>
       <div class="consent-banner__actions">
         <button class="consent-banner__btn">Rechazar</button>
         <button class="consent-banner__btn">Aceptar</button>
         <button class="consent-banner__more">Configurar</button>
       </div>
     </div> */
.consent-banner{
  position:fixed;left:var(--s-4);right:var(--s-4);
  bottom:calc(var(--s-4) + env(safe-area-inset-bottom));
  z-index:var(--z-consent);max-width:520px;margin:0 auto;padding:var(--s-5);
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  box-shadow:var(--glow-md);
  color:var(--ink-body);font-size:var(--t-sm);line-height:1.55;
}
.consent-banner[hidden]{display:none}
.consent-banner__title{
  font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.2;
  color:var(--ink-hi);margin:0 0 6px;
}
.consent-banner__text{margin:0 0 var(--s-4)}
.consent-banner__text a{color:var(--aura-300);font-weight:600;text-underline-offset:3px}
.consent-banner__actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.consent-banner__btn{
  min-height:44px;padding:12px 16px;border-radius:var(--r-pill);cursor:pointer;
  font:inherit;font-weight:700;font-size:var(--t-sm);
  background:var(--surface-3);color:var(--ink-hi);border:1px solid var(--line-strong);
  transition:border-color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out);
}
.consent-banner__btn:hover{border-color:var(--aura-400);background:rgba(139,92,246,.18)}
.consent-banner__more{
  grid-column:1/-1;justify-self:center;min-height:44px;padding:8px 12px;
  background:none;border:0;cursor:pointer;
  font:inherit;font-size:var(--t-xs);color:var(--ink-lo);
  text-decoration:underline;text-underline-offset:3px;
}
.consent-banner__more:hover{color:var(--ink-hi)}

/* ===== Saltar al contenido ================================================
   Primer elemento enfocable de cada pagina (lo inserta
   nav_data.add_skip_link). Fuera de pantalla hasta que recibe foco. */
.skip-link{
  position:absolute;left:var(--s-2);top:-100px;z-index:calc(var(--z-header) + 1);
  padding:12px 18px;border-radius:var(--r-md);
  background:var(--surface-3);color:var(--ink-hi);font-weight:700;font-size:var(--t-sm);
  text-decoration:none;box-shadow:var(--glow-md);
}
.skip-link:focus{top:var(--s-2)}

/* ===== Pie ================================================================ */
.site-footer{
  border-top:1px solid var(--line);margin-top:var(--s-7);
  padding:var(--s-6) 0 var(--s-6);background:var(--abyss);
}
.site-footer-content{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--s-5);margin-bottom:var(--s-5);text-align:left;
}
.site-footer-section h2{
  font-family:var(--font-display);font-weight:600;font-size:var(--t-eyebrow);
  letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px;
  color:var(--aura-300);
  background:var(--grad-aura);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.site-footer-section p{color:var(--ink-lo);font-size:var(--t-sm);line-height:1.7;margin:0}
.site-footer-section p+p{margin-top:var(--s-2)}
.site-footer-links{display:flex;flex-direction:column;gap:7px}
.site-footer-links a{
  color:var(--ink-lo);font-size:var(--t-sm);text-decoration:none;
  transition:color var(--t-fast) var(--ease-out);
}
.site-footer-links a:hover{color:var(--ink-hi)}

/* Iconos sociales: SVG inline, cada uno con su aria-label. */
.site-footer-social{display:flex;gap:var(--s-3);margin-top:var(--s-3)}
.site-footer-social a{
  display:grid;place-items:center;width:36px;height:36px;
  border-radius:var(--r-pill);border:1px solid var(--line);
  color:var(--ink-lo);
  transition:color var(--t-fast) var(--ease-out),
             border-color var(--t-fast) var(--ease-out),
             transform var(--t-fast) var(--ease-out);
}
.site-footer-social a:hover{
  color:var(--flare-400);border-color:var(--line-glow);transform:translateY(-2px);
}
.site-footer-social svg{width:18px;height:18px;fill:currentColor;display:block}

.site-footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2) var(--s-5);
  padding-top:var(--s-4);border-top:1px solid var(--line);
  color:var(--ink-lo);font-size:var(--t-xs);
}
.site-footer-tagline{font-style:normal}
@media (max-width:600px){.site-footer-bottom{flex-direction:column;align-items:center;text-align:center}}

/* selector de pais del pie: <details> nativo */
/* fila propia entre las columnas del pie y el copyright */
.footer-locale{margin:0 0 var(--s-5)}
.footer-locale summary{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);cursor:pointer;list-style:none;
  color:var(--ink-body);font-size:var(--t-sm);font-weight:600;
}
.footer-locale summary::-webkit-details-marker{display:none}
.footer-locale summary:hover,.footer-locale[open] summary{color:var(--ink-hi);border-color:var(--aura-400)}
.footer-locale .locale__globe{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
.footer-locale__list{margin-top:var(--s-3)}
.footer-locale__list .locale__group{margin:12px 0 4px;padding:0;font-size:var(--t-eyebrow);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-lo)}
.footer-locale__list .locale__group:first-child{margin-top:0}
.footer-locale__list ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:0 var(--s-4)}
.footer-locale__list a{display:block;padding:9px 0;font-size:var(--t-sm);color:var(--ink-lo);text-decoration:none}
.footer-locale__list a:hover,.footer-locale__list a[aria-current]{color:var(--ink-hi)}
.site-footer-bottom p{margin:0}