/* ==========================================================================
   custom.css — ajustes propios (cargado al final, sobrescribe el tema)

   REGLA GENERAL: todo va dentro de @media (max-width: ...) para que la
   versión desktop quede INTACTA. Solo se corrige el comportamiento en móvil.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) Legibilidad — puntos decorativos sobre el texto
   points1/2/3.png están en position:absolute y se pintan por ENCIMA del texto.
   En desktop quedan en los bordes; al apilarse en móvil caen sobre el texto
   ("Bienvenidos") y lo vuelven ilegible. Se ocultan a una sola columna.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    img[src*="points1.png"],
    img[src*="points2.png"],
    img[src*="points3.png"] {
        display: none !important;
    }
}


/* --------------------------------------------------------------------------
   2) Red de seguridad — ninguna imagen debe desbordar su contenedor en móvil
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    img {
        max-width: 100%;
        height: auto;
    }
}


/* --------------------------------------------------------------------------
   3) HERO — logo desbordado y franja "De la biopsia..." cortada
   - El logo grande usa .outside-box-right-10 (margin-right:-10vw) que lo empuja
     fuera del contenedor; el section tiene overflow-hidden y lo recorta.
   - La franja de gradiente fija su alto con .h-42px, recortando el texto que
     en móvil ocupa varias líneas.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* logo grande del hero: anular el desplazamiento y centrar */
    .outside-box-right-10 {
        margin-right: 0 !important;
    }
    .outside-box-right-10.text-end {
        text-align: center !important;
    }
    img[src*="logo_big_w"] {
        max-width: 100%;
        height: auto;
    }

    /* franja "De la biopsia a la terapia personalizada..." */
    .bg-gradient-flamingo-amethyst-green .h-42px {
        height: auto !important;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .bg-gradient-flamingo-amethyst-green .fs-20 {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }
}


/* --------------------------------------------------------------------------
   4) CALLOUT turquesa "¡Reserve su lugar en este congreso...!"
   Usa clases de Litho (xs-fs-90 = 90px) que en teléfono resultan enormes y
   parten palabras ("especialid ad"). Se reduce el tamaño en móvil/tablet.
   El orden importa: la regla de ≤479px va después para ganar en teléfonos.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    h2.text-tropical-blue {
        font-size: 40px !important;
        line-height: 1.12 !important;
        letter-spacing: normal !important;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: none;
    }
}
@media (max-width: 479.98px) {
    h2.text-tropical-blue {
        font-size: 30px !important;
    }
}


/* --------------------------------------------------------------------------
   5) PATROCINADORES — logos que se enciman
   Los <img> tienen width fijo en px (width="340", "190"...) y el tema aplica
   ".clients-style-06 .client-box img{max-width:inherit}" (= max-width:none),
   así que no se achican y se salen de su columna, solapándose. Se anula esa
   regla (misma especificidad + !important) y se ajusta el nº de columnas.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* cada logo respeta el ancho de su columna (anula el max-width:inherit del tema) */
    .clients-style-06 .client-box img {
        max-width: 100% !important;
        height: auto;
    }
}
@media (max-width: 767.98px) {
    /* Patrocinador Platino (Makol + Roche): uno arriba y otro abajo */
    .clients-style-06.row-cols-2 > .col {
        flex: 0 0 auto;
        width: 100%;
    }
}
@media (max-width: 575.98px) {
    /* filas de 4 columnas (Bronce) -> 2 por fila en teléfonos */
    .clients-style-06.row-cols-4 > .col {
        flex: 0 0 auto;
        width: 50%;
    }
}


/* --------------------------------------------------------------------------
   8) Botones de inscripción (cuota.html)
   Eran <a><img width="150px"> inline separados por &nbsp;&nbsp;; al envolver en
   móvil quedaban pegados sin separación vertical. Ahora es un contenedor flex
   con gap: en desktop siguen en fila; en móvil van 2 por fila y centrados.
   -------------------------------------------------------------------------- */
.inscripcion-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}
.inscripcion-botones a {
    display: inline-flex;
    line-height: 0;
}
.inscripcion-botones img {
    height: auto;
}
@media (max-width: 767.98px) {
    .inscripcion-botones {
        justify-content: center;
    }
    .inscripcion-botones a {
        flex: 1 1 46%;
        max-width: 240px;
    }
    .inscripcion-botones img {
        width: 100% !important;
    }
}


/* --------------------------------------------------------------------------
   9) ponencias.html — Ejes Temáticos: los 13 juntos en móvil
   En desktop son 2 columnas (7 + 6). Al apilarse en móvil, el mb-30px del
   .col y el pt-8/pb-8 de cada caja dejaban un hueco grande entre las dos
   listas. Se quita ese espacio para que los 13 se lean como una sola lista.
   (Scopeado al tab de ejes #tab_five1, no afecta desktop.)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* quitar el margen entre las dos columnas apiladas */
    #tab_five1 .row.row-cols-1 > .col {
        margin-bottom: 0 !important;
    }
    /* y el padding interno que las separa (pt-8/pb-8 = 8% cada uno):
       solo el borde entre ambas, conservando el aire exterior */
    #tab_five1 .row.row-cols-1 > .col:first-child .feature-box {
        padding-bottom: 0 !important;
    }
    #tab_five1 .row.row-cols-1 > .col:last-child .feature-box {
        padding-top: 0 !important;
    }
}


/* --------------------------------------------------------------------------
   10) Header en móvil — hamburguesa visible sobre la barra blanca
   En móvil el header va en flujo normal sobre fondo blanco (barra blanca en
   todas las páginas). El icono del menú debe ir OSCURO para que se vea.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    header.header-with-topbar .navbar-toggler-line {
        background-color: #2a2a2a !important;
    }
}


/* --------------------------------------------------------------------------
   11) Hero (index) — texto animado debajo del badge "Congreso Presencial"
   En móvil el badge y el texto rotativo iban en fila y se apretaban; se
   apilan (badge arriba, texto animado abajo).
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .hero-badge-row {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
}


/* --------------------------------------------------------------------------
   12) Menos aire entre secciones en móvil (big-section muy alta)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .big-section {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }
}


/* --------------------------------------------------------------------------
   13) Header móvil FIJO (sticky) y ~25% más delgado
   Las páginas son muy largas en móvil -> el menú queda siempre accesible.
   El header pasa a position:fixed (sale del flujo); se compensa con
   padding-top en el body y se reduce el top-space-padding del hero (ya no
   hace falta reservar tanto espacio para el header).
   Barra: ~66px -> ~50px (menos padding del logo). Hamburguesa recolocado.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    header.header-with-topbar {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1040;
        background-color: #ffffff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }
    /* barra ~40% más delgada en total: menos padding alrededor del logo
       (66px -> 50px -> ~42px) */
    header.header-with-topbar .navbar-brand {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    /* hamburguesa (22x14px) centrado vertical con el método top/bottom:0 +
       margin:auto (no depende de resolver %; centra en el navbar) */
    header.header-with-topbar .navbar .navbar-toggler {
        top: 0 !important;
        bottom: 0 !important;
        height: 14px !important;
        margin-top: auto !important;
        margin-bottom: auto !important;
    }
    /* menú largo: que pueda hacer scroll dentro de la pantalla */
    header.header-with-topbar .navbar-collapse {
        max-height: calc(100vh - 42px);
        overflow-y: auto;
    }
    /* compensar el header fijo en todas las páginas */
    body {
        padding-top: 42px;
    }
    /* el hero ya no necesita reservar ~96px para el header */
    .top-space-padding {
        padding-top: 22px !important;
    }
    .ipad-top-space-margin {
        margin-top: 0 !important;
    }
}


/* --------------------------------------------------------------------------
   6) Overflow horizontal en móvil ("espacio en blanco a la derecha")
   Elementos decorativos anchos (logo con margin -10vw, palabra "biodiversidad"
   a fs-225, imágenes absolutas) ensanchan la página y generan scroll lateral.
   Se corta el desbordamiento horizontal a nivel de página.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    html, body {
        overflow-x: hidden;
    }
}


/* --------------------------------------------------------------------------
   7) Sección "Costa Rica tours opcionales"
   - El perezoso (perezoso.png) está en position:absolute y cae SOBRE el
     párrafo dejándolo ilegible en móvil -> se oculta al apilarse.
   - La imagen principal es un placeholder externo sin reemplazar
     (via.placeholder.com) -> se oculta en móvil para no mostrar un recuadro
     gris / imagen rota. (Reemplazar por una foto real en el HTML.)
   - margin-top:200px inline deja un hueco enorme arriba en móvil.
   - La palabra decorativa "biodiversidad" (fs-225) se reduce.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    section[style*="margin-top: 200px"] {
        margin-top: 60px !important;
    }
    img[src*="perezoso"] {
        display: none !important;
    }
    img[src*="via.placeholder"],
    img[src*="placeholder.com"] {
        display: none !important;
    }
    .fs-225 {
        font-size: 90px !important;
    }
}

/* ==========================================================================
   Conferencistas (speaker.html)
   Tarjetas de altura fija e identica: foto 260 + cuerpo 202 = 462px.
   Grid propio para que el espaciado horizontal y vertical sea el mismo (24px).
   ========================================================================== */
.spk-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 0 0 24px;
}
@media (max-width: 991px) {
    .spk-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .spk-grid { grid-template-columns: 1fr; }
}

.spk-card {
    display: block;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    transition: transform .3s ease, box-shadow .3s ease;
}
.spk-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
}

.spk-card__photo {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: top center;
}

.spk-card__body { padding: 25px 20px; }

/* Cada bloque tiene altura fija -> todas las tarjetas miden exactamente lo mismo */
.spk-card__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 46px;
    font-size: 19px;
    font-weight: 600;
    line-height: 23px;
    color: #232323;
}
.spk-card__country {
    display: block;
    height: 24px;
    overflow: hidden;
    margin: 6px 0 8px;
    font-size: 15px;
    line-height: 24px;
    color: #78787a;
}
.spk-card__country img {
    width: 22px;
    height: auto;
    vertical-align: middle;
}
.spk-card__bio {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 68px;
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    color: #78787a;
}


/* ==========================================================================
   TEMA ANTIFRAUDE — identidad visual propia (ACFE Costa Rica)
   Paleta tomada del logo: azul marino, teal y dorado.
   Este bloque sobrescribe los colores heredados del tema de Patología.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&display=swap');

:root {
    --af-navy:    #14243f;
    --af-navy-2:  #0c1729;
    --af-teal:    #157f96;
    --af-teal-2:  #1fa3bd;
    --af-gold:    #b3923f;
    --af-gold-2:  #d9b968;
    --af-cream:   #f6f4ef;
}

/* ---- Tipografía de titulares: geométrica, más "corporativo forense" ---- */
.alt-font,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Archivo', 'Helvetica Neue', sans-serif !important;
    letter-spacing: -0.3px;
}

/* ---- Franjas hero / títulos de página: de foto de selva a banda navy ----
   Todas las secciones que usaban bg_01..bg_07.jpg como fondo pasan a un
   gradiente azul marino con pinstripe diagonal sutil (look "seguridad"). */
section[style*="bg_01"], section[style*="bg_02"], section[style*="bg_03"],
section[style*="bg_04"], section[style*="bg_06"], section[style*="bg_07"] {
    background-image:
        repeating-linear-gradient(115deg,
            rgba(255,255,255,0.028) 0 2px, transparent 2px 26px),
        radial-gradient(1100px 420px at 85% -10%, rgba(31,163,189,0.30), transparent 60%),
        radial-gradient(700px 380px at -5% 110%, rgba(179,146,63,0.22), transparent 55%),
        linear-gradient(135deg, var(--af-navy) 0%, var(--af-navy-2) 100%) !important;
    background-size: auto !important;
}
/* linea dorada que remata el hero */
section[style*="bg_04"]::after,
section[style*="bg_01"]::after,
section[style*="bg_02"]::after,
section[style*="bg_03"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--af-gold) 0%, var(--af-gold-2) 45%, var(--af-teal-2) 100%);
    z-index: 2;
}

/* ---- Franja del lema (antes gradiente rosa/verde) -> navy con borde oro ---- */
.bg-gradient-flamingo-amethyst-green {
    background: linear-gradient(90deg, var(--af-navy-2) 0%, var(--af-navy) 55%, var(--af-teal) 130%) !important;
    border-top: 3px solid var(--af-gold);
}
.text-radient-flamingo-amethyst-green {
    background-image: linear-gradient(90deg, var(--af-teal) 0%, var(--af-gold) 100%) !important;
    -webkit-background-clip: text;
    background-clip: text;
}

/* ---- Fondo general de secciones claras: gris frio -> crema calido ---- */
.bg-gradient-very-light-gray {
    background: linear-gradient(180deg, #ffffff 0%, var(--af-cream) 100%) !important;
}

/* ---- Colores de acento del tema ---- */
.text-base-color { color: var(--af-teal) !important; }
.bg-base-color   { background-color: var(--af-gold) !important; }
.text-green      { color: var(--af-gold) !important; }
.bg-green        { background-color: var(--af-gold) !important; }
.bg-jade         { background-color: var(--af-gold) !important; }
.bg-clear-green  { background-color: var(--af-teal) !important; }
.text-tropical-blue { color: var(--af-navy) !important; }

/* ---- Botones ---- */
.btn-jade, .btn-base-color {
    background: linear-gradient(120deg, var(--af-gold) 0%, var(--af-gold-2) 100%) !important;
    color: #fff !important;
    border: none !important;
}
.btn-jade:hover, .btn-base-color:hover {
    background: var(--af-navy) !important;
    color: #fff !important;
}
.btn-cornflower-blue {
    background: var(--af-teal) !important;
    color: #fff !important;
    border: none !important;
}
.btn-cornflower-blue:hover { background: var(--af-navy) !important; }

/* ---- Iconos y listas de ejes tematicos ---- */
.tema-icon { color: var(--af-teal) !important; }
.tema-item { border-bottom-color: rgba(20,36,63,0.10) !important; }
.tema-item:hover { color: var(--af-navy); }

/* ---- Tarjetas (patrocinio, precios, placeholders) ---- */
.pricing-header {
    background: var(--af-navy) !important;
}
.pricing-header h5 { color: #fff !important; }
.border-color-extra-medium-gray { border-color: rgba(20,36,63,0.14) !important; }

/* tarjetas de niveles de patrocinio en patrocinadores.html */
.border-radius-6px.border-1 {
    background: #fff;
    box-shadow: 0 10px 30px rgba(12,23,41,0.08);
    border-top: 4px solid var(--af-gold) !important;
    transition: transform .3s ease, box-shadow .3s ease;
}
.border-radius-6px.border-1:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 45px rgba(12,23,41,0.14);
}

/* ---- Footer: banda navy oscura ---- */
footer {
    background: var(--af-navy-2) !important;
    color: rgba(255,255,255,0.75);
    padding-top: 60px;
    padding-bottom: 35px;
    border-top: 4px solid var(--af-gold);
}
footer .footer-navbar .nav-link { color: rgba(255,255,255,0.75) !important; }
footer .footer-navbar .nav-link:hover { color: var(--af-gold-2) !important; }
footer p, footer .fs-14 { color: rgba(255,255,255,0.65) !important; }
footer a { color: var(--af-gold-2); }
footer .divider-style-03 { border-color: rgba(255,255,255,0.15) !important; }
footer .elements-social a { color: rgba(255,255,255,0.8) !important; }
footer .elements-social a:hover { color: var(--af-gold-2) !important; }
/* caja del newsletter dentro del footer */
footer .bg-dark-gray {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.12);
}

/* ---- Restos decorativos del sitio de Patologia: fuera ---- */
img[src*="images/icon.png"],
img[src*="points1.png"],
img[src*="points2.png"],
img[src*="points3.png"],
img[src*="perezoso"] {
    display: none !important;
}

/* ---- Scroll superior y detalles ---- */
.scroll-progress .scroll-line { background: rgba(20,36,63,0.25); }
.scroll-progress .scroll-point { background: var(--af-gold); }
::selection { background: var(--af-gold-2); color: var(--af-navy-2); }

/* imagen placeholder externa (via.placeholder.com) — ocultar tambien en desktop */
img[src*="via.placeholder"], img[src*="placeholder.com"] { display: none !important; }

/* ---- Header movil: barra navy (el logo movil es blanco; sobre blanco era
   invisible). Hamburguesa en blanco y menu desplegable oscuro coherente. ---- */
@media (max-width: 991.98px) {
    header.header-with-topbar {
        background-color: var(--af-navy-2) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.35);
        border-bottom: 2px solid var(--af-gold);
    }
    header.header-with-topbar .navbar-toggler-line {
        background-color: #ffffff !important;
    }
    header.header-with-topbar .navbar-collapse {
        background-color: var(--af-navy-2);
    }
}

/* ==========================================================================
   HERO MATRIX — lluvia binaria con linterna en el cursor
   ========================================================================== */
#hero-matrix {
    background: #0a1526 !important;   /* navy del logo; anula la foto heredada */
    min-height: 78vh;
    display: flex;
    align-items: center;
}
#hero-matrix #matrix-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
}
/* viñeta para dar profundidad y que el logo respire (no tapa el matrix) */
#hero-matrix .hero-matrix-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(60% 60% at 50% 45%, rgba(7,13,24,0) 0%, rgba(7,13,24,0.35) 70%, rgba(7,13,24,0.72) 100%),
        linear-gradient(180deg, rgba(7,13,24,0.55) 0%, rgba(7,13,24,0) 22%, rgba(7,13,24,0) 78%, rgba(7,13,24,0.8) 100%);
}
/* el logo centrado, con un leve glow verde para fundirse con el matrix */
#hero-matrix .hero-logo {
    max-width: 100%;
    width: 700px;
    height: auto;
    filter: drop-shadow(0 6px 26px rgba(0,0,0,0.65)) drop-shadow(0 0 24px rgba(31,163,189,0.28));
}
@media (max-width: 991.98px) {
    #hero-matrix { min-height: 62vh; }
    #hero-matrix .hero-logo { width: 525px; }
}
@media (max-width: 575.98px) {
    #hero-matrix { min-height: 52vh; }
    #hero-matrix .hero-logo { width: 375px; }
}
/* el matrix ya provee la linea inferior; mantenemos la de oro heredada del tema */