/*
Theme Name: Astra Child - Valeria Sierra
Theme URI: https://valeriasierra.ar/
Template: astra
Author: Valeria Sierra
Author URI: https://valeriasierra.ar/
Description: Astra Child Theme for Valeria Sierra
Tags: modern, clean, blue, gold, real-estate, responsive
Version: 1.1.0
Text Domain: astra-child
*/

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/* --- CSS Variables --- */
:root {
    --vs-primary: #1A365D;
    --vs-accent: #D4AF37;
    --vs-bg-light: #F8F9FA;
    --vs-text-dark: #2D3748;
    --vs-text-light: #718096;
    --vs-font-headings: 'Montserrat', sans-serif;
    --vs-font-body: 'Inter', sans-serif;
}

/* --- Global Styles --- */
html {
    overflow-x: hidden;
    scroll-behavior: smooth !important;
    scroll-padding-top: 160px !important;
}

body,
.ast-builder-grid-row {
    font-family: var(--vs-font-body) !important;
    color: var(--vs-text-dark);
    background-color: var(--vs-bg-light);
    padding-top: 0 !important;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.ast-site-identity .site-title a {
    font-family: var(--vs-font-headings) !important;
    color: var(--vs-primary);
    font-weight: 700;
}

/* ==========================================================================
   HERO FRONT PAGE (PARALLAX + 100% ANCHO Y ALTO)
   ========================================================================== */
.valeria-hero-full {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 100vh;
    min-height: 600px;
    background-image: url('https://valeriasierra.ar/wp-content/uploads/2026/02/2-san-martin-de-los-andes-argentina-savarin-turismo.jpg');
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(26, 54, 93, 0.70) 0%, rgba(26, 54, 93, 0.45) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: white;
    padding: 0 20px;
    padding-top: 120px;
    max-width: 900px;
    animation: fadeInUp 1s ease forwards;
}

.hero-content h1 {
    font-size: 4.5rem;
    color: #ffffff !important;
    margin-bottom: 15px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.hero-content p {
    font-size: 1.5rem;
    margin-bottom: 40px;
    color: #eeeeee;
}

.hero-buttons-wrapper {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.valeria-btn-hero {
    background-color: var(--vs-accent);
    color: #ffffff !important;
    padding: 18px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-family: var(--vs-font-headings);
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s;
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
}

.valeria-btn-hero:hover {
    background-color: #b5952f;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.4);
}

/* ==========================================================================
   SECCIONES: SERVICIOS Y NOTICIAS
   ========================================================================== */
#servicios {
    scroll-margin-top: 160px !important;
    background-image: linear-gradient(rgba(248, 249, 250, 0.15), rgba(248, 249, 250, 0.35)), url('https://valeriasierra.ar/wp-content/uploads/2026/02/20240624_130152.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-bottom: 80px;
}

#noticias {
    scroll-margin-top: 160px !important;
}

/* ==========================================================================
   GRILLA DE SERVICIOS Y NOTICIAS (TARJETAS)
   ========================================================================== */
.valeria-servicios-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 40px !important;
    padding: 0 20px 0 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.valeria-servicio-card {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    padding: 50px 40px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1;
}

.valeria-servicio-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: var(--vs-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: 2;
}

.valeria-servicio-card:hover {
    transform: translateY(-15px) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.20) !important;
}

.valeria-servicio-card:hover::before {
    transform: scaleX(1);
}

.servicio-card-content {
    margin-bottom: 30px !important;
}

.servicio-card-title {
    font-size: 1.6rem !important;
    color: var(--vs-primary) !important;
    margin-bottom: 20px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

.servicio-card-text {
    color: var(--vs-text-light) !important;
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
}

.servicio-card-footer {
    margin-top: auto !important;
}

/* Botones genéricos de la Home */
.valeria-btn-servicio {
    display: block !important;
    padding: 15px 30px !important;
    background-color: transparent !important;
    color: var(--vs-primary) !important;
    border: 2px solid var(--vs-primary) !important;
    border-radius: 50px !important;
    font-family: var(--vs-font-headings) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
}

.valeria-btn-servicio:hover {
    background-color: var(--vs-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(26, 54, 93, 0.3) !important;
    transform: translateY(-2px);
}

.valeria-btn-whatsapp {
    display: block !important;
    padding: 15px 20px !important;
    background-color: #25D366 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    font-family: var(--vs-font-headings) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    font-size: 0.85rem !important;
}

.valeria-btn-whatsapp:hover {
    background-color: #1ebd5a !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4) !important;
}

/* ==========================================================================
   SECCIÓN PROPIEDADES (CATÁLOGO / GRILLA)
   ========================================================================== */
.valeria-news-section {
    background: var(--vs-bg-light);
    padding: 100px 20px;
}

.section-title {
    text-align: center;
    color: var(--vs-primary);
    font-size: 2.8rem !important;
    margin-bottom: 60px;
}

.valeria-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.valeria-news-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.valeria-news-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.news-card-image {
    height: 220px;
    position: relative;
    overflow: hidden;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.valeria-news-card:hover .news-card-image img {
    transform: scale(1.1);
}

.news-card-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.news-card-date {
    font-size: 0.85rem;
    color: var(--vs-text-light);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.news-card-title {
    font-size: 1.4rem !important;
    margin-bottom: 15px !important;
    line-height: 1.4 !important;
}

.news-card-title a {
    text-decoration: none;
    color: var(--vs-primary);
    transition: color 0.3s ease;
}

.news-card-title a:hover {
    color: var(--vs-accent);
}

.news-card-excerpt {
    color: var(--vs-text-light);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.news-card-footer {
    margin-top: auto;
}

.valeria-btn-news {
    display: inline-block;
    padding: 12px 25px;
    border: 1.5px solid var(--vs-primary);
    color: var(--vs-primary);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.valeria-btn-news:hover {
    background: var(--vs-primary);
    color: #ffffff;
}

.no-news {
    text-align: center;
    grid-column: 1 / -1;
    color: var(--vs-text-light);
}

/* --- Animaciones --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   FILTROS Y CABECERA DEL CATÁLOGO DE PROPIEDADES (ARCHIVO)
   ========================================================================== */
.ast-archive-description .ast-archive-title,
.ast-archive-description hr,
.ast-archive-description::after,
.ast-row article.ast-archive-post {
    display: none !important;
}

.ast-archive-description {
    border-bottom: none !important;
    padding-top: 90px !important;
    padding-bottom: 0 !important;
}

.valeria-filtros-propiedades {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    flex-wrap: wrap;
}

.valeria-btn-filtro {
    padding: 10px 25px;
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #ffffff !important;
    border-radius: 50px;
    color: var(--vs-primary) !important;
    text-decoration: none;
    font-family: var(--vs-font-headings);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.valeria-btn-filtro:hover,
.valeria-btn-filtro.active {
    background-color: var(--vs-primary) !important;
    color: #ffffff !important;
    border-color: var(--vs-primary) !important;
    box-shadow: 0 5px 15px rgba(26, 54, 93, 0.4);
}

body.archive .site-content {
    padding-top: 0 !important;
}

body.archive .valeria-news-section {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ==========================================================================
   CABECERA (HERO) DE PROPIEDAD INDIVIDUAL
   ========================================================================== */
.valeria-hero-propiedad {
    position: relative;
    width: 100vw;
    height: 60vh;
    min-height: 450px;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    padding: 0 50px 50px 50px;
    margin-top: -50px;
}

.hero-propiedad-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

.hero-propiedad-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-gold {
    display: block !important;
    color: var(--vs-accent) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 10px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

.hero-propiedad-title {
    color: #ffffff !important;
    font-size: 3.5rem !important;
    font-family: var(--vs-font-headings);
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    line-height: 1.1;
}

/* ==========================================================================
   DISEÑO INTERNO DE LA PROPIEDAD INDIVIDUAL (2 COLUMNAS)
   ========================================================================== */
.valeria-contenedor-propiedad {
    padding-top: 50px;
    padding-bottom: 80px;
}

.propiedad-grilla-principal {
    display: grid;
    grid-template-columns: 55% 40%;
    gap: 5%;
    margin-top: 40px;
    margin-bottom: 80px;
    align-items: start;
}

.descripcion-texto {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--vs-text-dark);
    margin-bottom: 40px;
}

.botones-contacto {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.valeria-btn-contacto {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    border-radius: 8px;
    font-family: var(--vs-font-headings);
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}

.valeria-btn-contacto:hover {
    transform: translateY(-3px);
}

.btn-whatsapp {
    background-color: #25D366;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover {
    background-color: #1ebd5a;
    box-shadow: 0 15px 30px rgba(37, 211, 102, 0.4);
}

.btn-email {
    background-color: var(--vs-primary);
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(26, 54, 93, 0.2);
}

.btn-email:hover {
    background-color: #112440;
    box-shadow: 0 15px 30px rgba(26, 54, 93, 0.3);
}

.propiedad-relacionadas {
    border-top: 1px solid #e2e8f0;
    padding-top: 60px;
}

/* ==========================================================================
   MEDIA QUERIES GLOBALES (CELULARES Y TABLETS)
   ========================================================================== */
@media (max-width: 1024px) {
    .hero-content h1 {
        font-size: 3.5rem;
    }

    .hero-content p {
        font-size: 1.3rem;
    }
}

@media (max-width: 992px) {

    /* Menú lateral moderno: ancho reducido + efecto vidrio esmerilado */
    .ast-mobile-popup-drawer .ast-mobile-popup-inner {
        max-width: 40% !important;
        background-color: rgba(255, 255, 255, 0.70) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1) !important;
    }

    /* Eliminar las cajas blancas internas de Astra para que la transparencia se luzca */
    .ast-mobile-popup-drawer .ast-mobile-popup-header,
    .ast-mobile-popup-drawer .ast-mobile-popup-content,
    .ast-mobile-popup-drawer .ast-builder-menu-mobile .main-header-menu,
    .ast-mobile-popup-drawer .ast-builder-menu-mobile .main-header-menu .menu-item,
    .ast-mobile-popup-drawer .ast-builder-menu-mobile .main-header-menu .menu-link {
        background-color: transparent !important;
        background: transparent !important;
    }

    .ast-primary-header-bar .ast-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Reducir los márgenes laterales de la cabecera en el celular */
    .ast-primary-header-bar .ast-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .propiedad-grilla-principal {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .columna-datos {
        order: 1;
    }

    .columna-visual {
        order: 2;
    }

    .main-navigation ul {
        flex-direction: column;
        align-items: center;
        padding-bottom: 20px;
    }

    .main-navigation ul li {
        margin: 5px 0;
    }

    .valeria-hero-full {
        height: 100vh;
        padding: 150px 0 100px 0;
    }

    .hero-content h1 {
        font-size: 2.8rem;
    }

    .hero-content p {
        font-size: 1.1rem;
    }

    .valeria-servicios-grid {
        gap: 30px !important;
    }

    .valeria-hero-propiedad {
        height: 40vh;
        min-height: 350px;
        padding: 0 20px 30px 20px;
        margin-top: 0;
    }

    .hero-propiedad-title {
        font-size: 2rem !important;
    }
}

/* ==========================================================================
   FILTROS NATIVOS (REORDENAMIENTO Y OCULTAMIENTO)
   ========================================================================== */
a.ast-post-filter-single[data-filter="https://valeriasierra.ar"] {
    display: none !important;
}

div:has(> a.ast-post-filter-single),
ul:has(> li > a.ast-post-filter-single) {
    display: flex !important;
    justify-content: center !important;
}

a.ast-post-filter-single:nth-child(3),
li:has(> a.ast-post-filter-single):nth-child(3) {
    order: 1 !important;
}

a.ast-post-filter-single:nth-child(2),
li:has(> a.ast-post-filter-single):nth-child(2) {
    order: 2 !important;
}

a.ast-post-filter-single:nth-child(4),
li:has(> a.ast-post-filter-single):nth-child(4) {
    order: 3 !important;
}

/* ==========================================================================
   FONDOS PARALLAX (CATEGORÍAS Y HOME)
   ========================================================================== */
body.category,
section#noticias {
    background-image: url('https://valeriasierra.ar/wp-content/uploads/2026/02/2-san-martin-de-los-andes-argentina-savarin-turismo.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

section#noticias {
    padding: 80px 0 !important;
}

section#noticias .section-title {
    color: #ffffff !important;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8) !important;
    text-align: center;
    margin-bottom: 40px;
}

/* ==========================================================================
   ESTILOS DE TARJETAS NATIVAS ASTRA/SPECTRA (MANTENIMIENTO DE COMPATIBILIDAD)
   ========================================================================== */
body.category .site-content,
body.category .ast-plain-container,
body.category #main,
body.category article.ast-archive-post,
body.category article.ast-article-post {
    background-color: transparent !important;
    box-shadow: none !important;
}

body.category .ast-article-post,
body.category .ast-archive-post,
body.category .ast-post-filter-wrap,
body.category .ast-article-inner,
body.category .uagb-post__inner-wrap {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-radius: 12px !important;
    padding: 25px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

body.category .ast-article-inner {
    height: 100% !important;
}

body.category .uagb-post__items {
    gap: 30px !important;
}

body.category .ast-article-inner:hover,
body.category .uagb-post__inner-wrap:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   FORZAR MENÚ PRINCIPAL HORIZONTAL EN PC
   ========================================================================== */
@media (min-width: 922px) {
    .ast-desktop .main-header-menu {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 30px !important;
    }

    .ast-desktop .main-header-menu>li {
        width: auto !important;
        display: inline-block !important;
        margin: 0 !important;
    }
}