/* =====================================================================
   BRISAN · Opción B v2 — cuatro DESIGN.md de Refero, cada uno en su sección:
   · Mercury  (marca/referencias/refero_mercury_DESIGN.md): hero a sangre con fondo animado, velo oscuro,
              menú transparente que se vuelve vidrio, captura en píldora y aviso legal al pie.
   · Apple    (refero_apple-es_DESIGN.md): titular con palabras tintadas y productos flotando en 3D.
              Cada palabra lleva el color real de la tapa de su tarro.
   · Seed     (refero_seed_DESIGN.md): catálogo en verde profundo, tarjetas sin contenedor, código en mono,
              ficha de producto clara.
   · Wise     (refero_wise_DESIGN.md): el resto de la página (base de la opción B).
   Una sola familia (Inter, variable) con el peso de cada sistema: Wise 900, Apple 600, Mercury 480, Seed 350.
   ===================================================================== */
:root{
  /* Wise */
  --color-forest-ink:#163300; --color-lime-voltage:#9fe870; --color-spruce:#054d28; --color-linen-mist:#e2f6d5;
  --color-charcoal:#454745; --color-obsidian:#0e0f0c; --color-pebble:#868685; --color-slate:#6a6c6a;
  --color-fog:#e8ebe6; --color-paper:#ffffff;
  /* Mercury (hero) */
  --m-onyx:#171721; --m-graphite:#1e1e2a; --m-obsidian:#272735; --m-slate:#70707d; --m-mist:#e2e3ed;
  --m-ash:#c3c3cc; --m-ivory:#ededf3; --m-white:#ffffff;
  /* Apple · tintes del titular = color medido en la tapa real de cada tarro */
  --tinte-grasa:#ff6b2c; --tinte-cloro:#74da4c; --tinte-pisos:#cf97c0;
  /* Seed (catálogo y ficha) */
  --s-forest:#1c3a13; --s-lime:#d3fa99; --s-sage:#757c5d; --s-snow:#fcfcf7; --s-stone:#eeeee9;
  --s-frost:#c4c7c4; --s-ash:#b3b3b3; --s-pewter:#666666;

  --font-inter:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text-micro:12px; --text-caption:14px; --text-body-sm:16px; --text-body:18px; --text-body-lg:25px;
  --text-subheading:36px; --text-heading-sm:45px; --text-heading:61px;
  --spacing-4:4px; --spacing-8:8px; --spacing-12:12px; --spacing-16:16px; --spacing-20:20px; --spacing-24:24px;
  --spacing-32:32px; --spacing-40:40px; --spacing-48:48px; --spacing-64:64px;
  --page-max-width:1200px; --card-padding:24px;
  --radius-tags:9999px; --radius-cards:10px; --radius-inputs:10px; --radius-buttons:9999px;
  --radius-imagemasks:1000px; --radius-largecards:28px;
  --shadow-subtle:rgba(14,15,12,.12) 0 0 0 1px; --shadow-subtle-2:rgb(134,134,133) 0 0 0 1px inset;
  --shadow-lg:rgba(0,0,0,.08) 0 6px 20px 0;
  --sx:50%; --sy:34%; --rx:0deg; --ry:0deg;
  --nav-h:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:light}
body{background:var(--color-paper);color:var(--color-charcoal);font-family:var(--font-inter);font-size:var(--text-body);line-height:1.5;letter-spacing:-0.126px;font-feature-settings:"calt";-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
:focus-visible{outline:2px solid var(--color-forest-ink);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
section[id]{scroll-margin-top:calc(var(--nav-h) + 8px)}

.wide{max-width:var(--page-max-width);margin-inline:auto;padding-inline:var(--spacing-24)}
.section{padding-block:var(--spacing-64)}
@media (min-width:960px){.section{padding-block:80px}}
.band-linen{background:var(--color-linen-mist)}
.band-forest{background:var(--color-forest-ink);color:var(--color-paper)}
.band-fog{background:var(--color-fog)}

/* ---------- Tipografía Wise ---------- */
.heading{font-weight:900;font-size:clamp(40px,5vw,var(--text-heading));line-height:1.1;letter-spacing:-0.03em;color:var(--color-obsidian);text-wrap:balance}
.heading-sm{font-weight:700;font-size:clamp(32px,3.6vw,var(--text-heading-sm));line-height:1.1;letter-spacing:-0.495px;color:var(--color-obsidian)}
.subheading{font-weight:700;font-size:clamp(28px,3vw,var(--text-subheading));line-height:1.25;letter-spacing:-0.396px;color:var(--color-obsidian)}
.body-lg{font-size:clamp(20px,2vw,var(--text-body-lg));line-height:1.3;letter-spacing:-0.225px;color:var(--color-charcoal)}
.body{font-size:var(--text-body);line-height:1.5;color:var(--color-charcoal)}
.caption{font-size:var(--text-caption);line-height:1.55;letter-spacing:-0.07px;color:var(--color-slate)}
.band-forest .heading,.band-forest .subheading{color:var(--color-lime-voltage)}
.band-forest .body,.band-forest .body-lg{color:var(--color-paper)}
.band-forest .caption{color:rgba(255,255,255,.72)}

/* ---------- Componentes Wise ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-8);padding:11px var(--spacing-24);border-radius:var(--radius-buttons);font-weight:500;font-size:var(--text-body-sm);line-height:1.5;white-space:nowrap;border:0;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.btn-primary{background:var(--color-lime-voltage);color:var(--color-charcoal)}
.btn-primary:hover{background:#8fdb62}
.btn-outline{background:var(--color-paper);color:var(--color-forest-ink);box-shadow:inset 0 0 0 1px var(--color-forest-ink)}
.btn-outline:hover{background:var(--color-linen-mist)}
.band-forest .btn-outline{background:transparent;color:var(--color-paper);box-shadow:inset 0 0 0 1px var(--color-paper)}
.btn-text{color:var(--color-forest-ink);text-decoration:underline;text-underline-offset:4px;font-weight:500;font-size:var(--text-body-sm)}
.tag{display:inline-block;padding:var(--spacing-8) var(--spacing-12);border-radius:var(--radius-tags);background:var(--color-linen-mist);color:var(--color-forest-ink);font-weight:500;font-size:var(--text-micro);line-height:1}

/* ---------- Navegación (Mercury sobre el hero · Wise después) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:var(--color-paper);box-shadow:0 1px 0 var(--color-fog);transition:background .35s ease,box-shadow .35s ease}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-24);height:var(--nav-h);max-width:none;padding-inline:clamp(20px,5vw,80px)}
.nav-logo img{height:32px;width:auto}
.nav .logo-claro{display:none}
.nav.sobre-hero{background:transparent;box-shadow:none}
.nav.sobre-hero.vidrio{background:rgba(23,23,33,.5);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.nav.sobre-hero .logo-claro{display:block}
.nav.sobre-hero .logo-oscuro{display:none}
.seg{display:inline-flex;align-items:center;height:40px;padding:4px;border-radius:var(--radius-tags);background:var(--color-fog)}
.seg a{height:32px;padding:0 var(--spacing-12);border-radius:var(--radius-tags);display:inline-flex;align-items:center;font-weight:500;font-size:var(--text-body-sm);color:var(--color-forest-ink);transition:background .2s,color .2s}
.seg a.on{background:var(--color-lime-voltage);color:var(--color-charcoal)}
.nav.sobre-hero .seg{background:rgba(237,237,243,.14)}
.nav.sobre-hero .seg a{color:var(--m-ivory)}
.nav-right{display:flex;align-items:center;gap:var(--spacing-20)}
.nav.sobre-hero .btn-text{color:var(--m-ivory)}
.nav.sobre-hero .btn-outline{background:transparent;color:var(--m-ivory);box-shadow:inset 0 0 0 1px var(--m-ivory)}
.nav.sobre-hero .btn-outline:hover{background:rgba(237,237,243,.12)}

/* ---------- HERO (Mercury + Apple) ---------- */
.hero{position:relative;height:100svh;min-height:640px;max-height:1100px;background:var(--m-onyx);color:var(--m-ivory);overflow:hidden;isolation:isolate}
.hero-escena{position:absolute;inset:0}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 64%;
  /* exposición y contraste de hora azul: la foto base viene demasiado clara y plana */
  filter:brightness(.82) contrast(1.16) saturate(.82)}
.hero-video{opacity:0;transition:opacity 1.4s ease}
.hero-video.lista{opacity:1}
/* ---- Gradación cinematográfica (capas sobre el video, debajo del texto) ----
   frio  · multiplica un mapa azul: sombras frías en laderas, pasto y cielo alto; el centro del valle queda limpio
   calor · suma el resplandor cálido del horizonte (bloom moderado, solo en el centro)
   velo  · oscurece menú y pie, más viñeta en las esquinas
   grano · grano fino de película */
.hero-frio{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;background:
  linear-gradient(180deg,rgba(118,116,130,.44) 0%,rgba(160,156,166,.2) 22%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 54%,rgba(52,70,108,.58) 70%,rgba(20,30,56,.86) 100%),
  radial-gradient(74% 56% at 50% 45%,#ffffff 0%,#edf1f7 42%,#aeb9cf 78%,#6f7f9f 100%)}
.hero-calor{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:
  radial-gradient(46% 30% at 50% 44%,rgba(255,182,124,.82) 0%,rgba(255,164,100,.4) 42%,rgba(255,140,80,0) 100%),
  radial-gradient(90% 44% at 50% 46%,rgba(255,200,156,.22) 0%,rgba(255,200,156,0) 100%),
  radial-gradient(120% 60% at 50% 18%,rgba(255,206,170,.2) 0%,rgba(255,206,170,0) 100%)}
.hero-velo{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(23,23,33,.6) 0%,rgba(23,23,33,.2) 16%,rgba(23,23,33,0) 34%,rgba(23,23,33,0) 60%,rgba(23,23,33,.36) 80%,rgba(23,23,33,.8) 100%),
  radial-gradient(120% 95% at 50% 45%,rgba(12,12,20,0) 46%,rgba(12,12,20,.42) 74%,rgba(12,12,20,.78) 100%)}
.hero-grano{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.09;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");background-size:220px 220px}
/* ---- Niebla: tres capas tileables a distinta altura, velocidad y sentido; blanco en modo pantalla
   (solo aclara, nunca ensucia). Las máscaras la limitan al valle, las laderas y el primer plano. ---- */
.niebla{position:absolute;inset:0;pointer-events:none;overflow:hidden;mix-blend-mode:screen;opacity:var(--op);
  animation:respirar var(--pulso,26s) ease-in-out infinite alternate}
.niebla::before{content:"";position:absolute;top:0;bottom:0;left:0;width:200%;background-repeat:repeat-x;background-size:50% 100%;
  will-change:transform;animation:deriva var(--dur) linear infinite var(--dir,normal)}
.niebla-ladera{--op:.38;--dur:190s;--pulso:31s;
  -webkit-mask-image:linear-gradient(180deg,transparent 14%,#000 30%,#000 54%,transparent 66%);mask-image:linear-gradient(180deg,transparent 14%,#000 30%,#000 54%,transparent 66%)}
.niebla-ladera::before{background-image:url("media/niebla_ladera.png")}
.niebla-valle{--op:.62;--dur:120s;--dir:reverse;--pulso:23s;
  -webkit-mask-image:radial-gradient(58% 22% at 50% 52%,#000 18%,rgba(0,0,0,.55) 62%,transparent 100%);mask-image:radial-gradient(58% 22% at 50% 52%,#000 18%,rgba(0,0,0,.55) 62%,transparent 100%)}
.niebla-valle::before{background-image:url("media/niebla_valle.png")}
.niebla-frente{--op:.3;--dur:85s;--pulso:19s;
  -webkit-mask-image:linear-gradient(180deg,transparent 72%,#000 92%,#000 100%),radial-gradient(40% 40% at 50% 90%,transparent 40%,#000 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 72%,#000 92%,#000 100%),radial-gradient(40% 40% at 50% 90%,transparent 40%,#000 100%);mask-composite:intersect}
.niebla-frente::before{background-image:url("media/niebla_frente.png")}
@keyframes deriva{to{transform:translateX(-50%)}}
@keyframes respirar{from{opacity:var(--op)}to{opacity:calc(var(--op) * .68)}}
@media (prefers-reduced-motion:reduce){.niebla,.niebla::before{animation:none}}
.hero-3d{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;opacity:0;transition:opacity 1s ease}
.hero-3d.listo{opacity:1}
.hero-respaldo{display:none;position:absolute;left:50%;top:13%;height:49%;transform:translateX(-50%);width:min(70vw,620px)}
.sin-3d .hero-respaldo{display:block}
.sin-3d .hero-3d{display:none}
.hero-respaldo img{position:absolute;bottom:0;height:100%;width:auto;animation:flotar 7s ease-in-out infinite}
.hero-respaldo .r1{left:6%;height:86%;bottom:2%;transform:rotate(-7deg);animation-delay:-2s}
.hero-respaldo .r2{left:50%;translate:-50% 0;z-index:2}
.hero-respaldo .r3{right:6%;height:86%;bottom:5%;transform:rotate(6deg);animation-delay:-4s}
@keyframes flotar{50%{translate:0 -10px}}
.hero-respaldo .r2{animation-name:flotar-c}
@keyframes flotar-c{0%,100%{translate:-50% 0}50%{translate:-50% -12px}}

.hero-contenido{position:absolute;left:0;right:0;bottom:clamp(64px,10.5vh,108px);z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:var(--spacing-32);max-width:none;padding-inline:clamp(20px,5vw,80px);pointer-events:none}
.hero-contenido>*{pointer-events:auto}
.kicker{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--m-ash);margin-bottom:14px}
/* Apple · Headline with Tinted Accent Words (600, tracking negativo, alineado a la izquierda) */
.tinted{font-weight:600;font-size:clamp(44px,5vw,76px);line-height:1.02;letter-spacing:-0.019em;margin:0}
.tinted .t{display:block;width:max-content;cursor:pointer;transition:opacity .35s ease,transform .35s ease}
.t-grasa{color:var(--tinte-grasa)} .t-cloro{color:var(--tinte-cloro)} .t-pisos{color:var(--tinte-pisos)}
.tinted.foco .t{opacity:.38}
.tinted.foco .t.on{opacity:1;transform:translateX(6px)}
.hero-accion{width:min(360px,32vw);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
/* Mercury · subtexto 18/480 y captura en píldora con botón adosado */
.hero-sub{font-size:18px;font-weight:480;line-height:1.35;color:var(--m-ivory)}
.precio{font-size:14px;line-height:1.43;color:var(--m-ash);margin-top:4px}
.captura{display:flex;width:100%}
.captura input{flex:1;min-width:0;background:rgba(23,23,33,.32);border:1px solid var(--m-ivory);border-right:0;border-radius:32px 0 0 32px;color:var(--m-ivory);font-size:16px;font-weight:400;padding:12px 8px 12px 20px;outline:0}
.captura input::placeholder{color:var(--m-ash)}
.captura input:focus{background:rgba(23,23,33,.5)}
.captura .btn{border-radius:0 32px 32px 0;padding:12px 22px}
.btn-text.claro{color:var(--m-ivory);margin-top:2px}
/* Mercury · Disclaimer Banner */
.hero-aviso{position:absolute;z-index:3;left:50%;bottom:16px;transform:translateX(-50%);max-width:calc(100% - 32px);font-size:12px;font-weight:480;letter-spacing:.01em;line-height:1.4;color:var(--m-ash);background:rgba(23,23,33,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px 16px;border-radius:40px;text-align:center}

/* ---------- Feature Row (Wise) ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-32)}
.feature svg{width:24px;height:24px;stroke:var(--color-charcoal);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.feature h3{margin-top:var(--spacing-24);font-weight:700;font-size:18px;line-height:1.4;color:var(--color-obsidian)}
.feature p{margin-top:var(--spacing-8);font-size:var(--text-body-sm);line-height:1.5;color:var(--color-pebble)}

/* ---------- CATÁLOGO (Seed · Dark Section + Product Card) ---------- */
.catalogo{background:var(--s-forest);color:var(--s-snow);padding-block:96px}
.cat-cabeza{max-width:640px;margin-bottom:56px}
.code-pill{display:inline-flex;align-items:center;font-family:var(--font-mono);font-weight:500;font-size:12px;line-height:1;letter-spacing:.015em;text-transform:uppercase;padding:6px 8px;border-radius:1000px;box-shadow:inset 0 0 0 1.5px currentColor;color:var(--s-snow)}
.code-pill.oscuro{color:var(--s-forest)}
.cat-titulo{margin-top:20px;font-weight:350;font-size:clamp(34px,3.6vw,48px);line-height:1.1;letter-spacing:-0.72px;color:var(--s-snow);text-wrap:balance}
.cat-sub{margin-top:16px;font-size:16px;line-height:1.5;color:rgba(252,252,247,.8);max-width:52ch}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat-card{appearance:none;border:0;background:transparent;text-align:left;font:inherit;color:var(--s-snow);cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px;border-radius:16px;min-width:0;transition:background .25s ease}
.cat-card:hover{background:rgba(252,252,247,.06)}
.cat-card:focus-visible{outline:2px solid var(--s-lime);outline-offset:2px}
.cat-nombre{font-weight:350;font-size:24px;line-height:1.2;letter-spacing:-0.48px}
.cat-foto{width:100%;aspect-ratio:1/1.12;display:grid;place-items:center;grid-template-rows:100%}
.cat-foto img{height:88%;width:auto;max-width:76%;object-fit:contain;transition:transform .4s ease}
.cat-foto.ancha img{height:auto;width:82%;max-width:82%}
.cat-card:hover .cat-foto img{transform:translateY(-6px)}
.cat-spec{font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.02em;text-transform:uppercase;color:rgba(252,252,247,.74)}
.btn-seed{display:inline-flex;padding:12px 20px;border-radius:1000px;background:var(--s-snow);color:var(--s-forest);font-size:16px;font-weight:400;line-height:1;box-shadow:inset 0 0 0 1.5px var(--s-forest);transition:background .2s}
.cat-card:hover .btn-seed{background:var(--s-stone)}
.badge-lime{display:inline-block;padding:6px 8px;border-radius:1000px;background:var(--s-lime);color:var(--s-forest);font-size:12px;font-weight:500;line-height:1}
.cat-card{position:relative}
.cat-card .badge-lime{position:absolute;top:50px;left:16px;z-index:1}
.cat-card .btn-seed{margin-top:auto}
.cat-card .cat-spec{min-height:3em}

/* ---------- FICHA (Seed claro) ---------- */
.ficha{border:0;padding:0;margin:auto;background:transparent;width:min(1100px,calc(100vw - 32px));max-width:none;max-height:calc(100svh - 32px);color:var(--s-forest);overflow:visible}
.ficha::backdrop{background:rgba(28,58,19,.58);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ficha[open]{animation:ficha-entra .35s ease}
@keyframes ficha-entra{from{opacity:0;transform:translateY(12px)}}
.ficha-caja{position:relative;background:var(--s-snow);border-radius:32px;display:grid;grid-template-columns:1fr 1.05fr;overflow:hidden;max-height:calc(100svh - 32px)}
.ficha-visor{position:relative;background:var(--s-stone);min-height:560px;display:grid;place-items:center;grid-template-rows:100%}
.ficha-visor canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
.ficha-visor canvas:active{cursor:grabbing}
.ficha-visor img{height:74%;width:auto;max-width:78%;object-fit:contain}
.ficha-visor.con-3d img{visibility:hidden}
.ficha-visor:not(.con-3d) canvas{visibility:hidden}
.ficha-pista{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-family:var(--font-mono);font-size:12px;letter-spacing:.015em;color:var(--s-pewter)}
.ficha-visor:not(.con-3d) .ficha-pista{display:none}
.ficha-info{padding:48px 48px 40px;overflow:auto;display:flex;flex-direction:column;gap:20px;min-width:0}
.ficha-etiquetas{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-right:48px}
.ficha-nombre{font-weight:350;font-size:clamp(34px,3.4vw,48px);line-height:1.1;letter-spacing:-0.72px;color:var(--s-forest);text-wrap:balance}
.ficha-desc{font-size:18px;line-height:1.4;letter-spacing:-0.18px;color:var(--s-forest);max-width:46ch}
.ficha-datos{display:grid;grid-template-columns:max-content 1fr;gap:10px 20px;font-family:var(--font-mono);font-size:14px;line-height:1.5;letter-spacing:.015em;padding-top:20px;box-shadow:0 -1px 0 var(--s-stone)}
.ficha-datos dt{color:var(--s-pewter)}
.ficha-datos dd{color:var(--s-forest)}
.ficha-uso h3{font-weight:500;font-size:16px;line-height:1.5}
.ficha-uso ol{margin:8px 0 0 20px;display:grid;gap:6px;font-size:16px;line-height:1.5}
.ficha-acciones{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:auto;padding-top:8px}
.btn-seed-primario{display:inline-flex;padding:16px 24px;border-radius:1000px;background:var(--s-forest);color:var(--s-snow);font-size:16px;font-weight:400;line-height:1;transition:background .2s}
.btn-seed-primario:hover{background:#264d1a}
.link-flecha{appearance:none;border:0;background:transparent;cursor:pointer;color:var(--s-forest);font-size:16px;line-height:1.5;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;padding:7px 10.5px}
.ficha-cerrar{position:absolute;top:16px;right:16px;z-index:3;width:44px;height:44px;border-radius:1000px;border:0;background:var(--s-snow);box-shadow:inset 0 0 0 1.5px var(--s-forest);display:grid;place-items:center;cursor:pointer}
.ficha-cerrar svg{width:18px;height:18px;stroke:var(--s-forest);stroke-width:1.75;fill:none;stroke-linecap:round}
body.ficha-abierta{overflow:hidden}

/* ---------- Dark Section Card + calculadora (Wise) ---------- */
.dark-card{background:var(--color-forest-ink);border-radius:var(--radius-largecards);padding:var(--spacing-40);color:var(--color-paper);display:grid;grid-template-columns:1.1fr 1fr;gap:var(--spacing-40);align-items:center}
.dark-card .subheading{color:var(--color-lime-voltage)}
.dark-card .body{color:var(--color-paper);margin-top:var(--spacing-16)}
.inset{background:var(--color-paper);border-radius:var(--radius-cards);padding:var(--spacing-16);color:var(--color-charcoal);display:flex;flex-direction:column;gap:var(--spacing-12)}
.selector{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-12);background:var(--color-paper);border-radius:var(--radius-tags);padding:var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-12);box-shadow:var(--shadow-subtle)}
.selector .izq{display:flex;align-items:center;gap:var(--spacing-12);min-width:0}
.selector .thumb{width:24px;height:24px;border-radius:var(--radius-imagemasks);background:var(--color-fog);display:grid;place-items:center;overflow:hidden;flex:none}
.selector .thumb img{height:20px;width:auto}
.selector .nombre{font-weight:500;font-size:var(--text-body-sm);color:var(--color-charcoal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selector .btn-outline{padding:6px var(--spacing-16);font-size:var(--text-caption)}
.input{width:100%;border-radius:var(--radius-inputs);border:1px solid var(--color-pebble);padding:var(--spacing-12) var(--spacing-16);font-size:var(--text-body-sm);color:var(--color-charcoal);background:var(--color-paper)}
.input:focus{outline:0;border-color:var(--color-forest-ink)}
.resultado{border-top:1px solid var(--color-fog);padding-top:var(--spacing-12);margin-top:var(--spacing-4)}
.resultado .heading-sm{margin:var(--spacing-4) 0}

/* ---------- 2 columnas, Más de cerca, solar (Wise) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-48);align-items:center}
.split .visual{background:var(--color-fog);border-radius:var(--radius-largecards);min-height:460px;display:grid;place-items:center;grid-template-rows:100%;perspective:1200px;overflow:hidden}
.band-forest .split .visual{background:var(--color-spruce)}
.obj{position:relative;height:76%;aspect-ratio:1112/1600;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .35s ease}
.obj img{height:100%;width:100%;object-fit:contain}
.obj .spec{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 30% 40% at var(--sx) var(--sy),rgba(255,255,255,.5),transparent 70%);-webkit-mask:var(--mask) center/contain no-repeat;mask:var(--mask) center/contain no-repeat;mix-blend-mode:screen}
.stats{display:flex;gap:var(--spacing-40);flex-wrap:wrap;margin-top:var(--spacing-32)}
.stats .n{font-weight:900;font-size:var(--text-heading-sm);line-height:1;letter-spacing:-0.03em}
.stats .caption{color:rgba(255,255,255,.72);margin-top:var(--spacing-8)}
.disc{border-top:1px solid #d5dad2}
.disc:last-of-type{border-bottom:1px solid #d5dad2}
.disc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--spacing-16);padding:var(--spacing-20) 0;font-weight:700;font-size:18px;color:var(--color-obsidian)}
.disc summary::-webkit-details-marker{display:none}
.disc .plus{width:28px;height:28px;border-radius:var(--radius-tags);background:var(--color-linen-mist);color:var(--color-forest-ink);display:grid;place-items:center;font-weight:700;transition:transform .2s}
.disc[open] .plus{transform:rotate(45deg);background:var(--color-lime-voltage);color:var(--color-charcoal)}
.disc-body{padding:0 0 var(--spacing-20) 44px;font-size:var(--text-body-sm);line-height:1.5;color:var(--color-slate);max-width:52ch}
.closer-media{position:relative;height:460px;display:grid;place-items:center;grid-template-rows:100%;background:var(--color-paper);border-radius:var(--radius-largecards);perspective:1200px;overflow:hidden}
.closer-media .obj{height:78%}
.closer-media .pastilla{position:absolute;right:12%;bottom:12%;width:88px;height:auto;transition:opacity .3s}

/* ---------- Pasos, cierre, pie (Wise) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-16)}
.step{background:var(--color-paper);border-radius:var(--radius-cards);padding:var(--card-padding);box-shadow:var(--shadow-subtle)}
.step .tag{margin-bottom:var(--spacing-16)}
.step h3{font-weight:700;font-size:18px;line-height:1.4;color:var(--color-obsidian)}
.step p{margin-top:var(--spacing-8);font-size:var(--text-body-sm);line-height:1.5;color:var(--color-pebble)}
.cta{text-align:center}
.cta .heading{max-width:16ch;margin-inline:auto;text-transform:uppercase;letter-spacing:-0.035em}
.cta .acciones{display:flex;align-items:center;justify-content:center;gap:var(--spacing-24);margin-top:var(--spacing-32);flex-wrap:wrap}
footer{padding-block:var(--spacing-40);box-shadow:0 -1px 0 var(--color-fog)}
footer .wide{display:flex;justify-content:space-between;gap:var(--spacing-24);flex-wrap:wrap}
footer p{font-size:var(--text-caption);line-height:1.55;color:var(--color-slate)}
footer .logo{height:28px;width:auto;margin-bottom:var(--spacing-12)}
footer a{text-decoration:underline;text-underline-offset:3px;color:var(--color-forest-ink)}

/* Floating Badge (Wise) · se oculta mientras se ve el hero, que ya tiene su propio llamado */
.badge{position:fixed;right:var(--spacing-24);bottom:calc(var(--spacing-24) + env(safe-area-inset-bottom,0px));width:120px;background:var(--color-forest-ink);border-radius:16px;padding:var(--spacing-12);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-8);z-index:40;box-shadow:var(--shadow-lg);transition:opacity .3s ease,transform .3s ease}
.badge.oculto{opacity:0;transform:translateY(12px);pointer-events:none}
.badge .qr{width:72px;height:72px;border-radius:var(--radius-cards);background:var(--color-paper);display:grid;place-items:center}
.badge .qr svg{width:40px;height:40px;fill:var(--color-forest-ink)}
.badge span{font-weight:500;font-size:var(--text-micro);line-height:1.3;color:var(--color-lime-voltage);text-align:center}

.reveal{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .reveal{transform:translateY(10px);transition:transform .6s ease}
  .reveal.in{transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .features,.steps{grid-template-columns:1fr 1fr}
  .dark-card,.split{grid-template-columns:1fr}
  .seg{display:none}
}
/* Hero apilado: tableta vertical y celular. La escena arriba y el texto debajo, sobre el ónix. */
@media (max-width:900px),(max-aspect-ratio:5/4){
  .hero{height:auto;min-height:0;max-height:none;overflow:visible}
  .hero-escena{position:relative;height:clamp(460px,72svh,820px);overflow:hidden}
  .hero-poster,.hero-video{object-position:50% 70%}
  .hero-calor{background:radial-gradient(70% 18% at 50% 44%,rgba(255,182,124,.7) 0%,rgba(255,164,100,.3) 46%,rgba(255,140,80,0) 100%)}
  .niebla-ladera{--op:.3}.niebla-valle{--op:.5}
  .hero-contenido{position:relative;bottom:auto;flex-direction:column;align-items:stretch;gap:20px;margin-top:-44px;padding-bottom:20px}
  .hero-accion{width:100%;max-width:520px}
  .tinted{font-size:clamp(42px,11vw,64px)}
  .hero-aviso{position:static;transform:none;margin:0 20px 28px;display:block;background:var(--m-graphite)}
}
@media (max-width:760px){
  .ficha{width:100vw;max-height:100svh;height:100svh;margin:0}
  .ficha-caja{grid-template-columns:1fr;border-radius:0;height:100%;max-height:none;overflow:auto}
  .ficha-visor{min-height:46svh}
  .ficha-info{padding:28px 20px 40px;overflow:visible}
}
@media (max-width:600px){
  .features,.steps{grid-template-columns:1fr}
  .nav-right .btn-text{display:none}
  .badge{display:none}
  .closer-media,.split .visual{min-height:380px;height:380px}
  .catalogo{padding-block:72px}
  .cat-grid{gap:8px}
  .cat-card{padding:12px 8px}
  .cat-card .badge-lime{top:44px;left:8px}
  .cat-nombre{font-size:20px}
  .btn-seed{padding:10px 16px;font-size:15px}
}