/* ==========================================================================
   Landing · Encuesta de Clima Laboral
   Layout: una idea por sección. Columna de 1200px, tipografía grande alineada
   a la izquierda y una sola banda roja a todo lo ancho como momento de color.
   Tokens, controles y barra superior: publico.css.
   ========================================================================== */

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

.lp-hero {
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(4.5rem, 3rem + 5vw, 8rem);
}

.lp-hero__grid {
    display: grid;
    gap: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.lp-hero__copy {
    min-width: 0;
}

.lp-hero .lp-display {
    margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

.lp-hero .lp-lead {
    margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
}

/* Foto vertical: el producto y, al fondo, el equipo detrás del mostrador */
.lp-hero__media {
    position: relative;
    width: 100%;
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-photo);
    overflow: hidden;
    background: var(--tile);
}

.lp-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

@media (min-width: 640px) and (max-width: 1023px) {
    .lp-hero__media {
        aspect-ratio: 3 / 2;
    }
}

@media (min-width: 1024px) {
    .lp-hero__grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: center;
        gap: clamp(2.5rem, 4vw, 5rem);
    }
    /* El titular se mide contra su columna, no contra la pantalla */
    .lp-hero .lp-display {
        font-size: clamp(4.25rem, 0.75rem + 6.2vw, 6rem);
    }
    .lp-hero__media {
        max-height: min(720px, calc(100svh - 9rem));
    }
}

/* Un solo momento orquestado: el texto llega en cascada y la foto se asienta */
@media (prefers-reduced-motion: no-preference) {
    .lp-hero__copy > * {
        animation: lp-rise 700ms var(--ease-out) both;
    }
    .lp-hero .lp-display { animation-delay: 60ms; }
    .lp-hero .lp-lead { animation-delay: 140ms; }
    .lp-hero .lp-actions { animation-delay: 220ms; }
    .lp-hero__media img {
        animation: lp-settle 1200ms var(--ease-out) both;
    }
}

/* Solo transform: el contenido es legible desde el primer cuadro */
@keyframes lp-rise {
    from { transform: translateY(18px); }
}

@keyframes lp-settle {
    from { transform: scale(1.06); }
}

/* --- Fotografía ---------------------------------------------------------- */

.lp-photo {
    position: relative;
    margin: 0;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-photo);
    overflow: hidden;
    background: var(--tile);
}

.lp-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 639px) {
    .lp-photo {
        aspect-ratio: 4 / 3;
    }
}

/* La foto se abre conforme entra en pantalla, ligada 1:1 al scroll */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .lp-photo {
            animation: lp-open linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 42%;
        }
    }
}

@keyframes lp-open {
    from { transform: scale(0.92); }
    to { transform: none; }
}

.lp-glass {
    position: absolute;
    left: clamp(0.75rem, 2vw, 1.5rem);
    bottom: clamp(0.75rem, 2vw, 1.5rem);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem 0.625rem 0.875rem;
    border-radius: 999px;
    background: var(--glass);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--th-fresh-white) 45%, transparent),
                0 8px 24px color-mix(in srgb, var(--th-roasted-espresso) 18%, transparent);
    color: var(--glass-ink);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.lp-glass svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Banda de declaración ------------------------------------------------ */

.lp-band {
    padding-block: var(--section);
    background: var(--band);
    color: var(--on-band);
}

.lp-statement {
    max-width: 18ch;
    font-size: var(--fs-statement);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.015em;
}

/* Cada palabra se enciende al ritmo del scroll */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .lp-statement {
            view-timeline-name: --lp-statement;
        }
        .lp-word {
            animation: lp-word-on linear both;
            animation-timeline: --lp-statement;
            animation-range: cover calc(8% + var(--i) * 2.5%) cover calc(20% + var(--i) * 2.5%);
        }
    }
}

@keyframes lp-word-on {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

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

.lp-section {
    padding-block: var(--section) 0;
}

.lp-section .lp-h2 {
    margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
}

/* Pasos: una secuencia real, por eso numerada */
.lp-steps {
    display: grid;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .lp-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
    }
}

.lp-step {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
    min-width: 0;
}

.lp-step__num {
    margin-bottom: 0.75rem;
    font-size: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--accent-ink);
}

.lp-step p {
    margin: 0;
    max-width: 30ch;
    color: var(--ink-2);
}

/* Privacidad: una sola superficie, en Donut Cream */
.lp-tile {
    display: grid;
    gap: clamp(1.75rem, 1rem + 2vw, 3rem);
    padding: clamp(2rem, 1rem + 4.5vw, 5rem);
    border-radius: var(--radius-tile);
    background: var(--tile);
    color: var(--tile-ink);
}

@media (min-width: 900px) {
    .lp-tile {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

.lp-tile .lp-h2 {
    margin: 0;
    font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem);
    color: var(--tile-accent);
}

.lp-tile__icon {
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1.5rem;
    fill: none;
    stroke: var(--tile-accent);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-tile__body {
    display: grid;
    gap: 1.75rem;
    min-width: 0;
}

.lp-tile__body p {
    margin: 0;
    max-width: 44ch;
    font-size: var(--fs-lead);
    line-height: 1.4;
}

.lp-checks {
    display: grid;
    gap: 0.875rem;
    margin: 0;
    padding: 1.75rem 0 0;
    list-style: none;
    border-top: 1px solid color-mix(in srgb, var(--tile-ink) 16%, transparent);
}

.lp-checks li {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    font-weight: 700;
    line-height: 1.35;
}

.lp-checks li::before {
    content: "";
    width: 1.5rem;
    height: 1.35em;
    background: var(--tile-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
}

/* Cierre */
.lp-final {
    padding-block: var(--section);
    text-align: center;
}

.lp-final .lp-wrap {
    display: grid;
    justify-items: center;
    gap: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

.lp-final .lp-lead {
    max-width: 30ch;
    margin-bottom: 0.5rem;
}

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

.lp-footer {
    padding-block: 2.5rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--hairline);
    color: var(--ink-2);
    font-size: var(--fs-small);
}

.lp-footer__inner {
    display: grid;
    gap: 1rem;
}

.lp-footer__inner .lp-logo {
    width: 120px;
    margin-bottom: 0.25rem;
}

.lp-footer p {
    margin: 0;
}

.lp-footer a {
    color: var(--ink);
    text-underline-offset: 0.2em;
}

.lp-footer__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
}

/* --- Accesibilidad ------------------------------------------------------- */

@media (prefers-reduced-transparency: reduce) {
    .lp-glass {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--bg);
    }
}