@charset "UTF-8";
/* ===========================================================
   Sistema de diseño — Método PASE
   Verde bosque + lima, fotografía de plato y producto a la vista.

   TRES SUPERFICIES. Alternarlas es lo que da ritmo a la página:
   · Bosque (--forest-900): hero, método, citas. Botón lima.
   · Crema (--cream): todo lo que se lee. Botón bosque.
   · Lima (--lime): bandas de llamada a la acción. Texto bosque.

   La marca aparece como "Margen". Es un nombre de trabajo:
   para cambiarlo basta con buscar y reemplazar en los .html
   =========================================================== */

:root {
  --forest-900: #1D1D1C;
  --forest-800: #242322;
  --forest-700: #2E2D2C;
  --forest-600: #3B3A38;
  --forest-line: #363532;
  --forest-text: #ACA9A4;

  --lime: #DDD8CF;
  --lime-dark: #D9D4CC;
  --lime-tint: #F1EEE8;
  --lime-ink: #4B4A47;   /* lima legible sobre fondo claro */

  --cream: #F7F5EF;
  --cream-2: #EFEBE1;
  --cream-3: #E5E0D2;
  --card: #FFFFFF;
  --ink: #10100E;
  --ink-2: #55524B;
  --line: #E3DFD4;

  --good: #2E7D54;
  --warn: #9A6B10;
  --bad: #C8452B;
  --bad-tint: #FBE6E0;

  --w-page: 1200px;
  --w-text: 700px;
  --r: 5px;
  --r-sm: 3px;
  --pill: 99px;
  --shadow: 0 1px 2px rgba(16,16,14,.04), 0 16px 42px rgba(16,16,14,.10);
  --shadow-lg: 0 30px 70px rgba(0,0,0,.42);
  --head: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.68;
  color: var(--ink-2); background: var(--cream); -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--head); font-weight: 700; line-height: 1.08; letter-spacing: -.038em; color: var(--ink); margin: 0 0 .5em; }
h1 { font-size: clamp(2.3rem, 1.3rem + 3.2vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 1.15rem + 1.9vw, 2.6rem); }
h3 { font-size: 1.18rem; letter-spacing: -.026em; }
h4 { font-family: var(--body); font-size: .95rem; font-weight: 700; color: var(--ink); margin: 0 0 .4em; }
h1 span, h2 span {
  color: var(--ink);
  background: linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 94%, transparent 94%);
  padding: 0 .06em;
}
p { margin: 0 0 1.15em; }
a { color: var(--forest-700); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
strong { font-weight: 700; color: var(--ink); }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: .5em; }

/* lo que entra deslizándose desde un lado no debe ensanchar la página;
   clip (y no hidden) para no romper las secciones fijas con sticky */
main { overflow-x: clip; }

.wrap { width: 100%; max-width: var(--w-page); margin: 0 auto; padding: 0 28px; }
.narrow { max-width: var(--w-text); }
.lead { font-size: 1.15rem; line-height: 1.66; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.small { font-size: .9rem; }
.center { text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: .7rem; letter-spacing: .19em; text-transform: uppercase; font-weight: 700;
  color: var(--forest-700); margin-bottom: 24px;
}
.eyebrow::before {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime-ink); box-shadow: 0 0 0 4px rgba(75,74,71,.14);
}
.eyebrow::after { content: ''; width: 38px; height: 1px; background: currentColor; opacity: .32; }
.eyebrow a { color: inherit; }

/* Etiqueta de marca: billete en dos piezas, no una píldora */
.eyebrow-brand {
  display: inline-flex; align-items: stretch; margin-bottom: 26px;
  border-radius: 8px; overflow: hidden; font-size: .72rem;
  text-transform: uppercase; font-weight: 800; letter-spacing: .16em; line-height: 1;
}
.eyebrow-brand::before, .eyebrow-brand::after { display: none; }
.eyebrow-brand b { background: var(--lime); color: var(--forest-900); padding: 10px 14px; }
.eyebrow-brand i {
  font-style: normal; font-weight: 600; letter-spacing: .14em;
  padding: 10px 15px; color: #CCCAC6;
  border: 1px solid var(--forest-line); border-left: none; border-radius: 0 8px 8px 0;
}

/* ---------- SUPERFICIE BOSQUE ---------- */
.bg-dark, .bg-navy {
  background: var(--forest-900); color: var(--forest-text);
  background-image: radial-gradient(85% 70% at 75% 0%, #282726 0%, var(--forest-900) 62%);
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-navy h1, .bg-navy h2, .bg-navy h3 { color: #F6F6F5; }
.bg-dark h1 span, .bg-dark h2 span, .bg-navy h2 span { color: var(--lime); background: none; padding: 0; }
.bg-dark .lead, .bg-dark .muted, .bg-navy .lead, .bg-navy .muted { color: var(--forest-text); }
.bg-dark strong, .bg-navy strong { color: #F6F6F5; }
.bg-dark a, .bg-navy a { color: var(--lime); }
.bg-dark .eyebrow, .bg-navy .eyebrow { color: var(--lime); background: none; border: none; padding: 0; }
.bg-dark .eyebrow::before, .bg-navy .eyebrow::before { background: var(--lime); box-shadow: 0 0 0 4px rgba(221,216,207,.16); }
.band-photo .eyebrow { color: var(--lime); }
.band-photo .eyebrow::before { background: var(--lime); }
.bg-dark .card, .bg-navy .card { background: rgba(255,255,255,.045); border-color: var(--forest-line); }
.bg-dark .card p, .bg-navy .card p { color: var(--forest-text); }
.bg-dark .card li, .bg-navy .card li { color: var(--forest-text); border-bottom-color: var(--forest-line); }
.bg-dark .stat b, .bg-navy .stat b { color: var(--lime); }
.bg-dark .stat span, .bg-navy .stat span { color: #8E8A83; }
.bg-dark .hero-proof, .bg-navy .hero-proof { border-top-color: var(--forest-line); }
.bg-dark table th, .bg-navy table th { background: rgba(255,255,255,.05); color: #F6F6F5; }
.bg-dark table td, .bg-navy table td, .bg-dark table th, .bg-navy table th { border-bottom-color: var(--forest-line); }
.bg-dark .note, .bg-navy .note { background: rgba(255,255,255,.05); border-left-color: var(--lime); color: var(--forest-text); }

/* ---------- Cabecera ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(28,28,27,.93); backdrop-filter: saturate(170%) blur(10px); border-bottom: 1px solid var(--forest-line); }
.nav { display: flex; align-items: center; gap: 28px; height: 74px; }
.brand { font-family: var(--head); font-weight: 700; font-size: 1.3rem; color: #F6F6F5; letter-spacing: -.045em; text-decoration: none; margin-right: auto; }
.brand:hover { text-decoration: none; }
.brand span { color: var(--lime); }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { color: #CDCBC8; font-size: .92rem; font-weight: 500; }
.nav-links a:hover { color: var(--lime); text-decoration: none; }
.nav-toggle { display: none; background: none; border: 1px solid var(--forest-line); border-radius: 8px; padding: 8px 10px; cursor: pointer; color: #F6F6F5; }

/* ---------- Botones ----------
   Esquina suave en vez de píldora, relleno que barre de abajo arriba
   al pasar el ratón y flecha dibujada en SVG (no depende de ninguna
   tipografía) que gira 45° y pasa de diagonal a horizontal. */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  padding: 15px 24px; border-radius: 4px; border: 1px solid transparent;
  font-family: var(--body); font-weight: 600; font-size: .95rem; line-height: 1.1; letter-spacing: -.005em;
  cursor: pointer; text-decoration: none;
  transition: color .4s cubic-bezier(.7,0,.2,1), border-color .4s ease, transform .2s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn::before {
  content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  transform: translateY(101%); transition: transform .5s cubic-bezier(.7,0,.2,1);
}
.btn:hover::before { transform: translateY(0); }
.btn:not(.btn-sm):not(.btn-plain)::after {
  content: ''; flex: none; width: 13px; height: 13px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  transition: transform .45s cubic-bezier(.7,0,.2,1);
}
.btn:not(.btn-sm):not(.btn-plain):hover::after { transform: rotate(45deg); }

.btn-primary { background: var(--forest-700); color: #fff; }
.btn-primary::before { background: var(--ink); }
.btn-primary:hover { color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(16,16,14,.2); }
.btn-ghost::before { background: var(--ink); }
.btn-ghost:hover { color: #fff; border-color: var(--ink); }

.btn-lg { padding: 18px 28px; font-size: 1rem; }
.btn-sm { padding: 10px 18px; font-size: .86rem; border-radius: 3px; }
.btn-plain { padding: 17px 28px; }

/* sobre fondo oscuro */
.bg-dark .btn-primary, .bg-navy .btn-primary, .hx .btn-primary, .cta-band .btn-primary,
.site-header .btn-primary { background: var(--lime); color: var(--forest-900); }
.bg-dark .btn-primary::before, .bg-navy .btn-primary::before, .hx .btn-primary::before,
.cta-band .btn-primary::before, .site-header .btn-primary::before { background: #fff; }
.bg-dark .btn-primary:hover, .bg-navy .btn-primary:hover, .hx .btn-primary:hover,
.cta-band .btn-primary:hover, .site-header .btn-primary:hover { color: var(--forest-900); }
.bg-dark .btn-ghost, .bg-navy .btn-ghost, .hx .btn-ghost { color: #F6F6F5; border-color: rgba(255,255,255,.24); }
.bg-dark .btn-ghost::before, .bg-navy .btn-ghost::before, .hx .btn-ghost::before { background: var(--lime); }
.bg-dark .btn-ghost:hover, .bg-navy .btn-ghost:hover, .hx .btn-ghost:hover { color: var(--forest-900); border-color: var(--lime); }
.page-hero .btn-primary, .mcalc .btn-primary { background: var(--lime); color: var(--forest-900); }
.page-hero .btn-primary::before { background: #fff; }
.page-hero .btn-primary:hover { color: var(--forest-900); }
.page-hero .btn-ghost { color: #F6F6F5; border-color: rgba(255,255,255,.24); }
.page-hero .btn-ghost::before { background: var(--lime); }
.page-hero .btn-ghost:hover { color: var(--forest-900); border-color: var(--lime); }
.page-hero :focus-visible { outline-color: var(--lime); }
/* sobre la banda lima */
.bg-lime .btn-primary { background: var(--forest-900); color: var(--lime); }
.bg-lime .btn-primary::before { background: #000; }
.bg-lime .btn-primary:hover { color: var(--lime); }

/* ---------- Secciones ---------- */
section { padding: 90px 0; }
.sec-tight { padding: 56px 0; }
.bg-surface { background: var(--cream-2); }
.bg-card { background: var(--card); }

/* banda lima de llamada a la acción */
.bg-lime { background: var(--lime); color: var(--forest-900); }
.bg-lime h2, .bg-lime h3 { color: var(--forest-900); }
.bg-lime h2 span { background: rgba(28,28,27,.14); color: var(--forest-900); }
.bg-lime .lead, .bg-lime p { color: #31302F; }
.bg-lime .eyebrow { color: var(--forest-900); }
.bg-lime .eyebrow::before { background: var(--forest-900); box-shadow: 0 0 0 4px rgba(28,28,27,.12); }

/* ---------- Hero ---------- */
.hero { padding: 80px 0 0; text-align: center; }
.hero h1 { max-width: 20ch; margin: 0 auto 20px; }
.hero .lead { max-width: 54ch; margin: 0 auto; font-size: 1.15rem; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; justify-content: center; }
.hero-split { display: grid; grid-template-columns: 1.02fr .98fr; gap: 54px; align-items: center; text-align: left; }
.hero-split h1, .hero-split .lead { margin-left: 0; margin-right: 0; }
.hero-split .hero-actions { justify-content: flex-start; }
.hero-proof { margin-top: 42px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; gap: 44px; flex-wrap: wrap; justify-content: center; }
.hero-split .hero-proof { justify-content: flex-start; }

.stat b { display: block; font-family: var(--head); font-weight: 700; font-size: 1.6rem; letter-spacing: -.045em; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat span { font-size: .8rem; color: var(--ink-2); }

/* ---------- EL ARCO DE TARJETAS ---------- */
@keyframes arcDeriva { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes arcEntra {
  from { opacity: 0; transform: rotate(var(--r)) translateY(calc(var(--y) + 46px)) scale(.92); }
  to   { opacity: 1; transform: rotate(var(--r)) translateY(var(--y)) scale(1); }
}

.arc {
  display: flex; justify-content: center; align-items: flex-end; gap: 18px;
  margin-top: 64px; padding-bottom: 24px; perspective: 1600px;
  animation: arcDeriva 8s ease-in-out infinite;
}
.arc .tile {
  --r: 0deg; --y: 0px;
  flex: 0 0 208px; border-radius: 6px; padding: 19px; min-height: 184px;
  background: #F7F5EF; color: var(--ink); box-shadow: 0 20px 44px rgba(0,0,0,.38);
  transform-origin: bottom center; text-align: left;
  transform: rotate(var(--r)) translateY(var(--y));
  transition: transform .3s cubic-bezier(.2,.85,.3,1), box-shadow .3s ease, filter .3s ease;
  animation: arcEntra .75s cubic-bezier(.2,.85,.3,1) backwards;
  cursor: default;
}
.arc .tile:nth-child(1) { --r: -12deg; --y: 36px; animation-delay: .05s; }
.arc .tile:nth-child(2) { --r: -8deg;  --y: 16px; animation-delay: .12s; }
.arc .tile:nth-child(3) { --r: -4deg;  --y: 3px;  animation-delay: .19s; }
.arc .tile:nth-child(4) { --r: 0deg;   --y: -10px; z-index: 2; animation-delay: .26s; }
.arc .tile:nth-child(5) { --r: 4deg;   --y: 3px;  animation-delay: .33s; }
.arc .tile:nth-child(6) { --r: 8deg;   --y: 16px; animation-delay: .40s; }
.arc .tile:nth-child(7) { --r: 12deg;  --y: 36px; animation-delay: .47s; }

/* realce al pasar el ratón: sube, crece y se endereza un poco */
.arc .tile:hover {
  transform: rotate(calc(var(--r) * .35)) translateY(calc(var(--y) - 26px)) scale(1.07);
  box-shadow: 0 34px 70px rgba(0,0,0,.55);
  z-index: 9;
}
.arc:hover .tile:not(:hover) { filter: brightness(.82) saturate(.9); }

@media (prefers-reduced-motion: reduce) {
  .arc, .arc .tile { animation: none; }
  .arc .tile:hover { transform: rotate(var(--r)) translateY(var(--y)); }
}
.arc .tile.is-dark { background: var(--forest-800); color: #F6F6F5; border: 1px solid var(--forest-line); }
.arc .tile.is-lime { background: var(--lime); color: var(--forest-900); }
.arc .tile .k { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.arc .tile .v { font-family: var(--head); font-weight: 700; font-size: 2rem; letter-spacing: -.05em; margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1; }
.arc .tile .d { font-size: .72rem; margin-top: 7px; opacity: .74; line-height: 1.5; }
.arc .tile .mini { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin-top: 14px; }
.arc .tile .mini i { flex: 1; border-radius: 2px; background: currentColor; opacity: .25; }
.arc .tile .mini i.on { opacity: 1; }
.arc .tile .ph { aspect-ratio: 1/1; border-radius: 4px; overflow: hidden; margin-top: 8px; }
.arc .tile .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Tira de fotos ---------- */
.photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.photo-strip figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 4/5; }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.8,.3,1); }
.photo-strip figure:hover img { transform: scale(1.06); }
.photo-strip figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px;
  background: linear-gradient(transparent, rgba(28,28,27,.9));
  color: #F6F6F5; font-size: .8rem; font-weight: 600;
}

/* ---------- Tiras de KPI ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile-kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.tile-kpi:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--forest-700); }
.bg-dark .tile-kpi { background: rgba(255,255,255,.05); border-color: var(--forest-line); }
.tile-kpi .k { font-size: .66rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.bg-dark .tile-kpi .k { color: #8E8A83; }
.tile-kpi .v { font-family: var(--head); font-weight: 700; font-size: 2.1rem; letter-spacing: -.05em; color: var(--ink); margin-top: 8px; line-height: 1; font-variant-numeric: tabular-nums; }
.bg-dark .tile-kpi .v { color: #F6F6F5; }
.tile-kpi .d { font-size: .78rem; color: var(--ink-2); margin-top: 6px; }
.bg-dark .tile-kpi .d { color: var(--forest-text); }
.tile-kpi .v.is-bad { color: var(--bad); }
.tile-kpi .v.is-lime { color: var(--lime-ink); }
.bg-dark .tile-kpi .v.is-lime { color: var(--lime); }

/* ---------- Banda de foto a sangre ---------- */
.band-photo { position: relative; min-height: 420px; display: grid; place-items: center; overflow: hidden; padding: 0; }
.band-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,28,27,.92) 0%, rgba(28,28,27,.72) 45%, rgba(28,28,27,.25) 100%); }
.band-photo .inner { position: relative; z-index: 2; width: 100%; max-width: var(--w-page); margin: 0 auto; padding: 72px 28px; }
.band-photo h2 { color: #F6F6F5; max-width: 18ch; }
.band-photo h2 span { color: var(--lime); background: none; padding: 0; }
.band-photo p { color: #D1CFCC; max-width: 46ch; }

/* ---------- Cita ---------- */
.quote-band { text-align: center; }
.quote-band .mark { font-family: var(--head); font-size: 3rem; color: var(--lime); line-height: 1; margin-bottom: 10px; }
.quote-band blockquote { border: none; padding: 0; margin: 0 auto 22px; max-width: 24ch; font-family: var(--head); font-weight: 600; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); line-height: 1.26; letter-spacing: -.03em; color: #F6F6F5; }
.quote-band .who { font-size: .9rem; color: var(--forest-text); }

/* ---------- Fotografía ---------- */
.photo { position: relative; overflow: hidden; border-radius: var(--r); background: linear-gradient(145deg, #E9E0D4, #D6C8B6); display: grid; place-items: center; text-align: center; }
.bg-dark .photo, .bg-navy .photo { background: linear-gradient(145deg, #32312F, #1F1F1E); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-hint { font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: #8E8070; line-height: 1.95; padding: 22px; }
.bg-dark .photo-hint, .bg-navy .photo-hint { color: #807D78; }
.photo-4x5 { aspect-ratio: 4/5; }
.photo-4x3 { aspect-ratio: 4/3; }
.photo-16x9 { aspect-ratio: 16/9; }
.photo-1x1 { aspect-ratio: 1/1; }
.photo-cap { font-size: .83rem; color: var(--ink-2); margin-top: 10px; }

/* ---------- Panel de producto ---------- */
.ui { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.ui-top { display: flex; align-items: center; gap: 7px; padding: 11px 14px; font-size: .68rem; letter-spacing: .04em; background: var(--card); color: #A39A92; border-bottom: 1px solid var(--cream-2); }
.ui-dot { width: 9px; height: 9px; border-radius: 50%; }
.ui-body { padding: 15px; display: grid; gap: 11px; background: #FBFAF6; }
.ui-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.ui-kpi, .ui-chart, .ui-list { border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); }
.ui-kpi, .ui-chart { padding: 13px; }
.ui-list { padding: 4px 13px; }
.ui-kpi .k, .ui-chart .k { font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; opacity: .62; }
.ui-kpi .v { font-family: var(--head); font-size: 1.45rem; font-weight: 700; letter-spacing: -.045em; margin-top: 5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ui-kpi .d { font-size: .66rem; margin-top: 3px; color: var(--bad); }
.ui-chart .k { margin-bottom: 11px; }
.ui-bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; }
.ui-bars i { flex: 1; border-radius: 3px 3px 0 0; display: block; }
.ui-li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: .74rem; border-bottom: 1px solid var(--cream-2); color: var(--ink-2); }
.ui-li:last-child { border-bottom: none; }
.ui-pill { font-size: .6rem; font-weight: 700; padding: 3px 9px; border-radius: var(--pill); }

.bg-dark .ui, .bg-navy .ui { box-shadow: var(--shadow-lg); border-color: var(--forest-line); }
.bg-dark .ui-top, .bg-navy .ui-top { background: var(--forest-800); color: #8E8A83; border-bottom-color: var(--forest-line); }
.bg-dark .ui-body, .bg-navy .ui-body { background: #181817; }
.bg-dark .ui-kpi, .bg-dark .ui-chart, .bg-dark .ui-list,
.bg-navy .ui-kpi, .bg-navy .ui-chart, .bg-navy .ui-list { background: var(--forest-800); border-color: var(--forest-line); }
.bg-dark .ui-kpi .v, .bg-navy .ui-kpi .v { color: #F6F6F5; }
.bg-dark .ui-kpi .d, .bg-navy .ui-kpi .d { color: #E08A6F; }
.bg-dark .ui-li, .bg-navy .ui-li { border-bottom-color: var(--forest-line); color: #BCBAB5; }

.stack { position: relative; }
.stack .ui { margin: -70px 0 0 auto; width: 84%; position: relative; }

/* ---------- Rejillas y tarjetas ---------- */
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; transition: .15s ease; }
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.card-link:hover { border-color: var(--forest-700); box-shadow: var(--shadow); transform: translateY(-3px); }
.card .price { font-family: var(--head); font-weight: 700; color: var(--ink); font-size: 1.02rem; letter-spacing: -.035em; }
.card .meta { font-size: .82rem; color: var(--ink-2); }

.pase { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pase .letra { font-family: var(--head); font-weight: 700; font-size: 2.8rem; letter-spacing: -.06em; color: var(--lime); line-height: 1; margin-bottom: 14px; }
.pase h3 { font-size: 1.05rem; margin-bottom: .45em; }
.pase ul { list-style: none; padding: 0; margin: 0; }
.pase li { font-size: .87rem; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.pase li:last-child { border-bottom: none; }

.door { border: 1px solid var(--line); border-radius: var(--r); padding: 32px; background: var(--card); }
.door.is-main { border-color: var(--forest-700); border-width: 2px; box-shadow: var(--shadow); }
.door .tagline { font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; color: var(--forest-700); margin-bottom: 12px; }
.door.is-main .tagline { color: var(--lime-ink); }
.door ol { padding-left: 1.1em; margin: 18px 0 0; }
.door li { font-size: .92rem; }

.step { display: flex; gap: 17px; margin-bottom: 26px; }
.step-n { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--lime); color: var(--forest-900); display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.step h3 { margin-bottom: .25em; font-size: 1.05rem; }
.step p { margin-bottom: 0; color: var(--ink-2); font-size: .96rem; }

/* ---------- Tablas ---------- */
table { width: 100%; border-collapse: collapse; font-size: .94rem; margin: 0 0 1.5em; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 700; color: var(--ink); background: var(--cream-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.bg-surface th { background: var(--cream-3); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: none; }

/* ---------- Formularios y calculadoras ---------- */
.tool { display: grid; grid-template-columns: 1fr 390px; gap: 32px; align-items: start; }
.tool > * { min-width: 0; }   /* la tabla de ingredientes no debe ensanchar la columna */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
.panel-sticky { position: sticky; top: 98px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: .86rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.field .hint { font-size: .79rem; color: var(--ink-2); font-weight: 400; display: block; margin-top: 3px; }
.input-wrap { position: relative; display: flex; align-items: center; }
input[type="number"], input[type="text"], input[type="email"], input[type="tel"], select {
  width: 100%; padding: 12px 14px; font: inherit; font-size: .97rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
input:focus, select:focus { outline: 2px solid var(--forest-700); outline-offset: -1px; border-color: var(--forest-700); }
.input-wrap .unit { position: absolute; right: 14px; color: var(--ink-2); font-size: .89rem; pointer-events: none; }
.input-wrap input { padding-right: 44px; }

.result-row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--cream-2); }
.result-row:last-of-type { border-bottom: none; }
.result-row .label { font-size: .91rem; color: var(--ink-2); }
.result-row .value { font-family: var(--head); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: -.03em; }
.result-row .value.is-good { color: var(--good); }
.result-row .value.is-warn { color: var(--warn); }
.result-row .value.is-bad { color: var(--bad); }

.headline-figure { background: var(--forest-900); color: #F6F6F5; border-radius: var(--r); padding: 28px 22px; margin-bottom: 20px; text-align: center; }
.headline-figure .n { display: block; font-family: var(--head); font-weight: 700; font-size: 2.5rem; letter-spacing: -.05em; color: var(--lime); font-variant-numeric: tabular-nums; line-height: 1; }
.headline-figure .t { display: block; font-size: .84rem; color: var(--forest-text); margin-top: 10px; }

.verdict { border-radius: var(--r-sm); padding: 16px 18px; margin-bottom: 18px; font-size: .93rem; line-height: 1.56; }
.verdict strong { display: block; margin-bottom: 4px; }
.verdict.good { background: var(--lime-tint); border: 1px solid #E0DBD2; color: #373633; }
.verdict.warn { background: #FBF2E0; border: 1px solid #EDD9AE; color: #7A5209; }
.verdict.bad  { background: var(--bad-tint); border: 1px solid #F2C9BC; color: #93301A; }

.bar { height: 7px; background: var(--cream-3); border-radius: 4px; overflow: hidden; margin-top: 7px; }
.bar > i { display: block; height: 100%; background: var(--forest-700); border-radius: 4px; transition: width .25s ease; }
.bar > i.is-bad { background: var(--bad); }
.bar > i.is-good { background: var(--good); }

.row-actions { display: flex; gap: 10px; margin: 15px 0 4px; }
.btn-del { background: none; border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; border-radius: 7px; padding: 4px 9px; font-size: .85rem; }
.btn-del:hover { border-color: var(--bad); color: var(--bad); }

.tag { display: inline-block; padding: 3px 11px; border-radius: var(--pill); font-size: .76rem; font-weight: 700; }
.tag-estrella { background: var(--lime-tint); color: #373633; }
.tag-caballo { background: #ECEBE9; color: #31302F; }
.tag-puzzle { background: #FBF2E0; color: #7A5209; }
.tag-perro { background: var(--bad-tint); color: #93301A; }

.note { background: var(--cream-2); border-left: 3px solid var(--lime-ink); padding: 16px 20px; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: .93rem; margin: 0 0 1.5em; }
.bg-surface .note { background: var(--card); }
.note p:last-child { margin-bottom: 0; }

blockquote { margin: 0 0 1.5em; padding: 4px 0 4px 22px; border-left: 3px solid var(--lime-ink); font-family: var(--head); font-weight: 600; font-size: 1.15rem; line-height: 1.45; color: var(--ink); letter-spacing: -.028em; }
blockquote p:last-child { margin-bottom: 0; }

.placeholder-banner { background: var(--lime); border-bottom: 1px solid var(--lime-dark); color: var(--forest-900); font-size: .85rem; padding: 10px 0; text-align: center; font-weight: 500; }

.cta-band { background: var(--forest-900); color: var(--forest-text); border-radius: var(--r); padding: 56px 44px; text-align: center; background-image: radial-gradient(80% 90% at 50% 0%, #282726 0%, var(--forest-900) 65%); }
.cta-band h2 { color: #F6F6F5; max-width: 22ch; margin: 0 auto .5em; }
.cta-band p { color: var(--forest-text); max-width: 54ch; margin: 0 auto 26px; }
.cta-band label { color: #F6F6F5 !important; }
.cta-band input, .cta-band select { background: var(--forest-800); border-color: var(--forest-line); color: #F6F6F5; }

.site-footer { background: var(--forest-900); color: var(--forest-text); padding: 64px 0 32px; font-size: .91rem; }
.site-footer a { color: #CDCBC8; }
.site-footer .brand { color: #F6F6F5; }
.site-footer .brand span { color: var(--lime); }
.site-footer h4 { color: #F6F6F5; font-size: .72rem; text-transform: uppercase; letter-spacing: .13em; margin-bottom: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 38px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 9px; }
.footer-bottom { border-top: 1px solid var(--forest-line); padding-top: 22px; font-size: .84rem; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .arc { gap: 10px; }
  .arc .tile { flex: 0 0 170px; min-height: 158px; padding: 15px; }
}
@media (max-width: 980px) {
  .tool { grid-template-columns: 1fr; }
  .panel-sticky { position: static; }
  .g4, .pase, .tiles { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-split { grid-template-columns: 1fr; gap: 40px; }
  .stack .ui { margin: -40px 0 0; width: 100%; }
  .arc { overflow-x: auto; justify-content: flex-start; padding: 0 20px 20px; }
  .arc .tile { transform: none !important; }
}
@media (max-width: 720px) {
  body { font-size: 16.5px; }
  section { padding: 58px 0; }
  .wrap { padding: 0 20px; }
  .g2, .g3, .g4, .pase, .tiles { grid-template-columns: 1fr; }
  .nav-links { display: none; position: absolute; top: 74px; left: 0; right: 0; background: var(--forest-900); border-bottom: 1px solid var(--forest-line); flex-direction: column; gap: 0; padding: 8px 20px 18px; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--forest-line); }
  .nav-toggle { display: block; }
  .hero { padding: 52px 0 0; }
  .hero-proof { gap: 26px; }
  .cta-band { padding: 38px 22px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .site-footer { padding: 48px 0 28px; }
  table { font-size: .87rem; }
  th, td { padding: 10px 9px; }
  .band-photo { min-height: 340px; }
  .band-photo::after { background: linear-gradient(180deg, rgba(28,28,27,.78) 0%, rgba(28,28,27,.92) 100%); }
}

@media print { .site-header, .site-footer, .cta-band, .placeholder-banner, .row-actions { display: none; } body { background: #fff; } }

/* formularios sobre fondo oscuro */
.bg-dark .field label { color: #F6F6F5; }
.bg-dark input, .bg-dark select { background: rgba(255,255,255,.05); border-color: var(--forest-line); color: #F6F6F5; }
.bg-dark input:focus, .bg-dark select:focus { outline-color: var(--lime); border-color: var(--lime); }
.bg-dark select option { color: var(--ink); }
.contact-form { background: rgba(255,255,255,.04); border: 1px solid var(--forest-line); border-radius: 7px; padding: 30px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field .opt { font-weight: 400; opacity: .6; }
.check { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 20px; font-size: .86rem; line-height: 1.5; cursor: pointer; }
.check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--lime-ink); }
.bg-dark .check { color: var(--forest-text); }
.bg-dark .check input { accent-color: var(--lime); }
@media (max-width: 720px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

/* ---------- Accesibilidad ----------
   Foco visible solo al navegar con teclado; enlace para saltar al contenido. */
:focus-visible { outline: 2px solid var(--forest-700); outline-offset: 3px; border-radius: 4px; }
.bg-dark :focus-visible, .hx :focus-visible, .site-header :focus-visible,
.site-footer :focus-visible, .photo-run :focus-visible { outline-color: var(--lime); }
.bg-lime :focus-visible { outline-color: var(--forest-900); }
.btn:focus-visible { outline-offset: 4px; border-radius: 4px; }
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--lime); color: var(--forest-900); font-weight: 700; padding: 10px 16px; border-radius: 3px;
  transition: top .2s ease;
}
.skip:focus { top: 12px; text-decoration: none; }

/* ---------- Menú: sección activa ---------- */
.nav-links a:not(.btn) { position: relative; }
.nav-links a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.nav-links a.active { color: #F6F6F5; }
.nav-links a.active::after, .nav-links a:not(.btn):hover::after { transform: scaleX(1); }
@media (max-width: 720px) { .nav-links a:not(.btn)::after { display: none; } .nav-links a.active { color: var(--lime); } }

/* ---------- Transición suave entre páginas (navegadores que la soportan) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-sale .28s ease both; }
::view-transition-new(root) { animation: vt-entra .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vt-sale { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ---------- Scroll suave (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }