/* B5 cookie/analytics consent banner (analytics.consent). Non-blocking bottom
   bar; Aceptar/Rechazar/Preferencias are equal-weight buttons — no dark
   pattern emphasizing accept. Uses the same tokens as the rest of the site
   (tokens.css loads before this file in base.html). */
.consent-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--surface); border-top:1px solid var(--line-2);
  box-shadow:0 -14px 40px -18px rgba(26,21,24,.4);
  padding:16px clamp(16px,4vw,32px);
}
.consent-banner[hidden]{ display:none !important; }
.consent-banner-in{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  max-width:1200px; margin:0 auto;
}
.consent-banner-text{
  flex:1 1 420px; margin:0; font-size:13px; line-height:1.5; color:var(--ink);
}
.consent-banner-text a{ color:var(--burgundy); text-decoration:underline; }
.consent-banner-actions{
  display:flex; flex-wrap:wrap; gap:10px; flex:0 0 auto;
}
/* consent.js hides the Preferencias/Rechazar/Aceptar row (primaryActions.hidden
   = true) in the GPC read-only state. The author-origin display:flex above
   would otherwise beat the UA stylesheet's [hidden]{display:none} and keep
   painting the three buttons with the property set -- the same trap the banner
   and the preferences panel guard against with their own [hidden] rules. */
.consent-banner-actions[hidden]{ display:none !important; }
.consent-btn{
  font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:.02em;
  padding:11px 18px; min-height:44px; cursor:pointer; border-radius:0;
  transition:background var(--dur-fast,.2s) var(--ease-out,ease),
             color var(--dur-fast,.2s) var(--ease-out,ease);
}
.consent-btn-solid{ background:var(--burgundy); color:#fff; border:1px solid var(--burgundy); }
.consent-btn-solid:hover,.consent-btn-solid:focus-visible{ background:var(--burgundy-deep); border-color:var(--burgundy-deep); }
.consent-btn-outline{ background:transparent; color:var(--ink); border:1px solid var(--line-ui); }
.consent-btn-outline:hover,.consent-btn-outline:focus-visible{ background:var(--cream-2); }
.consent-btn-ghost{ background:transparent; color:var(--warm-grey); border:1px solid transparent; text-decoration:underline; }
.consent-btn-ghost:hover,.consent-btn-ghost:focus-visible{ color:var(--ink); }
.consent-btn:focus-visible{ outline:2px solid var(--burgundy); outline-offset:2px; }

.consent-preferences{
  /* width:100% is load-bearing once the banner is a flex COLUMN (both media
     blocks below): the panel is then a flex item whose cross-axis margins are
     `auto`, and per Flexbox L1 auto margins disable stretch — the panel would
     shrink to its fit-content width (~490px: the 60ch paragraph plus the
     nowrap "Siempre activas" label) and sit centered, its border-top
     separator no longer spanning the row, on every viewport wider than that
     (667x375, 844x390, 683x384 at 200% zoom). Harmless everywhere else:
     box-sizing is border-box globally (base.css) and a block box already
     fills its container. Review 2026-09-06. */
  width:100%; max-width:1200px; margin:16px auto 0; padding-top:16px;
  border-top:1px solid var(--line);
}
.consent-preferences[hidden]{ display:none !important; }
.consent-pref-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:10px 0; border-bottom:1px solid var(--line);
}
.consent-pref-row:last-of-type{ border-bottom:0; }
.consent-pref-row p{ margin:4px 0 0; font-size:12px; color:var(--warm-grey); max-width:60ch; }
.consent-pref-locked{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--warm-grey); white-space:nowrap; padding-top:2px;
}
.consent-pref-row input[type=checkbox]{
  width:20px; height:20px; accent-color:var(--burgundy); flex:0 0 auto; margin-top:2px;
}
.consent-banner-status{ font-size:11px; color:var(--burgundy); min-height:1em; margin-top:8px; }

/* Footer "Privacidad y cookies" reopener — styled to match the surrounding
   .ftr-legal links even though it is a <button>, not an <a>. */
.ftr-legal .consent-reopen-btn{
  background:none; border:0; padding:0; margin:0; font:inherit; color:inherit;
  text-decoration:underline; cursor:pointer;
}

/* Mobile (QA-F5). Two defects lived here: (1) the desktop rule above gives
   the paragraph flex:1 1 420px, and once .consent-banner-in turns into a
   column that 420px basis becomes HEIGHT — the closed banner measured 532px
   tall at 390px wide; (2) the fixed banner had no height limit and no scroll
   of its own, so with Preferencias open it grew to 851px and its top was
   clipped off-screen. The banner now becomes a flex column capped at 85vh:
   the text/actions row keeps its natural height, the preferences panel is
   the one child allowed to shrink (min-height:0) and scrolls internally, and
   the banner itself scrolls as a last resort should the top row alone ever
   exceed the cap (very short landscape viewports -- see the next block).
   Nothing is clipped at 320 or 390px, closed or open. */
@media (max-width:600px){
  .consent-banner{
    display:flex; flex-direction:column;
    max-height:85vh; overflow-y:auto; overscroll-behavior:contain;
    /* dvh follows the visible viewport once the mobile browser chrome
       collapses; engines without it ignore the line and keep the vh cap. */
    max-height:85dvh;
  }
  .consent-banner-in{ flex-direction:column; align-items:stretch; flex:0 0 auto; }
  .consent-banner-text{ flex:0 1 auto; }
  .consent-banner-actions{ justify-content:stretch; }
  .consent-banner-actions .consent-btn{ flex:1 1 0; }
  .consent-preferences{
    flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    /* Room for the 2px focus ring + 2px offset of a full-width button, which
       an overflow container would otherwise clip at its edges. */
    padding:16px 4px 4px;
  }
  .consent-banner-status{ flex:0 0 auto; }
}

/* SHORT viewport, ANY width (QA F5 residual, 2026-09-06). The cap above is
   scoped to max-width:600px, so a landscape phone -- 667x375, 844x390 -- is
   "desktop" by width and got no cap at all: QA measured the open Preferencias
   panel at 493px starting at y=-118 on a 375px-tall viewport, its top row and
   text simply off-screen with overflowY:visible and no way to scroll back to
   them. Height, not width, is what the cap is about, so the same rules apply
   here on height alone. This also covers page zoom, which shrinks the viewport
   in CSS pixels: a 1366x768 desktop at 200% behaves like 683x384.
   The declarations are identical to the portrait block's, so a phone that
   matches both is unchanged. */
@media (max-height:600px){
  .consent-banner{
    display:flex; flex-direction:column;
    max-height:85vh; overflow-y:auto; overscroll-behavior:contain;
    max-height:85dvh;
  }
  .consent-banner-in{ flex:0 0 auto; }
  .consent-banner-status{ flex:0 0 auto; }
}

/* ONE scrollable surface on a short viewport (review 2026-09-05, measured at
   568x320: the cap is 272px and the paragraph plus three stacked buttons alone
   fill it). Pinning the top row and letting the panel absorb the whole deficit
   left Preferencias a 27px strip scrolling 252px of content inside a banner
   that scrolled too -- two nested scroll surfaces. Here the panel stops
   shrinking and the banner (already overflow-y:auto above) scrolls as the only
   surface; the focus ring of a button inside it is never clipped, because the
   banner's own 16px padding is inside its scroll box.
   Two matching conditions, deliberately: any viewport under 480px tall (every
   landscape phone, and 320x480 portrait), plus the wider-than-a-phone but
   short viewports that only the height cap above reaches (a small window, or
   page zoom). Portrait phones between 481 and 600px tall -- 320x568 -- keep
   the pinned top row and the panel's own scroll exactly as before.
   Same specificity as the portrait block, so this must come later in the
   file. */
@media (max-height:480px), (min-width:601px) and (max-height:600px){
  .consent-preferences{ flex:0 0 auto; min-height:auto; overflow-y:visible; }
}

/* Responsive fix (owner report 2026-09-13, DIAG-responsive.md): below the
   burger breakpoint (base.css:196, @media(max-width:820px)) the banner's
   z-index:90 (line 6 above) painted over the open .drawer (base.css:79,
   z-index:60) for any visitor who had not yet answered consent -- every
   fresh session. 55 keeps the banner above the header (base.css:39,
   z-index:50) and page content on a closed drawer, but below the drawer once
   it opens. Scoped to the same breakpoint as .burger so desktop (where
   .drawer never activates) is untouched; placed last so it wins over the
   .consent-banner{display:flex;...} column rules above at equal specificity
   (none of those set z-index, so order does not actually matter here, but
   this keeps the file's own "later = more specific to short/narrow
   viewports" convention). */
@media (max-width:820px){
  .consent-banner{ z-index:55; }
}

@media (prefers-reduced-motion:reduce){
  .consent-btn{ transition:none; }
}

/* Compact consent banner (typography release): 9 mono lines at 375 covered the
   hero CTA. Sans body text and a tighter mobile layout; wording, order and
   button parity are unchanged. */
.consent-banner .consent-banner-text{font-family:var(--sans);font-size:13.5px;line-height:1.5}
@media (max-width:600px){
  .consent-banner.mono{padding:14px 16px}
  .consent-banner .consent-banner-in{gap:12px}
  .consent-banner .consent-banner-in>.consent-banner-actions{display:grid;grid-template-columns:auto 1fr 1fr;gap:8px}
  .consent-banner .consent-btn{padding:11px 10px;text-align:center}
}