/* ============================================================
   DIAGNÓSTICO: los cinco pasos, el resultado y la autorización
   ============================================================
   Va después de publico.css, que pone los tokens, la cabecera, el
   pie y los botones. Una idea por pantalla: la pregunta grande a la
   izquierda y lo que hay que llenar a la derecha.
   ============================================================ */

/* Texto solo para lectores de pantalla: el ✓ y el ✕ no se leen */
.sr{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}

/* ---- Progreso ---- */
.progreso{ padding:14px var(--margen) 0; display:flex; align-items:center; gap:20px; }
.progreso__txt{ font:600 13px/1 var(--texto); white-space:nowrap; }
.progreso__barras{ flex:1; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; }
.progreso__barras i{ height:6px; border-radius:999px; background:var(--linea); transition:background .3s var(--curva); }
.progreso__barras i.hecho{ background:var(--mar); }

/* ---- Rejilla del paso ---- */
.paso{
    flex:1;
    display:grid;
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:clamp(32px, 6vw, 88px);
    align-items:start;
    padding:64px var(--margen) 0;
    animation:aparecer .35s var(--curva) backwards;
}
@keyframes aparecer{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.paso__intro h1{
    margin:0;
    font:700 clamp(36px, 4.2vw, 60px)/1.02 var(--titulos);
    letter-spacing:-.035em;
    text-wrap:balance;
}
.paso__intro h1:focus{ outline:none; }
.paso--primero .paso__intro h1{ font-size:clamp(36px, 4.5vw, 64px); line-height:1; }

/* ---- Portada ---- */
/* En los pasos el bloque principal se estira para que el pie quede
   abajo. En la portada eso dejaba un hueco entre ella y las preguntas
   frecuentes: ahí es la sección de preguntas la que se estira. */
.paso--inicio{ flex:0 0 auto; }
.paso--inicio + .preguntas{ flex:1 0 auto; }
.paso--inicio .paso__intro h1{ font-size:clamp(40px, 5.2vw, 72px); line-height:.98; }
.paso--inicio .paso__texto{ font-size:19px; line-height:1.55; max-width:32ch; }
.inicio__eti{
    margin:0 0 18px;
    font:700 12px/1 var(--texto);
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--mar-prof);
}
.inicio__accion{ margin-top:34px; }
.inicio__accion .btn-sol{ height:60px; padding:0 32px; font-size:18px; }
.inicio__tit{ margin:0 0 6px; font:600 14px/1 var(--texto); color:var(--texto-3); }
.inicio__lista{ margin:0; padding:0; list-style:none; }
.inicio__lista li{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 0;
    border-bottom:1px solid var(--linea-2);
    font:500 17px/1.35 var(--texto);
}
.inicio__lista span{
    width:32px; height:32px;
    flex:none;
    border-radius:999px;
    background:var(--arena-2);
    display:flex;
    align-items:center;
    justify-content:center;
    font:700 14px/1 var(--titulos);
}
.inicio__nota{ margin:18px 0 0; font:400 14.5px/1.55 var(--texto); color:var(--texto-3); }

/* ---- Preguntas frecuentes (solo en la portada) ----
   La misma rejilla de los pasos: el título a la izquierda y las
   preguntas a la derecha, cada una como una tarjeta que se abre. */
.preguntas{
    display:grid;
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:clamp(32px, 6vw, 88px);
    align-items:start;
    padding:96px var(--margen) 0;
}
.preguntas__intro h2{
    margin:0;
    font:700 clamp(30px, 3vw, 42px)/1.05 var(--titulos);
    letter-spacing:-.03em;
}
.preguntas__intro p{ margin:14px 0 0; font:400 17px/1.55 var(--texto); color:var(--texto-2); max-width:32ch; }
.preguntas__lista{ display:flex; flex-direction:column; gap:10px; }
.pregunta{
    border:1px solid var(--linea);
    border-radius:18px;
    background:var(--superficie);
    transition:border-color .18s var(--curva);
}
.pregunta[open]{ border-color:var(--linea-3); }
.pregunta summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:20px 24px;
    font:600 17px/1.35 var(--texto);
    cursor:pointer;
    list-style:none;
}
.pregunta summary::-webkit-details-marker{ display:none; }
/* El + que gira a × al abrir, en el círculo arena de las tarjetas */
.pregunta summary::after{
    content:'+';
    width:32px; height:32px;
    flex:none;
    border-radius:999px;
    background:var(--arena-2);
    display:flex;
    align-items:center;
    justify-content:center;
    font:500 20px/1 var(--texto);
    transition:transform .2s var(--curva);
}
.pregunta[open] summary::after{ transform:rotate(45deg); }
.pregunta summary:hover::after{ background:var(--mar-suave); }
.pregunta p{ margin:0; padding:0 24px 22px; font:400 16px/1.6 var(--texto); color:var(--texto-2); max-width:62ch; }
.paso__texto{
    margin:22px 0 0;
    font:400 18px/1.6 var(--texto);
    color:var(--texto-2);
    max-width:36ch;
    text-wrap:pretty;
}
.paso--primero .paso__texto{ font-size:19px; line-height:1.55; max-width:30ch; }
.consejo{ margin-top:32px; display:flex; gap:12px; align-items:flex-start; max-width:36ch; }
.consejo__i{
    width:26px; height:26px;
    flex:none;
    border-radius:999px;
    background:var(--mar-suave);
    color:var(--mar-prof);
    display:flex;
    align-items:center;
    justify-content:center;
    font:700 13px/1 var(--texto);
}
.consejo p{ margin:2px 0 0; font:400 15px/1.55 var(--texto); color:var(--texto-2); }

/* ---- Panel blanco ---- */
.panel{
    padding:28px;
    border-radius:24px;
    background:var(--superficie);
    border:1px solid var(--linea);
}
.panel + .panel, .eleccion + .panel{ margin-top:14px; }

/* Un solo valor / Detallado */
.segmento{ display:inline-flex; padding:4px; border-radius:14px; background:var(--arena-2); }
.segmento button{
    padding:10px 16px;
    border:0;
    border-radius:11px;
    background:transparent;
    color:var(--texto-3);
    font:600 14px/1 var(--texto);
    cursor:pointer;
}
.segmento button.activo{
    background:var(--segmento-activo);
    color:var(--tinta);
    box-shadow:0 1px 3px rgba(0,0,0,.14);
}

/* ---- Campos ---- */
.campo{
    width:100%;
    height:52px;
    padding:0 16px;
    border:1.5px solid var(--linea);
    border-radius:14px;
    background:transparent;
    color:var(--tinta);
    font:500 16px/1 var(--texto);
    transition:border-color .15s, box-shadow .15s;
}
.campo::placeholder{ color:var(--texto-3); opacity:.7; }
.campo:focus{ outline:none; border-color:var(--mar); box-shadow:0 0 0 4px var(--anillo); }
.campo.error{ border-color:var(--error); background:var(--error-suave); }

.dinero{ position:relative; }
.dinero > span{
    position:absolute;
    left:16px; top:50%;
    transform:translateY(-50%);
    font:500 16px/1 var(--texto);
    color:var(--texto-3);
    pointer-events:none;
}
.dinero .campo{
    padding-left:32px;
    text-align:right;
    font-weight:600;
    font-variant-numeric:tabular-nums;
}
.dinero--grande > span{ left:20px; font:500 26px/1 var(--titulos); }
.dinero--grande .campo{
    height:64px;
    padding-left:46px;
    padding-right:20px;
    border-width:2px;
    border-radius:16px;
    text-align:left;
    font:600 26px/1 var(--titulos);
}
.etiqueta{ display:block; margin-bottom:10px; font:600 14px/1.3 var(--texto); }
.etiqueta small{ font-weight:400; color:var(--texto-3); }
.bloque-campo{ margin-top:24px; }
.bloque-campo + .bloque-campo{ margin-top:20px; }
.ayuda-campo{ margin:8px 0 0; font:400 13.5px/1.45 var(--texto); color:var(--texto-3); }

/* ---- Filas: descripción + valor ---- */
.filas-cab,
.fila{
    display:grid;
    grid-template-columns:minmax(0,1fr) 190px 36px;
    gap:10px;
}
.filas-cab{ margin-top:22px; font:600 12.5px/1 var(--texto); color:var(--texto-3); }
.filas{ margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.fila{ align-items:center; }
.quitar{
    width:36px; height:36px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--texto-3);
    font-size:20px;
    line-height:1;
    cursor:pointer;
}
.quitar:hover{ background:var(--arena-2); color:var(--tinta); }
.anadir{ margin-top:12px; }

/* ---- Totales ---- */
.total{
    margin-top:20px;
    padding:18px 22px;
    border-radius:16px;
    background:var(--mar-suave);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px 16px;
    flex-wrap:wrap;
}
.total > span{ font:600 15px/1.3 var(--texto); color:var(--mar-tinta); }
.total > strong{
    font:700 28px/1 var(--titulos);
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
}
.total > small{ flex-basis:100%; font:500 13.5px/1.4 var(--texto); color:var(--mar-tinta); }
.total--arena{ background:var(--arena-2); }
.total--arena > span{ color:var(--tinta); }

/* Lo que queda al mes, con una barra: se entiende sin hacer cuentas.
   Va con los colores del tema: cian suave de día, cian translúcido de
   noche, y ámbar cuando falta dinero. Antes era un bloque negro fijo
   (el azul marino pasó a negro) y de día desentonaba con todo lo demás.
   La cifra en cian profundo da 5,5:1 sobre el cian suave. */
.queda{
    margin-top:12px;
    padding:20px 22px;
    border-radius:16px;
    background:var(--mar-suave);
    border:1px solid rgba(0,161,184,.22);
    color:var(--tinta);
}
.queda__fila{ display:flex; align-items:flex-end; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; }
.queda__eti{ font:600 15px/1.3 var(--texto); }
.queda__sub{ margin-top:4px; font:400 13.5px/1.4 var(--texto); color:var(--texto-2); }
.queda__valor{
    font:700 32px/1 var(--titulos);
    letter-spacing:-.02em;
    color:var(--mar-prof);
    font-variant-numeric:tabular-nums;
}
.queda__barra{
    margin-top:16px;
    height:8px;
    border-radius:999px;
    background:rgba(17,17,17,.08);
    display:flex;
    overflow:hidden;
}
.queda__barra i{ transition:width .3s var(--curva); }
.queda__barra .g{ background:rgba(17,17,17,.28); }
.queda__barra .q{ background:var(--mar); }
.queda__leyenda{ margin-top:8px; display:flex; justify-content:space-between; gap:12px; font:500 12.5px/1.2 var(--texto); color:var(--texto-2); }
.queda--falta{ background:var(--ambar-suave); border-color:rgba(250,155,2,.35); }
.queda--falta .queda__valor{ color:var(--ambar-tinta); }
.queda--falta .queda__barra .g{ background:var(--sol); }
/* De noche las barras necesitan claro sobre oscuro */
html[data-tema="oscuro"] .queda{ border-color:rgba(69,201,218,.22); }
html[data-tema="oscuro"] .queda__barra{ background:rgba(244,237,225,.14); }
html[data-tema="oscuro"] .queda__barra .g{ background:rgba(244,237,225,.45); }
html[data-tema="oscuro"] .queda__barra .q{ background:#45C9DA; }
html[data-tema="oscuro"] .queda--falta{ border-color:rgba(250,155,2,.3); }
html[data-tema="oscuro"] .queda--falta .queda__barra .g{ background:#FFB45C; }

/* ---- Navegación del paso ---- */
.nav-paso{ margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.aviso-paso{ margin:16px 0 0; font:600 14.5px/1.4 var(--texto); color:var(--error); }

/* ---- Tarjetas de elección ---- */
.opciones{ display:flex; flex-direction:column; gap:14px; }
.opcion{
    width:100%;
    display:flex;
    align-items:center;
    gap:22px;
    padding:26px 28px;
    border:1.5px solid var(--linea);
    border-radius:22px;
    background:var(--superficie);
    box-shadow:0 1px 2px rgba(0,0,0,.06);
    text-align:left;
    cursor:pointer;
    transition:transform .18s var(--curva), box-shadow .18s var(--curva), border-color .18s var(--curva);
}
.opcion:hover{ transform:translateY(-2px); }
.opcion.activa{
    border-color:var(--mar);
    background:var(--elegida);
    box-shadow:0 0 0 4px var(--anillo), 0 14px 30px -18px rgba(0,0,0,.35);
}
.opcion__letra{
    width:44px; height:44px;
    flex:none;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--arena-2);
    color:var(--tinta);
    font:700 16px/1 var(--titulos);
}
.opcion.activa .opcion__letra{ background:var(--oscuro); color:var(--oscuro-txt); }
.opcion__txt{ flex:1; min-width:0; }
.opcion__txt b{ display:block; font:600 22px/1.2 var(--titulos); letter-spacing:-.01em; }
.opcion__txt small{ display:block; margin-top:6px; font:400 16px/1.5 var(--texto); color:var(--texto-2); }
.opcion__flecha{
    width:44px; height:44px;
    flex:none;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--arena-2);
    font:600 18px/1 var(--texto);
}
.opcion.activa .opcion__flecha{ background:var(--sol); color:var(--sol-txt); }

.confidencial{
    margin:22px 0 0;
    display:flex;
    align-items:center;
    gap:10px;
    font:500 14px/1.4 var(--texto);
    color:var(--texto-2);
}
.confidencial svg{ width:15px; height:17px; flex:none; color:var(--mar-prof); }

/* Sí / No, en dos columnas */
.eleccion{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.eleccion .opcion{ padding:24px; gap:14px; border-radius:20px; }
.radio{
    width:24px; height:24px;
    flex:none;
    border-radius:999px;
    border:2px solid var(--linea-3);
    display:flex;
    align-items:center;
    justify-content:center;
}
.radio i{ width:10px; height:10px; border-radius:999px; background:transparent; }
.opcion.activa .radio{ border-color:var(--mar); }
.opcion.activa .radio i{ background:var(--oscuro); }
.eleccion .opcion b{ font:600 19px/1.2 var(--titulos); }

/* ---- Deudas: una ficha por acreedor ---- */
.deudas{ margin-top:22px; display:flex; flex-direction:column; gap:10px; }
.ficha{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px 8px 8px;
    border-radius:16px;
    background:var(--crema);
    border:1px solid var(--linea-2);
}
.ficha__abrir{
    flex:1;
    min-width:0;
    display:flex;
    align-items:center;
    gap:16px;
    padding:8px 10px;
    border:0;
    border-radius:12px;
    background:transparent;
    text-align:left;
    cursor:pointer;
}
.ficha__abrir:hover{ background:var(--hover); }
.ficha__ini{
    width:42px; height:42px;
    flex:none;
    border-radius:12px;
    background:var(--oscuro);
    color:var(--oscuro-txt);
    display:flex;
    align-items:center;
    justify-content:center;
    font:700 14px/1 var(--titulos);
}
.ficha__txt{ flex:1; min-width:0; }
.ficha__txt b{ display:block; font:600 16px/1.3 var(--texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ficha__txt small{ display:block; margin-top:3px; font:400 14px/1.4 var(--texto); color:var(--texto-3); }
.ficha__monto{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.ficha__monto strong{
    font:700 18px/1 var(--titulos);
    letter-spacing:-.01em;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.etiqueta-mora{
    padding:4px 8px;
    border-radius:999px;
    background:var(--ambar-suave);
    color:var(--ambar-tinta);
    font:700 11.5px/1.2 var(--texto);
    white-space:nowrap;
}

.editor{
    padding:18px;
    border-radius:16px;
    border:1.5px solid var(--mar);
    background:var(--superficie);
    box-shadow:0 0 0 4px var(--anillo);
}
.editor__rejilla{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.editor__rejilla label{ display:flex; flex-direction:column; gap:8px; font:600 13.5px/1.3 var(--texto); }
.editor__rejilla label small{ font-weight:400; color:var(--texto-3); }
.editor__pie{ margin-top:14px; display:flex; justify-content:flex-end; gap:8px; }

.nota-neto{
    margin:18px 0 0;
    padding:16px 18px 10px;
    border-radius:14px;
    background:var(--ambar-suave);
    font:400 14.5px/1.55 var(--texto);
    color:var(--tinta);
}
.nota-neto p{ margin:0; }
.nota-neto strong{ color:var(--ambar-tinta); }
.nota-neto .btn-texto{ margin:6px 0 0 -14px; }

/* «Detallado · recomendado» en el selector de las deudas */
.segmento__tag{
    margin-left:6px;
    padding:3px 7px;
    border-radius:999px;
    background:var(--mar-suave);
    color:var(--mar-prof);
    font:700 10.5px/1 var(--texto);
    letter-spacing:.04em;
    text-transform:uppercase;
    vertical-align:1px;
}
.recomendado{
    margin:16px 0 0;
    padding-left:12px;
    border-left:3px solid var(--mar);
    font:500 14px/1.5 var(--texto);
    color:var(--texto-2);
}

/* ---- Proyección de cuotas en el resultado ---- */
.proyeccion{
    margin-top:14px;
    padding:18px 20px;
    border-radius:16px;
    background:var(--superficie);
    border:1px solid var(--linea);
}
/* Riesgo alto es caso urgente: borde, barra y título en rojo, el mismo
   de la pastilla. En naranja se leía como un aviso más. */
.proyeccion--alto{ border-color:var(--error); }
.proyeccion__cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.proyeccion__eti{ font:600 13px/1.3 var(--texto); color:var(--texto-3); }
.proyeccion__cifra{ margin-top:10px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.proyeccion__cifra strong{ font:700 40px/1 var(--titulos); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.proyeccion__cifra span{ font:500 15px/1.35 var(--texto); color:var(--texto-2); }
.proyeccion__barra{ margin-top:14px; position:relative; height:8px; border-radius:999px; background:var(--linea-2); }
.proyeccion__barra i{ position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--mar); }
.proyeccion--alto .proyeccion__barra i{ background:var(--error); }
.proyeccion__marca{ position:absolute; left:50%; top:-5px; width:2px; height:18px; border-radius:2px; background:var(--tinta); }
.proyeccion__marca-txt{ position:relative; height:22px; }
.proyeccion__marca-txt span{
    position:absolute;
    left:50%; top:8px;
    transform:translateX(-50%);
    font:500 12.5px/1 var(--texto);
    color:var(--texto-3);
    white-space:nowrap;
}
.proyeccion__titulo{ margin:12px 0 0; font:700 18px/1.3 var(--titulos); }
.proyeccion--bajo .proyeccion__titulo{ color:var(--mar-prof); }
.proyeccion--alto .proyeccion__titulo{ color:var(--error); }
.proyeccion__txt{ margin:6px 0 0; font:400 15px/1.55 var(--texto); color:var(--texto-2); }

/* «Caso urgente»: la misma pastilla en la proyección y en el llamado.
   Late para que no pase desapercibida: el fondo se aviva, un anillo se
   abre alrededor y el punto blanco parpadea. Un ciclo cada 1,2 s, muy
   por debajo de los tres destellos por segundo que marca WCAG como
   riesgo. Con «reducir movimiento» activado en el sistema queda quieta
   (regla general al final de publico.css). El rojo más vivo, #D92D20,
   sigue dando 4,8:1 con el texto blanco. */
.urgente{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:5px 10px 5px 9px;
    border-radius:999px;
    background:#B42318;
    color:#FFFFFF;
    font:700 11.5px/1 var(--texto);
    letter-spacing:.06em;
    text-transform:uppercase;
    white-space:nowrap;
    animation:urgente-latido 1.2s ease-in-out infinite;
}
.urgente::before{
    content:'';
    width:7px; height:7px;
    flex:none;
    border-radius:50%;
    background:#FFFFFF;
    animation:urgente-punto 1.2s ease-in-out infinite;
}
@keyframes urgente-latido{
    0%  { background-color:#B42318; box-shadow:0 0 0 0 rgba(217,45,32,.55); }
    50% { background-color:#D92D20; }
    70% { box-shadow:0 0 0 9px rgba(217,45,32,0); }
    100%{ background-color:#B42318; box-shadow:0 0 0 0 rgba(217,45,32,0); }
}
@keyframes urgente-punto{
    0%, 100%{ opacity:1; }
    50%     { opacity:.2; }
}

/* ---- Llamado a contactar, en todos los resultados ---- */
.llamado{
    margin-top:14px;
    padding:20px 22px;
    border-radius:16px;
    background:var(--mar-suave);
    color:var(--mar-tinta);
}
.llamado__titulo{ margin:0; font:700 20px/1.25 var(--titulos); color:var(--tinta); }
.llamado__txt{ margin:6px 0 0; font:400 15px/1.55 var(--texto); }
.llamado__botones{ margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }
.llamado__btn{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:0 16px;
    border-radius:12px;
    background:var(--superficie);
    color:var(--tinta);
    font:600 14.5px/1.2 var(--texto);
    text-decoration:none;
    word-break:break-all;
}
.llamado__btn:hover{ color:var(--tinta); box-shadow:0 0 0 2px var(--mar); }
/* Verde de WhatsApp, oscurecido lo justo para que el texto blanco llegue
   a 5:1 (con el verde de la marca queda en 2,9:1 y no se lee bien) */
.llamado__btn--wa{ background:#0F7B3F; color:#FFFFFF; word-break:normal; }
.llamado__btn--wa:hover{ color:#FFFFFF; background:#0B6433; box-shadow:none; }
/* Urgente: rojo suave con el título en rojo, en los dos temas. Antes era
   un bloque negro fijo y de día se veía como un error de color. */
.llamado--urgente{
    background:var(--error-suave);
    border:1px solid var(--error);
    color:var(--texto-2);
}
.llamado--urgente .llamado__titulo{ margin-top:12px; color:var(--error); }
.llamado--urgente .llamado__txt{ color:var(--texto-2); }
.llamado--urgente .llamado__btn:not(.llamado__btn--wa){ border:1px solid var(--linea); }

/* ---- Resultado ---- */
.resultado__intro{ position:relative; }
/* La marca de la fundación, detrás del resultado. El PNG ya viene
   rebajado al 10 %, así que no hace falta opacity. */
.resultado__agua{
    position:absolute;
    left:50%; top:46%;
    width:min(420px, 90%);
    aspect-ratio:560 / 417;
    transform:translate(-50%, -50%) rotate(-10deg);
    background:url('../img/logo-agua.png') center / contain no-repeat;
    pointer-events:none;
}
html[data-tema="oscuro"] .resultado__agua{ opacity:.5; filter:invert(1); }
.resultado__intro > *:not(.resultado__agua){ position:relative; }

/* Cuatro bloques en dos filas: título | proyección, detalle | formulario.
   Así las dos columnas pesan parecido y no queda media pantalla vacía. */
.paso--resultado{
    grid-template-areas:
        "titulo  destacado"
        "detalle accion";
    row-gap:40px;
}
.resultado__titulo{ grid-area:titulo; }
.resultado__titulo h1{ margin-top:22px; font-size:clamp(34px, 3.7vw, 54px); }
/* Abajo con el texto del título: la proyección queda a su altura */
.resultado__destacado{ grid-area:destacado; align-self:end; }
.resultado__destacado > *{ margin-top:0; }
.resultado__detalle{ grid-area:detalle; }
.resultado__detalle > .criterios:first-of-type{ margin-top:0; }
.resultado__accion{ grid-area:accion; }

.insignia{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px 8px 8px;
    border-radius:999px;
    background:var(--mar-suave);
    color:var(--mar-tinta);
    font:700 13.5px/1 var(--texto);
}
.insignia i{
    width:22px; height:22px;
    border-radius:999px;
    background:var(--mar);
    color:#111111;
    display:flex;
    align-items:center;
    justify-content:center;
    font-style:normal;
    font-size:12px;
}
.insignia--ambar{ background:var(--ambar-suave); color:var(--ambar-tinta); }
.insignia--ambar i{ background:var(--sol); }
.insignia--gris{ background:var(--arena-2); color:var(--tinta); }
.insignia--gris i{ background:var(--linea-3); color:var(--tinta); }

.criterios{ margin:30px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.criterio{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:15px 18px;
    border-radius:16px;
    background:var(--superficie);
    border:1px solid var(--linea);
}
.criterio__ico{
    width:26px; height:26px;
    flex:none;
    border-radius:999px;
    background:var(--mar);
    color:#111111;
    display:flex;
    align-items:center;
    justify-content:center;
    font:700 13px/1 var(--texto);
}
.criterio--no .criterio__ico{ background:var(--ambar-suave); color:var(--ambar-tinta); }
.criterio__cuerpo{ flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.criterio__txt{ flex:1; min-width:12ch; font:600 15.5px/1.4 var(--texto); }
.criterio__min{ font:500 13px/1.4 var(--texto); color:var(--texto-3); white-space:nowrap; }
.criterio__barra{ flex-basis:100%; margin-top:10px; position:relative; height:8px; border-radius:999px; background:var(--linea-2); }
.criterio__barra i{ position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--mar); }
.criterio--no .criterio__barra i{ background:var(--sol); }
.criterio__marca{ position:absolute; left:30%; top:-5px; width:2px; height:18px; border-radius:2px; background:var(--tinta); }
.criterio__marca-txt{
    flex-basis:100%;
    position:relative;
    height:22px;
}
.criterio__marca-txt span{
    position:absolute;
    left:30%; top:8px;
    transform:translateX(-50%);
    font:500 12.5px/1 var(--texto);
    color:var(--texto-3);
    white-space:nowrap;
}

.resultado__nota{ margin:22px 0 0; font:400 13px/1.6 var(--texto); color:var(--texto-3); max-width:56ch; }
.resultado__extra{ margin:18px 0 0; font:400 15px/1.55 var(--texto); color:var(--texto-2); max-width:44ch; }
.resultado__volver{ margin-top:22px; }

.contacto{
    position:sticky;
    top:24px;
    padding:32px;
    border-radius:24px;
    background:var(--superficie);
    border:1px solid var(--linea);
    box-shadow:var(--sombra-tarjeta);
}
.contacto h2{ margin:0; font:700 28px/1.1 var(--titulos); letter-spacing:-.02em; }
.contacto > p{ margin:10px 0 0; font:400 16px/1.55 var(--texto); color:var(--texto-2); }
.contacto__campos{ margin-top:26px; display:flex; flex-direction:column; gap:18px; }
.contacto__campos label > span{ display:block; margin-bottom:9px; font:600 14px/1 var(--texto); }
.contacto__campos .campo{ height:54px; }
.contacto .btn-sol{ width:100%; height:58px; margin-top:26px; }
.contacto__nota{ margin:14px 0 0; text-align:center; font:400 13.5px/1.5 var(--texto); color:var(--texto-3); }
.contacto__otra{ margin-top:18px; padding-top:18px; border-top:1px solid var(--linea-2); text-align:center; }
.contacto__otra button{ border:0; background:none; color:var(--mar-prof); font:600 14.5px/1 var(--texto); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.contacto__otra button:hover{ color:#F2801C; }
.envio{
    margin:16px 0 0;
    padding:14px 16px;
    border-radius:14px;
    background:var(--mar-suave);
    color:var(--mar-tinta);
    font:500 14.5px/1.5 var(--texto);
}
.envio--ojo{ background:var(--ambar-suave); color:var(--ambar-tinta); }

/* ---- Autorización de datos ---- */
.velo{
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    padding:24px;
    overflow-y:auto;
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(2px);
}
.dialogo{
    width:100%;
    max-width:920px;
    margin:auto;
    background:var(--superficie);
    border-radius:28px;
    box-shadow:0 40px 100px -20px rgba(0,0,0,.55);
    overflow:hidden;
    animation:aparecer .3s var(--curva) backwards;
}
.dialogo__cab{ padding:40px 48px 0; }
.dialogo__sello{ display:flex; align-items:center; gap:12px; }
.dialogo__sello i{
    width:44px; height:44px;
    border-radius:14px;
    background:var(--mar-suave);
    color:var(--mar-prof);
    display:flex;
    align-items:center;
    justify-content:center;
}
.dialogo__sello i svg{ width:17px; height:20px; }
.dialogo__sello span{ font:700 12px/1 var(--texto); letter-spacing:.14em; text-transform:uppercase; color:var(--mar-prof); }
.dialogo h2{ margin:18px 0 0; font:700 36px/1.08 var(--titulos); letter-spacing:-.025em; }
.dialogo__cab p{ margin:14px 0 0; font:400 16.5px/1.6 var(--texto); color:var(--texto-2); text-wrap:pretty; }
.dialogo__bloques{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; padding:24px 48px 0; }
.dialogo__bloque{ padding:22px 24px; border-radius:18px; background:var(--crema); border:1px solid var(--linea-2); }
.dialogo__bloque b{ font:700 15px/1.35 var(--texto); }
.dialogo__bloque p{ margin:10px 0 0; font:400 14.5px/1.6 var(--texto); color:var(--texto-2); }
.dialogo__promesa{
    margin:14px 48px 0;
    padding:20px 24px;
    border-radius:18px;
    background:var(--mar-suave);
    display:flex;
    gap:16px;
    align-items:flex-start;
}
.dialogo__promesa i{
    width:36px; height:36px;
    flex:none;
    border-radius:12px;
    background:var(--mar);
    color:#111111;
    display:flex;
    align-items:center;
    justify-content:center;
    font:700 16px/1 var(--texto);
    font-style:normal;
}
.dialogo__promesa p{ margin:0; font:500 15.5px/1.55 var(--texto); color:var(--mar-tinta); }
.dialogo__letra{ margin:16px 48px 0; font:400 13.5px/1.6 var(--texto); color:var(--texto-3); }
.dialogo__pie{
    margin-top:28px;
    padding:22px 48px;
    background:var(--crema);
    border-top:1px solid var(--linea-2);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px 24px;
    flex-wrap:wrap;
}
.dialogo__botones{ display:flex; align-items:center; gap:8px; }
.casilla{ display:flex; align-items:center; gap:14px; cursor:pointer; font:600 15px/1.4 var(--texto); max-width:44ch; }
.casilla input{
    appearance:none;
    -webkit-appearance:none;
    width:26px; height:26px;
    flex:none;
    margin:0;
    border:2px solid #B9AC95;
    border-radius:8px;
    background:var(--superficie) center / 16px no-repeat;
    cursor:pointer;
}
.casilla input:checked{
    border-color:var(--mar);
    background-color:var(--mar);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2F38' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.casilla input:focus-visible{ outline:3px solid var(--mar); outline-offset:2px; }

/* ---- Salir sin enviar ---- */
.dialogo--salir{ max-width:580px; }
.dialogo--salir .dialogo__pie{ justify-content:flex-end; }
.dialogo__sello--ojo i{
    background:var(--ambar-suave);
    color:var(--ambar-tinta);
    font:800 21px/1 var(--titulos);
    font-style:normal;
}
.dialogo__sello--ojo span{ color:var(--ambar-tinta); }

/* ---- Pantallas angostas ---- */
@media (max-width:900px){
    /* minmax(0,1fr) y no 1fr: con 1fr la columna no baja del ancho
       mínimo de su contenido, y una ficha con el monto sin partir
       empujaba toda la página por fuera de la pantalla. */
    .paso{ grid-template-columns:minmax(0,1fr); gap:28px; padding-top:36px; }
    /* En una columna: título, proyección, detalle y formulario, en ese orden */
    .paso--resultado{ grid-template-areas:"titulo" "destacado" "detalle" "accion"; row-gap:24px; }
    .resultado__destacado{ align-self:auto; }
    .preguntas{ grid-template-columns:minmax(0,1fr); gap:20px; padding-top:64px; }
    .pregunta summary{ padding:18px 18px; font-size:16px; }
    .pregunta p{ padding:0 18px 18px; font-size:15.5px; }
    .paso__texto, .paso--primero .paso__texto{ max-width:none; font-size:16.5px; }
    .consejo{ margin-top:20px; max-width:none; }
    .contacto{ position:static; }
    .dialogo__cab{ padding:28px 24px 0; }
    .dialogo h2{ font-size:28px; }
    .dialogo__bloques{ grid-template-columns:1fr; padding:20px 24px 0; }
    .dialogo__promesa{ margin:14px 24px 0; }
    .dialogo__letra{ margin:14px 24px 0; }
    .dialogo__pie{ padding:20px 24px; }
    .dialogo__botones{ width:100%; }
    .dialogo__botones .btn-sol{ flex:1; }
    /* Seguir arriba y a lo ancho: es lo que no borra nada */
    .dialogo--salir .dialogo__botones{ flex-direction:column-reverse; align-items:stretch; }
    .dialogo--salir .dialogo__botones .btn-sol{ flex:none; }
    .dialogo--salir .dialogo__botones .btn-atras{ justify-content:center; padding:0 18px; }
    .inicio__accion .btn-sol{ width:100%; }
    .pie{ margin-top:56px; }
}
@media (max-width:600px){
    .progreso{ gap:12px; }
    .panel, .contacto{ padding:20px; border-radius:20px; }
    .opcion{ gap:14px; padding:18px; border-radius:20px; }
    .opcion__letra{ width:38px; height:38px; font-size:15px; }
    .opcion__txt b{ font-size:18px; }
    .opcion__txt small{ font-size:14.5px; }
    .opcion__flecha{ display:none; }
    .eleccion{ grid-template-columns:1fr; }
    .filas-cab{ display:none; }
    .fila{ grid-template-columns:minmax(0,1fr) 36px; grid-template-areas:"desc quitar" "monto monto"; row-gap:8px; }
    .fila .campo-desc{ grid-area:desc; }
    .fila .dinero{ grid-area:monto; }
    .fila .quitar{ grid-area:quitar; }
    .filas .fila + .fila{ padding-top:10px; border-top:1px solid var(--linea-2); }
    .total > strong{ font-size:24px; }
    .queda__valor{ font-size:28px; }
    .editor__rejilla{ grid-template-columns:1fr; }
    /* En un teléfono la ficha pasa a dos renglones: quién y el tipo
       arriba, el valor y la marca de mora debajo. En uno solo, el
       nombre quedaba en una letra. */
    .ficha{ align-items:flex-start; }
    .ficha__abrir{ flex-wrap:wrap; gap:8px 12px; }
    .ficha__ini{ width:36px; height:36px; font-size:13px; }
    .ficha__txt{ flex:1 1 calc(100% - 48px); }
    .ficha__txt b{ white-space:normal; }
    .ficha__monto{ flex-basis:100%; flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px 10px; padding-left:48px; }
    .ficha__monto strong{ font-size:16px; }
    .nav-paso .btn-sol{ padding:0 22px; }
    .dinero--grande .campo{ font-size:22px; height:58px; }
}

/* ---- Impreso: solo el resultado ---- */
@media print{
    .cab, .progreso, .contacto, .pie, .resultado__volver{ display:none !important; }
    body{ background:#fff; color:#000; }
    .paso{ display:block; padding:0; }
}