/*
 * Overrides propios del proyecto, cargado DESPUÉS del theme (main.css) —
 * nunca se edita main.css directamente (es un theme de terceros vendorizado).
 * Ver IMPORTANTE/EYWA-BACKEND-v1.0.md, sección 1.2.
 */

/* Banner (includes/banner.php): cuando el admin desactiva "Mostrar
   Contenido textos" para un slide, el bloque de texto sigue en el DOM (para
   que el slide conserve exactamente la misma altura que los demás, que la
   toma del propio contenido) pero se oculta visualmente, y se retira el
   degradado oscuro que normalmente lo hace legible sobre la imagen — ese
   degradado no tiene razón de estar si no hay texto encima. */
.banner-contents--oculto {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none;
}

.banner-section .background-img.background-img--sin-overlay::before {
    content: none !important;
}

/* Banner (includes/banner.php + administrar/banner.php, campo "Ubicación
   textos"): controla en qué lado de la pantalla aparece el bloque de texto
   del slide. Por defecto (Izquierda) no se necesita ninguna regla: el
   bloque es un div de bloque normal, sin margin ni flex, que ya queda
   pegado al borde izquierdo del .container -- comportamiento original del
   theme antes de existir este campo.
   Centro y Derecha reposicionan el bloque con flex en el propio .container
   (banner-align--centro/derecha) en vez de con margin:auto sobre el bloque
   mismo -- main.css fija `.banner-contents, .max-w-740-px {max-width:
   600px !important}` en el rango de escritorio más común (1000-1599px), así
   que ambos (el bloque Y su contenedor directo) miden casi lo mismo a esos
   anchos y un margin:auto ahí no tiene espacio real para moverse. El
   .container, en cambio, no tiene ese límite, así que flex + justify-content
   sobre él sí mueve el bloque completo de verdad.
   Centro además centra el texto y el botón dentro del bloque
   (banner-contents--centro). Derecha solo mueve la posición del bloque: el
   texto adentro sigue alineado a la izquierda (valor por defecto del theme,
   no se toca text-align ni justify-content), tal como se pidió. */
.banner-section .container.banner-align--centro {
    display: flex;
    justify-content: center;
}

.banner-section .container.banner-align--derecha {
    display: flex;
    justify-content: flex-end;
}

.banner-contents--centro .max-w-740-px {
    text-align: center;
}

/* La Descripción (<p>) trae su propio ancho máximo más angosto
   (.max-w-530-px, 530px contra los 740px del bloque que la contiene) para
   no verse demasiado ancha en el diseño original (Izquierda). `text-align:
   center` heredado de arriba solo centra el TEXTO dentro de esa caja de
   530px, pero la caja en sí sigue pegada al borde izquierdo de su padre de
   740px (es un div de bloque sin margin) -- por eso la Descripción se veía
   descuadrada frente al título/subtítulo, que sí ocupan los 740px completos
   y por eso sí se ven centrados. Centrando también la caja de 530px se
   resuelve. */
.banner-contents--centro .max-w-530-px {
    margin-inline: auto;
}

.banner-contents--centro .banner-item .d-flex {
    justify-content: center;
}

/* .banner-padding no tiene alto fijo en el theme: su altura la da el propio
   contenido de texto (padding + lo que ocupe título/subtítulo/descripción).
   Por eso un banner con poco o ningún texto (Título/Subtítulo/Descripción
   cortos en administrar/banner.php) queda visiblemente más bajo que uno con
   texto completo, aunque la imagen de fondo ya se suba/recorte igual para
   todos (1920x920, ver administrar/procesos/guardar-banner.php).
   `min-height` sola no bastó: el layout queda con el alto correcto (medible
   con getBoundingClientRect), pero el `background-image` (aplicado inline
   por JS vía data-background-image, main.js) no siempre repinta para cubrir
   una caja cuyo alto viene solo de min-height con height:auto — un banner
   con poco texto podía mostrar el fondo cortado antes de completar la caja,
   dejando ver el slide siguiente del carrusel por debajo. Un `height` fijo
   (con overflow:hidden ya heredado de .background-img para recortar el
   texto en el caso extremo de una descripción larguísima) evita depender de
   ese repintado y da además una caja 100% uniforme entre slides. */
.banner-section .banner-padding {
    height: 660px;
}

@media (min-width: 992px) {
    .banner-section .banner-padding {
        height: 620px;
    }
}

/* A partir de 1600px (monitores de escritorio anchos, no solo portátiles)
   620px ya no alcanza: el banner con más texto necesita ~669px de alto real
   (medido con JS, contentTop + scrollHeight del bloque de texto) y a 620px
   se recortaba el botón. 700px deja margen para el contenido real actual en
   este ancho. Medido en 992/1366/1440/1600/1920/2560px de ancho — nunca fijar
   un alto así sin probar contra el contenido más largo real en el ancho más
   grande que vaya a usarse, ver patrón 3.25 de EYWA-BACKEND-v1.0.md. */
@media (min-width: 1600px) {
    .banner-section .banner-padding {
        height: 850px;
    }
}

/* detalle-solucion.php, sección "about": la columna izquierda (Imagen 2)
   se mantiene "pegada" (sticky) bajo el header mientras el usuario recorre
   la columna derecha (Título 2/3, Descripción 2, botón Cotizar,
   Descripción 3 y el botón "Agendar por WhatsApp"), sin estirar ni recortar
   la imagen -- conserva sus proporciones naturales.
   `position: sticky` nativo NO sirve aquí: toda la página vive dentro de
   #smooth-content, que ScrollSmoother (custom-gsap.js) mueve con un
   `transform` en cada frame para el scroll suave; un descendiente sticky
   quedaría "pegado" según el scroll real pero luego se traslada igual que
   el resto del contenido, así que en vez de quedarse fijo en pantalla viaja
   con el mismo desfase/lag que todo lo demás. Por eso el pin se hace con
   GSAP ScrollTrigger (ver custom-gsap.js, bloque ".detalle-solucion-row"),
   que sí sabe compensar ese transform.
   El recorrido del pin termina cuando se acaba `.detalle-solucion-texto-col`
   (el `endTrigger` del ScrollTrigger en custom-gsap.js), así que si el texto
   de la derecha es corto esa columna no puede quedar más baja que la
   ventana visible o el pin no tendría espacio para moverse. `min-height:
   100vh` en la fila le da ese recorrido mínimo sin importar la resolución
   (con texto largo la propia altura del contenido ya supera el 100vh y
   manda) -- gracias a `align-items: stretch` esa altura mínima se propaga
   de la fila a la columna de texto, que es la que de verdad gobierna el
   final del pin. Solo aplica desde 992px, breakpoint en el que `col-lg-6`
   pone las columnas lado a lado: en mobile van apiladas y la imagen se ve a
   su alto natural sin pin. */
@media (min-width: 992px) {

    .detalle-solucion-row {
        min-height: calc(100vh - 100px);
        align-items: stretch !important;
    }

    .detalle-solucion-imagen-col {
        align-self: stretch;
        position: relative;
    }

    .solucion-imagen-columna {
        width: 100%;
    }

}

/* Widget flotante de WhatsApp con popup de chat simulado
   (includes/whatsapp-flotante.php, includes/whatsapp-flotante.js).
   Ver IMPORTANTE/EYWA-BACKEND-v1.0.md, patrón 3.16 — estructura y
   comportamiento fijos, solo cambia el color de acento por proyecto: aquí
   #00E2EE (bg-main2, el cian usado en los botones/CTA del theme). */
.whatsapp-widget {
    --whatsapp-widget-acento: #00E2EE;
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 1050;
}

.whatsapp-widget__boton {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    border: none;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.whatsapp-widget__popup {
    display: none;
    position: absolute;
    bottom: 76px;
    left: 0;
    width: 320px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    background: #fff;
}

.whatsapp-widget__popup--abierto {
    display: block;
}

.whatsapp-widget__header {
    background: #1a1a1a;
    border-bottom: 3px solid var(--whatsapp-widget-acento, #c9a227);
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.whatsapp-widget__logo {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--whatsapp-widget-acento, #c9a227);
    object-fit: cover;
}

.whatsapp-widget__info {
    flex: 1;
    color: #fff;
    font-size: .85rem;
}

.whatsapp-widget__estado {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    color: #cfcfcf;
}

.whatsapp-widget__punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #25d366;
}

.whatsapp-widget__cerrar {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
}

.whatsapp-widget__cuerpo {
    background: #f4efe6;
    background-image: radial-gradient(#e3ddce 1px, transparent 1px);
    background-size: 14px 14px;
    padding: 16px;
}

.whatsapp-widget__burbuja {
    background: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: .85rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

.whatsapp-widget__remitente {
    display: block;
    color: var(--whatsapp-widget-acento, #c9a227);
    font-size: .75rem;
    margin-bottom: 2px;
}

.whatsapp-widget__form {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #eee;
}

.whatsapp-widget__input {
    flex: 1;
    border: 1px solid var(--whatsapp-widget-acento, #c9a227);
    border-radius: 20px;
    padding: 8px 14px;
    font-size: .85rem;
}

.whatsapp-widget__enviar {
    background: #25d366;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: .8rem;
    font-weight: 700;
}

/* Popup de imágenes al cargar el sitio (includes/popup-imagenes.php,
   includes/popup-imagenes.js). Con una sola imagen se muestra fija; con
   varias, includes/popup-imagenes.js arma un swiper sobre .popup-imagenes-slider. */
.popup-imagenes .modal-dialog {
    max-width: 480px;
}

.popup-imagenes__content {
    background: transparent;
    border: none;
    /* .modal-content de Bootstrap es display:flex por defecto: un swiper
       (loop:true) metido ahí sin ancho fijo entra en un ciclo de recálculo
       flex<->swiper que dispara su ancho a un número absurdo (solo se nota
       con 2+ imágenes, porque con una sola no se arma swiper). display:block
       corta ese ciclo de raíz. */
    display: block;
}

.popup-imagenes-slider {
    width: 100%;
    min-width: 0;
}

.popup-imagenes__cerrar {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: #1a1a1a;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.popup-imagenes__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.popup-imagenes-slider .swiper-pagination {
    bottom: 10px;
}

.popup-imagenes-slider .swiper-button-next,
.popup-imagenes-slider .swiper-button-prev {
    color: #fff;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, .35);
    border-radius: 50%;
}

.popup-imagenes-slider .swiper-button-next::after,
.popup-imagenes-slider .swiper-button-prev::after {
    font-size: 14px;
}