/* ===== Caudal · landing =====
   El mundo es el de la bienvenida de la app: escenario de madera en sombra, miel líquida, oro de la credencial.
   Paleta Miel y Marfil; los dorados intermedios (#ecd394, #e2c47e, #7a5714, #5e420e) son los de la escena aprobada. */
@font-face { font-family: 'Satoshi'; src: url(fonts/Satoshi-Variable.woff2) format('woff2'); font-weight: 300 900; font-display: swap; }

:root {
  --tinta: #211a12; --tinta2: #2a2117; --miel: #a87a22; --miel2: #c9a24e; --oro: #e2c47e;
  --marfil: #fbf6ec; --marfil2: #f4ecdc; --arena: #dcc8a0;
  --texto-n: rgb(251 246 236 / .74); --texto-p: #5a4a36;
  --borde: max(24px, 5vw);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--tinta); color: var(--marfil); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: 'Satoshi', system-ui, sans-serif; font-size: 17px; line-height: 1.6; font-feature-settings: 'tnum' 1, 'ss01' 1;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--miel2); outline-offset: 4px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Navegación ---------- */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center;
  padding: 26px var(--borde); }
.marca { display: inline-flex; align-items: center; gap: 11px; font-size: 22px; font-weight: 500; letter-spacing: -.03em; color: var(--marfil); }
.marca svg { width: 30px; height: 30px; }
.nav-entrar { font-size: 15px; font-weight: 500; color: rgb(251 246 236 / .8); padding: 9px 18px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgb(226 196 126 / .32); transition: color .25s, box-shadow .25s, background .25s; }
.nav-entrar:hover { color: var(--marfil); background: rgb(226 196 126 / .08); box-shadow: inset 0 0 0 1px rgb(226 196 126 / .6); }

/* ---------- Botón de miel (el de la bienvenida) ---------- */
.boton { display: inline-flex; align-items: center; gap: 11px; background: linear-gradient(180deg, #ecd394, #c9a24e); color: var(--tinta2);
  font-weight: 600; font-size: 16.5px; letter-spacing: -.005em; padding: 16px 30px 16px 24px; border-radius: 999px;
  box-shadow: 0 18px 38px -16px rgb(214 168 76 / .8), inset 0 1px 0 rgb(255 250 232 / .85), inset 0 -1px 0 rgb(122 87 20 / .35);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.boton svg { width: 19px; height: 19px; }
.boton:hover { transform: translateY(-2px); box-shadow: 0 24px 44px -16px rgb(214 168 76 / .9), inset 0 1px 0 rgb(255 250 232 / .85), inset 0 -1px 0 rgb(122 87 20 / .35); }

/* ---------- El hilo: un tramo de la onda del logo separa cada sección ---------- */
.hilo { position: absolute; left: 0; top: -12px; width: 100%; height: 24px; overflow: visible; z-index: 3; }
.hilo path { fill: none; stroke: var(--miel2); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: .55; }
.escena + .papel .hilo { top: 14px; }
.papel .hilo path { stroke: var(--miel); opacity: .5; }

/* ======================================================================
   La escena
   ====================================================================== */
.escena { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 85% at 50% 30%, #2e2519 0%, #211a12 52%, #18120c 100%); }
/* Sin JS (o sin canvas) la miel es un degradé quieto en su nivel final. */
.escena::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(216 180 101 / .9) 0, rgb(185 139 49 / .85) 2px, rgb(122 87 20 / .7) 30%, rgb(58 42 20 / .9) 100%);
  border-top: 1.4px solid rgb(242 217 153 / .9); }
.js .escena.viva::after { display: none; }
.liquido { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.ondas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.onda { fill: none; stroke: var(--miel2); stroke-width: 2.6; stroke-linecap: round; opacity: 0; }
.cab { fill: #f2d999; }

.escena-textos { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(92px, 14vh, 170px) var(--borde) 0; max-width: 1200px; margin: 0 auto; }
h1 { font-weight: 300; font-size: min(clamp(42px, 6.2vw, 98px), max(40px, 10.4vh)); line-height: 1.02; letter-spacing: -.042em; color: var(--marfil); text-wrap: balance; }
h1 span { display: block; }
h1 .l2 { color: rgb(251 246 236 / .9); }
.giro { margin-top: clamp(18px, 2.6vh, 28px); font-size: min(clamp(22px, 2.5vw, 36px), max(21px, 4.4vh)); font-weight: 400; letter-spacing: -.028em; line-height: 1.2; color: var(--oro); }
.giro-in { display: inline-block; padding: 0 .1em; }
.js .giro-in { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
.bajada { margin-top: 18px; max-width: 34em; font-size: clamp(16px, 1.25vw, 18.5px); color: var(--texto-n); text-wrap: pretty; }
.acciones { margin-top: clamp(20px, 3.4vh, 30px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; }
.repetir { font-size: 14px; color: rgb(251 246 236 / .6); padding: 8px 4px; border-bottom: 1px solid rgb(226 196 126 / .3); transition: color .25s; }
.repetir:hover { color: var(--marfil); }

/* La regla del vaso (cuánto queda del sueldo) y el marcador que viaja con la superficie. */
.regla { position: absolute; right: var(--borde); z-index: 3; width: 120px; pointer-events: none; display: none; }
.regla div { position: absolute; right: 0; display: flex; align-items: center; gap: 10px; transform: translateY(-50%);
  font-size: 12px; letter-spacing: .04em; color: rgb(251 246 236 / .44); white-space: nowrap; }
.regla div::after { content: ''; width: 14px; height: 1px; background: rgb(226 196 126 / .45); }
.regla div.cero { color: rgb(251 246 236 / .6); }
.marcador { position: absolute; z-index: 5; left: 50%; bottom: calc(24% + 16px); transform: translateX(-50%); display: flex; align-items: baseline; gap: 12px;
  padding: 9px 16px 10px; border-radius: 999px; background: rgb(33 26 18 / .66); box-shadow: inset 0 0 0 1px rgb(226 196 126 / .3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap; pointer-events: none; }
.m-dia { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--oro); }
.m-monto { font-size: 15px; font-weight: 500; color: var(--marfil); letter-spacing: -.005em; }
.js .viva .marcador { bottom: auto; top: 0; left: 0; transform: none; will-change: transform; }
.fugas-vivas { list-style: none; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.fugas-vivas li { position: absolute; font-size: 13.5px; color: rgb(251 246 236 / .8); white-space: nowrap; opacity: 0; transform: translate(-50%, 0); }
.fugas-vivas li b { font-weight: 500; color: var(--arena); margin-left: 6px; }
.fugas-vivas li { top: 0; left: 0; }
.fugas-vivas li.bien { color: rgb(251 246 236 / .92); }
.fugas-vivas li.bien::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--arena); margin-right: 8px; vertical-align: 2px; }
.fugas-vivas li.apartado { transform: none; font-size: 12.5px; letter-spacing: .02em; color: rgb(251 246 236 / .7); }
.fugas-vivas li.apartado b { color: var(--arena); }
@media (min-width: 900px) { .js .viva .regla { display: block; } }

/* ======================================================================
   Secciones de papel (marfil) y de noche (escenario)
   ====================================================================== */
.papel, .noche { position: relative; padding: clamp(96px, 13vw, 176px) var(--borde); }
.papel { background: var(--marfil); color: var(--tinta2); }
.papel.invertir, .papel.privado { background: var(--marfil2); }
.noche { background: radial-gradient(110% 80% at 50% 0%, #2e2519 0%, #211a12 60%, #1b150e 100%); }
.grilla { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(48px, 7vw, 112px); align-items: center; }
.angosto { max-width: 900px; margin: 0 auto; }
h2 { font-weight: 300; font-size: clamp(34px, 4.1vw, 60px); line-height: 1.06; letter-spacing: -.036em; text-wrap: balance; }
h2 span { display: block; font-weight: 400; }
.papel h2 span { color: var(--miel); }
.noche h2 span { color: var(--oro); }
.texto p, .lead { margin-top: 22px; font-size: 18px; max-width: 30em; text-wrap: pretty; }
.papel .texto p, .papel .lead { color: var(--texto-p); }
.noche .texto p { color: var(--texto-n); }

/* ---------- Gastos hormiga: la planilla ---------- */
.planilla { background: #fffaf0; border-radius: 22px; padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 1px 0 rgb(255 252 244) inset, 0 0 0 1px rgb(90 64 20 / .1), 0 40px 80px -40px rgb(70 46 10 / .45), 0 12px 24px -16px rgb(70 46 10 / .2); }
.p-cabeza { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid rgb(90 64 20 / .12); }
.p-titulo { font-size: 18px; font-weight: 500; letter-spacing: -.012em; }
.p-mes { font-size: 14px; color: #6e5a40; }
.p-filas { list-style: none; }
.p-filas li { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid rgb(90 64 20 / .08); }
.p-filas span { font-size: 16.5px; }
.p-filas small { font-size: 14px; color: #6e5c43; }
.p-filas b { font-weight: 500; font-size: 16.5px; min-width: 5.2em; text-align: right; }
.tubo { position: relative; height: 18px; margin-top: 28px; border-radius: 99px; background: rgb(168 122 34 / .12); box-shadow: inset 0 1px 2px rgb(70 46 10 / .14); }
.tubo-miel { position: absolute; inset: 0; border-radius: 99px; overflow: hidden; }
.tubo-miel canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* sin JS: el tubo lleno a su nivel, quieto */
.tubo-miel::before { content: ''; position: absolute; inset: 0 22% 0 0; border-radius: 99px; background: linear-gradient(180deg, #e2c47e, #b98b31 55%, #8c6418); }
.js .tubo-miel.vivo::before { display: none; }
.tope { position: absolute; top: -6px; bottom: -6px; width: 1.5px; background: var(--tinta2); opacity: .5; border-radius: 2px; }
.p-pie { display: flex; justify-content: space-between; margin-top: 12px; font-size: 14.5px; color: #6e5c43; }
.p-pie b { color: var(--tinta2); font-weight: 600; }
.p-pct { font-weight: 600; color: #84601a; }
.aviso { display: flex; gap: 14px; margin-top: 24px; padding: 18px 20px; border-radius: 14px; background: rgb(201 162 78 / .13); box-shadow: inset 0 0 0 1px rgb(168 122 34 / .2); }
.aviso svg { width: 26px; height: 26px; flex: none; margin-top: 1px; }
.aviso b { font-weight: 600; font-size: 15.5px; }
.aviso p { font-size: 14.5px; line-height: 1.5; color: var(--texto-p); margin-top: 3px; }
.js .aviso { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.js .aviso.ver { opacity: 1; transform: none; }

/* ---------- Metas: el vaso ---------- */
.pestanas { display: inline-flex; gap: 4px; margin-top: 34px; padding: 5px; border-radius: 999px; background: rgb(251 246 236 / .05); box-shadow: inset 0 0 0 1px rgb(226 196 126 / .2); }
.pestanas button { font-size: 15px; font-weight: 500; padding: 10px 20px; border-radius: 999px; color: rgb(251 246 236 / .66); transition: color .3s, background .3s, box-shadow .3s; }
.pestanas button:hover { color: var(--marfil); }
.pestanas button[aria-selected="true"] { color: var(--tinta2); background: linear-gradient(180deg, #ecd394, #c9a24e); box-shadow: inset 0 1px 0 rgb(255 250 232 / .8); }
.vaso { display: grid; justify-items: center; }
.v-cifra { display: grid; font-size: clamp(60px, 7.6vw, 112px); font-weight: 300; letter-spacing: -.04em; line-height: 1; }
.v-cifra span, .dos-cifras b span { grid-area: 1 / 1; white-space: nowrap; }
.v-contorno { color: transparent; -webkit-text-stroke: 1px rgb(226 196 126 / .45); }
.v-relleno { color: var(--oro); }
.v-pie { margin-top: 10px; font-size: 15px; letter-spacing: .02em; color: rgb(251 246 236 / .6); }
.v-cuerpo { position: relative; margin-top: 36px; width: min(300px, 100%); height: 320px; border-radius: 28px 28px 46px 46px;
  background: linear-gradient(90deg, rgb(251 246 236 / .06), rgb(251 246 236 / .015) 30%, rgb(251 246 236 / .04) 70%, rgb(251 246 236 / .09));
  box-shadow: inset 0 0 0 1.5px rgb(226 196 126 / .34), inset 0 -20px 40px -20px rgb(0 0 0 / .4), 0 40px 70px -40px rgb(0 0 0 / .8); }
.v-cuerpo::before { content: ''; position: absolute; top: 14px; bottom: 30px; left: 16px; width: 10px; border-radius: 10px; z-index: 2;
  background: linear-gradient(180deg, rgb(255 248 226 / .32), rgb(255 248 226 / 0)); }
.v-miel { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.v-miel canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-miel::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--lleno, 58%);
  background: linear-gradient(180deg, #d8b465, #b98b31 6%, #7a5714 60%, #3a2a14); border-top: 1.4px solid #f2d999; }
.js .v-miel.vivo::before { display: none; }
.v-marcas { list-style: none; position: absolute; inset: 22px 0 22px auto; width: 100%; pointer-events: none; z-index: 2; }
.v-marcas li { position: absolute; right: 0; width: 16px; height: 1px; background: rgb(251 246 236 / .3); }
.v-marcas li.larga { width: 26px; background: rgb(251 246 236 / .5); }
.v-lleva { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 3; text-align: center; }
.v-lleva b { display: block; font-size: 30px; font-weight: 500; letter-spacing: -.02em; color: var(--marfil); text-shadow: 0 1px 12px rgb(40 26 6 / .6); }
.v-lleva small { font-size: 14px; color: rgb(251 246 236 / .78); }

/* ---------- Invertir: dos cifras ---------- */
.invertir h2 { text-align: center; }
.dos-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: clamp(48px, 6vw, 72px) 0 0; align-items: end; }
.dos-cifras small { display: block; font-size: 15px; color: #6e5c43; margin-bottom: 8px; }
.dos-cifras b { display: grid; font-weight: 300; letter-spacing: -.04em; line-height: 1; }
.c-quieto b { font-size: clamp(34px, 4.4vw, 62px); color: rgb(42 33 23 / .6); }
.c-rinde { text-align: right; }
.c-rinde b { font-size: clamp(46px, 7vw, 104px); justify-items: end; }
.c-contorno { color: transparent; -webkit-text-stroke: 1px rgb(168 122 34 / .55); }
.c-relleno { color: var(--miel); text-shadow: 0 1px 0 rgb(255 250 236 / .6); }
.anios { position: relative; margin-top: 28px; padding-top: 18px; }
.anios i { position: absolute; left: 0; top: 0; height: 3px; width: 100%; border-radius: 3px; background: linear-gradient(90deg, #dcc8a0, #c9a24e 60%, #a87a22); transform-origin: left; }
.js .anios i { transform: scaleX(var(--anios, 0)); }
.anios ol { list-style: none; display: flex; justify-content: space-between; font-size: 13px; color: #6e5a40; }
.invertir .lead { margin: 40px auto 0; text-align: center; max-width: 36em; }
.letra-chica { margin: 22px auto 0; max-width: 46em; text-align: center; font-size: 14px; line-height: 1.55; color: #7a6850; }

/* ---------- La credencial ---------- */
.vitrina { position: relative; display: grid; justify-items: center; padding-bottom: 40px; }
/* la pista: hay quien no se da cuenta de que la credencial tiene dorso (mide 40 px: el espejo baja lo mismo) */
.pista { height: 22px; margin: 0 0 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .02em; color: rgba(220,200,160,.78); }
.pista svg { width: 15px; height: 15px; color: var(--miel2, #c9a24e); }
.tarjeta { position: relative; width: 27.5em; height: 17.3125em; font-size: clamp(11px, 1.15vw, 16px); perspective: 1600px; cursor: pointer; color: var(--tinta2);
  z-index: 2; animation: flota 3.5s ease-in-out 2 alternate; border-radius: 1.1em; }
@keyframes flota { from { transform: translateY(0); } to { transform: translateY(-7px); } }
.giro3d { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.25s cubic-bezier(.62,0,.22,1); }
.tarjeta.vuelta .giro3d { transform: rotateX(-180deg); }
.cara { position: absolute; inset: 0; border-radius: 1.1em; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 2.2em 3.6em -1.6em rgb(0 0 0 / .75), 0 0 0 1px rgb(122 87 20 / .55), inset 0 1px 0 rgb(255 248 226 / .65), inset 0 -1px 0 rgb(80 55 10 / .45); }
.frente { background: repeating-linear-gradient(90deg, rgb(255 250 235 / .045) 0 1px, rgb(60 40 5 / .035) 1px 2px, transparent 2px 4px),
  linear-gradient(116deg, #ecd394 0%, #d2ad5c 24%, #b98b31 50%, #dcbd6c 72%, #a87a22 100%); }
.dorso { transform: rotateX(180deg); background: repeating-linear-gradient(90deg, rgb(255 250 235 / .04) 0 1px, rgb(60 40 5 / .04) 1px 2px, transparent 2px 4px),
  linear-gradient(116deg, #c9a24e 0%, #a87a22 46%, #8c6418 100%); }
.flujo, .topo { position: absolute; inset: 0; width: 100%; height: 100%; }
.causticas { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; opacity: .42; filter: blur(.6px); }
.contenido { position: absolute; inset: 0; padding: 1.55em 1.75em 1.45em; display: flex; flex-direction: column; justify-content: space-between; }
.fila { display: flex; justify-content: space-between; align-items: center; }
.fila.abajo { align-items: flex-end; }
.mini { display: flex; align-items: center; gap: .45em; font-size: 1.2em; font-weight: 500; letter-spacing: -.03em; }
.mini svg { width: 1.45em; height: 1.45em; }
.rango { font-size: .64em; letter-spacing: .28em; text-transform: uppercase; font-weight: 700; color: rgb(42 33 23 / .74); }
.etq { font-size: .6em; letter-spacing: .26em; text-transform: uppercase; font-weight: 500; color: rgb(42 33 23 / .62); margin-bottom: .35em; }
.num { font-size: 3.15em; font-weight: 300; letter-spacing: .015em; line-height: 1; color: #5e420e; text-shadow: 0 .03em 0 rgb(255 240 200 / .45), 0 -.02em 0 rgb(60 40 5 / .35); }
.persona { display: flex; align-items: center; gap: .7em; }
.avatar { width: 2.4em; height: 2.4em; border-radius: 50%; display: grid; place-items: center; background: var(--tinta2); color: var(--oro); font-weight: 500; font-size: .95em;
  box-shadow: 0 0 0 .18em rgb(255 244 210 / .35); }
.persona b { display: block; font-size: 1.02em; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.persona small, .monedas small { display: block; font-size: .64em; color: rgb(42 33 23 / .7); letter-spacing: .02em; margin-top: .15em; line-height: 1.3; }
.monedas { text-align: right; }
.monedas small { letter-spacing: .24em; text-transform: uppercase; font-weight: 500; margin: 0 0 .25em; }
.monedas b { font-size: .86em; font-weight: 500; letter-spacing: .1em; }
.pelicula { position: absolute; inset: 0; pointer-events: none; opacity: .0; }
.luz { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(26em 15em at var(--px, 28%) var(--py, 8%), rgb(255 249 230 / .55), transparent 62%); }
.dorso-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7em; text-align: center; }
.dorso-in .mini { font-size: 1.5em; }
.dorso-in p { font-size: 1.05em; font-weight: 300; letter-spacing: -.01em; }
.dorso-in small { position: absolute; bottom: 1.6em; font-size: .56em; letter-spacing: .26em; text-transform: uppercase; color: rgb(42 33 23 / .66); }
.espejo { position: absolute; top: calc(17.3125em + 34px + 40px); width: 27.5em; height: 17.3125em; font-size: clamp(11px, 1.15vw, 16px); transform: scaleY(-1); opacity: .16;
  filter: url(#ondula) blur(.6px); pointer-events: none;
  -webkit-mask-image: linear-gradient(0deg, #000 0, rgb(0 0 0 / .3) 30%, transparent 55%); mask-image: linear-gradient(0deg, #000 0, rgb(0 0 0 / .3) 30%, transparent 55%); }
.espejo .tarjeta { animation: none; position: absolute; inset: 0; }
.charco { position: absolute; top: calc(17.3125em + 30px + 40px); font-size: clamp(11px, 1.15vw, 16px); width: 34em; max-width: 100%; height: 1.4em; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(226 196 126 / .35), rgb(226 196 126 / .08) 60%, transparent); }

/* ---------- Privacidad ---------- */
.privado h2 { text-align: center; }
.promesas { margin-top: clamp(44px, 5vw, 64px); }
.promesas div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px 48px; padding: 28px 0; border-top: 1px solid rgb(90 64 20 / .16); }
.promesas div:last-child { border-bottom: 1px solid rgb(90 64 20 / .16); }
.promesas dt { font-size: clamp(20px, 1.9vw, 25px); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.promesas dd { font-size: 17px; color: var(--texto-p); max-width: 30em; }

/* ---------- Cierre ---------- */
.cierre { position: relative; text-align: center; padding: clamp(110px, 14vw, 190px) var(--borde) clamp(110px, 12vw, 160px); overflow: hidden;
  background: radial-gradient(70% 60% at 50% 36%, #33291b 0%, #211a12 60%, #18120c 100%); display: flex; flex-direction: column; align-items: center; }
.logo-grande { width: clamp(120px, 14vw, 180px); height: auto; margin-bottom: 44px; filter: drop-shadow(0 30px 50px rgb(201 162 78 / .28)); }
.js .lg-o { stroke-dasharray: 340; stroke-dashoffset: 340; transition: stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1); }
.js .lg-o + .lg-o { transition-delay: .25s; }
.js .lg-disco { transform-origin: 120px 120px; transform: scale(.4); opacity: 0; transition: transform 1s cubic-bezier(.34,1.56,.64,1) 1.1s, opacity .5s ease 1.1s; }
.js .cierre.ver .lg-o { stroke-dashoffset: 0; }
.js .cierre.ver .lg-disco { transform: none; opacity: 1; }
.cierre h2 { font-size: clamp(38px, 5.4vw, 82px); max-width: 12em; margin-bottom: 40px; }

.pie { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding: 30px var(--borde) 36px;
  background: #18120c; font-size: 14px; color: rgb(251 246 236 / .6); border-top: 1px solid rgb(226 196 126 / .12); }
.marca.chica { font-size: 17px; gap: 9px; }
.marca.chica svg { width: 22px; height: 22px; }

/* ======================================================================
   Celular
   ====================================================================== */
@media (max-width: 899px) {
  .grilla { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .socio .grilla .texto { order: 0; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav { padding: 20px var(--borde); }
  .marca { font-size: 20px; }
  .marca svg { width: 27px; height: 27px; }
  .escena-textos { padding-top: 104px; }
  h1 { font-size: clamp(38px, 10.6vw, 52px); }
  .giro { font-size: clamp(20px, 5.6vw, 26px); }
  .bajada { font-size: 16px; }
  .acciones { margin-top: 24px; }
  .texto p, .lead { font-size: 16.5px; }
  .p-filas li { grid-template-columns: 1fr auto; gap: 2px 14px; }
  .p-filas small { grid-row: 2; }
  .p-filas b { grid-row: 1 / 3; align-self: center; }
  .pestanas { display: flex; width: 100%; }
  .pestanas button { flex: 1; padding: 10px 8px; font-size: 14.5px; }
  .v-cuerpo { height: 280px; }
  .dos-cifras { grid-template-columns: 1fr; gap: 26px; }
  .c-rinde { text-align: left; }
  .c-rinde b { justify-items: start; }
  .anios ol li:not(:first-child):not(:nth-child(5)):not(:last-child) { visibility: hidden; }
  .promesas div { grid-template-columns: 1fr; padding: 24px 0; }
  .tarjeta, .espejo, .charco { font-size: min(13px, calc((100vw - 2 * var(--borde)) / 27.5)); }
  .pie { flex-direction: column; align-items: flex-start; }
}

/* ---------- Legales: la misma hoja de marfil de las secciones claras, con el hilo de la onda arriba ---------- */
.pie-links { display: flex; gap: 22px; }
.pie-links a { transition: color .25s; }
.pie-links a:hover { color: var(--oro); }
.hoja .legal-nav { position: relative; }
.legal { position: relative; background: var(--marfil2); color: var(--tinta2); padding: clamp(64px, 9vw, 110px) var(--borde) clamp(80px, 10vw, 130px); }
.legal .hilo { top: -12px; }
.legal .hilo path { fill: none; stroke: var(--miel2); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: .55; }
.legal-in { max-width: 680px; margin: 0 auto; }
.legal h1 { font-size: clamp(38px, 5.4vw, 64px); font-weight: 300; letter-spacing: -.035em; line-height: 1.05; color: var(--tinta); }
.legal .fecha { margin: 16px 0 38px; font-size: 14px; color: #6e5a40; }
.legal .intro { font-size: 19px; line-height: 1.6; color: #3d3020; padding-bottom: 30px; border-bottom: 1px solid rgb(168 122 34 / .22); }
.legal h2 { margin: 42px 0 12px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--tinta); }
.legal p { color: var(--texto-p); margin-top: 12px; }
.legal strong { color: var(--tinta2); font-weight: 600; }
.legal a { color: #84601a; text-decoration: underline; text-decoration-color: rgb(168 122 34 / .4); text-underline-offset: 3px; transition: text-decoration-color .25s; }
.legal a:hover { text-decoration-color: currentColor; }
@media (max-width: 620px) { .legal .intro { font-size: 17.5px; } .legal h2 { font-size: 20px; } }