/* Estilos de la web de mejorar el CV · Etapa A
   PALETA Y TIPOGRAFÍAS: se cambian SOLO aquí. Paleta azul del rediseño del 11-nov (tercera tanda), pendiente del OK de Jonathan.
   Aire de la guía: titular serif con peso, texto sans redonda, tinta de color en vez de negro, mucho blanco, iconos con círculo. */
:root {
  --fuente-titulares: "Fraunces", Georgia, "Times New Roman", serif;
  --fuente-texto: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --marca: #1b4be4;            /* azul de marca: hero, franjas, enlaces y detalles */
  --marca-fuerte: #1238b8;     /* azul de marca al pasar y en degradados */
  --marino: #0b1a4a;           /* pie y fondos muy oscuros */
  --tinta: #0f1f4d;            /* texto principal (marino, no negro) */
  --tinta-suave: #4b5980;      /* texto secundario */
  --oscuro: var(--marca);      /* nombre antiguo: fondo del hero y piezas de color */
  --principal: #ffc928;        /* botón principal (amarillo sol: lo que más destaca sobre el azul) */
  --principal-fuerte: #ffb700; /* botón principal al pasar */
  --sobre-principal: #0b1a4a;  /* texto encima del botón principal */
  --acento: #ffd766;           /* palabra del titular sobre azul y detalles cálidos */
  --crema: #f2f6fe;            /* fondo alterno (azul muy claro) */
  --blanco: #ffffff;
  --borde: #d9e2f5;
  --circulo-1: #ffe9a8;        /* círculos de los iconos */
  --circulo-2: #cfdfff;
  --circulo-3: #c8f1e3;
  --bien: #12805a;
  --falta: #c2362b;
  /* ventana del chat de soporte (web/chat.js, Etapa C) */
  --chat-oscuro: var(--marino); --chat-acento: var(--principal); --chat-fondo: var(--blanco); --chat-borde: var(--borde); --chat-fuente: var(--fuente-texto);
  --radio: 8px;
  --radio-grande: 16px;
  --curva: 56px;               /* la curva grande del hero, la franja, la banda y el pie */
  --ancho: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--fuente-texto); font-size: 16px; line-height: 1.5; color: var(--tinta); background: var(--blanco); overflow-wrap: break-word; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
h1, h2, h3 { font-family: var(--fuente-titulares); font-weight: 700; margin: 0 0 12px; line-height: 1.18; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: 34px; } h2 { font-size: 26px; } h3 { font-size: 19px; }
p { margin: 0 0 12px; } ul, ol { margin: 0 0 12px; padding-left: 20px; }
a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
img, svg { max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }
.hero :focus-visible, .banda :focus-visible, .pie :focus-visible { outline-color: #fff; }
h1:focus { outline: none; }
.oculto { display: none !important; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.estrecho { max-width: 720px; }
.suave { color: var(--tinta-suave); }
.pequeno { font-size: 14px; }
.centro { text-align: center; }

/* Cabecera: logo y, como mucho, un enlace de texto. Sin botón de acción. */
.cabecera { background: var(--blanco); border-bottom: 1px solid var(--borde); }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--fuente-titulares); font-weight: 700; font-size: 20px; color: var(--tinta); min-height: 32px; }
.logo svg { width: 32px; height: 32px; flex: none; }
.cabecera nav a { font-size: 15px; text-decoration: none; padding: 8px 0; }
.cabecera nav a:hover { text-decoration: underline; }

/* Botones: norma de la casa (56 px de alto, radio 8, 18 px/600, 48 px de relleno lateral) */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 48px; border: 0; border-radius: var(--radio); background: var(--principal); color: var(--sobre-principal); font-size: 18px; font-weight: 800; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer; transition: background .15s; }
.boton:hover { background: var(--principal-fuerte); }
.boton[disabled] { opacity: .55; cursor: default; }
.boton.secundario { background: var(--blanco); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
.boton.secundario:hover { background: var(--crema); }
.boton.menor { min-height: 44px; padding: 0 20px; font-size: 16px; }
.boton.ancho { width: 100%; }
/* Botón principal de la landing: un halo late por detrás para que se vea más (orden de Jonathan, 11-nov). Se para al pasar el ratón y con «reducir movimiento». */
.boton.late { position: relative; isolation: isolate; }
.boton.late::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--principal); z-index: -1; animation: late 1.8s ease-out infinite; pointer-events: none; }
@keyframes late { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.06, 1.35); opacity: 0; } }
.boton.late:hover::before, .boton.late[disabled]::before { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .boton.late::before { animation: none; opacity: 0; } }
.enlace-boton { background: none; border: 0; padding: 8px 0; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: inherit; }
@media (max-width: 560px) { .boton:not(.menor) { width: 100%; padding: 0 20px; } }

/* Hero: bloque azul a todo el ancho con la curva grande abajo a la izquierda. Debajo, la franja blanca vuelve a entrar con curva por la derecha. */
.hero { position: relative; background: var(--marca); background-image: radial-gradient(120% 90% at 85% 0%, #2f62ff 0%, rgba(47, 98, 255, 0) 60%); color: #fff; padding: 28px 0 40px; border-radius: 0 0 0 var(--curva); overflow: hidden; }
.hero h1 { color: #fff; font-size: 38px; line-height: 1.08; margin-bottom: 12px; } .hero h1 em { font-style: normal; color: var(--acento); }
.hero .entrada { font-size: 17px; line-height: 1.45; color: #e4ebff; max-width: 540px; margin-bottom: 20px; text-wrap: balance; }
.hero .rejilla-hero { display: grid; gap: 28px; align-items: center; }
.hero a { color: #fff; } .hero a.boton { color: var(--sobre-principal); }
.caja-accion { position: relative; border: 2px dashed rgba(255, 255, 255, .5); border-radius: var(--radio-grande); background: rgba(255, 255, 255, .09); padding: 18px; display: grid; gap: 12px; transition: background .15s, border-color .15s; }
.caja-accion.encima { background: rgba(255, 255, 255, .2); border-color: #fff; }
.caja-accion h2 { font-size: 21px; color: #fff; margin: 0; } .caja-accion p { margin: 0; } .caja-accion .suave { color: #e4ebff; }
.caja-accion form { display: grid; gap: 12px; } .caja-accion .campo { margin: 0; }
.caja-accion .campo input { color: var(--tinta); border-color: transparent; }
.bajo-boton { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 700; color: #fff; }
.bajo-boton::before { content: ""; flex: none; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.2 3.2L13 5' fill='none' stroke='%23ffd766' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.nota-accion { font-size: 14px; color: #e4ebff; text-align: center; }
.subida { position: relative; display: block; text-align: center; font-size: 15px; line-height: 1.4; color: #e4ebff; cursor: pointer; padding: 2px 0; }
.subida strong { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.caja-accion .subida small { display: inline-block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, .7); } /* «PDF o DOCX · hasta 5 MB», en pequeño (11-nov) */
.subida input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; }
.subida:focus-within { outline: 3px solid #fff; outline-offset: 2px; border-radius: 4px; }
.caja-accion .error { color: #fff; background: var(--falta); border-radius: var(--radio); padding: 8px 12px; margin: 0; text-align: center; }
.error { color: var(--falta); font-weight: 700; font-size: 15px; margin: 10px 0 0; }
.archivo-elegido { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--crema); font-weight: 700; margin-bottom: 4px; }
.archivo-elegido span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-dibujo { max-width: 400px; width: 100%; margin: 0 auto -6px; }
.hero-dibujo svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero-dibujo text, .dibujo-paso text { font-family: var(--fuente-texto); }
/* Zona de subida de las pantallas del recorrido (fondo claro) */
.flujo .subida { border: 2px dashed #a9bbe6; border-radius: var(--radio-grande); padding: 22px 16px; background: #f6f9ff; color: var(--tinta-suave); transition: background .15s, border-color .15s; }
.flujo .subida:hover, .flujo .subida.encima { background: #e8f0ff; border-color: var(--marca); }
.flujo .subida svg { width: 44px; height: 44px; }
.flujo .subida strong { display: block; font-size: 17px; margin: 6px 0 2px; color: var(--tinta); text-decoration: none; }
.flujo .subida:focus-within { outline-color: var(--marca); border-radius: var(--radio-grande); }
.flujo .subida + .boton { margin-top: 14px; }

/* Prueba social. En el hero: estrellas y una línea bajo el botón. Bajo el hero: franja blanca de logos con la curva a la derecha.
   Con datos reales (aprobadas.json) se pinta lo real; sin ellos, la muestra de temporal.json, en gris para que se vea que es de muestra. */
.prueba-linea { min-height: 24px; margin-top: 16px; }
.prueba-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 15px; margin: 0; }
.hero .prueba-resumen { color: #fff; }
.estrellas { display: inline-flex; gap: 3px; } .estrellas svg { width: 20px; height: 20px; fill: var(--principal); }
.de-muestra .estrellas svg { fill: rgba(255, 255, 255, .45); } .de-muestra { color: #e4ebff; }
.franja-fondo { background: var(--marca); }
.franja { background: var(--blanco); border-radius: 0 var(--curva) 0 0; min-height: var(--curva); padding: 22px 0 6px; }
.franja .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.franja-titulo { font-weight: 700; font-size: 15px; margin: 0; flex-basis: 100%; text-align: center; }
.franja ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; }
.franja img { display: block; height: 28px; width: auto; }
.hueco-logo { display: grid; place-items: center; width: 92px; height: 34px; border: 1.5px dashed #b9c5e8; border-radius: 6px; color: #8a97bd; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.resenas { display: grid; gap: 16px; margin-top: 8px; }
.resena { margin: 0; } .resena blockquote { margin: 0 0 8px; } .resena figcaption { font-size: 14px; color: var(--tinta-suave); }

/* Bloques de contenido: mucho aire, titulares centrados con una palabra en azul, iconos con círculo de color */
.bloque { padding: 48px 0; }
.bloque.crema { background: var(--crema); }
.bloque > .contenedor > h2 { margin-bottom: 28px; text-align: center; }
h2 em { font-style: normal; color: var(--marca); }
.rejilla { display: grid; gap: 16px; }
.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 22px; }
.tarjeta p:last-child { margin-bottom: 0; }
a.tarjeta { text-decoration: none; font-weight: 400; display: block; transition: border-color .15s, transform .15s; }
a.tarjeta:hover { border-color: var(--marca); transform: translateY(-2px); }
.icono { position: relative; width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 12px; }
.icono::before { content: ""; position: absolute; right: -2px; bottom: -2px; width: 38px; height: 38px; border-radius: 50%; background: var(--circulo-1); }
.icono svg { position: relative; width: 36px; height: 36px; stroke: var(--tinta); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rejilla > :nth-child(3n+2) .icono::before { background: var(--circulo-2); } .rejilla > :nth-child(3n) .icono::before { background: var(--circulo-3); }
/* Las seis herramientas: icono, nombre y una línea; sin caja */
.herramientas { gap: 28px 32px; }
.herramienta { display: block; text-decoration: none; font-weight: 400; }
.herramienta h3 { margin-bottom: 6px; } .herramienta h3::after { content: " →"; color: var(--marca); white-space: nowrap; }
.herramienta:hover h3 { text-decoration: underline; text-underline-offset: 4px; } .herramienta p { margin: 0; color: var(--tinta-suave); }
/* Qué revisamos: tres tarjetas con lista de comprobaciones */
.tarjeta.grupo { text-align: center; padding: 26px 22px; border-color: transparent; box-shadow: 0 6px 24px rgba(15, 31, 77, .07); }
.tarjeta.grupo .icono { margin: 0 auto 10px; }
.comprobaciones { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; text-align: left; font-weight: 700; }
.comprobaciones li { display: flex; gap: 10px; align-items: flex-start; }
.comprobaciones li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--bien) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3 6-6.2' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; }
/* Pasos: con dibujo (portada y ATS) o con número (el resto) */
.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.pasos li { counter-increment: paso; position: relative; padding-left: 56px; min-height: 40px; }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--marca); color: #fff; display: grid; place-items: center; font-family: var(--fuente-titulares); font-weight: 700; font-size: 18px; }
.pasos h3 { margin-bottom: 4px; } .pasos p { margin: 0; color: var(--tinta-suave); text-wrap: balance; }
.pasos.dibujados { gap: 32px; }
.pasos.dibujados li { padding: 0; text-align: center; max-width: 340px; margin: 0 auto; }
.pasos.dibujados li::before { position: static; margin: 0 auto 8px; width: 32px; height: 32px; font-size: 16px; background: var(--circulo-1); color: var(--tinta); }
.pasos.dibujados li:nth-child(2)::before { background: var(--circulo-2); } .pasos.dibujados li:nth-child(3)::before { background: var(--circulo-3); }
.dibujo-paso { display: block; width: 220px; max-width: 100%; height: auto; margin: 0 auto 10px; overflow: visible; }
.tras-pasos { display: flex; justify-content: center; margin-top: 32px; }
/* Preguntas: cada una en su tarjeta redondeada (11-nov) */
.faq { display: grid; gap: 12px; }
.faq details { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-grande); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; font-weight: 700; font-size: 18px; line-height: 1.35; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 28px; line-height: 1; font-weight: 400; color: var(--marca); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--tinta-suave); margin: -6px 0 0; padding: 0 22px 20px; }
/* Banda de cierre: píldora azul con el mismo botón del hero */
.banda { margin: 8px auto 48px; }
.banda .dentro { background: var(--marca); color: #fff; border-radius: var(--curva); padding: 32px 22px; display: grid; gap: 18px; justify-items: center; text-align: center; }
.banda h2 { color: #fff; margin: 0; } .banda h2 em { color: var(--acento); }

/* Pie */
.pie { background: var(--marino); color: #e4ebff; border-radius: var(--curva) 0 0 0; padding: 44px 0 28px; font-size: 15px; margin-top: 0; }
.pie a { font-weight: 400; text-decoration: none; } .pie a:hover { text-decoration: underline; }
.pie .columnas { display: grid; gap: 28px 24px; grid-template-columns: 1fr 1fr; }
.pie .columnas > :first-child { grid-column: 1 / -1; }
.pie .variantes { margin: 14px 0 0; font-size: 14px; color: #b9c5e8; } .pie .variantes a { color: #fff; font-weight: 700; }
.pie h2 { font-family: var(--fuente-texto); font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); margin-bottom: 16px; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pie .empresa { border-top: 1px solid rgba(255, 255, 255, .18); margin-top: 28px; padding-top: 18px; font-size: 13px; color: #b9c5e8; }

/* Recorrido: una pantalla por paso */
.flujo { padding: 28px 0 56px; }
.flujo .contenedor { max-width: 680px; }
.flujo.ancho .contenedor { max-width: 920px; }
.flujo h1 { font-size: 28px; }
.atras { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 6px 0; margin-bottom: 14px; font-weight: 700; cursor: pointer; color: var(--tinta-suave); }
.paso-de { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 8px; }
.progreso { height: 6px; border-radius: 3px; background: var(--borde); overflow: hidden; margin-bottom: 22px; }
.progreso i { display: block; height: 100%; background: var(--marca); border-radius: 3px; transition: width .3s; }
.campo { display: block; margin-bottom: 18px; }
.campo > span, .campo > legend { display: block; font-weight: 700; margin-bottom: 6px; padding: 0; }
.campo small { font-weight: 400; color: var(--tinta-suave); }
.campo input[type=text], .campo input[type=email], .campo textarea, .campo select { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid #aab6d6; border-radius: var(--radio); background: #fff; font-size: 16px; }
.campo textarea { min-height: 150px; resize: vertical; line-height: 1.45; }
.campo input:focus, .campo textarea:focus { border-color: var(--tinta); outline: 3px solid var(--circulo-2); }
fieldset.campo { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.contador { font-size: 13px; color: var(--tinta-suave); margin-top: 4px; }
.opciones { display: grid; gap: 10px; }
.opcion { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 16px; border: 1.5px solid #aab6d6; border-radius: var(--radio); background: #fff; font-size: 17px; font-weight: 600; text-align: left; cursor: pointer; }
.opcion small { display: block; font-weight: 400; font-size: 14px; color: var(--tinta-suave); }
.opcion:hover { border-color: var(--tinta); background: #f6f9ff; }
.opcion[aria-pressed=true], .opcion.elegida { border-color: var(--tinta); background: var(--circulo-2); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }

/* Análisis en vivo */
.analisis { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.analisis li { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--tinta-suave); }
.analisis li::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--borde); }
.analisis li.ahora { color: var(--tinta); font-weight: 700; }
.analisis li.ahora::before { border-color: var(--circulo-2); border-top-color: var(--marca); animation: gira .8s linear infinite; }
.analisis li.hecho { color: var(--tinta); }
.analisis li.hecho::before { border-color: var(--bien); background: var(--bien) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M7.5 13.5l3.6 3.6 7.4-7.6' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .analisis li.ahora::before { animation: none; } html { scroll-behavior: auto; } }

/* Resultado y avance */
.nota { display: flex; align-items: center; gap: 18px; padding: 20px; border-radius: var(--radio-grande); background: var(--crema); margin-bottom: 22px; }
.anillo { --v: 0; flex: none; width: 104px; height: 104px; border-radius: 50%; background: conic-gradient(var(--marca) calc(var(--v) * 1%), #d9e2f5 0); display: grid; place-items: center; }
.anillo b { width: 80px; height: 80px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-family: var(--fuente-titulares); font-size: 30px; line-height: 1; }
.anillo b small { display: block; font-family: var(--fuente-texto); font-size: 12px; font-weight: 400; color: var(--tinta-suave); text-align: center; }
.nota h2 { font-size: 20px; margin-bottom: 4px; } .nota p { margin: 0; }
.filas { list-style: none; padding: 0; margin: 0 0 22px; border: 1px solid var(--borde); border-radius: var(--radio-grande); overflow: hidden; }
.filas li { padding: 14px 16px; border-bottom: 1px solid var(--borde); background: #fff; }
.filas li:last-child { border-bottom: 0; }
.filas .linea { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-weight: 700; }
.filas .linea span:last-child:not(:first-child) { flex: none; font-variant-numeric: tabular-nums; } /* solo la cifra de la derecha; si hay un solo texto, que parta línea */
.filas p { margin: 4px 0 0; color: var(--tinta-suave); font-size: 15px; }
.barra { height: 6px; border-radius: 3px; background: var(--borde); margin-top: 8px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--marca); border-radius: 3px; }
.etiqueta { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--circulo-2); margin-bottom: 6px; }
.etiqueta.essential, .etiqueta.high, .etiqueta.gap { background: #fbdcd8; color: #8a1f16; }
.etiqueta.important { background: var(--circulo-1); color: #6a4300; }
.etiqueta.met { background: var(--circulo-3); color: #0d5234; }
.filas li.cerrada { display: flex; align-items: center; gap: 10px; color: var(--tinta-suave); background: var(--crema); }
.candado { flex: none; width: 18px; height: 18px; }
.recuentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.recuentos div { border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 8px; text-align: center; font-size: 14px; color: var(--tinta-suave); }
.recuentos b { display: block; font-family: var(--fuente-titulares); font-size: 26px; color: var(--tinta); line-height: 1.1; }
.papel { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px 20px; margin-bottom: 22px; box-shadow: 0 4px 16px rgba(15, 31, 77, .08); }
.papel h2 { font-size: 22px; margin-bottom: 2px; } .papel h3 { font-family: var(--fuente-texto); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 18px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--borde); }
.papel .puesto { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-weight: 700; margin-top: 10px; }
.papel .puesto span { font-weight: 400; color: var(--tinta-suave); }
.papel .cerrado { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-top: 10px; border-radius: var(--radio); background: var(--crema); color: var(--tinta-suave); font-size: 15px; }
.radar { display: block; width: 100%; max-width: 320px; margin: 0 auto 16px; }
.descargas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.aviso { padding: 14px 16px; border-radius: var(--radio); background: var(--circulo-2); margin-bottom: 18px; }
.aviso.bien { background: var(--circulo-3); }

/* Test de carrera */
.actividad { font-family: var(--fuente-titulares); font-size: 24px; font-weight: 700; margin: 6px 0 22px; min-height: 2.4em; }

/* Entrevista */
.chat { display: grid; gap: 12px; margin-bottom: 18px; }
.burbuja { max-width: 88%; padding: 12px 14px; border-radius: 14px; background: var(--crema); }
.burbuja.yo { justify-self: end; background: var(--marino); color: #fff; }
.burbuja .quien { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 2px; }

/* Pago */
.resumen-pago { border: 1px solid var(--borde); border-radius: var(--radio-grande); overflow: hidden; margin-bottom: 20px; }
.resumen-pago div { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.resumen-pago div + div { border-top: 1px solid var(--borde); background: var(--crema); font-weight: 800; font-size: 18px; }
#pago-stripe { min-height: 8px; margin-bottom: 16px; }
.legal-pago { font-size: 13px; line-height: 1.5; color: var(--tinta-suave); margin-top: 14px; }
.legal-pago a { font-weight: 700; }

/* Documentos (legales, precios, garantía) */
.documento { padding: 32px 0 56px; }
.documento h2 { font-size: 22px; margin-top: 30px; }
.documento h3 { margin-top: 20px; }
.documento li { margin-bottom: 6px; }
.documento .fecha { color: var(--tinta-suave); font-size: 14px; }
.tabla { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.tabla th, .tabla td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla td:last-child, .tabla th:last-child { text-align: right; white-space: nowrap; font-weight: 700; }
.tabla th .sub { display: block; font-weight: 400; font-size: 14px; color: var(--tinta-suave); }
.tabla-ancha { overflow-x: auto; }
.cuenta-lista { list-style: none; padding: 0; display: grid; gap: 12px; }
.cuenta-lista li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.cuenta-lista li span span { display: block; font-size: 14px; color: var(--tinta-suave); }
.trampa { position: absolute; left: -9999px; }


/* ---------- 12-nov: todas las páginas con el sistema aprobado ---------- */
/* Caja del hero en el test (botón + nota) y en la entrevista (puesto + botón) */
.nota-caja { margin: 0; text-align: center; font-size: 15px; font-weight: 700; color: #e4ebff; }
.caja-accion.puesto .campo > span { color: #fff; font-size: 15px; }
.caja-accion.puesto .campo input { min-height: 56px; }
/* Páginas interiores (precios, garantía, contacto, cuenta, baja, legales, quiénes somos): cabecera azul corta con la curva del hero */
.cabeza-pagina { background: var(--marca); background-image: radial-gradient(120% 120% at 90% 0%, #2f62ff 0%, rgba(47, 98, 255, 0) 60%); color: #fff; padding: 34px 0 46px; border-radius: 0 0 0 var(--curva); }
.cabeza-pagina h1 { color: #fff; margin: 0; font-size: 34px; line-height: 1.1; } .cabeza-pagina h1 em { font-style: normal; color: var(--acento); }
.cabeza-pagina .entrada { margin: 12px 0 0; font-size: 17px; color: #e4ebff; text-wrap: balance; }
.cabeza-pagina .fecha { margin: 12px 0 0; font-size: 14px; color: #c7d4ff; }
.interior .documento { padding: 36px 0 64px; }
.interior .documento .contenedor > h2:first-child { margin-top: 0; }
.documento h2 { position: relative; }
.hoja-doc { padding: 24px 20px; border-color: transparent; box-shadow: 0 6px 24px rgba(15, 31, 77, .08); margin-top: -64px; position: relative; }
.hoja-doc .tarjeta { background: var(--crema); border-color: transparent; }
.hoja-doc .acciones { margin-top: 8px; }
.documento .tabla-ancha { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 4px 16px; margin: 18px 0 8px; }
.documento .tabla tr:last-child th, .documento .tabla tr:last-child td { border-bottom: 0; }
.documento ul li::marker { color: var(--marca); }
.texto-largo p { font-size: 18px; line-height: 1.6; }
.texto-largo h2 { text-align: left !important; }
.tarjeta.grupo p { text-align: center; }
/* Recorrido, pago y resultado: fondo azul muy claro y cada paso en una tarjeta blanca */
.en-flujo, html:has(body.en-flujo) { background: var(--crema); }
.en-flujo .cabecera { background: #fff; }
.hoja-flujo { background: #fff; border-radius: var(--radio-grande); box-shadow: 0 6px 24px rgba(15, 31, 77, .08); padding: 24px 18px 28px; }
.hoja-flujo > :last-child, #pantalla > :last-child { margin-bottom: 0; }
.hoja-flujo .atras { margin-top: -6px; }
.en-flujo .flujo { padding-top: 20px; }
.en-flujo .flujo h1 { font-size: 27px; }
.en-flujo .nota { background: var(--crema); }
.en-flujo .resumen-pago div + div { background: var(--crema); }
/* Opciones del test y de la carta: círculo a la izquierda que se rellena al elegir */
.opcion::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #aab6d6; background: #fff; }
.opcion[aria-pressed=true]::before, .opcion.elegida::before { border-color: var(--marca); background: var(--marca) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.4l3 3 6-6.2' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; }
.opcion[aria-pressed=true], .opcion.elegida { border-color: var(--marca); background: #eef3ff; }
.paso-de { color: var(--marca); }
@media (min-width: 600px) {
  .cabeza-pagina { padding: 48px 0 64px; } .cabeza-pagina h1 { font-size: 42px; }
  .hoja-flujo { padding: 32px 36px 36px; }
  .hoja-doc { padding: 32px 36px; margin-top: -76px; }
  .caja-accion.puesto form { grid-template-columns: 1fr auto; align-items: end; column-gap: 12px; }
  .caja-accion.puesto form .campo { display: contents; } .caja-accion.puesto form .campo > span { grid-column: 1 / -1; margin-bottom: -4px; }
  .caja-accion.puesto form .error { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .cabeza-pagina { padding: 64px 0 88px; } .cabeza-pagina h1 { font-size: 52px; } .cabeza-pagina .entrada { font-size: 19px; }
  .interior .documento { padding: 48px 0 88px; }
  .hoja-doc { margin-top: -96px; padding: 40px 48px; }
  .caja-accion.empezar { grid-template-columns: auto 1fr; align-items: center; column-gap: 24px; padding: 24px; }
  .caja-accion.empezar .nota-caja { text-align: left; font-size: 16px; }
  .caja-accion.carta { grid-template-columns: auto 1fr; align-items: center; column-gap: 24px; padding: 24px; }
  .caja-accion.carta .boton { grid-row: 1; grid-column: 1; } .caja-accion.carta .subida { grid-row: 1; grid-column: 2; font-size: 16px; }
  .caja-accion.carta .error, .caja-accion.carta .nota-accion { grid-column: 1 / -1; }
  .caja-accion.puesto { padding: 24px; }
  .en-flujo .flujo { padding: 36px 0 88px; }
  .hoja-flujo { padding: 40px 48px 44px; }
  .en-flujo .flujo h1 { font-size: 34px; }
}

/* Móvil estrecho */
@media (max-width: 359px) { .hero h1 { font-size: 33px; } .contenedor { padding: 0 16px; } .caja-accion { padding: 14px; } .hueco-logo { width: 78px; } }
/* Tableta */
@media (min-width: 600px) {
  :root { --curva: 88px; }
  .hero h1 { font-size: 46px; } .hero { padding: 44px 0 56px; }
  .hero-texto { max-width: 600px; }
  .caja-accion { padding: 22px; }
  .rejilla.tres, .rejilla.dos { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .herramientas.rejilla { gap: 36px 40px; }
  .banda .dentro { padding: 40px 32px; }
}
/* Ordenador */
@media (min-width: 900px) {
  :root { --curva: 130px; }
  h1 { font-size: 46px; } h2 { font-size: 34px; } h3 { font-size: 21px; }
  .cabecera .contenedor { height: 72px; }
  .hero { padding: 64px 0 84px; }
  .hero h1 { font-size: 58px; margin-bottom: 18px; }
  .hero .rejilla-hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; }
  .hero .entrada { font-size: 19px; margin-bottom: 28px; }
  .hero-dibujo { max-width: 520px; margin: 0 0 0 auto; }
  .caja-accion.subir { grid-template-columns: auto 1fr; align-items: center; column-gap: 24px; padding: 24px; }
  .caja-accion.subir .boton { grid-row: 1; grid-column: 1; }
  .caja-accion.subir .subida { grid-row: 1; grid-column: 2; font-size: 16px; } /* sin línea bajo el botón (11-nov): botón y texto en la misma fila, centrados */
  .caja-accion.subir .error, .caja-accion.subir .nota-accion { grid-column: 1 / -1; }
  .prueba-linea { margin-top: 22px; }
  .franja { padding: 34px 0 10px; }
  .franja .contenedor { gap: 16px 44px; } .franja-titulo { flex-basis: auto; } .franja ul { gap: 14px 30px; }
  .hueco-logo { width: 116px; height: 40px; }
  .bloque { padding: 84px 0; }
  .bloque > .contenedor > h2 { margin-bottom: 44px; }
  .rejilla.tres { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .rejilla.dos { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .herramientas.rejilla { gap: 48px 56px; }
  .pasos { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .pasos li { padding-left: 0; padding-top: 54px; }
  .pasos.dibujados { gap: 40px; } .pasos.dibujados li { padding-top: 0; }
  .dibujo-paso { width: 290px; margin-bottom: 16px; }
  .tras-pasos { margin-top: 44px; }
  .banda { margin-bottom: 84px; }
  .banda .dentro { grid-template-columns: 1fr auto; text-align: left; justify-items: start; align-items: center; padding: 44px 72px; border-radius: 999px; }
  .pie .columnas { grid-template-columns: 1.5fr 1fr 1fr 1fr; } .pie .columnas > :first-child { grid-column: auto; }
  .flujo { padding: 44px 0 80px; } .flujo h1 { font-size: 36px; }
  .resenas { grid-template-columns: repeat(3, 1fr); }
  .papel { padding: 36px 40px; }
  .actividad { font-size: 30px; }
  .dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
}
@media (min-width: 1500px) { :root { --curva: 160px; } }