/* Site-wide brand override (injected on every page via functions/_middleware.js).
   New type system: Bricolage Grotesque (display/logo) + Hanken Grotesk (body). New logo mark. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

body, input, button, textarea, select, .lead, p, li, .nm, .disc, .note {
  font-family: 'Hanken Grotesk', 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: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif !important;
  letter-spacing: -0.015em;
}
h1 { font-weight: 800 !important; }

/* New logo: camper-van mark before the wordmark, everywhere the brand appears */
.brand, .tb-brand, footer .brand {
  display: inline-flex !important;
  align-items: center;
  gap: .42em;
}
.brand::before, .tb-brand::before, footer .brand::before {
  content: "";
  width: 1.35em; height: 1.05em;
  flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cpath d='M2 6a2 2 0 0 1 2-2h12v11H3a1 1 0 0 1-1-1z' fill='%23C4552D'/%3E%3Cpath d='M16 4h4.5l6 6.2V15H16z' fill='%23E9A13B'/%3E%3Crect x='4' y='6' width='4.6' height='4' rx='.8' fill='%23FBF7EE'/%3E%3Crect x='10' y='6' width='4' height='4' rx='.8' fill='%23FBF7EE'/%3E%3Ccircle cx='8' cy='15.4' r='2.7' fill='%2320221B'/%3E%3Ccircle cx='22' cy='15.4' r='2.7' fill='%2320221B'/%3E%3Ccircle cx='8' cy='15.4' r='1' fill='%23F6EFE3'/%3E%3Ccircle cx='22' cy='15.4' r='1' fill='%23F6EFE3'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Consistent sticky header on every page (exclude the landing hero, which is also a <header>) */
header:not(.hero), .topbar { position: sticky !important; top: 0; z-index: 200; background: var(--night) !important; }
header:not(.hero) .wrap, .topbar .in { max-width: 1080px; }

/* 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 { 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: 7px; }
.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;
}
.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; }

/* 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: 9px; }
  .nav-sub { position: fixed; left: 12px; right: 12px; width: auto; max-width: none; top: 52px; }
  .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; }
footer { color: rgba(251,247,238,.75) !important; }

/* 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: 4px;
}