/* Overrides propios del proyecto, cargado después del theme (topfloor.css) — ver EYWA-BACKEND-v1.2, 1.2/3.16. */

/* Banner de portada (includes/banner.php, administrar/banner.php) — patrón 3.46. */

/* Ubicación de texto/botón administrable. El padding real del proyecto ya
   es simétrico (.main-slider .container { padding: 154px 63px 32px }), así
   que a diferencia de otros proyectos no hace falta compensar un padding
   asimétrico pensado para "Izquierda" — solo alinear. */
.main-slider__content--centro {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.main-slider__content--derecha {
    margin-left: auto;
    text-align: right;
    /* Las flechas prev/next (.main-slider__nav) viven ancladas al borde
       derecho del mismo container (~60px de ancho + 35px de padding, ver
       topfloor.css) — sin este respiro, un título largo alineado a la
       derecha termina exactamente debajo de ellas (ver patrón 3.46). */
    padding-right: 130px;
}

@media (max-width: 991px) {
    .main-slider__content--derecha {
        padding-right: 0; /* el theme oculta .main-slider__nav bajo este breakpoint */
    }
}

.main-slider__content--centro .main-slider__btn-and-video {
    justify-content: center;
}

.main-slider__content--derecha .main-slider__btn-and-video {
    justify-content: flex-end;
}

/* Difuminar contenido tras 5s (radio "Difuminar contenido" del banner) — el
   proyecto no usa degradado propio sobre la imagen (ver administrar/banner.php,
   .main-slider__bg::before está desactivado en el CSS del theme), así que
   solo se desvanece el bloque de texto/botón, no ningún overlay. */
.main-slider__content {
    transition: opacity 1s ease;
}

.main-slider__content--difuminado {
    opacity: 0;
    pointer-events: none;
}

/* Modo "Solo 1 video" del banner: mismo contenedor .main-slider__bg que en
   modo fotos, con capas dentro (imagen de preloader + iframe de Vimeo) en
   vez de un solo background-image. Este slide no pasa por Swiper (no es un
   carrusel, no tiene .swiper-wrapper ni transform propio) — dos ajustes
   propios que en modo fotos ya resuelve Swiper por su cuenta:
   1) min-height: mismo alto responsivo que .main-slider .swiper-slide de
      topfloor.css, repetido explícito porque esas reglas asumen el
      .swiper-wrapper intermedio que este modo no tiene.
   2) position:relative + z-index:0 (nunca "auto"): en modo fotos, Swiper
      (effect:"fade") le aplica su propio transform a cada slide, y ESO es
      lo que crea el contexto de apilamiento que mantiene el z-index:-1 de
      .main-slider__bg correctamente detrás del fondo blanco del propio
      slide. Sin ese transform, el slide no aísla su apilamiento y su fondo
      blanco terminaba pintándose ENCIMA del video en vez de detrás. */
.main-slider__slide--video {
    position: relative;
    z-index: 0;
    min-height: 716px;
}

@media (max-width: 1450px) { .main-slider__slide--video { min-height: 620px; } }
@media (max-width: 1200px) { .main-slider__slide--video { min-height: 500px; } }
@media (max-width: 991px) { .main-slider__slide--video { min-height: 520px; } }
@media (max-width: 767px) { .main-slider__slide--video { min-height: 430px; } }

.hero-video-bg {
    overflow: hidden;
    background-color: var(--topfloor-black, #151422);
}

.hero-video-preloader {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: opacity .6s ease;
}

.hero-video-preloader--oculto {
    opacity: 0;
    pointer-events: none;
}

.hero-video-embed {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* 16:9 */
    min-height: 100%;
    min-width: 177.78%; /* 16:9 invertido */
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none; /* background=1 de Vimeo no trae controles; evita robar clics del banner */
}

/* Popup promocional del index (administrar/configuracion.php > Popup, patrón 3.40).
   Por encima del header/whatsapp/scroll-top del theme, que usan z-index hasta 9999999. */
.mfp-bg {
    z-index: 9999998;
}

.mfp-wrap {
    z-index: 9999999;
}

/* El ancho real lo fija el propio include vía style="" inline (ver
   includes/popup.php: width: min(90vw, <ancho real>px, <ancho equivalente
   a 85vh según la proporción real de la imagen>)) — es el ÚNICO lugar que
   decide el tamaño, considerando ancho Y alto de pantalla a la vez. Nunca
   agregar aquí un max-height independiente en la imagen: eso desalinea el
   ancho real de la imagen visible del ancho de este contenedor (en
   pantallas bajas tipo 1366×768 la imagen se encogía por el max-height,
   pero el contenedor no, y el texto —posicionado en % sobre el
   contenedor— quedaba más ancho que la imagen y se salía de ella). Todo
   lo de adentro solo llena ese ancho ya correcto (width:100%), con el
   alto siempre "auto" para que se derive de la proporción real. */
.popup-promocional {
    position: relative;
    isolation: isolate; /* contexto de apilamiento propio: el z-index:1 que swiper.min.css ya trae en .swiper-wrapper nunca compite fuera de este popup */
    margin: 0 auto;
}

.popup-promocional__slider {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .35);
    line-height: 0;
}

.popup-promocional__slider .swiper-wrapper,
.popup-promocional__slider .swiper-slide {
    width: 100%;
}

.popup-promocional__slide img {
    display: block;
    width: 100%;
    height: auto;
}

.popup-promocional__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 2;
    text-align: center;
}

.popup-promocional__dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 4px;
    background: #fff;
    opacity: .6;
}

.popup-promocional__dots .swiper-pagination-bullet-active {
    opacity: 1;
}

/* #popupPromocional (id) para ganarle en especificidad a las reglas propias
   de jquery.magnific-popup.css: "button.mfp-close" (fondo transparente) y
   ".mfp-close-btn-in .mfp-close" (color #333) tienen más especificidad que
   una sola clase — por eso el botón se veía "invisible" (círculo blanco
   transparente con una "×" gris oscuro sobre fondo oscuro). */
#popupPromocional .popup-promocional__cerrar {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #111;
    opacity: 1;
    font-size: 1.3rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
    cursor: pointer;
}

#popupPromocional .popup-promocional__cerrar:hover,
#popupPromocional .popup-promocional__cerrar:focus {
    opacity: 1;
}

/* Sin caja/degradado propio: el texto se apoya directamente sobre la
   imagen (ya viene con su propia zona oscura de diseño, ver patrón 3.40 —
   "sin tarjeta, la imagen es la superficie visual"), con solo un
   text-shadow como red de seguridad de legibilidad si esa imagen concreta
   no trae una zona suficientemente oscura. */
.popup-promocional__contenido {
    position: absolute;
    z-index: 2; /* swiper.min.css da z-index:1 a .swiper-wrapper (aun sin inicializar Swiper con 1 sola imagen) — sin esto, la imagen tapaba el texto. */
    top: 46%; /* "top", no "bottom": con "bottom" el bloque crece hacia arriba según el largo del texto y terminaba siempre muy pegado/abajo — con "top" arranca a media imagen y fluye hacia abajo, igual que en el diseño de referencia. */
    max-width: 64%;
    padding: 0 7%;
    color: #fff;
}

.popup-promocional__contenido--izquierda {
    left: 0;
    text-align: left;
}

.popup-promocional__contenido--centro {
    left: 50%;
    max-width: 82%;
    transform: translateX(-50%);
    text-align: center;
}

.popup-promocional__contenido--derecha {
    right: 0;
    text-align: right;
}

.popup-promocional__texto {
    margin-bottom: 20px;
    font-size: clamp(1rem, 3.2vw, 1.4rem);
    font-weight: 600;
    line-height: 1.45;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .7), 0 0 20px rgba(0, 0, 0, .5);
}

.popup-promocional__boton {
    text-shadow: none;
    font-size: clamp(.9rem, 2.4vw, 1rem);
}

/* Contenido HTML libre del editor RTE (descripcion_superior/descripcion_home
   de Servicios, y cualquier otro campo RTE futuro) impreso dentro de un
   bloque ".sec-p" de la maqueta: el editor genera <p> reales, mientras que
   la maqueta original usaba <div class="p">, así que se agrega esta regla
   para que ambos se vean igual (ver EYWA-BACKEND-v1.2, patrón 3.20). */
.sec-p p {
    font-size: 18px;
    line-height: 32px;
    color: var(--color-text);
    margin: 0;
}

.sec-p p + p {
    margin-top: 20px;
}

/* Comando "Lista con ícono predeterminado" del RTE (data-cmd="listaIconos")
   — vista previa dentro del editor en administrar/includes/rte.css, acá sin
   el scope ".rte__area" para que se vea igual en el sitio público (ver
   patrón 3.48). Ruta relativa recalculada desde assets/css/ hasta
   administrar/img/, donde viven los 13 iconoN.png reales. */
[class*="rte-li-icono-"] {
    list-style: none;
    padding-left: 0;
}

[class*="rte-li-icono-"] li {
    position: relative;
    padding-left: 26px;
}

.rte-li-icono-1 li::before { content: url('../../administrar/img/icono1.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-2 li::before { content: url('../../administrar/img/icono2.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-3 li::before { content: url('../../administrar/img/icono3.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-4 li::before { content: url('../../administrar/img/icono4.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-5 li::before { content: url('../../administrar/img/icono5.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-6 li::before { content: url('../../administrar/img/icono6.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-7 li::before { content: url('../../administrar/img/icono7.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-8 li::before { content: url('../../administrar/img/icono8.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-9 li::before { content: url('../../administrar/img/icono9.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-10 li::before { content: url('../../administrar/img/icono10.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-11 li::before { content: url('../../administrar/img/icono11.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-12 li::before { content: url('../../administrar/img/icono12.png'); position: absolute; left: 0; top: 0.15em; }
.rte-li-icono-13 li::before { content: url('../../administrar/img/icono13.png'); position: absolute; left: 0; top: 0.15em; }

/* .page-wrapper trae "overflow: hidden" fijo en el theme (topfloor.css) para
   recortar el sangrado horizontal de elementos decorativos de OTRAS
   secciones (banner, etc.) — pero cualquier ancestro con overflow distinto
   de "visible" rompe "position: sticky" de un descendiente, sin importar
   que la regla sticky en sí esté bien escrita (el elemento sticky deja de
   "despegarse" del todo, como si fuera position:relative). detalle-blog.php
   no tiene ningún elemento que dependa de ese recorte (verificado: ni
   .page-header, ni .blog-details, ni el carrusel de clientes usan márgenes
   negativos ni sangrado horizontal), así que se anula ahí de forma acotada
   vía una clase modificadora en el propio <div class="page-wrapper"> de esa
   página — nunca editando topfloor.css directamente (ver patrón 3.19). */
.page-wrapper--sticky-aside {
    overflow: visible;
}

/* Sidebar de detalle-blog.php pegado ("sticky") mientras se hace scroll del
   contenido del artículo, para que no quede un espacio en blanco debajo del
   sidebar cuando el post es más largo que él — a pedido explícito del
   propietario del proyecto. El theme NO usa GSAP ScrollSmoother (verificado
   en assets/js/topfloor.js — solo ScrollTrigger para una animación de texto
   puntual), así que `position: sticky` nativo es viable (ver EYWA-BACKEND-v1.2,
   patrón 3.31: ese patrón exige el pin con ScrollTrigger únicamente cuando
   ScrollSmoother envuelve el scroll de toda la página; no es el caso acá).
   Solo desde 1200px: bajo ese ancho .stricky-header (el header fijo) se
   oculta por completo (display:none), así que no hay nada de qué separar el
   sidebar, y en ese mismo breakpoint las columnas ya se apilan verticalmente. */
@media (min-width: 1200px) {
    .detalle-blog__sidebar {
        position: sticky;
        /* 92px = alto real de .stricky-header.main-menu-three (ver
           topfloor.css) + ~20px de aire para que no quede pegado al borde. */
        top: 112px;
        align-self: flex-start;
    }
}

/* Mismo comportamiento sticky que .detalle-blog__sidebar de arriba, aplicado
   al aside de detalle-servicio.php (empieza justo en el título "Todos
   nuestros servicios", que es el borde superior de este mismo contenedor) y
   al aside izquierdo de productos.php (empieza en el título "Buscar
   Producto") — mismas página-wrapper--sticky-aside en el <body> de cada una
   para anular el overflow:hidden del theme (ver comentario de esa clase,
   arriba), mismo criterio de "sin ScrollSmoother, sticky nativo es viable"
   (patrón 3.31). */
@media (min-width: 1200px) {
    .detalle-servicio__sidebar,
    .productos-page__sidebar {
        position: sticky;
        top: 112px;
        align-self: flex-start;
    }
}

/* "Mostrar todos" bajo el buscador de productos.php — aparece cuando hay una
   búsqueda y/o un filtro de categoría activos (patrón 3.18, no hay dato que
   mostrar si no se filtró nada), como única forma de volver al catálogo
   completo sin borrar el texto del input ni deseleccionar la categoría a mano. */
.productos-page__mostrar-todos {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-secondary);
}

.productos-page__mostrar-todos:hover {
    color: var(--color-primary-dark);
}

/* Categorías de productos.php como filtro real (antes solo texto plano) —
   mismo criterio visual que .service-details__service-list li.active de
   detalle-servicio.php: la categoría seleccionada resaltada en el color de
   acento del sitio. */
.productos-page__category-list li a {
    color: inherit;
    text-decoration: none;
    transition: color 300ms ease;
}

.productos-page__category-list li a:hover,
.productos-page__category-list li.active a {
    color: var(--color-secondary-dark);
}

/* Botones de compartir del detalle de blog — bloque agregado a pedido
   explícito del propietario del proyecto: SIEMPRE debe existir en el
   detalle de blog, aunque la maqueta original no lo trajera. */
.detalle-blog__compartir {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.detalle-blog__compartir-label {
    font-weight: 600;
    font-size: 16px;
    color: var(--color-dark);
    margin-right: 4px;
}

/* Carrusel de miniaturas de detalle-producto.php (Swiper, ver el <script>
   propio de esa página) — la miniatura real (.detalle-producto__thumb, del
   theme, con su propio ancho/alto fijo por breakpoint) puede terminar más
   angosta que el slide que Swiper calcula automáticamente en modo horizontal
   (móvil) al dividir el ancho del contenedor entre 3 — centrarla dentro de
   su slide evita que quede pegada al borde izquierdo con un hueco al lado. */
.detalle-producto__thumbs-carousel .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Widget flotante de WhatsApp con popup de chat simulado (includes/whatsapp-flotante.php)
   — reemplaza el enlace directo simple (#whatsappflotante, definido en topfloor.css y ya
   sin uso en el marcado), ver EYWA-BACKEND-v1.2, patrón 3.16. Acento = color base del theme
   (--topfloor-base) para que combine con el resto del sitio sin quedar hardcodeado aparte. */
.whatsapp-widget {
    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(--topfloor-base, #ee202a);
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.whatsapp-widget__logo {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--topfloor-base, #ee202a);
    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(--topfloor-base, #ee202a);
    font-size: .75rem;
    margin-bottom: 2px;
}

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

.whatsapp-widget__input,
.whatsapp-widget__input:focus {
    flex: 1;
    border: 1px solid var(--topfloor-base, #ee202a);
    border-radius: 20px;
    padding: 8px 14px;
    font-size: .85rem;
    color: #222; /* ver error 47: sin esto, un reset global "input { color: white }" del theme puede dejar el texto tecleado invisible sobre este fondo claro */
}

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

@media (max-width: 480px) {
    .whatsapp-widget {
        left: 12px;
        bottom: 12px;
    }

    .whatsapp-widget__popup {
        width: calc(100vw - 24px);
    }
}

/* Título "Categoría: X" sobre el listado de productos.php. */
.productos-page__categoria-actual {
    margin-bottom: 24px;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.detalle-blog__compartir a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    font-size: 16px;
    transition: background-color 300ms ease;
}

.detalle-blog__compartir a:hover {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

/* Validación client-side de formularios públicos (patrón EYWA-BACKEND-v1.2,
   3.59) — mensaje de error por campo (oculto hasta que assets/js/validacion-
   formulario.js le agrega form_error_msg_visible) y borde rojo en el campo
   inválido. Genérico a propósito: reutilizable por cualquier form.js-form-validado
   del sitio, no solo el de includes/inquietud.php. */
.form_error_msg {
    display: none;
    margin-top: 6px;
    font-size: 14px;
    color: #e33;
}

.form_error_msg.form_error_msg_visible {
    display: block;
}

input.field_invalid,
textarea.field_invalid {
    border-color: #e33 !important;
}

.contact-one__form-alert {
    margin-bottom: 24px;
    padding: 14px 18px;
    border-radius: 6px;
    background-color: #fdecea;
    border: 1px solid #e33;
    color: #b02a20;
    font-size: 15px;
}

.contact-one__recaptcha {
    margin-top: 20px;
}