/* Site-wide brand layer (injected on every page via functions/_middleware.js).
   ONE type system: Fraunces (display + wordmark, keeps its real italic accents) + Inter (body).
   Fonts load once via preconnect + a single <link> in _middleware.js (no @import, so no
   render-blocking sequential fetch). This file no longer fights the per-page Fraunces/Inter
   <link>: it reinforces the same two families instead of overriding them to a grotesque. */

body, input, button, textarea, select, .lead, p, li, .nm, .disc, .note {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
h1, h2, h3,
.brand, .tb-brand,
.price, .big, .title, .tot,
.result .big, .badge .d, .badge .n,
.stepper span, .prog .t b, .day h3, .cat h2, .sec-t, .dayhead .n {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
  letter-spacing: -0.01em;
}
h1 { font-weight: 750 !important; }
h1, h2, h3 { text-wrap: balance; }

/* Design tokens (additive, non-breaking): a documented spacing + radius scale future pages
   can adopt, plus one calm easing. No layout-width or colour changes. */
:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 20px; --sp-5: 32px; --sp-6: 52px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --ease: cubic-bezier(.2,.7,.2,1);

  /* Type scale, derived 2026-07-27 by measuring every declaration across the 105 pages
     rather than inventing a ramp. These 11 steps cover ~95% of real usage; display sizes
     above 25px stay per-page because they are genuine one-offs (hero figures, big numbers). */
  --fs-micro: 11px;    /* eyebrow / label, uppercase + wide tracking */
  --fs-mini: 12px;     /* disclosures, footnotes */
  --fs-caption: 12.5px;/* table captions, hints */
  --fs-small: 13px;    /* the workhorse: chips, nav, dense UI (556 uses) */
  --fs-nav: 13.5px;    /* header nav links */
  --fs-body-s: 14px;
  --fs-body: 14.5px;   /* tool-page body (244 uses) */
  --fs-body-m: 15px;   /* 175 uses: body variant on tool pages */
  --fs-body-l: 15.5px; /* article body, ingredient rows, steps */
  --fs-base: 16px;     /* 213 uses: inputs, buttons, controls (browser default) */
  --fs-lead: 17px;     /* standfirst under an H1 */
  --fs-subtitle: 18px; /* 74 uses: card h3 */
  --fs-block: 19px;    /* 28 uses: injected block headings (gear, opt-in) */
  --fs-title: 21px;    /* card + promo headings */
  --fs-headline: 22px; /* section H2 inside an article */

  /* Map + data palette. These are NOT brand colours: they encode categories on the
     Leaflet map and status on the tools, so they must stay distinguishable from each
     other, not harmonious with terracotta. Documented here so they stop reading as drift. */
  --data-green: #2F7D4F;   /* camping / "alta" / positive */
  --data-green-d: #256B41;
  --data-green-l: #BFE6CD;
  --data-blue: #3F6FB0;    /* punto de servicio (agua / vaciado) */
  --data-purple: #8E44AD;  /* parking / pernocta */
  --data-amber-d: #C98A1E; /* "media" status */
  --data-peach: #F2C3AD;   /* "baja" status wash */
  /* Darkened text pairs, for legible labels sitting on a 15-18% tint of their own hue
     (map popup type badges, tool result states). Each is its category's accessible ink. */
  --data-blue-ink: #2F5788;
  --data-purple-ink: #6A3488;
  --data-amber-ink: #9A6A12;
  --data-green-mint: #8FD6A6; /* light green on a dark panel (nivelación "ok") */

  /* Photo scrim. Deliberately NOT --night (32,34,27): that is a warm olive brand surface,
     and laying it over a photograph tints the image. This is a neutral deep black whose
     only job is to darken photography enough that Crema type stays legible on top.
     Used 9 times across 4 hero backgrounds and the pin card, always as a gradient. */
  --scrim: 20, 22, 16;   /* raw RGB triple, consumed as rgba(var(--scrim), a) */

  /* The one true white. Constrained by the Sand Floor Rule: never a page or card surface,
     only type and icons sitting on Terracota, Verde Bosque, Noche or a photograph, where
     neither Crema nor Arena holds contrast. 294 uses, all of them this case. */
  --white: #FFFFFF;
}
/* Buttons: normalise the radius drift to a single value and give one consistent motion.
   Colours/shadows stay per-page so no page restyles. */
.btn { border-radius: var(--radius-md); transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); text-wrap: balance; }

/* Brand mark: monoline camper + food motif. A side-profile camper with a leaf on the roof
   (van-life + fresh food) and a round plate/window with a warm terra dot. It sits on the dark
   header + footer, so strokes are sun with an olive leaf. The wordmark text is the fallback if
   the mark ever fails to load. Simple enough to read at favicon size. */
.brand, .tb-brand, footer .brand {
  display: inline-flex !important;
  align-items: center;
  gap: .5em;
}
.brand::before, .tb-brand::before, footer .brand::before {
  content: "";
  width: 1.55em; height: .85em;
  flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22' fill='none' stroke='%23E9A13B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17 V7 Q4 5.5 5.5 5.5 H23 L27 9.5 H34.5 Q36.5 9.5 36.5 11.5 V17 Z'/%3E%3Ccircle cx='10.5' cy='10' r='2.8'/%3E%3Ccircle cx='10.5' cy='10' r='.9' fill='%23BC472D' stroke='none'/%3E%3Cpath d='M15 5.5 C15 2 18 1.2 19.6 1.4 C19.3 4.4 17.2 5.6 15 5.5 Z' fill='%236C7156' stroke='%236C7156'/%3E%3Ccircle cx='11' cy='17' r='3'/%3E%3Ccircle cx='30' cy='17' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* NEW header logo: _middleware.js injects the reversed (cream) horizontal wordmark as an <img.tb-logo>
   into the header brand link. Drop the old ::before camper on that link (footer keeps its mark) and
   size the mark crisply on the dark bar. Additive + reversible: remove these rules to restore the old text. */
.topbar a.tb-brand::before, header:not(.hero) a.brand::before { content: none !important; }
.topbar a.tb-brand, header:not(.hero) a.brand { gap: 10px !important; }
/* Two-part lockup: circle badge then wordmark, sized so the brand actually reads at a glance
   (the wordmark was 16px, which was legible but easy to miss). 44px badge + 30px wordmark fits
   the 62px bar with 9px of breathing room top and bottom. */
.tb-mark { height: 44px; width: auto; display: block; flex: 0 0 auto; }
.tb-logo { height: 30px; width: auto; display: block; }
@media (max-width: 600px) { .tb-mark { height: 36px; } .tb-logo { height: 24px; } }

/* Consistent sticky header on every page (exclude the landing hero, which is also a <header>).
   Two structures exist: the landing uses .topbar > .in, every other page uses <header> > .wrap.
   Both are pinned to the SAME rendered bar here so the two code paths cannot drift apart.
   Measured drift this fixed (2026-07-27): the landing had a 1px amber hairline and 14px of
   inner padding; the other 50 pages had no border and 20px. Standardised on hairline + 20px. */
header:not(.hero), .topbar { position: sticky !important; top: 0; z-index: 200; background: var(--night) !important; display: flex !important; align-items: center; min-height: 62px; padding-top: 0 !important; padding-bottom: 0 !important; border-bottom: 1px solid rgba(233,161,59,.22) !important; }
header:not(.hero) .wrap, .topbar .in { max-width: 1080px; width: 100%; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 20px !important; padding-right: 20px !important; }
/* Guard the injected nav dropdown from page-level generic <details>/<summary> styles (a page's FAQ accordion CSS leaks onto .nav-dd and inflates the header) */
.nav-dd { padding: 0 !important; border: 0 !important; margin: 0 !important; }
.nav-dd > summary { padding: 7px 9px !important; font-size: 13.5px !important; border: 0 !important; }
.nav-dd > summary::after { content: "\25BE" !important; font-size: 12px !important; color: rgba(251,247,238,.75) !important; }
/* Breathing room under the sticky 62px header before the first content.
   Needed because on many pages <main class="wrap"> lets the .wrap rule (padding:0 20px) zero out main's own top padding, leaving the H1 flush against the header. */
main { padding-top: 30px !important; }
@media (max-width: 600px) {
  main { padding-top: 22px !important; }
  .hero .wrap { padding-top: 12px; }
}

/* Tool pages have their own sticky progress .bar; offset it below the 62px header so the
   two sticky elements never overlap and the bar never hides the list content on scroll. */
.bar { top: 62px !important; }

/* Canonical nav CTA (injected "Tienda" link), consistent across every page */
.nav .nav-cta, .tb-nav .nav-cta {
  background: var(--terra) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 7px 14px !important;
  border-radius: 8px !important;
}

/* Simplified nav with a "Herramientas" submenu (native <details>, keyboard + mobile friendly) */
.nav, .tb-nav { display: flex !important; margin-left: auto; overflow: visible !important; gap: 6px !important; }
.nav, .tb-nav { align-items: center !important; }
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd > summary { display: inline-flex; align-items: center; line-height: 1.2; list-style: none; cursor: pointer; white-space: nowrap; color: rgba(251,247,238,.85); font-weight: 600; font-size: 13.5px; padding: 7px 9px; border-radius:8px; }
.nav-dd > summary::-webkit-details-marker { display: none; }
.nav-dd > summary::after { content: "\25BE"; margin-left: 4px; opacity: .75; }
.nav-dd[open] > summary { color: #fff; }
.nav-sub {
  position: absolute; top: 100%; right: 0; margin-top: 8px;
  width: 250px; max-width: calc(100vw - 24px);
  background: var(--night); border: 1px solid rgba(233,161,59,.3); border-radius: 12px;
  padding: 8px; display: flex; flex-direction: column; gap: 1px;
  box-shadow: 0 18px 44px rgba(0,0,0,.45); z-index: 300;
}
/* The privacy notice is fixed to the bottom with an inline z-index of 9999, so it covered the
   last links of an expanded category on a phone. Raising the menu cannot win: .nav-sub sits
   inside the header's stacking context, so its z-index is capped by that ancestor. The notice
   comes down instead. It is informational, not a consent gate, and it stays above page content. */
[aria-label="Aviso de privacidad"] { z-index: 190 !important; }
.nav-sub a { color: rgba(251,247,238,.9) !important; font-size: 14px !important; font-weight: 500; padding: 10px 12px; border-radius: 8px; white-space: nowrap; }
.nav-sub a:hover, .nav-sub a:focus-visible { background: rgba(251,247,238,.08); color: #fff !important; }

/* Two-pane submenu: a rail of category buttons, and the tools of the hovered/focused one.
   The previous version laid all 33 tools out at once and stood 953px tall, taller than a
   900px laptop viewport, and an absolutely positioned dropdown cannot be scrolled to. */
.nav-mega { display: block; width: 548px; max-width: calc(100vw - 24px); padding: 8px; }
.nav-body { position: relative; }
.nav-rail { display: flex; flex-direction: column; width: 212px; }
.nav-grp { display: flex; flex-direction: column; min-width: 0; }
.nav-cat {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  color: rgba(251,247,238,.9); font-size: 14px; font-weight: 600;
  padding: 10px 12px; border-radius: 8px;
}
.nav-cat::after { content: "\203A"; font-size: 16px; opacity: .55; }
.nav-grp:hover > .nav-cat, .nav-grp:focus-within > .nav-cat { background: rgba(251,247,238,.1); color: #fff; }
.nav-grp:hover > .nav-cat::after, .nav-grp:focus-within > .nav-cat::after { opacity: 1; color: var(--sun); }
.nav-cat-links { display: none; flex-direction: column; gap: 1px; }

/* Desktop: the tools fly out into the right pane, so panel height is the tallest single
   category (8 rows) instead of the sum of all six. Hover OR focus, so tap and Tab work. */
@media (min-width: 601px) {
  /* Reserves the tallest category (Guías, 8 rows, measured at 352px) plus a small buffer, so
     the panel never resizes as the pointer runs down the rail, no pane grows a scrollbar, and
     none reaches the footer row. overflow-y on the pane stays as the safety net if one grows. */
  .nav-body { min-height: 360px; }
  .nav-cat-links {
    position: absolute; left: 220px; top: 0; right: 0;
    max-height: 100%; overflow-y: auto;
    padding-left: 14px; border-left: 1px solid rgba(251,247,238,.14);
  }
  .nav-grp:hover > .nav-cat-links, .nav-grp:focus-within > .nav-cat-links { display: flex; }
  /* Never open an empty pane: until something is hovered or focused, show the first category. */
  .nav-rail:not(:hover):not(:focus-within) .nav-grp:first-child > .nav-cat-links { display: flex; }
}

.nav-grp-foot { display: flex; flex-wrap: wrap; gap: 2px 8px; border-top: 1px solid rgba(251,247,238,.14); margin-top: 8px; padding-top: 8px; }
.nav-mega .dd-cta { background: var(--terra) !important; color: #fff !important; font-weight: 700; text-align: center; border-radius: 8px; margin-top: 4px; }
.nav-mega .dd-cta:hover { background: var(--terra-d) !important; }

/* Responsive nav: label swap + mobile collapse to a single "Menú".
   Desktop shows the full Recetas / Herramientas / Tienda row; the submenu holds tools only. */
.dd-m, .dd-mob { display: none; }         /* "Menú" label + mobile-only submenu links hidden on desktop */
@media (max-width: 600px) {
  .nav-top { display: none !important; }   /* hide top-level Recetas + Tienda on phones */
  .dd-d { display: none; }                 /* hide the "Herramientas" summary label */
  .dd-m { display: inline; }               /* show "Menú" instead */
  .dd-mob { display: block; }              /* reveal Inicio / Recetas / Tienda inside the menu */
  .nav-dd > summary { font-size: 15px; padding: 8px 12px; background: rgba(251,247,238,.1); border-radius:8px; }
  .nav-sub { position: fixed; left: 12px; right: 12px; width: auto; max-width: none; top: 52px; }
  .nav-mega { width: auto; padding: 8px; max-height: calc(100dvh - 74px); overflow-y: auto; }
  /* No room for a second pane on a phone, so a category expands in place instead. Same
     :focus-within trigger as the desktop flyout: a tap focuses the button and opens it. */
  .nav-rail { width: auto; }
  .nav-cat { font-size: 15px; padding: 12px; }
  .nav-cat::after { transform: rotate(90deg); transition: transform .15s var(--ease); }
  .nav-grp:focus-within > .nav-cat-links { display: flex; }
  .nav-cat-links { margin: 2px 0 8px 14px; padding-left: 12px; border-left: 1px solid rgba(251,247,238,.14); }
  .nav-grp-foot { flex-direction: column; }
  .nav-sub .dd-cta { background: var(--terra) !important; color: #fff !important; font-weight: 700; text-align: center; margin-top: 4px; }
  .nav-sub .dd-cta:hover, .nav-sub .dd-cta:focus-visible { background: var(--terra-d) !important; }
}

/* Accessibility: darker muted text for WCAG AA contrast (was #7C7A6C ~3.8:1 on sand) */
:root { --muted: #5E5C50 !important; }
/* Canonical footer (content injected site-wide by _middleware.js) */
footer { color: rgba(251,247,238,.75) !important; background: var(--night) !important; text-align: center; padding: 34px 0 40px; font-size: 13px; }
footer .wrap { max-width: 1080px !important; margin: 0 auto; padding: 0 24px; }
footer .brand { font-size: 16px; margin-bottom: 2px; }
footer .foot-links, footer .foot-legal { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; }
footer .foot-legal { margin-top: 6px; font-size: 12px; opacity: .85; }
footer a { color: rgba(251,247,238,.8) !important; text-decoration: none; }
footer a:hover, footer a:focus-visible { color: var(--sun) !important; text-decoration: underline; }
footer .foot-copy { margin-top: 12px; font-size: 12px; opacity: .75; }

/* Accessibility: visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 3px solid #E9A13B !important;
  outline-offset: 2px;
  border-radius:8px;
}

/* Sitewide nav + footer parity (2026-07-21). brand.css centralizes the header bar height
   and footer band, but had left the wordmark size, nav-link size and footer gap to each
   page's own inline <style>, which drifted (17px brand + oversized menu on gratis /
   menu-semanal-furgoneta / que-aguanta-sin-nevera / sos-gasolinera). Pin them here so the
   injected menu + wordmark render identically on every page. */
.brand { font-size: 16px !important; }
.nav-top, .nav-dd > summary { font-size: 13.5px !important; }
footer { margin-top: 0 !important; }

/* Header link parity (2026-07-26). The injected menu still inherited each page's own <a>
   rules, and those had drifted three ways: aviso-legal / cookies / privacidad / terminos /
   pernocta never set `text-decoration:none`, so the menu AND the logo link rendered
   underlined only there; media-kit painted the top links terra instead of cream; and every
   inner page used weight 400 / .82 alpha while the home topbar used 600 / .85. Pin colour,
   weight and decoration here so the header reads the same on all of them. */
header:not(.hero) a, .topbar a, .nav a, .tb-nav a, .nav-dd summary,
a.brand, a.tb-brand { text-decoration: none !important; }
header:not(.hero) a:hover, .topbar a:hover, .nav a:hover, .tb-nav a:hover { text-decoration: none !important; }
.nav > .nav-top, .tb-nav > .nav-top { color: rgba(251,247,238,.85) !important; font-weight: 600 !important; }
.nav > .nav-top:hover, .tb-nav > .nav-top:hover { color: #fff !important; }
.nav .nav-cta, .tb-nav .nav-cta { color: #fff !important; }
/* footer keeps its underline-on-hover affordance, so restate both sides at the same weight */
footer a { text-decoration: none !important; }
footer a:hover, footer a:focus-visible { text-decoration: underline !important; }

/* Footer lockup = the same two assets as the header, a size up (45px wordmark). It was still
   drawing the old monoline camper ::before plus a text wordmark, so two different logos
   rendered on one page. Footer has no bar-height limit, so the badge can go proportionally big. */
footer .brand::before { content: none !important; }
footer .brand { gap: 14px !important; justify-content: center; margin-bottom: 6px; }
footer .brand .tb-mark { height: 64px; }
footer .brand .tb-logo { height: 45px; }
@media (max-width: 600px) {
  footer .brand .tb-mark { height: 52px; }
  footer .brand .tb-logo { height: 36px; }
}