/* =====================================
   Foram · landing
   Basado en referencia/propuesta.html, en versión suave:
   - Bordes finos en tono crema oscuro / lila tenue (no negro).
   - Sombras difusas con tinte morado (sensación de flotar).
   - Contorno negro + sombra dura SOLO en el botón principal y en los stickers del hero.
   Esto es solo para la landing; en la app se mantiene ../foram-app/DISENO.md.
   ===================================== */

:root{
  --crema:#FFF1EB; --blanco:#FFFFFF; --morado:#7360F9; --morado-osc:#5A47E0;
  --acido:#B9D440; --lila:#BC9BF3; --lila-suave:#E9DDFD; --tinta:#1C1A18; --gris:#6F6863; --linea:#E3D8D2;
  --error:#B42318;

  /* bordes suaves */
  --borde:#EADBD2;          /* crema oscuro: tarjetas, contenedores, líneas */
  --borde-lila:#D9CBF7;     /* lila tenue: pastillas y botones secundarios */
  --campo:#FBEAE2;          /* fondo de los campos del formulario (sin borde) */

  /* sombras */
  --sombra:4px 4px 0 var(--tinta);  /* dura: solo botón principal y stickers */
  --flota:0 22px 44px -22px rgba(115,96,249,.45), 0 6px 16px -8px rgba(115,96,249,.18);
  --flota-chica:0 10px 24px -14px rgba(115,96,249,.45), 0 2px 6px -2px rgba(115,96,249,.12);
  --anillo:0 0 0 3px rgba(115,96,249,.4);

  --f-display:"Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --f-texto:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r:20px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--crema);color:var(--tinta);font-family:var(--f-texto);font-size:16px;line-height:1.55;margin:0;overflow-x:hidden}
a{color:inherit}
[hidden]{display:none!important}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em}
h1,h2,h3{font-family:var(--f-display);font-weight:800;letter-spacing:-.045em;line-height:.9;margin:0;text-wrap:balance}
h2{font-size:clamp(36px,6vw,64px)}
h3{font-size:24px;letter-spacing:-.03em;line-height:1}
p{margin:0}
:focus-visible{outline:3px solid var(--morado);outline-offset:3px;border-radius:6px}

/* logo SVG (symbol #pudu / #wordmark) */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.f-morado{fill:var(--morado)}
.f-tinta{fill:var(--tinta)}
.f-acido{fill:var(--acido)}
.f-crema{fill:var(--crema)}

.saltar{position:absolute;left:16px;top:-60px;z-index:30;background:var(--tinta);color:var(--crema);padding:10px 14px;border-radius:12px}
.saltar:focus{top:12px}

/* ---------- header ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--crema) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--borde)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.marca{display:flex;align-items:center;gap:8px;text-decoration:none;min-height:44px}
.marca svg{display:block}
/* Arriba del todo (la clase viene puesta en el HTML y main.js la quita al bajar): logo grande y header más alto.
   El margen negativo compensa el alto extra, así el contenido no se mueve cuando el header se achica. */
:root{--header-extra:32px;--escala-logo:2.25}
.top{transition:margin-bottom .35s ease}
.top .wrap{transition:height .35s ease}
.marca{transform-origin:left center;transition:transform .35s ease}
.top.header--arriba{margin-bottom:calc(-1 * var(--header-extra))}
.top.header--arriba .wrap{height:calc(64px + var(--header-extra))}
.top.header--arriba .marca{transform:scale(var(--escala-logo))}

/* Botón principal: el único botón con contorno negro y sombra dura */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-texto);font-weight:700;font-size:16px;min-height:52px;padding:0 26px;border-radius:999px;border:2px solid var(--tinta);background:var(--morado);color:var(--blanco);text-decoration:none;cursor:pointer;box-shadow:var(--sombra);transition:transform .12s, box-shadow .12s, background .15s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--tinta)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--tinta)}
.btn:disabled{background:#9C93E0;box-shadow:none;transform:none;cursor:progress}
/* Botones secundarios: borde suave, sin sombra dura */
.btn.plano,.btn.chico{background:var(--blanco);color:var(--tinta);border:1px solid var(--borde-lila);box-shadow:none}
.btn.plano:hover,.btn.chico:hover{background:var(--lila-suave);transform:none;box-shadow:none}
.btn.plano:active,.btn.chico:active{transform:none}
.btn.chico{min-height:44px;padding:0 16px;font-size:14px}

/* ---------- hero ---------- */
.hero{position:relative;padding-block:calc(56px + var(--header-extra)) 72px;overflow:hidden}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(64px,13vw,150px);margin:22px 0 22px}
.hero h1 .resalta{position:relative;white-space:nowrap;color:var(--morado)}
.hero h1 .resalta::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.04em;height:.2em;background:var(--acido);z-index:-1;border-radius:4px}
.hero .bajada{font-size:clamp(17px,2.2vw,20px);max-width:30ch;margin-bottom:28px}
.hero .acciones{display:flex;flex-wrap:wrap;gap:12px}

/* teléfono */
.escena{position:relative;display:grid;place-items:center;min-height:560px}
.telefono{width:270px;border:1.5px solid var(--borde-lila);border-radius:40px;background:var(--crema);box-shadow:0 34px 60px -28px rgba(115,96,249,.55), 0 10px 24px -12px rgba(115,96,249,.25);padding:14px 14px 18px;position:relative;z-index:2;animation:flota 6s ease-in-out infinite}
@keyframes flota{50%{transform:translateY(-10px)}}
.tel-isla{width:84px;height:22px;border-radius:20px;background:var(--tinta);margin:0 auto 14px}
.tel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.tel-hola{font-family:var(--f-display);font-weight:800;font-size:26px;letter-spacing:-.04em;line-height:1;margin-bottom:10px}
.tel-chip{display:inline-block;border:1px solid var(--borde);border-radius:999px;padding:3px 10px;font-size:11px;background:var(--blanco);margin-bottom:12px}
.tel-card{background:var(--blanco);border:1px solid var(--borde);border-radius:16px;box-shadow:var(--flota-chica);overflow:hidden}
.tel-foto{height:96px;background:repeating-linear-gradient(135deg,var(--lila-suave) 0 10px,var(--lila) 10px 20px)}
.tel-body{padding:12px;display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.tel-body b{font-size:14px;line-height:1.2}
.tel-body small{color:var(--gris);font-size:11px}
.anillo{--p:87;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--morado) calc(var(--p)*1%),var(--linea) 0);grid-row:span 3}
.anillo span{width:44px;height:44px;border-radius:50%;background:var(--blanco);display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:15px}
.sello{display:inline-flex;align-items:center;gap:5px;background:var(--acido);border-radius:999px;padding:2px 9px;font-family:var(--f-mono);font-size:10px;font-weight:700;width:max-content}
.tel-barras{display:grid;gap:7px;margin-top:12px}
.barra{display:grid;grid-template-columns:70px 1fr 26px;gap:8px;align-items:center;font-size:11px}
.barra div{height:7px;border-radius:9px;background:var(--linea);overflow:hidden}
.barra div i{display:block;height:100%;background:var(--morado);border-radius:9px}
.barra .w92{width:92%} .barra .w85{width:85%} .barra .w78{width:78%}
.barra em{font-style:normal;font-family:var(--f-mono);text-align:right}

/* stickers del hero: mantienen contorno y sombra dura (el ojo va aquí) */
.sticker{position:absolute;z-index:3;border:2px solid var(--tinta);border-radius:14px;padding:8px 12px;font-family:var(--f-mono);font-size:12px;font-weight:700;box-shadow:3px 3px 0 var(--tinta);background:var(--blanco);white-space:nowrap;display:flex;align-items:center;gap:6px}
.st1{top:30px;left:0;transform:rotate(-7deg);background:var(--acido)}
.st2{top:120px;right:-6px;transform:rotate(6deg);background:var(--lila)}
.st3{bottom:8px;left:-14px;transform:rotate(4deg)}
.st4{bottom:8px;right:4px;transform:rotate(-5deg);background:var(--morado);color:var(--blanco)}
.blob{position:absolute;border-radius:50%;filter:blur(2px);z-index:0}
.b1{width:320px;height:320px;background:var(--lila);opacity:.45;top:60px;right:20px}
.b2{width:140px;height:140px;background:var(--acido);opacity:.5;bottom:20px;right:38%}

/* ---------- ticker ---------- */
.ticker{background:var(--morado);color:var(--crema);overflow:hidden;padding-block:16px}
.ticker-track{display:flex;gap:28px;width:max-content;animation:corre 28s linear infinite;font-family:var(--f-display);font-weight:800;font-size:26px;letter-spacing:-.03em}
.ticker-track span{display:flex;align-items:center;gap:28px;white-space:nowrap}
.ticker-track span::after{content:"✦";color:var(--acido);font-size:20px}
@keyframes corre{to{transform:translateX(-50%)}}

/* ---------- secciones ---------- */
section{padding-block:88px}
section.sin-arriba{padding-top:0}
.cabeza{display:grid;gap:14px;margin-bottom:40px;max-width:720px}
.cabeza p:not(.mono){font-size:18px;color:var(--gris);max-width:52ch}

/* problema */
.datos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dato{border:1px solid var(--borde);border-radius:var(--r);padding:26px;display:grid;gap:10px;align-content:start;position:relative;box-shadow:var(--flota-chica)}
.dato strong{font-family:var(--f-display);font-weight:800;font-size:clamp(64px,9vw,104px);letter-spacing:-.06em;line-height:.85}
.dato p{font-size:16px}
.dato .mono{color:inherit;opacity:.75}
.dato.d1{background:var(--blanco);transform:rotate(-1.2deg)}
.dato.d1 strong{color:var(--morado)}
.dato.d2{background:var(--lila);border-color:transparent;transform:rotate(1deg)}
.dato.d3{background:var(--tinta);border-color:transparent;color:var(--crema);transform:rotate(-.6deg)}
.dato.d3 strong{color:var(--acido)}
.cita{margin-top:40px;font-family:var(--f-display);font-weight:800;font-size:clamp(28px,4.5vw,46px);letter-spacing:-.04em;line-height:1;max-width:22ch}
.cita small{display:block;font-family:var(--f-mono);font-weight:400;font-size:12px;letter-spacing:.06em;margin-top:12px;color:var(--gris)}

/* mini test "¿qué roomie eres?" (vive dentro del celular del paso 1 del recorrido) */
.mini-test{display:grid;gap:14px;align-content:start}
.mt-avance{display:grid;gap:8px;font-size:13px;font-weight:700}
.mt-barra{height:6px;border-radius:9px;background:var(--linea);overflow:hidden}
.mt-barra i{display:block;height:100%;width:var(--avance,33%);background:var(--morado);border-radius:9px;transition:width .3s}
.preg{display:grid;gap:12px}
.preg b{font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:-.035em;line-height:1.05}
.opciones{display:flex;flex-wrap:wrap;gap:8px}
.op{display:inline-flex;align-items:center;font-family:var(--f-texto);font-size:15px;min-height:44px;padding:0 16px;border:1px solid var(--borde-lila);border-radius:999px;background:var(--crema);color:var(--tinta);cursor:pointer;transition:background .15s, box-shadow .15s}
.op:hover{background:var(--lila-suave)}
.op[aria-pressed="true"]{background:var(--morado);border-color:var(--morado);color:var(--blanco);font-weight:700;box-shadow:var(--flota-chica)}
.mini-test .opciones{flex-direction:column}
.mini-test .op{justify-content:flex-start;text-align:left;width:100%;min-height:46px;border-radius:16px;background:var(--blanco);font-weight:500}
.mt-atras{justify-self:start;min-height:44px;padding:0 4px;border:0;background:none;font:inherit;font-size:14px;color:var(--gris);cursor:pointer}
.resultado{border-radius:20px;background:var(--morado);color:var(--blanco);padding:16px;box-shadow:var(--flota-chica);display:grid;gap:10px}
.resultado .mono{color:var(--lila-suave)}
.res-animal{display:flex;align-items:center;gap:12px}
.res-icono{width:56px;height:56px;border-radius:16px;background:var(--crema);display:grid;place-items:center;flex:none}
.res-icono.lila{background:var(--lila)}
.res-icono.acido{background:var(--acido)}
.res-nombre{font-family:var(--f-display);font-weight:800;font-size:clamp(19px,5.4vw,24px);letter-spacing:-.04em;line-height:.95}
.rasgos{display:flex;flex-wrap:wrap;gap:6px}
.rasgos span{background:var(--crema);color:var(--tinta);border-radius:999px;padding:4px 10px;font-size:12px}
.res-nota{font-size:13px;line-height:1.4;color:var(--lila-suave)}
/* botón ácido del test: secundario, sin contorno negro */
.mt-otra{min-height:44px;border:0;border-radius:999px;background:var(--acido);color:var(--tinta);font:inherit;font-weight:700;font-size:15px;cursor:pointer}

/* pasos */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.paso{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);padding:24px;display:grid;gap:12px;align-content:start}
.paso-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.paso-seg i{height:7px;border-radius:9px;background:var(--linea)}
.paso-seg i.on{background:var(--morado)}
.paso p{color:var(--gris)}

/* mírala por dentro: recorrido con scroll.
   Celular: cada paso apilado (texto → pantalla). Computador (≥ 900 px): texto a la izquierda y un panel fijo
   a la derecha que cambia de pantalla, de color y de rayita de avance (main.js mueve las vistas al panel). */
.dentro{background:var(--blanco);border-block:1px solid var(--borde)}
.ejemplo{display:inline-flex;align-items:center;gap:6px;background:var(--lila-suave);color:var(--tinta);border-radius:999px;padding:5px 11px;font-weight:700;white-space:nowrap}
.ejemplo::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--morado)}
.relato-pasos{list-style:none;margin:0;padding:0;display:grid;gap:56px}
.relato-paso{display:grid;gap:20px;min-width:0}
.paso-txt{display:grid;gap:10px;max-width:46ch}
.paso-txt .mono{color:var(--gris)}
.paso-txt h3{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.04em;line-height:1}
.paso-txt p:not(.mono){font-size:17px;color:var(--gris)}
.relato-paso:nth-child(1){--fondo:#EDE7FE}
.relato-paso:nth-child(2){--fondo:#BC9BF3}
.relato-paso:nth-child(3){--fondo:#B9D440}
.relato-paso:nth-child(4){--fondo:#FFF1EB}
.relato-paso:nth-child(5){--fondo:#7360F9}
.relato-paso:nth-child(6){--fondo:#EDE7FE}
.vista{background:var(--fondo);border-radius:28px;padding:16px;display:grid;gap:14px;min-width:0}
.relato-paso:nth-child(4) .vista{border:1px solid var(--borde)}
.vista-etq,.panel-etq{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.vista-etq > .mono:first-child,.panel-etq > .mono:first-child{font-weight:700}
.relato-paso[data-oscuro] .vista-etq > .mono:first-child{color:var(--crema)}
.escena-vista{position:relative;height:520px;display:grid;place-items:center}
/* marco de celular */
.tel{height:100%;aspect-ratio:47/100;overflow:hidden;min-width:0;background:var(--crema);border:1.5px solid var(--borde-lila);border-radius:34px;padding:8px;box-shadow:var(--flota)}
.tel img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:26px}
.tel-app{height:100%;border-radius:26px;background:var(--crema);overflow:auto;overscroll-behavior:contain;padding:12px 14px 16px;display:grid;align-content:start;gap:14px;scrollbar-width:none}
.tel-app::-webkit-scrollbar{display:none}
.tel-cab{display:flex;align-items:center;gap:6px;padding-bottom:10px;border-bottom:1px solid var(--borde)}
.v-dos .tel{position:absolute;height:86%}
.tel-a{left:2%;top:0;transform:rotate(-3deg)}
.tel-b{right:2%;bottom:0;transform:rotate(3deg)}
/* marco de computador (ventana de navegador) */
.v-web .escena-vista{height:380px}
.web{position:absolute;width:88%;background:var(--blanco);border:1px solid var(--borde);border-radius:14px;overflow:hidden;box-shadow:var(--flota)}
.web-a{left:0;top:0}
.web-b{right:0;bottom:0}
.web-barra{display:flex;align-items:center;gap:5px;height:28px;padding:0 12px;background:#F6ECE6;border-bottom:1px solid var(--borde)}
.web-barra i{width:8px;height:8px;border-radius:50%;background:var(--borde-lila)}
.web-barra span{margin-left:10px;font-family:var(--f-mono);font-size:10px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.web img{display:block;width:100%;height:auto;aspect-ratio:1000/760}
.relato-panel{display:none}
.relato-fin{display:flex;justify-content:center;margin-top:48px}
@media (min-width:900px){
  .relato{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:start}
  .relato-pasos{gap:0}
  .relato-paso{min-height:78vh;align-content:center}
  .relato-paso .paso-txt{opacity:.35;transition:opacity .35s}
  .relato-paso.activo .paso-txt{opacity:1}
  .relato-panel{display:grid;grid-template-rows:auto minmax(0,1fr);gap:16px;position:sticky;top:96px;height:min(720px,calc(100vh - 128px));padding:22px;border-radius:32px;background:var(--fondo,#EDE7FE);transition:background-color .5s}
  .relato-panel.oscuro .panel-etq > .mono:first-child{color:var(--crema)}
  .panel-cab{display:grid;gap:14px}
  .rayas{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
  .rayas i{height:5px;border-radius:9px;background:rgba(28,26,24,.14);transition:background .3s}
  .rayas i.on{background:var(--morado)}
  .relato-panel.oscuro .rayas i{background:rgba(255,241,235,.3)}
  .relato-panel.oscuro .rayas i.on{background:var(--crema)}
  .panel-escena{position:relative;min-height:0}
  .panel-escena .vista{position:absolute;inset:0;background:none;border:0;padding:0;opacity:0;transform:translateY(18px);transition:opacity .45s, transform .45s;pointer-events:none}
  .panel-escena .vista.activa{opacity:1;transform:none;pointer-events:auto}
  .panel-escena .vista-etq{display:none}
  .panel-escena .escena-vista{position:absolute;inset:0;height:auto}
  .panel-escena .web{width:84%}
}

/* ¿por qué un pudú? */
.pudu-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.pudu-arte{position:relative;aspect-ratio:1;max-width:380px;width:100%;justify-self:center;display:grid;place-items:center;background:var(--lila-suave);border-radius:44% 56% 52% 48% / 50% 46% 54% 50%}
.pudu-arte::after{content:"";position:absolute;width:26%;aspect-ratio:1;border-radius:50%;background:var(--acido);opacity:.7;right:4%;bottom:8%;z-index:0}
.pudu-arte svg{width:64%;height:auto;position:relative;z-index:1}
.pudu-txt{display:grid;gap:16px}
.pudu-txt p:not(.mono){font-size:clamp(18px,2.2vw,22px);line-height:1.5;max-width:44ch}

/* para quién: bento */
.bento{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:auto auto;gap:18px}
.caja{border:1px solid var(--borde);border-radius:var(--r);padding:28px;display:grid;gap:12px;align-content:start;position:relative;min-width:0}
.caja.est{grid-row:span 2;background:var(--morado);border-color:transparent;color:var(--blanco);padding-bottom:96px;box-shadow:var(--flota)}
.caja.est .mono{color:var(--lila-suave)}
.caja.est h3{font-size:clamp(36px,5vw,54px);padding-right:72px}
.caja.est ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:10px;font-size:17px}
.caja.est li{display:flex;gap:10px;align-items:flex-start}
.caja.est li::before{content:"✓";font-family:var(--f-mono);font-weight:700;color:var(--acido)}
.caja.arr{background:var(--blanco)}
.caja.com{background:var(--lila);border-color:transparent}
.gratis{position:absolute;top:20px;right:20px;background:var(--acido);color:var(--tinta);border-radius:999px;padding:6px 14px;font-family:var(--f-mono);font-weight:700;font-size:13px;transform:rotate(8deg);box-shadow:0 8px 18px -8px rgba(28,26,24,.45)}
.pudu-esquina{position:absolute;right:24px;bottom:22px;opacity:.95}

/* seguridad (bloque oscuro: se mantiene) */
.segura{background:var(--tinta);color:var(--crema)}
.segura h2{color:var(--crema)}
.segura .cabeza p:not(.mono){color:#CFC5BF}
.segura .mono{color:var(--lila)}
.seg-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.seg-lista{display:grid;gap:14px}
.seg-item{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;border:1px solid #3A3633;border-radius:18px;padding:18px}
.seg-item svg{width:44px;height:44px}
.seg-item b{font-size:18px;display:block;margin-bottom:2px}
.seg-item p{color:#CFC5BF;font-size:15px}
.chat{background:var(--crema);color:var(--tinta);border-radius:28px;padding:18px;display:grid;gap:10px;box-shadow:0 30px 60px -24px rgba(115,96,249,.7), 0 0 0 1px rgba(188,155,243,.25)}
.chat .mono{color:var(--tinta)}
.chat-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--borde);font-size:14px}
.chat-verif{color:var(--morado);font-weight:500}
.aviso{background:var(--lila);border-radius:14px;padding:10px 12px;font-size:13px}
.burb{max-width:80%;padding:10px 14px;border:1px solid var(--borde);border-radius:18px;font-size:15px}
.burb.otro{background:var(--blanco);border-bottom-left-radius:4px}
.burb.yo{background:var(--morado);border-color:var(--morado);color:var(--blanco);justify-self:end;border-bottom-right-radius:4px;box-shadow:var(--flota-chica)}
.oculto{background:var(--tinta);color:var(--acido);border-radius:6px;padding:1px 6px;font-family:var(--f-mono);font-size:12px;white-space:nowrap}
.visita{background:var(--blanco);border:1px solid var(--borde);border-radius:16px;padding:12px;display:grid;gap:4px}
.visita strong{font-family:var(--f-display);font-size:22px;letter-spacing:-.04em}

/* ---------- pruébala ---------- */
.prueba-caja{background:var(--lila-suave);border-radius:32px;padding:clamp(32px,6vw,64px) clamp(24px,5vw,56px);display:grid;justify-items:center;text-align:center;gap:18px;box-shadow:var(--flota-chica)}
.prueba h2{font-size:clamp(48px,8vw,88px)}
.prueba-bajada{font-size:18px;max-width:38ch}

/* ---------- escríbenos ---------- */
.escribe .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}
.escribe h2{font-size:clamp(34px,4.6vw,56px);margin-top:14px}
.escribe-bajada{font-size:18px;margin-top:16px;max-width:36ch}
.escribe-correo{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-weight:700;font-size:18px;color:var(--tinta);text-decoration-color:var(--morado);text-underline-offset:4px;overflow-wrap:anywhere}
form{position:relative;background:var(--blanco);border:1px solid var(--borde);border-radius:28px;padding:28px;box-shadow:var(--flota);min-width:0}
.form-campos,.grupo-tipo{display:grid;gap:18px}
.campo{display:grid;gap:8px;min-width:0}
.campo label,.campo legend{font-weight:700;font-size:15px;padding:0}
.campo legend{margin-bottom:8px}
.campo .opc{font-family:var(--f-mono);font-weight:400;font-size:11px;color:var(--gris);margin-left:6px}
fieldset{border:0;margin:0;padding:0;min-width:0}
/* Campos: sin borde, solo fondo. Al enfocar, anillo morado. */
input[type=text],input[type=email],select,textarea{width:100%;font:inherit;font-size:16px;color:var(--tinta);background:var(--campo);border:0;border-radius:14px;padding:13px 14px;min-height:52px;transition:box-shadow .15s, background .15s}
textarea{min-height:90px;resize:vertical}
::placeholder{color:var(--gris);opacity:1}  /* 4.7:1 sobre --campo (el gris del navegador no llega a 4.5) */
input:focus,select:focus,textarea:focus{outline:none;box-shadow:var(--anillo);background:var(--blanco)}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{box-shadow:0 0 0 2px var(--error)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* pastillas de selección (soy / qué arriendas / etc.): radios o casillas con el look de .op */
.op-radio{position:relative;display:inline-flex}
.campo .op-radio{font-weight:400}
.op-radio input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.op-radio input:checked + .op{background:var(--morado);border-color:var(--morado);color:var(--blanco);font-weight:700;box-shadow:var(--flota-chica)}
.op-radio input[type=checkbox]:checked + .op::before{content:"✓";margin-right:6px;font-weight:700}
.op-radio input:focus-visible + .op{outline:3px solid var(--morado);outline-offset:3px}
.op-radio input[aria-invalid="true"] + .op{border-color:var(--error);box-shadow:0 0 0 1px var(--error)}

.consent{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-size:14px;line-height:1.45;font-weight:400!important;cursor:pointer}
.consent input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--morado);cursor:pointer}
.correo-txt{font-family:var(--f-mono);font-size:13px;background:var(--lila-suave);padding:1px 6px;border-radius:6px;user-select:all}
.error{color:var(--error);font-size:14px;font-weight:500}
.error:empty{display:none}
.gracias{display:grid;gap:14px;text-align:left;justify-items:start}
.gracias:focus{outline:none}
.gracias h3{font-size:40px}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- footer ---------- */
footer{background:var(--morado);color:var(--crema);padding-block:56px 40px;overflow:hidden}
footer .wrap{display:grid;gap:36px}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;font-size:16px}
.foot-links a{text-decoration:none;border-bottom:1.5px solid var(--acido)}
.foot-hecho{color:var(--lila-suave)}
.gigante{width:100%;height:auto;display:block}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero .wrap,.seg-grid,.escribe .wrap{grid-template-columns:1fr}
  .escena{min-height:500px}
  .datos,.pasos{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .caja.est{grid-row:auto}
  section{padding-block:64px}
  .pudu-grid{grid-template-columns:1fr;gap:28px}
  .pudu-arte{max-width:260px}
}
/* Celular (< 600 px): más aire a los lados, tarjetas rectas y sombras más cortas. */
@media (max-width:599px){
  :root{--header-extra:16px;--escala-logo:1.6}
  .wrap{padding-inline:24px}
  .dato.d1,.dato.d2,.dato.d3{transform:none}
  .caja.est,.prueba-caja,form{box-shadow:var(--flota-chica)}
  .telefono{box-shadow:0 24px 40px -22px rgba(115,96,249,.55), 0 6px 14px -8px rgba(115,96,249,.25)}
  .chat{box-shadow:0 20px 40px -20px rgba(115,96,249,.7), 0 0 0 1px rgba(188,155,243,.25)}
  /* stickers dentro del área del contenido (nunca pegados al borde) */
  .escena{min-height:560px}
  .st1{left:4px}
  .st2{right:4px}
  .st3{left:4px}
  .escena-vista{height:480px}
  .v-tel .escena-vista{height:560px}
  .v-web .escena-vista{height:300px}
}
@media (max-width:420px){
  .dos{grid-template-columns:1fr}
  form{padding:20px}
  .top .btn.chico span{display:none}
}
/* Celulares angostos: el logo grande no puede tocar el botón "Pruébala" */
@media (max-width:406px){:root{--escala-logo:1.4}}
@media (max-width:374px){:root{--escala-logo:1.2}}
@media (max-width:345px){:root{--escala-logo:1}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
}