/* Creator Lab · maqueta v2 (concepto A "el móvil que se abre") · 2026-10-01
   Blanco editorial + azul #0047FF de acento; el salto a negro es el momento "wow". */

@font-face { font-family: "Archivo"; src: url("fonts/archivo-normal.woff2") format("woff2"); font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-normal-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-italic-500.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --papel: #f6f5f2;
  --papel-2: #ecebe6;
  --tinta: #0e0e10;
  --tinta-2: #3a3a40;
  --gris: #77767d;
  --azul: #0047ff;
  --azul-2: #0035c2;
  --acento-luz: #6d8fff;      /* acento sobre fondo oscuro */
  --acento-suave: #0047ff;    /* franjas y cierre */
  --sobre-suave: #fff;        /* texto encima de --acento-suave */
  --sombra: rgba(0, 26, 102, .4);
  --noche: #1d0c05;            /* fondo de los fotogramas de la hamburguesa */
  --linea: rgba(14, 14, 16, .12);
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --texto: "Instrument Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --g: clamp(18px, 4vw, 64px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 18px/1.55 var(--texto); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--tinta); color: #fff; padding: 10px 14px; border-radius: 8px; }
.saltar:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
.eyebrow { margin: 0 0 18px; font: 600 12px/1 var(--texto); letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }

/* Cabecera (se vuelve clara sobre la escena oscura) */
.cabecera { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--g); transition: color .4s, background .4s; }
.marca { font: 800 22px/1 var(--display); font-stretch: 110%; letter-spacing: -.02em; text-decoration: none; }
.marca span { color: var(--azul); }
.cabecera__cta { font-weight: 600; font-size: 15px; text-decoration: none; padding: 11px 20px; border-radius: 999px; border: 1.5px solid currentColor; transition: background .2s, color .2s; }
.cabecera__cta:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.cabecera--oscura { color: #fff; }
.cabecera--fondo { background: rgba(246, 245, 242, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linea); }
.cabecera--oscura .marca span { color: var(--acento-luz); }

.boton { display: inline-flex; align-items: center; min-height: 56px; padding: 0 30px; border-radius: 999px; background: var(--azul); color: #fff; font-weight: 600; text-decoration: none; transition: transform .25s var(--ease), background .2s; }
.boton:hover { background: var(--azul-2); transform: translateY(-2px); }

/* ───────── 1 · El viaje ───────── */
.viaje { position: relative; height: 470vh; }
.viaje__escena { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--papel); }

/* Capa a pantalla completa, recortada por la "pantalla" del móvil (el JS mueve el recorte) */
.capa { position: absolute; inset: 0; background: var(--noche); clip-path: inset(var(--ct, 30%) var(--cr, 40%) var(--cb, 30%) var(--cl, 40%) round var(--crad, 34px)); }
.capa__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.capa__brillo { position: absolute; inset: 0; pointer-events: none; opacity: var(--og, 0);
  background: radial-gradient(56% 46% at 50% 56%, rgba(255, 120, 30, .5), rgba(255, 70, 10, .16) 55%, transparent 76%),
              radial-gradient(95% 42% at 50% 114%, rgba(255, 96, 20, .7), rgba(255, 50, 0, .18) 55%, transparent 75%); mix-blend-mode: screen; }
.capa__fuego { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.capa__movil { position: absolute; left: var(--wl, 0); top: var(--wt, 0); width: var(--ww, 100%); height: var(--wh, 100%); object-fit: cover; opacity: var(--om, 1); }
.capa__titulo {
  position: absolute; left: 0; right: 0; top: 50%; margin: 0; text-align: center; pointer-events: none;
  font: 900 clamp(90px, 21vw, 360px)/.8 var(--display); font-stretch: 118%; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .78);
  opacity: var(--ot, 0); transform: translateY(-50%) scale(calc(.92 + var(--ot, 0) * .08));
}
.capa__titulo span { color: var(--azul); -webkit-text-stroke: 0; }

/* El marco del móvil */
.movil {
  position: absolute; left: 50%; top: 60%; width: min(240px, 52vw, 29vh); aspect-ratio: 9 / 19.5;
  transform: translate(-50%, -50%) scale(var(--ms, 1)); border-radius: 46px;
  border: 11px solid #121214; box-shadow: 0 0 0 1.5px #2a2a2e, 0 50px 90px -30px var(--sombra);
  opacity: var(--mo, 1); pointer-events: none;
}
.movil__isla { position: absolute; top: 9px; left: 50%; width: 30%; height: 22px; border-radius: 99px; background: #121214; transform: translateX(-50%); }

.viaje__arriba { position: absolute; left: 0; right: 0; top: clamp(84px, 11vh, 120px); text-align: center; padding: 0 var(--g); opacity: var(--oa, 1); transform: translateY(calc((1 - var(--oa, 1)) * -40px)); }
.viaje__arriba h1 { font-weight: 850; font-stretch: 112%; font-size: clamp(38px, 6.2vw, 104px); line-height: .92; letter-spacing: -.045em; }
.pista { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.pista span { width: 1px; height: 26px; background: linear-gradient(var(--tinta), transparent); animation: pista 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes pista { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.viaje__final { position: absolute; left: var(--g); bottom: clamp(36px, 7vh, 72px); color: #fff; max-width: 560px; opacity: var(--of, 0); transform: translateY(calc((1 - var(--of, 0)) * 24px)); pointer-events: none; }
.viaje__final.activo { pointer-events: auto; }
.viaje__final > p:first-child { margin: 0 0 22px; font: 400 clamp(28px, 3.4vw, 52px)/1 var(--display); letter-spacing: -.03em; }
.viaje__final strong { font-weight: 850; }
.viaje__nota { margin: 18px 0 0; font-size: 12px; color: rgba(255, 255, 255, .62); max-width: 52ch; }

/* Entrada al cargar */
@keyframes subir { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.viaje__arriba .eyebrow, .viaje__arriba h1, .pista { animation: subir .9s var(--ease) both; }
.viaje__arriba h1 { animation-delay: .08s; }
.pista { animation-delay: .3s; }
@keyframes aparecer-movil { from { opacity: 0; transform: translate(-50%, -42%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* ───────── 2 · El dolor ───────── */
.dolor { padding: clamp(90px, 12vw, 180px) var(--g); max-width: 1320px; margin: 0 auto; }
.dolor__cabecera h2 { font-weight: 800; font-stretch: 105%; font-size: clamp(42px, 6.4vw, 104px); line-height: .95; letter-spacing: -.04em; }
.tachado { color: var(--gris); position: relative; }
.tachado::after { content: ""; position: absolute; left: 0; right: 0; top: 54%; height: .06em; background: var(--azul); transform-origin: left; transform: scaleX(0); transition: transform 1.1s .3s var(--ease); }
.dolor__cabecera.visible .tachado::after { transform: scaleX(1); }
.dolor__lista { list-style: none; margin: clamp(56px, 7vw, 100px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--linea); }
.dolor__item { padding: 40px 40px 44px 0; border-bottom: 1px solid var(--linea); display: grid; grid-template-columns: auto 1fr; column-gap: 24px; }
.dolor__item:nth-child(odd) { border-right: 1px solid var(--linea); }
.dolor__item:nth-child(even) { padding-left: 40px; }
.dolor__n { grid-row: span 2; font: 700 14px/1.6 var(--display); color: var(--azul); }
.dolor__item h3 { font-weight: 750; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 12px; }
.dolor__item p { margin: 0; color: var(--tinta-2); max-width: 44ch; }
.dolor__cierre { margin: clamp(64px, 8vw, 110px) 0 0; font: 400 clamp(34px, 4.6vw, 72px)/1.02 var(--display); letter-spacing: -.035em; }
.dolor__cierre strong { font-weight: 850; color: var(--azul); }
/* ───────── 3 · ¿Te pasa esto? ───────── */
.diag { max-width: 1320px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--g) clamp(90px, 12vw, 170px); display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: clamp(40px, 6vw, 96px); align-items: start; }
.diag__intro { grid-column: 1 / -1; margin-bottom: clamp(36px, 5vw, 64px); }
.diag__intro h2 { font-weight: 850; font-stretch: 112%; font-size: clamp(48px, 8vw, 132px); line-height: .9; letter-spacing: -.05em; }
.diag__sub { margin: 22px 0 0; color: var(--tinta-2); max-width: 46ch; }
.diag__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.frase {
  width: 100%; display: flex; align-items: center; gap: 22px; padding: 24px 6px; border: 0; border-bottom: 1px solid var(--linea);
  background: none; color: var(--tinta-2); font: 500 clamp(19px, 2vw, 27px)/1.25 var(--display); letter-spacing: -.015em; text-align: left; cursor: pointer;
  transition: color .3s, padding .4s var(--ease);
}
.frase:hover { color: var(--tinta); padding-left: 14px; }
.frase__check { flex: none; position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--gris); transition: background .3s, border-color .3s, transform .4s var(--ease); }
.frase__check::after { content: ""; position: absolute; left: 9px; top: 5px; width: 8px; height: 14px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .35s var(--ease); }
.frase[aria-pressed="true"] { color: var(--tinta); }
.frase[aria-pressed="true"] .frase__txt { font-weight: 750; }
.frase[aria-pressed="true"] .frase__check { background: var(--azul); border-color: var(--azul); transform: scale(1.08); }
.frase[aria-pressed="true"] .frase__check::after { transform: rotate(45deg) scale(1); }
.diag__panel { position: sticky; top: 110px; padding: 34px 30px 30px; border-radius: 26px; background: var(--tinta); color: #fff; }
.diag__cuenta { margin: 0; font: 900 clamp(84px, 9vw, 128px)/.8 var(--display); font-stretch: 118%; letter-spacing: -.06em; }
.diag__n { display: inline-block; color: #fff; transition: color .3s; }
.diag__n.salta { animation: salta .5s var(--ease); }
@keyframes salta { 40% { transform: translateY(-10px) scale(1.06); } }
.diag__panel.con-marcas .diag__n { color: var(--acento-luz); }
.diag__de { font-size: .32em; color: rgba(255, 255, 255, .45); letter-spacing: 0; }
.diag__msg { margin: 22px 0 26px; min-height: 4.65em; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.diag__cta { width: 100%; justify-content: center; }
.diag__nota { margin: 14px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .5); }

/* ───────── 4 · Lo que cuesta no hacer nada ───────── */
.coste { background: var(--tinta); color: #fff; padding: clamp(100px, 14vw, 200px) var(--g); }
.coste > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
.coste .eyebrow { color: rgba(255, 255, 255, .5); }
.coste__texto { font-weight: 700; font-size: clamp(32px, 4.7vw, 76px); line-height: 1.06; letter-spacing: -.035em; }
.coste__texto .p { opacity: .16; transition: opacity .25s linear; }
.coste__lista { list-style: none; padding: 0; margin-top: clamp(64px, 8vw, 110px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.coste__lista li { padding-top: 22px; border-top: 2px solid var(--azul); color: rgba(255, 255, 255, .72); }
.coste__lista strong { display: block; margin-bottom: 6px; color: #fff; font: 750 22px/1.15 var(--display); letter-spacing: -.01em; }
.coste__honesto { margin-top: clamp(64px, 8vw, 110px); padding-top: 34px; border-top: 1px solid rgba(255, 255, 255, .14); font: 400 clamp(22px, 2.4vw, 34px)/1.25 var(--display); letter-spacing: -.02em; color: rgba(255, 255, 255, .9); }

/* ───────── 5 · Casos ───────── */
.casos { max-width: 1320px; margin: 0 auto; padding: clamp(100px, 13vw, 190px) var(--g) clamp(80px, 10vw, 140px); }
.casos__cabecera h2 { font-weight: 850; font-stretch: 108%; font-size: clamp(42px, 6.4vw, 104px); line-height: .94; letter-spacing: -.045em; }
.caso { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(70px, 9vw, 130px); }
.caso--inv { grid-template-columns: 1fr 1.35fr; }
.caso--inv .caso__img { order: 2; }
.caso__img { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--papel-2); }
.caso__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.12 - var(--v, 0) * .12)); transition: transform .1s linear; }
.caso__meta { margin: 0 0 12px; font: 600 12px/1 var(--texto); letter-spacing: .18em; text-transform: uppercase; color: var(--azul); }
.caso h3 { font-weight: 850; font-stretch: 108%; font-size: clamp(32px, 3.6vw, 56px); line-height: .95; letter-spacing: -.035em; margin-bottom: 18px; }
.caso__txt > p { color: var(--tinta-2); max-width: 44ch; }
.caso__dato { margin-top: 22px; font: 400 22px/1.3 var(--display); color: var(--tinta) !important; }
.caso__dato span { display: block; font-weight: 900; font-stretch: 118%; font-size: clamp(56px, 6vw, 92px); line-height: .9; letter-spacing: -.05em; color: var(--azul); }
.caso__enlace { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--azul); padding-bottom: 3px; }
.caso__enlace::after { content: "↗"; color: var(--azul); transition: transform .3s var(--ease); }
.caso__enlace:hover::after { transform: translate(3px, -3px); }
.casos__nota { margin: clamp(60px, 7vw, 100px) 0 0; font-size: 14px; color: var(--gris); }

/* El chat de Bulevar */
.caso__chat { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(24px, 4vw, 48px); background: radial-gradient(120% 90% at 50% 0%, #3a1a0b, var(--noche) 70%); }
.msg { margin: 0; max-width: 78%; padding: 13px 17px; border-radius: 20px; font-size: 16px; line-height: 1.4; }
.msg--yo { align-self: flex-end; background: var(--azul); color: #fff; border-bottom-right-radius: 6px; }
.msg--bar { align-self: flex-start; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .92); border-bottom-left-radius: 6px; }
.con-js .caso__chat .msg { opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.con-js .caso__chat.visible .msg { opacity: 1; transform: none; }
.con-js .caso__chat.visible .msg:nth-of-type(3) { transition-delay: .9s; }
.con-js .caso__chat.visible .msg:nth-of-type(4) { transition-delay: 1.9s; }
.con-js .caso__chat.visible .msg:nth-of-type(5) { transition-delay: 2.6s; }

/* ───────── 6 · Qué hacemos ───────── */
.franja { overflow: hidden; background: var(--acento-suave); color: var(--sobre-suave); padding: 22px 0; }
.franja__pista { display: flex; width: max-content; animation: franja 38s linear infinite; }
.franja__pista span { padding: 0 34px; font: 800 clamp(26px, 3.4vw, 46px)/1 var(--display); font-stretch: 112%; letter-spacing: -.03em; white-space: nowrap; }
.franja__pista span::after { content: "✦"; margin-left: 68px; font-size: .5em; vertical-align: middle; opacity: .6; }
@keyframes franja { to { transform: translateX(-50%); } }
.hacemos { max-width: 1320px; margin: 0 auto; padding: clamp(100px, 13vw, 180px) var(--g) clamp(80px, 10vw, 140px); }
.hacemos__cabecera h2 { font-weight: 850; font-stretch: 108%; font-size: clamp(42px, 6.4vw, 104px); line-height: .94; letter-spacing: -.045em; }
.pilares { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); margin-top: clamp(56px, 7vw, 100px); }
.pilar { position: relative; padding: 34px 30px 36px; border-radius: 22px; background: #fff; box-shadow: 0 1px 0 var(--linea), 0 30px 60px -40px var(--sombra); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.pilar:hover { transform: translateY(-6px); box-shadow: 0 1px 0 var(--linea), 0 40px 70px -36px var(--sombra); }
.pilar__n { font: 700 14px/1 var(--display); color: var(--azul); }
.pilar h3 { margin: 40px 0 14px; font-weight: 850; font-stretch: 110%; font-size: clamp(30px, 3vw, 44px); line-height: 1; letter-spacing: -.035em; }
.pilar p { margin: 0; color: var(--tinta-2); }

.comparar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; margin-top: clamp(80px, 10vw, 150px); }
.comparar__marco { --x: 50%; position: relative; aspect-ratio: 4 / 5; max-height: 82vh; border-radius: 24px; overflow: hidden; background: var(--papel-2); touch-action: pan-y; }
.comparar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparar__img--despues { clip-path: inset(0 0 0 var(--x)); }
.comparar__linea { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.comparar__linea span { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.comparar__linea span::before, .comparar__linea span::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -5px; border: solid var(--tinta); border-width: 2px 2px 0 0; }
.comparar__linea span::before { left: 13px; transform: rotate(-135deg); }
.comparar__linea span::after { right: 13px; transform: rotate(45deg); }
.comparar__etq { position: absolute; top: 18px; padding: 8px 13px; border-radius: 99px; background: rgba(14, 14, 16, .55); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; }
.comparar__etq--a { left: 18px; }
.comparar__etq--b { right: 18px; }
.comparar__control { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.comparar__control:focus-visible + * { outline: none; }
.comparar__marco:focus-within { outline: 2px solid var(--azul); outline-offset: 4px; }
.comparar__titulo { margin: 0 0 22px; font: 400 clamp(28px, 3vw, 46px)/1.08 var(--display); letter-spacing: -.03em; }
.comparar__titulo strong { font-weight: 850; color: var(--azul); }
.comparar__txt > p:last-child { color: var(--tinta-2); max-width: 46ch; }

/* ───────── 7 · Cómo trabajamos ───────── */
.como { max-width: 1320px; margin: 0 auto; padding: clamp(60px, 8vw, 120px) var(--g) clamp(100px, 13vw, 180px); }
.como__cabecera h2 { max-width: 16ch; font-weight: 850; font-stretch: 106%; font-size: clamp(38px, 5.4vw, 88px); line-height: .96; letter-spacing: -.045em; }
.como__cabecera h2 span { color: var(--azul); }
.pasos { --avance: 0; position: relative; list-style: none; margin: clamp(56px, 7vw, 100px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); }
.pasos::before, .pasos::after { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: var(--linea); }
.pasos::after { background: var(--azul); transform-origin: left; transform: scaleX(var(--avance)); }
.paso { position: relative; z-index: 1; }
.paso__n { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--papel); border: 2px solid var(--linea); font: 800 22px/1 var(--display); transition: background .4s, color .4s, border-color .4s; }
.paso.hecho .paso__n { background: var(--azul); border-color: var(--azul); color: #fff; }
.paso h3 { margin: 28px 0 10px; font-weight: 800; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; letter-spacing: -.02em; }
.paso p { margin: 0; color: var(--tinta-2); font-size: 17px; }

/* ───────── 8 · Quién está detrás ───────── */
.quien { max-width: 1320px; margin: 0 auto; padding: clamp(60px, 8vw, 120px) var(--g) clamp(100px, 12vw, 170px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.quien__foto { margin: 0; }
.quien__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; }
.quien__foto figcaption { margin-top: 14px; font-size: 13px; color: var(--gris); }
.quien h2 { font-weight: 850; font-stretch: 106%; font-size: clamp(36px, 4.6vw, 74px); line-height: .98; letter-spacing: -.04em; margin-bottom: 30px; }
.quien h2 span { color: var(--azul); }
.quien__txt > p { color: var(--tinta-2); max-width: 48ch; }
.quien__firma { margin-top: 34px; font: 800 24px/1.1 var(--display); color: var(--tinta) !important; letter-spacing: -.02em; }
.quien__firma span { display: block; margin-top: 6px; font: 500 14px/1 var(--texto); color: var(--gris); letter-spacing: 0; }

/* ───────── 9 · Cierre ───────── */
.cierre { position: relative; overflow: hidden; background: var(--acento-suave); color: var(--sobre-suave); text-align: center; padding: clamp(110px, 15vw, 220px) var(--g); }
.cierre::before { content: ""; position: absolute; inset: -40% -10% auto; height: 120%; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, .22), transparent 70%); pointer-events: none; }
.cierre > * { position: relative; }
.cierre .eyebrow { color: inherit; opacity: .7; }
.cierre h2 { font-weight: 900; font-stretch: 116%; font-size: clamp(52px, 10vw, 170px); line-height: .86; letter-spacing: -.055em; }
.cierre__sub { margin: 34px auto 40px; max-width: 46ch; font-size: clamp(17px, 1.6vw, 20px); opacity: .86; }
.boton--grande { min-height: 66px; padding: 0 44px; font-size: 19px; background: var(--boton-cierre, #fff); color: var(--boton-cierre-txt, var(--azul)); }
.boton--grande:hover { background: var(--tinta); color: #fff; }
.cierre__correo { margin: 18px 0 0; font-size: 14px; opacity: .7; }

.pie { display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; justify-content: space-between; padding: 34px var(--g); background: var(--tinta); color: rgba(255, 255, 255, .6); font-size: 14px; }
.pie p { margin: 0; }
.pie .marca { color: #fff; font-size: 20px; }
.pie .marca span { color: var(--acento-luz); }
.pie__enlaces { display: flex; gap: 22px; }
.pie__enlaces a { text-decoration: none; color: #fff; }
.pie__enlaces a:hover { color: var(--acento-luz); }

/* ───────── 6 bis · Muestras ───────── */
.muestras { padding: clamp(40px, 6vw, 80px) 0 clamp(90px, 11vw, 160px); overflow: hidden; }
.muestras__cabecera, .historias, .retratos { max-width: 1320px; margin-left: auto; margin-right: auto; padding: 0 var(--g); }
.muestras__cabecera h2 { max-width: 14ch; font-weight: 850; font-stretch: 106%; font-size: clamp(40px, 5.8vw, 96px); line-height: .95; letter-spacing: -.045em; }
.muestras__cabecera > p:last-child { margin: 22px 0 0; max-width: 52ch; color: var(--tinta-2); }
.carril { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 16px; transform: rotate(-2deg) scale(1.04); }
.carril__fila { overflow: hidden; }
.carril__pista { display: flex; gap: 16px; width: max-content; animation: carril 60s linear infinite; }
.carril__fila--inv .carril__pista { animation-direction: reverse; animation-duration: 70s; }
.carril:hover .carril__pista { animation-play-state: paused; }
.carril__pista img { width: clamp(170px, 18vw, 250px); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .45); }
@keyframes carril { to { transform: translateX(calc(-50% - 8px)); } }

.historias, .retratos { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: clamp(36px, 6vw, 96px); align-items: center; margin-top: clamp(100px, 12vw, 170px); }
.historias h3, .retratos h3 { font-weight: 850; font-size: clamp(30px, 3.4vw, 52px); line-height: 1; letter-spacing: -.035em; margin-bottom: 20px; }
.historias__txt > p:last-child, .retratos__txt > p:last-child { color: var(--tinta-2); max-width: 44ch; }
.historias__moviles { display: flex; justify-content: center; gap: clamp(12px, 2vw, 26px); }
.historia { margin: 0; flex: 1 1 0; max-width: 300px; padding: 7px; border-radius: 30px; background: #121214; box-shadow: 0 40px 70px -36px var(--sombra); }
.historia img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 24px; }
.historia:nth-child(1) { transform: rotate(-5deg) translateY(28px); }
.historia:nth-child(3) { transform: rotate(5deg) translateY(28px); }
.historia:nth-child(2) { z-index: 1; }
.retratos { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.historias__moviles { margin-right: calc(var(--g) * -1); }
.retratos__txt { order: 2; }
.retratos__rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.retratos__rejilla img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; }
.retratos__rejilla img:nth-child(even) { transform: translateY(40px); }

/* ───────── Paletas a comparar (solo maqueta; se elige una y se fija en :root) ─────────
   Tendencia 2026: neutros cálidos "sin blanquear" + un acento apagado. El azul eléctrico se lee a "IA/tecnológica". */
html[data-paleta] { --serif: "Cormorant Garamond", Georgia, serif; --papel: #f3f0e9; --papel-2: #e8e3d8; --tinta: #1d1b18; --tinta-2: #45413b; --gris: #7b766d; --linea: rgba(29, 27, 24, .12); }
html[data-paleta="empolvado"] { --azul: #46698f; --azul-2: #365777; --acento-luz: #a9c2dc; --acento-suave: #d7e2ec; --sobre-suave: #1d1b18; --boton-cierre: #1d1b18; --boton-cierre-txt: #fff; --sombra: rgba(40, 60, 85, .28); }
html[data-paleta="salvia"]    { --azul: #557259; --azul-2: #435c47; --acento-luz: #b7cdb6; --acento-suave: #dfe7da; --sobre-suave: #1d1b18; --boton-cierre: #1d1b18; --boton-cierre-txt: #fff; --sombra: rgba(50, 70, 52, .28); }
html[data-paleta="arcilla"]   { --azul: #a65a42; --azul-2: #8c4934; --acento-luz: #e7b7a4; --acento-suave: #f0dcd2; --sobre-suave: #1d1b18; --boton-cierre: #1d1b18; --boton-cierre-txt: #fff; --sombra: rgba(110, 60, 40, .25); }
html[data-paleta="noche"]     { --azul: #2f3e5c; --azul-2: #222e45; --acento-luz: #c9b48a; --acento-suave: #2f3e5c; --sobre-suave: #f3f0e9; --boton-cierre: #c9b48a; --boton-cierre-txt: #1d1b18; --sombra: rgba(30, 40, 60, .3); }

.paletas { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 99px; background: rgba(255, 255, 255, .92); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); font: 600 12px/1 var(--texto); color: #333; }
.paletas button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); cursor: pointer; padding: 0; }
.paletas button[aria-pressed="true"] { box-shadow: 0 0 0 2px #1d1b18; }
.paletas [data-p="original"] { background: #0047ff; }
.paletas [data-p="empolvado"] { background: #46698f; }
.paletas [data-p="salvia"] { background: #557259; }
.paletas [data-p="arcilla"] { background: #a65a42; }
.paletas [data-p="noche"] { background: #2f3e5c; }

.humor { max-width: 1320px; margin: clamp(100px, 12vw, 170px) auto 0; padding: 0 var(--g); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.humor h3 { font-weight: 850; font-size: clamp(30px, 3.4vw, 52px); line-height: 1; letter-spacing: -.035em; margin-bottom: 20px; }
.humor__txt > p:last-child { color: var(--tinta-2); max-width: 44ch; }
.humor__piezas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.humor__piezas figure { margin: 0; }
.humor__piezas img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }
.humor__piezas figcaption { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--gris); }
.humor__meme { transform: rotate(-2deg); }
.humor__carrusel { transform: translateY(40px) rotate(1.5deg); }
.humor__pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 16px; scrollbar-width: none; box-shadow: 0 30px 60px -36px var(--sombra); }
.humor__pista::-webkit-scrollbar { display: none; }
.humor__pista img { flex: 0 0 100%; scroll-snap-align: start; border-radius: 0; }
.humor__meme img { box-shadow: 0 30px 60px -36px var(--sombra); }

/* ── Opción "cálida": crema + terracota suave + titulares con serifa (lo humano frente a lo "tecnológico") ── */
html[data-paleta="calida"] { --papel: #f6f0e7; --papel-2: #ece2d4; --tinta: #2b221c; --tinta-2: #5b4e44; --gris: #8b7e72; --linea: rgba(43, 34, 28, .13);
  --azul: #b0644a; --azul-2: #96523b; --acento-luz: #ecc0a6; --acento-suave: #f0ddcd; --sobre-suave: #2b221c;
  --boton-cierre: #2b221c; --boton-cierre-txt: #f6f0e7; --sombra: rgba(110, 66, 40, .26); --serif: "Cormorant Garamond", Georgia, serif; }
html[data-paleta]:not([data-paleta="original"]) :is(h1, h2, h3, .capa__titulo, .viaje__final > p:first-child, .diag__cuenta, .dolor__cierre, .coste__texto, .comparar__titulo, .caso__dato span, .franja__pista span, .quien__firma, .marca) {
  font-family: var(--serif); font-weight: 500; font-stretch: 100%; letter-spacing: -.012em; }
html[data-paleta] :is(h1, h2) { line-height: .98; font-size-adjust: none; }
html[data-paleta] .viaje__arriba h1 { font-size: clamp(46px, 7.4vw, 124px); }
html[data-paleta] :is(h2 span, h2 .tachado, .dolor__cierre strong, .comparar__titulo strong, .viaje__final strong, .capa__titulo) { font-style: italic; }
html[data-paleta] .capa__titulo { -webkit-text-stroke: 0; color: rgba(255, 246, 236, .92); letter-spacing: -.02em; }
html[data-paleta] .capa__titulo span { color: var(--acento-luz); }
html[data-paleta] .marca { font-size: 26px; }
html[data-paleta] .marca span { font-style: italic; }
html[data-paleta="calida"] .boton { border-radius: 999px; }
html[data-paleta] body { background-image: radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .5), transparent 60%); }
.paletas [data-p="calida"] { background: #b0644a; }

/* ───────── 6 ter · Sesiones de fotos ───────── */
.sesiones { background: var(--tinta); color: #f3f0e9; padding: clamp(100px, 12vw, 170px) 0 clamp(80px, 10vw, 130px); overflow: hidden; }
.sesiones__cabecera, .sesiones__tabs, .sesion__txt, .sesiones__nota { max-width: 1320px; margin-left: auto; margin-right: auto; padding: 0 var(--g); }
.sesiones .eyebrow { color: rgba(243, 240, 233, .55); }
.sesiones__cabecera h2 { font-weight: 850; font-size: clamp(46px, 7vw, 118px); line-height: .92; letter-spacing: -.045em; }
.sesiones__cabecera h2 span { color: var(--acento-luz); }
.sesiones__cabecera > p:last-child { margin: 26px 0 0; max-width: 54ch; font-size: clamp(17px, 1.5vw, 20px); color: rgba(243, 240, 233, .78); }
.sesiones__cabecera strong { color: #fff; }
.sesiones__tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(40px, 5vw, 64px); }
.sesiones__tabs button { min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1.5px solid rgba(243, 240, 233, .28); background: none; color: rgba(243, 240, 233, .8); font: 600 15px/1 var(--texto); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.sesiones__tabs button:hover { border-color: rgba(243, 240, 233, .7); color: #fff; }
.sesiones__tabs button[aria-selected="true"] { background: var(--acento-luz); border-color: var(--acento-luz); color: var(--tinta); }
.sesion__txt { margin-top: 28px; margin-bottom: 26px; font: 400 clamp(22px, 2.2vw, 32px)/1.2 var(--serif, var(--display)); font-style: italic; color: #f3f0e9; }
.sesion__fila { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--g) 6px; scroll-padding: 0 var(--g); }
.sesion__fila::-webkit-scrollbar { display: none; }
.sesion__fila img { flex: 0 0 auto; height: min(68vh, 620px); width: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; scroll-snap-align: start; }
.sesion__fila img:first-child { height: min(74vh, 680px); align-self: flex-end; }
.sesion:not([hidden]) .sesion__fila img { animation: entra-foto .8s var(--ease) both; }
.sesion:not([hidden]) .sesion__fila img:nth-child(2) { animation-delay: .08s; }
.sesion:not([hidden]) .sesion__fila img:nth-child(3) { animation-delay: .16s; }
.sesion:not([hidden]) .sesion__fila img:nth-child(4) { animation-delay: .24s; }
@keyframes entra-foto { from { opacity: 0; transform: translateY(30px) scale(.98); } to { opacity: 1; transform: none; } }
.sesiones__nota { margin-top: 26px; font-size: 13px; color: rgba(243, 240, 233, .5); }

/* ───────── 6 quater · Del selfie a la alfombra roja (escena con scroll) ───────── */
.salto { position: relative; height: 320vh; background: var(--tinta); }
.salto__escena { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.salto__flash { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; mix-blend-mode: screen; }
.salto__fotos { position: relative; height: min(80vh, 760px); aspect-ratio: 9 / 16; max-width: 86vw; z-index: 1; }
.salto__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 22px; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .7); }
.salto__foto--antes { opacity: calc(1 - var(--sw, 0)); transform: translate(var(--sx, 0px), var(--sy, 0px)) scale(var(--as, 1)); filter: grayscale(var(--gr, 0)) brightness(calc(1 - var(--gr, 0) * .25)); }
.salto__foto--despues { opacity: var(--sw, 0); transform: scale(var(--ds, 1)); border-radius: var(--dr, 22px); z-index: 2; will-change: transform; }
.salto__blanco { position: absolute; inset: 0; background: #fff; opacity: var(--bl, 0); pointer-events: none; z-index: 4; }
.salto__txt { position: absolute; z-index: 5; margin: 0; color: #f3f0e9; font-family: var(--serif, var(--display)); font-weight: 500; letter-spacing: -.02em; line-height: .95; text-shadow: 0 6px 40px rgba(0, 0, 0, .5); }
.salto__txt--a { left: var(--g); top: 14vh; font-size: clamp(40px, 6vw, 96px); font-style: italic; opacity: var(--ta, 1); transform: translateY(calc((1 - var(--ta, 1)) * -30px)); }
.salto__txt--b { right: var(--g); bottom: 12vh; max-width: 9ch; text-align: right; font-size: clamp(48px, 8vw, 132px); opacity: var(--tb, 0); transform: translateY(calc((1 - var(--tb, 0)) * 30px)); }
.salto__txt--b em { color: var(--acento-luz); }
@media (max-width: 860px) {
  .salto__fotos { height: 66vh; }
  .salto__txt--a { top: 10vh; }
  .salto__txt--b { bottom: 8vh; }
}
@media (prefers-reduced-motion: reduce) {
  .salto { height: auto; }
  .salto__escena { position: relative; height: auto; padding: 100px 0; }
  .salto__foto--antes, .salto__flash, .salto__blanco, .salto__txt--a { display: none; }
  .salto__foto--despues { opacity: 1; transform: none; }
  .salto__txt--b { position: static; opacity: 1; transform: none; margin-top: 24px; text-align: center; max-width: none; }
}

/* Carrusel de Instagram que se desliza */
.ig { display: grid; justify-items: center; gap: 22px; margin: clamp(48px, 6vw, 80px) auto 0; padding: 0 var(--g); }
.ig__elegir { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ig__elegir button { min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--linea); background: none; color: var(--tinta-2); font: 600 14px/1 var(--texto); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.ig__elegir button[aria-selected="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.ig__movil { width: min(380px, 100%); border-radius: 34px; padding: 14px 0 18px; background: #fff; color: #111; box-shadow: 0 0 0 9px #121214, 0 60px 110px -40px var(--sombra); font: 400 14px/1.35 -apple-system, "Instrument Sans", system-ui, sans-serif; }
.ig__cab { display: flex; align-items: center; gap: 10px; padding: 0 14px 10px; }
.ig__avatar { width: 32px; height: 32px; border-radius: 50%; background: conic-gradient(#f9ce34, #ee2a7b, #6228d7, #f9ce34); padding: 2px; }
.ig__avatar::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--ig-av, #2d5016); border: 2px solid #fff; box-sizing: border-box; }
.ig__cab .ig__cuenta { font-size: 14px; }
.ig__mas { margin-left: auto; letter-spacing: 1px; }
.ig__marco { position: relative; }
.ig__pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 4 / 5; max-width: 100%; background: #eee; }
.ig__pista::-webkit-scrollbar { display: none; }
.ig__pista img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; user-select: none; -webkit-user-drag: none; }
.ig__num { position: absolute; top: 12px; right: 12px; padding: 4px 9px; border-radius: 99px; background: rgba(20, 20, 20, .7); color: #fff; font-size: 12px; font-weight: 600; }
.ig__flecha { position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: #111; font: 600 20px/28px system-ui; cursor: pointer; opacity: 0; transition: opacity .2s; }
.ig__marco:hover .ig__flecha, .ig__flecha:focus-visible { opacity: 1; }
.ig__flecha--ant { left: 10px; } .ig__flecha--sig { right: 10px; }
.ig__flecha[disabled] { visibility: hidden; }
.ig__corazon { position: absolute; top: 50%; left: 50%; font-size: 96px; line-height: 1; color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .35); transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; }
.ig__corazon.late { animation: late .9s var(--ease); }
@keyframes late { 15% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(.95); } 70% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.ig__acciones { display: flex; align-items: center; gap: 14px; padding: 12px 14px 6px; }
.ig__acciones svg { width: 24px; height: 24px; fill: none; stroke: #111; stroke-width: 1.8; stroke-linejoin: round; }
.ig__acciones.amado svg:first-child { fill: #ff3040; stroke: #ff3040; }
.ig__puntos { flex: 1; display: flex; justify-content: center; gap: 4px; margin-right: 24px; }
.ig__puntos i { width: 6px; height: 6px; border-radius: 50%; background: #c7c7c7; transition: background .2s; }
.ig__puntos i.on { background: #0095f6; }
.ig__guardar { margin-left: auto; }
.ig__pie { margin: 0; padding: 0 14px; }

.siguiente { padding: 48px var(--g) 80px; text-align: center; color: var(--gris); font-size: 15px; border-top: 1px dashed var(--linea); }

.con-js .aparece { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.con-js .aparece.visible { opacity: 1; transform: none; }
.con-js .dolor__item.aparece:nth-child(2) { transition-delay: .08s; }
.con-js .dolor__item.aparece:nth-child(3) { transition-delay: .16s; }
.con-js .dolor__item.aparece:nth-child(4) { transition-delay: .24s; }

@media (max-width: 860px) {
  body { font-size: 17px; }
  .viaje { height: 420vh; }
  .movil { top: 62%; border-width: 9px; border-radius: 38px; }
  .viaje__final { right: var(--g); }
  .dolor__lista { grid-template-columns: 1fr; }
  .dolor__item, .dolor__item:nth-child(even) { padding: 30px 0; border-right: 0; }
  .diag { grid-template-columns: 1fr; }
  .diag__panel { position: sticky; top: auto; bottom: 12px; margin-top: 28px; padding: 22px 22px 20px; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; }
  .diag__cuenta { font-size: 64px; }
  .diag__msg { margin: 0; min-height: 0; font-size: 15px; }
  .diag__cta, .diag__nota { grid-column: 1 / -1; }
  .diag__cta { margin-top: 16px; }
  .frase { gap: 16px; padding: 20px 2px; }
  .coste__lista { grid-template-columns: 1fr; gap: 26px; }
  .caso, .caso--inv { grid-template-columns: 1fr; }
  .caso--inv .caso__img { order: 0; }
  .msg { font-size: 15px; }
  .pilares, .comparar { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: 1fr; gap: 34px; padding-left: 0; }
  .pasos::before, .pasos::after { left: 27px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .pasos::after { transform-origin: top; transform: scaleY(var(--avance)); }
  .paso { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; }
  .paso h3 { margin-top: 12px; }
  .quien { grid-template-columns: 1fr; }
  .historias, .retratos, .humor { grid-template-columns: 1fr; }
  .sesion__fila img, .sesion__fila img:first-child { height: 62vh; }
  .sesiones__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sesiones__tabs button { flex: none; }
  .humor__piezas { gap: 12px; }
  .retratos__txt { order: 0; }
  .historia { padding: 5px; border-radius: 20px; }
  .historia img { border-radius: 16px; }
  .historia:nth-child(1) { transform: rotate(-4deg) translateY(16px); }
  .historia:nth-child(3) { transform: rotate(4deg) translateY(16px); }
  .retratos__rejilla img:nth-child(even) { transform: translateY(24px); }
  .pie { flex-direction: column; align-items: flex-start; }
}

/* Sin animación: se ve directamente el resultado, sin el viaje */
@media (prefers-reduced-motion: reduce) {
  .viaje { height: auto; }
  .viaje__escena { position: relative; height: 100svh; }
  .capa { clip-path: none; }
  .capa__movil, .movil, .pista, .capa__fuego, .capa__brillo { display: none; }
  .capa__titulo { opacity: 1; }
  .viaje__final { opacity: 1; transform: none; pointer-events: auto; }
  .viaje__arriba { display: none; }
  .pasos { --avance: 1; }
  * { animation: none !important; transition: none !important; }
}

/* ───────── 4 bis · Calculadora de retorno (2026-10-05) ───────── */
.calc { max-width: 1320px; margin: 0 auto; padding: clamp(100px, 13vw, 190px) var(--g) clamp(80px, 10vw, 140px); }
.calc__cabecera h2 { font-weight: 850; font-size: clamp(46px, 7.4vw, 124px); line-height: .92; letter-spacing: -.045em; }
.calc__cabecera h2 span { color: var(--azul); }
.calc__sub { margin: 22px 0 0; color: var(--tinta-2); max-width: 46ch; font-size: clamp(17px, 1.5vw, 20px); }
.calc__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 80px); align-items: start; margin-top: clamp(48px, 6vw, 84px); }

.calc__datos { display: grid; gap: clamp(36px, 4vw, 52px); }
.calc__paso { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 18px; }
.calc__paso legend { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 0; font: 500 clamp(26px, 2.6vw, 36px)/1 var(--serif, var(--display)); letter-spacing: -.01em; }
.calc__paso legend small { font: 400 15px/1 var(--texto); color: var(--gris); }
.calc__n { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--tinta); color: var(--papel); font: 600 16px/1 var(--texto); }
.calc__etq { font-size: 15px; font-weight: 600; color: var(--tinta-2); }
.calc__etq--suelta { margin: 8px 0 -6px; }
.calc__campo { display: grid; gap: 8px; }
.calc__select { min-height: 52px; padding: 0 44px 0 16px; border: 1.5px solid var(--linea); border-radius: 14px; background: linear-gradient(45deg, transparent 50%, var(--tinta) 50%) no-repeat calc(100% - 22px) 50% / 6px 6px, linear-gradient(135deg, var(--tinta) 50%, transparent 50%) no-repeat calc(100% - 16px) 50% / 6px 6px, var(--papel); color: var(--tinta); font: 500 17px/1 var(--texto); -webkit-appearance: none; appearance: none; cursor: pointer; }

.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg [role=radio] { min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--linea); background: none; color: var(--tinta-2); font: 600 15px/1.2 var(--texto); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.seg [role=radio]:hover { border-color: var(--tinta-2); }
.seg [role=radio][aria-checked="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.seg[hidden] { display: none; }

.desliza { display: grid; gap: 10px; }
.desliza[hidden] { display: none; }
.desliza label:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.desliza output { font: 500 26px/1 var(--serif, var(--display)); color: var(--tinta); white-space: nowrap; }
.desliza input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: none; cursor: pointer; }
.desliza input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--linea); }
.desliza input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--linea); }
.desliza input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: var(--azul); border: 3px solid var(--papel); box-shadow: 0 2px 10px var(--sombra); }
.desliza input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--azul); border: 3px solid var(--papel); box-shadow: 0 2px 10px var(--sombra); }
.desliza input[type=range]:disabled { opacity: .35; cursor: default; }
.calc__nolose { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--tinta-2); cursor: pointer; }
.calc__nolose input, .calc__acepto input { width: 20px; height: 20px; accent-color: var(--azul); }

.frenos { border-top: 1px solid var(--linea); }
.frase--calc { padding: 18px 4px; font-size: clamp(18px, 1.7vw, 23px); }
.calc__aviso { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--azul); }
.calc__mini { display: none; }

/* Resultado (panel oscuro fijo al hacer scroll) */
.calc__resultado { position: sticky; top: 100px; padding: clamp(28px, 3vw, 40px); border-radius: 28px; background: var(--tinta); color: #f3f0e9; }
.calc__res-etq { margin: 0; font: 600 12px/1.3 var(--texto); letter-spacing: .18em; text-transform: uppercase; color: rgba(243, 240, 233, .55); }
.calc__cifra { margin: 14px 0 0; font: 500 clamp(64px, 7.6vw, 118px)/.9 var(--serif, var(--display)); letter-spacing: -.03em; color: var(--acento-luz); font-variant-numeric: tabular-nums; }
.calc__cifra small { font-size: .4em; color: rgba(243, 240, 233, .7); }
.calc__rango { margin: 12px 0 0; font-size: 16px; color: rgba(243, 240, 233, .78); }
.calc__kpis { list-style: none; margin: 26px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(243, 240, 233, .14); display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.calc__kpis li { display: grid; gap: 4px; font-size: 13px; line-height: 1.3; color: rgba(243, 240, 233, .6); }
.calc__kpi { font: 500 clamp(24px, 2.4vw, 34px)/1 var(--serif, var(--display)); color: #f3f0e9; }
.calc__grafica { margin: 26px 0 0; }
.calc__grafica svg { width: 100%; height: auto; display: block; overflow: visible; }
.calc__grafica figcaption { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; font-size: 13px; color: rgba(243, 240, 233, .65); }
.ley::before { content: ""; display: inline-block; width: 18px; height: 0; margin: 0 8px 4px 0; vertical-align: middle; border-top: 3px solid var(--acento-luz); }
.ley--invierte::before { border-top: 2px dashed rgba(243, 240, 233, .6); }
.g-rejilla { stroke: rgba(243, 240, 233, .1); stroke-width: 1; }
.g-eje { fill: rgba(243, 240, 233, .5); font: 500 11px var(--texto); }
.g-banda { fill: var(--acento-luz); opacity: .14; }
.g-gana { fill: none; stroke: var(--acento-luz); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.g-invierte { fill: none; stroke: rgba(243, 240, 233, .6); stroke-width: 2; stroke-dasharray: 5 6; }
.g-punto { fill: var(--acento-luz); stroke: var(--tinta); stroke-width: 3; }
.g-marca { fill: #f3f0e9; font: 600 13px var(--texto); }
.calc__veredicto { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid rgba(243, 240, 233, .14); font: 400 clamp(19px, 1.7vw, 23px)/1.3 var(--serif, var(--display)); color: #f3f0e9; }
.calc--sin-datos .calc__cifra, .calc--sin-datos .calc__grafica { opacity: .35; }
.calc--no-compensa .calc__cifra { color: #f3f0e9; }

/* Plan + galleta */
.calc__plan { margin-top: clamp(64px, 8vw, 110px); }
.calc__plan-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; }
.calc__plan h3 { font-size: clamp(34px, 4vw, 60px); line-height: 1; }
.comparar-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
.comparar-calc__col { padding: 26px 28px; border-radius: 22px; border: 1.5px solid var(--linea); }
.comparar-calc__col .calc__res-etq { color: var(--gris); }
.comparar-calc__col--con { background: var(--azul); border-color: var(--azul); color: #f3f0e9; }
.comparar-calc__col--con .calc__res-etq { color: rgba(243, 240, 233, .7); }
.comparar-calc__n { margin: 10px 0 4px; font: 500 clamp(36px, 4vw, 56px)/1 var(--serif, var(--display)); font-variant-numeric: tabular-nums; }
.comparar-calc__d { margin: 0; font-size: 15px; opacity: .8; }
.servicios { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.servicios li { padding: 26px 28px; border-radius: 22px; background: var(--papel-2); display: grid; gap: 6px; align-content: start; }
.servicios p { margin: 0; }
.servicio__nombre { font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--gris); text-transform: uppercase; }
.servicio__desde { font: 500 clamp(30px, 3vw, 42px)/1.05 var(--serif, var(--display)); color: var(--tinta); }
.servicio__galleta { font-size: 16px; color: var(--tinta-2); }
.servicio__total { margin-top: 6px !important; font-size: 13px; color: var(--gris); }
.calc__iva { margin: 22px 0 0; font-size: 13.5px; color: var(--gris); max-width: 80ch; }
.calc__como { margin-top: 14px; font-size: 15px; color: var(--tinta-2); }
.calc__como summary { cursor: pointer; font-weight: 600; color: var(--tinta); min-height: 44px; display: inline-flex; align-items: center; }
.calc__como ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px; max-width: 80ch; }

/* Formulario del informe */
.calc__informe { margin-top: clamp(48px, 6vw, 80px); padding: clamp(30px, 4vw, 56px); border-radius: 28px; background: var(--acento-suave); color: var(--sobre-suave); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.calc__informe h3 { font-size: clamp(34px, 4vw, 58px); line-height: 1; }
.calc__informe h3 + p { margin: 16px 0 0; opacity: .82; max-width: 36ch; }
.calc__informe-campos { display: grid; gap: 16px; }
.calc__informe-campos label:not(.calc__acepto) { display: grid; gap: 6px; }
.calc__informe .calc__etq { color: inherit; opacity: .8; }
.calc__informe input[type=text], .calc__informe input[type=email] { min-height: 54px; padding: 0 18px; border-radius: 14px; border: 1.5px solid rgba(243, 240, 233, .3); background: rgba(243, 240, 233, .08); color: inherit; font: 500 17px/1 var(--texto); }
.calc__informe input:focus-visible { outline: 2px solid var(--acento-luz); outline-offset: 2px; }
.calc__acepto { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; opacity: .9; cursor: pointer; }
.calc__acepto input { flex: none; margin-top: 2px; }
.calc__informe .boton { justify-self: start; background: var(--boton-cierre, var(--papel)); color: var(--boton-cierre-txt, var(--tinta)); border: 0; font: 600 17px/1 var(--texto); cursor: pointer; }
.calc__estado { margin: 0; min-height: 1.4em; font-size: 15px; }

@media (max-width: 960px) {
  .calc__rejilla { grid-template-columns: 1fr; }
  .calc__resultado { position: relative; top: auto; }
  .calc__mini { position: sticky; bottom: 12px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 0 22px; border-radius: 999px; background: var(--tinta); color: #f3f0e9; text-decoration: none; font-size: 14px; box-shadow: 0 16px 40px -16px var(--sombra); }
  .calc__mini strong { font: 500 22px/1 var(--serif, var(--display)); color: var(--acento-luz); }
  .comparar-calc, .calc__informe { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .calc__kpis { grid-template-columns: 1fr 1fr; }
  .calc__kpis li:first-child { grid-column: 1 / -1; }
  .seg [role=radio] { flex: 1 1 auto; padding: 0 14px; font-size: 14px; }
}
.calc :is(.calc__cifra, .calc__kpi, .desliza output, .comparar-calc__n, .servicio__desde, .calc__mini strong) { font-variant-numeric: lining-nums tabular-nums; }
.calc__aparte { margin: 18px 0 0; font: 400 clamp(19px, 1.7vw, 23px)/1.35 var(--serif, var(--display)); color: var(--tinta-2); }

/* ───────── Casos en vivo: la web real en un móvil (2026-10-05) ───────── */
.caso__vivo { position: relative; display: grid; place-items: center; isolation: isolate; }
.caso__vivo .caso__fondo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(.9); }
.caso__vivo--noche { background: radial-gradient(90% 80% at 50% 30%, #3a1a0b, var(--noche) 72%); }
.movil-vivo { position: relative; height: 90%; aspect-ratio: 540 / 1169; border-radius: 30px; border: 7px solid #121214; background: #121214; overflow: hidden; box-shadow: 0 0 0 1.5px #2a2a2e, 0 40px 80px -30px rgba(0, 0, 0, .6); }
.movil-vivo canvas { display: block; width: 100%; height: 100%; }
.caso__chat--sobre { position: absolute; left: 4%; bottom: 7%; width: min(260px, 36%); padding: 0; gap: 8px; background: none; }
.caso__chat--sobre .msg { font-size: 13px; }
.caso__chat--sobre .msg--bar { box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6); }
@media (max-width: 860px) {
  .caso__vivo { aspect-ratio: 4 / 5; }
  .caso__chat--sobre { display: none; }
}

/* ───────── Botón «sin animaciones» (html.quieto) = lo mismo que prefers-reduced-motion ───────── */
html.quieto .salto { height: auto; }
html.quieto .salto__escena { position: relative; height: auto; padding: 100px 0; }
html.quieto .salto__foto--antes, html.quieto .salto__flash, html.quieto .salto__blanco, html.quieto .salto__txt--a { display: none; }
html.quieto .salto__foto--despues { opacity: 1; transform: none; }
html.quieto .salto__txt--b { position: static; opacity: 1; transform: none; margin-top: 24px; text-align: center; max-width: none; }
html.quieto .viaje { height: auto; }
html.quieto .viaje__escena { position: relative; height: 100svh; }
html.quieto .capa { clip-path: none; }
html.quieto .capa__movil, html.quieto .movil, html.quieto .pista, html.quieto .capa__fuego, html.quieto .capa__brillo { display: none; }
html.quieto .capa__titulo { opacity: 1; }
html.quieto .viaje__final { opacity: 1; transform: none; pointer-events: auto; }
html.quieto .viaje__arriba { display: none; }
html.quieto .pasos { --avance: 1; }
html.quieto * { animation: none !important; transition: none !important; }

/* ───────── Detalles de oficio (2026-10-05) ───────── */
.pista__txt { font-weight: inherit; font-variant-numeric: tabular-nums; }

/* Titulares que entran con estela (copias que se alcanzan); el texto nunca está oculto de partida */
.estela.visto { animation: estela 1s var(--ease) both; }
@keyframes estela {
  from { transform: translateY(.3em); text-shadow: 0 .16em 0 color-mix(in srgb, currentColor 30%, transparent), 0 .32em 0 color-mix(in srgb, currentColor 15%, transparent), 0 .48em 0 color-mix(in srgb, currentColor 6%, transparent); }
  to { transform: none; text-shadow: 0 0 0 transparent; }
}

/* Índice de capítulos (solo escritorio) */
.indice { position: fixed; right: clamp(14px, 1.6vw, 28px); top: 50%; z-index: 35; transform: translate(12px, -50%); opacity: 0; pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.indice--visible { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.indice ol { list-style: none; margin: 0; padding: 10px 8px; display: grid; gap: 2px; border-radius: 18px; background: color-mix(in srgb, var(--papel) 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -14px var(--sombra); }
.indice a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 30px; padding: 0 8px; border-radius: 10px; text-decoration: none; color: var(--gris); font: 600 12px/1 var(--texto); letter-spacing: .06em; }
.indice a b { font-weight: 600; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .45s var(--ease), opacity .3s; }
.indice a span::before { content: "/"; opacity: .5; }
.indice a:hover b, .indice a:focus-visible b, .indice a[aria-current] b { max-width: 140px; opacity: 1; }
.indice a[aria-current] { color: var(--tinta); }
.indice a[aria-current] span { color: var(--azul); }
@media (max-width: 1099px) { .indice { display: none; } }

/* Pie: botón sin animaciones + marca gigante */
.pie__quieto { border: 0; background: none; padding: 0; min-height: 32px; color: rgba(255, 255, 255, .6); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pie__quieto:hover { color: #fff; }
.pie__gigante { flex-basis: 100%; margin: 18px 0 -0.18em !important; font: 500 clamp(64px, 17vw, 300px)/.8 var(--serif, var(--display)); letter-spacing: -.035em; color: rgba(255, 255, 255, .92); white-space: nowrap; overflow: hidden; }
.pie__gigante span { font-style: italic; color: var(--acento-luz); }
/* Ajustes tras la prueba (05-10): índice compacto (solo números) y chat al lado del móvil, sin pisarlo */
.indice ol { padding: 8px 4px; }
.indice a { justify-content: center; padding: 0 6px; }
.indice a b { position: absolute; right: calc(100% + 10px); padding: 6px 10px; border-radius: 8px; background: var(--tinta); color: var(--papel); max-width: none; pointer-events: none; transform: translateX(6px); transition: opacity .25s, transform .3s var(--ease); }
.indice a:hover b, .indice a:focus-visible b { opacity: 1; transform: none; }
.indice a[aria-current] b { opacity: 0; }
.indice a:hover[aria-current] b { opacity: 1; }
.indice a { position: relative; }
.indice a[aria-current]::after { content: ""; position: absolute; right: -4px; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--azul); }
.caso__vivo--noche { justify-items: end; padding-right: 9%; }
.caso__chat--sobre { left: 5%; width: min(270px, 42%); }
@media (max-width: 860px) { .caso__vivo--noche { justify-items: center; padding-right: 0; } }
/* Sin animaciones, la cabecera no sabe cuándo pasa la portada: fondo siempre */
html.quieto .cabecera { background: color-mix(in srgb, var(--papel) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linea); color: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .cabecera { background: color-mix(in srgb, var(--papel) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linea); color: var(--tinta); } }
/* Consejo de la hermana (05-10): el tiempo, en grande */
.calc__tiempo { margin: 14px 0 0; font: 500 clamp(21px, 2vw, 27px)/1.25 var(--serif, var(--display)); color: #f3f0e9; }
.calc__tiempo:empty { display: none; }
.calc__lema { margin: 10px 0 0; font: 400 clamp(20px, 2vw, 28px)/1.2 var(--serif, var(--display)); color: var(--tinta-2); }
.calc__lema em { color: var(--azul); }

/* ───────── 4 ter · Simulador (integrado 2026-10-05; origen: 08-LANDING-WEB/simulador/) ───────── */
@font-face { font-family: "Bricolage"; src: url("fonts/bricolage-grotesque-normal-400-700.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
:root { --c-fondo: #1c0e06; --c-acento: #e8742c; --c-claro: #f6ead8; --c-sobre-fondo: #f6ead8; --c-sobre-acento: #1c0e06;
  --d-display: var(--serif, Georgia, serif); --d-peso: 500; --d-ancho: 100%; --d-estilo: normal; --d-mayus: none; --d-radio: 4px; --d-filtro: none; --d-espacio: -.01em; }
.sim { --arena: #c9b48a; }
.sim__cabecera h2 { font-weight: 500; font-size: clamp(46px, 7.4vw, 124px); line-height: .95; letter-spacing: -.015em; }
.calc__siguiente { margin: clamp(40px, 5vw, 70px) 0 0; text-align: center; font: 500 clamp(26px, 3vw, 40px)/1.1 var(--serif, var(--display)); }
.calc__siguiente a { color: var(--tinta); text-decoration: none; border-bottom: 2px solid var(--azul); padding-bottom: 4px; }
.calc__siguiente a::after { content: " ↓"; color: var(--azul); }
html.quieto .dw__hero img { animation: none; }
.sim { max-width: 1320px; margin: 0 auto; padding: clamp(40px, 7vw, 100px) var(--g) clamp(80px, 10vw, 140px); }
.sim__rejilla { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 90px); align-items: start; margin-top: clamp(40px, 5vw, 70px); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border-radius: 999px; border: 0; background: var(--azul); color: var(--papel); font: 600 16px/1 var(--texto); cursor: pointer; transition: transform .25s var(--ease), background .2s; }
.btn:hover { transform: translateY(-2px); background: #222e45; }
.btn--linea { background: none; color: var(--tinta); border: 1.5px solid var(--linea); }
.btn--linea:hover { background: none; border-color: var(--tinta-2); }
.btn--peq { min-height: 44px; min-width: 44px; padding: 0 14px; font-size: 20px; }

/* Preguntas */
.preg { position: sticky; top: 24px; padding: clamp(26px, 3vw, 40px); border-radius: 28px; background: #fff; box-shadow: 0 30px 70px -40px var(--sombra); }
.preg__progreso { margin: 0; font: 500 20px/1 var(--serif); color: var(--gris); }
.preg__progreso span { color: var(--tinta); font-size: 1.4em; }
.preg__barra { height: 3px; margin: 14px 0 30px; border-radius: 3px; background: var(--linea); overflow: hidden; }
.preg__barra span { display: block; height: 100%; width: 20%; background: var(--azul); transition: width .5s var(--ease); }
.sim-paso { margin: 0; padding: 0; border: 0; min-width: 0; }
.sim-paso[hidden] { display: none; }
.sim-paso legend { padding: 0; margin-bottom: 22px; font: 500 clamp(30px, 3vw, 42px)/1.05 var(--serif); letter-spacing: -.01em; }
.campo { width: 100%; min-height: 60px; padding: 0 20px; border-radius: 16px; border: 1.5px solid var(--linea); background: var(--papel); color: var(--tinta); font: 500 20px/1 var(--texto); }
.campo:focus { outline: none; border-color: var(--azul); }
.preg__ayuda { margin: 10px 0 0; min-height: 1.4em; font-size: 14px; color: var(--gris); }
.preg__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; }
.preg__nav .btn:last-child { margin-left: auto; }

.opciones { display: grid; gap: 10px; }
.opciones button, .estilos button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 0 20px; border-radius: 16px; border: 1.5px solid var(--linea); background: none; color: var(--tinta); font: 600 16px/1.2 var(--texto); text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.opciones button[aria-checked="true"], .estilos button[aria-checked="true"] { border-color: var(--tinta); background: var(--papel); box-shadow: inset 0 0 0 1px var(--tinta); }
.opciones button:disabled { opacity: .45; cursor: default; }
.opciones small { font-weight: 500; color: var(--gris); }

.sim-paletas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sim-paletas button { position: relative; height: 64px; border-radius: 14px; border: 0; cursor: pointer; overflow: hidden; box-shadow: inset 0 0 0 1px var(--linea); }
.sim-paletas button i { position: absolute; right: 0; top: 0; bottom: 0; width: 36%; }
.sim-paletas button span { position: absolute; left: 10px; bottom: 8px; font: 600 11px/1 var(--texto); letter-spacing: .04em; }
.sim-paletas button[aria-checked="true"] { box-shadow: 0 0 0 3px var(--papel), 0 0 0 5px var(--tinta); }
.logo { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1.5px dashed var(--tinta-2); font-weight: 600; font-size: 15px; cursor: pointer; }
.logo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.logo:focus-within { outline: 2px solid var(--azul); outline-offset: 3px; }

.estilos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.estilos button { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 96px; padding: 14px 18px; }
.estilos b { font-size: 26px; line-height: 1; }
.estilos small { font-weight: 500; font-size: 13px; color: var(--gris); }
.est-elegante { font-family: var(--serif); font-weight: 500; }
.est-cercano { font-family: "Bricolage", var(--texto); font-weight: 700; letter-spacing: -.02em; }
.est-atrevido { font-family: "Archivo", var(--texto); font-weight: 900; font-stretch: 62%; text-transform: uppercase; letter-spacing: -.01em; }
.est-natural { font-family: var(--serif); font-style: italic; font-weight: 500; }

/* Vista previa */
.vista__tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.vista__tabs button { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--linea); background: none; color: var(--tinta-2); font: 600 15px/1 var(--texto); cursor: pointer; }
.vista__tabs button[aria-selected="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.vista__panel[hidden] { display: none; }
.vista__nota { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--gris); }

.tel { width: min(340px, 100%); margin: 0 auto; aspect-ratio: 9 / 19; border-radius: 46px; border: 10px solid #121214; background: #121214; box-shadow: 0 0 0 1.5px #2a2a2e, 0 60px 110px -40px var(--sombra); overflow: hidden; }
.tel__pantalla { height: 100%; overflow-y: auto; scrollbar-width: none; border-radius: 36px; }
.tel__pantalla::-webkit-scrollbar { display: none; }

/* La web de ejemplo, con lo del visitante */
.demo { background: var(--c-claro); color: var(--c-fondo); font: 13px/1.45 var(--texto); }
.demo :is(.dw__marca, .dw__titulo, .dw__h) { font-family: var(--d-display); font-weight: var(--d-peso); font-stretch: var(--d-ancho); font-style: var(--d-estilo); text-transform: var(--d-mayus); letter-spacing: var(--d-espacio); }
.dw__nav { position: absolute; z-index: 2; display: flex; justify-content: space-between; align-items: center; width: calc(min(340px, 100%) - 20px); padding: 34px 18px 0; color: #fff; }
.dw__marca { font-size: 19px; line-height: 1; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.dw__menu { width: 20px; height: 10px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; }
.dw__hero { position: relative; height: 78%; overflow: hidden; }
.dw__hero img { width: 100%; height: 100%; object-fit: cover; filter: var(--d-filtro); animation: kb 16s ease-in-out infinite alternate; }
@keyframes kb { to { transform: scale(1.1) translateY(-2%); } }
.dw__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, color-mix(in srgb, var(--c-fondo) 92%, transparent)); }
.dw__hero-txt { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 22px; color: var(--c-sobre-fondo); }
.dw__eyebrow { margin: 0 0 8px; font: 600 9px/1 var(--texto); letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.dw__titulo { margin: 0; font-size: 31px; line-height: 1.02; }
.dw__botones { display: flex; gap: 8px; margin: 16px 0 0; }
.dw__btn { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: var(--d-radio); background: var(--c-acento); color: var(--c-sobre-acento); font-weight: 600; font-size: 12px; }
.dw__btn--2 { background: none; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.dw__franja { display: flex; justify-content: center; gap: 10px; padding: 12px; background: var(--c-acento); color: var(--c-sobre-acento); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.dw__carta { padding: 24px 18px 90px; }
.dw__h { margin: 0 0 14px; font-size: 26px; line-height: 1; }
.dw__platos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dw__platos figure { margin: 0; }
.dw__platos img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--d-radio); filter: var(--d-filtro); }
.dw__platos figcaption { margin-top: 6px; font-weight: 600; font-size: 12px; }
.dw__barra { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px 18px; background: var(--c-claro); box-shadow: 0 -1px 0 color-mix(in srgb, var(--c-fondo) 15%, transparent); font-weight: 600; font-size: 12px; }
.dw__barra .dw__btn { flex: 1; justify-content: center; }
.dw__barra > span:first-child { flex: 1; text-align: center; min-height: 38px; display: grid; place-items: center; border-radius: var(--d-radio); box-shadow: inset 0 0 0 1.5px currentColor; }

/* Carrusel */
.car { display: grid; justify-items: center; gap: 16px; }
.car canvas { width: min(420px, 100%); height: auto; border-radius: 6px; box-shadow: 0 40px 80px -40px var(--sombra); }
.car__nav { display: flex; align-items: center; gap: 16px; font: 500 20px/1 var(--serif); }

/* Perfil de Instagram */
.pf { background: #fff; color: #111; font: 13px/1.35 -apple-system, var(--texto); padding-top: 34px; }
.pf__top { padding: 0 14px 10px; font-size: 15px; }
.pf__cab { display: flex; gap: 14px; padding: 4px 14px 10px; }
.pf__avatar { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--c-fondo); color: var(--c-acento); font: 500 26px/1 var(--d-display); font-weight: var(--d-peso); font-stretch: var(--d-ancho); font-style: var(--d-estilo); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-acento); }
.pf__bio { display: grid; gap: 1px; align-content: center; font-size: 12.5px; }
.pf__cat { color: #737373; }
.pf__botones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px 14px 12px; }
.pf__botones span { display: grid; place-items: center; min-height: 30px; border-radius: 8px; background: #efefef; font-weight: 600; font-size: 12.5px; }
.pf__botones span:first-child { background: #0095f6; color: #fff; }
.pf__dest { display: flex; gap: 12px; padding: 0 14px 14px; overflow: hidden; }
.pf__dest span { display: grid; justify-items: center; gap: 4px; font-size: 11px; }
.pf__dest span::before { content: ""; width: 54px; height: 54px; border-radius: 50%; background: var(--c-claro); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #dbdbdb; }
.pf__rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.pf__rejilla canvas { width: 100%; height: auto; display: block; }

/* Cierre */
.final { margin-top: clamp(60px, 8vw, 110px); padding: clamp(30px, 4vw, 56px); border-radius: 28px; background: var(--azul); color: var(--papel); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); }
.final h2 { margin: 0; font: 500 clamp(34px, 4vw, 58px)/1 var(--serif); }
.final h2 + p { margin: 14px 0 0; opacity: .82; }
.final__campos { display: grid; gap: 14px; }
.final__campos label:not(.final__acepto) { display: grid; gap: 6px; font-size: 14px; }
.final input[type=text], .final input[type=email] { min-height: 54px; padding: 0 18px; border-radius: 14px; border: 1.5px solid rgba(243, 240, 233, .3); background: rgba(243, 240, 233, .08); color: inherit; font: 500 17px/1 var(--texto); }
.final__acepto { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.final__acepto input { width: 20px; height: 20px; flex: none; accent-color: var(--arena); }
.final__acepto a { color: inherit; }
.final .btn { justify-self: start; background: var(--arena); color: var(--tinta); }
.final__estado { margin: 0; min-height: 1.4em; }

@media (max-width: 960px) {
  .sim__rejilla, .final { grid-template-columns: 1fr; }
  .preg { position: relative; top: auto; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
.demo { position: relative; }
.dw__nav { left: 0; right: 0; width: auto; }
/* Legibilidad del nombre arriba, sobre fotos claras */
.dw__hero::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 26%; background: linear-gradient(rgba(0, 0, 0, .55), transparent); }
.dw__nav { z-index: 3; }
.sim [hidden] { display: none !important; }
.sim .preg { top: 96px; }

/* ───────── 1 · Portada: recorrido por nichos (sustituye a «el móvil que se abre», 2026-10-05) ─────────
   Origen y pruebas: ../recorrido-portada/. El JS (recorrido.js) pone opacidad, escala y desenfoque a cada capa. */
.rec { --arena: #c9b48a; position: relative; height: 1400vh; background: var(--tinta); color: #fff; }
.rec__escena { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.rec__capas { position: absolute; inset: 0; }
.rec__capa { position: absolute; inset: 0; opacity: 0; will-change: transform, opacity, filter; }
.rec__capa:first-child { opacity: 1; }
.rec__capa img { width: 100%; height: 100%; object-fit: cover; }
.rec__destello { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 60% at 50% 48%, rgba(255, 236, 196, 1), rgba(255, 214, 150, .85) 40%, rgba(255, 190, 120, .55) 75%); }
.rec__escena.blanco .rec__destello { background: radial-gradient(60% 60% at 50% 45%, rgba(255, 253, 248, 1), rgba(250, 247, 238, .9) 45%, rgba(240, 238, 228, .6) 80%); }
.rec__velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .45), transparent 22%, transparent 52%, rgba(0, 0, 0, .62)); }
/* Apertura: la marca en grande y el bar a través de las letras (técnica «Bienvenido» del hotel) */
.rec__mascara { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: var(--papel); mix-blend-mode: screen;
  transform-origin: var(--mx, 50%) var(--my, 50%); transform: scale(var(--sm, 1)); opacity: var(--om, 1); pointer-events: none; }
.rec__marca { margin: 0; font: 500 clamp(110px, 23vw, 420px)/.82 var(--serif, var(--display)); letter-spacing: -.035em; color: #000; white-space: nowrap; }
.rec__marca em { font-style: italic; }
.rec__lema { position: absolute; z-index: 6; left: 0; right: 0; top: calc(50% + clamp(70px, 11vw, 190px)); margin: 0; text-align: center;
  font: 600 13px/1 var(--texto); letter-spacing: .24em; text-transform: uppercase; color: var(--tinta); opacity: var(--ol, 1); }
.cabecera { opacity: var(--oc, 1); }
/* Interfaz editorial */
.rec__indice { position: absolute; right: var(--g); top: 50%; transform: translateY(-50%); margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; text-align: right;
  font: 600 12px/1 var(--texto); letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 240, 233, .45); }
.rec__indice li { transition: color .4s; }
.rec__indice li.on { color: #f3f0e9; }
.rec__indice li.on::before { content: ""; display: inline-block; width: 22px; height: 1.5px; margin: 0 10px 3px 0; background: var(--arena); vertical-align: middle; }
.rec__contador { position: absolute; left: var(--g); top: 110px; margin: 0; font: 500 64px/1 var(--serif, var(--display)); color: #f3f0e9; }
.rec__contador small { font-size: .35em; color: rgba(243, 240, 233, .55); }
.rec__cap { position: absolute; left: var(--g); bottom: clamp(48px, 9vh, 96px); max-width: 760px; opacity: 0; pointer-events: none; }
.rec__cap.activo { pointer-events: auto; }
.rec__sector { margin: 0 0 14px; font: 600 12px/1 var(--texto); letter-spacing: .2em; text-transform: uppercase; color: var(--arena); }
.rec .rec__cap h2 { margin: 0; font: 500 clamp(54px, 8.4vw, 140px)/.92 var(--serif, var(--display)); letter-spacing: -.015em; color: #f3f0e9; text-shadow: 0 4px 40px rgba(0, 0, 0, .35); }
.rec__cap em { color: var(--arena); }
.rec__cta { display: inline-flex; align-items: center; min-height: 52px; margin-top: 26px; padding: 0 26px; border-radius: 999px; background: #f3f0e9; color: #1d1b18; font-weight: 600; text-decoration: none; }
@media (max-width: 760px) {
  .rec__indice { display: none; }
  .rec__contador { top: 84px; font-size: 44px; }
  .rec__marca { font-size: 31vw; white-space: normal; text-align: center; line-height: .8; }
  .rec__marca em { display: block; }
  .rec__lema { top: calc(50% + 34vw); font-size: 11px; padding: 0 20px; }
}
/* Sin animaciones: la primera escena quieta y los cuatro titulares debajo */
@media (prefers-reduced-motion: reduce) {
  .rec { height: auto; } .rec__escena { position: relative; height: auto; padding-bottom: 48px; }
  .rec__capas { position: relative; height: 100svh; }
  .rec__mascara, .rec__lema, .rec__destello, .rec__indice, .rec__contador { display: none; }
  .rec__cap { position: relative; left: auto; bottom: auto; opacity: 1; pointer-events: auto; padding: 36px var(--g) 0; }
  .rec .rec__cap h2 { font-size: clamp(40px, 6vw, 84px); }
}
html.quieto .rec { height: auto; } html.quieto .rec__escena { position: relative; height: auto; padding-bottom: 48px; }
html.quieto .rec__capas { position: relative; height: 100svh; }
html.quieto :is(.rec__mascara, .rec__lema, .rec__destello, .rec__indice, .rec__contador) { display: none; }
html.quieto .rec__cap { position: relative; left: auto; bottom: auto; opacity: 1; pointer-events: auto; padding: 36px var(--g) 0; }
html.quieto .rec .rec__cap h2 { font-size: clamp(40px, 6vw, 84px); }

/* ───────── 6 quater · Selfie → alfombra roja v2 (2026-10-05): a pantalla completa y corte por la cara ───────── */
.salto { height: 420vh; background: #0b0a09; }
.salto__escena { display: block; }
.salto .salto__foto { position: absolute; left: 0; top: 0; width: auto; height: auto; max-width: none; border-radius: 0; box-shadow: none; transform-origin: 0 0; will-change: transform, filter, opacity; opacity: 1; filter: none; }
.salto .salto__foto--despues { opacity: 0; z-index: 1; }
.salto__flash { z-index: 3; }
.salto__velo { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(transparent 45%, rgba(0, 0, 0, .55)); }
.salto__blanco { z-index: 5; }
.salto .salto__txt { z-index: 6; }
.salto .salto__txt--a { left: var(--g); top: auto; bottom: clamp(48px, 10vh, 110px); font-size: clamp(48px, 7vw, 120px); }
.salto .salto__txt--b { left: var(--g); right: auto; bottom: clamp(48px, 10vh, 110px); text-align: left; max-width: none; font-size: clamp(54px, 8.4vw, 140px); font-style: normal; }
@media (prefers-reduced-motion: reduce) {
  .salto .salto__foto--despues { position: relative; width: 100%; height: 100svh; object-fit: cover; object-position: 50% 30%; opacity: 1; transform: none; }
  .salto__velo { display: none; }
}
html.quieto .salto .salto__foto--despues { position: relative; width: 100%; height: 100svh; object-fit: cover; object-position: 50% 30%; opacity: 1; transform: none; }
html.quieto .salto__velo { display: none; }
/* Calculadora · eco de lo que ha dicho (antiventas: los números salen de sus palabras) */
.calc__eco { margin: 0 0 18px; font: 400 15px/1.45 var(--texto); color: rgba(243, 240, 233, .7); }
.calc__eco:empty { display: none; }
.calc__dia { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: rgba(243, 240, 233, .72); }
.calc__dia:empty { display: none; }

/* ───────── Simulador v2 (2026-10-06): cortinilla, momento final y miniatura en móvil ───────── */
.sim .tel, .car__marco { position: relative; }
.car__marco { width: min(420px, 100%); overflow: hidden; border-radius: 6px; line-height: 0; box-shadow: 0 40px 80px -40px var(--sombra); }
.car__marco canvas { width: 100%; }
.car__marco::after { border-radius: 0 !important; }
.sim .tel::after, .car__marco::after { content: ""; position: absolute; inset: 0; z-index: 9; border-radius: 36px; background: var(--c-barrido, var(--c-acento)); transform: translateX(-101%); pointer-events: none; }
.sim .tel.cambio::after, .car__marco.cambio::after { animation: sim-barrido .62s cubic-bezier(.7, 0, .3, 1); }
@keyframes sim-barrido { 0% { transform: translateX(-101%); } 48% { transform: translateX(0); } 100% { transform: translateX(101%); } }
.sim .tel { overflow: hidden; }

.sim-fin { scroll-margin-top: 70px; width: 100vw; margin: clamp(60px, 8vw, 110px) 0 0 calc(50% - 50vw); padding: clamp(70px, 9vw, 130px) var(--g); background: var(--tinta); color: #fff; text-align: center; overflow: hidden; }
.sim-fin .eyebrow { color: rgba(243, 240, 233, .55); }
.sim-fin__titulo { margin: 0; font: 400 clamp(44px, 7vw, 120px)/.95 var(--display); letter-spacing: -.045em; }
.sim-fin__titulo span { font-style: italic; color: var(--c-acento); }
.sim-fin__nota { margin: 22px auto 0; max-width: 34ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.45; color: rgba(255, 255, 255, .72); }
.sim-fin__piezas { display: flex; justify-content: center; align-items: center; gap: clamp(14px, 3vw, 48px); margin: clamp(40px, 6vw, 80px) auto 0; max-width: 1200px; }
.sim-fin__pieza { flex: 0 0 auto; opacity: 0; transition: transform 1s cubic-bezier(.22, .8, .24, 1), opacity .7s; }
.sim-fin__pieza .tel { width: min(300px, 26vw); margin: 0; }
.sim-fin__pieza--car canvas { display: block; width: min(330px, 28vw); height: auto; border-radius: 8px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .7); }
.sim-fin__pieza--web { transform: translate(60px, 40px) rotate(-7deg); }
.sim-fin__pieza--car { transform: translateY(60px) scale(.92); transition-delay: .15s; z-index: 1; }
.sim-fin__pieza--perfil { transform: translate(-60px, 40px) rotate(7deg); transition-delay: .3s; }
.sim-fin.visto .sim-fin__pieza { opacity: 1; }
.sim-fin.visto .sim-fin__pieza--web { transform: translate(0, 18px) rotate(-4deg); }
.sim-fin.visto .sim-fin__pieza--car { transform: none; }
.sim-fin.visto .sim-fin__pieza--perfil { transform: translate(0, 18px) rotate(4deg); }
.sim-fin__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: clamp(40px, 5vw, 64px) 0 0; }
.sim-fin .btn { background: #fff; color: var(--tinta); text-decoration: none; }
.sim-fin .btn--claro { background: none; color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); }

.sim-mini { position: fixed; z-index: 30; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; width: min(260px, 70vw); padding: 8px 14px 8px 8px; border: 0; border-radius: 18px; background: var(--c-fondo); color: var(--c-sobre-fondo); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .55); text-align: left; cursor: pointer; }
.sim-mini[hidden] { display: none; }
.sim-mini__img { flex: none; width: 52px; height: 64px; border-radius: 12px; overflow: hidden; }
.sim-mini__img img { width: 100%; height: 100%; object-fit: cover; }
.sim-mini__txt { display: grid; gap: 2px; min-width: 0; }
.sim-mini__txt b { font: var(--d-estilo) var(--d-peso) 18px/1.05 var(--d-display); font-stretch: var(--d-ancho); text-transform: var(--d-mayus); color: var(--c-acento); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-mini__txt span { font-size: 12px; line-height: 1.3; opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 960px) {
  .sim-fin__piezas { flex-direction: column; gap: 28px; }
  .sim-fin__pieza .tel { width: min(300px, 78vw); }
  .sim-fin__pieza--car canvas { width: min(320px, 82vw); }
  .sim-fin.visto .sim-fin__pieza--web, .sim-fin.visto .sim-fin__pieza--perfil { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .sim-fin__pieza { opacity: 1; transform: none !important; } .sim .tel::after, .car__marco::after { display: none; } }
html.quieto .sim-fin__pieza { opacity: 1; transform: none !important; } html.quieto .sim .tel::after, html.quieto .car__marco::after { display: none; }

/* ───────── Páginas legales (2026-10-06) ───────── */
.legal { max-width: 760px; margin: 0 auto; padding: 140px var(--g) 90px; line-height: 1.65; }
.legal h1 { font: 400 clamp(40px, 6vw, 76px)/1 var(--display); letter-spacing: -.04em; margin: 0 0 32px; }
.legal h2 { font: 600 clamp(20px, 2vw, 24px)/1.25 var(--display); letter-spacing: -.01em; margin: 48px 0 12px; }
.legal p, .legal li { color: var(--tinta-2); font-size: 17px; }
.legal ul { padding-left: 1.2em; }
.legal li { margin: 0 0 8px; }
.legal a { color: var(--azul); }
.legal code { font-size: .9em; background: var(--papel-2); padding: 1px 6px; border-radius: 4px; }
.legal__datos { list-style: none; padding: 22px 24px !important; background: var(--papel-2); border-radius: 14px; }
.legal__fecha { margin-top: 56px; font-size: 14px !important; color: var(--gris) !important; }
.final__acepto--opcional { opacity: .85; }

.final__trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }