/* Crecer V2 · sistema visual (sale de las maquetas aprobadas, D22).
   Reglas: cuerpo 17px, nada por debajo de 15px, controles de 44px o más,
   una cosa grande y un botón grande por pantalla. Tema claro, a propósito. */
:root{
  --bg:#F7F5F1; --sunk:#EFECE6; --card:#FFFFFF; --line:#E7E3DD;
  --ink:#231F20; --ink-soft:#4A434F; --muted:#66615E;
  --rosa:#EF4375; --rosa-ink:#D42A5C; --rosa-bg:#FDE4EB;
  --teal:#00A49F; --teal-ink:#00827E; --teal-bg:#D6F0EF;
  --palma:#16B86A; --palma-ink:#0F7A45; --palma-bg:#D6F2E2;
  --amber-ink:#8F620C; --amber-bg:#FDEAC2;
  --f-display:"Poppins","Plus Jakarta Sans",system-ui,sans-serif;
  --f-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-md:18px; --r-lg:24px; --r-xl:30px;
  --shadow:0 2px 6px rgba(40,22,28,.05),0 16px 38px -14px rgba(40,22,28,.18);
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.015em}
a{color:var(--teal-ink)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--rosa) 45%,transparent);outline-offset:2px;border-radius:10px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 28px;border-radius:18px;font:700 18px var(--f-display);text-decoration:none;border:0;cursor:pointer;transition:transform .12s var(--ease),filter .2s}
.btn:active{transform:scale(.98)}
.btn-pri{background:linear-gradient(135deg,#E94A78,var(--rosa-ink));color:#fff;box-shadow:0 10px 22px -8px rgba(212,42,92,.55)}
.btn-sec{background:var(--card);border:2px solid var(--line);color:var(--ink)}

/* pantalla base */
.pantalla{flex:1;display:flex;flex-direction:column;width:100%;max-width:1100px;margin:0 auto;padding:0 18px}
.marca-barra{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.marca{font:800 26px var(--f-display);letter-spacing:-.03em;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.marca::after{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--rosa);margin-left:3px}
.idioma{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-weight:700;text-decoration:none;color:var(--ink)}
.hola{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;padding:24px 0 40px;max-width:720px}
.hola h1{font-size:clamp(36px,6vw,60px);line-height:1.06;font-weight:800}
.linea{font-size:19px;color:var(--ink-soft);margin:0}
.nota{font-size:15px;color:var(--muted);margin:8px 0 0;min-height:1.4em}
.pie{text-align:center;color:var(--muted);font-size:15px;padding:14px 18px 18px}
@media (max-width:560px){.hola .btn{width:100%}}

/* formularios y hojas (la maqueta de la entrada) */
.ancho{width:100%}
.q{font-size:31px;line-height:1.12;font-weight:800;margin:4px 0 18px}
.hoja{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:26px 22px;box-shadow:var(--shadow)}
.hoja.sola{max-width:520px;width:100%;margin:12px auto 32px}
.hoja.centro{text-align:center}
.hoja.centro .form{margin-top:14px}
.form{display:grid;gap:16px}
.campo{display:grid;gap:6px}
.campo label{font-size:16px;font-weight:700;color:var(--ink-soft)}
.campo input{width:100%;border:2px solid var(--line);background:var(--card);border-radius:18px;padding:16px 18px;font:inherit;font-size:18px;min-height:60px;color:var(--ink)}
.campo input:focus{border-color:var(--rosa);outline:none;box-shadow:0 0 0 4px var(--rosa-bg)}
.con-boton{position:relative}
.con-boton input{padding-right:96px}
.ver-clave{position:absolute;right:8px;top:50%;transform:translateY(-50%);min-height:44px;padding:0 14px;border:0;background:none;color:var(--teal-ink);font:700 16px var(--f-body);cursor:pointer;border-radius:12px}
.pista{margin:0;font-size:15px;color:var(--muted)}
.aviso{display:flex;gap:10px;align-items:flex-start;background:var(--rosa-bg);color:var(--rosa-ink);border-radius:16px;padding:14px 16px;font-weight:700;margin:0 0 16px;text-align:left}
.aviso svg{flex:0 0 auto;margin-top:1px}
.nota-ok{display:inline-flex;gap:8px;align-items:center;color:var(--palma-ink);font-weight:700;margin:6px 0 0}
.enlaces{margin:16px 0 0;font-size:16px;color:var(--ink-soft)}
.enlaces a{font-weight:700;display:inline-block;min-height:44px;line-height:44px}
.icono-grande{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;margin:6px auto 18px;color:#fff;background:var(--palma);box-shadow:0 14px 30px -10px rgba(22,184,106,.55)}
.icono-grande.correo{background:var(--teal);box-shadow:0 14px 30px -10px rgba(0,164,159,.5)}
.icono-grande.alerta{background:var(--rosa-ink);box-shadow:0 14px 30px -10px rgba(212,42,92,.5)}
.dos-col{display:grid;gap:22px;padding:8px 0 32px}
.lado h2{font-size:21px;margin:0 0 14px}
.pasos{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pasos li{display:flex;gap:14px;align-items:center}
.pasos .n{width:44px;height:44px;border-radius:50%;background:var(--rosa-bg);color:var(--rosa-ink);display:grid;place-items:center;font:800 19px var(--f-display);flex:0 0 auto}
.pasos b{display:block;font:700 17px var(--f-display)}
.pasos li > span:last-child span{font-size:15px;color:var(--ink-soft)}
@media (min-width:900px){
  .dos-col{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:56px;padding-top:24px}
  .lado{background:var(--sunk);border-radius:var(--r-xl);padding:30px}
  .hoja{padding:34px}
}