/* =====================================================
    1. GENERAL (REVISADO)
===================================================== */
:root {
    --color-fondo: #d6bfa6;
    /* <--- CAMBIA ESTO Y CAMBIA TODO */
    --color-texto: #1a1a1a;
    --color-acento: #5d4037;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--color-fondo);
}

html,
body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

section {
    padding: 40px;
}

.titulo-seccion {
    padding-top: 90px;
    text-align: center;
    font-size: clamp(1.5rem, 6vw, 2.8rem);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: clamp(2px, 1vw, 8px);
    color: #1a1a1a;
    position: relative;

    /* SEGURIDAD ANTISCROLL */
    max-width: 100%;
    overflow-wrap: break-word;
    /* Si la palabra es muy larga, se rompe y no hace scroll */
    word-wrap: break-word;
    box-sizing: border-box;
    padding-left: 15px;
    /* Evita que las letras toquen los bordes */
    padding-right: 15px;
}

.titulo-seccion::after {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background: #5d4037;
    margin: 15px auto 0;
}

@media (max-width: 600px) {
    .titulo-seccion {
        
        padding-top: 90px; /* Menos espacio arriba en móvil */
        text-align: left;  /* CAMBIO: Alineado a la izquierda se siente más como un diario */
        margin-left: 10px;
        
        border-left: 4px solid #5d4037; /* Una barra lateral tipo nota importante */
        padding-left: 20px;
        letter-spacing: 2px;
        text-transform: none; /* Quitar mayúsculas le da un tono más íntimo */
        font-family: 'Georgia', serif; /* O la fuente que prefieras para contraste */
    }

    .titulo-seccion::after {
        margin: 10px 0 0 0; /* Alinea la rayita a la izquierda también */
        width: 40px;
        background: #a0522d; /* Un tono más cálido */
    }
    .titulo-seccion::after {
        display: none !important;
    }
}


.quote-principal {
    /* clamp(tamaño_mínimo, tamaño_fluido, tamaño_máximo) */
    font-size: clamp(1.2rem, 4vw, 1.8rem);
    font-style: italic;
    color: #333;
    max-width: 850px;
    margin: 0 auto;
    display: block;
    line-height: 1.6;
    font-family: 'Georgia', serif;
    border: none;
    text-align: center;
    /* Corregido: era text-align, no text-emphasis */
    padding: 0 20px;
    /* Margen interno para que no toque los bordes del cel */
}

@media (max-width: 950px) {
    .quote-principal {
        line-height: 1.8;
        /* Un poco más de aire entre líneas en móvil */
        letter-spacing: 0.5px;
        /* Un toque de espacio entre letras */
    }
}

/* =====================================================
    2. NAV ESTILO GABRIELA COBAR (CORREGIDO)
===================================================== */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Cambiado a transparente para que flote sobre el hero */
    background: transparent;
    z-index: 2000;
    transition: background 0.3s ease;
}

/* Clase para el scroll (opcional, para que no se pierda el menú en lo blanco) */
.nav.scrolled {
    background: rgba(0, 0, 0, 0.8);
}

.nav-container {
    width: 95%;
    max-width: 1400px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: auto;
    /* Cambiado a auto para que crezca si hay 2 filas */
    min-height: 100px;
    padding: 10px 0;
}

/* LOGO - Izquierda */
.nav-logo img {
    height: 80px;
    /* Ajustado para que no sea gigante */
    transition: 0.3s;
}

/* MENU - Centrado */
.nav-menu {
    list-style: none;
    display: flex;
    gap: 20px;
    /* Un poco menos de espacio para que quepan más */
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    /* CLAVE: permite que los elementos bajen a la siguiente fila */

    /* Quitamos el posicionamiento absoluto para que no flote sobre el logo */
    position: static;
    transform: none;
    left: auto;
    flex: 1;
    /* Ocupa el espacio central disponible */
}

.nav-menu a,
.dropdown-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 12px;
    /* Más pequeño = más elegante */
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    padding: 10px 5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Redes Sociales - Derecha */
.nav-social {
    display: flex;
    align-items: center;
    gap: 15px;
}

.nav-social a {
    color: white;
    font-size: 18px;
    text-decoration: none;
}

/* Hover sin fondo wheat para mantener el minimalismo */
.nav-menu a:hover,
.dropdown-toggle:hover {
    opacity: 0.7;
    color: white;
}

/* =========================
    DROPDOWN
========================= */
.dropdown-menu {

    top: 40px;
    left: 0;
    background: black;
    list-style: none;
    display: none;
    flex-direction: column;
    min-width: 170px;
}

.dropdown-menu li a {
    display: block;
    padding: 12px;
    color: white;
}

.nav-dropdown.active .dropdown-menu {
    display: flex;
}


.nav-toggle {
    display: none;
    font-size: 28px;
    color: white;
    cursor: pointer;
}

/* =========================
    NAV RESPONSIVE 
========================= */

.nav-toggle {
    display: none;
    font-size: 28px;
    color: white;
    cursor: pointer;
    z-index: 3000;
}

@media (max-width: 950px) {
    .nav-toggle {
        display: block;
        margin-left: auto;
        /* Empuja el icono a la derecha */
        line-height: 1;
        /* Evita espacios extraños en el icono */
        z-index: 3000;
        /* Asegura que esté por encima de todo */
    }

    .nav-social {
        display: none;
    }

    .nav-container {
        width: 100%;
        height: 70px;
        /* Un poco más bajo para ganar pantalla */
        padding: 0 20px;
        position: relative;
        left: 0;
        transform: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nav-logo img {
        height: 55px;
        width: auto;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        /* Totalmente fuera */
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.95);

        /* IMPORTANTE: Quitamos el centrado de PC */
        left: auto;
        transform: none;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.4s ease-in-out;
        z-index: 2500;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu li {
        margin: 15px 0;
        width: 100%;
        text-align: center;
    }

    /* DROPDOWN MÓVIL (STATIC) */
    .dropdown-menu {
        position: static;
        /* Empuja el contenido hacia abajo */
        background: transparent;
        width: 100%;
        display: none;
    }

    .nav-dropdown.active .dropdown-menu {
        display: block;
    }
}

@media (max-width: 950px) and (max-height: 600px) {
    .nav-menu {
        /* Cambiamos el centrado por alineación arriba para que quepa todo */
        justify-content: flex-start !important;
        
        /* Agregamos padding para que el primer link no choque con el logo */
        padding-top: 90px !important;
        padding-bottom: 40px !important;
        
        /* Forzamos el scroll vertical */
        overflow-y: auto !important;
        display: block !important; /* Block ayuda a que el scroll sea más natural */
    }

    .nav-menu li {
        margin: 20px 0 !important; /* Espaciado cómodo para el dedo */
        width: 100%;
    }

    /* Si tienes el logo fijo arriba, asegúrate de que no tape el menú al scrolear */
    
}

/* =====================================================
    3. HERO (SIN RAYAS Y 100% COVER)
===================================================== */

.hero {
    position: relative;
    height: 100vh;
    /* Ocupa toda la pantalla */
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Aseguramos que el fondo 1 cubra todo */
#fondo1 {
    height: 100vh;
    background-image: url("../img/hero3.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    animation: zoomHero 10s infinite alternate ease-in-out;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    /* Menos opaco para que luzca la foto */
    z-index: 1;
}

.hero-texto {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}

.hero-texto h1 {
    font-size: 70px;
    letter-spacing: 8px;
    text-transform: uppercase;
    font-weight: 300;
}

@keyframes zoomHero {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.05);
    }
}

/* =====================================================
    4. Parallax
===================================================== */

.parallax {
    height: 650px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* Añadimos esto para asegurar que en móviles no se desborde */
    position: relative;
    overflow: hidden;
}

#fondo2 {
    background-image: url("../img/fondo.jpg");
}

#fondo3 {
    background-image: url("../img/obra1.png");
}

#fondo4 {
    background-image: url("../img/obra2.png");
}

#fondo5 {
    background-image: url("../img/obra3.png");
}

.contenido {
    padding: 80px 10%;
    background-color: #d6bfa6;
}

/* --- AJUSTE PARA MÓVILES Y SAFARI --- */
@media (max-width: 768px) {
    @supports (-webkit-overflow-scrolling: touch) {
        .parallax {
            background-attachment: scroll !important;
            background-position: center center !important;
            /* Asegura que la obra no se corte */
        }
    }
}

/* =========================
   ÚLTIMOS PROYECTOS
========================= */

.inicio-ultimos {
    width: 100%;
    padding: 20px 0;
    text-align: center;
}

.inicio-ultimos-titulo {
    padding: 10px 1%;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.inicio-ultimos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
}

.inicio-card {
    flex: 1;
    min-width: 300px;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background: transparent;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.inicio-card img {
    width: 100%;
    height: 300px;
    /* Ajusta esta altura según prefieras */
    object-fit: contain;
    /* Muestra la imagen completa sin recortarla */
    background-color: transparent;
    /* Un fondo sutil por si el póster es muy angosto */
    margin-bottom: 10px;
    margin-top: 10px;
    border-radius: 4px;
}

.inicio-card img:hover {
    transform: scale(1.03);
}

.inicio-card-titulo {
    margin-top: 15px;
    font-size: 18px;
}

.inicio-card-sub {
    font-size: 14px;
    letter-spacing: 2px;
    margin: 8px 0 20px 0;
    opacity: 0.6;
    text-transform: uppercase;
}

.inicio-boton {
    padding: 10px 28px;
    border: 1px solid black;
    background: black;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    transition: all 0.3s ease;
}

.inicio-boton:hover {
    background: brown;
    color: white;
}

/* Responsive */

@media (max-width: 768px) {
    .inicio-card {
        width: 80%;
        /* Un poco más estrecho */
        margin: 20px auto;
    }
}

/* =========================
   CATEGORÍAS
========================= */
.categorias {
    padding: 80px 10%;
    text-align: center;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.container_inicio {
    display: grid;
    /* En PC: Forzamos 4 columnas iguales */
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.card_inicio {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.4s ease;
    text-decoration: none;
}

.card_inicio img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    transition: 0.4s ease;
}

/* Texto encima */
.card_inicio span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 2px;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: 0.4s ease;
}

/* Hover efecto */
.card_inicio:hover img {
    transform: scale(1.1);
}

.card_inicio:hover span {
    opacity: 1;
}

/* Efecto galería elegante */
.container_inicio:hover .card_inicio {
    opacity: 0.4;
}

.container_inicio .card_inicio:hover {
    opacity: 1;
}

/* RESPONSIVE CATEGORÍAS */
@media (max-width: 900px) {
    .container_inicio {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columnas en tablet */
        padding: 0 5%;
    }

    .card_inicio img {
        height: 200px;
        /* Reducimos altura en móvil */
    }

    .card_inicio span {
        font-size: 1rem;
        /* Texto más pequeño */
        opacity: 1;
        /* Que el nombre sea visible siempre en móvil */
        background: rgba(0, 0, 0, 0.3);
    }
}

@media (max-width: 480px) {
    .container_inicio {
        grid-template-columns: 1fr;
        /* 1 columna en celulares pequeños */
    }

    .card_inicio img {
        height: 250px;
    }

    .card_inicio span {
        font-size: 1rem;
        /* Texto más pequeño */
        opacity: 1;
        /* Que el nombre sea visible siempre en móvil */
        background: rgba(0, 0, 0, 0.3);
    }
}

/* =========================
   MINI BIO ARTISTA
========================= */

.mini-bio {
    padding: 40px 10%;
    position: relative;
    background-image: none;
    /* Quitamos la imagen */
    background-color: transparent;
    /* Hereda el fondo del body */
}

/* Overlay */
.mini-bio::before {
    display: none;
}

.mini-bio-contenedor {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Imagen lateral */
.mini-bio-imagen img {
    width: 70%;
    border-radius: 12px;
}

.mini-bio-texto h2 {
    font-size: 32px;
    margin-bottom: 25px;
    color: #222;
    /* Texto oscuro */
}

.mini-bio-texto p {
    color: #444;
    /* Texto oscuro */
    line-height: 1.7;
    margin-bottom: 30px;
}

/* Estilo base del botón */
.mini-bio-btn {
    display: block;
    width: fit-content;
    margin: 30px auto 0 auto;
    padding: 12px 30px;
    background-color: transparent;
    /* Fondo transparente inicialmente */
    color: #8b5a2b;
    /* El tono café de tu paleta */
    border: 2px solid #8b5a2b;
    /* Borde sólido */
    border-radius: 50px;
    /* Esto lo hace completamente redondeado (pill-shaped) */
    text-decoration: none;
    font-family: 'Georgia', serif;
    /* O la fuente que uses para títulos */
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.4s ease;
    /* Animación suave para todos los cambios */
    cursor: pointer;
    margin-top: 20px;
}

/* Efecto al pasar el ratón (Hover) */
.mini-bio-btn:hover {
    background-color: #8b5a2b;
    /* Se llena de color café */
    color: #fdfaf7;
    /* El texto cambia a tu color crema de fondo */
    box-shadow: 0 4px 15px rgba(139, 90, 43, 0.3);
    /* Sombra suave del mismo tono */
    transform: translateY(-2px);
    /* Pequeño brinco hacia arriba */
}

/* Efecto cuando se hace clic */
.mini-bio-btn:active {
    transform: translateY(0);
    /* Regresa a su posición original */
}

/* RESPONSIVE */

@media (max-width: 900px) {

    .mini-bio-contenedor {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .mini-bio-texto p {
        margin: 0 auto 30px auto;
    }

    .mini-bio-imagen img {
        width: 100%;
        /* Imagen al ancho completo del contenedor */
        max-width: 400px;
    }

}

/* =====================================================
   SECCIÓN CONTACTO INICIO 
===================================================== */
.oculto {
    display: none !important;
}

/* --- SECCIÓN MAESTRA --- */
.seccion-descubre {
    padding: 60px 5%;
    background-color: #d6bfa6;
    text-align: center;
}

.titulo-principal {
    font-size: 2.2rem;
    color: #5d4037;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 60px;
    text-align: center;
}

.contenedor-unificado {
    max-width: 850px;
    /* Antes estaba en 1000px, ahora es más angosto */
    margin: 0 auto;
}

.comunidad-video-container {
    flex: 0 0 35%;
    /* Ocupa solo el 35% del ancho total */
    min-height: 450px;
    background-color: #000;
    position: relative;
}

.video-proceso {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Recorta el video para que llene el espacio vertical */
}

/* --- TARJETA DE COMUNIDAD (ESTILO MODERNO) --- */
.comunidad-card-minimal {
    display: flex;
    flex-direction: row;
    /* Fuerza el lado a lado */
    background: white;
    border-radius: 30px;
    overflow: hidden;
    max-width: 800px;
    margin: 0 auto 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    text-align: left;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.comunidad-img {
    flex: 1;
    min-height: 350px;
}

.comunidad-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comunidad-info {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.comunidad-tag {
    color: #a0522d;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.btn-comunidad-minimal {
    display: inline-block;
    padding: 12px 25px;
    border: 1px solid #5d4037;
    color: #5d4037;
    text-decoration: none;
    border-radius: 30px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    align-self: flex-start;
    margin-top: 20px;
    transition: 0.3s;
}

.btn-comunidad-minimal:hover {
    background-color: #5d4037;
    color: white;
}

/* --- TU CSS ORIGINAL DE ICONOS (INTEGRADO SIN CAMBIOS) --- */
.contacto-info-inicio {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.contacto-texto-inicio {
    max-width: 600px;
    margin: 0 auto 20px auto;
    color: #795548;
    line-height: 1.6;
}

.contacto-redes-grandes-inicio {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
    padding: 5px 0;

}

.contacto-redes-grandes-inicio .red {
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contacto-redes-grandes-inicio .red i {
    font-size: 50px;
    color: #5d4037 !important;
    transition: transform 0.3s ease, color 0.3s ease;
}

.contacto-redes-grandes-inicio .red span {
    display: none !important;
    /* Mantenemos el texto oculto */
}

.contacto-redes-grandes-inicio .red:hover i {
    transform: translateY(-5px);
    color: #a0522d !important;
}

/* =========================
   ESTILOS DEL CONTADOR
========================= */
.contador-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 20px;
    text-align: center;
}

.tiempo {
    background: rgba(93, 64, 55, 0.1); /* Color café muy tenue */
    padding: 10px 5px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}

.tiempo span {
    font-size: 1.5rem;
    font-weight: bold;
    color: #5d4037;
    font-family: 'Georgia', serif;
}

.tiempo small {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #a0522d;
}

/* Ajuste para móviles */
@media (max-width: 480px) {
    .tiempo span { font-size: 1.1rem; }
    .tiempo small { font-size: 0.5rem; }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .comunidad-card-minimal {
        flex-direction: column;
    }

    .comunidad-img {
        min-height: 250px;
    }

    .contacto-redes-grandes-inicio {
        gap: 40px;
    }
}



/* ==========================================================
   GALERÍA 
========================================================== */
/* Centrado del título principal */


/* Contenedor de indicadores: evitamos flex para no afectar el flujo */
.indicadores-container {
    text-align: center;
    /* Esto centra el texto por defecto */
    width: 100%;
    margin-bottom: 50px;
    /* Espacio para que no se pegue a las fotos */
    display: block;
    /* Aseguramos que sea un bloque independiente */
}

/* Estilo para los textos internos */
.detalle-indicador {
    display: block;
    /* Para que ocupe su propia línea */
    margin: 0 auto;
    /* Centrado */
    font-size: 0.95rem;
    color: #5d4037;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.scroll-indicador {
    display: block;
    /* Para que ocupe su propia línea */
    margin: 5px auto 0;
    font-size: 0.85rem;
    color: #7a5b4f;
    font-style: italic;
}

/* Animación sutil de "vaivén" para el indicador de deslizar */
@keyframes flechitas {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
    }
}

.scroll-indicador {
    display: inline-block;
    animation: flechitas 2s infinite ease-in-out;
}

/* Contenedor del subtítulo */
.bloque-encabezado {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Todo a la izquierda */
    margin: 60px 0 30px 5%;
    /* Un pequeño margen del 5% para que no pegue al borde */
    width: 90%;
    /* Que no toque los bordes totales */
}

.galeria-subtitulo {
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    /* Espaciado entre letras para toque artístico */
    color: #333;
    margin-bottom: 10px;
    font-weight: 300;
    /* Más delgado se ve más moderno */
    position: relative;
}

/* La línea divisora minimalista */
.bloque-encabezado::after {
    content: "";
    width: 100%;
    /* Línea que cruza casi toda la pantalla */
    height: 1px;
    background: linear-gradient(to right, #5d4037, rgba(93, 64, 55, 0.1));
    /* Se desvanece al final */
    margin-top: 5px;
}

/* --------------*/
/* Contenedor que envuelve la banda y las flechas */



.galeria-relativo {
    position: relative;
    width: 100%;
    margin-bottom: 50px;
    /* Espacio entre secciones de obra */
}

/* La banda que se desliza */
.galeria-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    /* Permite scroll manual siempre */
    overflow-y: hidden;
    padding: 20px 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Suavidad total en iPhone */
    cursor: grab;
    touch-action: pan-x;
    /* Crucial: le dice al móvil que solo use el dedo para mover de lado */
    -webkit-user-drag: none;
    /* Evita que las imágenes se "arrastren" como archivos */
}

/* Ocultar la barra de scroll para que parezca una banda profesional */
.galeria-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.galeria-scroll-wrapper:active {
    cursor: grabbing;
}

/* El contenedor interno que sostiene las fotos en fila */
.galeria-flex-container {
    display: flex;
    gap: 25px;
    padding: 0 40px;
    /* Margen para que la primera foto no pegue al borde */
    width: max-content;
}

/* Cada cuadro individual */
.galeria-item {
    flex: 0 0 auto;
    width: 350px;
    /* Tamaño PC */
    transition: transform 0.3s ease;
    pointer-events: auto;
}

.galeria-item {
    position: relative;
    cursor: pointer;
}

.galeria-item img {
    width: 100%;
    /* Quitamos la altura fija y usamos una proporción fluida */
    height: auto; 
    aspect-ratio: 4 / 5; /* O la proporción que más se repita en las obras */
    /* LA CLAVE: contain en lugar de cover */
    object-fit: contain; 
    transition: 0.3s;
    display: block;
    pointer-events: none;
}

.galeria-item:hover img {
    transform: scale(1.02);
}

.badge-venta {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #5d4037;
    color: white;
    padding: 5px 10px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10;
}

.badge-venta.vendido {
    background-color: rgba(0, 0, 0, 0.5);
    color: #eee;
    backdrop-filter: blur(5px);
}


/* ==========================================================
   FLECHAS (Solo aparecen en PC)
========================================================== */
@media (min-width: 769px) {
    .flecha-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(5px);
        color: white;
        border: none;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        transition: 0.3s;
    }

    .flecha-nav:hover {
        background: #a65a0d;
    }

    .flecha-nav.prev {
        left: 15px;
    }

    .flecha-nav.next {
        right: 15px;
    }
}

/* ==========================================================
   AJUSTES PARA TELÉFONO (RESPONSIVO)
========================================================== */
@media (max-width: 768px) {
    .galeria-flex-container {
        padding: 0 20px;
        /* Menos margen en móvil */
        gap: 15px;
    }

    .galeria-item {
        width: 80vw;
        /* El cuadro ocupa casi toda la pantalla */
    }

    .galeria-item img {
        height: 250px;
        /* Más impacto visual en vertical */
    }

    /* En móvil ocultamos flechas para que el dedo tenga todo el espacio */
    .flecha-nav {
        display: none !important;
    }
}

/* ===== GALERIA LIGHTBOX ===== */

.lightbox-contexto {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 10002;
    text-align: center;
    pointer-events: none;
    /* Para que no estorbe al hacer clic */
}

#lb-seccion {
    font-weight: bold;
    color: #fff;
}

.galeria-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    /* Más oscuro para centrar la atención */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
}

.galeria-lightbox-contenido {
    background: transparent;
    max-width: 1200px;
    /* Más ancho para escritorio */
    width: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    /* Más espacio entre imagen y ficha */
    color: white;
}

.galeria-lightbox img {
    max-width: 75%;
    /* Imagen más grande en escritorio */
    max-height: 85vh;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 20px;
    user-select: none;
    transition: color 0.3s, background 0.3s;
    z-index: 10001;
}

.lightbox-nav:hover {
    color: white;
}

.lightbox-nav.prev {
    left: 10px;
}

.lightbox-nav.next {
    right: 10px;
}

.btn-lb-accion {
    display: inline-block;
    padding: 12px 28px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 2px;
    border-radius: 30px;
    /* Redondeados para que se vean modernos */
    transition: all 0.3s ease;
    cursor: pointer;
    font-weight: 500;
}

/* Estado Normal: Blanco y limpio */
.btn-lb-accion.principal,
.btn-lb-accion.secundario,
.btn-lb-accion.terciario {
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #eeeeee;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Al pasar el mouse (Hover) y al dar clic (Active) */
.btn-lb-accion:hover,
.btn-lb-accion:active {
    background-color: #5d4037;
    /* El café de Thiago */
    color: #ffffff;
    /* Texto blanco para que resalte */
    border-color: #5d4037;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* Pequeña diferencia para el de "Cotizar" para que no compita tanto */
.btn-lb-accion.terciario {
    background-color: rgba(255, 255, 255, 0.8);
    border-style: dashed;
    /* Un toque artístico diferente */
}

.galeria-ficha {
    max-width: 350px;
}

.galeria-ficha h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
}

.galeria-ficha p {
    margin: 8px 0;
    font-size: 16px;
    color: #ccc;
}

.galeria-cerrar {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 45px;
    color: white;
    cursor: pointer;
    line-height: 1;
    z-index: 10000;
}

/* ==========================================================
   Responsivo
========================================================== */
@media (max-width: 768px) {
    .galeria-lightbox {
        align-items: center;
        /* Centra todo el bloque en la pantalla */
        overflow-y: auto;
    }

    .lightbox-contexto {
        top: auto;
        bottom: 20px;
        /* En móvil lo pasamos abajo para liberar espacio arriba */
        font-size: 12px;
        background: rgba(0, 0, 0, 0.6);
        padding: 5px 15px;
        border-radius: 20px;
    }

    .galeria-lightbox-contenido {
        flex-direction: column;
        /* Apila imagen arriba, texto abajo */
        gap: 15px;
        width: 90%;
        padding-top: 50px;
        /* Espacio para la X de cerrar */
    }

    .galeria-lightbox img {
        max-width: 100%;
        max-height: 45vh;
        /* Limita la imagen a la mitad de la pantalla */
        width: auto;
    }

    .lightbox-nav {
        top: 40%;
        /* Subir flechas para que coincidan con la imagen */
        font-size: 30px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 5px;
    }

    .galeria-ficha {
        width: 100%;
        font-size: 14px;
        background: rgba(255, 255, 255, 0.05);
        /* Fondo sutil para separar del fondo negro */
        padding: 15px;
        border-radius: 8px;
        text-align: center;
        /* Centramos el texto en móvil para mejor estética */
    }

    .galeria-ficha h3 {
        font-size: 20px;
    }

    .galeria-ficha p {
        font-size: 14px;
    }

    .galeria-cerrar {
        top: 10px;
        right: 20px;
        font-size: 40px;
        background: rgba(0, 0, 0, 0.5);
        /* Círculo oscuro detrás de la X para que siempre se vea */
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }
}


/* =====================================================
   ARTISTA
===================================================== */
.acordeon-info {
    position: relative;
    max-height: 120px;
    /* Altura de las líneas iniciales */
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.acordeon-info.abierto {
    max-height: 1000px;
    /* Altura suficiente para todo el texto */
}

.acordeon-info::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(transparent, rgba(26, 26, 26, 0.9));
    transition: opacity 0.3s;
}

.acordeon-info.abierto::after {
    opacity: 0;
    /* Desaparece cuando se abre */
}

.btn-leer-mas {
    background: none;
    border: none;
    color: wheat;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 10px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-leer-mas i {
    transition: transform 0.3s;
}

.btn-leer-mas.activo i {
    transform: rotate(180deg);
}

.pagina-artista::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(7, 7, 7, 0.164);
    /* ajusta opacidad */
    z-index: -1;
}

.pagina-artista {
    /* Mantenemos tu imagen original para pantallas grandes */
    background-image: url("../img/artistafondo.jpeg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* El efecto fixed se ve genial en PC */
    background-repeat: no-repeat;
    position: relative;
    min-height: 100vh;
    /* Asegura que cubra todo el alto de la pantalla */
}

.artista {
    max-width: 1400px;
    /* Ancho máximo total de la sección */
    margin: 0 auto;
    /* Centra la sección entera */
    padding: 100px 5%;
    /* Aire arriba/abajo y un poco a los lados */
}

/* HEADER */

.artista-header {
    text-align: center;
    margin-bottom: 70px;
}

.nombre-artista {
    font-size: clamp(2rem, 5vw, 3rem);
    /* Fuente fluida */
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 15px;
    color: #fff;
}

.frase-artista {
    font-size: 1.1rem;
    font-style: italic;
    color: #e0e0e0;
}

/* CONTENIDO EN TRES COLUMNAS EQUILIBRADAS */
.artista-estructura {
    display: grid;
    grid-template-columns: 2.55fr 2.5fr 2.55fr;
    /* La columna del centro es 50% más ancha que las laterales */
    gap: 30px;
    align-items: start;
    max-width: 1200px;
    /* Asegura que el contenido no se estire al infinito */
    margin: 0 auto;
}

/* IMAGEN (CENTRO) */
.artista-imagen {
    text-align: center;
    order: 2;
}

.artista-imagen img {
    width: 100%;
    max-width: 450px;
    /* <--- Aquí ya puedes usar un tamaño mayor con confianza */
    height: auto;
    border-radius: 20px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.2),
        0 15px 40px rgba(0, 0, 0, 0.5);
    margin-top: -20px;
    margin-bottom: 40px;
}

/* TEXTO */

.columna-texto {
    background: rgba(26, 26, 26, 0.5);
    /* Oscurecemos el fondo a un negro traslúcido */
    backdrop-filter: blur(15px);
    /* Desenfoque más intenso */
    -webkit-backdrop-filter: blur(15px);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4);
    order: 1;
    /* Por defecto para Declaración */
}

.columna-texto:last-of-type {
    order: 3;
    /* Para Semblanza */
}

.columna-texto h2 {
    font-size: 1.3rem;
    color: wheat;
    /* Tu color de acento */
    border-bottom: 1px solid rgba(245, 222, 179, 0.3);
    padding-bottom: 10px;
    margin-bottom: 25px;
    letter-spacing: 2px;
}

.columna-texto p {
    line-height: 1.9;
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: #f0f0f0;
    text-align: justify;
}

/* BOTÓN DE CV EN LA SEMBLANZA */
.btn-cv {
    display: inline-block;
    background: transparent;
    border: 1px solid wheat;
    color: wheat;
    padding: 12px 25px;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
    transition: 0.3s;
    margin-top: 15px;
}

.btn-cv:hover {
    background: wheat;
    color: #1a1a1a;
    box-shadow: 0 5px 15px rgba(245, 222, 179, 0.3);
}

/* FIRMA */
.firma-artista {
    margin-top: 60px;
    text-align: center;
    order: 4;
    /* Pone la firma al final */
}

.firma-artista img {
    width: 120px;
    opacity: 0.7;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1100px) {
    .artista-estructura {
        grid-template-columns: 1fr;
        /* Una sola columna */
        gap: 30px;
    }

    .artista-imagen img {
        margin-top: 0;
        max-width: 350px;
    }

    .columna-texto {
        padding: 30px;
    }


}

@media (max-width: 768px) {
    .pagina-artista {
        background-image: none;
        /* Quitamos el fondo del contenedor principal */
    }

    .pagina-artista::before {
        content: "";
        position: fixed;
        /* Se queda quieto */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        /* Se va detrás de todo */
        background-image: url("../img/artistafondo_cel.jpeg");
        background-size: cover;
        background-position: center;
        opacity: 0.7;
        /* De paso le damos un toque mate artístico */
    }

    .nombre-artista {
        color: #f2f0ed;
        font-size: clamp(3rem, 5vw, 4rem);

        /* Esta sombra profunda y difusa crea el contraste */
        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
        letter-spacing: 2px;
        margin-bottom: 5px;
        text-align: center;
    }

    .frase-artista {
        color: #f2f0ed;
        font-size: 1.5rem;
        font-style: italic;
        font-weight: 300;

        /* Misma sombra para la frase */
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
        text-align: center;
    }

}

/* =========================
   PROYECTOS Artista Collage
========================= */
.titulo-proyectos {
    text-align: center;
    font-size: 34px;
    color: wheat;
    /* Mantenemos el color para que combine con Thiago Mar */
    margin-bottom: 60px;
    padding: 30px;

    /* CAMBIO CLAVE: Estilo traslúcido en lugar de brown */
    background: rgba(15, 15, 15, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Detalles de acabado */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    letter-spacing: 5px;
    /* Más espacio entre letras para un look más artístico */
    text-transform: uppercase;
    /* Todo en mayúsculas para mayor impacto */
    font-weight: 300;
    /* Un trazo más fino se ve más moderno */
}

.collage-proyectos {
    column-count: 4;
    column-gap: 20px;
    padding: 60px 10%;
}

.proyecto-item {
    break-inside: avoid;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.proyecto-item img {
    width: 100%;
    display: block;
    transition: 0.4s ease;
}

/* Overlay */
.overlay-proyecto {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    padding: 15px;

    opacity: 0;
    transition: 0.4s ease;
}

.proyecto-item:hover img {
    transform: scale(1.08);
}

.proyecto-item:hover .overlay-proyecto {
    opacity: 1;
}

/* 📱 RESPONSIVE PROYECTOS */

@media (max-width: 950px) {


    /* 2. Reacomodo de la estructura */
    .artista-estructura {
        display: flex;
        flex-direction: column;
        /* Pone un elemento debajo de otro */
        gap: 20px;
        padding: 20px;
    }

    /* 3. La imagen de Thiago ahora es lo primero que se ve */
    .artista-imagen {
        order: -1;
        /* Mueve la imagen al principio del todo */
        margin-top: 0;
    }

    .artista-imagen img {
        max-width: 90% !important;
        /* Que ocupe casi todo el ancho del cel */
        height: auto;
        margin-bottom: 10px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        /* Sombra más suave para móvil */
    }

    /* 4. Los cuadros de texto con más transparencia para ver el fondo */
    .columna-texto {
        padding: 25px;
        background: rgba(15, 15, 15, 0.8);
        /* Un poco más sólido para leer mejor en cel */
    }

    /* 5. Título de proyectos más compacto */
    .titulo-proyectos {
        font-size: 24px;
        /* Más pequeño para que no ocupe toda la pantalla */
        margin-bottom: 30px;
        padding: 15px;
    }

    /* 6. El collage de proyectos en una sola columna */
    /* Contenedor Principal: Superposición con Grid */
    .collage-proyectos {
        display: grid;
        grid-template-columns: 1fr;
        /* Una sola columna */
        grid-template-rows: auto;
        /* Fila automática para que crezca */

        /* ¡LA CLAVE!: Superponemos todos los elementos en la misma celda grid */
        place-items: center;
        position: relative;
        padding: 50px 0 150px 0;
        /* Espacio arriba y abajo para que el mazo respire */
    }

    /* 2. Cada carta del mazo */
    .proyecto-item {
        /* Ocupan la misma posición grid, apilándose */
        grid-column: 1 / 1;
        grid-row: 1 / 1;

        width: 80%;
        /* Ancho de la carta */
        position: relative;
        transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        /* Animación suave */

        /* Elevación y marco físico */

        padding: 6px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);

    }

    .proyecto-item img {
        width: 100%;
        display: block;
    }

    /* 3. Rotaciones y Pequeño Desplazamiento (Cerrado) */
    /* Las fotos se enciman en la misma posición pero con distinta rotación */
    .proyecto-item:nth-child(1) {
        transform: rotate(-5deg);
        z-index: 10;
    }

    .proyecto-item:nth-child(2) {
        transform: rotate(4deg);
        z-index: 9;
    }

    .proyecto-item:nth-child(3) {
        transform: rotate(-2deg);
        z-index: 8;
    }

    .proyecto-item:nth-child(4) {
        transform: rotate(6deg);
        z-index: 7;
    }

    .proyecto-item:nth-child(5) {
        transform: rotate(-4deg);
        z-index: 6;
    }

    .proyecto-item:nth-child(6) {
        transform: rotate(3deg);
        z-index: 5;
    }

    .proyecto-item:nth-child(7) {
        transform: rotate(-6deg);
        z-index: 4;
    }

    .proyecto-item:nth-child(8) {
        transform: rotate(5deg);
        z-index: 3;
    }

    /* Repite el z-index descendente para todos los elementos */
    .proyecto-item:nth-child(n+9) {
        z-index: 2;
    }


    /* 4. CUANDO LAS TOCAS O ACTIVAS (Despliegue) */
    /* Esta animación hace que se desplieguen hacia abajo en cascada */
    .collage-proyectos:active .proyecto-item,
    .collage-proyectos:hover .proyecto-item {
        /* Al desplegarse, pierden la rotación y se separan */
        transform: rotate(0deg) translateY(calc(300px * var(--i))) !important;

        /* Este calculo con variable es para JavaScript, pero podemos simularlo con CSS */
        margin-bottom: 20px;
        grid-column: 1 / 1;
        grid-row: auto;
        /* IMPORTANTE: Dejamos que el grid las ponga en fila */
        position: relative;
    }

    /* 5. El overlay rústico con el texto */
    .overlay-proyecto {
        background: rgba(255, 255, 255, 0.616);
        color: #80532a;
        font-family: 'Georgia', serif;
        font-style: oblique;
        padding: 10px;
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
        opacity: 0;
        transition: opacity 0.3s;
        border: 1px solid #d2c1b0;
        text-align: center;
    }

    .proyecto-item:hover .overlay-proyecto {
        opacity: 1;
    }
}

/* =====================================================
   SECCIÓN PRENSA 
===================================================== */

/* Usamos el contenedor principal para controlar el fondo y evitar el desborde lateral */
.contenedor-prensa-galeria {
    padding-top: 20px;
    padding-bottom: 100px;
    width: 100%;
    overflow-x: hidden;
    /* Esto elimina la barra de scroll horizontal sin romper el body */
    display: block;
}

.prensa-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* TÍTULOS */

.frase-poetica {
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    max-width: 400px;
    margin-top: 40px;
    margin-bottom: 40px;
    border-left: 2px solid #bb7e5d;
    /* Recuperamos la línea café */
    padding-left: 25px;
}

/* BOTÓN PERSONALIZADO */
/* CONTENEDOR DE BOTONES */
.acciones-prensa {
    display: flex;
    flex-direction: column;
    /* Los pone uno abajo del otro */
    align-items: flex-start;
    /* Los alinea a la izquierda */
    gap: 15px;
    /* Crea el espacio perfecto entre ellos */
    margin-top: 25px;
    /* Separa los botones del texto de arriba */
}

/* TU BOTÓN (con un ajuste de ancho) */
.btn-prensa {
    display: inline-block;
    padding: 15px 30px;
    background-color: transparent;
    color: #1a1a1a;
    border: 1px solid #1a1a1a;
    text-decoration: none;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 3px;
    transition: all 0.4s ease;
    width: fit-content;
    /* Evita que el botón se estire a todo lo ancho */
}

.btn-prensa:hover {
    background-color: #1a1a1a;
    color: #f2f0ed;
    letter-spacing: 5px;
}



.subtitulo-minimal {
    text-align: center;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-size: 10px;
    color: #bb7e5d;
    /* Color café para acentos */
    margin-bottom: 30px;
}

/* COMPOSICIÓN ESCRITORIO */
.composicion-prensa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    margin-bottom: 180px;
}

.composicion-prensa.invertida {
    flex-direction: row-reverse;
}

.bloque-texto {
    flex: 1;
}

.video-wrapper {
    width: 80%;
    height: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.bloque-imagenes {
    flex: 1.3;
    position: relative;
    height: 450px;
    display: flex;
    align-items: center;
}

.img-capa.principal {
    width: 80%;
    position: relative;
    /* Clave: Esto da altura al contenedor y evita encimados */
    z-index: 1;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.img-capa.secundaria {
    width: 55%;
    position: absolute;
    right: -20px;
    bottom: -40px;
    z-index: 2;
    border: 12px solid #f2f0ed;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.composicion-prensa.invertida .img-capa.secundaria {
    right: auto;
    left: -20px;
}

.img-capa img {
    width: 100%;
    display: block;
}

/* =====================================================
   MÓVIL (CORRECCIÓN DE ENCIMADO)
===================================================== */
@media (max-width: 850px) {

    .composicion-prensa,
    .composicion-prensa.invertida {
        flex-direction: column;
        gap: 40px;
        /* Crea una separación física real entre bloques */
        margin-bottom: 100px;
    }

    .bloque-imagenes {
        width: 100%;
        height: auto;
        /* Permite que la imagen dicte el espacio */
        min-height: 300px;
        margin-bottom: 20px;
    }

    .img-capa.principal {
        width: 85%;
        margin: 0 auto;
        /* Centra la base de la composición */
    }

    .img-capa.secundaria {
        width: 55%;
        right: 0;
        bottom: -20px;
        border-width: 6px;
    }

    .bloque-texto {
        width: 100%;
        padding: 0 10px;
        text-align: left;
    }

    .frase-poetica {
        max-width: 100%;
        border-left: 2px solid #bb7e5d;
        padding-left: 15px;
    }
}

/* =====================================================
   AJUSTES PARA MÓVIL (GALAXY / IPHONE)
===================================================== */
@media (max-width: 850px) {
    .contenedor-prensa-galeria {
        padding-top: 100px;
    }

    .composicion-prensa,
    .composicion-prensa.invertida {
        flex-direction: column;
        text-align: left;
        /* Alineación más moderna para artistas */
        gap: 0;
        margin-bottom: 100px;
    }

    .bloque-imagenes {
        width: 100%;
        height: 350px;
        /* Reducción de espacio para que no tape el texto */
        margin-bottom: 40px;
        order: 1;
        /* Imagen primero */
    }

    .bloque-texto {
        width: 100%;
        order: 2;
        /* Texto después */
        padding: 0 10px;
    }

    .img-capa.principal {
        width: 85%;
        left: 0;
    }

    .img-capa.secundaria {
        width: 55%;
        right: 0;
        bottom: 0;
        border-width: 6px;
    }

    .titulo-obra-prensa {
        font-size: 1.8rem;
    }

    .frase-poetica {
        max-width: 100%;
        border-left: none;
        border-top: 1px solid rgba(187, 126, 93, 0.4);
        padding: 20px 0 0 0;
        margin-top: 15px;
    }
}


/* =====================================================
   SECCIÓN ORIGINALES (Obras en venta)
===================================================== */
.seccion-originales {
    min-height: 100vh;
    padding: 80px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.originales-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    width: 100%;
    max-width: 1300px;
}

.originales-card {
    /* 1. Transparencia con Glassmorphism */
    background-color: rgba(255, 255, 255, 0.25);
    /* Fondo blanco con 40% de opacidad */
    backdrop-filter: blur(15px);
    /* El efecto de desenfoque del fondo */
    -webkit-backdrop-filter: blur(15px);
    /* Compatibilidad para Safari */

    /* 2. Bordes y Sombras */
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 25px;
    /* Bordes bien redondeados */
    padding: 30px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);

    /* 3. Animación y Layout */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 320px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    /* Sombra más suave y extendida */
}

.originales-card:hover {
    transform: translateY(-10px) scale(1.02);
    background-color: rgba(255, 255, 255, 0.35);
    /* Se aclara un poco al pasar el mouse */
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
}

.originales-imagen {
    width: 100%;
    height: 300px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    /* Fondo de imagen muy tenue */
    border-radius: 20px;
    /* Redondeamos también el contenedor de la foto */
    overflow: hidden;
}

.originales-imagen img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    /* Un truquito para que la foto flote dentro de la tarjeta */
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

.originales-card h3 {
    margin: 15px 0 5px;
    font-size: 1.3rem;
    font-weight: 400;
    color: #222;
}

.originales-precio {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #5d4037;
}

/* El botón que tenías en el HTML necesita estilo */
.btn-originales {
    text-decoration: none;
    color: #5d4037;
    border: 1px solid #5d4037;
    padding: 10px 20px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 0.3s;
}

.btn-originales:hover {
    background-color: #5d4037;
    color: white;
}

/* -----------------------
originales
------------------------ */
.btn-originales {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 30px;
    border: 1px solid black;
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: black;
    background: transparent;
    transition: all 0.3s ease;
    align-self: center;
}

.btn-originales:hover {
    background-color: black;
    color: white;
    transform: scale(1.05);
}

/* Responsive para el grid de originales */
@media (max-width: 768px) {
    .originales-card {
        width: 100%;
        /* Una sola columna en móvil */
        max-width: 350px;
    }
}

/* DETALLE OBRA */
.detalle-obra {
    display: flex;
    flex-direction: column;
    gap: 60px;
    /* Más espacio entre imagen y texto */
    padding: 60px 5%;
    max-width: 1300px;
    margin: 0 auto;
    margin-top: 40px;
}

.imagen-obra {
    display: inline-block;
    line-height: 0;

    /* Quitamos TODO lo anterior */
    background: transparent;
    padding: 0;
    border: none;
    margin: 0 auto;
    /* Centrado si el contenedor padre lo permite */
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
    transition: all 0.5s ease;
    position: relative;
}

.imagen-obra:hover {
    /* Efecto de "elevación" al pasar el mouse */
    transform: scale(1.02);
    /* Efecto de acercamiento sutil */
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.25));
}

.imagen-obra img {
    width: 100%;
    height: auto;
    border-radius: 2px;
    /* Menos redondeado se ve más como papel/marco */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    /* Sombra muy suave y larga */
    transition: transform 0.5s ease;
}

.titulo-rural {
    text-align: center;
    font-family: "Georgia", serif;
    /* Fuente clásica rural */
    font-weight: normal;
    letter-spacing: 1px;
}

.info-extra {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 30px 0;
    margin: 40px 0;
    background: transparent;
    /* Quitamos el fondo para que se vea minimalista */
    font-style: italic;
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    color: #5e330b;
}

.info-item {
    margin-bottom: 15px;
}

.info-item i {
    font-size: 0.8rem;
    /* Iconos más pequeños y discretos */
    opacity: 0.7;
}


.precio-obra {
    font-size: 1.8rem;
    text-align: center;
    font-family: "Georgia", serif;
    color: #743f23;
    font-weight: 300;
    margin-bottom: 20px;
}

.proceso-creacion {
    margin: 20px 0;
    text-align: center;
}

.btn-proceso {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border: 1px dashed #8b5a2b;
    /* Borde punteado para que parezca boceto */
    color: #8b5a2b;
    text-decoration: none;
    font-family: "Georgia", serif;
    font-style: italic;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-proceso:hover {
    background-color: #fdfaf7;
    border-style: solid;
    transform: translateY(-2px);
}

/* ETIQUETAS */

.etiquetas-obra {
    margin-bottom: 20px;
}

.badge {
    display: inline-block;
    padding: 6px 14px;
    margin-right: 8px;
    margin-bottom: 8px;
    border-radius: 20px;
    font-size: 0.75rem;
    letter-spacing: 1px;
    background: brown;
    border: 1px solid #ddd;
}

.badge.agotado {
    background: #000;
    color: white;
}

/* BOTÓN GRANDE */

.btn-obra-grande {
    display: inline-block;
    padding: 18px 40px;
    border: 1px solid #1a1a1a;
    background: transparent;
    color: #1a1a1a;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 3px;
    font-size: 0.8rem;
    transition: all 0.4s ease;
    width: 100%;
    text-align: center;
}

.btn-obra-grande:hover {
    background: #1a1a1a;
    color: #f2f0ed;
}

/* RESPONSIVE */

@media (min-width: 992px) {
    .detalle-obra {
        flex-direction: row;
        align-items: center;
        min-height: 80vh;
        /* Centra el contenido verticalmente */
    }

    .imagen-obra {
        flex: 1.4;
        /* La imagen toma el 60% del ancho */
        padding-right: 50px;
    }

    .info-obra {
        flex: 1;
        padding-left: 20px;
    }
}

/* =====================================================
   EXPOSICIONES
===================================================== */
.cartelera-expos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px 30px;
    /* Más espacio arriba/abajo para que luzca la cinta */
    padding: 60px 5%;
    max-width: 1400px;
    margin: 0 auto;
}

.poster-expo {
    flex: 1 1 350px;
    /* Permite que crezcan pero con un base de 350px */
    max-width: 450px;
    /* Evita que se ensanchen demasiado en pantallas grandes */
    background: #fff;
    padding: 15px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: fit-content;
    /* Se ajusta al contenido que se despliega */
    position: relative;
}

.poster-expo img {
    width: 100%;
    height: 350px;
    /* Altura fija para que todos los pósters se alineen */
    object-fit: cover;
    /* Recorta la imagen elegantemente para llenar el espacio */
    object-position: top;
    /* Enfoca la parte superior del cartel */
    display: block;
    border-radius: 4px;
}


.poster-expo:hover {
    transform: translateY(-10px) rotate(1deg);
    /* Se mueve como un cuadro real */
    box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.1);
}

.detalle-expo {
    max-height: 0;
    /* Oculta el contenido */
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s ease;
    padding: 0 10px;
}

.poster-expo::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 30px;
    background: rgba(210, 180, 140, 0.5);
    /* Color cinta canela semi-transparente */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
    z-index: 5;
}

.poster-expo.activa {
    flex: 0 1 500px;
    /* Se ensancha un poco al abrirse */
    border-color: #bb7e5d;
}

.poster-expo.activa .detalle-expo {
    max-height: 800px;
    /* Altura suficiente para el texto y mapa */
    opacity: 1;
    padding: 20px 10px;
}

.poster-expo.activa img {
    filter: grayscale(10%);
    /* Opcional: efecto visual para enfocar el texto */
    margin-bottom: 15px;
}

.detalle-expo h2 {
    margin-bottom: 5px;
}

.detalle-expo p {
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.detalle-expo iframe {
    width: 100%;
    height: 200px;
    border: 0;
    margin-top: 15px;
    border-radius: 8px;
}

.pista-clic {
    display: block;
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 10px;
    color: #888;
}

.activa .pista-clic {
    display: none;
    /* Se oculta cuando ya está abierta */
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .cartelera-expos {
        padding: 30px 5%;
        /* Menos espacio a los lados en el cel */
    }

    .cartelera-expos>div,
    .expo-item {
        flex: 0 1 100%;
        /* Una sola expo por fila en el teléfono */
    }
}


/* --- Expos PASADAS --- */

.destacado-modal {
    text-align: center;
    margin-bottom: 40px;
}

.img-principal {
    width: 100%;
    max-width: 700px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.descripcion-breve {
    font-style: italic;
    font-size: 0.9rem;
    color: #888;
    margin-top: 15px;
    margin-bottom: 15px;
}

.lista-centrada {
    display: table;
    /* Permite centrar el bloque pero alinear el texto */
    margin: 30px auto;
    text-align: left;
    list-style-position: inside;
    /* Mantiene el punto de la lista junto al texto */
}

.lista-centrada li {
    margin-bottom: 12px;
    line-height: 1.6;
}

/* Lista de artistas en columnas para que no sea infinita */
.lista-artistas {
    column-count: 2;
    /* Dos columnas en PC */
    column-gap: 40px;
    width: fit-content;
}

/* Ajuste para móviles */
@media (max-width: 600px) {
    .lista-artistas {
        column-count: 1;
        display: block;
        text-align: center;
    }

    .img-principal {
        max-width: 100%;
    }
}

.galeria-pasadas {
    display: flex; /* Cambiamos de grid a flex */
    flex-wrap: wrap; /* Permite que los elementos bajen a la siguiente fila */
    justify-content: center; /* ¡ESTA ES LA CLAVE! Centra los elementos de la última fila */
    gap: 30px;
    padding: 40px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.item-pasada {
    /* En PC queremos que ocupen aproximadamente 1/3 del ancho (menos el gap) */
    flex: 0 1 calc(33.333% - 30px); 
    min-width: 280px; /* Evita que se hagan demasiado delgados */
    
    /* Mantenemos tus estilos de póster */
    position: relative;
    background: #fff;
    padding: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid #eee;
}

.item-pasada img {
    width: 100%;
    height: auto;
    /* Proporción de póster vertical */
    aspect-ratio: 3 / 4; 
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.overlay-pasada {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(23, 74, 150, 0.85); /* El café de tu marca con transparencia */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0; /* Escondido por defecto */
    transition: opacity 0.3s ease;
    text-align: center;
}

.overlay-pasada span {
    color: white;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    font-family: 'Georgia', serif;
}

.item-pasada:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}

.item-pasada:hover .overlay-pasada {
    opacity: 1;
}

.item-pasada:hover img {
    transform: scale(1.05);
}

/* --- VENTANA MODAL --- */
.modal-fondo {
    display: none;
    /* Oculto por defecto */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
}

.modal-fondo.mostrar {
    display: block;
}

.modal-contenido {
    background-color: #f2f0ed;
    margin: 5% auto;
    padding: 40px;
    width: 80%;
    max-width: 900px;
    position: relative;
    max-height: 80vh;
    overflow-y: auto;
}



.cerrar-modal {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 35px;
    cursor: pointer;
    color: #1a1a1a;
}

/* Estilo para el bloque de texto en el modal */
.texto-modal p {
    margin-bottom: 15px;
    line-height: 1.6;
    color: #333;
}

/* Estilo para frases importantes (Citas) */
.texto-modal blockquote {
    border-left: 3px solid #bb7e5d;
    /* Tu color café/arena */
    padding-left: 15px;
    margin: 20px 0;
    font-style: italic;
    font-size: 1.1rem;
    color: #555;
}

/* Resaltar palabras clave */
.texto-modal strong {
    color: #1a1a1a;
    font-weight: 600;
}

/* Espaciado de las imágenes cuando van abajo */
.grid-imagenes-modal {
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

/* Estilo interno del modal */
#modal-body h2 {
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.fecha-modal {
    color: #bb7e5d;
    font-size: 12px;
    margin-bottom: 20px;
}

.grid-imagenes-modal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 20px 0;
}

.grid-imagenes-modal img {
    width: 100%;
    border: 1px solid #ddd;
}

.texto-modal {
    font-family: 'Georgia', serif;
    font-style: italic;
    line-height: 1.8;
}

.recorte-fb {
    width: 100%;
    max-width: 500px;
    height: 210px;
    /* Reducimos de 250px a 210px para ocultar las cabezas */
    overflow: hidden;
    position: relative;
    border: 1px solid #eee;
    border-bottom: none;
    /* Quitamos el borde de abajo para que fluya con lo siguiente */
    margin: 20px auto 0;
    /* Quitamos el margen inferior */
    background: #fff;
}

/* Añadimos un pequeño degradado blanco al final para que el corte no sea tan brusco */
.recorte-fb::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, transparent, #fff);
    pointer-events: none;
}

@media (max-width: 600px) {
    .recorte-fb {
        height: 320px;
        /* A veces en móvil el texto ocupa más espacio vertical */
    }
}

.pista-movil {
    display: none;
}

/* Móvil */
@media (max-width: 768px) {

.galeria-pasadas {
        gap: 15px;
        padding: 15px;
    }
    .modal-contenido {
        width: 95%;
        padding: 20px;
    }

    .grid-imagenes-modal {
        grid-template-columns: 1fr;
    }

.item-pasada {
        /* En móvil ocupan casi la mitad para que salgan 2 por fila */
        flex: 0 1 calc(50% - 15px); 
        min-width: 140px; /* Tamaño mínimo para que no se rompa el diseño */
        padding: 6px;
    }

    .pista-movil {
        display: flex;
        position: absolute;
        bottom: 15px;
        right: 15px;
        background: rgba(242, 240, 237, 0.9);
        /* Fondo arena semi-transparente */
        color: #1a1a1a;
        padding: 8px 12px;
        border-radius: 20px;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
        align-items: center;
        gap: 8px;
        z-index: 5;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        pointer-events: none;
        /* Para que el click pase a través del botón hacia el contenedor */
        animation: pulse-hint 2s infinite;
        /* Animación sutil para llamar la atención */
    }

    /* Animación de latido suave */
    @keyframes pulse-hint {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.05);
        }

        100% {
            transform: scale(1);
        }
    }

    /* Efecto visual al tocar (Feedback táctil) */
    .item-pasada:active {
        opacity: 0.7;
        transform: scale(0.98);
        transition: 0.1s;
    }
}

/* =====================================================
   TALLERES Y ACTIVIDADES
===================================================== */

.galeria-taller {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 40px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

.card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
    position: relative;
    /* IMPORTANTE para que el ★ DESTACADO se posicione bien */
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-5px);
}

.card img {
    width: 100%;
    height: 250px;
    /* Un poco más bajo para que quepa más info */
    object-fit: cover;
}

.card-info {
    padding: 20px;
}

.card h3 {
    margin: 10px 0;
}

.card p {
    font-size: 14px;
    margin: 5px 0;
}

/* BOTÓN */
.btn-detalle {
    margin-top: 10px;
    padding: 8px 18px;
    border: none;
    background: black;
    color: white;
    cursor: pointer;
    transition: 0.3s;
}

.btn-detalle:hover {
    background: #444;
}

/* BADGES */

.badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 20px;
    color: white;
    margin-bottom: 8px;
}

.taller-badge {
    background: #2c7a7b;
}

.actividad-badge {
    background: #805ad5;
}

.convocatoria-badge {
    background: #c53030;
}

/* FILTROS */

.filtros {
    text-align: center;
    margin: 20px 0;

}

.filtros button {
    padding: 8px 18px;
    margin: 5px;
    border: none;
    background: black;
    color: white;
    cursor: pointer;
    border-radius: 20px;
}

.filtros button:hover {
    background: #444;
}

.card.fijado {
    border: 3px solid brown;
    transform: scale(1.02);
    /* Lo hace resaltar físicamente */
    z-index: 1;
}

.card.fijado::before {
    content: "★ DESTACADO";
    position: absolute;
    top: 15px;
    right: 15px;
    background: brown;
    color: wheat;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 12px;
    border-radius: 5px;
    z-index: 20;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.card.evento-pasado {
    opacity: 0.6;
    /* Se ve un poco transparente */
    filter: grayscale(0.5);
    /* Pierde un poco de color */
    pointer-events: none;
    /* Opcional: para que no puedan dar clic al botón */
}

.card.evento-pasado::after {
    content: "FINALIZADO";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 15px;
    font-weight: bold;
    border: 2px solid white;
    z-index: 5;
}

.card.lleno {
    position: relative;
}

/* Oscurecemos un poco la imagen para que el texto resalte */
.card.lleno img {
    filter: brightness(0.7) grayscale(0.3);
}

/* Creamos el sello de "CUPO LLENO" */
.card.lleno::after {
    content: "CUPO LLENO";
    position: absolute;
    top: 20%;
    /* Lo ponemos sobre la imagen */
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    /* Un poco chueco para que parezca sello */
    background: #c53030;
    /* Rojo vibrante */
    color: white;
    padding: 8px 20px;
    font-weight: bold;
    font-size: 1.2rem;
    border: 3px double white;
    /* Doble borde estilo sello */
    z-index: 10;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.card.lleno .btn-detalle {
    background: gray !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ============================
   RESPONSIVE
============================ */

@media (max-width: 768px) {
    .galeria-taller {
        /* En móvil, una sola columna bien centrada */
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 20px;
    }

    .card {
        max-width: 100%;
        /* Que use todo el ancho del cel */
    }

    .card img {
        height: 200px;
        /* Imágenes más bajas en cel para no hacer tanto scroll */
    }
}

/* =========================================
   PÁGINA DE EVENTOS Y CONVOCATORIAS
   ========================================= */

/* --- Contenedor Principal (Header del Evento) --- */
.evento-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    padding: 100px 10%;
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
}

.evento-imagen {
    text-align: center;
}

.evento-imagen img {
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transition: 0.4s ease-in-out;
}

.evento-imagen img:hover {
    transform: scale(1.02);
}

/* --- Etiquetas (Badges) --- */
.evento-badge {
    display: inline-block;
    padding: 6px 18px;
    font-size: 13px;
    letter-spacing: 1px;
    border-radius: 30px;
    margin-bottom: 15px;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}

.taller-evento {
    background: #2c7a7b;
}

.actividad-evento {
    background: #805ad5;
}

.convocatoria-evento {
    background: #c53030;
}

/* --- Tipografía y Datos --- */
.evento-titulo {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    margin-bottom: 25px;
    color: #1a1a1a;
    line-height: 1.1;
}

.evento-datos p {
    margin: 15px 0;
    font-size: 15px;
    color: #444;
}

.evento-datos i {
    width: 25px;
    /* Alineación de iconos */
    color: #a65a0d;
}

.evento-precio {
    font-size: 22px;
    font-weight: bold;
    margin-top: 15px;
    color: #000;
}

/* --- Botón de Acción --- */
.btn-evento {
    border-radius: 50px;
    display: inline-block;
    margin-top: 25px;
    padding: 14px 35px;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: 0.3s;
}

.btn-evento:hover {
    background: #03943d;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(3, 148, 61, 0.2);
}

.evento-nota {
    font-size: 13px;
    margin-top: 15px;
    opacity: 0.7;
    font-style: italic;
}

/* --- Bloques de Contenido Inferior --- */
.evento-bloque {
    padding: 80px 10%;
}

.bloque-contenido {
    max-width: 850px;
    margin: 0 auto;
}

/* Títulos de sección unificados */
.evento-bloque h2 {
    font-size: clamp(1.8rem, 5vw, 2.5rem); /* Tamaño fluido para móvil/PC */
    margin-bottom: 25px;
    color: #8d4c0c;
    text-transform: uppercase;
    letter-spacing: 4px; /* Aire entre letras */
    font-weight: 300;
    position: relative;
    display: inline-block;
}

/* Línea decorativa minimalista */


/* Fondos de bloques */
.evento-resaltado {
    background-color: rgba(166, 90, 13, 0.08);
    border-top: 1px solid rgba(166, 90, 13, 0.1);
    border-bottom: 1px solid rgba(166, 90, 13, 0.1);
}

.evento-gris {
    /* Mantengo el nombre pero suavizo el tono */
    background: #f4f4f4;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

/* Listas con check */
.lista-check {
    list-style: none;
    padding: 0;
}

.lista-check li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
}

.lista-check i {
    color: #2c7a7b;
    font-size: 0.9rem;
}

/* Mapa */
.evento-mapa iframe {
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* --- Específicos de Convocatoria --- */
.intro-texto {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    border-left: 4px solid #c53030;
    padding-left: 20px;
    margin-bottom: 40px;
}

.pasos-convocatoria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.paso {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    border: 1px solid #eee;
}

.paso-numero {
    font-family: 'Splash', cursive;
    font-size: 2.5rem;
    color: rgba(197, 48, 48, 0.15);
    /* Bajé opacidad para legibilidad */
    position: absolute;
    top: 10px;
    right: 20px;
}

.paso h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
    color: #222;
}

/* Colaboraciones */
.evento-colaboracion {
    text-align: center;
    padding: 60px 0;
}

.logos-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    /* Para que no se amontonen en móvil */
}

.logos-flex img {
    height: 55px;
    object-fit: contain;
    filter: grayscale(0.5);
    transition: 0.3s;
}

.logos-flex img:hover {
    filter: grayscale(0);
}

.separador-x {
    font-size: 18px;
    color: #ccc;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .evento-container {
        grid-template-columns: 1fr;
        padding: 50px 5%;
        text-align: center;
    }

    .evento-bloque {
        padding: 50px 7%;
    }

    .evento-datos p {
        justify-content: center;
        display: flex;
        gap: 8px;
    }

    .logos-flex {
        gap: 20px;
    }
}

/* =====================================================
   MERCH
===================================================== */

.galeria-merch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    padding: 60px 10%;
}

.producto-item {
    text-align: center;
}

.producto-item img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    transition: 0.4s ease;
}

.producto-item img:hover {
    transform: scale(1.02);
}

/* BOTÓN SOLO MERCH */

.btn-merch-art {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 25px;
    border: 1px solid black;
    text-decoration: none;
    color: black;
    font-size: 13px;
    letter-spacing: 1px;
    transition: 0.3s;
}

.btn-merch-art:hover {
    background: black;
    color: white;
}

/* RESPONSIVE */

@media (max-width: 1024px) {
    .galeria-merch {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .galeria-merch {
        grid-template-columns: 1fr;
        padding: 40px 20px;
    }
}

.titulo-producto {
    margin-top: 20px;
    margin-bottom: 6px;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* =========================
   DETALLE PRODUCTO
========================= */

.producto-detalle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    padding: 80px 10%;
    /* El primer 80px es el aire INTERNO */
    margin-top: 50px;
    /* <--- Esto añade el aire EXTERNO arriba */
    align-items: center;
}

/* GALERÍA */

.producto-galeria {
    position: relative;
}

/* =========================
   CARRUSEL PROFESIONAL
========================= */

.producto-galeria {
    width: 100%;
    max-width: 500px;
}

.carrusel {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.carrusel-track {
    display: flex;
    transition: transform 0.4s ease;
}

.carrusel-track img {
    width: 100%;
    flex-shrink: 0;
    border-radius: 12px;
}

/* BOTONES SOBRE IMAGEN */

.carrusel button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    border: none;
    color: white;
    font-size: 28px;
    padding: 8px 14px;
    cursor: pointer;
    transition: 0.3s;
    z-index: 10;
}

.carrusel button:hover {
    background: rgba(0, 0, 0, 0.7);
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* DOTS */

.dots {
    position: absolute;
    bottom: 12px;
    width: 100%;
    text-align: center;
    z-index: 10;
}

.dots span {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 4px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.dots span.active {
    background: white;
}

@media (max-width: 768px) {
    .carrusel button {
        font-size: 22px;
    }
}

/* INFO */

.producto-info h1 {
    font-size: 30px;
    margin-bottom: 15px;
}

.producto-precio {
    font-size: 20px;
    margin-bottom: 20px;
}

.producto-descripcion {
    margin-bottom: 25px;
    line-height: 1.6;
}

.producto-tallas span {
    font-weight: bold;
}

.producto-tallas p {
    margin-top: 8px;
    letter-spacing: 3px;
    font-size: 14px;
}

.btn-producto {
    display: inline-block;
    margin-top: 30px;
    padding: 14px 35px;
    border: 1px solid black;
    text-decoration: none;
    color: black;
    transition: 0.3s;
}

.btn-producto:hover {
    background: black;
    color: white;
}

.producto-nota {
    margin-top: 20px;
    font-size: 13px;
    opacity: 0.8;
}

.producto-precios-bloque {
    margin-bottom: 20px;
    line-height: 1.8;
}

/* RESPONSIVE */

@media (max-width: 950px) {
    .producto-detalle {
        grid-template-columns: 1fr;
        padding: 40px 20px;
    }
}

/* =========================
   CONTACTO
========================= */

.contacto-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    padding: 80px 10%;
    align-items: center;
}

.contacto-imagen img {
    width: 70%;
    border-radius: 12px;
}

.contacto-info h1 {
    font-size: 32px;
    margin-bottom: 20px;
}

.contacto-texto {
    margin-bottom: 25px;
    line-height: 1.6;
}

/* ======================
   REDES GRANDES
====================== */

.contacto-redes-grandes {
    display: flex;
    gap: 35px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.contacto-redes-grandes .red {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: black;
    transition: 0.3s;
}

.contacto-redes-grandes i {
    font-size: 48px;
    margin-bottom: 10px;
    transition: 0.3s;
}

/* Colores oficiales */

.instagram i,
.facebook i,
.tiktok i {
    color: inherit;
}

.contacto-redes-grandes .red:hover {
    transform: translateY(-5px);
}

.contacto-redes-grandes .red:hover i {
    transform: scale(1.1);
}

/* ======================
   EMAIL
====================== */

.contacto-email {
    margin: 20px 0;
    font-size: 14px;
}

/* ======================
   FORMULARIO
====================== */

.form-contacto input,
.form-contacto textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    font-family: inherit;
}

/* Estilo para el menú desplegable */
.select-asunto {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    /* O el radio que estés usando */
    background-color: #fff;
    font-family: inherit;
    font-size: 1rem;
    color: #333;
    cursor: pointer;
    outline: none;
    appearance: none;
    /* Quita el estilo por defecto del navegador */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}

.select-asunto:focus {
    border-color: #bb7e5d;
    /* Tu color café/arena */
}

.btn-enviar {
    padding: 12px 30px;
    border: 1px solid black;
    background: none;
    cursor: pointer;
    transition: 0.3s;
}

.btn-enviar:hover {
    background: black;
    color: white;
}

/* ======================
   WHATSAPP
====================== */

.btn-whatsapp {
    display: inline-block;
    margin-top: 25px;
    padding: 14px 35px;
    background: #25D366;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: 0.3s;
}

.btn-whatsapp:hover {
    opacity: 0.85;
}

/* ======================
   RESPONSIVE
====================== */

@media (max-width: 900px) {

    .contacto-container {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 60px 8%;
        text-align: center;
    }

    .contacto-redes-grandes {
        justify-content: center;
    }

}



/* RESPONSIVE */

@media (max-width: 950px) {

    .contacto-container {
        grid-template-columns: 1fr;
        padding: 40px 20px;
    }

    .collage-proyectos {
        column-count: 1;
    }

}


/* =====================================================
   FOOTER
===================================================== */

footer {
    background-color: black;
    /* O el color de fondo que estés usando */
    padding: 40px 0 20px;
    border-top: 1px solid brown;
    text-align: center;
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* Iconos de redes */
.footer-redes {
    display: flex;
    gap: 20px;
    margin-bottom: 5px;
}

.footer-redes a {
    color: wheat;
    /* El tono café del sitio */
    font-size: 1.2rem;
    transition: opacity 0.3s;
}

.footer-redes a:hover {
    opacity: 0.7;
}

/* Textos */
.footer-copy {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
}

.footer-creadora {
    font-size: 0.75rem;
    color: #999;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
}

.footer-creadora a {
    color: #8d6e63;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

.footer-creadora a:hover {
    color: #5d4037;
    text-decoration: underline;
}

.footer-soporte {
    margin-top: 10px;
    font-size: 0.85rem;
}

.footer-soporte a {
    color: #c48850;
    /* Tono café acorde a tu paleta */
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.footer-soporte a:hover {
    opacity: 1;
    text-decoration: underline;
}

.footer-soporte i {
    margin-right: 5px;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 900px) {

    .detalle-obra,
    .detalle-producto {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .bloque-doble {
        grid-template-columns: 1fr;
    }

    nav ul {
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width: 600px) {
    .logo {
        width: 90px;
    }
}

/* =====================================================
   LUGARES
===================================================== */