/*
Theme Name:   Monumental Child
Theme URI:    https://monumental.com.bo
Description:  Tema hijo de Centro de Compras Monumental (Astra + Elementor). Las páginas se editan con Elementor; header, footer, logo, colores y menús desde Apariencia > Personalizar y Apariencia > Menús. Aquí solo van estilos que Astra/Elementor no ofrecen.
Author:       TI Grupo Lafuente
Template:     astra
Version:      1.0.0
Text Domain:  monumental-child
*/

/* ─── HEADER (Astra) ────────────────────────────────────────────────
   Colores, tipografías, logo, alturas y textos se editan en
   Apariencia > Personalizar > Header. Menús en Apariencia > Menús
   ("Main" = menú principal, "Menú Superior" = botones de la barra naranja,
   "Menú Móvil" = el que se abre con el botón ☰ en celulares).
   Aquí solo va lo que el Personalizador de Astra no ofrece. */

/* Sin relleno extra alrededor del logo: la altura del header la define
   Personalizar > Header > Primary Header > Height. */
.ast-primary-header-bar .ast-site-identity {
    padding-top: 0;
    padding-bottom: 0;
}

/* Barra naranja: teléfono y correo en una fila (en celular se acomodan en dos). */
.ast-header-html-1 .ast-builder-html-element p { margin: 0; }
.mtl-barra-contacto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
}
.mtl-barra-contacto a { text-decoration: none; }
.mtl-barra-contacto a:hover { text-decoration: underline; }
@media (max-width: 921px) {
    .mtl-barra-contacto { justify-content: center; }
}

/* Barra naranja: los ítems del "Menú Superior" se ven como botones redondeados.
   El color del texto se cambia en Personalizar > Header > Secondary Menu;
   el fondo azul de los botones se cambia aquí. */
.ast-builder-menu-2 .main-header-menu { gap: 10px; }
/* Astra estira los ítems al alto de la barra (48px): se dejan del alto de su texto */
.ast-above-header-bar .ast-builder-menu-2 .main-header-menu > .menu-item,
.ast-above-header-bar .ast-builder-menu-2 .main-header-menu > .menu-item > .menu-link { line-height: 1.4; }
.ast-above-header-bar .ast-builder-menu-2 .main-header-menu > .menu-item { align-items: center; }
.ast-builder-menu-2 .main-header-menu > .menu-item > .menu-link {
    background: #1a6fa8;
    border-radius: 20px;
    padding: 6px 20px;
    white-space: nowrap;
}
.ast-builder-menu-2 .main-header-menu > .menu-item > .menu-link:hover { background: #155d8e; }

/* Cambio a header de celular: Astra lo decide con JavaScript sin contar la barra de scroll,
   pero su CSS sí la cuenta. En Windows, entre ~922 y ~937px de ancho se veían los DOS headers
   (escritorio y celular) a la vez. Aquí manda la decisión del JavaScript. */
body.ast-header-break-point #ast-desktop-header { display: none !important; }
/* En esa misma franja, la barra naranja del header de celular tomaba el alto de escritorio y el
   texto quedaba arriba: se iguala a como se ve en celular (40px, texto centrado). */
@media (min-width: 922px) {
    body.ast-header-break-point #ast-mobile-header .ast-above-header-bar {
        display: flex;
        align-items: center;
        min-height: 40px;
        padding: 6px 15px;
    }
    body.ast-header-break-point #ast-mobile-header .ast-above-header-bar > * { width: 100%; }
    /* parte blanca (logo + ☰): 70px como en celular (Personalizar > Header > Primary Header > Height, tablet/celular) */
    body.ast-header-break-point #ast-mobile-header .ast-primary-header-bar {
        display: grid;
        min-height: 70px;
    }
}

/* Menú principal en pantallas medianas (desde el ancho del menú ☰ hasta 1099px): letra y relleno
   más chicos para que no se parta en dos líneas. Desde 1100px vale lo de
   Personalizar > Header > Primary Menu (14px). Astra no tiene un tamaño para este rango. */
@media (min-width: 922px) and (max-width: 1099px) {
    .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
        font-size: 13px;
        padding-left: 10px;
        padding-right: 10px;
    }
}
@media (min-width: 922px) and (max-width: 1023px) {
    .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
        font-size: 12px;
        padding-left: 9px;
        padding-right: 9px;
    }
}

/* Submenú (ej. PROMOCIONES): fondo naranja y texto blanco.
   Escritorio: Astra gratis no tiene colores propios para el submenú, se cambian aquí.
   Celular: el fondo está en Personalizar > Header > Off-Canvas/Mobile Menu; el texto blanco, aquí. */
.ast-builder-menu-1 .main-header-menu .sub-menu { background: #f39200; }
.ast-builder-menu-1 .main-header-menu .sub-menu .menu-item > .menu-link,
.ast-builder-menu-mobile .main-header-menu .sub-menu .menu-item > .menu-link { color: #fff; }
.ast-builder-menu-1 .main-header-menu .sub-menu .menu-item:hover > .menu-link,
.ast-builder-menu-1 .main-header-menu .sub-menu .menu-item > .menu-link:focus,
.ast-builder-menu-mobile .main-header-menu .sub-menu .menu-item > .menu-link:hover {
    color: #fff;
    background: rgba(0,0,0,.1);
}

/* Header fijo al hacer scroll (escritorio y celular): la barra naranja sale de
   pantalla y queda visible el logo + menú. Con la barra de administración de
   WordPress (solo usuarios con sesión iniciada) se corre debajo de ella. */
#masthead {
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow .3s ease;
}
@media (max-width: 921px) {
    #masthead { top: calc(-1 * var(--mtl-barra-alto, 0px)); }
}
@media (min-width: 601px) and (max-width: 782px) {
    .admin-bar #masthead { top: calc(46px - var(--mtl-barra-alto, 0px)); }
}
@media (min-width: 783px) and (max-width: 921px) {
    .admin-bar #masthead { top: calc(32px - var(--mtl-barra-alto, 0px)); }
}
@media (min-width: 922px) {
    #masthead { top: calc(-1 * var(--mtl-barra-alto, 48px)); }
    .admin-bar #masthead { top: calc(32px - var(--mtl-barra-alto, 48px)); }
}
/* Al bajar: sombra y línea naranja bajo el header (la clase la pone functions.php) */
#masthead.mtl-header-scroll {
    box-shadow: 0 3px 18px rgba(0,0,0,.12);
    border-bottom: 3px solid #f39200;
}

/* Menú del celular: sombra y entrada suave (el panel baja con un fundido
   y los ítems aparecen escalonados). */
#ast-mobile-header .ast-mobile-header-content {
    z-index: 99;
    border-top: 1px solid #e8e8e8;
    box-shadow: 0 12px 24px rgba(0,0,0,.15);
    animation: mtl-menu-movil-entrada .28s ease-out;
}
#ast-mobile-header .ast-mobile-header-content .menu-item {
    animation: mtl-menu-movil-item .3s ease-out both;
}
#ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(2) { animation-delay: .03s; }
#ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(3) { animation-delay: .06s; }
#ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(4) { animation-delay: .09s; }
#ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(5) { animation-delay: .12s; }
#ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(6) { animation-delay: .15s; }
#ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(7) { animation-delay: .18s; }
#ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(n+8) { animation-delay: .21s; }
@keyframes mtl-menu-movil-entrada {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mtl-menu-movil-item {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ─── FOOTER (Astra) ────────────────────────────────────────────────
   Texto del copyright, colores y fondo naranja se editan en
   Apariencia > Personalizar > Footer > Copyright y Below Footer. */
/* Interlineado del copyright (Astra gratis solo permite cambiar el tamaño de letra) */
.site-below-footer-wrap .ast-footer-copyright p { margin: 0; line-height: 1.4; }
/* En celular Astra deja 10px bajo cada columna del footer; con una sola columna sobran */
.site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] .site-footer-section.site-footer-below-section-1 { margin-bottom: 0; }

/* ─── BOTONES FLOTANTES (functions.php) ──────────────────────────────
   "Pago de cuota online" (derecha), WhatsApp (abajo) y redes sociales.
   Los enlaces y el número de WhatsApp se cambian en functions.php. */
.mtl-pago-flotante {
    position: fixed;
    right: 0;
    top: 38%;
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 12px;
    border-radius: 8px 0 0 8px;
    background: #f39200;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-decoration: none;
    box-shadow: -2px 2px 8px rgba(0,0,0,.25);
    transition: transform .2s;
}
.mtl-pago-flotante:hover,
.mtl-pago-flotante:focus { color: #fff; transform: translateX(-4px); }
.mtl-pago-flotante svg { flex-shrink: 0; width: 16px; height: 16px; fill: #fff; }

.mtl-whatsapp-flotante {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    transition: transform .2s;
}
.mtl-whatsapp-flotante:hover { transform: scale(1.1); }
.mtl-whatsapp-flotante svg { width: 30px; height: 30px; fill: #fff; }

.mtl-redes-flotantes {
    position: fixed;
    right: 16px;
    bottom: 100px;
    z-index: 9998;
    display: flex;
    gap: 8px;
}
.mtl-redes-flotantes a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    transition: transform .2s, box-shadow .2s;
}
.mtl-redes-flotantes a:hover { transform: scale(1.12); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.mtl-redes-flotantes svg { width: 18px; height: 18px; fill: #fff; }
.mtl-redes-flotantes .mtl-red--facebook  { background: #3b5998; }
.mtl-redes-flotantes .mtl-red--youtube   { background: #ff0000; }
.mtl-redes-flotantes .mtl-red--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }

/* ─── ELEMENTOR: páginas y utilidades ────────────────────────────────
   Clases que se asignan en Elementor > Avanzado > Clases CSS. */

/* Páginas hechas con Elementor (ancho completo): sin márgenes ni título del tema.
   En escritorio quedan 60px de espacio blanco antes del footer, igual que en las
   páginas originales de Astra (margen inferior de #primary, desde 1200px de ancho). */
.ast-page-builder-template .site-content {
    padding: 0 !important;
    margin: 0 !important;
}
@media (min-width: 1200px) {
    .ast-page-builder-template .site-content { padding-bottom: 60px !important; }
}
.ast-page-builder-template .entry-content {
    padding: 0 !important;
    margin: 0 !important;
}
.ast-page-builder-template .entry-header { display: none !important; }

/* Caja de imagen con ícono chico (ej. íconos de Empresa): la imagen ocupa todo el tamaño
   definido en el widget (Elementor no amplía imágenes más chicas que ese tamaño). Clase: mtl-icono */
.mtl-icono .elementor-image-box-img img { width: 100%; display: block; }
.elementor-widget.mtl-icono .elementor-image-box-img { vertical-align: top; } /* sin el hueco de línea bajo el ícono */

/* Contador con el rótulo centrado aunque ocupe dos líneas (ej. cifras de Empresa en celular).
   Clase: mtl-cifra */
.mtl-cifra .elementor-counter-title { text-align: center; }

/* Mapa de Google con bordes redondeados (ej. Contacto). Clase: mtl-mapa */
.mtl-mapa iframe { display: block; border-radius: 4px; }

/* Galería básica que se ve como las galerías de las promociones originales: imágenes de una
   misma fila con el mismo alto (se recortan apenas, como en el original), la última fila
   incompleta se reparte todo el ancho, sombra suave y 2 columnas en celular (Elementor
   pasaba a 1 columna bajo 480px). Clase: mtl-galeria */
.elementor-widget.mtl-galeria .gallery { display: flex; flex-wrap: wrap; }
.elementor-widget.mtl-galeria .gallery .gallery-item { flex: 1 1 0; max-width: none; }
.elementor-widget.mtl-galeria .gallery-columns-2 .gallery-item { min-width: 50%; }
.elementor-widget.mtl-galeria .gallery-columns-3 .gallery-item { min-width: 33.333%; }
.elementor-widget.mtl-galeria .gallery-columns-4 .gallery-item { min-width: 25%; }
@media (max-width: 767px) {
    .elementor-widget.mtl-galeria .gallery .gallery-item { min-width: 50%; }
}
.elementor-widget.mtl-galeria .gallery-icon,
.elementor-widget.mtl-galeria .gallery-icon a { display: block; height: 100%; }
.elementor-widget.mtl-galeria .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 0 30px rgba(0, 0, 0, .15);
}

/* Título de sección (H2) con el tamaño de un H1 de Astra, para que cada página tenga un solo H1
   sin cambiar cómo se ve (ej. títulos de las promociones). Clase: mtl-como-h1 */
.mtl-como-h1 .elementor-heading-title { font-size: 36px; }
@media (max-width: 921px) {
    .mtl-como-h1 .elementor-heading-title { font-size: 27.36px; }
}

/* Texto que no se ve pero leen Google y los lectores de pantalla (ej.: el H1 de
   páginas cuyo título visible es una imagen). Clase: mtl-solo-lectores */
.mtl-solo-lectores {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ─── GRILLA DE NOTICIAS (shortcode [monumental_noticias], ver functions.php) ───
   Escritorio: noticias en 2 columnas + recuadro de Facebook a la derecha.
   Hasta 900px: Facebook pasa debajo de las noticias. Hasta 600px: 1 noticia por fila. */
.mtl-noticias { background: #fff; padding: 40px 20px; }
.mtl-noticias .mtl-noticias__fila { max-width: 1100px; margin: 0 auto; display: flex; gap: 30px; align-items: flex-start; }
.mtl-noticias .mtl-noticias__lista { flex: 1; min-width: 0; }
.mtl-noticias .mtl-noticias__grilla { display: flex; flex-wrap: wrap; gap: 24px; }
.mtl-noticias .mtl-noticias__tarjeta {
    flex: 0 0 calc(50% - 12px);
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.mtl-noticias .mtl-noticias__img { display: block; width: 100%; height: 200px; object-fit: cover; }
.mtl-noticias .mtl-noticias__cuerpo { padding: 16px 18px 20px; }
.mtl-noticias h2.mtl-noticias__titulo { margin: 0 0 8px; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 700; line-height: 1.4; }
.mtl-noticias .mtl-noticias__titulo a,
.mtl-noticias .mtl-noticias__titulo a:hover,
.mtl-noticias .mtl-noticias__titulo a:focus { color: #333; text-decoration: none; }
.mtl-noticias p.mtl-noticias__resumen { margin: 0 0 12px; color: #666; font-size: 14px; line-height: 1.6; }
.mtl-noticias a.mtl-noticias__leer,
.mtl-noticias a.mtl-noticias__leer:hover,
.mtl-noticias a.mtl-noticias__leer:focus { color: #f39200; font-size: 13px; font-weight: 700; text-decoration: none; }
.mtl-noticias .mtl-noticias__lateral { flex: 0 0 300px; min-width: 280px; }
.mtl-noticias .mtl-noticias__caja { margin-bottom: 24px; padding: 20px; border-radius: 4px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.mtl-noticias h3.mtl-noticias__caja-titulo {
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f39200;
    color: #333;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
}
/* El recuadro de Facebook se dibuja a 260px (parámetro width de la URL): no estirarlo */
.mtl-noticias .mtl-noticias__facebook { display: block; overflow: hidden; width: 260px; max-width: 100%; border: none; }
@media (max-width: 900px) {
    .mtl-noticias .mtl-noticias__fila { flex-direction: column; align-items: stretch; }
    .mtl-noticias .mtl-noticias__lateral { flex: none; min-width: 0; }
    .mtl-noticias .mtl-noticias__facebook { margin: 0 auto; }
}
@media (max-width: 600px) {
    .mtl-noticias .mtl-noticias__tarjeta { flex-basis: 100%; }
}

/* ─── DETALLE DE NOTICIA (entradas) ──────────────────────────────────
   Título, fecha e imagen destacada: Personalizar > Blog > Entrada individual.
   Colores: Personalizar > Global > Colores (acento = naranja). Aquí solo el botón
   "← Volver a Noticias" que reemplaza a "Anterior / Siguiente" (ver functions.php). */
.single-post .mtl-volver {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--ast-global-color-7);
}
.single-post .mtl-volver a.mtl-volver__boton {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 4px;
    background: var(--ast-global-color-0);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    text-decoration: none;
    transition: background .2s;
}
/* Videos de Facebook pegados en una noticia: ancho completo y proporción 16:9 también en celular */
.single-post .entry-content iframe[src*="facebook.com/plugins/video"] {
    width: 100%;
    max-width: 560px;
    height: auto;
    aspect-ratio: 16 / 9;
}
.single-post .mtl-volver a.mtl-volver__boton:hover,
.single-post .mtl-volver a.mtl-volver__boton:focus { background: var(--ast-global-color-1); color: #fff; }