/* Hogar Protegido · pizarra oscura + naranja de seguridad (solo en el botón de avance), sólido y de trabajador */
:root {
  --tinta: #1E293B;
  --tinta-2: #475569;
  --tinta-3: #64748B;
  --borde: #D5DDE7;
  --fondo: #EDF1F5;
  --marca: #1E293B;
  --marca-osc: #0F172A;
  --marca-suave: #E6EBF2;
  --naranja: #EA580C;
  --naranja-osc: #C2410C;
  --radio: 12px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .06), 0 10px 26px rgba(15, 23, 42, .07);
  --fuente-titulo: "Archivo", "Segoe UI", system-ui, sans-serif;
}
body {
  background:
    linear-gradient(180deg, #E3E9F0 0, transparent 260px),
    var(--fondo);
}

/* Encabezado oscuro */
.encabezado { background: var(--tinta); border-bottom: 3px solid var(--naranja); }
.logo { color: #fff; font-weight: 800; letter-spacing: -.005em; }

/* Títulos */
.paso-titulo { font-weight: 800; letter-spacing: -.02em; }
.portada-titulo { font-size: clamp(1.7rem, 7.2vw, 2.15rem); line-height: 1.08; }

/* Botón principal de avance: naranja de seguridad */
.boton { background: var(--naranja); border-radius: 10px; letter-spacing: .005em; box-shadow: 0 2px 0 var(--naranja-osc), 0 8px 18px rgba(234, 88, 12, .22); }
.boton:hover { background: var(--naranja-osc); }
.boton svg { flex: 0 0 22px; transition: transform .2s; }
.boton:hover svg { transform: translateX(3px); }

/* Progreso */
.barra { height: 5px; background: #D5DDE7; }

/* Portada */
.portada { display: flex; flex-direction: column; gap: 18px; }
.ilus { border-radius: 18px; overflow: hidden; box-shadow: var(--sombra); background: #DCE4EE; aspect-ratio: 320 / 190; animation: sube .5s cubic-bezier(.2,.8,.2,1); }
.ilus svg { width: 100%; height: 100%; }
@keyframes sube { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.hero { display: flex; flex-direction: column; gap: 10px; }
.etiqueta { align-self: flex-start; font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #fff; background: var(--tinta); border-radius: 6px; padding: 5px 10px; }
.chips { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font-size: .8rem; font-weight: 600; color: var(--tinta-2); background: #fff; border: 1px solid var(--borde); border-radius: 999px; padding: 4px 11px; }

.beneficios { list-style: none; margin: 0; padding: 4px 18px; display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.beneficios li { display: flex; gap: 12px; align-items: center; padding: 12px 0; font-size: .97rem; color: var(--tinta-2); line-height: 1.4; }
.beneficios li + li { border-top: 1px solid #E8EDF3; }
.beneficios b { color: var(--tinta); }
.b-ic { flex: 0 0 38px; height: 38px; border-radius: 10px; background: var(--marca-suave); color: var(--tinta); display: grid; place-items: center; }
.b-ic svg { width: 21px; height: 21px; }
.portada .confianza { margin-top: 0; justify-content: center; }

/* Opciones */
.opcion { border-radius: 10px; }
.opcion:hover { border-color: #94A3B8; }
.opcion[aria-pressed="true"] { border-color: var(--tinta); background: #fff; box-shadow: 0 0 0 1px var(--tinta); }
.opcion small { margin-top: 2px; }
.opcion-oficio::before { display: none; }
.opcion-oficio { padding: 12px 14px; gap: 14px; }
.of-ic { flex: 0 0 42px; height: 42px; border-radius: 10px; background: var(--marca-suave); color: var(--tinta); display: grid; place-items: center; transition: background .15s, color .15s; }
.of-txt { flex: 1; }
.opcion-oficio::after { content: ""; flex: 0 0 22px; height: 22px; border-radius: 50%; border: 2px solid #B8C2D0; transition: all .15s; }
.opcion-oficio[aria-pressed="true"] .of-ic { background: var(--tinta); color: #fff; }
.opcion-oficio[aria-pressed="true"]::after { border-color: var(--tinta); background: var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat center; }

/* Buscando */
.buscando-ic { width: 76px; height: 76px; border-radius: 20px; background: var(--tinta); color: #fff; display: grid; place-items: center; position: relative; }
.buscando-ic::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--naranja); border-right-color: var(--naranja); animation: gira 1s linear infinite; }
.cargando .paso-titulo { font-size: clamp(1.35rem, 5.6vw, 1.7rem); max-width: 420px; }

/* Calificas */
.exito-icono { width: 60px; height: 60px; border-radius: 50%; background: var(--llamar); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 8px color-mix(in srgb, var(--llamar) 14%, transparent); animation: pop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.exito { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-top: 6px; }
.especialista { display: flex; flex-direction: column; gap: 14px; border-top: 4px solid var(--tinta); }
.esp-cab { display: flex; gap: 12px; align-items: center; }
.esp-cab > div { display: flex; flex-direction: column; gap: 3px; }
.esp-cab b { font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.08rem; line-height: 1.25; letter-spacing: -.01em; }
.esp-avatar { width: 52px; height: 52px; border-radius: 14px; background: var(--tinta); color: #fff; display: grid; place-items: center; flex: 0 0 52px; }
.esp-texto { color: var(--tinta-2); font-size: .97rem; }
.entre-turnos { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: .93rem; color: var(--tinta); background: var(--marca-suave); border-radius: 8px; padding: 10px 12px; }
.entre-turnos svg { flex: 0 0 18px; color: var(--tinta-2); }
.mini-titulo { font-size: 1.05rem; margin-bottom: 14px; }
.pasos-llamada li::before { background: var(--tinta); color: #fff; border-radius: 8px; }
.tener-mano { margin-top: 14px; font-size: .88rem; color: var(--tinta-3); border-top: 1px dashed var(--borde); padding-top: 12px; }

/* Salida */
.salida-icono { background: var(--marca-suave); color: var(--tinta); }

/* Pie */
.pie { background: #F7F9FB; }

@media (min-width: 700px) {
  main { padding-top: 34px; }
}

/* Encabezado oscuro: logo y asesores en claro */
.logo-txt b { color: #fff; }
.logo-txt small { color: #FB8A4C; }
.logo-marca { box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.sello { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.sello-ic { background: rgba(255,255,255,.95); }
.sello-ic::after { border-color: var(--tinta); }
.sello-txt b { color: #fff; }
.sello-txt small { color: #CBD5E1; }

/* Portada con foto real */
.ilus.con-foto { position: relative; aspect-ratio: 3 / 2; background: #CBD5E1; }
.ilus.con-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.ilus.con-foto::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(180deg, transparent, rgba(15, 23, 42, .28)); pointer-events: none; }
.foto-sello { position: absolute; top: 12px; left: 12px; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.94); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(15,23,42,.18); z-index: 1; }
.foto-sello svg { width: 22px; height: 26px; }

/* Foto: vista previa difuminada de fondo mientras carga la real */
.ilus.con-foto { background-size: cover; background-position: center 30%; }
.ilus.con-foto img { position: relative; }