/* ------------------------------------------------------
/  PCH Main Event - custom overrides
/------------------------------------------------------ */

/* Red de seguridad: nunca debe haber scroll horizontal (mobile/tablet) */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Header logo: fit to the original logo slot size */
.header02 .logo {
    width: auto;
}
.header02 .logo a {
    display: inline-flex;
    align-items: center;
}
.header02 .logo img {
    width: auto;
    height: 46px;
    max-width: none;
}

/* Right sidebar widget logo */
.rightsidebar .wd_logo img {
    width: auto;
    max-width: 180px;
    height: auto;
}

/* About section: bajar título y texto */
.aboutSection .aboutContent {
    padding-top: 70px;
}
.aboutSection .aboutContent > h2 {
    font-size: 72px;
    line-height: 84px;
}
@media (max-width: 1199px) {
    .aboutSection .aboutContent > h2 {
        font-size: 60px;
        line-height: 70px;
    }
}

/* Menos espacio entre "Sigamos viviendo..." y "Próximos Eventos" */
.aboutSection {
    padding-bottom: 80px;
}
.serviceSection02.careerAcordionSec {
    padding-top: 50px;
}
@media (max-width: 991px) {
    .aboutSection {
        padding-bottom: 50px;
    }
    .serviceSection02.careerAcordionSec {
        padding-top: 30px;
    }
}

/* About: mantener el tamaño/proporción original de la plantilla con las imágenes nuevas */
.abThumbImg01 img {
    width: 100%;
    height: auto;
    aspect-ratio: 301 / 569;
    object-fit: cover;
    display: block;
}
.abThumbImg02 img {
    width: 100%;
    height: auto;
    aspect-ratio: 410 / 643;
    object-fit: cover;
    display: block;
}

/* Contador pegado a la sección Próximos Eventos */
.serviceSection02.careerAcordionSec {
    padding-bottom: 0;
}
/* El último evento del acordeón sin línea inferior */
.careerAcordionSec .boozyAcordion02 .accordion-item:last-child {
    border-bottom: 0;
}
.counterSection02 {
    padding-top: 70px;
    padding-bottom: 70px;
}
@media (max-width: 991px) {
    .counterSection02 {
        padding-top: 45px;
        padding-bottom: 45px;
    }
}

/* Contador: etiquetas en mayúsculas, en una sola línea */
.counterSection02 .project_counter h3 {
    text-transform: uppercase;
    white-space: nowrap;
}
/* El número del contador (h2.oni-counter) usa 110px fijo en el template,
   sin reducción para pantallas chicas: en mobile/tablet números de
   5 caracteres ("29,3K") se salen del ancho de la columna y provocan
   scroll horizontal en toda la página. Se achica progresivamente y se
   permite que la etiqueta pueda partirse en dos líneas si hace falta. */
@media (max-width: 991px) {
    .counterSection02 h2.oni-counter {
        font-size: 64px;
        line-height: 80px;
    }
    .counterSection02 .project_counter h3 {
        white-space: normal;
    }
    .counterSection02 .row > [class*="col-"] {
        margin-bottom: 40px;
    }
    .counterSection02 .row > [class*="col-"]:nth-last-child(-n+2) {
        margin-bottom: 0;
    }
}
/* Mobile real (una columna por fila): números y texto más grandes,
   más espacio entre cada ítem para que no se vean apretados */
@media (max-width: 575px) {
    .counterSection02 h2.oni-counter {
        font-size: 80px;
        line-height: 96px;
    }
    .counterSection02 .project_counter h3 {
        font-size: 22px;
        line-height: 28px;
    }
    .counterSection02 .row > [class*="col-"] {
        margin-bottom: 54px;
    }
    .counterSection02 .row > [class*="col-"]:last-child {
        margin-bottom: 0;
    }
}

/* Carrusel de Noticias */
.blogCarouselSec {
    padding-top: 70px;
    padding-bottom: 100px;
    background: #0b0b0b;
}
.blogCarouselSec .blogGridView {
    margin-top: 10px;
}
.blogCarouselSec .blogGridRow {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    height: 100%;
}
.blogCarouselSec .blogContent02 {
    padding: 26px 20px 0 0;
}
.blogCarouselSec .blogContent02 h2 {
    font-size: 20px;
    line-height: 26px;
    margin-bottom: 18px;
}
.blogCarouselSec .blogImgThumbnail img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
/* Indicadores de página: redondos y más separados de las noticias */
.blogCarouselSec .owl-carousel .owl-dots {
    margin-top: 60px;
    column-gap: 14px;
}
.blogCarouselSec .owl-carousel .owl-dots button.owl-dot span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
}
.blogCarouselSec .owl-carousel .owl-dots button.owl-dot.active span {
    background: var(--primary-color);
}
/* Flechas de navegación */
.blogCarouselSec .owl-carousel .owl-nav {
    margin: 0;
}
.blogCarouselSec .owl-carousel .owl-nav button.owl-prev,
.blogCarouselSec .owl-carousel .owl-nav button.owl-next {
    width: 48px;
    height: 48px;
    top: 28%;
    background: rgba(0, 0, 0, 0.45);
    transition: background .25s ease, color .25s ease;
}
.blogCarouselSec .owl-carousel .owl-nav button.owl-prev { left: 0; }
.blogCarouselSec .owl-carousel .owl-nav button.owl-next { right: 0; left: auto; }
.blogCarouselSec .owl-carousel .owl-nav button i {
    font-size: 22px;
    line-height: 48px;
    color: #fff;
}
.blogCarouselSec .owl-carousel .owl-nav button:hover {
    background: var(--primary-color);
}
@media (max-width: 991px) {
    .blogCarouselSec {
        padding-top: 45px;
        padding-bottom: 60px;
    }
    .blogCarouselSec .owl-carousel .owl-dots {
        margin-top: 45px;
    }
}

/* ---- Página interna de noticia ---- */
/* Banner: portada en blanco y negro, sólo en la página de la noticia */
.noticiaBanner {
    position: relative;
    background: #0d0d0d;
    overflow: hidden;
}
.noticiaBanner .noticiaBannerBg {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    filter: grayscale(100%) contrast(1.05) brightness(0.95);
}
.noticiaBanner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(10,10,10,0.55), rgba(10,10,10,0.68));
}
.noticiaBanner .container {
    position: relative;
    z-index: 2;
}
.noticiaBanner .pageBannerContent h2 {
    font-size: 54px;
    line-height: 1.08;
}
@media (max-width: 991px) {
    .noticiaBanner .pageBannerContent h2 { font-size: 40px; }
}
@media (max-width: 575px) {
    .noticiaBanner .pageBannerContent h2 { font-size: 30px; }
}
.noticiaBody p {
    font-size: 17px;
    line-height: 30px;
    margin-bottom: 20px;
    color: #d0d0d0;
}
.noticiaBody p strong { color: #fff; }
.noticiaBody .wp_blockQuote { margin: 8px 0 14px; }
.caseStudyInfoThumbSec .csStuInfoThumb img {
    width: 100%;
    height: auto;
    display: block;
}
/* Imágenes intercaladas en el cuerpo */
.noticiaBody .noticiaFig,
.noticiaBody .noticiaFigRow {
    margin: 34px 0;
}
.noticiaBody .noticiaFig .galItem {
    margin: 0;
}
.noticiaBody .noticiaFig img {
    width: 100%;
    height: auto;
    display: block;
}
.noticiaBody .noticiaFigRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.noticiaBody .noticiaFigRow .galItem {
    margin: 0;
}
.noticiaBody .noticiaFigRow img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}
@media (max-width: 575px) {
    .noticiaBody .noticiaFigRow { grid-template-columns: 1fr; }
}
/* Menos espacio entre el fin de la nota y las fotos */
.caseStudyInfoContetnsec.noticiaContenidoSec {
    padding-bottom: 34px;
}
.noticiaGaleriaSec {
    padding-top: 0;
}
/* Navegación entre noticias (paginador: izq = más reciente / der = más antigua) */
.noticiaNavSec {
    padding-bottom: 120px;
}
.noticiaNavSec .postNavigationRow {
    border-radius: 4px;
}
.noticiaNavSec .postNavDisabled {
    opacity: .35;
    pointer-events: none;
}
.noticiaNavSec .postNavigationItem {
    width: 100%;
}
.noticiaNavSec .postNavNextItem {
    justify-content: flex-end;
}
.noticiaNavSec .postNavigationItem h3 {
    text-transform: uppercase;
    line-height: 1.25;
}
.noticiaNavSec .postNavigationItem img {
    filter: grayscale(100%);
    transition: filter .35s ease;
    object-fit: cover;
    flex-shrink: 0;
}
.noticiaNavSec .postNavigationItem:hover img {
    filter: grayscale(0%);
}
@media (max-width: 767px) {
    .noticiaNavSec .postNavigationRow .col-md-6:first-child:after { display: none; }
    .noticiaNavSec .postNavigationRow .col-md-6 + .col-md-6 { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); }
    .noticiaNavSec .postNavNextItem { justify-content: flex-start; }
    .noticiaNavSec .postNavNextItem .postNavTitleDate { text-align: left; }
}
@media (max-width: 991px) {
    .noticiaNavSec { padding-bottom: 70px; }
}
.noticiaGaleriaSec {
    padding-bottom: 90px;
}

/* ---- Archivo de Noticias ---- */
.noticiasArchivoSec {
    padding-top: 90px;
    padding-bottom: 120px;
}
.noticiasArchivo [class*="col-"] {
    margin-bottom: 50px;
}
.noticiasArchivo .blogGridRow {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
.noticiasArchivo .blogImgThumbnail img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.noticiasArchivo .blogContent02 {
    padding: 26px 16px 0 0;
}
.noticiasArchivo .blogContent02 h2 {
    font-size: 20px;
    line-height: 26px;
}
@media (max-width: 991px) {
    .noticiasArchivoSec { padding-top: 55px; padding-bottom: 70px; }
}
/* Galería final: una imagen bajo la otra, a todo color */
.noticiaGaleriaStack {
    display: block;
}
.noticiaGaleriaStack .galItem {
    display: block;
    overflow: hidden;
    position: relative;
    margin: 0 0 24px;
}
.noticiaGaleriaStack .galItem:last-child {
    margin-bottom: 0;
}
.noticiaGaleriaStack .galItem img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 991px) {
    .noticiaGaleriaSec { padding-bottom: 70px; }
}

/* Hero banner (imagen que reemplazó al video) */
/* El header flota en position:absolute (133px alto) sobre el slider;
   se empuja el banner bajo el header + un respiro extra.
   La imagen se muestra completa, sin recortes (height:auto). */
.slider02 {
    margin-top: 160px;
}
.heroBannerWrap {
    width: 100%;
    line-height: 0;
}
.heroBannerImg {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 767px) {
    .slider02 {
        margin-top: 148px;
    }
}

/* Trabajamos con las mejores marcas: menos espacio arriba, texto más grande */
.clientTestimonila_sec02 {
    padding-top: 100px;
}
.clientTestimonila_sec02 .client_content h3 {
    font-size: 34px;
}
@media (max-width: 767px) {
    .clientTestimonila_sec02 {
        padding-top: 65px;
        padding-bottom: 55px;
    }
    .clientTestimonila_sec02 .client_content h3 {
        font-size: 26px;
    }
    /* Menos espacio entre "trabajamos con las mejores marcas" y "sigamos
       viviendo experiencias juntos" */
    .aboutSection {
        padding-top: 24px;
    }
}

/* Imágenes de "Sigamos viviendo experiencias juntos": en mobile aparecen
   directamente, sin el fade-up de AOS (efecto de aparición) */
@media (max-width: 767px) {
    .aboutSection .abThumbImg01[data-aos],
    .aboutSection .abThumbImg02[data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Video del footer: embed de YouTube a todo el ancho, con reproducción automática */
.videoEmbedWrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    overflow: hidden;
}
.videoEmbedWrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Los anclajes del menú (Nosotros / Eventos) no deben quedar tapados
   por el header, que va en position:absolute/fixed por encima del contenido. */
#nosotros,
#eventos {
    scroll-margin-top: 150px;
}

/* Sección de marcas: se sale del ancho fijo del .container de Bootstrap
   (que topa en 1194px) para ocupar el 100% del ancho de la página. */
.clientTestimonila_sec02 .container {
    max-width: 100%;
    padding-left: 60px;
    padding-right: 60px;
}
@media (max-width: 767px) {
    .clientTestimonila_sec02 .container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Logos de marcas: mismo alto visual y sin desbordar su espacio,
   aunque cada logo tenga proporciones distintas. En desktop se ven
   menos ítems por vista (5) para que cada logo ocupe más ancho/alto;
   en mobile se ve 1 a la vez, bien grande. */
a.cleintLogo {
    width: 100%;
    height: 130px;
    justify-content: center;
}
a.cleintLogo img {
    max-height: 120px;
    max-width: 320px;
    width: auto;
    height: auto;
    object-fit: contain;
}
@media (max-width: 767px) {
    a.cleintLogo {
        height: 140px;
    }
    a.cleintLogo img {
        max-height: 130px;
        max-width: 300px;
    }
}

/* Botones deshabilitados: Hablemos (header) y Envíanos un mensaje (footer) */
.hdSupportBtn.disabled,
.boozyLinkBTN.disabled,
.aboutFooterNav .disabled {
    pointer-events: none;
    opacity: 0.45;
    cursor: default;
}

/* Links del footer en mayúsculas */
.aboutFooterNav ul li a {
    text-transform: uppercase;
}

/* Próximos Eventos (acordeón) en mobile/tablet: las columnas de Bootstrap
   se apilan sin clases col-sm/col-md, así que el .row interno se sale
   del ancho real del acordeón por el margen negativo por defecto (-12px),
   desalineando el contenido y el ícono "+" respecto al resto de la página. */
@media (max-width: 991px) {
    .boozyAcordion02 .accordion-button .row {
        margin-left: 0;
        margin-right: 0;
    }
    .boozyAcordion02 .accordion-button .row > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
}

/* CAUSA REAL del ícono +/- descolocado en iPhone (Safari): .accordion-button
   es un <button> HTML nativo forzado a display:unset. Safari conserva
   comportamiento nativo de form-control ahí (necesita resetear
   -webkit-appearance explícitamente), así que el botón no llega a expandirse
   a width:100% como en Chrome: se encoge al ancho de su primer contenido
   ("01"), y el ::after (posicionado "a la derecha de ESE botón angosto")
   termina apareciendo pegado al borde izquierdo de toda la fila. */
.boozyAcordion02 .accordion-button {
    display: block !important;
    width: 100% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-align: left !important;
    background: none !important;
    border: 0 !important;
}

/* El ícono +/- del acordeón usaba la fuente "Boozy" (icon font) para dibujar
   el glifo dentro de un ::after posicionado con right:1px. Se reemplaza por
   un "+"/"–" de texto plano, sin depender de ninguna fuente custom, para
   que la posición sea 100% predecible. */
.boozyAcordion02 .accordion-button:after {
    content: "+" !important;
    font-family: var(--primary-font) !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    position: absolute !important;
    left: auto !important;
    right: 4px !important;
    top: 24px !important;
}
.boozyAcordion02 .accordion-button:not(.collapsed):after {
    content: "–" !important;
    font-size: 26px !important;
    right: 4px !important;
    top: 24px !important;
}

/* Título de sección más grande (Próximos Eventos) */
.secHeading h3.pchSecTitle {
    font-size: 56px;
    line-height: 1.15;
}
@media (max-width: 991px) {
    .secHeading h3.pchSecTitle {
        font-size: 40px;
    }
}
@media (max-width: 575px) {
    .secHeading h3.pchSecTitle {
        font-size: 32px;
    }
}
@media (max-width: 991px) {
    .aboutSection .aboutContent {
        padding-top: 35px;
    }
}