/* ============================================================
   Poolixo · página de venta
   Los colores y las letras viven SOLO en este :root.
   Ningún hex vive fuera de aquí — mantenlo así.
   ============================================================ */

:root{
  /* Superficies = profundidad de agua: de la parte honda (--bg) a la orilla (--surface-3). */
  --bg:#0A131C;
  --surface:#11202C;
  --surface-2:#182A38;
  --surface-3:#22394A;
  --border:#284053;
  --paper:#FFFFFF;
  --paper-2:#ECF0F5;
  --ink:#16212C;
  --ink-soft:#586673;
  --text:#D6DEE8;
  --text-muted:#9DACBC;
  --text-display:#ECF1F7;
  --text-on-accent:#FFFFFF;
  --primary:#0E6FA3;
  --primary-deep:#0A5478;
  --primary-soft:#5FB4E0;
  --lime:#3FC4B8; /* 4º acento fresco: teal terciario on-dark */
  --accent:#C94420;
  --accent-bold:#F17A4E;
  --accent-soft:#DE8B63;
  --amber:#E3A62B;
  --earth:#8A6A3F;
  /* Travertino: la piedra del borde y del deck. Es el material de la obra —
     lleva las líneas de estructura (reglas, horas, la manija del antes/después)
     para que el dorado quede libre y solo marque lo que de verdad importa. */
  --piedra:#C9A87C;
  --piedra-deep:#8E7454;
  --display:'Outfit', system-ui, sans-serif;
  --body:'Lexend', Arial, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --radius:14px;
  --shadow:0 24px 60px rgba(6, 12, 20, 0.45);

  --maxw:1180px; --nav-h:62px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--amber); text-decoration:none; }
h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.06; color:var(--text-display); text-wrap:balance; }
::selection{ background:var(--accent); color:var(--text-on-accent); }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:4px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── ambiente: el agua que se aclara mientras bajas (var --claridad la sube el JS) ──
   Dos capas: el color del agua (degradados suaves) y la red de luz del fondo de la
   piscina. La red se dibuja con ruido fractal, no con anillos repetidos: los anillos
   producen moiré —esas rayas de impresión mal hecha— y el ruido produce filamentos
   orgánicos, que es como se ve la luz de verdad bajo el agua. */
.agua{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(86% 54% at 8% -8%,   color-mix(in srgb, var(--lime) 9%, transparent), transparent 62%),
    radial-gradient(74% 46% at 98% 2%,   color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%),
    radial-gradient(128% 76% at 86% 114%, color-mix(in srgb, var(--amber) 13%, transparent), transparent 58%);
  opacity:calc(.45 + var(--claridad,0)*.55);
}
.agua::after{
  content:""; position:absolute; inset:-14%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0055 0.010' numOctaves='3' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.373 0 0 0 0 0.706 0 0 0 0 0.878 0.95 0 0 0 -0.46'/%3E%3C/filter%3E%3Crect width='760' height='760' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size:760px 760px;
  opacity:calc(.06 + var(--claridad,0)*.14);
  animation:corriente 48s linear infinite;
}
@keyframes corriente{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-190px,152px,0) } }
@media (prefers-reduced-motion:reduce){ .agua::after{ animation:none } }
/* grano fino de película */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.shell{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,4vw,2rem); }
.kicker{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber); display:inline-flex; align-items:flex-start; gap:8px;
}
/* alineado al primer renglón: centrado, cuando el rótulo se parte en dos líneas
   en el teléfono, el rombo quedaba flotando en medio de la nada */
.kicker svg{ width:14px; height:14px; stroke:var(--amber); flex:none; margin-top:.12em; }
.kicker--accent{ color:var(--accent-soft); } .kicker--accent svg{ stroke:var(--accent-soft); }

/* ── nav ── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(1rem,4vw,2rem);
  background:color-mix(in srgb, var(--bg) 10%, transparent);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent; transition:background .3s ease, border-color .3s ease;
}
.nav.solid{ background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom-color:var(--border); }
.nav__logo{ display:flex; align-items:center; }
.nav__logo img{ height:30px; width:auto; }
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.5vw,1.8rem); }
.nav__links a{ position:relative; color:var(--text-display); font-weight:500; font-size:.95rem; }
.nav__links a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px;
  background:var(--amber); transition:right .28s cubic-bezier(.22,.9,.24,1);
}
.nav__links a:not(.nav__cta):hover::after{ right:0; }
.nav__cta{ background:var(--accent); color:var(--text-on-accent) !important; font-weight:600; padding:.5rem .95rem; border-radius:.7rem; }
.nav__cta:hover{ background:var(--accent-bold); }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.4rem; position:relative; z-index:52; }
.nav__burger span{ width:24px; height:2px; background:var(--text-display); border-radius:2px; transition:.25s; }
.nav__scrim{
  position:fixed; inset:0; z-index:40; display:none;
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease;
}
body.menu-open{ overflow:hidden; }

/* ── botones ── */
.btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--body); font-weight:700; font-size:1rem; padding:.95rem 1.7rem; border:0; cursor:pointer;
  border-radius:.8rem; text-decoration:none; transition:transform .16s ease, background .18s ease, box-shadow .18s ease;
}
.btn--brasa{ background:var(--accent); color:var(--text-on-accent); box-shadow:0 14px 34px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn--brasa:hover{ background:var(--accent-bold); }
.btn--ghost{ background:color-mix(in srgb, var(--text-display) 5%, transparent); border:1px solid var(--border); color:var(--text-display); }
.btn--ghost:hover{ border-color:var(--primary-soft); }
.btn .arw{ display:inline-flex; transition:transform .2s ease; }
.btn .arw svg{ width:18px; height:18px; stroke:currentColor; }
.btn:hover .arw{ transform:translateX(4px); }
.btn .shine{
  position:absolute; top:0; bottom:0; left:-70%; width:46%; pointer-events:none;
  background:linear-gradient(105deg,transparent,color-mix(in srgb, var(--text-on-accent) 34%, transparent),transparent);
  animation:shine 6.5s ease-in-out infinite;
}
@keyframes shine{ 0%,72%{left:-70%} 88%,100%{left:130%} }
.btn.clap{ animation:clap .4s ease; }
@keyframes clap{ 40%{transform:scale(.96)} 100%{transform:scale(1)} }
.btn-row{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.7rem; }
.btn-note{ color:var(--text-muted); font-family:var(--mono); font-size:.8rem; letter-spacing:.04em; margin-top:1rem; }

/* ── secciones base + revelados ── */
.sec{ position:relative; padding:clamp(3.6rem,10vh,7rem) 0; }
.sec__head{ max-width:660px; margin-bottom:clamp(2rem,5vw,3rem); }
.sec__head h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin:.5rem 0 .6rem; letter-spacing:-.01em; }
.sec__head p{ color:var(--text-muted); font-size:1.08rem; }
.eyebrow{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.5rem; }
.eyebrow .num{
  font-family:var(--display); font-weight:700; font-size:1.5rem; line-height:1; color:transparent;
  -webkit-text-stroke:1.4px var(--amber); transition:color .5s ease, -webkit-text-stroke-color .5s ease;
}
.eyebrow.in .num{ color:color-mix(in srgb, var(--amber) 22%, transparent); }
.eyebrow .lbl{ font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-muted); }
.eyebrow .rule{ flex:1; height:1px; background:var(--border); }

.js [data-r]{ opacity:0; transform:translateY(22px); }
.js [data-r].in{ opacity:1; transform:none; transition:opacity .7s ease, transform .8s cubic-bezier(.22,.9,.24,1); }
.js [data-rs]>*{ opacity:0; transform:translateY(18px); }
.js [data-rs].in>*{ opacity:1; transform:none; transition:opacity .6s ease calc(var(--i,0)*90ms), transform .7s cubic-bezier(.22,.9,.24,1) calc(var(--i,0)*90ms); }

.marker{
  background-image:linear-gradient(to top,color-mix(in srgb, var(--amber) 90%, transparent),color-mix(in srgb, var(--amber) 90%, transparent));
  background-repeat:no-repeat; background-position:0 90%; background-size:100% .32em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.js .marker{ background-size:0% .32em; }
.ready .hero .marker,.in .marker{ background-size:100% .32em; transition:background-size .7s cubic-bezier(.2,.9,.3,1) .6s; }

/* ════════ S1 · HÉROE DE CINE ════════ */
.hero{ position:relative; min-height:92vh; display:flex; align-items:center; padding:calc(var(--nav-h) + 3vh) 0 6vh; }
.hero-fondo{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.hero-fondo img{ width:100%; height:100%; object-fit:cover; object-position:70% 32%; filter:saturate(1.05); }
.js .hero-fondo img{ opacity:0; transform:scale(1.1); }
.ready .hero-fondo img{ opacity:1; transform:scale(1); transition:opacity 1.1s ease .05s, transform 32s cubic-bezier(.16,.6,.24,1) .05s; }
.hero-fondo .velo{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 44%, color-mix(in srgb, var(--bg) 40%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, transparent 30%, transparent 60%, var(--bg) 98%);
}
.hero-sweep{
  position:absolute; top:-12%; bottom:-12%; left:0; width:36%; opacity:0; pointer-events:none;
  transform:translateX(-140%) skewX(-14deg); mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--amber) 30%, transparent) 42%,color-mix(in srgb, var(--accent-soft) 22%, transparent) 58%,transparent);
}
[data-sweep] .ready .hero-sweep{ animation:sweep 1.9s cubic-bezier(.3,.7,.3,1) .12s forwards; }
@keyframes sweep{ 0%{transform:translateX(-140%) skewX(-14deg);opacity:0} 12%{opacity:1} 85%{opacity:.85} 100%{transform:translateX(460%) skewX(-14deg);opacity:0} }
.hero__in{ position:relative; z-index:1; max-width:680px; }
/* glow suave detrás del texto del héroe para que resalte sobre la foto */
.hero__in::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:-9%; right:-6%; top:-9%; bottom:-7%;
  background:radial-gradient(120% 82% at 30% 42%,
    color-mix(in srgb, var(--bg) 82%, transparent) 0%,
    color-mix(in srgb, var(--bg) 50%, transparent) 44%,
    transparent 74%);
  filter:blur(7px);
}
.hero h1{ font-size:clamp(2.05rem,4.4vw,3.25rem); line-height:1.08; letter-spacing:-.015em; margin:1.1rem 0 1.2rem; max-width:16ch; text-shadow:0 2px 26px color-mix(in srgb, var(--bg) 82%, transparent); }
.hero h1 .hl{ color:var(--accent-bold); }
.hero h1 .line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.js .hero h1 .w{ display:inline-block; transform:translateY(115%); opacity:0; }
.ready .hero h1 .w{ transform:none; opacity:1; transition:transform .8s cubic-bezier(.22,.9,.24,1) calc(var(--i)*50ms), opacity .5s linear calc(var(--i)*50ms); }
.hero .sub{ font-size:1.18rem; color:var(--text); max-width:56ch; margin-bottom:1.6rem; text-shadow:0 1px 18px color-mix(in srgb, var(--bg) 68%, transparent); }
.rotador{ color:var(--amber); font-style:italic; font-family:var(--display); font-weight:500; }
.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:1.6rem; }
.chips li{
  display:inline-flex; align-items:center; gap:8px; font-size:.9rem;
  background:color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter:blur(4px);
  border:1px solid var(--border); border-radius:999px; padding:9px 16px;
}
.chips svg{ width:16px; height:16px; stroke:var(--amber); flex:none; }

/* La línea de flotación: el canto de travertino del borde de la piscina, donde
   el agua toca la piedra. Es el remate que separa las secciones que van sin foto.
   Se apoya en el borde que ya existía; no agrega ni un elemento al HTML. */
.alivio,.quote{ position:relative; }
.alivio::before,.quote::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px; pointer-events:none;
  background:linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--piedra) 52%, transparent) 14%,
    color-mix(in srgb, var(--piedra) 52%, transparent) 86%,
    transparent);
}

/* ════════ S2 · ALIVIO (texto que se enciende) ════════ */
.alivio{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.alivio .shell{ max-width:1000px; text-align:center; }
.alivio .stmt{
  font-family:var(--display); font-weight:600; font-variation-settings:"opsz" 90;
  font-size:clamp(1.7rem,4.4vw,3rem); line-height:1.22; letter-spacing:-.01em; max-width:22ch; margin:0 auto;
}
.alivio .stmt .w{ color:var(--text-muted); transition:color .5s ease; }
.alivio .stmt .w.lit{ color:var(--text-display); }
.alivio .stmt .rem{ color:var(--text-muted); }
.alivio .stmt .rem.lit{ color:var(--amber); }
[data-parallax] .alivio .stmt{ animation:breathe 9s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{font-variation-settings:"opsz" 80,"wght" 560} 50%{font-variation-settings:"opsz" 120,"wght" 630} }
.alivio .firma{ margin-top:1.8rem; font-family:var(--mono); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); position:relative; display:inline-block; }
/* El óvalo se estira a la caja de la palabra (preserveAspectRatio="none" en el
   SVG) en vez de encajar por altura: así rodea la palabra en lugar de cortarla.
   non-scaling-stroke evita que el estirón engorde el trazo de los costados.
   El margen de la palabra abre el hueco donde el trazo puede pasar sin tocar
   las palabras vecinas. */
.alivio .firma .solo{ position:relative; margin-inline:.75em; }
.alivio .firma .circulo{ position:absolute; left:-11px; right:-11px; top:-9px; bottom:-9px; pointer-events:none; }
.alivio .firma .circulo path{ fill:none; stroke:var(--accent-soft); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:340; stroke-dashoffset:340; vector-effect:non-scaling-stroke; }
.alivio.in .firma .circulo path{ stroke-dashoffset:0; transition:stroke-dashoffset 1.4s ease .5s; }

/* ════════ S3 · DOLOR (banda de cine + notas) ════════ */
.cine{ position:relative; height:clamp(320px,52vh,520px); overflow:hidden; display:flex; align-items:flex-end; }
.cine img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.cine .velo{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, color-mix(in srgb,var(--bg) 40%,transparent), color-mix(in srgb,var(--bg) 30%,transparent) 45%, var(--bg) 99%); }
.cine .cine__frase{ position:relative; z-index:2; width:100%; }
.cine .cine__frase p{ font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(1.3rem,3.2vw,2rem); color:var(--text-display); max-width:26ch; padding-bottom:1.6rem; text-shadow:0 2px 24px color-mix(in srgb,var(--bg) 70%,transparent); }
.js .cine img{ transform:scale(1.08); }
.in.cine img,.cine.in img{ transform:scale(1); transition:transform 14s cubic-bezier(.2,.7,.3,1); }

.dolor{ background:var(--surface); }
.notas{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem 1.6rem; margin-top:.5rem; }
.nota{
  position:relative; background:var(--paper); color:var(--ink); border-radius:6px; padding:1.4rem 1.5rem 1.5rem;
  box-shadow:0 18px 40px color-mix(in srgb,var(--bg) 55%,transparent); font-size:1.02rem; line-height:1.5;
  transform:rotate(var(--rot,-1.4deg)); transition:transform .35s cubic-bezier(.22,.9,.24,1), box-shadow .35s ease;
}
/* La cinta de papel: en dorado translúcido sobre blanco salía un manchón oliva.
   En travertino opaco se lee como lo que es, un pedazo de cinta pegado. */
.nota::before{ content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(-3deg); width:74px; height:19px; background:var(--piedra); opacity:.85; border-radius:2px; box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 22%, transparent); }
.nota:nth-child(2){ --rot:1.2deg; } .nota:nth-child(3){ --rot:1deg; } .nota:nth-child(4){ --rot:-1deg; }
.nota:hover{ transform:rotate(0deg) translateY(-3px); box-shadow:0 26px 54px color-mix(in srgb,var(--bg) 62%,transparent); }
.nota b{ color:var(--accent-bold); }
.js .notas [data-r]{ opacity:0; transform:translateY(22px) rotate(var(--rot,-1.4deg)); }
.js .notas [data-r].in{ opacity:1; transform:rotate(var(--rot,-1.4deg)); }
.absol{ margin-top:2rem; font-family:var(--display); font-style:italic; font-size:clamp(1.15rem,2.6vw,1.55rem); color:var(--text-display); max-width:40ch; }
.absol em{ color:var(--amber); font-style:italic; }

/* ════════ S4 · CITA ════════ */
.quote{ background:var(--bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.quote{ padding-block:clamp(3rem,7vh,5rem); }
.quote .shell{ max-width:900px; }
/* La comilla vive FUERA de la caja de texto: antes se montaba sobre el primer
   renglón y se leía como un error de maquetación. */
.quote__card{ position:relative; padding:.2rem 0 .2rem clamp(3.4rem,8vw,6rem); }
.quote__mark{ position:absolute; top:-.15rem; left:0; width:clamp(38px,4.6vw,60px); height:auto; opacity:.7; }
.quote__mark path{ fill:none; stroke:var(--accent); stroke-width:6; stroke-linecap:round; stroke-dasharray:520; stroke-dashoffset:520; }
.quote.in .quote__mark path{ stroke-dashoffset:0; transition:stroke-dashoffset 1.5s ease .3s; }
.quote p{ font-family:var(--display); font-weight:500; font-size:clamp(1.35rem,3vw,2.15rem); line-height:1.34; letter-spacing:-.01em; color:var(--text-display); max-width:34ch; }

/* ════════ S5 · PORTAL (giro + comparación + caseta) ════════ */
.portal{ background:var(--surface-2); }
.portal__top{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.8rem,4vw,3.4rem); align-items:center; margin-bottom:clamp(2.4rem,5vw,3.6rem); }
.portal__art{ position:relative; }
.portal__blob{ position:absolute; inset:-14% -10%; z-index:0; fill:var(--surface-3); opacity:.6; filter:blur(2px); }
.mock{
  position:relative; z-index:1; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border);
  box-shadow:var(--shadow); background:var(--surface); transform:perspective(1000px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)); transition:transform .2s ease;
}
.mock__bar{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--border); }
.mock__bar i{ width:11px; height:11px; border-radius:50%; }
.mock__bar .d1{ background:var(--accent-soft); } .mock__bar .d2{ background:var(--primary-soft); } .mock__bar .d3{ background:var(--amber); }
.mock__bar .cap{ margin-left:8px; font-family:var(--mono); font-size:11px; color:var(--text-muted); }
.mock img{ width:100%; aspect-ratio:16/11; object-fit:cover; }
.mock__glare{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; background:linear-gradient(105deg,transparent 40%,color-mix(in srgb,var(--text-display) 22%,transparent) 50%,transparent 60%); transition:opacity .3s ease; }
.mock:hover .mock__glare{ opacity:1; }

/* comparación honesta */
.versus{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin-top:1.6rem; }
.vs{ border-radius:var(--radius); padding:1.4rem 1.4rem 1.5rem; border:1px solid var(--border); }
.vs--no{ background:var(--surface); }
.vs--si{ background:var(--paper); color:var(--ink); box-shadow:var(--shadow); }
.vs .vs__tag{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; display:flex; align-items:center; gap:6px; margin-bottom:.7rem; }
.vs--no .vs__tag{ color:var(--text-muted); } .vs--si .vs__tag{ color:var(--primary-deep); }
.vs .vs__tag svg{ width:15px; height:15px; }
.vs--no .vs__tag svg{ stroke:var(--accent-soft); } .vs--si .vs__tag svg{ stroke:var(--primary-deep); }
.vs p{ font-size:.98rem; line-height:1.5; }
.vs--si p{ color:var(--ink); }

/* caseta de herramientas */
.caseta{ position:relative; margin-top:clamp(2rem,4vw,3rem); }
.caseta__grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; }
/* Las diez tarjetas son UNA familia, no diez colores. La variedad la ponen los
   iconos; el color queda dentro del agua (azul piscina → turquesa). El coral no
   entra aquí: está reservado para lo único que se puede pulsar. */
.tool{
  position:relative; overflow:hidden; border-radius:var(--radius); padding:1.35rem 1.3rem 1.45rem;
  background:linear-gradient(168deg, color-mix(in srgb, var(--ac,var(--primary-soft)) 7%, var(--surface)), var(--surface) 62%);
  border:1px solid var(--border);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* el brillo de la superficie del agua sobre el canto de arriba */
.tool::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--ac,var(--primary-soft)) 60%, transparent) 22%, color-mix(in srgb,var(--ac,var(--primary-soft)) 60%, transparent) 78%, transparent);
}
.tool::after{ /* linterna que sigue el cursor */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb,var(--ac,var(--primary-soft)) 13%,transparent), transparent 60%);
}
.tool:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--ac,var(--primary-soft)) 46%, transparent);
  box-shadow:0 22px 48px -22px color-mix(in srgb,var(--ac,var(--primary-soft)) 45%, transparent);
}
.tool:hover::after{ opacity:1; }
.tool__head{ display:flex; align-items:center; gap:.7rem; margin-bottom:.7rem; }
.tool__chip{
  width:42px; height:42px; border-radius:.7rem; flex:none; display:grid; place-items:center;
  color:var(--ac,var(--primary-soft));
  background:linear-gradient(150deg, color-mix(in srgb,var(--ac,var(--primary-soft)) 22%, transparent), color-mix(in srgb,var(--ac,var(--primary-soft)) 8%, transparent));
  border:1px solid color-mix(in srgb,var(--ac,var(--primary-soft)) 32%, transparent);
}
.tool__chip svg{ width:22px; height:22px; stroke:currentColor; }
.tool .tag{ font-family:var(--mono); color:var(--text-muted); font-size:.66rem; letter-spacing:.14em; display:block; margin-bottom:.1rem; }
.tool h3{ font-size:1rem; line-height:1.2; color:var(--text-display); }
/* dos renglones reservados SOLO donde hay varias tarjetas por fila: si un título
   ocupa uno solo, su párrafo arrancaba más arriba y la fila quedaba desalineada.
   En una sola columna no hace falta y solo dejaría un hueco. */
@media (min-width:961px){ .tool h3{ min-height:2.4em; } }
.tool p{ margin-top:.4rem; font-size:.9rem; color:var(--text-muted); }
/* dos tonos de agua, alternados: dan ritmo sin volverse un arcoíris */
.tool.a-verde,.tool.a-ambar{ --ac:var(--primary-soft); }
.tool.a-lima,.tool.a-brasa{ --ac:var(--lime); }
.js .caseta__grid[data-rs]>*{ opacity:0; transform:translateY(16px) scale(.96); }
.js .caseta__grid[data-rs].in>*{ opacity:1; transform:none; transition:opacity .5s ease calc(var(--i,0)*70ms), transform .6s cubic-bezier(.34,1.4,.5,1) calc(var(--i,0)*70ms); }
/* tarjetas sombra: el sistema que sigue naciendo.
   Se disuelven hacia abajo con una máscara — así se leen como "viene más" y no
   como contenido que no cargó. */
.sombras{
  position:relative; z-index:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1rem; margin-top:.7rem;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 62%, transparent 100%);
}
.sombra{
  height:70px; border-radius:var(--radius);
  border:1px dashed color-mix(in srgb,var(--border) 85%, transparent);
  background:linear-gradient(168deg, color-mix(in srgb,var(--primary-soft) 4%, transparent), transparent 60%);
  position:relative; overflow:hidden; opacity:.55;
}
.sombra::before{ content:""; position:absolute; top:1.1rem; left:1.15rem; width:30px; height:30px; border-radius:.6rem; border:1px dashed color-mix(in srgb,var(--border) 80%, transparent); }
.sombra:nth-child(2){ opacity:.44; } .sombra:nth-child(3){ opacity:.34; } .sombra:nth-child(4){ opacity:.24; }
[data-parallax] .sombra{ animation:respira 7s ease-in-out infinite; }
.sombra:nth-child(2){ animation-delay:.7s; } .sombra:nth-child(3){ animation-delay:1.4s; } .sombra:nth-child(4){ animation-delay:2.1s; }
@keyframes respira{ 0%,100%{opacity:.30} 50%{opacity:.52} }
.caseta__nota{ margin-top:.2rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); display:flex; align-items:center; gap:.6rem; }
.caseta__nota .spark{ width:16px; height:16px; stroke:var(--piedra); }

/* ════════ S6 · TU MARTES (línea de tiempo vertical) ════════ */
.dia{ background:var(--surface); }
/* Columna editorial: la línea del día no necesita 1180px de ancho — con una
   medida corta la foto y el texto quedan en proporción y no sobra media tarjeta. */
.tl{ position:relative; margin-top:1rem; padding-left:0; max-width:830px; }
.tl__line{ position:absolute; left:calc(66px + .9rem); top:0; bottom:0; width:2px; background:linear-gradient(180deg, var(--amber), var(--primary-soft) 26%, var(--lime) 52%, var(--piedra) 76%, var(--accent-soft)); opacity:.45; }
.tl__row{ position:relative; display:grid; grid-template-columns:66px 1fr; gap:1.2rem; align-items:start; padding:.55rem 0; }
.tl__hora{ font-family:var(--mono); font-size:.82rem; color:var(--piedra); text-align:right; padding-top:1.35rem; }
.tl__card{ position:relative; display:flex; gap:1.15rem; align-items:center; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:.9rem 1.15rem .9rem .9rem; margin-left:1.8rem; transition:transform .22s ease, border-color .22s ease, background .22s ease; }
.tl__card::before{ content:""; position:absolute; left:-1.8rem; top:50%; width:12px; height:12px; border-radius:50%; background:var(--surface); border:2px solid var(--piedra); transform:translate(-5px,-50%); }
.tl__card:hover{ transform:translateX(3px); border-color:color-mix(in srgb,var(--primary-soft) 45%, transparent); background:color-mix(in srgb,var(--primary-soft) 4%, var(--surface-2)); }
.tl__img{ width:152px; height:114px; flex:none; object-fit:cover; border-radius:10px; border:1px solid var(--border); }
.tl__txt{ flex:1; min-width:0; }
.tl__card .tag{ font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; color:var(--text-muted); }
.tl__card h3{ font-size:1.04rem; margin:.15rem 0 .32rem; color:var(--text-display); }
.tl__card p{ font-size:.93rem; line-height:1.5; color:var(--text-muted); max-width:48ch; }

/* ════════ S7 · ⭐ EL CAUCE DE CLIENTES ════════ */
.cauce{ position:relative; background:var(--bg); }
.cauce__pin{ position:sticky; top:0; min-height:100vh; display:flex; align-items:center; overflow:hidden; padding:calc(var(--nav-h) + 1rem) 0; }
.cauce__wrap{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; width:100%; padding:0 clamp(1rem,4vw,2rem); display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,420px); gap:clamp(2rem,5vw,4rem); align-items:center; }
.cauce__intro{ max-width:38ch; }
.cauce__intro h2{ font-size:clamp(1.8rem,4vw,2.7rem); margin:.4rem 0 .7rem; }
.cauce__intro p{ color:var(--text-muted); }
/* El cauce se mide por ALTURA, no por ancho: con width:100% el SVG (120×560)
   crecía a ~1400px de alto dentro de una ventana de 900 y el pin lo recortaba
   arriba y abajo — se veía un río cortado pegado al borde. Atado a la altura de
   la ventana, entra entero y deja sitio a la izquierda para los rótulos. */
.cauce__stage{ position:relative; width:max-content; margin-left:auto; }
/* halo de agua detrás del cauce: sin él ese lado de la pantalla es un vacío */
.cauce__stage::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:50%; width:min(58vw,760px); aspect-ratio:1; transform:translate(-46%,-50%);
  background:radial-gradient(closest-side, color-mix(in srgb,var(--primary) 17%, transparent), transparent 72%);
  filter:blur(8px);
}
.cauce__svg{ position:relative; z-index:1; width:auto; height:min(72vh,600px); display:block; overflow:visible; }
.cauce__estaciones{ position:absolute; inset:0; pointer-events:none; }
.cauce-est{ position:absolute; right:100%; margin-right:18px; width:210px; text-align:right; transform:translateY(-50%); opacity:.4; transition:opacity .4s ease; }
.cauce-est.on{ opacity:1; }
.cauce-est .et{ font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--rc,var(--primary-soft)); }
.cauce-est h4{ font-family:var(--display); font-size:1.05rem; color:var(--text-display); margin:.15rem 0; }
.cauce-est .cifra{ font-family:var(--mono); font-size:1.4rem; color:var(--rc,var(--primary-soft)); }
.cauce-hint{ margin-top:1.4rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); display:flex; align-items:center; gap:.5rem; }
.cauce-hint svg{ width:15px; height:15px; stroke:var(--amber); animation:nudge 1.8s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* ════════ S8 · ANTES / DESPUÉS (arrastrable) ════════ */
.antes{ background:var(--surface-2); }
.antes__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3rem); align-items:center; }
.ba{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); aspect-ratio:3/2; user-select:none; touch-action:pan-y; }
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba__after{ z-index:1; }
.ba__before{ z-index:2; clip-path:inset(0 calc(100% - var(--sx,50%)) 0 0); }
.ba__tag{ position:absolute; top:12px; z-index:3; font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:color-mix(in srgb,var(--bg) 70%,transparent); color:var(--text-display); }
.ba__tag--b{ left:12px; } .ba__tag--a{ right:12px; }
/* La manija es de travertino: la misma piedra del borde de la piscina que se ve
   en las dos fotos. Deja de ser un control amarillo genérico y pasa a ser parte
   de la obra. */
/* La manija tiene que verse sobre CUALQUIER foto: sobre el deck claro la piedra
   sola desaparecía. Va con filo oscuro en la línea y anillo blanco en el agarre. */
.ba__handle{ position:absolute; top:0; bottom:0; z-index:4; left:var(--sx,50%); width:2px; background:var(--piedra); transform:translateX(-1px); cursor:ew-resize; box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 30%, transparent); }
.ba__grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%; background:var(--piedra); display:grid; place-items:center;
  border:2px solid color-mix(in srgb,#fff 82%, transparent);
  box-shadow:0 4px 16px color-mix(in srgb,var(--ink) 55%,transparent);
}
.ba__grip svg{ width:19px; height:19px; stroke:var(--ink); stroke-width:2.4; }
.antes__txt h2{ font-size:clamp(1.7rem,3.6vw,2.4rem); margin-bottom:.7rem; }
.antes__txt p{ color:var(--text-muted); max-width:46ch; }

/* ════════ S9 · PLANES ════════ */
.planes{ background:var(--surface-3); }
.planes__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2rem; align-items:stretch; }
.plan{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.9rem 1.5rem 1.7rem; display:flex; flex-direction:column; transition:transform .22s ease, border-color .22s ease; }
.plan:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--primary-soft) 40%, transparent); }
/* El plan recomendado se marca UNA vez, con el color de la acción y nada más:
   antes llevaba borde doble, resplandor coral de 58px y una cinta en degradado
   ámbar→coral, tres avisos peleando por el mismo mensaje. */
.plan--star{
  border-color:color-mix(in srgb,var(--accent) 70%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 7%, var(--surface)), var(--surface) 42%);
  box-shadow:0 26px 60px -30px color-mix(in srgb,var(--bg) 90%, transparent);
}
.plan .ribbon{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); white-space:nowrap; padding:.34rem 1rem; border-radius:999px; background:var(--accent); color:var(--text-on-accent); font-weight:700; font-size:.72rem; letter-spacing:.04em; }
.plan h3{ font-size:1.15rem; margin-bottom:.2rem; }
.plan .precio{ font-family:var(--mono); font-size:2rem; color:var(--text-display); font-weight:500; margin:.3rem 0; }
.plan .precio span{ font-size:.85rem; color:var(--text-muted); }
.plan .quien{ color:var(--text-muted); font-size:.9rem; margin-bottom:1.1rem; }
.plan ul{ list-style:none; margin:0 0 1.5rem; display:grid; gap:.55rem; font-size:.95rem; }
.plan li{ position:relative; padding-left:1.6rem; }
.plan li svg{ position:absolute; left:0; top:5px; width:15px; height:15px; stroke:var(--primary-soft); }
.plan .btn{ margin-top:auto; justify-content:center; width:100%; }
.planes__nota{ margin-top:1.6rem; color:var(--text-muted); font-size:.95rem; max-width:70ch; }
.planes__nota b{ color:var(--text-display); }

/* ════════ S10 · OBJECIONES (chat) ════════ */
.obj{ background:var(--surface); }
.obj__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.6rem,4vw,3rem); align-items:center; }
.obj__art{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); aspect-ratio:4/5; }
.obj__art img{ width:100%; height:100%; object-fit:cover; }
.obj__chat{ display:flex; flex-direction:column; gap:1rem; }
.ob{ display:grid; gap:.5rem; }
.ob .q{ align-self:flex-start; max-width:80%; background:var(--surface-2); border:1px solid var(--border); border-bottom-left-radius:4px; border-radius:14px; padding:.7rem 1rem; font-weight:600; color:var(--text-display); }
.ob .a{ align-self:flex-end; max-width:88%; background:var(--paper); color:var(--ink); border-bottom-right-radius:4px; border-radius:14px; padding:.8rem 1.1rem; font-size:.96rem; line-height:1.5; }
.ob .a b{ color:var(--primary-deep); }

/* ════════ S11 · CIERRE ════════ */
.cierre{ position:relative; min-height:80vh; display:flex; align-items:center; overflow:hidden; text-align:center; }
.cierre .hero-fondo img{ object-position:50% 55%; }
.cierre__in{ position:relative; z-index:1; max-width:60ch; margin:0 auto; }
.cierre h2{ font-size:clamp(2rem,4.6vw,3rem); margin:1rem 0 .8rem; }
.cierre .sub{ color:var(--text); font-size:1.15rem; max-width:52ch; margin:0 auto 1.6rem; text-shadow:0 1px 18px color-mix(in srgb,var(--bg) 66%,transparent); }
.cierre .btn-row{ justify-content:center; }
.cierre .btn-note{ text-align:center; }

/* ── footer ── */
.foot{ position:relative; z-index:1; padding:2.6rem 1.5rem; text-align:center; color:var(--text-muted); font-size:.85rem; border-top:1px solid var(--border); }
.foot__logo{ display:inline-block; position:relative; margin-bottom:.9rem; }
.foot__logo img{ height:26px; opacity:.9; }
.foot__onda{ position:absolute; left:50%; bottom:100%; transform:translateX(-50%); width:34px; height:34px; opacity:0; pointer-events:none; }
.foot__onda .gota,.foot__onda .onda-1,.foot__onda .onda-2,.foot__onda .onda-3{ opacity:0; }
[data-humor] .foot__logo:hover .foot__onda{ opacity:1; }
[data-humor] .foot__logo:hover .gota{ opacity:1; transition:opacity .3s ease; }
[data-humor] .foot__logo:hover .onda-1{ opacity:1; transition:opacity .4s ease .15s; }
[data-humor] .foot__logo:hover .onda-2{ opacity:1; transition:opacity .4s ease .3s; }
[data-humor] .foot__logo:hover .onda-3{ opacity:1; transition:opacity .4s ease .5s; }
.foot__mini{ margin-top:.3rem; opacity:.8; }

/* ════════ responsivo ════════ */
@media (max-width:960px){
  .portal__top{ grid-template-columns:1fr; }
  /* la mancha decorativa se salía 20px por el costado y hacía que la página se
     pudiera arrastrar de lado en el teléfono */
  .portal__blob{ inset:-10% 0; }
  /* en móvil el cauce es una lista, no una columna a la derecha */
  .cauce__stage{ width:auto; margin-left:0; }
  .cauce__stage::before{ display:none; }
  /* el cauce, en móvil, es una línea de tiempo vertical con la misma gradiente del viaje (sin el SVG serpenteante) */
  .cauce__wrap{ grid-template-columns:1fr; gap:1rem; }
  .cauce__svg{ display:none; }
  .cauce-hint{ display:none; }
  .cauce__estaciones{ position:relative; display:grid; gap:1.5rem; margin-top:1.4rem; padding-left:1.8rem; }
  .cauce__estaciones::before{ content:""; position:absolute; left:5px; top:.5rem; bottom:.5rem; width:2px; background:linear-gradient(180deg,var(--primary-soft),var(--lime) 35%,var(--amber) 68%,var(--accent-soft)); opacity:.6; }
  .cauce-est{ position:relative; top:auto !important; right:auto; left:auto; width:auto; text-align:left; margin:0; transform:none; opacity:1; }
  .cauce-est::before{ content:""; position:absolute; left:-1.8rem; top:.4rem; width:12px; height:12px; border-radius:50%; background:var(--rc); box-shadow:0 0 0 3px var(--bg); }
  .obj__grid{ grid-template-columns:1fr; } .obj__art{ aspect-ratio:16/9; max-height:280px; }
  .antes__grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  /* Las tarjetas sombra caían en UNA columna: cuatro cajas vacías apiladas dejaban
     medio metro de nada antes del remate. De a dos, y solo dos, el gesto se
     entiende igual y no cuesta pantalla. */
  .sombras{ grid-template-columns:repeat(2,1fr); }
  .sombra:nth-child(n+3){ display:none; }
  /* el aire entre secciones se mide en vh: en un teléfono alto dejaba franjas
     vacías de casi 200px entre una sección y la siguiente */
  .sec{ padding:clamp(2.8rem,7vh,4.6rem) 0; }
  .nav__burger{ display:flex; }
  .nav__scrim{ display:block; } .nav__scrim.open{ opacity:1; visibility:visible; }
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0; z-index:51; flex-direction:column; gap:0;
    background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    padding:.5rem 0; border-bottom:1px solid var(--border); box-shadow:0 18px 40px color-mix(in srgb,var(--bg) 50%,transparent);
    transform:translateY(-130%); transition:transform .28s ease; visibility:hidden;
  }
  .nav__links.open{ transform:translateY(0); visibility:visible; }
  .nav__links a{ width:100%; padding:.9rem clamp(1rem,4vw,2rem); }
  .nav__links a:not(.nav__cta)::after{ display:none; }
  .nav__cta{ border-radius:0; margin:.4rem clamp(1rem,4vw,2rem); text-align:center; }
  .nav__burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav__burger.open span:nth-child(2){ opacity:0; }
  .nav__burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .notas{ grid-template-columns:1fr; }
  .versus{ grid-template-columns:1fr; }
  .planes__grid{ grid-template-columns:1fr; }
  /* Línea de tiempo en móvil: la foto va ARRIBA, ancha. De costado quedaba en 82px
     —decorativa, no se veía nada— y le dejaba al texto una columna de 160px donde
     un título de cuatro palabras caía en tres renglones. */
  .tl__row{ grid-template-columns:48px 1fr; gap:.7rem; }
  .tl__line{ left:calc(48px + .9rem); }
  .tl__card{ flex-direction:column; align-items:stretch; gap:.75rem; padding:.75rem; }
  .tl__img{ width:100%; height:118px; }
  .tl__hora{ font-size:.74rem; padding-top:.9rem; }
  .hero-fondo img{ object-position:64% 26%; }
  .hero-fondo .velo{ background:linear-gradient(180deg, color-mix(in srgb,var(--bg) 66%,transparent), color-mix(in srgb,var(--bg) 52%,transparent) 42%, var(--bg) 97%); }
  .cauce__pin{ min-height:auto; position:relative; }
}

/* ════════ menos movimiento: quieto y legible ════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .js [data-r],.js [data-rs]>*,.js .hero h1 .w,.js .caseta__grid[data-rs]>*{ opacity:1 !important; transform:none !important; }
  .js .hero-fondo img,.js .cine img{ opacity:1 !important; transform:none !important; }
  .hero-sweep{ display:none !important; }
  .js .marker,.in .marker{ background-size:100% .32em !important; }
  .alivio .stmt .w{ color:var(--text-display) !important; } .alivio .stmt .rem{ color:var(--amber) !important; }
  .quote__mark path,.alivio .firma .circulo path{ stroke-dashoffset:0 !important; }
}

/* ════════ aviso: esto es el archivo MASTER, no la página ════════
   index.template.html trae las 11 secciones como marcadores <!-- SECCION: … -->,
   así que abierto a mano se ve un <main> vacío: nav, un vacío enorme y el pie.
   Parece que la página se rompió, y no: es la fuente.
   En index.html el <main> tiene 11 <section> hijos, así que esta regla NO aplica
   nunca ahí. Cuesta cero en la página real y evita el susto en el maestro. */
main:not(:has(> *)){
  min-height:60vh; display:grid; place-items:center; padding:2rem;
}
main:not(:has(> *))::before{
  content:"Estás viendo el archivo maestro. Tu página es index.html — para generarla corre:  python website/build.py";
  display:block; max-width:44ch; text-align:center; text-wrap:balance;
  font-family:var(--mono); font-size:.86rem; line-height:1.9; color:var(--text);
  background:var(--surface); border:1px solid var(--border);
  border-top:2px solid var(--piedra); border-radius:var(--radius);
  padding:1.6rem 1.8rem; box-shadow:var(--shadow);
}