/* =========================================================
   oktoberMESS 2026 — LANDING SAN LUIS POTOSÍ
   ---------------------------------------------------------
   Tema claro del diseño de SLP (OKTOBER LANDING SLP). Es el
   único CSS que carga index.php: los archivos heredados de
   Querétaro (tokens, base, componentes…) no participan.
   Los colores literales viven sólo en :root.
   ========================================================= */

:root {
    --ok-navy:          #004580;   /* azul MESS: títulos, menú, bordes */
    --ok-navy-profundo: #062A63;   /* ventana "¡Listo!" y bloques "Próximamente" */
    --ok-navy-noche:    #03132F;   /* campos dentro de la ventana */
    --ok-azul-cta:      #2358A6;
    --ok-azul-cta-alto: #2A62B3;
    --ok-azul-cta-bajo: #1F4F9A;
    --ok-azul-borde:    #2A4F9E;   /* buscador y píldoras */
    --ok-acero:         #3A7CB0;   /* titular del registro */
    --ok-azul-etiqueta: #2F6FA8;
    --ok-azul-titular:  #0B2A5B;
    --ok-azul-luz:      #5A9BE6;   /* "OktoberMESS 2026" sobre navy */
    --ok-azul-hielo:    #A9C2E6;
    --ok-cian:          #5FB4F0;

    --ok-blanco:        #FFFFFF;
    --ok-fondo-suave:   #F7F9FC;
    --ok-linea:         #E3E8F0;
    --ok-fondo-campo:   #E6E6E6;
    --ok-gris-boton:    #E9E9E9;
    --ok-gris-icono:    #5C5C5C;
    --ok-gris-titulo:   #9AA6B8;   /* preguntas de la ventana "¡Listo!" */
    --ok-gris-sello:    #4D4D4D;

    --ok-texto:         #1F2933;
    --ok-texto-suave:   #6B7280;
    --ok-texto-sub:     #7B7B7B;

    --ok-error:         #C62828;
    --ok-error-claro:   #FF9A9A;
    --ok-error-fondo:   #FDECEC;
    --ok-exito:         #1D7A46;
    --ok-exito-fondo:   #E8F5EE;
    --ok-info-fondo:    #E8F0FA;
    --ok-ics:           #F07C00;

    --ok-halo-gris:     rgba(88, 122, 178, .5);
    --ok-halo-azul:     rgba(104, 146, 222, .38);
    --ok-sombra:        0 10px 30px rgba(0, 38, 90, .18);
    --ok-sombra-cta:    0 4px 10px rgba(0, 30, 80, .35);
    --ok-sombra-modal:  0 30px 80px rgba(0, 15, 45, .55);
    --ok-foco:          0 0 0 3px rgba(35, 88, 166, .22);

    --ok-fuente:        'Roboto', 'Segoe UI', Arial, sans-serif;
    --ok-fuente-mono:   'Roboto Mono', Consolas, 'Courier New', monospace;

    --ok-max:           72rem;
    --ok-topbar-alto:   4.5rem;
}


/* ===== Base ============================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--ok-topbar-alto);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--ok-blanco);
    color: var(--ok-texto);
    font-family: var(--ok-fuente);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--ok-navy); }
:focus-visible { outline: 3px solid var(--ok-acero); outline-offset: 2px; }

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

.ok-contenedor { width: min(100% - 2.5rem, var(--ok-max)); margin-inline: auto; }

.ok-enlace {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ok-azul-borde);
    text-decoration: underline;
    cursor: pointer;
}


/* ===== Barra superior ==================================== */

.ok-topbar {
    position: fixed;
    z-index: 50;
    inset: 0 0 auto;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.25rem);
    height: var(--ok-topbar-alto);
    padding-inline: clamp(1rem, 4vw, 3rem);
    transition: background-color .25s ease, box-shadow .25s ease;
}

/* Fuera de la bienvenida la barra se vuelve sólida y muestra el logo. */
.ok-topbar.is-solida {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(0, 38, 90, .08);
}

.ok-topbar__marca {
    margin-right: auto;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
}
.ok-topbar.is-solida .ok-topbar__marca { opacity: 1; visibility: visible; }

.ok-menu { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }

.ok-menu a {
    position: relative;
    padding-block: .35rem;
    color: var(--ok-navy);
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
}
.ok-menu a::after {
    content: '';
    position: absolute;
    right: -.2rem; bottom: -.1rem; left: -.2rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform .2s ease;
}
.ok-menu a:hover::after,
.ok-menu a.is-activo::after { transform: scaleX(1); }

.ok-topbar__cta {
    display: inline-flex;
    align-items: center;
    min-height: 2.2rem;
    padding: .3rem 1.4rem;
    border-radius: .3rem;
    background: var(--ok-navy);
    color: var(--ok-blanco);
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .2s ease, box-shadow .2s ease;
}
.ok-topbar__cta:hover { background: var(--ok-azul-cta); color: var(--ok-blanco); }
.ok-topbar__cta.is-activo { box-shadow: 0 0 0 4px rgba(35, 88, 166, .16), 0 0 22px rgba(35, 88, 166, .55); }

.ok-topbar__toggle { display: none; }


/* ===== Logo OKTOBERMESS 2026 ============================== */

.ok-logo {
    display: flex;
    align-items: center;
    gap: clamp(.6rem, 2vw, 1.4rem);
    color: var(--ok-navy);
}
.ok-logo__sello { flex: none; width: clamp(7rem, 15vw, 13rem); }
.ok-logo__sello text { font-family: var(--ok-fuente); }
.ok-logo__texto { display: flex; flex-direction: column; line-height: .92; }
.ok-logo__marca { font-size: clamp(1.1rem, 2.4vw, 2.15rem); font-weight: 700; letter-spacing: .01em; }
.ok-logo__anio  { font-size: clamp(3.4rem, 7.6vw, 6.9rem); font-weight: 900; letter-spacing: -.01em; }

.ok-logo--chico { gap: .45rem; }
.ok-logo--chico .ok-logo__sello { width: 3.3rem; }
.ok-logo--chico .ok-logo__marca { font-size: .78rem; }
.ok-logo--chico .ok-logo__anio  { font-size: 2.2rem; }


/* ===== Secciones ========================================= */

.ok-seccion { position: relative; padding-block: 5rem 4rem; }
.ok-seccion--compacta { padding-block: 3.5rem; }

.ok-titulo-seccion {
    margin: 0 0 1.5rem;
    color: var(--ok-navy);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
}


/* ===== Bienvenida ======================================== */

.ok-hero {
    display: grid;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--ok-topbar-alto) + 1.5rem);
    overflow: hidden;
    background:
        radial-gradient(ellipse 48% 58% at 6% 10%, var(--ok-halo-gris), rgba(140, 165, 205, .2) 48%, transparent 76%),
        radial-gradient(ellipse 32% 42% at 100% 90%, var(--ok-halo-azul), transparent 72%),
        var(--ok-blanco);
}

.ok-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
}

.ok-hero__titulo {
    margin: 0 0 1.6rem;
    color: var(--ok-navy);
    font-size: clamp(3rem, 7.5vw, 6.2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.01em;
}

.ok-buscador {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 34rem;
    min-height: 3.6rem;
    margin-bottom: 2.4rem;
    padding: .25rem .4rem .25rem 1.4rem;
    border: 3px solid var(--ok-azul-borde);
    border-radius: 999px;
    background: rgba(255, 255, 255, .8);
    transition: box-shadow .2s ease;
}
.ok-buscador:focus-within { box-shadow: var(--ok-foco); }
.ok-buscador input {
    flex: 1;
    min-width: 0;
    padding: .4rem 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ok-navy);
    font-family: var(--ok-fuente-mono);
    font-size: .9rem;
    text-overflow: ellipsis;
}
.ok-buscador input::placeholder { color: #334E7A; opacity: 1; }
.ok-buscador button {
    display: grid;
    place-items: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ok-azul-borde);
    font-size: 1.85rem;
    cursor: pointer;
    transition: transform .2s ease;
}
.ok-buscador button:hover { transform: scale(1.08); }

.ok-pildoras { display: flex; flex-wrap: wrap; gap: 1rem; }

.ok-pildora {
    display: grid;
    place-content: center;
    min-height: 3.6rem;
    margin: 0;
    padding: .4rem 1.1rem;
    border: 3px solid var(--ok-azul-borde);
    border-radius: .6rem;
    background: var(--ok-blanco);
    color: var(--ok-navy);
    font-size: .85rem;
    line-height: 1.3;
    text-align: center;
}
.ok-pildora--fecha { font-size: 1.05rem; font-weight: 700; }

.ok-hero__marca { display: flex; flex-direction: column; align-items: center; gap: 2.2rem; }

.ok-hero__copy {
    max-width: 29rem;
    margin: 0;
    color: var(--ok-navy);
    font-size: 1.05rem;
    line-height: 1.4;
    text-align: center;
}

/* Cuenta regresiva hasta el inicio del evento. */
.ok-cuenta { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; margin-top: 2rem; }
.ok-cuenta__titulo {
    margin: 0;
    color: var(--ok-navy);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.ok-cuenta__cajas { display: flex; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.ok-cuenta__caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 4.4rem;
    padding: .6rem .5rem .5rem;
    border: 2px solid var(--ok-azul-borde);
    border-radius: .8rem;
    background: var(--ok-blanco);
    box-shadow: 0 6px 16px rgba(0, 38, 90, .12);
}
.ok-cuenta__num {
    color: var(--ok-navy);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.ok-cuenta__etiqueta {
    margin-top: .3rem;
    color: var(--ok-texto-suave);
    font-size: .72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.ok-cuenta__fin { display: none; margin: 0; color: var(--ok-navy); font-size: 1.2rem; font-weight: 700; }
.ok-cuenta.is-terminada .ok-cuenta__titulo,
.ok-cuenta.is-terminada .ok-cuenta__cajas { display: none; }
.ok-cuenta.is-terminada .ok-cuenta__fin { display: block; }


/* ===== Ubicación ========================================= */

.ok-ubicacion {
    background:
        radial-gradient(ellipse 34% 60% at 100% 8%, rgba(120, 160, 220, .32), transparent 70%),
        radial-gradient(ellipse 30% 40% at 62% 100%, rgba(150, 175, 215, .22), transparent 70%),
        var(--ok-blanco);
}

.ok-ubicacion__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(16rem, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}

.ok-mapa {
    border: 3px solid #0B1F5C;
    background: var(--ok-linea);
    box-shadow: 0 0 0 1px rgba(60, 110, 230, .35), 0 0 26px rgba(40, 90, 230, .5);
}
.ok-mapa__lienzo { position: relative; height: clamp(20rem, 38vw, 35rem); }

/* Visible mientras carga MapLibre, o si el navegador no puede dibujar el mapa. */
.ok-mapa__respaldo {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1rem;
    background: linear-gradient(160deg, #F3F6FB, #DDE5F1);
    color: var(--ok-navy);
    font-weight: 700;
    text-decoration: none;
    transition: opacity .35s ease, visibility .35s;
}
.ok-mapa__respaldo img { width: min(9.25rem, 40%); }
.ok-mapa__lienzo.is-listo .ok-mapa__respaldo { opacity: 0; visibility: hidden; }

/* Pin de OktoberMESS sobre el mapa: abre "Cómo llegar". */
.ok-mapa__pin { display: block; width: 9.25rem; cursor: pointer; }
.ok-mapa__pin img { width: 100%; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .3)); transition: transform .2s ease; transform-origin: bottom center; }
.ok-mapa__pin:hover img { transform: scale(1.05); }

.ok-ubicacion__datos { display: grid; gap: 2.4rem; }
.ok-dato h2 { margin: 0 0 .9rem; color: var(--ok-navy); font-size: 1.6rem; font-weight: 500; }
.ok-dato p  { margin: 0 0 1.2rem; color: var(--ok-navy); }

.ok-boton-icono {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    width: min(100%, 17.5rem);   /* "Agregar a Agenda" y "Cómo llegar" del mismo ancho */
    min-height: 3.4rem;
    padding: .35rem 1.2rem .35rem .4rem;
    border: 1px solid var(--ok-navy);
    border-radius: .6rem;
    background: var(--ok-blanco);
    color: var(--ok-navy);
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
    transition: box-shadow .2s ease, transform .2s ease;
}
.ok-boton-icono:hover { box-shadow: var(--ok-sombra); transform: translateY(-2px); }

.ok-icono { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; }
.ok-icono--ics {
    align-content: center;
    gap: .05rem;
    border-radius: .4rem;
    background: var(--ok-ics);
    color: var(--ok-blanco);
    font-size: 1.05rem;
    line-height: 1;
}
.ok-icono--ics b { font-size: .5rem; letter-spacing: .04em; }


/* ===== Programa y promociones ============================= */

.ok-programa {
    background: radial-gradient(ellipse 28% 70% at 100% 100%, rgba(120, 165, 235, .35), transparent 70%), var(--ok-blanco);
}

/* Agenda del día: hora a la izquierda, actividad a la derecha. */
.ok-agenda {
    margin: 0;
    padding: 0;
    border-left: 2px solid rgba(0, 69, 128, .18);
    list-style: none;
}
.ok-agenda__punto {
    position: relative;
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: .2rem 1.5rem;
    padding: .9rem 0 .9rem 1.6rem;
    border-bottom: 1px solid var(--ok-linea);
}
.ok-agenda__punto:last-child { border-bottom: 0; }
.ok-agenda__punto::before {
    content: '';
    position: absolute;
    top: 1.3rem;
    left: -7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ok-azul-cta);
    box-shadow: 0 0 0 4px rgba(35, 88, 166, .15);
}
.ok-agenda__hora  { color: var(--ok-navy); font-size: 1.05rem; font-weight: 700; white-space: nowrap; }
.ok-agenda__texto { margin: 0; color: var(--ok-texto); font-size: 1.05rem; }
.ok-agenda__nota  { margin: .3rem 0 1rem; color: var(--ok-texto-suave); font-size: .9rem; font-style: italic; }

/* Logos de los socios tecnológicos (ponencias sin horario fijo). */
.ok-marcas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: .8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ok-marcas__item {
    display: grid;
    place-items: center;
    height: 5rem;
    padding: .7rem 1rem;
    border: 1px solid var(--ok-linea);
    border-radius: .5rem;
    background: var(--ok-blanco);
    box-shadow: 0 2px 8px rgba(0, 38, 90, .06);
}
.ok-marcas__item img { width: auto; max-width: 100%; height: auto; max-height: 3.2rem; object-fit: contain; }
/* Los SVG traen un tamaño natural chico: que ocupen el ancho como los PNG. */
.ok-marcas__item img[src$=".svg"] { width: 100%; }
.ok-marcas__nombre   { color: var(--ok-navy); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Croquis del evento, debajo del mapa. */
.ok-croquis { margin-top: clamp(2rem, 4vw, 3rem); }
.ok-croquis__titulo { margin: 0 0 1rem; color: var(--ok-navy); font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.ok-croquis__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.2rem; }
.ok-croquis__plano { margin: 0; }
/* Misma altura en los dos planos aunque uno sea ancho y el otro alto. */
.ok-croquis__plano a {
    display: block;
    height: clamp(16rem, 28vw, 24rem);
    padding: .6rem;
    border: 1px solid var(--ok-linea);
    border-radius: .5rem;
    background: var(--ok-blanco);
    box-shadow: 0 2px 10px rgba(0, 38, 90, .08);
    transition: transform .2s ease, box-shadow .2s ease;
}
.ok-croquis__plano img { width: 100%; height: 100%; object-fit: contain; }
.ok-croquis__plano a:hover { box-shadow: var(--ok-sombra); transform: translateY(-2px); }
.ok-croquis__plano figcaption { margin-top: .5rem; color: var(--ok-navy); font-weight: 700; }
.ok-croquis__plano figcaption span { color: var(--ok-texto-suave); font-size: .85rem; font-weight: 400; }

/* Promociones: carrusel de tarjetas (3 en escritorio, 2 en tablet, 1 en celular). */
.ok-promos { position: relative; }
.ok-promos__pista {
    display: flex;
    gap: 1.5rem;
    padding: .5rem .25rem 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.ok-promos__pista::-webkit-scrollbar { display: none; }
.ok-promo {
    display: flex;
    flex: 0 0 calc((100% - 3rem) / 3);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ok-linea);
    border-top: 3px solid var(--ok-navy);
    border-radius: .6rem;
    background: var(--ok-blanco);
    box-shadow: 0 2px 10px rgba(0, 38, 90, .08);
    scroll-snap-align: start;
}
.ok-promo > img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--ok-linea); }
/* Marca sin encabezado: su logo, en un recuadro con la proporción de los encabezados. */
.ok-promo__logo {
    display: grid;
    place-items: center;
    aspect-ratio: 1260 / 600;
    padding: 0 22%;
    border-bottom: 1px solid var(--ok-linea);
}
.ok-promo__logo img { width: 100%; height: auto; }
.ok-promo__texto { padding: 1rem 1.2rem 1.3rem; }
.ok-promo__marca {
    color: var(--ok-azul-etiqueta);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.ok-promo__texto h3 { margin: .3rem 0 .5rem; color: var(--ok-navy); font-size: 1.15rem; line-height: 1.3; }
.ok-promo__texto p  { margin: 0 0 .6rem; color: var(--ok-texto-suave); font-size: .92rem; line-height: 1.5; }
.ok-promo__enlace   { display: block; margin-top: .3rem; }

.ok-promos__flecha {
    position: absolute;
    top: 6rem;   /* a media altura del encabezado de la tarjeta */
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--ok-navy);
    border-radius: 50%;
    background: var(--ok-blanco);
    color: var(--ok-navy);
    box-shadow: var(--ok-sombra-cta);
    transform: translateY(-50%);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.ok-promos__flecha:hover { background: var(--ok-navy); color: var(--ok-blanco); }
.ok-promos__flecha--prev { left: -1.1rem; }
.ok-promos__flecha--next { right: -1.1rem; }
.ok-promos__flecha:disabled { opacity: 0; pointer-events: none; }

.ok-promos__puntos { display: flex; justify-content: center; gap: .5rem; }
.ok-promos__puntos button {
    width: .6rem;
    height: .6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ok-azul-hielo);
    cursor: pointer;
}
.ok-promos__puntos button.is-activo { background: var(--ok-navy); }

/* Si todas las tarjetas caben, no hay nada que desplazar. */
.ok-promos.is-completo .ok-promos__flecha,
.ok-promos.is-completo .ok-promos__puntos { display: none; }


/* ===== Registro ========================================== */

.ok-registro {
    display: grid;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    background:
        radial-gradient(ellipse 30% 45% at 100% 18%, rgba(120, 140, 175, .32), transparent 70%),
        radial-gradient(ellipse 26% 36% at 84% 100%, rgba(110, 150, 225, .32), transparent 70%),
        var(--ok-blanco);
}
.ok-registro .ok-contenedor { max-width: 68rem; }

.ok-registro__titulo {
    margin: 0 0 .5rem;
    color: var(--ok-acero);
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    font-weight: 400;
    line-height: 1.2;
}
.ok-registro__titulo b    { color: var(--ok-azul-titular); font-weight: 700; }
.ok-registro__titulo span { color: var(--ok-texto); }

.ok-registro__sub { margin: 0 0 2.5rem; color: var(--ok-texto-sub); font-size: clamp(1.1rem, 2vw, 1.55rem); }

.ok-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.ok-form__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem 2.2rem;
}

.ok-campo label {
    display: block;
    margin: 0 0 .45rem .4rem;
    color: var(--ok-azul-etiqueta);
    font-size: .9rem;
    font-weight: 500;
    text-transform: uppercase;
}
abbr[title="obligatorio"] { color: inherit; text-decoration: none; }

.ok-campo input,
.ok-campo textarea {
    width: 100%;
    min-height: 2.7rem;
    padding: .5rem .8rem;
    border: 1px solid var(--ok-azul-borde);
    border-radius: .35rem;
    background: var(--ok-fondo-campo);
    color: var(--ok-texto);
    font-size: 1rem;   /* 16px: evita el zoom de iOS al enfocar */
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ok-campo input:focus,
.ok-campo textarea:focus {
    outline: 0;
    border-color: var(--ok-azul-cta);
    background: var(--ok-blanco);
    box-shadow: var(--ok-foco);
}

.ok-campo__error { margin: .3rem 0 0 .4rem; color: var(--ok-error); font-size: .82rem; line-height: 1.3; }
.ok-campo__error:empty { display: none; }

.ok-campo.is-invalido input,
.ok-campo.is-invalido textarea,
.ok-check.is-invalido input { border-color: var(--ok-error); box-shadow: 0 0 0 1px var(--ok-error); }

/* Caja azul de requerimientos */
.ok-campo--caja {
    margin-top: 2rem;
    padding: .8rem 1.1rem .5rem;
    border: 1px solid rgba(35, 88, 166, .55);
    border-radius: .6rem;
    background: linear-gradient(90deg, #C6D3EC, #9DB2DA);
    box-shadow: 0 0 14px rgba(35, 88, 166, .32);
    transition: box-shadow .15s ease;
}
.ok-campo--caja:focus-within { box-shadow: var(--ok-foco), 0 0 18px rgba(35, 88, 166, .45); }
/* Destello al llegar con el texto del buscador de la portada. */
.ok-campo--caja.is-precargado { animation: ok-resaltar 2.2s ease-out; }
@keyframes ok-resaltar {
    0%, 40% { box-shadow: 0 0 0 4px rgba(35, 88, 166, .35), 0 0 28px rgba(35, 88, 166, .65); }
}
.ok-campo--caja label { margin: 0 0 .2rem; color: var(--ok-azul-titular); font-size: .85rem; }
.ok-campo--caja textarea,
.ok-campo--caja textarea:focus {
    min-height: 3rem;
    padding: .2rem 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ok-azul-titular);
    resize: vertical;
}
.ok-campo--caja textarea::placeholder { color: #34507F; opacity: .6; font-style: italic; }
.ok-campo__nota { font-weight: 400; text-transform: none; font-style: italic; }

/* Casilla de privacidad */
.ok-check { display: flex; align-items: flex-start; gap: .8rem; margin-top: 1.6rem; }
.ok-check input {
    flex: none;
    width: 1.8rem;
    height: 1.8rem;
    margin: 0;
    border: 1px solid var(--ok-azul-borde);
    border-radius: .3rem;
    background: var(--ok-fondo-campo) center / 70% no-repeat;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .15s ease;
}
.ok-check input:checked {
    border-color: var(--ok-azul-cta);
    background-color: var(--ok-azul-cta);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ok-check__texto { padding-top: .2rem; color: #333; font-size: .95rem; line-height: 1.4; }
.ok-check__texto label { cursor: pointer; }
.ok-check__texto .ok-enlace { margin-left: .35rem; }
.ok-check__texto .ok-campo__error { margin-left: 0; }

/* Pie del formulario */
.ok-form__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    margin-top: 2.2rem;
}
.ok-form__datos { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.ok-form__datos .ok-pildora { min-height: 3.3rem; font-size: .8rem; }
.ok-form__datos .ok-pildora--fecha { font-size: 1rem; }

/* Aviso que reemplaza al formulario al cerrar el registro (config `registro`) */
.ok-cerrado {
    margin-top: 2rem;
    padding: clamp(1.4rem, 4vw, 2.4rem);
    border: 1px solid var(--ok-azul-borde);
    border-radius: .8rem;
    background: var(--ok-info-fondo);
    box-shadow: var(--ok-sombra);
}
.ok-cerrado__gracias {
    margin: 0 0 .4rem;
    color: var(--ok-azul-etiqueta);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ok-cerrado__titulo { margin: 0 0 .8rem; color: var(--ok-navy); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; }
.ok-cerrado__texto { max-width: 48rem; margin: 0 0 1.8rem; color: var(--ok-texto); font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.5; }

.ok-atajo { display: grid; place-items: center; border-radius: .5rem; transition: transform .2s ease; }
.ok-atajo:hover { transform: translateY(-2px); }
.ok-atajo .ok-icono { width: 3.2rem; height: 3.2rem; }
.ok-atajo .ok-icono--ics { font-size: 1.35rem; }
.ok-atajo .ok-icono--ics b { font-size: .6rem; }

.ok-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    min-height: 3.6rem;
    padding: .5rem .7rem .5rem 1.9rem;
    border: 0;
    border-radius: .45rem;
    background: linear-gradient(180deg, var(--ok-azul-cta-alto), var(--ok-azul-cta-bajo));
    box-shadow: var(--ok-sombra-cta);
    color: var(--ok-blanco);
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.ok-cta i {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: var(--ok-gris-boton);
    color: var(--ok-gris-icono);
    font-size: 1rem;
}
.ok-cta:hover { box-shadow: 0 8px 18px rgba(0, 30, 80, .35); filter: brightness(1.07); transform: translateY(-2px); }
.ok-cta:disabled { cursor: progress; filter: saturate(.7); opacity: .8; transform: none; }

.ok-form__legal { margin: 1.4rem 0 0; color: var(--ok-texto-suave); font-size: .75rem; }
.ok-form__legal a { color: inherit; }
/* La insignia flotante se oculta; el aviso legal de arriba la sustituye. */
.grecaptcha-badge { visibility: hidden; }

.ok-form__estado { margin: 1.2rem 0 0; font-weight: 500; }
.ok-form__estado:empty { display: none; }
.ok-form__estado.is-error { color: var(--ok-error); }
.ok-form__estado.is-exito,
.ok-form__estado.is-info {
    padding: .85rem 1rem;
    border-left: 4px solid;
    border-radius: .3rem;
}
.ok-form__estado.is-exito { border-color: var(--ok-exito); background: var(--ok-exito-fondo); color: var(--ok-exito); }
.ok-form__estado.is-info  { border-color: var(--ok-navy); background: var(--ok-info-fondo); color: var(--ok-navy); }


/* ===== Pie de página ===================================== */

.ok-pie { background: var(--ok-navy-profundo); color: var(--ok-blanco); font-size: .9rem; }

.ok-pie__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-block: clamp(1.8rem, 4vw, 2.6rem);
}

/* El logotipo es azul sobre transparente: el filtro lo vuelve blanco. */
.ok-pie__marca img { width: 11rem; filter: brightness(0) invert(1); }
.ok-pie__marca p { margin: 1rem 0 0; font-weight: 700; line-height: 1.45; }

.ok-pie__contacto { text-align: center; line-height: 1.5; }
.ok-pie__contacto p { margin: 0 0 1.1rem; }
.ok-pie__contacto p:last-child { margin-bottom: 0; }
.ok-pie__contacto a { color: var(--ok-azul-luz); }
.ok-pie__cobertura { font-weight: 700; }

.ok-pie__redes { display: flex; gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.ok-pie__redes a { color: var(--ok-blanco); font-size: 1.6rem; transition: opacity .2s ease; }
.ok-pie__redes a:hover { opacity: .75; }

.ok-pie__legal { border-top: 1px solid rgba(255, 255, 255, .25); padding-block: 1rem; text-align: center; }
.ok-pie__legal p { margin: 0; font-size: .85rem; }
.ok-pie__legal a { color: var(--ok-azul-luz); font-weight: 700; text-transform: uppercase; }


/* ===== Ventanas (dialog) ================================= */

.ok-modal {
    width: min(100% - 2rem, 56rem);
    max-height: calc(100vh - 2rem);
    max-height: calc(100svh - 2rem);
    padding: clamp(1.5rem, 4vw, 3.2rem);
    overflow-y: auto;
    border: 0;
    border-radius: .2rem;
    background: var(--ok-navy-profundo);
    box-shadow: var(--ok-sombra-modal);
    color: var(--ok-blanco);
}
/* Sólo opacidad: un transform convertiría al dialog en el contenedor del
   canvas de confeti (position: fixed) mientras dura la animación. */
.ok-modal[open] { animation: ok-aparecer .25s ease-out; }
.ok-modal::backdrop { background: rgba(214, 224, 240, .55); }

@keyframes ok-aparecer { from { opacity: 0; } }

.ok-modal__cerrar {
    position: absolute;
    z-index: 2;
    top: .8rem;
    right: .8rem;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: var(--ok-blanco);
    font-size: 1.2rem;
    cursor: pointer;
}
.ok-modal__cerrar:hover { background: rgba(255, 255, 255, .2); }

.ok-confeti { position: fixed; z-index: 5; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.ok-modal--listo h2 { margin: 0; padding-right: 2.5rem; font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 500; line-height: 1.2; }
.ok-modal__lead { margin: .2rem 0 0; font-size: clamp(1.2rem, 2.6vw, 1.75rem); line-height: 1.25; }
.ok-modal__lead b { color: var(--ok-azul-luz); }
.ok-modal__pregunta { margin: 2.2rem 0 0; color: var(--ok-gris-titulo); font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 700; }
.ok-modal__texto { margin: .1rem 0 1.4rem; font-size: clamp(1.05rem, 2.2vw, 1.4rem); line-height: 1.3; }

.ok-personalizar { display: grid; gap: 1.1rem; max-width: 42rem; }

.ok-campo-oscuro label { display: block; color: var(--ok-gris-titulo); font-size: .92rem; }
.ok-ayuda { margin: 0 0 .4rem; font-size: .85rem; font-style: italic; }

.ok-campo-oscuro input,
.ok-campo-oscuro select,
.ok-campo-oscuro textarea {
    width: 100%;
    min-height: 2.6rem;
    padding: .5rem .8rem;
    border: 1px solid #1D3F7A;
    border-radius: .45rem;
    background-color: var(--ok-navy-noche);
    color: var(--ok-blanco);
    font-size: 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ok-campo-oscuro input { max-width: 24rem; }
.ok-campo-oscuro textarea { min-height: 5.2rem; resize: vertical; }
.ok-campo-oscuro input::placeholder,
.ok-campo-oscuro textarea::placeholder { color: rgba(255, 255, 255, .55); font-style: italic; }
.ok-campo-oscuro :is(input, textarea):focus {
    outline: 0;
    border-color: var(--ok-azul-luz);
    box-shadow: 0 0 0 3px rgba(90, 155, 230, .3);
}
.ok-campo-oscuro .ok-campo__error { margin-left: 0; color: var(--ok-error-claro); }
.ok-modal .ok-form__estado.is-error { color: var(--ok-error-claro); }

.ok-cta--modal { justify-self: center; margin-top: .6rem; padding-inline: 2.2rem; font-size: 1.3rem; }

/* Formulario a la izquierda y ejemplo de gafete a la derecha (diseño SLP). */
.ok-listo__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 13rem;
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.ok-gafete-ejemplo { position: relative; margin: 0; text-align: center; }
/* La imagen ya trae su resplandor y fondo transparente: sin marco ni sombra. */
.ok-gafete-ejemplo img { width: 100%; }
.ok-gafete-ejemplo__sello {
    position: absolute;
    top: .7rem;
    right: -.5rem;
    padding: .2rem .65rem;
    border-radius: .25rem;
    background: var(--ok-ics);
    box-shadow: var(--ok-sombra-cta);
    color: var(--ok-blanco);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ok-gafete-ejemplo figcaption { margin-top: .8rem; color: var(--ok-azul-hielo); font-size: .82rem; line-height: 1.35; }


/* ===== Página de agradecimiento (gracias.php) ============ */

/* Reutiliza el fondo de la bienvenida; sin barra superior no hace falta su margen. */
.ok-gracias { padding-top: clamp(2.5rem, 6vw, 4rem); }

.ok-gracias__contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 52rem;
    text-align: center;
}
.ok-gracias__contenido .ok-logo { margin-bottom: 2rem; }
.ok-gracias__contenido .ok-logo__sello { width: clamp(6rem, 12vw, 9.5rem); }
.ok-gracias__contenido .ok-logo__anio  { font-size: clamp(3rem, 6.5vw, 5.2rem); }

.ok-gracias__titulo {
    margin: .6rem 0 1.2rem;
    color: var(--ok-navy);
    font-size: clamp(2.2rem, 5.5vw, 4.2rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.01em;
}
.ok-gracias__titulo span { display: block; color: var(--ok-acero); }

.ok-gracias__texto {
    max-width: 40rem;
    margin: 0;
    color: var(--ok-texto);
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.5;
}

.ok-gracias__aviso { width: 100%; margin-block: 2.2rem; }
.ok-gracias__aviso .ok-cerrado__texto { margin: 0 auto; }

.ok-modal--galeria { display: flex; flex-direction: column; gap: 1rem; width: min(100% - 2rem, 72rem); height: calc(100svh - 2rem); }
.ok-modal--galeria:not([open]) { display: none; }
.ok-modal--galeria h2 { margin: 0; padding-right: 2.5rem; font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 500; }
.ok-galeria { flex: 1; width: 100%; min-height: 0; border: 0; border-radius: .4rem; background: var(--ok-navy-noche); }


/* ===== Tablet ============================================ */

@media (max-width: 960px) {
    :root { --ok-topbar-alto: 4rem; }

    .ok-topbar__toggle {
        display: grid;
        place-items: center;
        flex: none;
        width: 2.6rem;
        height: 2.6rem;
        border: 1px solid rgba(0, 69, 128, .25);
        border-radius: .4rem;
        background: var(--ok-blanco);
        color: var(--ok-navy);
        font-size: 1.1rem;
        cursor: pointer;
    }
    .ok-topbar__cta { padding-inline: 1rem; font-size: .85rem; }

    .ok-menu {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .25rem 1rem 1rem;
        background: var(--ok-blanco);
        box-shadow: 0 14px 24px rgba(0, 38, 90, .12);
    }
    .ok-menu.is-abierto { display: flex; }
    .ok-menu a { padding: .85rem .25rem; border-bottom: 1px solid var(--ok-linea); }
    .ok-menu a::after { display: none; }
    .ok-menu a.is-activo { font-weight: 700; }

    .ok-hero__grid { grid-template-columns: 1fr; gap: 2.2rem; text-align: center; }
    .ok-hero__marca { order: -1; gap: 1.2rem; }
    .ok-hero__texto { display: flex; flex-direction: column; align-items: center; }
    .ok-cuenta { align-items: center; }
    .ok-pildoras { justify-content: center; }

    .ok-ubicacion__grid { grid-template-columns: 1fr; }

    .ok-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1.4rem; }

    .ok-promo { flex-basis: calc((100% - 1.5rem) / 2); }
}


/* ===== Celular =========================================== */

@media (max-width: 600px) {
    .ok-contenedor { width: min(100% - 2rem, var(--ok-max)); }
    .ok-seccion { padding-block: 4.5rem 3rem; }
    .ok-seccion--compacta { padding-block: 2.5rem; }

    .ok-hero { padding-top: calc(var(--ok-topbar-alto) + 1rem); }
    .ok-hero__titulo { margin-bottom: 1.2rem; }
    .ok-buscador { min-height: 3.2rem; margin-bottom: 1.6rem; padding-left: 1.1rem; }
    .ok-buscador input { font-size: 1rem; }
    .ok-buscador button { width: 2.6rem; height: 2.6rem; font-size: 1.5rem; }
    .ok-pildoras { flex-direction: column; width: 100%; gap: .7rem; }
    .ok-hero__copy { font-size: 1rem; }
    .ok-cuenta__cajas { gap: .4rem; }
    .ok-cuenta__caja { min-width: 3.9rem; padding: .5rem .35rem .4rem; }
    .ok-cuenta__num { font-size: 1.6rem; }

    .ok-mapa__lienzo { height: 22rem; }
    .ok-mapa__pin { width: 7rem; }
    .ok-boton-icono { width: 100%; }

    .ok-registro__sub { margin-bottom: 1.8rem; }
    .ok-form__grid { grid-template-columns: 1fr; }
    .ok-form__pie { flex-direction: column; align-items: stretch; }
    .ok-form__datos { justify-content: center; }
    .ok-form__datos .ok-pildora { flex: 1 1 100%; }
    .ok-cta { width: 100%; }

    .ok-pie__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .ok-pie__marca { display: grid; justify-items: center; }

    .ok-gracias__contenido .ok-logo { gap: .5rem; }
    .ok-modal--galeria { padding: 1.2rem; }

    .ok-listo__cuerpo { grid-template-columns: 1fr; }
    .ok-gafete-ejemplo { width: 11rem; margin-inline: auto; }

    .ok-agenda__punto { grid-template-columns: 1fr; padding-left: 1.2rem; }
    .ok-marcas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ok-marcas__item { height: 4.2rem; padding: .6rem; }

    /* Una tarjeta a la vez, asomando la siguiente; se desliza con el dedo. */
    .ok-promos__pista { gap: 1rem; }
    .ok-promo { flex-basis: 85%; scroll-snap-align: center; }
    .ok-promos__flecha { display: none; }
}


@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}