/*  
Theme Name: Sedaví
Description: Un tema desarrollado para LaBase
Author: WW
Version: 2.16
*/


/* =========================================
   1. CONFIGURACIÓN GLOBAL & BASE
   ========================================= */
body { 
    margin: 0; padding: 0; 
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal; 
}

p { 
    font-size: clamp(15px, 1vw + 12px, 16px); 
    line-height: 1.6; 
    color: #505050; 
}

img { display: block; max-width: 100%; }
.green { color: #57C47E; }

/* Resaltados (del / subrayado) */
del, .subrayado {
    text-decoration: none !important;
    background-color: #EFF4DC;
    padding: 0 4px;
    border-radius: 2px;
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.subra {
    background-color: #DDF291;
    padding: 0 4px;
    border-radius: 2px;
}
h1 {
    /* Fuerza a que la palabra se rompa si no cabe */
    overflow-wrap: break-word;
    word-wrap: break-word;
    
    /* Activa los guiones automáticos (requiere atributo lang en el HTML) */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    
    /* Opcional: evita que el navegador intente justificar de forma extraña */
    text-align: left; 
}
/* =========================================
   2. HEADER & NAVEGACIÓN
   ========================================= */
.header { background-color: #fff; position: fixed; width: 100%; z-index: 9999; top: 0; }
.header-content {
    width: 100%; min-height: 110px; padding: 0 10%; margin: 0 auto; 
    box-sizing: border-box; display: grid; 
    grid-template-columns: max-content 1fr; grid-column-gap: 32px; 
    align-content: center; align-items: center; 
}
.header-content > div:last-of-type { justify-self: flex-end; }

ul.menu { 
    list-style: none; padding: 0; display: flex; column-gap: 32px; 
    font-size: clamp(15px, 1vw + 12px, 18px); 
    line-height: 1.3; 
}
ul.menu li a { text-decoration: none; color: #57C47E; font-weight: 600; } 
#menu-redes-sociales, #menu-legal { display: block; }
/* =========================================
   3. BLOQUES DE PÁGINA (HERO, INFO)
   ========================================= */

/* Hero Section */
.hero { background-color: #fff; padding: 10px 10% 0 10%; box-sizing: border-box; }
.hero-content {
    width: 100%; margin: 0 auto; box-sizing: border-box; 
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; 
    background-color: #EFF4DC; padding: 0 5% 5% 5%; 
    align-items: flex-end; min-height: calc(100vh - 110px); 
}
.hero-content > div:last-of-type {height: 100%;}
.hero-content img { width: 100%; height: 100%; object-fit: cover; }

/* Titular Principal Fluido */
h1 { 
    font-size: clamp(34px, 7vw, 68px); 
    line-height: clamp(38px, 7vw, 70px); 
    font-weight: 600; color: #1C4750; text-transform: uppercase; 
}

/* Titular del Hero (Específico Editor) */
.hero-content h1 { 
    font-size: clamp(34px, 7vw, 68px); 
    line-height: clamp(38px, 7vw, 70px); 
    font-weight: 600; color: #1C4750; margin: 0; 
}
.hero-content h1 strong { color: #57C47E; font-weight: 600; }
.hero-content h1 del {
    text-decoration: none !important; background-color: #DDF291;
    padding: 0 6px; border-radius: 2px; color: inherit; 
    display: inline-block; line-height: 1;
}
.hero-content h1:empty { display: none; }

/* Info Section */
.info { width: 100%; }
.info-content {
    width: 100%; padding: 0 10%; margin: 0 auto; box-sizing: border-box; 
    display: grid; grid-template-columns: 1fr 1fr; padding-top: 20px; 
    height: 100%; align-content: center; 
}
.info-content > div:first-of-type { background-color: rgba(239, 244, 220, 0.2); padding: 10%; box-sizing: border-box; }
.info-content > div:last-of-type { background-color: #C6B7EE; padding: 10%; box-sizing: border-box; }

.info-content h2 { 
    font-size: clamp(24px, 4vw, 32px); 
    line-height: 1.2; 
    font-weight: 600; color: #57C47E; text-transform: uppercase; 
}  
.info-content h3 { 
    font-size: clamp(18px, 2.5vw, 22px); 
    line-height: 1.3; 
    font-weight: 600; color: #1C4750; 
}  
.info-content p { 
    font-size: clamp(16px, 1vw + 14px, 18px); 
    line-height: 1.5; 
    color: #505050; 
}
.info-content a { color: #1C4750; font-weight: 600; text-decoration: underline; }

.info-content h3 del {
    text-decoration: none !important; background-color: #EFF4DC;
    padding: 0 4px; border-radius: 2px; color: inherit; display: inline;
}

/* =========================================
   4. LISTADO DE PROYECTOS (POST CARDS)
   ========================================= */
.posts { background-color: #fff; padding: 10px 0 0 0; box-sizing: border-box; }
.posts-content { width: 100%; padding: 0 10%; margin: 0 auto; box-sizing: border-box; display: grid; grid-template-columns: 1fr; align-items: center; }

.post-card { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; margin-bottom: 32px; }

.post-card:nth-child(3n+1) { background-color: #F5F1FE; }
.post-card:nth-child(3n+2) { background-color: #FCFDF8; }
.post-card:nth-child(3n)   { background-color: #DCF3E5; }

.post-card > div:first-of-type { grid-column: span 2; height: 100%; }
.post-card > div:nth-of-type(2) { grid-column: span 4; padding: 32px 0;  }
.post-card > div:nth-of-type(3) { grid-column: span 4; padding: 32px 0; }
.post-card > div:last-of-type  { grid-column: span 2; padding: 32px 0; }


.post-image {
    width: 100%;
    aspect-ratio: 1 / 1; /* Fuerza el formato cuadrado */
    overflow: hidden;    /* Corta lo que sobre si la imagen no es cuadrada de origen */
    display: block;
}

.post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* ¡Fundamental! Rellena el cuadrado sin deformar la foto */
    object-position: center;
}

h2.post-title { 
    font-size: clamp(17px, 2vw, 20px); 
    line-height: 1.3; 
    letter-spacing: -0.01em; font-weight: 600; color: #1C4750; text-transform: uppercase; 
}
h2.post-title a { text-decoration: none; color: inherit; }
.post-link p a { text-decoration: none; color: #57C47E; font-weight: 500; }

/* =========================================
   5. SINGLE POST & RELACIONADOS
   ========================================= */
.post-single { padding-top: 10px; }
.post-single-content {
    width: 95%; box-sizing: border-box; padding: 0 0 50px 5%; margin: 0 0 0 5%; 
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; 
    align-content: flex-end; align-items: flex-end;
}
.post-header { background-color: #FCFDF8; height: 100%; display: grid; align-content: flex-end; box-sizing: border-box; padding-left: 10%; padding-bottom: 5%; padding-right: 10%; }

/* Titular Single Fluido */
.post-single-content h1 { 
    font-size: clamp(30px, 6vw, 50px); 
    line-height: 1.1; 
    color: #1C4750; text-transform: uppercase; 
}

.post-gallery-container {
    width: 100%;
    overflow-x: auto; /* Permite el scroll horizontal */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    display: block;
}

/* 2. La tira interna que sujeta las fotos */
.post-gallery-scroll {
    display: flex;
    width: max-content; /* ¡CLAVE! Hace que el div sea tan ancho como todas las fotos juntas */
    height: calc(100vh - 180px); /* Define la altura única para todas */
    column-gap: 15px; /* Espacio entre ellas */
}

/* 3. Las imágenes individuales */
.post-gallery-image {
    height: 100%;      /* Ocupan el 100% de la altura del padre (.post-gallery-scroll) */
    width: auto;       /* El ancho se calcula solo según la proporción original */
    flex-shrink: 0;    /* Prohíbe a Flexbox encoger la imagen */
    object-fit: cover; /* O 'contain' si no quieres que se recorte ni un milímetro */
    display: block;
}

.post-main-text { width: 100%; padding: 0 10% 5% 10%; max-width: 1400px; margin: 0 auto; box-sizing: border-box; margin-top: 10px; }
.post-main-text p { 
    font-size: clamp(16px, 1vw + 14px, 18px); 
    line-height: 1.6; 
    color: #505050; margin-top: 20px; 
}

h2.wp-block-heading, 
.more-posts-content h2, 
h3.related-post-title { 
    font-size: clamp(17px, 2vw, 20px); 
    line-height: 1.3; 
    letter-spacing: -0.01em; font-weight: 600; color: #57C47E; text-transform: uppercase; 
}

/* Related Posts Grids */
.more-posts-content { width: 100%; padding: 0 10%; margin: 0 auto; box-sizing: border-box; display: grid; grid-template-columns: 1fr; padding-top: 20px; }
.more-posts-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.related-post-card { display: grid; grid-template-columns: 1fr 1fr; }
.related-post-image img { object-fit: cover; width: 100%; max-height: 350px; height: 100%; }

.related-post-card:first-of-type > div:nth-of-type(2) { background-color: #DCF3E5; padding: 5%; }
.related-post-card:last-of-type > div:nth-of-type(2) { background-color: #F4F1FC; padding: 5%; }

h3.related-post-title { color: #1C4750; } /* Reutiliza el clamp de arriba */
h3.related-post-title a { text-decoration: none; color: inherit; }
.related-post-card p a { text-decoration: none; color: #57C47E; font-style: 500; font-size: 16px; }

/* =========================================
   6. FILTROS
   ========================================= */
.filter-container { margin-bottom: 40px; padding: 0 10%; width: 100%; box-sizing: border-box; display: grid; grid-template-columns: 1fr; justify-content: flex-start; margin: 0 auto; }
.filter-form { display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap; }

.filter-form select {
    appearance: none !important; -webkit-appearance: none !important;
    display: inline-block; height: 45px; line-height: 20px;
    background-color: #ffffff !important; border: 2px solid #333333 !important;
    padding: 0 40px 0 15px !important; font-family: 'Montserrat', sans-serif !important;
    font-size: 14px; font-weight: 600; text-transform: uppercase;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: calc(100% - 12px) center !important;
    background-size: 14px !important; cursor: pointer; color: #333;
}

.filter-form select:hover { background-color: #EFF4DC; }
.filter-form button {
    background-color: #333; color: #fff; border: none; padding: 14px 25px;
    font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; transition: opacity 0.3s ease;
}
.filter-form button:hover { opacity: 0.8; }
.clear-filter { font-family: 'Montserrat', sans-serif; font-size: 11px; text-transform: uppercase; text-decoration: none; color: #999; margin-left: 10px; }

/* =========================================
   7. FOOTER & SUBFOOTER
   ========================================= */
.footer { width: 100%; background-color: #EFF4DC; margin-top: 30px; }
.footer-content { width: 100%; min-height: 110px; padding: 0 10%; margin: 0 auto; box-sizing: border-box; display: grid; grid-template-columns: max-content max-content; column-gap: 32px; align-content: flex-start; align-items: flex-start; justify-content: flex-end; padding-top: 20px; }

.subfooter { width: 100%; background-color: #EFF4DC; margin-top: 100px; }
.subfooter-content { width: 100%; min-height: 110px; padding: 0 10%; margin: 0 auto; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; align-content: center; align-items: center; }
.subfooter-content > div:first-of-type { justify-self: flex-start; }
.subfooter-content > div:last-of-type { justify-self: flex-end; }
.subfooter-content a { text-decoration: none; color: #57C47E; font-weight: 600; }

#enlaceSelected {display: none;}
#menu-movil {display: none;}


@media (max-width: 1600px) {
    .post-card > div:first-of-type { grid-column: span 3; }
.post-card > div:nth-of-type(2) { grid-column: span 3; padding: 32px 0; }

}

/* =========================================
   8. RESPONSIVE: HOME
   ========================================= */

@media (max-width: 1024px) {

    /* Global: Reducimos el padding lateral del 10% al 5% para ganar espacio */
    .header-content,
    .hero,
    .info-content,
    .posts-content,
    .filter-container,
    .footer-content,
    .subfooter-content {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
    .menu-menu-container {display: none;}
    #enlaceSelected {
        display: block;
        position: fixed;
        right: 5%;
        top: 32px;
        z-index: 999999;
        cursor: pointer;
    }

    #menu-movil {
        position: fixed;
        z-index: 9999;
        height: 100vh;
        width: 100vw;
        align-content: center;
        justify-content: center;
        z-index: 9999;
        top: 0;
        background-color: #1C4750;
        right: 0;
        color: #fff;
    }
    #menu-movil ul { list-style: none; padding: 0; margin: 0; }
    #menu-movil ul li { margin: 20px 0; }
    #menu-movil ul li a {  text-decoration: none; color: #57C47E;             font-size: clamp(15px, 1vw + 12px, 18px); 
    line-height: 1.3;   font-weight: 600; }
    /* --- HERO --- */
    .hero-content {
        grid-template-columns: 1fr; /* Una sola columna */
        min-height: auto;
        padding: 40px 5%;
        align-content: center;
        align-items: center;
        text-align: center;
    }
    .hero-content div:last-child {
        order: -1; /* La imagen pasa a estar ARRIBA del texto */
        margin-bottom: 30px;
    }
    .hero-content img {

        margin: 0 auto;
    }

    /* --- INFO (Las dos cajas de colores) --- */
    .info-content {
        grid-template-columns: 1fr; /* Se apilan una sobre otra */
    }
    .info-content > div:first-of-type,
    .info-content > div:last-of-type {
        padding: 30px 5%; /* Más aire vertical */
    }

    /* --- FILTROS --- */
    .filter-container {
        justify-content: center;
    }
    .filter-form {
        flex-direction: column; /* Selects y botón uno debajo de otro */
        width: 100%;
    }
    .filter-form select, 
    .filter-form button {
        width: 100% !important; /* Ancho completo para fácil clic */
    }

    /* --- POST CARDS (Grid de 12 columnas) --- */
    .post-card {
        grid-template-columns: 1fr; /* Rompemos las 12 columnas */
        column-gap: 0;
    }
    /* Hacemos que cada sección de la card ocupe todo el ancho */
    .post-card > div:first-of-type,
    .post-card > div:nth-of-type(2),
    .post-card > div:nth-of-type(3),
    .post-card > div:last-of-type {
        grid-column: span 1 !important;
        padding: 5px 10% !important; /* Padding lateral para que el texto no toque el borde */
        text-align: center;
    }
    /* La imagen de la card a ancho completo y sin padding */
    .post-card > div:first-of-type {
        padding: 0 !important;
    }
    .post-image {
        aspect-ratio: 16 / 9; /* Formato más cinematográfico en móvil */
    }

    /* --- FOOTER & SUBFOOTER --- */
    .footer-content,
    .subfooter-content {
        grid-template-columns: 1fr;
        text-align: center;
        justify-content: center;
        row-gap: 20px;
    }
    .subfooter-content > div:first-of-type,
    .subfooter-content > div:last-of-type {
        justify-self: center;
    }
    /* --- SINGLE POST --- */
    .post-single {
        padding-top: 10px; /* Un poco menos de espacio arriba */
    }

    .post-single-content {
        grid-template-columns: 1fr; /* Apilamos cabecera y galería */
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .post-header {
        padding: 40px 10%;
        text-align: left;
        min-height: auto;
        /* Quitamos el fondo si queremos que respire con el resto, 
           o lo mantenemos para diferenciar secciones */
    }

    /* Galería Scroll Horizontal en Móvil */
    .post-gallery-container {
        padding: 0;
        margin-top: 20px;
    }

    .post-gallery-image {
height: 50vh;            /* Reducimos altura pero mantenemos la lógica */
        width: auto !important;
        object-fit: contain;
    }
    .post-gallery-scroll {
        height: 50vh; /* Bajamos la altura en móvil, pero mantienen la misma lógica */
    }

    /* Texto principal del artículo */
    .post-main-text {
        padding: 40px 10%;
    }

    /* --- ARTÍCULOS RELACIONADOS (More Posts) --- */
    .more-posts-grid {
        grid-template-columns: 1fr; /* Una columna para los relacionados */
        row-gap: 30px;
    }

    .related-post-card {
        grid-template-columns: 1fr; /* Imagen arriba, texto abajo dentro de la card */
    }

    .related-post-image img {
        max-height: 250px; /* Ajustamos altura de imagen */
    }

    .related-post-card:first-of-type > div:nth-of-type(2),
    .related-post-card:last-of-type > div:nth-of-type(2) {
        padding: 30px 10%; /* Más espacio para el texto */
    }
}