/**
 * Theme Name:     Astra Child
 * Author:         Brainstorm Force
 * Template:       astra
 * Text Domain:	   astra-child
 * Description:    The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
 */

/* ===========================================
   FORMULARIO ENTRADA COMERCIO - CSS
   =========================================== */
.wpuf_featured_image_8, .wpuf_fotos_comercio_8,  {
    border-style: solid;
    border-top-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 1px;
    color: var(--ast-global-color-4);
    border-color: var(--ast-global-color-0);
    background-color: var(--ast-global-color-0);
    padding: 10px;
    font-family: inherit;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.2em;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
}
.wpuf-attachment-upload-filelist{
	margin-bottom: 15px!Important;
    margin-top: 30px;
}


.wpuf-section-title{
	font-family: inherit;
    font-weight: 500;
    font-size: 2rem;
	margin-top:2.5rem!Important;
	margin-bottom:1rem!Important;
}
   
.wpuf-radio-block{
	font-size: 1rem!Important;
}

/* ===========================================
   SINGLE COMERCIO - CSS
   Añadir al final de style.css del tema hijo
   =========================================== */

/* Contenedor single */
.single-comercio-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Navegación / Volver */
.comercio-navegacion {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
	margin-top: 30px;
    flex-wrap: wrap;
}

.volver-directorio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ast-global-color-6);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.volver-directorio:hover {
    color: var(--ast-global-color-0);
}

.volver-directorio svg {
    stroke: currentColor;
}

.comercio-sector-badge {
    background: var(--ast-global-color-5);
    color: var(--ast-global-color-6);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Single usa h1 en lugar de h3 */
.comercio-single .comercio-nombre {
    font-size: 1.8rem;
}

/* ===========================================
   RESPONSIVE SINGLE - MÓVIL
   =========================================== */
@media (max-width: 650px) {
    .single-comercio-container {
        padding: 20px 15px;
    }
    
    .comercio-navegacion {
        margin-bottom: 20px;
    }
    
    .comercio-single .comercio-nombre {
        font-size: 1.5rem;
    }
}
/* ===========================
BLOG
============================== */
.entry-title, .entry-title a {
	font-weight: 400!Important;}

/* Móvil */
@media (max-width: 650px) {
.entry-title, .entry-title a {
    font-weight: 500!Important;
	font-size: 1.5rem!Important;
}

.uagb-post-grid .uagb-post__title a
{
	    font-weight: 500!Important;
	font-size: 1.3rem!Important;}
}
.uagb-block-a975416f .uagb-post__inner-wrap {
    text-align: left;
    line-height: 1.4rem!Important;
}
.post-content>.cat-links, .post-content>.read-more, .post-content>.tags-links
 {
    display: block;
    margin-bottom: .4em;
    font-weight: 400;
    font-variant: small-caps;
}
.entry-meta, .entry-meta * {
    line-height: 1.45;
    color: var (--ast-global-color-3);
    font-weight: 400;
}


/* ===========================================
   PARALLAX - Compatible iOS
   =========================================== */
.parallax-section {
    position: relative !important;
    overflow: hidden !important;
    min-height: 500px;
    display: block !important;
    background-color: transparent !important;
}

.parallax-bg {
    position: absolute !important;
    top: -40% !important;
    left: 0 !important;
    width: 100% !important;
    height: 180% !important;
    background-size: cover !important;
    background-position: center !important;
    will-change: transform;
    z-index: 1 !important;
    pointer-events: none;
}

.parallax-content {
    position: relative !important;
    z-index: 10 !important;
    padding: 60px 20px;
}
/* ===========================================
   DIRECTORIO DE COMERCIOS - CSS v5.3
   =========================================== */

/* Contenedor principal */
.directorio-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* ===========================================
   BOTONERA DE SECTORES
   =========================================== */
.sectores-botonera {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
    margin-bottom: 50px;
}

.sector-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    min-height: 120px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.sector-btn:hover {
    border-color: var(--ast-global-color-6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.sector-btn.active {
    border-color: var(--ast-global-color-6);
    background: var(--ast-global-color-6);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.sector-btn.active .sector-icono img {
    filter: brightness(0) invert(1);
}

.sector-btn.active .sector-icono svg {
    stroke: #ffffff;
}

.sector-icono {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sector-icono img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

.sector-icono svg {
    width: 50px !important;
    height: 50px !important;
    stroke: var(--ast-global-color-6);
}

.sector-nombre {
    font-size: 0.8rem;
    text-align: center;
    line-height: 1.3;
    color: var(--ast-global-color-3);
    font-weight: 500;
}

.sector-btn.active .sector-nombre {
    color: #ffffff;
}

/* ===========================================
   LISTADO DE COMERCIOS
   =========================================== */
.comercios-listado {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Sector grupo - contenedor sin fondo */
.sector-grupo {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.sector-grupo.oculto {
    display: none;
}

/* ===========================================
   CABECERA INDEPENDIENTE
   Pastilla con bordes redondeados 4 esquinas
   =========================================== */
.sector-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 30px;
    background: var(--ast-global-color-5);
    border-radius: 32px;
}

.sector-cabecera-icono {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.sector-titulo {
    flex: 1;
    margin: 0;
    font-size: 1.6rem;
    color: var(--ast-global-color-6);
    font-weight: 500;
    font-family: inherit;
}

.volver-arriba {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.25s ease;
}

.volver-arriba:hover {
    background: var(--ast-global-color-6);
}

.volver-arriba svg {
    width: 14px;
    height: 14px;
    fill: var(--ast-global-color-6);
    transition: fill 0.25s ease;
}

.volver-arriba:hover svg {
    fill: #ffffff;
}

/* ===========================================
   COMERCIOS - Sin fondo, independiente
   =========================================== */
.comercios-sector {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: transparent;
}

/* Línea separadora entre comercios */
.comercio-separador {
    border: none;
    border-top: 1px solid #8d574470;
    margin: 30px 0;
}

/* ===========================================
   FICHA DE COMERCIO - DESKTOP
   =========================================== */
.comercio-ficha {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 20px;
}

/* Ficha sin fotos: una sola columna */
.comercio-ficha.sin-fotos {
    grid-template-columns: 1fr;
}

/* COLUMNA 1: FOTOS */
.comercio-col-fotos {
    display: flex;
    flex-direction: column;
}

.comercio-fotos {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.comercio-foto-principal {
    display: block;
    cursor: pointer;
}

.comercio-fotos img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.comercio-foto-principal:hover img {
    transform: scale(1.03);
}

.fotos-count {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.foto-oculta {
    display: none !important;
}

/* COLUMNA 2: INFO */
.comercio-col-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Logo */
.comercio-logo {
    width: 140px;
    height: 140px;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.comercio-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

/* Wrapper de datos */
.comercio-datos-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Bloques SIN líneas entre ellos */
.comercio-bloque {
    padding: 10px 0;
}

/* Nombre + Descripción */
.comercio-nombre {
    margin: 0 0 10px 0;
    font-size: 1.3rem;
    color: var(--ast-global-color-3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.3;
}

.comercio-descripcion {
    margin: 0;
    color: var(--ast-global-color-3);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Datos de contacto */
.comercio-bloque-datos {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comercio-dato {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    word-break: break-word;
    overflow-wrap: break-word;
}

.dato-icono {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.dato-icono svg {
    width: 18px;
    height: 18px;
    stroke: var(--ast-global-color-6);
    fill: none;
}

.dato-icono svg[fill="currentColor"] {
    fill: var(--ast-global-color-6);
    stroke: none;
}

/* dato-texto y dato-enlace mismo estilo, color 6 */
.dato-texto,
.dato-enlace {
    color: var(--ast-global-color-6);
    font-size: 0.95rem;
    line-height: 1.5;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

/* Hover en color 0 */
.dato-enlace:hover {
    color: var(--ast-global-color-0);
}

.badge-tienda {
    margin-left: 6px;
    font-size: 0.85rem;
}

.comercio-domicilio {
    margin-top: 5px;
    padding: 8px 12px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 8px;
    border-left: 3px solid #4caf50;
}

/* Redes Sociales */
.comercio-bloque-redes {
    padding-top: 15px;
}

.redes-label {
    display: block;
    font-size: 0.9rem;
    color: var(--ast-global-color-3);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    opacity: 0.6;
}

.redes-iconos {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.red-icono {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #ffffff;
    border-radius: 10px;
    text-decoration: none !important;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.red-icono:hover {
    background: var(--ast-global-color-6);
    transform: translateY(-2px);
}

.red-icono svg {
    width: 35px;
    height: 35px;
    transition: all 0.25s ease;
}

.red-icono svg[fill="none"] {
    stroke: var(--ast-global-color-6);
}

.red-icono:hover svg[fill="none"] {
    stroke: #ffffff;
}

.red-icono svg[fill="currentColor"] {
    fill: var(--ast-global-color-6);
}

.red-icono:hover svg[fill="currentColor"] {
    fill: #ffffff;
}

.badge-tienda-red {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 0.75rem;
}

/* ===========================================
   GLIGHTBOX
   =========================================== */
.goverlay {
    background: rgba(0, 0, 0, 0.92) !important;
}

.gclose {
    width: 70px !important;
    height: 70px !important;
    top: 20px !important;
    right: 20px !important;
    background: transparent !important;
    border: none !important;
    opacity: 1 !important;
}

.gclose:hover {
    opacity: 0.7 !important;
}

.gclose svg {
    width: 50px !important;
    height: 50px !important;
}

.gclose svg path,
.gclose svg line {
    stroke: #ffffff !important;
    stroke-width: 2 !important;
}

.gnext,
.gprev {
    width: 70px !important;
    height: 70px !important;
    background: transparent !important;
    border: none !important;
    opacity: 1 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.gprev { left: 20px !important; }
.gnext { right: 20px !important; }

.gnext:hover,
.gprev:hover {
    opacity: 0.7 !important;
}

.gnext svg,
.gprev svg {
    width: 40px !important;
    height: 40px !important;
}

.gnext svg path,
.gnext svg polyline,
.gprev svg path,
.gprev svg polyline {
    stroke: #ffffff !important;
    stroke-width: 2 !important;
}

.gcounter {
    color: #ffffff !important;
    font-size: 16px !important;
}


.ver-mapa {
    font-size: .9rem;
    opacity: 0.7;
}
/* ===========================================
   RESPONSIVE - TABLET
   =========================================== */
@media (max-width: 900px) {
    .sector-titulo {
        font-size: 1.4rem;
    }
    
    .comercio-nombre {
        font-size: 1.15rem;
    }
    
    .comercio-logo {
        width: 120px;
        height: 120px;
    }
}

/* ===========================================
   RESPONSIVE - MÓVIL GRANDE (650px)
   Botonera 3 columnas
   =========================================== */
@media (max-width: 650px) {
    .directorio-container {
        padding: 15px;
    }
    
    /* Botonera: 3 columnas */
    .sectores-botonera {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 30px;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    
    .sector-btn {
        min-height: 150px;
        padding: 18px 10px;
    }
    
    .sector-icono {
        width: 60px !important;
        height: 60px !important;
    }
    
    .sector-icono img {
        width: 60px !important;
        height: 60px !important;
    }
    
    .sector-icono svg {
        width: 60px !important;
        height: 60px !important;
    }
    
    .sector-nombre {
        font-size: 0.9rem;
    }
    
    /* Cabecera móvil */
    .sector-cabecera {
        padding: 20px;
        border-radius: 24px;
    }
    
    .sector-titulo {
        font-size: 1.2rem;
    }
    
    .sector-grupo {
        gap: 20px;
    }
    
    .comercio-separador {
        margin: 20px 0;
    }
    
    /* ===========================================
       FICHA MÓVIL: 1 COLUMNA VERTICAL
       Todo alineado a la izquierda
       =========================================== */
    .comercio-ficha,
    .comercio-ficha.sin-fotos {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 15px 0;
    }
    
    /* Fotos: ancho completo arriba */
    .comercio-col-fotos {
        width: 100%;
    }
    
    /* Info: 1 columna vertical, todo a la izquierda */
    .comercio-col-info {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    /* Logo a la izquierda, 180px */
    .comercio-logo {
        width: 180px;
        height: 180px;
        align-self: flex-start;
    }
    
    /* Datos debajo del logo, alineados izquierda */
    .comercio-datos-wrapper {
        width: 100%;
        text-align: left;
    }
    
    /* TAMAÑOS DE FUENTE MÓVIL */
    .comercio-nombre {
        font-size: 1.4rem;
        text-align: left;
    }
    
    .comercio-descripcion {
        font-size: 1.2rem;
        text-align: left;
    }
    
    .dato-texto,
    .dato-enlace {
        font-size: 1.2rem;
    }
    
    .dato-icono {
        margin-top: 4px;
    }
    
    .comercio-bloque {
        padding: 8px 0;
    }
    
    /* RRSS móvil - grandes y separados */
    .redes-label {
        font-size: 0.9rem;
    }
    
    .redes-iconos {
        gap: 30px;
    }
    
    .red-icono {
        width: 48px;
        height: 48px;
    }
    
    .red-icono svg {
        width: 35px;
        height: 35px;
    }
    
    /* Lightbox móvil */
    .gclose {
        width: 75px !important;
        height: 75px !important;
        top: 15px !important;
        right: 15px !important;
    }
    
    .gclose svg {
        width: 75px !important;
        height: 75px !important;
    }
    
    .gnext,
    .gprev {
        width: 75px !important;
        height: 75px !important;
    }
    
    .gprev { left: 10px !important; }
    .gnext { right: 10px !important; }
    
    .gnext svg,
    .gprev svg {
        width: 75px !important;
        height: 75px !important;
    }
}

/* ===========================================
   RESPONSIVE - MÓVIL PEQUEÑO (400px)
   Botonera 2 columnas
   =========================================== */
@media (max-width: 400px) {
    /* Botonera: 2 columnas */
    .sectores-botonera {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sector-btn {
        min-height: 130px;
        padding: 18px 10px;
    }
    
    .sector-icono {
        width: 50px !important;
        height: 50px !important;
    }
    
    .sector-icono img {
        width: 50px !important;
        height: 50px !important;
    }
    
    .sector-icono svg {
        width: 50px !important;
        height: 50px !important;
    }
    
    .sector-nombre {
        font-size: 0.9rem;
    }
    
    /* Ficha: mismos estilos 1 columna */
    .comercio-nombre {
        font-size: 1.4rem;
    }
    
    .comercio-descripcion,
    .dato-texto,
    .dato-enlace {
        font-size: 1.2rem;
    }
    
    /* Logo mismo tamaño */
    .comercio-logo {
        width: 180px;
        height: 180px;
    }
    
    /* RRSS - mismos tamaños grandes */
    .redes-iconos {
        gap: 30px;
    }
    
    .red-icono {
        width: 48px;
        height: 48px;
    }
    
    .red-icono svg {
        width: 35px;
        height: 35px;
    }
}