/**
Theme Name: Mesta
Author: Mesta.es
Description: Versión Original (Funcional) - Estructurada y Comentada
Template: astra
*/

/* ============================================================== */
/* 1. LAYOUT GLOBAL Y CONTENEDORES                                */
/* ============================================================== */

/* CABECERA _______________________________) */

/* Corregir el espaciado en menú en la página de Entradas (Blog) */
.blog .ast-builder-menu-1 {
    flex-grow: 1 !important; /* Obliga al menú a ocupar el espacio disponible */
}

.blog .main-header-bar-navigation {
    justify-content: flex-end !important; /* Lo mantiene a la derecha pero con su espacio */
    width: auto !important;
}

.blog .main-header-menu .menu-item {
    margin-left: 1.5em !important; /* Asegura el aire entre ítems */
}


/* --- ELIMINAR SALTO DE CABECERA (120px) --- */




/* ============================================================== */
/* 2. TIPOGRAFÍA, LISTAS Y ENLACES                                */
/* ============================================================== */

/* Tamaño de fuente 'Small' personalizado */
body .post-ficha-col-g-txt.has-small-font-size {
    font-size: 16px !important; 
    line-height: 1.65em !important; 
}

@media (max-width: 767px) {
    body .post-ficha-col-g-txt.has-small-font-size {
        font-size: 16px !important; 
        line-height: 1.65em !important; 
    }
}

/* Espaciado de párrafos y listas */
.entry-content p, .page-content p {
    margin-top: 0px !important;
    margin-bottom: 15px !important;
    padding: 0px !important;
}

.entry-content ul, .entry-content ol, .page-content ul, .page-content ol {
    margin-top: 0px !important;
    margin-bottom: 15px !important;
    margin-left: 0px !important;      
    padding-left: 0px !important;     
}

.entry-content li, .page-content li {
    margin-bottom: 5px !important;
}

/* Viñetas cuadradas en contenido */
.entry-content ul li, .ast-single-post ul li {
    list-style-type: square !important;
    margin-left: 1.5em !important;      
}

/* Reset de listas para filtros/roles específicos */
ul[role="list"] {
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Flechas en Menú Vertical */
.menu-vertical .wp-block-navigation-item {
    list-style-type: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    line-height: normal; 
}

.menu-vertical .wp-block-navigation-item a::before {
    content: "\2192"; 
    display: inline-block;
    margin-right: 0.5em;
    position: relative; 
    top: -1px;
    font-weight: bold;
}

/* Subrayado animado en enlaces de texto */
.single .entry-content a:not(:has(img)):not(.button):not(.wp-block-button__link),
.page .entry-content a:not(:has(img)):not(.button):not(.wp-block-button__link) {
    position: relative;
    text-decoration: none !important;
}

.single .entry-content a:not(:has(img)):not(.button):not(.wp-block-button__link)::after,
.page .entry-content a:not(:has(img)):not(.button):not(.wp-block-button__link)::after {
    content: "";
    position: absolute;
    left: 0; bottom: -3px;
    height: 1px; width: 0%;
    background: currentColor;
    transition: width 0.25s ease;
}

.single .entry-content a:not(:has(img)):not(.button):not(.wp-block-button__link):hover::after,
.page .entry-content a:not(:has(img)):not(.button):not(.wp-block-button__link):hover::after {
    width: 100%;
}

/* Estilo Leyenda ▲ */
.leyenda { margin-bottom: 0px !important; padding: 0px !important; }
.leyenda::before {
    content: "\25B2"; font-size: 10px; color: #636363; margin-right: 10px; vertical-align: middle;
}

/* ============================================================== */
/* 3. BOTONES, ELEMENTOS DE ENTRADA, DESPLEGABLES                          */
/* ============================================================== */


/* --- BOTÓN MESTA: RESTRICCIÓN QUIRÚRGICA --- */

/* 1. EL CONTENEDOR (Solo en el cuerpo de la página o con tu clase) */
.entry-content .wp-block-button__link, 
.entry-content .ast-button,
.btn-llamada-accion a,
.btn-llamada-accion button,
.btn-llamada-accion .ast-button {
    position: relative !important;
    background: transparent !important;
    border: none !important;
    color: #000000 !important;
    padding: 8px 30px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 0px !important;
    overflow: visible !important;
    z-index: 1 !important;
    display: inline-block !important;
    text-decoration: none !important;
}

/* 2. EL BORDE NEGRO (Solo en el cuerpo de la página o con tu clase) */
.entry-content .wp-block-button__link::after, 
.entry-content .ast-button::after,
.btn-llamada-accion a::after,
.btn-llamada-accion button::after,
.btn-llamada-accion .ast-button::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border: 2px solid #000000 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    transition: all 0.3s ease !important;
}

/* 3. EL RELLENO VERDE (Solo en el cuerpo de la página o con tu clase) */
.entry-content .wp-block-button__link::before, 
.entry-content .ast-button::before,
.btn-llamada-accion a::before,
.btn-llamada-accion button::before,
.btn-llamada-accion .ast-button::before {
    content: "" !important;
    position: absolute !important;
    top: 6px !important;  /* Cuánto baja el relleno hacia abajo */
    left: 6px !important; /* Cuánto se mueve el relleno hacia la derecha */
    width: 100% !important;
    height: 100% !important;
    background-color: #948a51 !important;
    z-index: -1 !important;
    transition: all 0.3s ease-in-out !important;
}

/* 4. ANIMACIÓN HOVER */
.entry-content .wp-block-button__link:hover::before, 
.entry-content .ast-button:hover::before,
.btn-llamada-accion a:hover::before,
.btn-llamada-accion button:hover::before {
    top: 0px !important;
    left: 0px !important;
}

/* 5. CONTROL DEL TEXTO Y FONDO EN HOVER */
.entry-content .wp-block-button__link:hover,
.entry-content .ast-button:hover,
.btn-llamada-accion a:hover,
.btn-llamada-accion button:hover {
    background: transparent !important; /* Mantiene la transparencia para ver el verde */
    color: #000000 !important;         /* Cambia color texto */
}

/* --- BLOQUE DE PROTECCIÓN (ELIMINA EL EFECTO EN ZONAS NO DESEADAS) --- */

/* Desactiva el efecto en Cabecera, Footer, Barras de Herramientas y Filtros de Astra */
.site-header .ast-button::before, .site-header .ast-button::after,
.site-footer .ast-button::before, .site-footer .ast-button::after,
#wpadminbar .ab-item::before, #wpadminbar .ab-item::after,
.ast-separate-container .ast-article-post .ast-button::before, /* Filtros blog */
.secondary-navigation .ast-button::before, /* Menús secundarios */
.widget .ast-button::before { 
    display: none !important; 
    content: none !important; 
}





/* Imagen Destacada ENTRADAS Single Post (Responsive) */

/* escritorio FUNCIONA */
.single-post .ast-single-post-featured-section.post-thumb.ast-article-image-container--full {
    height: 800px !important; overflow: hidden !important; 
}
.single-post .ast-single-post-featured-section.post-thumb.ast-article-image-container--full img {
    height: 100% !important; width: 100% !important; object-fit: cover !important; object-position: center !important; display: block;
}

/* tablet NO FUNCIONA */
@media (min-width: 481px) and (max-width: 768px) {
    .single-post .ast-single-post-featured-section.post-thumb.ast-article-image-container--full { height: 200px !important; }
}

/* movil FUNCIONA */
@media (max-width: 480px) {
    .single-post .ast-single-post-featured-section.post-thumb.ast-article-image-container--full { height: 400px !important; }
}




/* DESPLEGABLES - Bloque Detalles */

/* 1. Ocultamos la flecha original del navegador */
details.wp-block-details summary {
    list-style: none !important;
}

details.wp-block-details summary::-webkit-details-marker {
    display: none !important;
}

/* 2. Contenedor del título */
details.wp-block-details summary {
    position: relative;
    padding-left: 25px !important; 
    cursor: pointer;
    display: flex;
    align-items: center;
    outline: none;
}

/* 3. Chevron Pulido (Estado Cerrado - Derecha) */
details.wp-block-details summary::before {
    content: '\203A'; /* Chevron de ángulo limpio */
    position: absolute;
    left: 0px;
    font-size: 32px; /* Tamaño para que el trazo se vea nítido */
    line-height: 0;
    top: 50%; /* Centrado vertical */
    transform: translateY(-50%) rotate(0deg); 
    transition: transform 0.2s ease-out;
    font-weight: 300; /* Trazo más fino/pulido */
    color: inherit;
}

/* 4. Estado Abierto (90 grados hacia abajo) */
details[open].wp-block-details summary::before {
    /* Rotamos 90 grados exactos */
    transform: translateY(-50%) rotate(90deg); 
}

/* 5. Subrayado animado en TITULO */
/* Preparamos el summary para albergar la línea */
details.wp-block-details summary {
    position: relative;
    display: inline-flex !important; /* Estrecha el área al ancho del texto */
    text-decoration: none !important;
}

/* Creamos la línea (Estado inicial: invisible) */
details.wp-block-details summary::after {
    content: "";
    position: absolute;
    left: 25px;    /* Empieza donde termina tu padding-left actual */
    bottom: 2px;   /* Distancia desde el texto */
    height: 1px;
    width: 0%;
    background: currentColor;
    transition: width 0.25s ease;
}

/* Animación al pasar el ratón */
details.wp-block-details summary:hover::after {
    width: calc(100% - 25px); /* Se expande restando el espacio del icono */
}

/* Mantener el subrayado fijo cuando el bloque está abierto (Opcional pero recomendado) */
details[open].wp-block-details summary::after {
    width: calc(100% - 25px);
    opacity: 0.3; /* Un poco más tenue para no distraer de la lectura */
}




/* ============================================================== */
/* 4. ARCHIVOS Y BLOG                                             */
/* ============================================================== */

.ast-archive-post .post-thumb img, .ast-archive-post .wp-post-image, .blog .post-thumb img, .archive .post-thumb img {
    object-fit: cover !important; object-position: center !important; width: 100% !important; height: auto !important;
}

.widget-area .post-thumb img, .related-posts-section .post-thumb img {
    object-fit: contain !important; height: auto !important;
}

.ast-archive-post .entry-title { margin-bottom: 5px !important; text-align: center !important; line-height: 1.2em !important; }
.ast-archive-post .ast-taxonomy-container.cat-links { margin-top: 3px !important; margin-bottom: 5px !important; text-align: center !important; display: block !important; line-height: 1em !important; }
.ast-archive-post .post-thumb { text-align: center !important; }

/* ============================================================== */
/* 5. LOGO MESTA: ANIMACIÓN CASCADA                               */
/* ============================================================== */

/* --- 1. CONFIGURACIÓN DEL LOGO (Control por Altura) --- */
.site-logo-link svg, #logo-mesta-animado {
    height: 90px !important;    /* Ajusta la altura aquí */
    width: auto !important;     /* El ancho se calcula solo */
    display: block !important; 
    overflow: visible !important;
    margin-left: 15px !important; /* <--- CONTROL DE MARGEN IZQUIERDO */
}

/* --- 2. ANIMACIÓN DE REPLIEGUE (Solo letras E-S-T-A) --- */
#e-animada, #s-animada, #t-animada, #a-animada {
    opacity: 1;
    transform: translateX(0);
}

@keyframes replegarMesta {
    0% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(-15px); }
}

/* La marca se muestra completa 3 segundos y luego se repliega */
#e-animada { animation: replegarMesta 0.6s 2.0s ease-in-out forwards; }
#s-animada { animation: replegarMesta 0.6s 2.1s ease-in-out forwards; }
#t-animada { animation: replegarMesta 0.6s 2.2s ease-in-out forwards; }
#a-animada { animation: replegarMesta 0.6s 2.3s ease-in-out forwards; }

/* --- 3. RESPONSIVE (Ajustes para otros dispositivos) --- */

/* Tablet */
@media (min-width: 545px) and (max-width: 921px) {
    .site-logo-link svg, #logo-mesta-animado { 
        height: 60px !important; 
        margin-left: 0px !important; /* Margen algo menor en tablet */
    }
}

/* Móvil */
@media (max-width: 544px) {
    .site-logo-link svg, #logo-mesta-animado {
        height: 70px !important; 
        margin-left: 20px !important; /* Margen mínimo en móvil */
    }
}

/* Alineación visual para el contenedor de Astra */
.site-branding, .ast-m-header-item-branding {
    display: flex !important;
    align-items: center !important;
}

/* ============================================================== */
/* 6. GALERÍA SELECCIÓN (BLOQUES DUPLICADOS ORIGINALES)           */
/* ============================================================== */

/* BLOQUE 1: Configuración Grid y Animación */
.gal-seleccion > .wp-block-uagb-post-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; 
    grid-auto-rows: minmax(250px, auto) !important; 
    gap: 30px !important; 
    width: 100% !important;
    max-width: none !important; 
}

.gal-seleccion article.uagb-post__inner-wrap {
    grid-column: span 1 !important; grid-row: span 1 !important; 
    aspect-ratio: 1 / 1 !important; width: 100% !important; height: 100% !important; 
    margin: 0 !important; padding: 0 !important;
    opacity: 0; animation: fadeInSlide 0.5s forwards;
}

.gal-seleccion article.uagb-post__inner-wrap.es-vertical { grid-row: span 2 !important; aspect-ratio: 1 / 2 !important; }

.gal-seleccion article.uagb-post__inner-wrap .uagb-post__image,
.gal-seleccion article.uagb-post__inner-wrap .uagb-post__image a { width: 100% !important; height: 100% !important; aspect-ratio: unset !important; }

.gal-seleccion article.uagb-post__inner-wrap img {
    display: block !important; width: 1800px !important; height: 900px !important;
    max-width: 100% !important; max-height: 100% !important;
    object-fit: cover !important; aspect-ratio: unset !important; transition: transform 0.3s ease-in-out !important;
}

.gal-seleccion .uagb-post__inner-wrap .uagb-post__text { display: none !important; }

@keyframes fadeInSlide { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Delays Cascada */
.gal-seleccion article:nth-child(1) { animation-delay: 0.1s; }
.gal-seleccion article:nth-child(2) { animation-delay: 0.15s; }
.gal-seleccion article:nth-child(3) { animation-delay: 0.2s; }
.gal-seleccion article:nth-child(4) { animation-delay: 0.25s; }
/* ... (puedes añadir más si quieres, pero mantengo tu lógica) */

.gal-seleccion article.uagb-post__inner-wrap:hover img { transform: scale(1.05); opacity: 1 !important; }

/* BLOQUE 2: Refuerzo Cuadrados y Gap TABLET (Repetición necesaria por jerarquía) */
.gal-seleccion article.uagb-post__inner-wrap {
    aspect-ratio: 1 / 1 !important; width: 100% !important; position: relative !important;
    margin: 0 !important; padding: 0 !important; overflow: hidden !important;
    display: flex !important; flex-direction: column !important;
}

.gal-seleccion article.uagb-post__inner-wrap.es-vertical { grid-row: span 2 !important; aspect-ratio: 1 / 2 !important; }

.gal-seleccion > .wp-block-uagb-post-grid {
    display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-flow: dense !important; gap: 30px !important;
    column-gap: 30px !important; row-gap: 30px !important;
}

.gal-seleccion .uagb-post__column, .gal-seleccion article { padding: 0 !important; margin: 0 !important; }

/* Responsive Tablet/Mobile Galería */
@media (max-width: 921px) {
    .gal-seleccion > .wp-block-uagb-post-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 30px !important; }
}

/* Fix Navegadores Antiguos */
@supports not (aspect-ratio: 1 / 1) {
    .gal-seleccion article.uagb-post__inner-wrap { height: 0 !important; padding-bottom: 100% !important; }
    .gal-seleccion article.uagb-post__inner-wrap.es-vertical { padding-bottom: calc(200% + 30px) !important; }
    .gal-seleccion .uagb-post__image { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; }
}

/* Final de Imagen Galería */
.gal-seleccion article.uagb-post__inner-wrap img {
    width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
}

/* Anula Pegajoso en Móvil */
@media screen and (max-width: 768px) {
    .uagb-position__sticky { position: static !important; top: auto !important; bottom: auto !important; margin-top: 0 !important; }
    div[style*="height:"][style*="box-sizing: border-box;"] { display: none !important; height: 0px !important; }
}