/* ===========================================================================
   Mi PreuOnline — sistema de diseño compartido
   Juvenil, cálido, profesional. Un solo lugar para el look de todas las páginas.
   =========================================================================== */
:root{
  /* Tipografía */
  --font-display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --font-body:"Instrument Sans",system-ui,sans-serif;

  /* Blanco cálido, no clínico */
  --paper:#FFFFFF;
  --paper-2:#F6F7F4;
  --paper-warm:#FBF7F1;

  /* Tinta con temperatura, no negro azulado frío */
  --ink:#182219;
  --ink-soft:#55615A;
  --ink-faint:#95A09A;

  --line:#EAECE7;
  --line-strong:#DBDED7;

  /* Verde fresco = crecer, aprender. El color de confianza del producto */
  --emerald:#12A05E;
  --emerald-deep:#0B7C48;
  --emerald-bright:#1FBE73;
  --emerald-wash:#E7F6ED;

  /* Coral cálido = energía, cercanía. El pop juvenil */
  --coral:#FF6A3D;
  --coral-deep:#E8522A;
  --coral-wash:#FFEDE6;

  /* Ámbar para el corte / metas */
  --amber:#D98A0C;
  --amber-wash:#FCF2DF;

  --red:#D14A38;
  --red-wash:#FBEDEA;

  --radio:16px;
  --radio-lg:22px;
  --shadow-sm:0 1px 2px rgba(24,34,25,.05);
  --shadow:0 2px 4px rgba(24,34,25,.04), 0 14px 34px -16px rgba(24,34,25,.20);
  --shadow-lg:0 20px 50px -18px rgba(24,34,25,.32);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* Fondo cálido con dos manchas suaves de color: presencia, no ruido */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 45% at 92% -6%, rgba(31,190,115,.10), transparent 62%),
    radial-gradient(48% 38% at -8% 2%, rgba(255,106,61,.08), transparent 60%);
}

.num{font-variant-numeric:tabular-nums}
.wrap{max-width:760px;margin:0 auto;padding:0 22px}

/* Titulares */
.display{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.02}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;color:var(--emerald-deep);
}
.eyebrow::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--emerald)}

/* Marcador de texto: subrayado juguetón detrás de una palabra clave */
.hl{position:relative;white-space:nowrap;color:var(--emerald-deep)}
.hl::after{content:"";position:absolute;left:-3px;right:-3px;bottom:.06em;height:.36em;z-index:-1;
  background:var(--emerald-wash);border-radius:3px;transform:rotate(-.7deg)}
.hl.coral{color:var(--coral-deep)}
.hl.coral::after{background:var(--coral-wash)}

/* Tarjetas */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radio-lg);
  box-shadow:var(--shadow);padding:28px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-size:16px;font-weight:700;cursor:pointer;border:none;
  border-radius:14px;padding:15px 22px;transition:transform .12s ease, box-shadow .2s, background .2s;
  letter-spacing:.005em;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 8px 20px -10px rgba(24,34,25,.5)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(24,34,25,.55)}
.btn-emerald{background:var(--emerald);color:#fff;box-shadow:0 8px 20px -10px rgba(18,160,94,.6)}
.btn-emerald:hover{transform:translateY(-2px)}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 8px 20px -10px rgba(255,106,61,.6)}
.btn-coral:hover{transform:translateY(-2px)}
.btn-block{display:flex;width:100%}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(4px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* Inputs */
label{display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:700;margin:0 0 7px}
input,select{width:100%;background:var(--paper);border:1.5px solid var(--line-strong);border-radius:13px;
  color:var(--ink);font-family:inherit;font-size:16px;padding:12px 15px;outline:none;
  transition:border-color .15s, box-shadow .15s}
input::placeholder{color:var(--ink-faint)}
input:focus,select:focus{border-color:var(--emerald);box-shadow:0 0 0 4px var(--emerald-wash)}
input[type=number]{font-variant-numeric:tabular-nums}
.hint{color:var(--ink-faint);font-size:13px;margin-top:9px;line-height:1.5}

.oculto{display:none}

footer{padding:40px 0 70px;text-align:center;color:var(--ink-faint);font-size:12.5px;line-height:1.8}
footer .sep{color:var(--line-strong);margin:0 6px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}