/* ==========================================================================
 * THE ICONIC — Sitio publico web.iconic.cl (Premium Solid Design)
 * Arquitectura: ITCSS Modular / Cero IA Look (Solid, Glassmorphism, Contraste)
 * ========================================================================== */


/* ==========================================================================
   [01] THEME: Tokens y Variables Root
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Solid Brand Colors */
    --c-primary:   #ed1e92;
    --c-primary-d: #AB094B;
    --c-primary-l: #fde4f2;
    --c-dark:      #111827; 
    --c-dark-soft: #1F2937;
    --c-body:      #4B5563; 
    --c-muted:     #9CA3AF;
    --c-border:    #E5E7EB;
    --c-bg:        #ffffff;
    --c-bg-soft:   #F9FAFB;

    /* Typographies */
    --f-heading: 'Poppins', -apple-system, Segoe UI, Roboto, sans-serif;
    --f-body:    'Mulish', -apple-system, Segoe UI, Roboto, sans-serif;

    /* Depth and Shadows */
    --radius:      12px; 
    --shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow:      0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-primary: 0 10px 25px -5px rgba(237, 30, 146, 0.3);

    /* Layout Constraints */
    --container:   1200px;
}


/* ==========================================================================
   [02] RESETS Y GLOBALES
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--c-body);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

a { color: var(--c-primary); text-decoration: none; transition: all 0.3s ease; }
a:hover { color: var(--c-primary-d); }

h1, h2, h3, h4, h5 {
    font-family: var(--f-heading);
    color: var(--c-dark);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

p { margin: 0 0 16px; }


/* ==========================================================================
   [03] GRID OMNIDIRECCIONAL & UTILITIES
   ========================================================================== */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* Micro Grid System (Reemplazo de Bootstrap dependencias) */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}
.row.align-items-center { align-items: center; }

[class*="col-"] {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
.col-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 768px) {
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}

@media (min-width: 992px) {
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .offset-lg-1 { margin-left: 8.333333%; }
    .offset-lg-2 { margin-left: 16.666667%; }
}

/* Base Spacing Utilities */
.mb-4 { margin-bottom: 24px; }
.mb-5 { margin-bottom: 48px; }
.mt-3 { margin-top: 20px; }
.mt-4 { margin-top: 30px; }
.mt-5 { margin-top: 50px; }
.text-center { text-align: center; }

@media (min-width: 768px) { .mb-md-0 { margin-bottom: 0 !important; } }
@media (min-width: 992px) { .mb-lg-0 { margin-bottom: 0 !important; } }

/* Scroll Reveal Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }


/* ==========================================================================
   [04] CORE COMPONENTS (Botones, Forms, Alertas, Cards Genéricas)
   ========================================================================== */

/* Botones */
.btn-p {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 34px;
    font-family: var(--f-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: var(--c-primary);
    border: 2px solid var(--c-primary);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    overflow: hidden;
}
.btn-p:hover {
    background: var(--c-primary-d);
    border-color: var(--c-primary-d);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}
.btn-p--outline { background: transparent; color: var(--c-primary); }
.btn-p--outline:hover { background: var(--c-primary); color: #fff; }
.btn-p--white { background: #fff; color: var(--c-dark); border-color: #fff; }
.btn-p--white:hover {
    background: var(--c-bg-soft); color: var(--c-primary);
    border-color: var(--c-bg-soft); box-shadow: var(--shadow-lg);
}
.btn-p--sm { padding: 10px 24px; font-size: 0.85rem; }

/* Formularios Generales */
.contact-form {
    background: #fff;
    border-radius: var(--radius);
    padding: 48px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--c-border);
}
.contact-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
@media (max-width: 600px) { .contact-form__grid { grid-template-columns: 1fr; } }
.contact-form label {
    display: block;
    font-family: var(--f-heading);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--c-dark);
    margin-bottom: 8px;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 14px 18px;
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    font-family: var(--f-body);
    font-size: 1rem;
    color: var(--c-dark);
    transition: all 0.3s ease;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: var(--c-primary);
    background: #fff;
    box-shadow: 0 0 0 4px var(--c-primary-l);
}
.contact-form textarea { min-height: 140px; resize: vertical; }

.contact-place {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 30px;
}
.contact-place__ico {
    width: 54px; height: 54px;
    background: var(--c-bg-soft);
    color: var(--c-primary);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 1.3rem;
}
.contact-place h5 { font-size: 1.1rem; margin-bottom: 6px; }
.contact-place p { margin: 0; font-size: 1rem; color: var(--c-body); line-height: 1.6;}

/* Alertas de Retrolimentación */
.alert-p {
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 1rem;
    font-weight: 500;
}
.alert-p--ok  { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }
.alert-p--err { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

/* Access Card Premium (Reemplazo moderno de event-card) */
.access-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--c-border);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    height: 100%;
}
.access-card:hover {
    transform: translateY(-8px);
    border-color: var(--c-primary-l);
    box-shadow: 0 30px 60px -10px rgba(220,13,101,0.15);
}
.access-card__icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: var(--c-bg-soft);
    color: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 24px;
}
.access-card h3 { font-weight: 800; font-size: 1.4rem; margin-bottom: 12px; }
.access-card p { color: var(--c-body); line-height: 1.6; margin-bottom: 30px; }

/* Variante centrada. El icono es un bloque de 64px, asi que `text-align` no
   basta: necesita margenes automaticos o queda pegado a la izquierda con el
   titulo centrado, que era justo el desalineo que se veia. */
.access-card--center { text-align: center; }
.access-card--center .access-card__icon { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
 * Valores de inscripcion
 *
 * Tarjeta de precio para fondo claro (las .award-card son translucidas y solo
 * funcionan sobre secciones oscuras). El monto manda: tipografia de titular,
 * y la division como antetitulo en magenta.
 * -------------------------------------------------------------------------- */
.price-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}
.price-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    padding: 42px 24px 34px;   /* extra arriba: ahi vive el badge de cupos */
    text-align: center;
    box-shadow: var(--shadow-lg);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Aviso de cupos limitados, montado sobre el borde superior de la tarjeta. */
.price-card__badge {
    position: absolute;
    top: 0; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--c-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 50px;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(237, 30, 146, 0.35);
}
.price-card:hover {
    transform: translateY(-8px);
    border-color: var(--c-primary-l);
    box-shadow: 0 30px 60px -10px rgba(220, 13, 101, 0.15);
}
.price-card__div {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-primary);
    margin-bottom: 14px;
}
.price-card__amount {
    font-family: var(--f-heading);
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 800;
    color: var(--c-dark);
    line-height: 1;
}
.price-card__unit {
    display: block;
    margin-top: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--c-primary);
}
.price-card__desc {
    margin: 16px 0 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--c-body);
}
/* Total de la rutina: evita que el precio unitario se lea como precio final. */
.price-card__total {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--c-border);
    font-size: 0.88rem;
    color: var(--c-body);
}
.price-card__total strong {
    display: block;
    margin-top: 4px;
    font-size: 1.15rem;
    color: var(--c-dark);
    font-weight: 800;
}
/* --------------------------------------------------------------------------
 * Cierre de inscripciones
 *
 * Banda oscura de alto contraste: no es una nota informativa, es un llamado a
 * la accion. El numero de dias manda, con tipografia de titular.
 *
 * Escala sola (el componente decide la clase segun cuanto falte):
 *   --normal   magenta de marca
 *   --urgente  <=30 dias, con etiqueta
 *   --critico  <=7 dias, en rojo y con pulso
 *   --cerrado  plazo vencido: gris, sin urgencia
 * -------------------------------------------------------------------------- */
.deadline {
    --dl-acento: var(--c-primary);

    display: flex;
    align-items: center;
    gap: 28px;
    max-width: 940px;
    margin: 0 auto;
    padding: 30px 34px;
    border-radius: 20px;
    background: linear-gradient(135deg, #1b2836 0%, var(--c-dark) 100%);
    box-shadow: 0 20px 50px -12px rgba(16, 24, 40, 0.35);
    color: #fff;
}

/* Contador: el numero es el protagonista de la banda. */
.deadline__contador {
    flex-shrink: 0;
    text-align: center;
    min-width: 96px;
    padding-right: 26px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.deadline__num {
    display: block;
    font-family: var(--f-heading);
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 0.95;
    color: var(--dl-acento);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.deadline__label {
    display: block;
    margin-top: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.65);
}

.deadline__body { flex: 1; min-width: 0; }
.deadline__tag {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 12px;
    border-radius: 50px;
    background: var(--dl-acento);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.deadline__body h4 {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
}
.deadline__body p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.6;
    font-size: 0.95rem;
}
.deadline__body strong { color: #fff; }

.deadline__accion { flex-shrink: 0; }

/* Estados ---------------------------------------------------------------- */
.deadline--critico { --dl-acento: #ff3b30; }
.deadline--critico .deadline__num { animation: dl-pulso 1.6s ease-in-out infinite; }

@keyframes dl-pulso {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.75; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
    .deadline--critico .deadline__num { animation: none; }
}

.deadline--cerrado {
    --dl-acento: rgba(255, 255, 255, 0.45);
    background: linear-gradient(135deg, #39424e 0%, #2b323c 100%);
}
.deadline--cerrado .deadline__num { font-size: 2.2rem; }

@media (max-width: 780px) {
    .deadline { flex-direction: column; text-align: center; gap: 18px; padding: 28px 22px; }
    .deadline__contador {
        padding-right: 0; border-right: 0;
        padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.14);
        width: 100%;
    }
    .deadline__accion { width: 100%; }
    .deadline__accion .btn-p { display: block; }
}

.price-note {
    max-width: 760px;
    margin: 30px auto 0;
    text-align: center;
    font-size: 0.92rem;
    color: var(--c-body);
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
 * Acordeon de preguntas frecuentes
 *
 * Construido sobre <details>/<summary> nativos: sin JavaScript, accesible por
 * teclado y funciona aunque el JS falle. El triangulo por defecto se oculta y
 * se reemplaza por un signo + que rota al abrir.
 * -------------------------------------------------------------------------- */
.faq { max-width: 900px; margin: 0 auto; }

.faq__item {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq__item[open] {
    border-color: var(--c-primary-l);
    box-shadow: var(--shadow);
}

.faq__q {
    list-style: none;               /* Firefox */
    cursor: pointer;
    padding: 22px 56px 22px 26px;
    position: relative;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--c-dark);
    transition: color 0.2s ease;
}
.faq__q::-webkit-details-marker { display: none; }   /* Safari / Chrome */
.faq__q:hover { color: var(--c-primary); }

.faq__q::after {
    content: '+';
    position: absolute;
    right: 24px; top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--c-primary);
    transition: transform 0.25s ease;
}
.faq__item[open] .faq__q::after { transform: translateY(-50%) rotate(45deg); }

.faq__a {
    padding: 0 26px 24px;
    color: var(--c-body);
    line-height: 1.75;
}
.faq__a p { margin: 0 0 14px; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a ul { margin: 0 0 14px; padding-left: 20px; }
.faq__a li { margin-bottom: 10px; }


/* ==========================================================================
   [05] LAYOUT MAESTRO (Navegación, Secciones y Footer)
   ========================================================================== */
.top-header {
    background: var(--c-dark);
    color: #fff;
    font-size: 0.85rem;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.top-header a { color: rgba(255,255,255,0.8); }
.top-header a:hover { color: #fff; }
.top-header__inner {
    display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
}
.top-header__info { display: flex; gap: 24px; flex-wrap: wrap; }
.top-header__info span { display: inline-flex; align-items: center; gap: 8px; font-weight: 500;}
.top-header__social { display: flex; gap: 12px; }
.top-header__social a {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem; border-radius: 50%; background: rgba(255,255,255,0.1);
}
.top-header__social a:hover { background: var(--c-primary); }

.main-header {
    background: rgba(255, 255, 255, 0.95);
    padding: 20px 0; box-shadow: var(--shadow-sm);
    position: sticky; top: 0; z-index: 100; transition: all 0.3s ease;
}
.main-header.scrolled {
    padding: 14px 0; background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow);
}
.main-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.main-header__brand {
    font-family: var(--f-heading); font-size: 1.6rem; font-weight: 800;
    color: var(--c-dark); text-transform: uppercase; letter-spacing: 0.05em;
    display: flex; align-items: center;
}
.main-header__brand span { color: var(--c-primary); margin-left: 4px; }

.main-nav { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.main-nav a {
    color: var(--c-dark-soft); font-weight: 600; font-family: var(--f-heading);
    font-size: 0.95rem; position: relative; padding: 8px 0;
}
.main-nav a:hover, .main-nav a.active { color: var(--c-primary); }
.main-nav a::after {
    content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px;
    background: var(--c-primary); border-radius: 2px; transition: width 0.3s ease;
}
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }

.main-header__toggle {
    display: none; background: var(--c-bg-soft); border: 1px solid var(--c-border);
    width: 44px; height: 44px; border-radius: var(--radius); font-size: 1.2rem;
    cursor: pointer; color: var(--c-dark); transition: background 0.3s;
}
.main-header__toggle:hover { background: var(--c-border); }

/* Acceso al portal. Discreto a proposito: lo usan academias ya registradas y
   el staff, no el visitante que llega por primera vez. El CTA de inscripcion
   sigue siendo el elemento dominante del header. */
/* Acceso al portal.
 *
 * Va como boton fantasma y no como texto suelto: entre el ultimo item del menu
 * y el CTA rosado, un enlace plano queda huerfano —no se lee ni como navegacion
 * ni como accion— y ademas competia mal por atencion.
 *
 * Usa la misma tipografia y el mismo tono que el menu (`--c-dark-soft`). Antes
 * apuntaba a `--c-text-soft`, que no existe en la hoja: caia al respaldo #666 y
 * quedaba mas claro que todo lo que tenia al lado, con aspecto de deshabilitado.
 */
.main-header__login {
    display: inline-flex;
    align-items: center;
    font-family: var(--f-heading);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--c-dark-soft);
    text-decoration: none;
    padding: 10px 18px;
    margin-right: 12px;
    border: 1.5px solid var(--c-border, #e5e7eb);
    border-radius: 999px;
    white-space: nowrap;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.main-header__login:hover {
    color: var(--c-primary);
    border-color: var(--c-primary);
    background: rgba(0, 0, 0, .02);
}

/* El acceso dentro del menu solo aparece en movil, donde el del header se
   oculta. En escritorio estarian los dos y uno sobra. */
.main-nav__solo-movil { display: none; }

@media (max-width: 991px) {
    .main-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; background: #fff; padding: 24px;
        border-top: 1px solid var(--c-border); box-shadow: var(--shadow-lg); gap: 16px;
    }
    .main-header.open .main-nav { display: flex; }
    .main-header { position: relative; }
    .main-header__toggle { display: block; }
    .main-header__cta { display: none; }
    /* En movil el acceso vive dentro del menu desplegable, para no competir por
       el poco ancho que queda junto al logo. */
    .main-header__login { display: none; }
    .main-nav__solo-movil { display: block; }
}

/* Modificadores Globales de Sección */
.section { padding: 110px 0; }
.section--soft { background: var(--c-bg-soft); }
.section--dark { background: var(--c-dark); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

.section-head { text-align: center; margin-bottom: 40px; }
.section-head__pre {
    display: inline-block; font-family: var(--f-heading); font-size: 0.85rem;
    font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--c-primary); padding: 6px 16px; background: var(--c-primary-l);
    border-radius: 4px; margin-bottom: 16px;
}
.section-head__title {
    font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; margin-bottom: 18px; letter-spacing: -0.02em;
}
.section-head__title span { color: var(--c-primary); }
.section-head__lead {
    color: var(--c-body); max-width: 650px; margin: 0 auto; font-size: 1.1rem; line-height: 1.8;
}
.section--dark .section-head__lead { color: rgba(255,255,255,0.8) !important; }

/* Sticky CTA Footer */
.sticky-cta {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: rgba(17, 24, 39, 0.95); backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(255,255,255,0.1);
    padding: 16px 0; z-index: 999; transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta__inner {
    max-width: var(--container); margin: 0 auto; padding: 0 24px;
    display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
}
@media (max-width: 600px) { .sticky-cta__inner { justify-content: center; text-align: center; } }
.sticky-cta__text h4 { color: #fff; font-size: 1.1rem; margin: 0 0 4px; }
.sticky-cta__text p { color: var(--c-primary); font-size: 0.9rem; font-weight: 600; margin: 0; text-transform: uppercase; letter-spacing: 0.05em; }

/* Footer Base */
.footer-p {
    background: var(--c-dark); color: rgba(255,255,255,0.7);
    padding: 80px 0 40px; border-top: 1px solid rgba(255,255,255,0.05);
}
.footer-p a { color: rgba(255,255,255,0.7); }
.footer-p a:hover { color: #fff; }
.footer-p__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px; margin-bottom: 60px; }
@media (max-width: 767px) { .footer-p__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-p__grid { grid-template-columns: 1fr; } }
.footer-p__brand {
    font-family: var(--f-heading); font-size: 1.8rem; font-weight: 800; color: #fff;
    margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.05em;
}
.footer-p__brand span { color: var(--c-primary); }
.footer-p__desc { line-height: 1.8; margin-bottom: 24px; }
.footer-p h5 { color: #fff; font-size: 1.05rem; font-weight: 700; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.05em; }
.footer-p ul { list-style: none; padding: 0; margin: 0; }
.footer-p ul li { margin-bottom: 14px; }
.footer-p__social { display: flex; gap: 12px; margin-top: 10px; }
.footer-p__social a {
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05); border-radius: 50%; color: #fff; transition: all 0.3s ease;
}
.footer-p__social a:hover { background: var(--c-primary); transform: translateY(-2px); }
.footer-p__bottom { padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; font-size: 0.95rem; }
.footer-p__bottom p { margin: 0; }


/* ==========================================================================
   [06] MARKETING WIDGETS (Bloques visuales de alto impacto publicitario)
   ========================================================================== */


/* Contador regresivo (Glassmorphism) */
.countdown { 
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; 
    max-width: 540px; margin-top: 50px; 
}
@media (max-width: 991px) { .countdown { margin: 50px auto 0; } }
@media (max-width: 480px) { .countdown { gap: 8px; } }

.countdown__item {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); 
    border-radius: var(--radius); padding: 24px 10px; text-align: center; 
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    transition: all 0.4s ease; position: relative; overflow: hidden;
}
.countdown__item::before {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; 
    background: var(--c-primary); transform: scaleX(0); transition: transform 0.4s ease;
}
.countdown__item:hover { 
    transform: translateY(-8px); background: rgba(255,255,255,0.08); 
    border-color: rgba(255,255,255,0.2); box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.countdown__item:hover::before { transform: scaleX(1); }

.countdown__num { 
    font-family: var(--f-heading); font-size: clamp(2rem, 5vw, 2.8rem); 
    font-weight: 800; color: #fff; line-height: 1; text-shadow: 0 0 15px rgba(237,30,146,0.3);
}
.countdown__label { 
    font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; 
    color: rgba(255,255,255,0.6); margin-top: 10px; font-weight: 700; 
}
.countdown__item:hover .countdown__label { color: var(--c-primary); }


/* Page Hero Interior */
.page-hero {
    background: linear-gradient(to right, rgba(17, 24, 39, 0.95) 0%, rgba(17, 24, 39, 0.75) 100%), 
                url('../img/background_header.webp') center/cover no-repeat;
    color: #fff; padding: 120px 0 100px; text-align: center;
    position: relative; border-bottom: 4px solid var(--c-primary);
}
.page-hero h1 { color: #fff; font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 16px; }
.page-hero__crumb { font-size: 1rem; color: rgba(255,255,255,0.7); }
.page-hero__crumb a { color: #fff; font-weight: 600; }

/* Bento Box Grid */
.bento-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-bottom: 40px; }
@media (min-width: 992px) { .bento-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(200px, auto); } }
/* `.bento-grid` fija tres columnas en escritorio, asi que dos tarjetas dejaban
   un hueco a la derecha. El modificador va DESPUES y con la misma
   especificidad, que es lo que lo hace ganar sin un !important. */
@media (min-width: 992px) { .bento-grid--2 { grid-template-columns: repeat(2, 1fr); } }
.bento-item {
    background: #fff; border-radius: var(--radius); padding: 36px 30px; box-shadow: var(--shadow);
    border: 1px solid var(--c-border); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column; justify-content: flex-start; position: relative; overflow: hidden;
}
.bento-item:hover { transform: translateY(-6px) scale(1.01); box-shadow: var(--shadow-lg); border-color: var(--c-primary-l); }
.bento-item__ico {
    width: 60px; height: 60px; background: var(--c-bg-soft); color: var(--c-primary);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin-bottom: 20px; transition: all 0.3s ease; flex-shrink: 0;
}
.bento-item:hover .bento-item__ico { background: var(--c-primary); color: #fff; }
.bento-item__body h4 { font-size: 1.25rem; margin-bottom: 10px; }
.bento-item__body p { font-size: 1rem; margin: 0; line-height: 1.6; color: var(--c-body); }

/* Iconic Standards (Pillares de Valor) */
.iconic-standards {
    display: flex; gap: 30px; margin-top: 50px;
    background: #fff; padding: 36px; border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.04);
    border: 1px solid var(--c-border);
}
@media (max-width: 991px) { .iconic-standards { flex-direction: column; gap: 20px; padding: 24px; } }

.standard-item {
    flex: 1; display: flex; align-items: flex-start; gap: 20px;
    padding: 16px; border-radius: 16px; transition: all 0.3s ease;
}
.standard-item:hover { background: var(--c-bg-soft); transform: translateY(-3px); }

.standard-item__icon {
    width: 54px; height: 54px; border-radius: 14px;
    background: var(--c-primary-l); color: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; flex-shrink: 0; transition: all 0.3s ease;
}
.standard-item:hover .standard-item__icon { background: var(--c-primary); color: #fff; }

.standard-item__body h5 {
    margin: 0 0 6px; font-size: 1.1rem; font-weight: 800; color: var(--c-dark);
}
.standard-item__body p {
    margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--c-body);
}

/* Inscription Step Flow Vertical */
.step-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; position: relative; margin-top: 60px; }
@media (min-width: 992px) {
    .step-flow::before { content: ''; position: absolute; top: 32px; left: 50px; right: 50px; height: 2px; background: var(--c-border); z-index: 0; }
}
.step-item {
    position: relative; z-index: 1; background: #fff; border-radius: 20px; padding: 30px 24px; text-align: center;
    box-shadow: var(--shadow); border: 1px solid var(--c-border); transition: transform 0.3s;
}
.step-item:hover { transform: translateY(-5px); border-color: var(--c-primary-l); }
.step-item__num {
    width: 64px; height: 64px; border-radius: 50%; background: var(--c-primary); color: #fff; display: flex; align-items: center; justify-content: center;
    font-family: var(--f-heading); font-weight: 800; font-size: 1.6rem; margin: -60px auto 20px auto; box-shadow: 0 10px 20px rgba(220,13,101,0.3); border: 4px solid #fff;
}
.step-item h4 { font-weight: 700; font-size: 1.3rem; margin-bottom: 10px; color: var(--c-dark); }
.step-item p { color: var(--c-body); font-size: 0.95rem; line-height: 1.5; margin: 0; }

/* Hall of Icons Ganadores */
.hall-card {
    background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: all 0.3s; border: 1px solid var(--c-border);
}
.hall-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.hall-card__img { aspect-ratio: 1; background: var(--c-bg-soft); display: flex; align-items: center; justify-content: center; color: var(--c-primary); font-family: var(--f-heading); font-size: 3.5rem; font-weight: 800; }
.hall-card__body { padding: 24px; }
.hall-card__year {
    display: inline-block; font-size: 0.8rem; font-weight: 700; color: #fff; background: var(--c-primary); padding: 6px 12px; border-radius: 4px; margin-bottom: 12px;
}
.hall-card__name { font-size: 1.25rem; margin-bottom: 6px; }
.hall-card__cat { color: var(--c-body); font-size: 1rem; margin: 0; }

/* Venue Parallax Image */
.venue-parallax {
    position: relative; background: url('../img/bg-cta.webp') center/cover no-repeat fixed; color: #fff; padding: 140px 0; overflow: hidden;
}
.venue-parallax__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17, 24, 39, 0.95) 0%, rgba(17, 24, 39, 0.7) 100%); z-index: 1; }
.venue-parallax .relative { position: relative; z-index: 2; }
.venue-parallax__content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 991px) { .venue-parallax__content { grid-template-columns: 1fr; text-align: center; } }
.venue-parallax__date { font-family: var(--f-heading); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 800; color: var(--c-primary); line-height: 1; margin-bottom: 16px; letter-spacing: -0.02em; }
.venue-parallax__left h3 { color: #fff; font-size: 2rem; margin-bottom: 8px; }
.venue-parallax__left p { font-size: 1.15rem; color: rgba(255,255,255,0.8); }
.venue-parallax__right {
    background: rgba(255,255,255,0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1); padding: 40px; border-radius: var(--radius);
}
.venue-parallax__right h3 { color: #fff; font-size: 1.6rem; margin-bottom: 12px; }
.venue-parallax__right p { margin-bottom: 30px; font-size: 1.05rem; color: rgba(255,255,255,0.8); }


/* ==========================================================================
   [07] COMPONENTES: Split Benefits (Columna Motivacional Split-Screen)
   Usado en: publico/components/split_benefits.php
   ========================================================================== */
.split-benefits__title {
    font-size: clamp(2.4rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
}
.split-benefits__lead {
    font-size: 1.1rem;
    color: var(--c-body);
    margin-bottom: 40px;
    line-height: 1.7;
}
.split-benefits__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.split-benefits__item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.split-benefits__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--c-primary-l);
    color: var(--c-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.split-benefits__item h5 { margin: 0 0 6px; font-weight: 700; color: var(--c-dark); }
.split-benefits__item p  { margin: 0; font-size: 0.95rem; color: var(--c-body); }
.split-benefits__back    { margin-top: 40px; }


/* ==========================================================================
   [08] COMPONENTES: Masonry Gallery (Galería de Eventos Pasados)
   Usado en: publico/components/gallery_masonry.php
   Imágenes en: public/img/gallery/
   ========================================================================== */
.masonry-gallery {
    columns: 3;
    column-gap: 16px;
}
@media (max-width: 900px) { .masonry-gallery { columns: 2; } }
@media (max-width: 560px) { .masonry-gallery { columns: 1; } }

.masonry-item {
    break-inside: avoid;
    margin-bottom: 16px;
}
.masonry-item__inner {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: zoom-in;
}
.masonry-item__inner img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.masonry-item__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(17,24,39,0.92) 0%, transparent 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.masonry-item__inner:hover img            { transform: scale(1.06); }
.masonry-item__inner:hover .masonry-item__overlay { opacity: 1; }

.masonry-item__year {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-primary);
    background: rgba(237,30,146,0.15);
    border: 1px solid rgba(237,30,146,0.3);
    border-radius: 50px;
    padding: 3px 10px;
    margin-bottom: 8px;
    width: fit-content;
}
.masonry-item__caption {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
    font-family: var(--f-heading);
}

/* ==========================================================================
   [08.5] COMPONENTES: Momentum Gallery (Cinta Infinita)
   ========================================================================== */
.momentum-gallery {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0 0 80px 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.momentum-ribbon {
    display: flex;
    width: 100%;
    overflow: hidden;
    user-select: none;
}

.momentum-ribbon__track {
    display: flex;
    white-space: nowrap;
    gap: 0;
    padding: 0;
}

/* Animaciones */
@keyframes scroll-left {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 12px)); }
}

.momentum-ribbon--left .momentum-ribbon__track {
    animation: scroll-left 110s linear infinite;
}

/* Pausa al hover */
.momentum-ribbon:hover .momentum-ribbon__track {
    animation-play-state: paused;
}

.momentum-item {
    flex-shrink: 0;
    height: 600px;
    width: 400px;
    border-radius: 0;
    overflow: hidden;
    border-right: 1px solid rgba(255,255,255,0.05); /* Separación sutil casi imperceptible */
    transition: filter 0.4s ease, transform 0.4s ease;
    background: var(--c-dark-soft);
}

.momentum-item:hover {
    filter: brightness(1.2);
    z-index: 10;
}

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

/* Desvanecimiento en los extremos */
.momentum-gallery__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 15%;
    z-index: 5;
    pointer-events: none;
}

.momentum-gallery__fade--left {
    left: 0;
    background: linear-gradient(to right, var(--c-dark) 0%, transparent 100%);
}

.momentum-gallery__fade--right {
    right: 0;
    background: linear-gradient(to left, var(--c-dark) 0%, transparent 100%);
}

@media (max-width: 768px) {
    .momentum-item { height: 400px; width: 266px; }
    .momentum-gallery { gap: 0; padding: 0 0 60px 0; }
}


/* ==========================================================================
   [09] SECCIÓN: ¿Por qué participar? (Why Section)
   Componentes: .why-grid, .why-card, .why-card--cta, .why-stats
   ========================================================================== */

/* Grid principal: 3 cols en desktop, 2 en tablet, 1 en mobile */
.why-section { background: var(--c-bg-soft); }

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 60px;
}
@media (max-width: 991px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .why-grid { grid-template-columns: 1fr; } }

/* Tarjeta Feature Numerada */
.why-card {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 40px 30px 36px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.why-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.08);
    border-color: var(--c-primary);
}
.why-card:hover .why-card__accent { opacity: 1; transform: scaleX(1); }

/* Número decorativo de fondo */
.why-card__num {
    position: absolute;
    top: 16px;
    right: 20px;
    font-family: var(--f-heading);
    font-size: 4.5rem;
    font-weight: 800;
    color: var(--c-border);
    line-height: 1;
    user-select: none;
    transition: color 0.3s ease;
}
.why-card:hover .why-card__num { color: var(--c-primary-l); }

/* Ícono */
.why-card__ico {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--c-primary-l);
    color: var(--c-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}
.why-card:hover .why-card__ico { transform: rotate(-5deg) scale(1.1); background: var(--c-primary); color: #fff; }

/* Textos */
.why-card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--c-dark);
    margin: 0 0 12px;
    line-height: 1.3;
}
.why-card p {
    font-size: 0.95rem;
    color: var(--c-body);
    line-height: 1.7;
    margin: 0;
}
.why-card p strong { color: var(--c-dark); }

/* Acento inferior animado */
.why-card__accent {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-primary), var(--c-primary-d));
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: opacity 0.3s ease, transform 0.4s ease;
}

/* Tarjeta CTA de conversión (fondo oscuro magenta) */
.why-card--cta {
    background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-dark-soft) 100%);
    border-color: rgba(237,30,146,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.why-card--cta:hover { border-color: var(--c-primary); }

.why-card__cta-inner { text-align: center; position: relative; z-index: 1; }

.why-card__cta-ico {
    font-size: 2.5rem;
    color: var(--c-primary);
    display: block;
    margin-bottom: 20px;
}
.why-card--cta h4 { color: #fff; font-size: 1.25rem; margin-bottom: 14px; }
.why-card--cta p  { color: rgba(255,255,255,0.7); font-size: 0.92rem; margin-bottom: 28px; }
.why-card--cta .why-card__accent { display: none; }


/* ==========================================================================
   [10] HEADER LOGO + HERO DATE LINE
   ========================================================================== */
/* Logo en el header — reemplaza el texto "The Iconic" */
.main-header__logo {
    height: 40px;
    width: auto;
    display: block;
    object-fit: contain;
    transition: opacity 0.2s ease;
}
.main-header__logo:hover { opacity: 0.85; }


/* ==========================================================================
   [11] COMPONENTE: VENUE INFO
   ========================================================================== */
.venue-info__card {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 30px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.venue-info__card:hover {
    transform: translateY(-4px);
    border-color: var(--c-primary-l);
}
.venue-info__icon {
    width: 48px;
    height: 48px;
    background: var(--c-bg-soft);
    color: var(--c-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.venue-info__body h5 {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-body);
    margin: 0 0 8px;
}
.venue-info__body h4 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--c-dark);
    margin: 0 0 6px;
}
.venue-info__body p {
    font-size: 0.95rem;
    color: var(--c-body);
    line-height: 1.5;
    margin: 0;
}
@media (max-width: 576px) {
    .venue-info__card { flex-direction: column; gap: 15px; }
}

/* ==========================================================================
   [13] COMPONENTE: AWARDS & PREMIACIÓN (GOLDEN STANDARD)
   ========================================================================== */
.section--awards {
    background: linear-gradient(to bottom, #0a0f1e 0%, #050811 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 100px 0;
}
.section--awards .section-head__title span {
    color: #ff3da3; /* Brighter magenta for dark background contrast */
    text-shadow: 0 0 20px rgba(237, 30, 146, 0.2);
}
.section--awards .section-head__lead {
    color: rgba(255, 255, 255, 0.9) !important; /* Higher contrast for lead text */
    font-weight: 400;
}
.section--awards::after {
    content: ''; position: absolute; top: 0; right: 0; width: 60%; height: 100%;
    background: radial-gradient(circle at 100% 0%, rgba(237, 30, 146, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.awards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 80px;
}
@media (max-width: 991px) { .awards-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 480px) { .awards-grid { grid-template-columns: 1fr; } }

.award-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 45px 25px;
    text-align: center;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
.award-card:hover {
    transform: translateY(-12px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(237, 30, 146, 0.4);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 20px rgba(237, 30, 146, 0.1);
}

.award-card__icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}
.award-card:hover .award-card__icon {
    background: var(--c-primary);
    transform: scale(1.15) rotate(15deg);
    border-color: transparent;
    box-shadow: 0 0 25px rgba(237, 30, 146, 0.5);
}

.award-card h4 {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 15px;
    color: #fff;
    letter-spacing: -0.02em;
}
.award-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}
.award-card__note {
    font-size: 0.7rem;
    color: var(--c-primary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-top: 20px;
    display: block;
}

/* Modificador "Gold" para el award de Trofeos */
.award-card--gold { border-color: rgba(255, 215, 0, 0.2); }
.award-card--gold .award-card__icon { color: #ffd700; border-color: rgba(255, 215, 0, 0.3); }
.award-card--gold .award-card__note { color: #ffd700; }
.award-card--gold:hover { border-color: rgba(255, 215, 0, 0.5); box-shadow: 0 30px 60px rgba(0,0,0,0.4), 0 0 20px rgba(255, 215, 0, 0.12); }
.award-card--gold:hover .award-card__icon { background: #ffd700; color: #000; box-shadow: 0 0 25px rgba(255, 215, 0, 0.5); }

/* Special Prizes — contenedor Compact Tech-Strips */
.special-prizes {
    margin-top: 50px;
    padding: 60px 40px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 30px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    position: relative;
    overflow: hidden;
}

.special-prizes__grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.special-card {
    display: grid;
    grid-template-columns: 80px 1.2fr 2fr;
    align-items: center;
    gap: 40px;
    padding: 25px 35px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    text-align: left;
    transition: all 0.4s ease;
}
@media (max-width: 991px) {
    .special-card {
        grid-template-columns: 80px 1fr;
        gap: 20px 30px;
        padding: 25px;
    }
}
@media (max-width: 576px) {
    .special-card {
        display: block;
        text-align: center;
    }
}

.special-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(237, 30, 146, 0.2);
    transform: translateX(10px);
}
.special-card--academy:hover {
    border-color: rgba(255, 215, 0, 0.3);
}
.special-card--tech:hover {
    border-color: rgba(0, 242, 255, 0.3);
}

.special-card__icon-wrap {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    margin: 0;
    transition: all 0.4s ease;
}
@media (max-width: 576px) {
    .special-card__icon-wrap { margin: 0 auto 20px; }
}

.special-card:hover .special-card__icon-wrap {
    background: var(--c-primary);
    color: #fff;
    box-shadow: 0 0 25px rgba(237, 30, 146, 0.3);
}
.special-card--academy:hover .special-card__icon-wrap {
    background: #ffd700;
    color: #000;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.3);
}
.special-card--tech:hover .special-card__icon-wrap {
    background: #00f2ff;
    color: #000;
    box-shadow: 0 0 25px rgba(0, 242, 255, 0.3);
}

.special-card h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 4px;
    color: #fff;
    letter-spacing: -0.02em;
}
.special-card h4 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--c-primary);
    margin: 0;
}
.special-card--academy h4 { color: #ffd700; }
.special-card--tech h4 { color: #00f2ff; }

.requirements {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}
@media (max-width: 991px) {
    .requirements { grid-column: 2; }
}
@media (max-width: 576px) {
    .requirements { justify-content: center; margin-top: 20px; }
}

.requirement-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 18px;
    border-radius: 50px;
    margin: 0;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}
.special-card:hover .requirement-item {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
}
.requirement-item i { color: var(--c-primary); font-size: 0.75rem; }
.special-card--academy .requirement-item i { color: #ffd700; }
.special-card--tech .requirement-item i { color: #00f2ff; }
.requirement-item span { font-weight: 800; color: #fff; }

/* Etiqueta de alcance ("Se Premia: …") bajo el subtitulo de cada special-card */
.scope-label {
    display: block;
    margin-top: 5px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
}
.special-card--academy .scope-label { color: rgba(255, 215, 0, 0.5); }
.special-card--tech    .scope-label { color: rgba(0, 242, 255, 0.5); }

/* Grand Icon Award — variante destacada del special-card tecnico */
.special-card--grand {
    border-width: 2px;
    border-color: rgba(0, 242, 255, 0.4);
    background: rgba(0, 242, 255, 0.05);
}
.special-card--grand .special-card__icon-wrap {
    background: #00f2ff;
    color: #000;
}
.special-card--grand .scope-label {
    color: rgba(0, 242, 255, 0.8);
    font-weight: 800;
}

/* Nota al pie del bloque de premios (mencion honrosa) */
.awards-footnote {
    opacity: 0.5;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.awards-footnote i { color: var(--c-primary); margin-right: 8px; }


/* ==========================================================================
   [14] HERO MULTI-EVENTO — split desktop / rotador mobile
   --------------------------------------------------------------------------
   Nacio para N eventos simultaneos (grid de N columnas en desktop, rotador
   con dots en mobile). Con un solo evento, home.php lo usa con
   `hero-multi--count-1`; lo que era para 2 y 3 eventos, los dots y el hero
   vacio se quitaron el 11-10-2026 junto con el selector de sedes.
   ========================================================================== */

/* Alto de pantalla completa, como el hero de danceclassic.cl.
   `svh` va despues de `vh` como mejora progresiva: en mobile evita el salto de
   alto cuando aparece y desaparece la barra del navegador. El piso en px
   protege pantallas muy bajas (laptops apaisadas, ventanas a media altura). */
.hero-multi {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--c-dark);
}
@media (max-width: 991px) {
    .hero-multi { min-height: 88vh; min-height: 88svh; }
}
@media (max-height: 640px) {
    .hero-multi { min-height: 620px; }
}

/* Track = contenedor de los slides. En desktop es grid; en mobile es pila. */
.hero-multi__track {
    display: grid;
    grid-template-columns: repeat(var(--hero-cols, 2), 1fr);
    min-height: inherit;
}
.hero-multi--count-1 .hero-multi__track { --hero-cols: 1; }

/* Slide individual. Desktop: visible siempre. */
.hero-multi__slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 40px;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    transition: opacity 0.6s ease;
}

/* Divider vertical entre slides (desktop) — crea ritmo sin bordes duros. */
.hero-multi__slide + .hero-multi__slide::before {
    content: '';
    position: absolute;
    top: 15%; left: 0; bottom: 15%; width: 1px;
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
    z-index: 1;
}

/* --------------------------------------------------------------------------
 * Fondo del hero: carrusel de imagenes con crossfade.
 *
 * Las capas `.hero-multi__bg` se apilan y solo la `.is-active` es visible. El
 * degradado de marca vive en el ::after del contenedor (una sola vez, por
 * encima de las fotos y por debajo del contenido), asi cada capa solo carga
 * su imagen. La rotacion la maneja el JS del componente hero_evento.
 * -------------------------------------------------------------------------- */
.hero-multi__bgs {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden;
}
/* Dos capas: un oscurecido radial al centro que sostiene el texto (el hero es
   de alto completo y el degradado diagonal solo dejaba legible una esquina), y
   debajo el degradado de marca.
 *
 * OJO al calibrar: las capas se COMPONEN, no se suman. La opacidad efectiva en
 * el centro es 1-(1-radial)*(1-lineal). Con 0.62 y 0.82 daba 0.93 — la foto
 * quedaba invisible y el carrusel parecia detenido. Estos valores dan ~0.71 en
 * el centro (texto legible) y ~0.30 en las esquinas (la imagen se lee).
 * Si hay que oscurecer mas, subir primero el radial, no el lineal. */
.hero-multi__bgs::after {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(ellipse 90% 70% at 50% 50%, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.15) 65%, transparent 100%),
        linear-gradient(135deg, rgba(10, 15, 30, 0.50) 0%, rgba(171, 9, 75, 0.30) 100%);
}

.hero-multi__bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover;
    /* Encuadre sesgado hacia arriba: los bailarines saltan y extienden brazos y
       piernas en la mitad superior, mientras abajo solo hay piso vacio. Con
       `center` (50%) el recorte del `cover` les cortaba los brazos. */
    background-position: center 35%;
    opacity: 0;
    transform: scale(1.05);
    /* Tiempos acoplados al intervalo del carrusel (4,5s, ver hero_evento.php).
       El zoom dura mas que el intervalo a proposito: la imagen nunca termina
       de acercarse, que es lo que hace que el movimiento se sienta continuo. */
    transition: opacity 1s ease, transform 7s ease;
}
.hero-multi__bg.is-active {
    opacity: 1;
    transform: scale(1.12);
}

/* Accesibilidad: si el visitante pidio menos animacion, sin zoom y con un
   cambio casi instantaneo. El JS ademas no rota (se queda en la primera). */
@media (prefers-reduced-motion: reduce) {
    .hero-multi__bg,
    .hero-multi__bg.is-active {
        transform: none;
        transition: opacity 0.2s linear;
    }
}


/* Contenido del slide (por encima del fondo). */
.hero-multi__content {
    position: relative;
    z-index: 2;
    max-width: 820px;
    text-align: center;
}

/* Bajada sobre la marca. Texto plano centrado, como en iconic.classic.cl. */
.hero-multi__pre {
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #fff;
    margin: 0 0 6px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* La marca, en magenta y grande — es el ancla visual del hero. */
.hero-multi__brand {
    font-family: var(--f-heading);
    font-size: clamp(3rem, 9vw, 6rem);
    font-weight: 800;
    color: var(--c-primary);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

.hero-multi__year {
    font-family: var(--f-heading);
    font-size: clamp(2.2rem, 6vw, 4rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 22px;
    line-height: 1;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Fecha y ciudad en una linea, sin la caja de tres piezas anterior. */
.hero-multi__when {
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    font-weight: 600;
    color: #fff;
    margin: 0 0 8px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.hero-multi__when-sep { color: var(--c-primary); margin: 0 6px; }

.hero-multi__venue {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.hero-multi__venue i { color: var(--c-primary); }

.hero-multi__btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 22px;
}
.hero-multi__btn-secondary {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}
.hero-multi__btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}


/* -------- Mobile: stack con crossfade entre slides -------- */
@media (max-width: 991px) {
    .hero-multi__track {
        display: block;
        position: relative;
        min-height: inherit;
    }
    .hero-multi__slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
    }
    .hero-multi__slide.is-active {
        opacity: 1;
        pointer-events: auto;
        position: relative;  /* el activo reserva el alto del contenedor */
    }
    .hero-multi__slide + .hero-multi__slide::before { display: none; }
}


/* Countdown compacto para el hero multi (cuatro bloques mas pequenos). */
.countdown--compact {
    margin: 22px auto 26px;   /* auto: el hero ahora es centrado */
    gap: 8px !important;
}
.countdown--compact .countdown__item {
    min-width: 56px !important;
    padding: 10px 8px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.countdown--compact .countdown__num { font-size: 1.3rem !important; color: #fff !important; }
.countdown--compact .countdown__label { font-size: 0.6rem !important; color: rgba(255,255,255,0.6) !important; }


/* Pin de venue-parallax — reemplaza el inline style="color:var(--c-primary); margin-right:8px;" */
.venue-parallax__pin { color: var(--c-primary); margin-right: 8px; }


/* ==========================================================================
   [22] COMPONENTE: FORMATOS DE COMPETENCIA (Solo / Duo / Trio)
   
   Bloque tipografico, no de tarjetas: el home ya tiene tres grillas de
   tarjetas y una cuarta habria vuelto el ritmo monotono. Aca el peso visual
   lo lleva el numeral, que comunica "formatos pequenos" sin necesidad de
   leer. Fondo oscuro para que corte con las secciones claras vecinas.
   ========================================================================== */
.formatos {
    position: relative;
    padding: 96px 0 104px;
    background: linear-gradient(135deg, #1b2836 0%, var(--c-dark) 100%);
    color: #fff;
    overflow: hidden;
}
/* Halo magenta muy tenue detras de los numerales, para dar profundidad. */
.formatos::before {
    content: '';
    position: absolute;
    left: 50%; bottom: -40%;
    width: 900px; height: 900px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(237, 30, 146, 0.16) 0%, transparent 62%);
    pointer-events: none;
}

.formatos__intro {
    position: relative;
    text-align: center;
    max-width: 720px;
    margin: 0 auto 68px;
}
.formatos__pre {
    display: inline-block;
    margin-bottom: 16px;
    padding: 7px 18px;
    border: 1px solid rgba(237, 30, 146, 0.45);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--c-primary);
}
.formatos__titulo {
    font-family: var(--f-heading);
    font-size: clamp(2.1rem, 4.4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    color: #fff;
}
.formatos__titulo span { color: var(--c-primary); }
.formatos__lead {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.72);
}

.formatos__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    max-width: 900px;
    margin: 0 auto;
}

.formato {
    position: relative;
    text-align: center;
    padding: 8px 26px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.formato:hover { transform: translateY(-6px); }

/* Separadores finos entre formatos: se desvanecen en los extremos. */
.formato + .formato::before {
    content: '';
    position: absolute;
    left: 0; top: 12%; bottom: 12%;
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%);
}

/* El numeral: grande de verdad, hueco, y se rellena al pasar el mouse.
   El trazo escala con el tamano — 2px sobre un numero de 128px se lee como
   pelo y el contorno pierde presencia. */
.formato__num {
    display: block;
    font-family: var(--f-heading);
    font-size: clamp(4.6rem, 11vw, 8.5rem);
    font-weight: 800;
    line-height: 0.95;
    color: transparent;
    -webkit-text-stroke: 3px rgba(237, 30, 146, 0.8);
    transition: color 0.4s ease, -webkit-text-stroke-color 0.4s ease;
}
.formato:hover .formato__num {
    color: var(--c-primary);
    -webkit-text-stroke-color: var(--c-primary);
}

.formato__nombre {
    margin: 14px 0 6px;
    font-family: var(--f-heading);
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #fff;
}
.formato__detalle {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 720px) {
    .formatos { padding: 72px 0 78px; }
    .formatos__intro { margin-bottom: 44px; }
    .formatos__grid { grid-template-columns: 1fr; gap: 38px; }
    .formato + .formato::before {
        left: 22%; right: 22%; top: -19px;
        width: auto; height: 1px; bottom: auto;
        background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.16) 50%, transparent 100%);
    }
    /* En mobile no hay hover: el numeral va relleno desde el inicio. */
    .formato__num { color: var(--c-primary); -webkit-text-stroke-color: var(--c-primary); }
}

/* Sin -webkit-text-stroke (Firefox viejo): el numeral igual se ve, relleno. */
@supports not (-webkit-text-stroke: 1px red) {
    .formato__num { color: var(--c-primary); }
}

/* ==========================================================================
   [23] COMPONENTE: NOTA DE POLITICA (sobre fondo oscuro)

   Banda sobria para declarar una politica de la organizacion dentro de una
   seccion oscura. Deliberadamente sin magenta ni urgencia: informa, no vende.
   ========================================================================== */
.policy-note {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    max-width: 860px;
    margin: 56px auto 0;
    padding: 28px 32px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.policy-note__ico {
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.15rem;
}
.policy-note__body h4 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
}
.policy-note__body p {
    margin: 0 0 10px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
}
.policy-note__body p:last-child { margin-bottom: 0; }
.policy-note__body strong { color: #fff; }

/* El cierre del bloque. Va aparte porque es la frase que resume la politica
   entera y como un parrafo mas queda enterrada bajo los cuatro anteriores.

   El selector lleva `.policy-note__body p` delante a proposito: la regla de
   arriba ya fija color y tamano para todo `p` de este bloque, y una clase sola
   pierde por especificidad. Se sube el selector en vez de poner `!important`,
   que sirve una vez y despues obliga a otro `!important` para corregirlo. */
.policy-note__body p.policy-note__cierre {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
}

@media (max-width: 640px) {
    .policy-note { flex-direction: column; gap: 16px; padding: 24px 22px; }
}

/* ==========================================================================
 * Documentos legales — reglamentos
 *
 * Optimizados para leer en pantalla y para "Imprimir > Guardar como PDF", que
 * es como se descargan. No generamos PDF en el servidor: mismo criterio que el
 * diploma, y asi el documento nunca queda desactualizado respecto de la base.
 * ========================================================================== */
.container--doc { max-width: 860px; }

.doc h2 {
    margin: 48px 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--c-primary);
    font-size: 1.5rem;
    font-weight: 800;
}
.doc h3 { margin: 32px 0 12px; font-size: 1.15rem; font-weight: 700; }
.doc p  { margin: 0 0 14px; line-height: 1.75; }
.doc ol { margin: 0 0 14px; padding-left: 24px; line-height: 1.9; }
/* Las listas de la Declaracion de participacion. La 2.7 trae sus propias
   letras a) b) c) en el texto aprobado, asi que esa va sin viñeta. */
.doc__lista { margin: 0 0 14px; padding-left: 24px; line-height: 1.75; }
.doc__lista--letras { list-style: none; padding-left: 12px; }

.doc__meta {
    padding: 20px 24px;
    margin-bottom: 8px;
    background: var(--c-bg-soft, #f7f7f7);
    border-left: 4px solid var(--c-primary);
}
.doc__meta p { margin: 0 0 6px; }
.doc__acciones { margin-top: 14px !important; }
.doc__ayuda { display: block; margin-top: 8px; font-size: 0.85rem; opacity: 0.75; }

.doc__tabla { width: 100%; border-collapse: collapse; margin: 0 0 20px; }
.doc__tabla th, .doc__tabla td {
    padding: 10px 12px;
    border: 1px solid var(--c-border, #ddd);
    text-align: left;
    vertical-align: top;
}
.doc__tabla th { background: var(--c-bg-soft, #f7f7f7); font-weight: 700; }
.doc__tabla--matriz td { text-align: center; }
.doc__tabla--matriz td.si { color: #1b5e20; font-weight: 700; }
.doc__tabla--matriz td.no { color: #bbb; }

.doc__pie {
    margin-top: 56px;
    padding-top: 20px;
    border-top: 1px solid var(--c-border, #ddd);
    font-size: 0.9rem;
    opacity: 0.85;
}

.why-grid--dos { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

@media print {
    /* Fuera todo lo que no es el documento: cabecera, menu, pie del sitio y
       los propios botones de descarga. Decia `.main-footer` y `.topbar`, que
       ya no existian —el pie es `.footer-p` y la franja de contacto
       `.top-header`—, y el reglamento salia impreso con los dos. */
    .main-header, .footer-p, .top-header, .sticky-cta, .no-print,
    .page-hero, .main-header__toggle { display: none !important; }

    body { background: #fff; color: #000; font-size: 11pt; }
    .section { padding: 0; }
    .container--doc { max-width: 100%; }

    /* Un titulo no debe quedar solo al final de una pagina, y una tabla no
       deberia partirse en dos si cabe entera. */
    .doc h2, .doc h3 { break-after: avoid; page-break-after: avoid; }
    .doc__tabla { break-inside: auto; }
    .doc__tabla tr { break-inside: avoid; page-break-inside: avoid; }
    .doc__meta { border-left: 3px solid #000; background: none; }

    /* El cierre en papel es solo la firma de la organizacion, pegada al
       ultimo articulo. La linea "Vigente al... Consulta tambien..." repetia
       la fecha que ya va en la cabecera y un enlace que en papel no se
       puede abrir, y con el margen de pantalla se iba sola a una hoja nueva. */
    .doc__pie { margin-top: 16px; padding-top: 8px; break-before: avoid; page-break-before: avoid; }
    .doc__pie p { margin: 0; }

    a { color: #000; text-decoration: none; }
}

/* ==========================================================================
   Pantallas de acceso — codigo por correo y recuperacion de contrasena
   ==========================================================================

   Vivian en `layouts/base`, que no tiene cabecera, ni logo, ni pie: un
   formulario suelto sobre blanco. Justo donde alguien esta por escribir un
   codigo que le llego al correo, la pantalla no se parecia al sitio del que
   venia. Eso no es un problema de gusto: es el momento exacto en que uno
   decide si esto es de fiar.

   Ahora extienden el layout publico, asi que traen el encabezado con el logo,
   la navegacion y el pie. Lo de abajo es solo la tarjeta.
   ========================================================================== */

.auth {
    /* El encabezado publico es fijo: sin este respiro la tarjeta le queda
       debajo. */
    padding: 140px 0 90px;
    background: var(--c-bg-soft, #F9FAFB);
    min-height: 100vh;
}

.auth__caja {
    max-width: 460px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 30px -12px rgba(17, 24, 39, .12);
}

.auth__marca {
    font-family: var(--f-heading);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .78rem;
    color: var(--c-dark);
    text-align: center;
    margin-bottom: 26px;
}
.auth__marca span { color: var(--c-primary); }

.auth__titulo {
    font-family: var(--f-heading);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--c-dark);
    margin: 0 0 8px;
    text-align: center;
}

.auth__sub {
    color: var(--c-body);
    font-size: .95rem;
    text-align: center;
    margin: 0 0 28px;
    line-height: 1.55;
}
.auth__sub strong { color: var(--c-dark); }

.auth__caja label {
    display: block;
    font-weight: 600;
    color: var(--c-dark);
    font-size: .88rem;
    margin: 0 0 7px;
}

.auth__caja input {
    width: 100%;
    padding: 13px 15px;
    font-family: var(--f-body);
    font-size: 1rem;
    color: var(--c-dark);
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    margin-bottom: 20px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.auth__caja input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-l);
}

/* El campo del codigo: seis digitos que se copian de un correo y se cotejan a
   ojo. Grande, espaciado y centrado se revisa de un vistazo; en el tamaño del
   resto del formulario hay que contarlos con el dedo. */
.auth__codigo {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace !important;
    font-size: 1.85rem !important;
    letter-spacing: .45em;
    text-align: center;
    text-indent: .45em;
    font-weight: 600;
}

.auth__boton {
    width: 100%;
    padding: 14px 20px;
    font-family: var(--f-heading);
    font-size: .95rem;
    font-weight: 600;
    color: #fff;
    background: var(--c-primary);
    border: 1px solid var(--c-primary);
    border-radius: 10px;
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease;
}
.auth__boton:hover {
    background: var(--c-primary-d);
    border-color: var(--c-primary-d);
    box-shadow: 0 10px 22px -10px rgba(237, 30, 146, .8);
}

.auth__pie {
    border-top: 1px solid var(--c-border);
    margin-top: 28px;
    padding-top: 22px;
    text-align: center;
    font-size: .92rem;
    line-height: 1.9;
}
.auth__pie a { color: var(--c-primary); font-weight: 600; text-decoration: none; }
.auth__pie a:hover { text-decoration: underline; }
.auth__pie .secundario { color: var(--c-body); font-weight: 400; }

/* La nota de "no me llego": la duda mas comun en esta pantalla, y la que hace
   que alguien pida el codigo cinco veces seguidas. */
.auth__nota {
    background: var(--c-bg-soft, #F9FAFB);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 13px 15px;
    font-size: .86rem;
    color: var(--c-body);
    line-height: 1.55;
    margin: 0 0 24px;
}

/* --- Avisos del sitio publico ------------------------------------------- */

.aviso-zona {
    max-width: 1180px;
    margin: 0 auto;
    padding: 100px 24px 0;
}
/* Dentro de una pantalla de acceso el aviso va pegado a la tarjeta, no
   colgando bajo el encabezado: es la respuesta a lo que la persona acaba de
   hacer. */
.aviso-zona + .auth { padding-top: 18px; }
.aviso-zona:has(+ .auth) { padding: 130px 24px 0; max-width: 508px; }

.aviso {
    padding: 13px 16px;
    border-radius: 10px;
    border: 1px solid;
    border-left-width: 4px;
    font-size: .93rem;
}
.aviso--ok    { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.aviso--error { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
.aviso--warn  { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }

@media (max-width: 560px) {
    .auth { padding: 110px 16px 60px; }
    .auth__caja { padding: 28px 22px; }
    .auth__codigo { font-size: 1.5rem !important; letter-spacing: .3em; text-indent: .3em; }
}