/* Estilos de la pagina de captacion. No comparte nada con quiz.css a proposito:
   son dos sitios distintos y un cambio de estilo del test no debe arrastrar a la
   landing. Lo que si se repite son los colores de marca, para que quien entre
   desde aqui reconozca la aplicacion. */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Paleta de Estudivia. Fuente de verdad:
       marca/estudivia-marcom/marcom-visual-estudivia.md

       El reparto no es decorativo, viene de la guia: turquesa es ACCION (botones,
       enlaces, progreso), azul tinta es MARCA (titulares y navegacion), menta es
       APOYO y aciertos, coral es REVISION y fallos. */
    --tinta: #172554;
    --brand: #0f766e;
    --brand-dark: #0a5c55;
    --brand-soft: #d1fae5;

    --primary: #0f766e;
    --primary-dark: #0a5c55;
    --success: #0f766e;

    /* Coral, no rojo: la guia pide que el fallo comunique "un punto de revision,
       no un castigo". Por eso tampoco se usa para fondos grandes. */
    --danger: #c2415d;
    --danger-dark: #9d2f48;

    /* Ambar, solo como FONDO con texto grafito encima. Sobre fondo claro da 2.05
       de contraste y falla incluso el minimo de interfaz (3.0), asi que nunca se
       usa para texto ni para iconos finos. */
    --accent: #f59e0b;

    --ink: #1f2937;
    --ink-soft: #4b5563;
    --line: #e2e8f0;
    --surface: #ffffff;
    --surface-alt: #f8fafc;

    /* Ancho de lectura. El texto no debe pasar de aqui aunque la pantalla sea
       enorme: lineas de 200 caracteres no se leen. */
    --measure: 760px;
    --wide: 1120px;

    --radius: 12px;
    --focus-ring: 3px solid rgba(15, 118, 110, 0.45);
}

body {
    /* La guia pide Source Sans 3 para el cuerpo y Manrope para titulares. Se
       nombran primero para que entren en cuanto existan los woff2, y detras va la
       pila del sistema: hoy no se descarga ninguna fuente.

       PENDIENTE: autoalojar los woff2 en landing/fonts/ con solo los pesos que se
       usen. A proposito NO se tiran de un CDN de terceros: esta pagina no hace hoy
       ninguna peticion externa y el publico es espanol, asi que meter Google Fonts
       anadiria un tercero y una conversacion de consentimiento por puro tipo de
       letra. */
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--ink);
    background: var(--surface);
    line-height: 1.6;
    /* Sin esto, un titular largo en movil desborda a lo ancho. */
    overflow-wrap: break-word;
}

/* Enlace de salto: invisible hasta que se tabula. Sin el, quien navega con
   teclado tiene que pasar por la cabecera en cada carga. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 18px;
    background: var(--surface);
    color: var(--primary);
    font-weight: 600;
}

.skip-link:focus {
    left: 12px;
    top: 12px;
    outline: var(--focus-ring);
}

/* El foco se ve en todo lo enfocable; el navegador lo quitaria en los que
   llevan fondo propio. */
a:focus-visible,
summary:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- Cabecera ------------------------------------------------------------- */

.site-header {
    max-width: var(--wide);
    margin: 0 auto;
    padding: 22px 24px 0;
}

/* Titulares, navegacion y botones en Manrope, segun la guia. Mientras no esten
   los woff2, cae a la pila del sistema sin que se note mas que en el detalle. */
.brand,
h1,
h2,
h3,
.btn {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    /* Azul tinta, que es el color de marca; el turquesa queda para la accion. */
    color: var(--tinta);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* El wordmark va en minusculas a proposito: lo pide la guia. */
.brand-name {
    text-transform: lowercase;
    font-size: 1.25rem;
}

.brand-tagline {
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.8rem;
}

.brand-mark {
    flex-shrink: 0;
    align-self: center;
}

h1,
h2 {
    color: var(--tinta);
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 48px 24px 56px;
    text-align: center;
}

.eyebrow {
    color: var(--brand);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

h1 {
    /* clamp en vez de un tamano por media query: escala con la pantalla sin
       saltos y no hay que mantener dos numeros. El minimo es bajo a proposito:
       el titular es largo y con 1.9rem ocupaba toda la pantalla del movil,
       dejando el boton por debajo del pliegue. */
    font-size: clamp(1.6rem, 4.6vw, 2.9rem);
    line-height: 1.22;
    letter-spacing: -0.02em;
    margin-bottom: 22px;
}

.hero-lead {
    max-width: 620px;
    margin: 0 auto 26px;
    color: var(--ink-soft);
    font-size: 1.08rem;
}

.badge {
    display: inline-block;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    margin-bottom: 26px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.hero-note {
    color: var(--ink-soft);
    font-size: 0.95rem;
    margin-top: 18px;
}

/* --- Botones -------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 48px de alto minimo: el objetivo tactil recomendado. */
    min-height: 48px;
    padding: 12px 26px;
    border-radius: 10px;
    font-size: 1.02rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-quiet {
    background: var(--surface);
    color: var(--ink);
    border: 2px solid var(--line);
}

.btn-quiet:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-big {
    font-size: 1.12rem;
    padding: 16px 34px;
}

/* --- Secciones ------------------------------------------------------------ */

.section {
    padding: 56px 24px;
}

.section > * {
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
}

/* Franja de fondo distinto para separar visualmente sin lineas: el padding
   horizontal de .section deja el color a todo el ancho de la pantalla. */
.section-alt {
    background: var(--surface-alt);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

h2 {
    font-size: clamp(1.5rem, 3.4vw, 2rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

.section-lead {
    color: var(--ink-soft);
    font-size: 1.05rem;
    margin-bottom: 32px;
}

/* --- Como funciona -------------------------------------------------------- */

/* counter-reset + ::before en vez del numero del <ol>: hace falta poder poner el
   numero en un circulo, y el marcador nativo no se puede estilar asi. */
.steps {
    counter-reset: step;
    list-style: none;
    display: grid;
    gap: 22px;
}

.steps li {
    counter-increment: step;
    position: relative;
    padding-left: 58px;
}

.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    height: 38px;
    background: var(--brand);
    border-radius: 50%;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 38px;
    text-align: center;
}

.steps h3 {
    font-size: 1.12rem;
    margin-bottom: 4px;
}

.steps p {
    color: var(--ink-soft);
}

/* --- Pregunta de ejemplo -------------------------------------------------- */

.example-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: 0 4px 18px rgba(22, 32, 42, 0.06);
}

.example-meta {
    color: var(--brand);
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.example-question {
    font-size: 1.2rem;
    line-height: 1.45;
    margin-bottom: 22px;
}

.example-options {
    list-style: none;
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}

.example-options li {
    display: flex;
    /* flex-start y no center: con texto de varias lineas el numero tiene que
       quedar a la altura de la primera, no flotando en el medio. */
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 2px solid var(--line);
    border-radius: 8px;
    color: var(--ink-soft);
}

.option-key {
    flex-shrink: 0;
    width: 26px;
    background: var(--primary);
    border-radius: 6px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
}

.example-options .is-correct {
    border-color: var(--success);
    background: rgba(40, 167, 69, 0.08);
    color: var(--ink);
}

.example-options .is-wrong {
    border-color: var(--danger);
    background: rgba(220, 53, 69, 0.06);
}

/* La etiqueta va en bloque: en linea empujaba el texto y dejaba una viuda. */
.option-tag {
    display: block;
    font-size: 0.85rem;
    margin-top: 6px;
}

/* Los dos ultimos colores a pelo del fichero, ahora dentro de la paleta: eran un
   verde brillante y un granate que no salen de la guia. Se usan las variantes
   oscuras de turquesa y coral, que sobre blanco dan 7.85 y 7.16 de contraste. */
.is-correct .option-tag {
    color: var(--brand-dark);
}

.is-wrong .option-tag {
    color: var(--danger-dark);
}

.example-explanation {
    background: var(--brand-soft);
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 18px;
}

.example-explanation h4 {
    color: var(--brand-dark);
    font-size: 0.95rem;
    margin-bottom: 6px;
}

.example-reference {
    color: var(--primary);
    font-weight: 600;
}

/* --- Capturas ------------------------------------------------------------- */

.shots {
    /* auto-fit + minmax: dos columnas cuando caben, una cuando no, sin media
       query. El maximo se queda en --measure y no en --wide para que salgan 2x2:
       con tres columnas la cuarta captura se queda sola en una fila. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px 32px;
    max-width: var(--measure);
}

.shots figure {
    /* Sobrescribe el centrado de .section > * para que la rejilla mande. */
    margin: 0;
    /* Las capturas no miden todas lo mismo de alto. Sin esto, el pie de la de la
       izquierda queda a una altura y el de la derecha a otra. */
    display: flex;
    flex-direction: column;
}

.shots figcaption {
    /* Empuja el pie al fondo de la celda: los cuatro quedan alineados aunque las
       imagenes tengan proporciones distintas. */
    margin-top: auto;
    padding-top: 10px;
}

.shots img {
    display: block;
    width: 100%;
    /* Los width/height del HTML son los reales de cada captura; auto conserva la
       proporcion y a la vez reserva el hueco, asi que la pagina no salta al
       cargar las imagenes en diferido. */
    height: auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-alt);
}

.shots figcaption {
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.figcaption-note {
    display: block;
    font-size: 0.88rem;
    font-style: italic;
    margin-top: 2px;
}

/* --- Que incluye ---------------------------------------------------------- */

.features {
    list-style: none;
    display: grid;
    gap: 14px;
}

.features li {
    position: relative;
    padding-left: 32px;
    color: var(--ink-soft);
}

.features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--success);
    font-weight: 700;
}

.features strong {
    color: var(--ink);
}

/* --- CTA final ------------------------------------------------------------ */

.cta-final {
    background: var(--brand-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    text-align: center;
}

/* --- Preguntas frecuentes ------------------------------------------------- */

/* details/summary nativos: el desplegable no necesita JavaScript, y asi la
   pagina entera funciona sin un solo script. */
details {
    border-bottom: 1px solid var(--line);
    padding: 16px 0;
}

summary {
    /* list-style para Firefox, ::-webkit-details-marker para Safari: cada uno
       dibuja el triangulo por su lado. */
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    /* 44px: la fila entera es el area que se toca, y con menos altura se falla
       con el pulgar. El enlace del pie se queda mas bajo a proposito, porque va
       dentro de un parrafo y ahi la regla no aplica. */
    min-height: 44px;
    align-items: center;
    font-size: 1.05rem;
    font-weight: 600;
}

summary::-webkit-details-marker {
    display: none;
}

summary::after {
    content: "+";
    color: var(--brand);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
}

details[open] summary::after {
    content: "−";
}

details p {
    color: var(--ink-soft);
    margin-top: 10px;
}

/* --- Pie ------------------------------------------------------------------ */

.site-footer {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 40px 24px 56px;
    color: var(--ink-soft);
    font-size: 0.92rem;
    text-align: center;
}

.site-footer p + p {
    margin-top: 8px;
}

.site-footer a {
    color: var(--primary);
}

/* --- Movil ---------------------------------------------------------------- */

@media (max-width: 600px) {
    .section {
        padding: 44px 20px;
    }

    .hero {
        padding: 36px 20px 44px;
    }

    /* A todo el ancho: dos botones a medias en una fila estrecha se quedan
       ambos demasiado pequenos para el pulgar. */
    .hero-actions .btn {
        width: 100%;
    }

    .example-card {
        padding: 20px;
    }
}

/* Quien pide menos movimiento no recibe transiciones. Aqui solo hay las de los
   botones, pero la regla evita que una futura animacion se cuele sin control. */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}