/* =========================================================
   Congreso Odontológico Confident 2026 — landing
   ========================================================= */

:root {
    --azul: #0889be;
    --azul-oscuro: #16498c;
    --azul-profundo: #0b2f6b;
    --verde: #4fd44a;
    --verde-texto: #45c93a;
    --verde-oscuro: #2a7f24;       /* solo para bordes de estado del formulario (contraste 5:1 sobre blanco) */
    --azul-texto: #0670a0;         /* AA: 5.5:1 sobre blanco; --azul (#0889be) no alcanza 4.5:1 en texto */
    --borde-control: #7b8798;      /* AA 1.4.11: 3.6:1, borde visible de campos y botones */
    --verde-suave: #effcee;
    --texto: #1d1d1d;
    --texto-suave: #5a6472;
    --gris: #b5b5b5;
    --borde: #d5dde8;
    --error: #c62828;
    --fondo-claro: #f3f7fb;
    --radio: 18px;
    --ancho: 1140px;
    --fuente-titulos: Arial, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    color: var(--texto);
    background: #fff;
    line-height: 1.5;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
}

/* Foco de dos tonos (WCAG 1.4.11): anillo azul profundo sobre halo blanco, visible sobre blanco, degradado y footer */
:focus-visible {
    outline: 3px solid var(--azul-profundo);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px #fff;
}

.container {
    width: min(var(--ancho), 100% - 3rem);
    margin-inline: auto;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.section-title {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    color: var(--verde-texto);
    font-size: 1.6rem;
    line-height: 1.2;
    margin-bottom: 2rem;
}

/* ---------- Botones ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .7rem 2.2rem;
    border: none;
    border-radius: 10px;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: filter .2s, border-color .2s;
}

.btn-primario {
    background: var(--verde);
    color: #153a14;
}

    .btn-primario:hover {
        filter: brightness(1.08);
    }

.btn-secundario {
    background: transparent;
    color: var(--azul-oscuro);
    border: 1.5px solid var(--borde-control);
}

    .btn-secundario:hover {
        border-color: var(--azul-oscuro);
    }

.btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* ---------- Fondo degradado azul → verde ---------- */
.bg-gradiente {
    position: relative;
    background: linear-gradient(125deg, rgba(10, 80, 220, .93) 0%, rgba(20, 110, 210, .85) 40%, rgba(40, 170, 110, .85) 75%, rgba(80, 200, 70, .90) 100%), url('../img/fondo-congreso.jpg') center / cover;
}

    .bg-gradiente::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        /* --barrido: posición de la línea de luz; el scroll la desplaza (ver "Recorrido de la página") */
        background: linear-gradient(118deg, transparent var(--barrido, 58%), rgba(255,255,255,.35) calc(var(--barrido, 58%) + .15%), transparent calc(var(--barrido, 58%) + .4%)), linear-gradient(62deg, transparent 20%, rgba(255,255,255,.10) 20.1%, transparent 35%);
    }

/* ---------- Header ---------- */
.site-header {
    min-height: 215px;
}

.header-top {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 2.5rem 1rem;
}

.logo img {
    height: 200px;
    width: auto;
}

.year {
    font-family: var(--fuente-titulos);
    font-weight: 800;
    font-size: 3.2rem;
    color: #fff;
}

.main-nav {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 62%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2.5rem;
    padding: 1rem 1.5rem 1rem 4rem;
    background: var(--fondo-claro);
    clip-path: polygon(2.2rem 0, 100% 0, 100% 100%, 0 100%);
}

    .main-nav a {
        color: var(--azul-oscuro);
        text-decoration: none;
        font-size: .95rem;
    }

        .main-nav a:hover {
            color: var(--azul-texto);
        }

    .main-nav .btn-registro {
        background: var(--verde);
        color: #153a14;
        padding: .7rem 3.5rem;
        border-radius: 10px;
    }

        .main-nav .btn-registro:hover {
            color: #153a14;
            filter: brightness(1.08);
        }

/* ---------- Hero ---------- */
.hero {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 2.5rem;
    align-items: start;
    padding-block: 2.5rem;
}

.hero-text {
    font-size: 1.6rem;
    line-height: 1.35;
    margin-top: 1.8rem;
    max-width: 24ch;
}

    .hero-text strong {
        color: var(--verde-texto);
    }

.hero-sub {
    margin: 1rem 0 1.5rem;
    color: var(--texto-suave);
    font-size: 1.1rem;
}

.hero-img {
    width: 100%;
    aspect-ratio: 46 / 30;
    object-fit: cover;
    border-radius: var(--radio);
}

.hero-cifras {
    display: flex;
    gap: 1.75rem;
    margin-top: 2.25rem;
}

    .hero-cifras div {
        display: flex;
        flex-direction: column-reverse;
        border-left: 3px solid var(--verde);
        padding-left: .8rem;
        line-height: 1.1;
    }

    .hero-cifras dd {
        font-family: var(--fuente-titulos);
        font-weight: 700;
        font-size: 2rem;
    }

    .hero-cifras dt {
        color: var(--texto-suave);
        font-size: .95rem;
    }

/* ---------- Carrusel del hero ---------- */
.carousel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radio);
    aspect-ratio: 46 / 30;
}

.carousel-track {
    display: flex;
    height: 100%;
    list-style: none;
    transition: transform .6s ease;
}

.carousel-slide {
    flex: 0 0 100%;
    height: 100%;
}

    .carousel-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    color: var(--azul-oscuro);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .25s ease;
}

    .carousel-btn.prev {
        left: 12px;
    }

    .carousel-btn.next {
        right: 12px;
    }

.carousel:hover .carousel-btn,
.carousel:focus-within .carousel-btn {
    opacity: 1;
}

.carousel-dots {
    position: absolute;
    inset: auto 0 14px 0;
    display: flex;
    justify-content: center;
    gap: 0;
}

    /* Objetivo de 24px (WCAG 2.5.8) con un punto visible de 10px; una sombra suave lo separa de fotos claras */
    .carousel-dots button {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: none;
        cursor: pointer;
    }

        .carousel-dots button::before {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
            transition: background-color .25s ease, scale .25s ease;
        }

        .carousel-dots button[aria-current="true"]::before {
            background: var(--verde);
            scale: 1.3;
        }

@media (max-width: 900px) {
    .carousel-btn {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .carousel-track {
        transition: none;
    }
}

/* ---------- Contador ---------- */
.countdown {
    display: flex;
    justify-content: center;
    padding-block: 2.8rem 3rem;
}

.countdown-card {
    position: relative;
    z-index: 1;
    width: min(275px, 100%);
    background: var(--fondo-claro);
    border-radius: var(--radio);
    padding: 1.5rem 2rem 2.2rem;
}

    .countdown-card h2 {
        font-family: var(--fuente-titulos);
        font-weight: 700;
        color: var(--azul-oscuro);
        font-size: 1.5rem;
        text-align: center;
        margin-bottom: .8rem;
    }

.cd-row {
    display: flex;
    align-items: stretch;
    gap: .8rem;
    margin-top: 1.1rem;
}

.cd-days {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 62px;
    line-height: 1;
}

.cd-num {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    font-size: 2.9rem;
    color: var(--verde);
}

.cd-label {
    font-size: 1.35rem;
}

.cd-city {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 3px solid var(--verde);
    padding-left: .8rem;
}

.cd-code {
    font-family: var(--fuente-titulos);
    font-weight: 800;
    font-size: 2.9rem;
    line-height: 1;
}

.cd-date {
    font-size: .62rem;
    letter-spacing: .25em;
    margin-top: .4rem;
}

/* Reloj en vivo (horas, minutos, segundos) */
.cd-row {
    flex-wrap: wrap;
}

.cd-reloj {
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: .35rem;
    padding-top: .7rem;
    border-top: 1px solid var(--borde);
}

.cd-u {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.cd-u-num {
    display: inline-flex;
    font-family: var(--fuente-titulos);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--azul-oscuro);
}

.cd-u small {
    margin-top: .3rem;
    font-size: .58rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

/* Dígito con efecto rodillo: el viejo sube y sale, el nuevo entra desde abajo */
.digito {
    display: inline-grid;
    overflow: hidden;
    height: 1em;
    line-height: 1;
}

.digito-v {
    grid-area: 1 / 1;
}

.digito-entra {
    animation: digito-entra .4s cubic-bezier(.22, 1, .36, 1);
}

.digito-sale {
    animation: digito-sale .4s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes digito-entra {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes digito-sale {
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

.mascota {
    position: absolute;
    z-index: 2;
    left: calc(50% + 110px);
    bottom: -50px;
    height: 360px;
    width: auto;
}

/* ---------- Bienvenida ---------- */
.bienvenida {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    align-items: start;
    padding-block: 5.5rem 4.5rem;
}

.bienvenida-intro p {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.5;
    max-width: 36ch;
}

.beneficios {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2rem;
    padding-top: 3.6rem;
}

    .beneficios li {
        border-left: 4px solid var(--verde);
        padding: .15rem 0 .15rem 1rem;
        font-size: 1.15rem;
        font-weight: 700;
        line-height: 1.35;
    }

/* ---------- Acerca de ---------- */
.acerca {
    background: var(--fondo-claro);
    padding-block: 4rem;
    overflow: hidden;
}

.acerca-grid {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 2rem;
    align-items: center;
}

.acerca-texto {
    text-align: right;
}

.acerca-antetitulo {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .32em;
    color: var(--verde-texto);
    text-transform: none;
}

.acerca-titulo {
    font-family: var(--fuente-titulos);
    font-weight: 800;
    font-size: 2.6rem;
    line-height: 1.1;
    color: var(--verde-texto);
    margin: .4rem 0 1.25rem;
}

.acerca-parrafo {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--texto);
    margin-left: auto;
    max-width: 62ch;
}

/* Tabla de sedes */
.sedes-tabla {
    margin: 2.5rem 0 1.75rem;
}

.sedes-encabezado,
.sede-fila {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1.2fr 1.4fr;
    align-items: center;
    text-align: center;
}

.sedes-encabezado {
    margin-bottom: .5rem;
}

.sede-th {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.sede-icono {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 3px 3px 7px rgba(10, 40, 90, .10), inset -3px -3px 7px #fff;
}

    .sede-icono svg {
        width: 22px;
        height: 22px;
        fill: var(--azul-oscuro);
    }

.sede-fila {
    padding: 1.1rem 0;
}

    .sede-fila + .sede-fila {
        border-top: 1px solid var(--borde);
    }

.sede-codigo {
    font-family: var(--fuente-titulos);
    font-weight: 800;
    font-size: 2.4rem;
    line-height: 1;
}

.sede-celda {
    display: flex;
    flex-direction: column;
    font-weight: 700;
    line-height: 1.25;
}

    .sede-celda a {
        text-decoration: none;
    }

        .sede-celda a:hover {
            text-decoration: underline;
            text-underline-offset: 3px;
        }

.sede-dia {
    font-family: var(--fuente-titulos);
    font-weight: 800;
    font-size: 1.9rem;
    line-height: 1;
}

.sede-celda small {
    font-weight: 400;
    font-size: .95rem;
    text-transform: lowercase;
}

.sede-hora {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    font-size: 1.35rem;
}

/* Color por sede */
.sede--verde .sede-codigo,
.sede--verde .sede-celda,
.sede--verde .sede-celda a {
    color: var(--verde-texto);
}

.sede--azul .sede-codigo,
.sede--azul .sede-celda,
.sede--azul .sede-celda a {
    color: var(--azul-texto);
}

.acerca-btn {
    margin-top: .5rem;
}

.acerca-mascota {
    width: 100%;
    height: auto;
}

/* ---------- Expositores ---------- */
.expositores {
    padding-block: 4.5rem 3rem;
}

.expositores-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
    gap: 2.5rem 3rem;
}

.expositor {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 2.5rem;
    align-items: center;
}

.expositor-avatar {
    position: relative;
    width: 180px;
    height: 180px;
}

.expositor-foto {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.expositor-bandera {
    position: absolute;
    left: -6px;
    bottom: 18px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
}

.expositor-info {
    border-left: 6px solid var(--verde);
    padding: .3rem 0 .3rem 1.4rem;
}

    .expositor-info h3 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: .5rem;
    }

    .expositor-info .tema {
        font-size: 1.5rem;
        font-weight: 300;
        line-height: 1.3;
        max-width: 24ch;
        margin-bottom: 1rem;
    }

    .expositor-info .nombre {
        font-size: 1.5rem;
        font-weight: 300;
        color: var(--texto-suave);
        line-height: 1.1;
    }

    .expositor-info .especialidad {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--texto-suave);
    }
/* ---------- Sponsors ---------- */
.sponsors {
    padding-block: 2rem 4.5rem;
}

.sponsors-grid-wrap {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2.5rem;
    align-items: center;
}

.sponsors-mascota {
    width: 100%;
    height: auto;
}

.sponsors-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.25rem;
}

    .sponsors-grid li {
        display: grid;
        place-items: center;
        height: 110px;
        padding: 1.25rem;
        border: 1px solid var(--borde);
        border-radius: 14px;
        background: #fff;
        transition: border-color .2s, transform .2s;
    }

        .sponsors-grid li:hover {
            border-color: var(--verde);
            transform: translateY(-3px);
        }

    .sponsors-grid img {
        max-height: 64px;
        width: auto;
        object-fit: contain;
    }

.vacio {
    color: var(--texto-suave);
    font-size: 1.1rem;
}

/* ---------- Galería ---------- */
.galeria {
    background: var(--fondo-claro);
    padding-block: 4rem 4.5rem;
    overflow: hidden;
}

.galeria-cabecera {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 2rem;
    align-items: end;
    margin-bottom: 2rem;
}

    .galeria-cabecera .section-title {
        margin-bottom: 0;
    }

    .galeria-cabecera p {
        color: var(--texto-suave);
        font-size: 1.05rem;
        max-width: 62ch;
    }

.galeria-fila {
    overflow: hidden;
    padding-block: .5rem;
}

.galeria-pista {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: galeria-desplazar 100s linear infinite;
}

.galeria-fila--inversa .galeria-pista {
    animation-direction: reverse;
}

.galeria-fila:hover .galeria-pista,
.galeria-fila:focus-within .galeria-pista {
    animation-play-state: paused;
}

.galeria-item {
    flex: none;
    border: none;
    padding: 0;
    background: none;
    border-radius: 14px;
    overflow: hidden;
    cursor: zoom-in;
}

    .galeria-item img {
        width: clamp(240px, 20vw, 400px);
        aspect-ratio: 4 / 3;
        object-fit: cover;
        transition: transform .3s;
    }

    .galeria-item:hover img {
        transform: scale(1.05);
    }

@keyframes galeria-desplazar {
    to {
        transform: translateX(calc(-50% - .5rem));
    }
}

/* ---------- Registro ---------- */
.registro {
    padding-block: 4.5rem;
}

.registro-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 3rem;
    align-items: start;
}

.registro-intro {
    color: #fff;
    padding-top: 1rem;
}

    .registro-intro h2 {
        font-family: var(--fuente-titulos);
        font-weight: 800;
        font-size: 2.4rem;
        line-height: 1.1;
        margin-bottom: 1rem;
    }

    .registro-intro p {
        font-size: 1.15rem;
        max-width: 32ch;
    }

.registro-mascota {
    margin-top: 2rem;
    max-height: 340px;
    width: auto;
}

.registro-form {
    background: #fff;
    border-radius: var(--radio);
    padding: 2rem 2.25rem;
    box-shadow: 0 24px 60px rgba(5, 40, 110, .28);
}

.selector-sede {
    border: none;
    margin-bottom: 1.75rem;
}

    .selector-sede legend {
        font-weight: 700;
        margin-bottom: .75rem;
    }

.selector-sede-opciones {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}

.opcion-sede {
    position: relative;
    cursor: pointer;
}

    .opcion-sede input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .opcion-sede span {
        display: flex;
        flex-direction: column;
        border: 1.5px solid var(--borde-control);
        border-radius: 12px;
        padding: .75rem 1rem;
        font-weight: 700;
        transition: background-color .2s, border-color .2s;
    }

    .opcion-sede small {
        font-weight: 400;
        font-size: .82rem;
        color: var(--texto-suave);
    }

    /* Seleccionada: borde verde oscuro de 3px (5:1), no solo el fondo suave */
    .opcion-sede input:checked + span {
        border-color: var(--verde-oscuro);
        box-shadow: inset 0 0 0 1.5px var(--verde-oscuro);
        background: var(--verde-suave);
    }

    .opcion-sede input:focus-visible + span {
        outline: 3px solid var(--azul-profundo);
        outline-offset: 2px;
    }

.progreso {
    list-style: none;
    counter-reset: paso;
    display: flex;
    gap: .5rem;
    margin-bottom: 1.75rem;
}

    .progreso li {
        flex: 1;
        counter-increment: paso;
        display: flex;
        align-items: center;
        gap: .5rem;
        padding-bottom: .6rem;
        border-bottom: 3px solid var(--borde);
        font-size: .9rem;
        color: var(--texto-suave);
    }

        .progreso li::before {
            content: counter(paso);
            flex: none;
            display: grid;
            place-items: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--borde);
            color: var(--texto);
            font-weight: 700;
            font-size: .85rem;
        }

        .progreso li.activo {
            color: var(--texto);
            font-weight: 700;
            border-color: var(--verde-oscuro);
        }

        .progreso li.completo {
            border-color: var(--verde-oscuro);
        }

            .progreso li.activo::before,
            .progreso li.completo::before {
                background: var(--verde);
                color: #153a14;
            }

.paso {
    border: none;
}

.campos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .25rem 1.25rem;
}

.campo--ancho {
    grid-column: 1 / -1;
}

.campo label {
    display: block;
    font-weight: 700;
    font-size: .92rem;
    margin-bottom: .35rem;
}

.campo input,
.campo select {
    width: 100%;
    font: inherit;
    color: var(--texto);
    background: #fff;
    padding: .7rem .9rem;
    border: 1.5px solid var(--borde-control);
    border-radius: 10px;
}

    .campo input:focus-visible,
    .campo select:focus-visible {
        outline: 3px solid var(--azul-profundo);
        outline-offset: 2px;
        border-color: var(--azul-texto);
        box-shadow: none;
    }

.campo [aria-invalid="true"] {
    border-color: var(--error);
}

.opcional {
    font-weight: 400;
    color: var(--texto-suave);
}
/* Foto del registro */
.campo-foto-titulo {
    display: block;
    font-weight: 700;
    font-size: .92rem;
    margin-bottom: .5rem;
}

.foto-registro {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.foto-registro-vista {
    flex: none;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--fondo-claro);
    border: 2px dashed var(--borde);
}

    .foto-registro-vista.con-foto {
        border-style: solid;
        border-color: var(--verde);
    }

    .foto-registro-vista img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.foto-registro-icono {
    width: 44px;
    height: 44px;
    fill: #a9b6c7;
}

.foto-registro-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

.btn-foto {
    min-height: 40px;
    padding: .5rem 1.25rem;
}

.btn-enlace {
    min-height: 24px;   /* WCAG 2.5.8 */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-size: .9rem;
    color: var(--error);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.avatares {
    margin-top: 1rem;
}

.avatares-titulo {
    font-size: .88rem;
    color: var(--texto-suave);
    margin-bottom: .5rem;
}

.avatares-lista {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.avatar-opcion {
    width: 64px;
    height: 64px;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    background: var(--fondo-claro);
    border: 2px solid var(--borde-control);
    transition: border-color .15s, transform .15s;
}

    .avatar-opcion:hover,
    .avatar-opcion:focus-visible {
        border-color: var(--verde-oscuro);
        transform: scale(1.06);
    }

    /* Avatar elegido: borde grueso azul profundo (13:1), no solo un cambio de color sutil */
    .avatar-opcion[aria-pressed="true"] {
        border: 4px solid var(--azul-profundo);
    }

    .avatar-opcion img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.avatares[hidden] {
    display: none;
}

.foto-registro-ayuda {
    flex-basis: 100%;
    font-size: .82rem;
    color: var(--texto-suave);
}

.error {
    display: block;
    min-height: 1.3em;
    margin-top: .2rem;
    color: var(--error);
    font-size: .82rem;
}
.campo-estado {
    display: block;
    margin-top: -.1rem;
    font-size: .82rem;
    color: var(--azul-oscuro);
}

.campo-estado:empty {
    display: none;
}

.verificacion {
    margin-top: .75rem;
    padding: 1rem 1.1rem;
    border: 1.5px dashed var(--borde);
    border-radius: 12px;
    transition: background-color .2s, border-color .2s;
}

    .verificacion label {
        display: block;
        font-weight: 700;
        font-size: .92rem;
        margin-bottom: .6rem;
    }

.verificacion-control {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .85rem;
    color: var(--texto-suave);
}

.verificacion input[type="range"] {
    flex: 1;
    accent-color: var(--verde);
}

.verificacion.ok {
    border-style: solid;
    border-color: var(--verde-oscuro);
    background: var(--verde-suave);
}

.paso-acciones {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1.5rem;
}

.form-estado {
    min-height: 1.2em;
    margin-top: 1rem;
    color: var(--error);
    font-weight: 700;
}

/* ---------- Footer ---------- */
.footer {
    background: var(--azul-profundo);
    color: #fff;
    padding-block: 3rem;
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-logo {
    height: 56px;
    width: auto;
    margin-bottom: 1rem;
}

.footer-copy {
    font-size: .9rem;
    opacity: .8;
}

.footer-contacto {
    display: grid;
    justify-items: end;
    gap: .4rem;
    text-align: right;
}

    .footer-contacto h2 {
        font-family: var(--fuente-titulos);
        font-size: .95rem;
        font-weight: 700;
        margin-top: .6rem;
    }

    .footer-contacto a {
        color: #fff;
        text-decoration: none;
    }

        .footer-contacto a:hover {
            text-decoration: underline;
        }

.redes {
    list-style: none;
    display: flex;
    gap: .9rem;
}

    .redes img {
        width: 26px;
        height: 26px;
    }

/* ---------- Modal ---------- */
.modal {
    width: min(480px, 100% - 2rem);
    margin: auto;
    border: none;
    border-radius: var(--radio);
    padding: 0;
    text-align: center;
    overflow: hidden;
}

    .modal::backdrop {
        background: rgba(8, 30, 70, 0);
    }

.modal-cabecera {
    display: grid;
    place-items: center;
    padding: 1.25rem;
}

    .modal-cabecera img {
        position: relative;
        z-index: 1;
        height: 48px;
        width: auto;
    }

.modal-cuerpo {
    padding: 1.75rem 2rem 2rem;
}

    .modal-cuerpo h2 {
        font-family: var(--fuente-titulos);
        font-weight: 800;
        color: var(--verde-texto);
        font-size: 2rem;
        margin-bottom: .5rem;
    }

    .modal-cuerpo p {
        color: var(--texto-suave);
        margin-bottom: 1rem;
    }

    .modal-cuerpo img {
        height: 200px;
        width: auto;
        margin: 0 auto 1rem;
    }

/* ---------- Visor de fotos ---------- */
.lightbox {
    margin: auto;
    padding: 0;
    border: none;
    background: transparent;
    max-width: 95vw;
    max-height: 95vh;
    overflow: visible;
}

    .lightbox::backdrop {
        background: rgba(0, 0, 0, 0);
    }

    .lightbox img {
        max-width: 92vw;
        max-height: 86vh;
        border-radius: 14px;
    }

.lightbox-cerrar {
    position: absolute;
    top: -2.75rem;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
}

/* ---------- Animación de modales ---------- */
/* Entrada con @starting-style; la salida se mantiene visible gracias a `overlay` y `display` con allow-discrete.
   Los navegadores sin soporte simplemente abren y cierran sin animar. */
.modal,
.lightbox {
    opacity: 0;
    scale: .94;
    translate: 0 14px;
    transition: opacity .35s ease,
                scale .45s cubic-bezier(.22, 1, .36, 1),
                translate .45s cubic-bezier(.22, 1, .36, 1),
                overlay .45s allow-discrete,
                display .45s allow-discrete;
}

    .modal[open],
    .lightbox[open] {
        opacity: 1;
        scale: 1;
        translate: 0 0;
    }

.modal::backdrop,
.lightbox::backdrop {
    backdrop-filter: blur(0);
    transition: background-color .35s ease,
                backdrop-filter .35s ease,
                overlay .35s allow-discrete,
                display .35s allow-discrete;
}

.modal[open]::backdrop {
    background: rgba(8, 30, 70, .6);
    backdrop-filter: blur(5px);
}

.lightbox[open]::backdrop {
    background: rgba(0, 0, 0, .85);
    backdrop-filter: blur(5px);
}

@starting-style {
    .modal[open],
    .lightbox[open] {
        opacity: 0;
        scale: .94;
        translate: 0 14px;
    }

    .modal[open]::backdrop {
        background: rgba(8, 30, 70, 0);
        backdrop-filter: blur(0);
    }

    .lightbox[open]::backdrop {
        background: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal,
    .lightbox,
    .modal::backdrop,
    .lightbox::backdrop {
        transition: none;
    }
}

/* ---------- Cargando ---------- */
.cargando {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: rgba(8, 30, 70, .45);
}

.spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 6px solid rgba(255, 255, 255, .35);
    border-top-color: var(--verde);
    animation: girar 1s linear infinite;
}

@keyframes girar {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Accesibilidad: saltar al contenido ---------- */
.saltar {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 200;
    padding: .75rem 1.25rem;
    border-radius: 10px;
    background: var(--azul-profundo);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    translate: 0 -300%;
}

    .saltar:focus {
        translate: 0 0;
    }

/* <main> recibe el foco al usar "Saltar al contenido"; no es un control, no necesita anillo */
#contenido:focus {
    outline: none;
    box-shadow: none;
}

/* ---------- Control global de movimiento (WCAG 2.2.2) ---------- */
/* Blanco sobre azul profundo (13:1); el borde blanco lo separa del footer, que es del mismo azul */
.control-movimiento {
    position: fixed;
    z-index: 60;
    left: calc(1rem + env(safe-area-inset-left, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .5rem 1.1rem .5rem .9rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--azul-profundo);
    color: #fff;
    font: inherit;
    font-size: .85rem;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(11, 47, 107, .28);
    cursor: pointer;
}

    .control-movimiento:hover {
        background: var(--azul-oscuro);
    }

    .control-movimiento svg,
    .carousel-pausa svg,
    .galeria-pausa svg {
        flex: none;
        width: 14px;
        height: 14px;
        fill: currentColor;
    }

/* En teléfonos queda solo el ícono (44x44); el texto sigue siendo su nombre accesible */
@media (max-width: 600px) {
    .control-movimiento {
        width: 44px;
        padding: 0;
        justify-content: center;
    }

        .control-movimiento .control-texto {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }
}

/* Pausa propia del carrusel: primer control, siempre visible */
.carousel-pausa {
    position: absolute;
    left: 12px;
    bottom: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--azul-profundo);
    box-shadow: 0 0 0 2px var(--azul-profundo);
    cursor: pointer;
}

/* Pausa propia de la galería, bajo el texto de la cabecera */
.galeria-pausa {
    grid-column: -2;
    justify-self: start;
    gap: .5rem;
    min-height: 44px;
    padding: .5rem 1.25rem;
    background: #fff;
}

/* Estados de pausa: la animación se congela donde está, sin saltos */
.movimiento-pausado .mascota-viva.entra,
.galeria--pausada .galeria-pista {
    animation-play-state: paused;
}

/* ---------- Intro de marca (al cargar la página) ---------- */
/* Solo con html.con-intro (lo decide el script inline del <head>). Todo es CSS: termina sola aunque falle
   el JS y nunca bloquea clics. Secuencia (~2.4s):
   cortina con el degradado de la marca → el logo se revela de arriba abajo → sube "2026" →
   un destello verde cruza el logo en la diagonal de la marca → el contenido se desvanece → la cortina sube
   con un borde verde luminoso y la entrada del hero arranca debajo (ver --intro-delay). */
:root {
    --intro-delay: 0s;
}

html.con-intro {
    --intro-delay: 1.75s;
}

.intro {
    display: none;
}

html.con-intro .intro {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 400;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: intro-salida .85s cubic-bezier(.76, 0, .24, 1) 1.55s forwards;
}

    /* Borde verde que acompaña a la cortina al subir */
    html.con-intro .intro::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, var(--verde) 20%, #c9f7c6 50%, var(--verde) 80%, transparent);
        box-shadow: 0 0 30px 6px rgba(79, 212, 74, .55);
    }

@keyframes intro-salida {
    to {
        translate: 0 -100%;
        visibility: hidden;
    }
}

.intro-contenido {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    animation: intro-contenido-sale .5s cubic-bezier(.25, .8, .35, 1) 1.45s forwards;
}

    /* Halo de luz detrás del logo */
    .intro-contenido::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 45%;
        width: 150%;
        aspect-ratio: 1;
        translate: -50% -50%;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 255, 255, .28), rgba(79, 212, 74, .12) 40%, transparent 68%);
        opacity: 0;
        animation: intro-aparece .8s ease-out .1s forwards;
        z-index: -1;
    }

@keyframes intro-contenido-sale {
    to {
        opacity: 0;
        translate: 0 -24px;
    }
}

.intro-logo {
    position: relative;
    width: clamp(170px, 34vw, 280px);
}

    /* El logo se revela de arriba abajo: primero el ícono, luego "Congreso Odontológico Confident" */
    .intro-logo img {
        width: 100%;
        height: auto;
        clip-path: inset(0 0 100% 0);
        scale: .94;
        animation: intro-logo .9s cubic-bezier(.16, 1, .3, 1) .15s forwards;
    }

    /* Destello verde recortado con la forma del logo, en la diagonal de la marca (118°) */
    .intro-logo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(118deg, transparent 38%, rgba(79, 212, 74, .95) 50%, transparent 62%) 120% 0 / 300% 100% no-repeat;
        -webkit-mask: url('../img/logo-confident.png') center / contain no-repeat;
        mask: url('../img/logo-confident.png') center / contain no-repeat;
        animation: intro-destello .75s ease-in-out .7s forwards;
    }

.intro-anio {
    width: clamp(90px, 14vw, 140px);
    height: auto;
    opacity: 0;
    translate: 0 12px;
    animation: intro-anio .6s cubic-bezier(.25, .8, .35, 1) .85s forwards;
}

@keyframes intro-aparece {
    to {
        opacity: 1;
    }
}

@keyframes intro-logo {
    to {
        clip-path: inset(0 0 0 0);
        scale: 1;
    }
}

@keyframes intro-destello {
    to {
        background-position: -20% 0;
    }
}

@keyframes intro-anio {
    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* ---------- Secuencia de entrada (header + hero) ---------- */
/* Una sola línea de tiempo al cargar (~1.8s). Reglas:
   - Todo usa fill-mode BACKWARDS: el estado inicial se mantiene durante el retraso (nada parpadea)
     y al terminar el elemento vuelve a su estilo original, sin transformaciones residuales.
   - Solo propiedades independientes (translate / scale / opacity / clip-path), nunca `transform`:
     la flotación de las mascotas y los hovers usan `transform` y no deben pisarse.
   - .main-nav ya usa clip-path para su corte diagonal, por eso entra con translate y no con clip-path.
   - landing.js agrega .entrada-hecha al terminar para que nunca se repita. */
@media (prefers-reduced-motion: no-preference) {
    :root {
        --ent-linea: cubic-bezier(.16, 1, .3, 1);    /* asentamiento largo, para tipografía e imagen */
        --ent-suave: cubic-bezier(.25, .8, .35, 1);  /* más discreta, para contenido de apoyo */
        --subida: 9px;
    }

    html:not(.entrada-hecha) .logo img {
        animation: en-subir .6s var(--ent-suave) calc(var(--intro-delay) + .12s) backwards;
    }

    html:not(.entrada-hecha) .year {
        animation: en-subir .6s var(--ent-suave) calc(var(--intro-delay) + .2s) backwards;
    }

    /* El panel claro del menú entra desde la derecha siguiendo su propio corte diagonal */
    html:not(.entrada-hecha) .main-nav {
        animation: en-deslizar .8s var(--ent-linea) calc(var(--intro-delay) + .1s) backwards;
    }

        html:not(.entrada-hecha) .main-nav a:nth-child(1) { animation: en-subir .55s var(--ent-suave) calc(var(--intro-delay) + .30s) backwards; }
        html:not(.entrada-hecha) .main-nav a:nth-child(2) { animation: en-subir .55s var(--ent-suave) calc(var(--intro-delay) + .35s) backwards; }
        html:not(.entrada-hecha) .main-nav a:nth-child(3) { animation: en-subir .55s var(--ent-suave) calc(var(--intro-delay) + .40s) backwards; }
        html:not(.entrada-hecha) .main-nav .btn-registro  { animation: en-asentar .6s var(--ent-suave) calc(var(--intro-delay) + .45s) backwards; }

    /* Revelado tipográfico: el texto se abre hacia abajo */
    html:not(.entrada-hecha) .hero-text {
        animation: en-cortina .95s var(--ent-linea) calc(var(--intro-delay) + .34s) backwards;
    }

    html:not(.entrada-hecha) .hero-sub {
        animation: en-subir .7s var(--ent-suave) calc(var(--intro-delay) + .74s) backwards;
    }

    html:not(.entrada-hecha) .hero-copy > .btn {
        animation: en-subir .8s var(--ent-linea) calc(var(--intro-delay) + .9s) backwards;
    }

    html:not(.entrada-hecha) .hero-cifras > div:nth-child(1) { animation: en-subir .6s var(--ent-suave) calc(var(--intro-delay) + 1.05s) backwards; }
    html:not(.entrada-hecha) .hero-cifras > div:nth-child(2) { animation: en-subir .6s var(--ent-suave) calc(var(--intro-delay) + 1.12s) backwards; }
    html:not(.entrada-hecha) .hero-cifras > div:nth-child(3) { animation: en-subir .6s var(--ent-suave) calc(var(--intro-delay) + 1.19s) backwards; }

    /* La foto se descubre con la diagonal de la marca (la misma inclinación que la línea de luz) */
    html:not(.entrada-hecha) .hero .carousel,
    html:not(.entrada-hecha) .hero-img {
        animation: en-diagonal 1.1s var(--ent-linea) calc(var(--intro-delay) + .45s) backwards;
    }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 600px) {
    :root {
        --subida: 6px;
    }
}

@keyframes en-subir {
    from {
        opacity: 0;
        translate: 0 var(--subida, 9px);
    }
}

@keyframes en-asentar {
    from {
        opacity: 0;
        translate: 0 calc(var(--subida, 9px) * .7);
        scale: .97;
    }
}

@keyframes en-deslizar {
    from {
        opacity: 0;
        translate: 48px 0;
    }
}

@keyframes en-cortina {
    from {
        clip-path: inset(-.78em 0 calc(100% + .78em) 0);
        translate: 0 var(--subida, 9px);
    }
    to {
        clip-path: inset(-.78em 0 -.78em 0);
        translate: 0 0;
    }
}

@keyframes en-diagonal {
    from {
        clip-path: polygon(-30% 0, 0% 0, -30% 100%, -30% 100%);
    }
    to {
        clip-path: polygon(-30% 0, 130% 0, 100% 100%, -30% 100%);
    }
}

/* ---------- Transiciones entre secciones ---------- */
/* Ligadas al scroll (CSS scroll-driven animations): avanzan y retroceden con el usuario.
   - Secciones de marca (contador, registro, footer): la sección se descubre con un barrido en la
     diagonal de la marca mientras entra en pantalla.
   - Secciones claras (Acerca de, Galería): solo el panel de fondo se extiende en diagonal; el
     contenido nunca se recorta y ya tiene su propio revelado.
   Sin soporte (Firefox) o con movimiento reducido, todo se ve completo desde el inicio. */
@property --panel {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 130%;
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .countdown,
        .registro,
        .footer {
            animation: seccion-barrido linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }

        /* Si el foco de teclado entra a una sección a medio descubrir, se muestra completa (WCAG 2.4.11) */
        .countdown:focus-within,
        .registro:focus-within,
        .footer:focus-within {
            animation: none;
        }

        .acerca,
        .galeria {
            background: linear-gradient(105deg, var(--fondo-claro) var(--panel), transparent calc(var(--panel) + 1px));
            animation: seccion-panel linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 80%;
        }
    }
}

/* La base se extiende 90px para no cortar la mascota del contador, que sobresale por abajo */
@keyframes seccion-barrido {
    from {
        clip-path: polygon(-30% 0, 0% 0, -30% calc(100% + 90px), -30% calc(100% + 90px));
    }
    to {
        clip-path: polygon(-30% 0, 130% 0, 100% calc(100% + 90px), -30% calc(100% + 90px));
    }
}

@keyframes seccion-panel {
    from {
        --panel: -15%;
    }
    to {
        --panel: 130%;
    }
}

/* ---------- Recorrido de la página ---------- */
/* 1) La línea de luz diagonal de la marca se desplaza con el scroll (CSS scroll-driven animations).
   2) Guía lateral (≥1280px) o barra superior (pantallas menores) que muestran el avance. La crea landing.js. */
@property --barrido {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 58%;
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        /* El header arranca en su posición original y la línea se va mientras sale de pantalla */
        .site-header::before {
            animation: barrido-salida linear both;
            animation-timeline: view();
            animation-range: exit 0% exit 100%;
        }

        /* Al cruzar la pantalla, la línea pasa por su posición original (58%) justo en el centro */
        .countdown::before,
        .registro::before {
            animation: barrido linear both;
            animation-timeline: view();
            animation-range: cover 0% cover 100%;
        }
    }
}

@keyframes barrido {
    from {
        --barrido: 70%;
    }
    to {
        --barrido: 46%;
    }
}

@keyframes barrido-salida {
    from {
        --barrido: 58%;
    }
    to {
        --barrido: 40%;
    }
}

/* Barra superior (móvil y tablet) */
.progreso-pagina {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    height: 3px;
    background: linear-gradient(90deg, var(--azul-oscuro), var(--azul) 45%, var(--verde));
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6);
    transform-origin: 0 50%;
    scale: var(--progreso, 0) 1;
    pointer-events: none;
}

/* Guía lateral (escritorio) */
.recorrido {
    display: none;
}

@media (min-width: 1280px) {
    .progreso-pagina {
        display: none;
    }

    .recorrido {
        display: block;
        position: fixed;
        z-index: 50;
        right: 1.25rem;
        top: 50%;
        translate: 0 -50%;
    }
}

.recorrido ol {
    position: relative;
    z-index: 1;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

/* Objetivo táctil de 32px aunque el punto visible sea más pequeño (WCAG 2.5.8) */
.recorrido a {
    position: relative;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    text-decoration: none;
}

    .recorrido a:focus-visible {
        outline: 3px solid var(--azul-profundo);
        outline-offset: 0;
        box-shadow: 0 0 0 6px #fff;
    }

/* Borde azul (8.6:1 sobre blanco) y relleno blanco: el punto se distingue sobre fondos claros y sobre el degradado */
.recorrido-punto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--azul-oscuro);
    transition: scale .3s cubic-bezier(.22, 1, .36, 1), background-color .3s ease;
}

.recorrido a:hover .recorrido-punto {
    scale: 1.3;
}

.recorrido a.pasado .recorrido-punto {
    background: var(--azul-oscuro);
}

.recorrido a[aria-current] .recorrido-punto {
    background: var(--verde);
    border-color: var(--azul-profundo);
    scale: 1.5;
}

/* Pista que se llena con el degradado de la marca */
.recorrido-pista {
    position: absolute;
    top: 16px;
    bottom: 16px;
    right: 15px;
    width: 2px;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, .75);
    box-shadow: 0 0 0 1px rgba(11, 47, 107, .18);
}

.recorrido-relleno {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--azul), var(--verde));
    transform-origin: 50% 0;
    scale: 1 var(--recorrido-progreso, 0);
}

/* Etiqueta: blanco sobre azul profundo (13:1). Aparece al pasar el mouse, con foco
   o un instante al cambiar de sección. Se puede ocultar con Esc (WCAG 1.4.13). */
.recorrido-etiqueta {
    position: absolute;
    right: calc(100% + .35rem);
    top: 50%;
    translate: 6px -50%;
    white-space: nowrap;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: var(--azul-profundo);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.3;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, translate .25s cubic-bezier(.22, 1, .36, 1);
}

.recorrido a:hover .recorrido-etiqueta,
.recorrido a:focus-visible .recorrido-etiqueta {
    opacity: 1;
    translate: 0 -50%;
    pointer-events: auto;
}

.recorrido.anunciando a[aria-current] .recorrido-etiqueta {
    opacity: 1;
    translate: 0 -50%;
}

.recorrido.sin-etiquetas a[href] .recorrido-etiqueta {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .recorrido-punto,
    .recorrido-etiqueta {
        transition: none;
    }
}

/* ---------- Mascotas con vida ---------- */
/* La clase .mascota-viva la agrega landing.js. `translate` lo usa el parallax (JS),
   `transform` la flotación y `scale`/`rotate` el saludo: cada uno en su propiedad para no pisarse. */
.mascota-viva {
    opacity: 0;
    scale: .8;
    transform-origin: 50% 100%;
    will-change: translate, transform;
}

.mascota-viva.entra {
    opacity: 1;
    scale: 1;
    animation: mascota-saludo .9s cubic-bezier(.34, 1.56, .64, 1) backwards,
               mascota-flota var(--flota-dur, 6s) ease-in-out .9s infinite;
}

@keyframes mascota-saludo {
    0% {
        opacity: 0;
        scale: .8;
        rotate: -8deg;
    }
    60% {
        opacity: 1;
        scale: 1.04;
        rotate: 3deg;
    }
    100% {
        opacity: 1;
        scale: 1;
        rotate: 0deg;
    }
}

@keyframes mascota-flota {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* ---------- Revelado al hacer scroll ---------- */
/* La clase .reveal la agrega landing.js; usa `translate` para no chocar con los `transform` de hover. */
:root {
    --revelar-duracion: 800ms;
    --revelar-curva: cubic-bezier(.22, 1, .36, 1);
}

.reveal {
    opacity: 0;
    translate: 0 28px;
}

/* Doble clase: sube la especificidad para imponerse a transiciones propias (p. ej. .sponsors-grid li). */
.reveal.reveal {
    transition: opacity var(--revelar-duracion) var(--revelar-curva) var(--revelar-retraso, 0ms),
                translate var(--revelar-duracion) var(--revelar-curva) var(--revelar-retraso, 0ms);
}

.reveal.visible {
    opacity: 1;
    translate: 0 0;
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal {
        opacity: 1;
        translate: none;
        transition: none;
    }

    .galeria-pista {
        animation: none;
    }

    .galeria-fila {
        overflow-x: auto;
    }

    .spinner {
        animation-duration: 3s;
    }
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
    .site-header {
        min-height: auto;
    }

    .main-nav {
        position: relative;
        width: 100%;
        clip-path: none;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem 1.5rem;
        padding: 1rem;
    }

    .hero,
    .bienvenida,
    .acerca-grid {
        grid-template-columns: 1fr;
    }

    .acerca-texto {
        text-align: center;
    }

    .acerca-parrafo {
        margin-inline: auto;
    }

    .acerca-mascota {
        max-width: 300px;
        margin-inline: auto;
    }
    .galeria-cabecera,
    .registro-grid {
        grid-template-columns: 1fr;
    }

    .hero-text {
        max-width: none;
        margin-top: 0;
    }

    .beneficios {
        padding-top: 0;
    }

    .mascota {
        display: none;
    }

    .bienvenida {
        padding-block: 4rem 3rem;
    }

    .registro-mascota {
        display: none;
    }

    .expositores-lista {
        grid-template-columns: 1fr;
    }
    .sponsors-grid-wrap {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .sponsors-mascota {
        max-width: 240px;
    }
}

/* ---------- Móvil ---------- */
@media (max-width: 600px) {
    .logo img {
        height: 100px;
    }

    .year {
        font-size: 2.2rem;
    }

    .main-nav .btn-registro {
        padding: .7rem 2rem;
    }

    .hero-text {
        font-size: 1.35rem;
    }

    .beneficios,
    .campos,
    .selector-sede-opciones {
        grid-template-columns: 1fr;
    }

    .sede {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .sede-codigo {
        border-right: none;
        border-left: 3px solid var(--verde);
        padding: 0 0 0 1rem;
    }

    .expositor {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 1.5rem;
    }

    .expositor-avatar {
        width: 150px;
        height: 150px;
    }

    .expositor-bandera {
        width: 44px;
        height: 44px;
        bottom: 14px;
    }

    .galeria-item img {
        width: 72vw;
    }

    .registro-form {
        padding: 1.5rem 1.25rem;
    }

    .progreso li {
        font-size: .78rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .paso-acciones {
        flex-direction: column-reverse;
    }

        .paso-acciones .btn {
            width: 100%;
        }

    .footer-contacto {
        justify-items: start;
        text-align: left;
    }

    .sponsors-mascota {
        display: none;
    }
    .sedes-encabezado {
        display: none;
    }

    .sede-fila {
        grid-template-columns: 1fr;
        gap: .5rem;
        text-align: center;
    }

    .sede-codigo {
        font-size: 2.8rem;
    }
}