/* =====================================================
   Índice GRID — formulario web · indice.css
   Misma estética que gridco.com.ar (v6): crema, curvas de nivel,
   Fraunces + DM Sans + DM Mono, sin radios ni sombras.
   ===================================================== */
:root{
  --crema:#F7F3E9;
  --crema-hueso:#EFE9DB;
  --oliva:#4A5340;
  --oliva-claro:#6E7A61;
  --oliva-tinte:#E4E8DE;
  --tinta:#23261F;
  --tinta-suave:#5A5F52;
  --gris-marca:#A8A597;
  --oro:#B08D44;
  --oro-profundo:#7A5A1E;
  --rust:#A6462F;
  --linea:rgba(74,83,64,.18);
  --linea-fuerte:rgba(74,83,64,.38);
  --nivel-1:#A6462F; --nivel-2:#B08D44; --nivel-3:#6E7A61; --nivel-4:#4A5340;

  --display:'Fraunces',Georgia,serif;
  --texto:'DM Sans',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --suave:cubic-bezier(.22,.8,.26,1);
  --t-corta:220ms;
  --ancho:760px;
  --gutter:40px;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;display:flex;flex-direction:column;background:var(--crema) url('../assets/curvas-de-nivel.svg') center top/cover no-repeat fixed;
  color:var(--tinta);font-family:var(--texto);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;text-align:left}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
.wrap{width:100%;max-width:var(--ancho);margin:0 auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--display);font-weight:300;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.4vw,4.4rem);line-height:1.02;font-variation-settings:"opsz" 144}
h2{font-size:clamp(1.9rem,4.4vw,2.8rem);line-height:1.06}
h1 em,h2 em{display:block;font-style:italic;color:var(--oliva-claro)}
.eti{font-family:var(--mono);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-suave)}
.eti.oro{color:var(--oro-profundo)}

/* logo */
.logo{display:inline-flex;align-items:center;gap:.62em;line-height:1;text-decoration:none;font-size:1.2rem}
.logo-mark{width:1.06em;height:1.06em;flex:none}
.logo-txt{font-weight:700;color:var(--oliva);letter-spacing:.01em}
.logo-txt i{font-style:normal;font-weight:400;font-size:.52em;color:var(--gris-marca);margin-left:.28em}

/* cabecera y avance */
.cab{position:sticky;top:0;z-index:10;background:var(--crema);border-bottom:1px solid var(--linea)}
.cab>.wrap{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1100px}
.avance{border-top:1px solid var(--linea)}
.avance .wrap{display:flex;align-items:center;gap:18px;height:44px}
.avance .barra{flex:1;height:2px;background:var(--linea);position:relative;overflow:hidden}
.avance .barra b{position:absolute;inset:0;background:var(--oliva);transform-origin:left;transform:scaleX(0);transition:transform 600ms var(--suave)}

/* pantallas */
main{flex:1;padding-block:clamp(48px,8vw,96px) clamp(56px,8vw,96px)}
.pantalla{animation:entra 520ms var(--suave)}
@keyframes entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pantalla h1,.pantalla h2{margin-top:1.1rem}
.bajada{font-size:1.12rem;color:var(--tinta-suave);margin-top:1.4rem;max-width:52ch}
.datos{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--linea-fuerte);margin-top:2.4rem}
.datos div{padding:16px 0}
.datos div+div{padding-left:20px;border-left:1px solid var(--linea)}
.datos b{display:block;font-family:var(--display);font-weight:300;font-size:2.3rem;line-height:1;color:var(--oliva)}
.datos span{font-size:.9rem;color:var(--tinta-suave)}
.aviso{font-size:.92rem;color:var(--tinta-suave);margin-top:1.4rem;padding-left:12px;border-left:2px solid var(--linea-fuerte);max-width:58ch}

/* botones */
.acciones{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:2.6rem}
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:500;font-size:.95rem;padding:15px 28px;border:1px solid var(--oliva);background:var(--oliva);color:var(--crema);text-decoration:none;
  transition:background var(--t-corta) var(--suave),color var(--t-corta) var(--suave),opacity var(--t-corta)}
.btn:hover{background:transparent;color:var(--oliva)}
.btn:disabled{opacity:.35;cursor:not-allowed;background:var(--oliva);color:var(--crema)}
.btn-min{font-weight:500;font-size:.95rem;color:var(--tinta-suave);padding:4px 0;text-decoration:none;position:relative}
.btn-min::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--linea-fuerte)}
.btn-min:hover{color:var(--tinta)}

/* ruta */
.rutas{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:2rem}
.ruta{border:1px solid var(--linea-fuerte);background:var(--crema);padding:22px 22px 20px;transition:border-color var(--t-corta),background var(--t-corta)}
.ruta:hover{border-color:var(--oliva)}
.ruta b{display:block;font-family:var(--display);font-weight:400;font-size:1.5rem}
.ruta span{display:block;font-size:.92rem;color:var(--tinta-suave);margin-top:.2rem}
.ruta[aria-pressed="true"]{background:var(--crema-hueso);border-color:var(--oliva);box-shadow:inset 0 -3px 0 var(--oliva)}
.ruta-res{margin-top:1.4rem;min-height:1.6rem;font-size:1rem;color:var(--tinta-suave)}
.ruta-res b{font-weight:700;color:var(--oliva)}
.ruta-res i{font-family:var(--display);font-style:italic;font-size:1.15rem;color:var(--oliva-claro)}

/* preguntas */
.pregunta{padding-block:26px;border-bottom:1px solid var(--linea)}
.pregunta:first-of-type{margin-top:1.6rem;border-top:1px solid var(--linea-fuerte)}
.pregunta legend{font-size:1.12rem;font-weight:500;line-height:1.4;margin-bottom:14px;display:flex;gap:12px}
.pregunta legend span{font-family:var(--mono);font-size:.74rem;color:var(--oro-profundo);padding-top:.3rem;min-width:2ch}
fieldset{border:0}
.opciones{display:flex;flex-direction:column;gap:8px}
.opcion{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;border:1px solid var(--linea);background:var(--crema);cursor:pointer;
  transition:border-color var(--t-corta),background var(--t-corta)}
.opcion:hover{border-color:var(--linea-fuerte);background:var(--crema-hueso)}
.opcion input{position:absolute;opacity:0;pointer-events:none}
.opcion .letra{flex:none;width:22px;height:22px;border-radius:50%;border:1.3px solid var(--linea-fuerte);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.7rem;color:var(--tinta-suave);transition:all var(--t-corta)}
.opcion .txt{font-size:.98rem;line-height:1.45}
.opcion:has(input:checked){border-color:var(--oliva);background:var(--crema-hueso)}
.opcion:has(input:checked) .letra{background:var(--oliva);border-color:var(--oliva);color:var(--crema)}
.opcion:has(input:focus-visible){outline:2px solid var(--oro);outline-offset:2px}

/* contacto */
.campos{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-top:2rem}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave)}
.campo input{border:0;border-bottom:1px solid var(--linea-fuerte);background:transparent;padding:10px 0;font-size:1.05rem;border-radius:0;transition:border-color var(--t-corta)}
.campo input:focus{outline:none;border-bottom-color:var(--oliva)}
.campo input:user-invalid{border-bottom-color:var(--rust)}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:1.8rem;font-size:.92rem;color:var(--tinta-suave);cursor:pointer}
.consent input{margin-top:.25rem;width:16px;height:16px;accent-color:var(--oliva);flex:none}
.error{color:var(--rust);font-size:.92rem;margin-top:1rem;min-height:1.4rem}

/* resultado */
.puntaje{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-top:1.6rem}
.puntaje .num{font-family:var(--display);font-weight:300;font-size:clamp(6rem,16vw,9.5rem);line-height:.8;letter-spacing:-.04em;color:var(--oliva);font-variant-numeric:tabular-nums}
.puntaje .de{font-family:var(--display);font-size:1.4rem;color:var(--tinta-suave);padding-bottom:.4rem}
.puntaje .nivel{padding-bottom:.4rem}
.puntaje .nivel b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3.4vw,2.2rem);line-height:1.1}
.puntaje .nivel span{font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave)}
.escala{position:relative;margin-top:2.4rem}
.escala .tramos{display:grid;grid-template-columns:repeat(4,1fr);height:10px}
.escala .tramos i:nth-child(1){background:var(--nivel-1)}
.escala .tramos i:nth-child(2){background:var(--nivel-2)}
.escala .tramos i:nth-child(3){background:var(--nivel-3)}
.escala .tramos i:nth-child(4){background:var(--nivel-4)}
.escala .marca{position:absolute;top:-8px;width:2px;height:26px;background:var(--tinta);left:0;transition:left 1200ms var(--suave)}
.escala .marca::before{content:'';position:absolute;top:-6px;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--tinta)}
.escala .nombres{display:grid;grid-template-columns:repeat(4,1fr);margin-top:12px}
.escala .nombres span{font-size:.82rem;color:var(--tinta-suave);line-height:1.3;padding-right:8px}
.escala .nombres span.aca{color:var(--tinta);font-weight:500}
.lectura-nivel{margin-top:2.4rem;border-top:1px solid var(--linea-fuerte);padding-top:1.6rem}
.lectura-nivel p{font-size:1.04rem;line-height:1.65;margin-bottom:1rem;max-width:62ch}
.lectura-nivel strong{font-weight:500}
.cierre{background:var(--oliva-tinte);padding:clamp(24px,4vw,36px);margin-top:2.4rem}
.cierre h3{font-size:clamp(1.5rem,3vw,2rem);font-weight:300;line-height:1.15}
.cierre h3 em{font-style:italic;color:var(--oliva-claro)}
.cierre p{color:var(--tinta-suave);margin-top:.8rem;max-width:54ch}
.cierre .acciones{margin-top:1.6rem;justify-content:flex-start}

/* pie */
.pie{border-top:1px solid var(--linea);background:var(--crema)}
.pie .wrap{max-width:1100px;display:flex;justify-content:space-between;gap:12px;padding-block:18px;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}
.pie a{text-decoration:none}

@media (max-width:640px){
  :root{--gutter:20px}
  body{background-size:auto 100vh;background-attachment:scroll}
  .rutas,.campos{grid-template-columns:1fr}
  .datos b{font-size:1.9rem}
  .datos div+div{padding-left:14px}
  .acciones{flex-direction:column-reverse;align-items:stretch}
  .acciones .btn{width:100%}
  .acciones .btn-min{align-self:flex-start}
  .escala .nombres span{font-size:.72rem}
  .avance .wrap{gap:12px}
  .avance .eti{font-size:.64rem;letter-spacing:.16em}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
[tabindex="-1"]:focus{outline:none}