/* ============================================================
   Diagnóstico de Crecimiento · Mónica Arce | Creatividad Estratégica
   Identidad: Azul (rigor), Morado (transformación), Naranja (acción),
   Verde (éxito). Tipografías: Lato (cuerpo) + Ananda (display).
   ============================================================ */

/* ---------- Fuentes ---------- */
@font-face{font-family:"Lato";src:url("../fonts/Lato-Light.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Lato";src:url("../fonts/Lato-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Lato";src:url("../fonts/Lato-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Lato";src:url("../fonts/Lato-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Lato";src:url("../fonts/Lato-Black.ttf") format("truetype");font-weight:900;font-display:swap}
@font-face{font-family:"Ananda";src:url("../fonts/Ananda.ttf") format("truetype");font-weight:400;font-display:swap}

/* ---------- Variables de marca ---------- */
:root{
  --azul:#00255a;         --azul-2:#234082;     --azul-acc:#3259A6;   --azul-cl:#B6CAD5;
  --morado:#654897;       --morado-cl:#C9B6D7;
  --naranja:#DE5A2D;      --naranja-cl:#F6BD91;
  --verde:#355530;        --verde-cl:#BEF794;
  --tinta:#19203B;        --tinta-2:#3a4256;
  --papel:#f6f7fb;        --blanco:#ffffff;
  --linea:#e4e7ef;
  --sombra:0 18px 50px -18px rgba(15,24,48,.35);
  --sombra-sm:0 6px 20px -8px rgba(15,24,48,.25);
  --rad:20px;   --rad-sm:14px;
  --grad-marca:linear-gradient(90deg,var(--azul-2) 0%,var(--morado) 34%,var(--naranja) 67%,var(--verde) 100%);
  --transicion:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Lato",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--tinta);
  background:var(--papel);
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  line-height:1.5;
  overflow-x:hidden;
}
em{font-style:normal;color:var(--naranja)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------- Pétalos de fondo ---------- */
.petalos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.petalo{position:absolute;width:46vmax;height:46vmax;border-radius:47% 53% 62% 38% / 42% 55% 45% 58%;
  filter:blur(8px);opacity:.10;animation:flotar 22s var(--transicion) infinite alternate}
.petalo--azul{background:var(--azul-2);top:-14vmax;left:-10vmax}
.petalo--morado{background:var(--morado);top:-8vmax;right:-16vmax;animation-delay:-5s}
.petalo--naranja{background:var(--naranja);bottom:-18vmax;left:-6vmax;animation-delay:-11s}
.petalo--verde{background:var(--verde);bottom:-16vmax;right:-12vmax;animation-delay:-16s}
@keyframes flotar{to{transform:translateY(-4vmax) rotate(12deg) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.petalo{animation:none}}

/* ---------- Barra superior ---------- */
.barra-sup{position:relative;z-index:2;display:flex;align-items:center;gap:20px;
  padding:18px clamp(16px,4vw,40px)}
.logo{height:44px;width:auto}
.progreso{flex:1;display:flex;align-items:center;gap:12px;max-width:420px;margin-left:auto}
.progreso__pista{flex:1;height:8px;border-radius:99px;background:var(--linea);overflow:hidden}
.progreso__fill{display:block;height:100%;width:0;border-radius:99px;background:var(--grad-marca);
  transition:width .45s var(--transicion)}
.progreso__txt{font-size:.8rem;font-weight:700;color:var(--tinta-2);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- Lienzo / formulario ---------- */
.lienzo{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,48px)}
.cuestionario{width:100%;max-width:680px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.paso{display:none;background:var(--blanco);border-radius:var(--rad);box-shadow:var(--sombra);
  padding:clamp(26px,5vw,52px);border:1px solid var(--linea)}
.paso.is-activo{display:block;animation:entrar .5s var(--transicion)}
@keyframes entrar{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.paso.is-activo{animation:none}}

.paso__eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--morado);margin-bottom:12px}
.paso__titulo{font-size:clamp(1.35rem,3.4vw,1.9rem);font-weight:900;line-height:1.18;color:var(--azul);
  letter-spacing:-.01em}
.paso__lead{margin-top:14px;color:var(--tinta-2);font-size:1.05rem}

/* ---------- Intro ---------- */
.paso--intro{text-align:center}
.intro__kicker{font-family:"Ananda",cursive;font-size:clamp(1.6rem,5vw,2.3rem);color:var(--morado);
  line-height:1;margin-bottom:6px}
.intro__titulo{font-size:clamp(1.9rem,5.6vw,3rem);font-weight:900;color:var(--azul);line-height:1.08;
  letter-spacing:-.02em;margin-bottom:16px}
.intro__lead{color:var(--tinta-2);font-size:1.08rem;max-width:52ch;margin:0 auto 24px}
.intro__meta{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-bottom:30px}
.intro__meta li{font-size:.92rem;color:var(--tinta-2)}
.intro__meta strong{display:block;color:var(--azul);font-size:1.15rem;font-weight:900}
.intro__firma{margin-top:22px;font-size:.9rem;color:var(--tinta-2)}
.intro__firma strong{color:var(--azul)}

/* ---------- Campos abiertos ---------- */
.campos{display:grid;gap:16px;margin-top:26px}
.campo{display:block}
.campo__label{display:block;font-weight:700;font-size:.92rem;color:var(--tinta);margin-bottom:7px}
.campo__label .req{color:var(--naranja);font-style:normal}
.campo__input{width:100%;font:inherit;color:var(--tinta);background:var(--papel);
  border:2px solid var(--linea);border-radius:var(--rad-sm);padding:14px 16px;transition:border-color .2s,box-shadow .2s}
.campo__input::placeholder{color:#9aa2b5}
.campo__input:focus{outline:none;border-color:var(--azul-acc);background:var(--blanco);
  box-shadow:0 0 0 4px rgba(50,89,166,.15)}
.campo__input--grande{font-size:1.15rem;padding:18px 18px;margin-top:22px}

/* ---------- Opciones (tarjetas) ---------- */
.opciones{display:grid;gap:12px;margin-top:26px}
.opcion{position:relative;display:flex;align-items:flex-start;gap:14px;cursor:pointer;
  background:var(--papel);border:2px solid var(--linea);border-radius:var(--rad-sm);
  padding:16px 18px;transition:border-color .18s,background .18s,transform .12s,box-shadow .18s}
.opcion:hover{border-color:var(--azul-cl);transform:translateY(-1px);box-shadow:var(--sombra-sm)}
.opcion__radio{position:absolute;opacity:0;pointer-events:none}
.opcion__tecla{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-weight:900;font-size:.95rem;color:var(--azul-2);background:#fff;border:2px solid var(--linea);
  transition:all .18s}
.opcion__cuerpo{flex:1;min-width:0}
.opcion__titulo{display:block;font-weight:800;color:var(--azul);font-size:1.02rem;line-height:1.25}
.opcion__desc{display:block;color:var(--tinta-2);font-size:.92rem;margin-top:3px}
.opcion__check{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:var(--verde);font-size:.9rem;font-weight:900;opacity:0;transform:scale(.5);
  transition:all .2s var(--transicion);align-self:center}
/* Estado seleccionado */
.opcion:has(.opcion__radio:checked){border-color:var(--azul-acc);background:#eef3fb;box-shadow:var(--sombra-sm)}
.opcion:has(.opcion__radio:checked) .opcion__tecla{background:var(--azul);color:#fff;border-color:var(--azul)}
.opcion:has(.opcion__radio:checked) .opcion__check{opacity:1;transform:scale(1)}
.opcion__radio:focus-visible + .opcion__tecla{outline:3px solid var(--azul-acc);outline-offset:2px}

/* ---------- Botones ---------- */
.paso__nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:30px}
.paso__nav--centrado{justify-content:center;flex-wrap:wrap}
.btn{font:inherit;font-weight:800;cursor:pointer;border:none;border-radius:99px;
  padding:14px 26px;color:#fff;background:var(--azul);transition:transform .12s,box-shadow .2s,background .2s;
  box-shadow:0 10px 24px -10px rgba(0,37,90,.7)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(0,37,90,.75)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--morado);outline-offset:3px}
.btn--grande{padding:17px 34px;font-size:1.08rem}
.btn--ghost{background:transparent;color:var(--tinta-2);box-shadow:none;padding:14px 18px}
.btn--ghost:hover{background:var(--papel);transform:none;color:var(--azul)}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}

/* ---------- Alertas ---------- */
.alerta{margin-top:18px;padding:14px 16px;border-radius:var(--rad-sm);background:#fdece7;
  border:1px solid var(--naranja-cl);color:#8C381E;font-size:.95rem;font-weight:600}
.campo__input.err,.opciones.err .opcion{border-color:var(--naranja)}

/* ---------- Pie ---------- */
.pie{position:relative;z-index:1;text-align:center;padding:18px;color:var(--tinta-2);font-size:.82rem}

/* ============================================================
   Página de agradecimiento (gracias.php)
   ============================================================ */
.gracias{max-width:640px;text-align:center}
.gracias__icono{width:84px;height:84px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad-marca);color:#fff;font-size:2.4rem;box-shadow:var(--sombra)}
.gracias__titulo{font-family:"Ananda",cursive;font-size:clamp(2.2rem,7vw,3.4rem);color:var(--azul);line-height:1;margin-bottom:8px}
.gracias__sub{font-size:clamp(1.15rem,3vw,1.5rem);font-weight:900;color:var(--azul);margin-bottom:16px}
.gracias__texto{color:var(--tinta-2);font-size:1.08rem;max-width:52ch;margin:0 auto 10px}
.gracias__dolor{margin:24px auto;max-width:52ch;padding:18px 20px;background:#fff;border:1px solid var(--linea);
  border-left:5px solid var(--morado);border-radius:var(--rad-sm);text-align:left;box-shadow:var(--sombra-sm)}
.gracias__dolor b{color:var(--morado)}
.gracias__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px}
.btn--wa{background:#25D366;box-shadow:0 10px 24px -10px rgba(37,211,102,.8)}
.btn--agenda{background:var(--morado);box-shadow:0 10px 24px -10px rgba(101,72,151,.8)}

@media (max-width:520px){
  .paso__nav{flex-direction:row}
  .btn{padding:13px 20px}
  .logo{height:38px}
}