/* mint · the header and the announcement band (docs/design-system.md, «Header and band»). One file for every public
   page that shows them: the site loads it through src/partials/head.html, the waitlist's signup page by hand. The
   markup is src/partials/cabecera.html and src/partials/anuncio.html, so a page never writes its own copy.
   It uses only tokens both layers define (--abeto, --lima, --menta, --ink2, --page-w, --page-pad) and plain class
   selectors, so it reads the same under hp.css + site.css and under waitlist.css. The header button takes its
   colors from the page's own `.btn`; this file only sizes it. */
html{scroll-padding-top:84px}

/* The band: one line above the header, on menta (or abeto for `.announce.abeto`). A long line on a computer, a short
   one on a phone, the action last. */
.announce{display:block;text-align:center;font-size:14px;line-height:1.4;padding:10px 16px;background:var(--menta);color:var(--ink2)}
.announce a{font-weight:600;color:var(--abeto);text-underline-offset:3px;white-space:nowrap}
.announce b{font-weight:600;color:var(--abeto)}
.announce.abeto{background:var(--abeto);color:rgba(238,243,236,.74)}
.announce.abeto a,.announce.abeto b{color:var(--lima)}
.announce .a-m{display:none}
.announce[hidden]{display:none}

/* The header: sticky, frosted hueso, logo on the left, the menu in a frosted pill, the main action on the right. */
.stick{position:sticky;top:0;z-index:30;background:rgba(238,243,236,.78);border-bottom:1px solid rgba(15,42,46,.06);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;
  max-width:calc(var(--page-w,1160px) + 2*var(--page-pad,40px));margin:0 auto;padding:0 var(--page-pad,40px)}
.nav .logo{display:flex;align-items:center;flex-shrink:0}
.nav .logo img{height:28px;width:auto}
.nav nav{display:flex;align-items:center;gap:26px;padding:11px 24px;border-radius:999px;background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.75);font-size:14px;font-weight:500;color:var(--abeto);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav nav a{color:var(--abeto);text-decoration:none}
.nav nav a:hover{text-decoration:underline}
.nav nav:empty,.nav-r a:empty{display:none}
.nav-r{display:flex;align-items:center;gap:28px}
.nav-r .btn{width:auto;height:44px;min-height:44px;padding:0 20px;font-size:14px;white-space:nowrap}
.nav-r .btn[hidden]{display:none}

/* The menu button (three lines), only on a phone and only when the page has a menu. site.js opens and closes it. */
.nav-tog{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;padding:0;border:0;border-radius:999px;
  background:none;color:var(--abeto);cursor:pointer;-webkit-tap-highlight-color:transparent}
.nav-tog span,.nav-tog span::before,.nav-tog span::after{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .25s ease,background-color .2s ease}
.nav-tog span{position:relative}
.nav-tog span::before,.nav-tog span::after{content:"";position:absolute;left:0}
.nav-tog span::before{top:-6px}
.nav-tog span::after{top:6px}
.nav-tog:focus-visible{outline:2px solid var(--abeto);outline-offset:2px}
.stick.abierto .nav-tog span{background:transparent}
.stick.abierto .nav-tog span::before{transform:translateY(6px) rotate(45deg)}
.stick.abierto .nav-tog span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:900px){
  .announce{font-size:13px;padding:9px 16px}
  .announce .a-d{display:none}
  .announce .a-m{display:inline}
  .nav{position:relative}
  /* On a phone the menu is a card that drops under the header (Fran 2026-11-09): logo, one button and the menu
     button in the bar, everything else, the waitlist included, inside. */
  .nav nav{display:none}
  .nav nav:not(:empty) ~ .nav-r .nav-tog{display:inline-flex}
  .stick.abierto .nav nav{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:calc(100% + 6px);
    left:var(--page-pad,16px);right:var(--page-pad,16px);padding:6px 18px;border-radius:22px;font-size:17px;
    background:#FFFFFF;border:1px solid rgba(15,42,46,.06);box-shadow:0 18px 44px -12px rgba(15,42,46,.28);
    animation:menu-cae .2s ease-out}
  .stick.abierto .nav nav a{padding:15px 2px;text-decoration:none}
  .stick.abierto .nav nav a + a{border-top:1px solid rgba(15,42,46,.08)}
  /* The header button stays on one line, even on a 360 px phone. */
  .nav-r{gap:6px}
  .nav-r .btn{padding:0 16px}
}
@keyframes menu-cae{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Phones under 360 px (old iPhone SE): smaller logo and gaps so the header still fits in one row. */
@media (max-width:359px){.nav{gap:8px}.nav .logo img{height:24px}.nav-r{gap:4px}.nav-r .btn{padding:0 12px}}

/* Over a full-page hero photo (`.hero-foto`, /peso/ since 2026-11-05, Mariana): the header is transparent and the
   photo runs up behind it; the menu has no frame, just its words. Logo, menu and the action's words are abeto, and
   white from 1200 px where the sky behind them is deep blue (Mariana 2026-11-05). Once the hero has scrolled past, site.js adds `.vidrio`
   and the header turns to frosted glass with abeto words. The main action has no fill, only a thin aurora border
   (lima, clorofila, cornflower, menta) that moves like a
   fluid mesh, still for people who ask for less motion. */
/* The aurora is a fluid mesh (Mariana 2026-11-05): four soft color clouds (lima, cornflower, clorofila, menta) over a
   clorofila–cornflower–lima ground (so the thin border always shows color),
   each drifting on its own path, slowly, so the color moves like a liquid rather than a straight band. */
html{--malla:radial-gradient(closest-side,var(--lima),rgba(205,235,107,0)) 0 0/55% 260% no-repeat,
  radial-gradient(closest-side,var(--corn,#6AB0FF),rgba(106,176,255,0)) 0 0/50% 240% no-repeat,
  radial-gradient(closest-side,var(--clorofila,#3CD36B),rgba(60,211,107,0)) 0 0/45% 220% no-repeat,
  radial-gradient(closest-side,var(--menta),rgba(191,232,213,0)) 0 0/60% 280% no-repeat,
  linear-gradient(120deg,var(--clorofila,#3CD36B),var(--corn,#6AB0FF) 55%,var(--lima))}
/* A background-position percentage moves a layer by (box − layer) × %, so each cloud is about half the button wide
   and travels from −60 % to 160 %: across the whole button and back. */
@keyframes malla{
  0%  {background-position:-60% 30%,160% 70%,40% 120%,100% -40%,0 0}
  25% {background-position:40% -30%,90% 130%,160% 40%,-60% 60%,0 0}
  50% {background-position:160% 40%,-60% 20%,70% -30%,30% 120%,0 0}
  75% {background-position:80% 130%,20% -20%,-60% 60%,160% 30%,0 0}
  100%{background-position:-60% 30%,160% 70%,40% 120%,100% -40%,0 0}}
.stick{transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease,-webkit-backdrop-filter .3s ease,backdrop-filter .3s ease}
body:has(.hero-foto) .stick:not(.vidrio){background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
body:has(.hero-foto) .stick.vidrio{background:rgba(238,243,236,.62);border-bottom-color:rgba(255,255,255,.55);
  box-shadow:0 8px 32px rgba(15,42,46,.10);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%)}
body:has(.hero-foto) .nav nav{background:none;border:0;padding:0;gap:32px;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:15px}
body:has(.hero-foto) .nav nav a{transition:color .3s ease}
/* From 1200 px the hero is the photo as shot, whose top is deep blue: on it the header turns white, logo, menu and
   the action's words (Mariana 2026-11-05); a soft shadow keeps the lighter right side readable. */
@media (min-width:1200px){
  body:has(.hero-foto) .stick:not(.vidrio) .nav .logo img{filter:brightness(0) invert(1)}
  body:has(.hero-foto) .stick:not(.vidrio) .nav nav a,
  body:has(.hero-foto) .stick:not(.vidrio) .nav-r .btn:not(:hover):not(:focus-visible){color:#FFFFFF !important;text-shadow:0 1px 2px rgba(15,42,46,.30),0 0 14px rgba(15,42,46,.32)}
}
body:has(.hero-foto) .nav-r .btn{position:relative;isolation:isolate;background:transparent;border:0;box-shadow:none;
  color:var(--abeto) !important;transition:background-color .2s ease}
body:has(.hero-foto) .nav-r .btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.25px;pointer-events:none;
  background:var(--malla);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:malla 12s ease-in-out infinite}
/* Hover and keyboard focus: the same mesh fills the button, and the words turn abeto to read on it. */
body:has(.hero-foto) .nav-r .btn::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none;opacity:0;
  background:var(--malla);
  transition:opacity .25s ease;animation:malla 12s ease-in-out infinite}
body:has(.hero-foto) .nav-r .btn:hover,body:has(.hero-foto) .nav-r .btn:focus-visible{background:transparent;box-shadow:none}
body:has(.hero-foto) .nav-r .btn:hover::after,body:has(.hero-foto) .nav-r .btn:focus-visible::after{opacity:1}

/* The home is framed like a card (Mariana 2026-11-05): the band is a pill and the hero a rounded card, both inset by
   --hm from the screen's edges, the hueso page showing around them. */
html:has(.hero-foto){--hm:clamp(8px,1vw,14px);--hr:clamp(18px,1.6vw,26px)}
body:has(.hero-foto) .announce{margin:var(--hm) var(--hm) 0;border-radius:999px}
body:has(.hero-foto) .stick{margin-top:var(--hm)}
html body .hero-foto{margin-top:-73px}
/* Open over the hero photo, the header turns to glass like after scrolling, so the bar and the card read as one. */
body:has(.hero-foto) .stick.abierto{background:rgba(238,243,236,.92);box-shadow:0 10px 30px -8px rgba(15,42,46,.16);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%)}
body:has(.hero-foto) .stick.abierto .nav nav{padding:6px 18px;gap:0;font-size:17px;background:#FFFFFF;border:1px solid rgba(15,42,46,.06)}
@media (prefers-reduced-motion:reduce){.nav-tog span,.nav-tog span::before,.nav-tog span::after{transition:none}.stick.abierto .nav nav{animation:none}.stick,body:has(.hero-foto) .nav nav a,body:has(.hero-foto) .nav-r .btn::after{transition:none}body:has(.hero-foto) .nav-r .btn::before,body:has(.hero-foto) .nav-r .btn::after{animation:none}}
/* Every section and the footer are cards like the hero (Mariana 2026-11-07): the same margin from the screen's edges and
   the same rounded corners, with the hueso page showing between them. */
body:has(.hero-foto){background:var(--hueso)}
body:has(.hero-foto) main > section:not(.hero-foto):not(.marq-box),body:has(.hero-foto) footer.foot{margin:var(--hm) var(--hm) 0;border-radius:var(--hr);overflow:hidden}
body:has(.hero-foto) footer.foot{margin-bottom:var(--hm)}
/* The header floats as a rounded card too (Mariana 2026-11-07): same margin and corners as the sections, stuck --hm from the top. */
body:has(.hero-foto) .stick{top:var(--hm);margin-left:var(--hm);margin-right:var(--hm);border-radius:var(--hr);border:0}
body:has(.hero-foto) .stick.vidrio{border:0;box-shadow:0 10px 30px -8px rgba(15,42,46,.16)}