/* =======================================================
   MAPA WEB
   style.css
======================================================= */


/* ==========================================
   GOOGLE FONTS
========================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Inter:wght@300;400;500;600&display=swap');


/* ==========================================
   VARIABLES
========================================== */

:root{
    --marfil:#f6f2ea;
    --arena:#d5b998;
    --oscuro:#1f1d1b;

    --fondo:#f3efe8;

    --texto:#2d2926;
    --texto-suave:#5d5148;

    --acento:#8d7157;
}


/* ==========================================
   RESET
========================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;

    background:var(--fondo);

    color:#ffffff;

    overflow-x:hidden;
}

section{
    scroll-margin-top:80px;
}

img{
    max-width:100%;
}


/* =======================================================
   HERO
======================================================= */

.hero{
    position:relative;

    width:100%;
    height:100vh;
    min-height:700px;

    background-image:url("../assets/images/hero.webp");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    overflow:hidden;
}


/* ==========================================
   DEGRADADO HERO
========================================== */

.overlay{
    position:absolute;

    inset:0;

    z-index:2;

    background:linear-gradient(
        90deg,
        rgba(18,18,18,.55) 0%,
        rgba(18,18,18,.30) 28%,
        rgba(18,18,18,.10) 55%,
        rgba(18,18,18,0) 100%
    );

    pointer-events:none;
}


/* =======================================================
   HEADER
======================================================= */

.hero-header{
    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:999;

    padding:28px 0;

    opacity:0;

    animation:menuAppear 1.8s ease forwards;
    animation-delay:.4s;

    transition:
        top .45s ease,
        padding .45s ease;
}


.header-inner{
    position:relative;

    width:92%;
    max-width:1450px;

    margin:auto;

    display:flex;

    align-items:center;
    justify-content:flex-end;

    transition:.45s ease;
}


/* ==========================================
   NAVEGACIÓN ESCRITORIO
========================================== */

.main-nav{
    display:flex;

    align-items:center;

    gap:36px;
}


.main-nav a{
    color:var(--marfil);

    text-decoration:none;
    text-transform:uppercase;

    font-size:.78rem;
    font-weight:400;

    letter-spacing:.18em;

    transition:
        opacity .35s ease,
        color .35s ease;
}


.main-nav a:hover{
    opacity:.6;
}


/* ==========================================
   BOTÓN HAMBURGUESA
========================================== */

.menu-toggle{
    display:none;

    background:none;

    border:0;

    padding:8px;

    cursor:pointer;

    flex-direction:column;

    gap:5px;
}


.menu-toggle span{
    display:block;

    width:25px;
    height:1.5px;

    background:var(--marfil);

    transition:.3s ease;
}


/* ==========================================
   HEADER AL HACER SCROLL
========================================== */

.hero-header.scrolled{
    top:14px;
}


.hero-header.scrolled .header-inner{
    width:88%;

    padding:14px 30px;

    background:rgba(246,242,234,.32);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-radius:45px;

    box-shadow:0 10px 25px rgba(0,0,0,.05);
}


.hero-header.scrolled .main-nav a{
    color:var(--texto);
}


/* =======================================================
   HERO CONTENT
======================================================= */

.hero-content{
    position:relative;

    z-index:15;

    width:100%;
    height:100%;

    max-width:1500px;

    margin:auto;

    padding:0 70px;

    display:flex;

    align-items:center;
}


/* ==========================================
   TEXTO HERO
========================================== */

.hero-text{
    width:520px;

    margin-top:140px;

    opacity:0;

    animation:textAppear 2s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay:1.2s;
}


/* ==========================================
   TÍTULO
========================================== */

.hero-text h1{
    font-family:'Cormorant Garamond',serif;

    font-size:5rem;
    font-weight:400;

    line-height:.92;

    color:var(--marfil);

    margin-bottom:25px;
}


.hero-text h1 span{
    display:block;
}


/* ==========================================
   SUBTÍTULO
========================================== */

.hero-text h2{
    font-family:'Inter',sans-serif;

    font-size:.8rem;
    font-weight:400;

    text-transform:uppercase;

    letter-spacing:.45em;

    color:var(--arena);

    margin-bottom:50px;
}


/* ==========================================
   CITA
========================================== */

.hero-text blockquote{
    max-width:470px;

    font-family:'Cormorant Garamond',serif;

    font-size:2rem;
    font-weight:300;
    font-style:italic;

    line-height:1.8;

    color:var(--marfil);
}


/* ==========================================
   AUTORA
========================================== */

.autor{
    margin-top:22px;
    margin-bottom:70px;

    font-size:.62rem;

    letter-spacing:.25em;

    text-transform:uppercase;

    color:var(--marfil);
}


/* ==========================================
   DESCUBRIR
========================================== */

.discover{
    display:inline-flex;

    align-items:center;

    gap:20px;

    color:var(--marfil);

    text-decoration:none;

    font-family:'Cormorant Garamond',serif;

    font-size:1.5rem;

    opacity:0;

    animation:textAppear 1.5s ease forwards;
    animation-delay:1.8s;
}


.discover span{
    transition:.35s ease;
}


.discover:hover span{
    transform:translateY(8px);
}


/* =======================================================
   MANIFIESTO
======================================================= */

.manifesto{
    background:#f5f1ea;

    color:var(--texto);

    padding:180px 0;
}


.manifesto-inner{
    max-width:820px;

    margin:auto;

    text-align:center;

    padding:0 40px;
}


.manifesto-logo{
    font-size:.8rem;

    letter-spacing:.4em;

    text-transform:uppercase;

    margin-bottom:70px;

    opacity:.5;
}


.manifesto h2{
    font-family:'Cormorant Garamond',serif;

    font-size:4rem;
    font-weight:400;

    margin-bottom:20px;
}


.manifesto span{
    display:block;

    font-size:.8rem;

    letter-spacing:.45em;

    text-transform:uppercase;

    margin-bottom:80px;

    color:var(--acento);
}


.manifesto-text{
    max-width:700px;

    margin:auto;

    font-family:'Cormorant Garamond',serif;

    font-size:2rem;

    line-height:1.8;
}


/* =======================================================
   ETIQUETAS Y LEMAS
======================================================= */

.seccion-label{
    font-family:'Inter',sans-serif !important;

    font-size:.75rem !important;
    font-weight:400;

    letter-spacing:.45em;

    text-transform:uppercase;

    color:var(--acento) !important;

    margin-bottom:35px !important;
}


.lema,
.lema-duo,
.lema-pan{
    display:block;

    margin-top:55px;

    font-family:'Inter',sans-serif;

    font-size:.68rem;

    letter-spacing:.5em;

    text-transform:uppercase;

    color:var(--acento);
}


/* =======================================================
   EL DÚO
======================================================= */

.duo{
    background:#f5f1ea;

    padding:130px 70px 150px;

    color:var(--texto);
}


.duo-inner{
    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1.05fr;

    gap:75px;

    align-items:center;
}


.duo-image{
    overflow:hidden;
}


.duo-image img{
    width:100%;

    display:block;

    aspect-ratio:4/3;

    object-fit:cover;

    filter:grayscale(10%);

    transition:transform .8s ease;
}


.duo-image:hover img{
    transform:scale(1.025);
}


.duo-text{
    max-width:520px;
}


.duo-text h2{
    font-family:'Cormorant Garamond',serif;

    font-size:4.8rem;
    font-weight:400;

    line-height:1;

    margin-bottom:42px;
}


.duo-text p{
    font-family:'Cormorant Garamond',serif;

    font-size:1.65rem;

    line-height:1.65;

    color:#4a4038;

    margin-bottom:28px;
}


/* =======================================================
   MUJERES DEL 27
======================================================= */

.poetas{
    background:#f5f1ea;

    color:var(--texto);

    padding:160px 70px;
}


.poetas-header{
    max-width:900px;

    margin:0 auto 70px;

    padding-top:35px;

    text-align:center;
}


.poetas-header p{
    font-size:.68rem;

    letter-spacing:.5em;

    text-transform:uppercase;

    color:#a18168;

    margin-bottom:35px;
}


.poetas-header h2{
    font-family:'Cormorant Garamond',serif;

    font-size:4.5rem;
    font-weight:400;

    margin-bottom:30px;
}


.poetas-header span{
    font-family:'Cormorant Garamond',serif;

    font-size:1.8rem;

    font-style:italic;

    line-height:1.6;

    color:var(--texto-suave);
}


/* ==========================================
   GRID POETAS
========================================== */

.poetas-grid{
    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:80px 45px;
}


.poeta{
    text-align:center;

    opacity:0;

    transform:translateY(50px);

    transition:
        opacity 1s ease,
        transform 1s ease;
}


.poeta.visible{
    opacity:1;

    transform:translateY(0);
}


/* ==========================================
   FOTO + CITA
========================================== */

.foto-poeta{
    position:relative;

    overflow:hidden;
}


.foto-poeta img{
    width:100%;

    display:block;

    aspect-ratio:3/4;

    object-fit:cover;

    filter:grayscale(100%);

    transition:
        transform .8s cubic-bezier(.22,1,.36,1),
        filter .8s ease;
}


.cita-poeta{
    position:absolute;

    inset:0;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:45px;

    background:rgba(31,29,27,.78);

    color:var(--marfil);

    text-align:center;

    font-family:'Cormorant Garamond',serif;

    font-size:1.55rem;
    font-weight:300;
    font-style:italic;

    line-height:1.55;

    opacity:0;

    transform:translateY(12px);

    transition:
        opacity .55s ease,
        transform .7s cubic-bezier(.22,1,.36,1);

    pointer-events:none;
}


.foto-poeta:hover img{
    transform:scale(1.035);

    filter:grayscale(35%);
}


.foto-poeta:hover .cita-poeta{
    opacity:1;

    transform:translateY(0);
}


/* ==========================================
   DATOS POETA
========================================== */

.poeta h3{
    font-family:'Cormorant Garamond',serif;

    font-size:2.1rem;
    font-weight:500;

    margin-top:26px;
    margin-bottom:10px;
}


.fecha{
    font-size:.7rem;

    letter-spacing:.18em;

    color:var(--acento);
}


.poeta p{
    max-width:300px;

    margin:14px auto 0;

    font-size:1rem;

    line-height:1.65;

    color:#6b625b;
}


/* ==========================================
   FRASE FINAL
========================================== */

.poetas-final{
    max-width:800px;

    margin:120px auto 0;

    text-align:center;
}


.poetas-final p{
    font-family:'Cormorant Garamond',serif;

    font-size:2.4rem;

    font-style:italic;

    line-height:1.6;

    color:var(--texto-suave);
}


/* =======================================================
   PROYECTO MUSICAL
======================================================= */

.proyecto-musical{
    background:#e8dfd4;

    color:var(--texto);

    padding:150px 70px;
}


.musical-inner{
    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:100px;

    align-items:center;
}


.musical-text{
    max-width:560px;
}


.musical-text h2{
    font-family:'Cormorant Garamond',serif;

    font-size:4.8rem;
    font-weight:400;

    line-height:.95;

    margin-bottom:45px;
}


.musical-text p{
    font-family:'Cormorant Garamond',serif;

    font-size:1.65rem;

    line-height:1.7;

    color:#4a4038;

    margin-bottom:28px;
}


/* ==========================================
   FOTO PROYECTO MUSICAL
========================================== */

.musical-image{
    position:relative;

    overflow:hidden;
}


.musical-image img{
    width:100%;

    display:block;

    filter:
        grayscale(18%)
        contrast(1.04)
        brightness(.92);

    transform:scale(1.01);

    transition:
        transform 1.2s cubic-bezier(.22,1,.36,1),
        filter 1.2s ease;
}


.musical-image::after{
    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        rgba(31,29,27,.03) 0%,
        rgba(31,29,27,.05) 55%,
        rgba(31,29,27,.25) 100%
    );

    pointer-events:none;
}


.musical-image:hover img{
    transform:scale(1.035);

    filter:
        grayscale(5%)
        contrast(1.03)
        brightness(.96);
}


.musical-caption{
    position:absolute;

    left:25px;
    bottom:22px;

    z-index:2;

    font-family:'Inter',sans-serif;

    font-size:.62rem;

    letter-spacing:.28em;

    text-transform:uppercase;

    color:var(--marfil);

    opacity:.85;
}


/* =======================================================
   PAN DE PUEBLO
======================================================= */

.pan{
    background:#efe7db;

    padding:160px 70px;

    color:var(--texto);
}


.pan-inner{
    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;
}


.pan-image{
    overflow:hidden;
}


.pan-image img{
    width:100%;

    display:block;
}


.pan-text h2{
    font-family:'Cormorant Garamond',serif;

    font-size:5rem;
    font-weight:400;

    margin-bottom:40px;
}


.pan-text p{
    font-family:'Cormorant Garamond',serif;

    font-size:1.8rem;

    line-height:1.7;

    color:#4a4038;

    margin-bottom:30px;
}


/* ==========================================
   SPOTIFY + YOUTUBE
========================================== */

.pan-enlaces{
    display:flex;

    align-items:center;

    gap:35px;

    margin-top:38px;
}


.pan-enlaces a{
    display:inline-flex;

    align-items:center;

    gap:10px;

    padding-bottom:7px;

    color:#4a4038;

    font-family:'Inter',sans-serif;

    font-size:.72rem;
    font-weight:500;

    letter-spacing:.16em;

    text-transform:uppercase;

    text-decoration:none;

    border-bottom:1px solid rgba(74,64,56,.35);

    transition:
        opacity .3s ease,
        border-color .3s ease;
}


.pan-enlaces a span{
    font-size:1rem;

    transition:transform .3s ease;
}


.pan-enlaces a:hover{
    opacity:.65;

    border-color:#4a4038;
}


.pan-enlaces a:hover span{
    transform:translate(3px,-3px);
}


/* =======================================================
   AGENDA
======================================================= */

.agenda{
    background:var(--oscuro);

    color:var(--marfil);

    padding:150px 70px;
}


.agenda-inner{
    max-width:1200px;

    margin:auto;
}


.agenda-header{
    max-width:700px;

    margin-bottom:90px;
}


.agenda-header .seccion-label{
    color:var(--arena) !important;
}


.agenda-header h2{
    font-family:'Cormorant Garamond',serif;

    font-size:5rem;
    font-weight:400;

    line-height:1;

    margin-bottom:30px;

    color:var(--marfil);
}


.agenda-intro{
    max-width:570px;

    font-family:'Cormorant Garamond',serif;

    font-size:1.65rem;

    line-height:1.6;

    color:rgba(246,242,234,.72);
}


/* ==========================================
   LISTADO AGENDA
========================================== */

.agenda-list{
    border-top:1px solid rgba(246,242,234,.20);
}


.agenda-event{
    display:grid;

    grid-template-columns:150px 1fr auto;

    gap:45px;

    align-items:center;

    padding:35px 0;

    border-bottom:1px solid rgba(246,242,234,.20);

    transition:
        padding .35s ease,
        background .35s ease;
}


.agenda-event:hover{
    padding-left:18px;
    padding-right:18px;

    background:rgba(246,242,234,.035);
}


.agenda-date{
    display:flex;

    align-items:baseline;

    gap:12px;
}


.agenda-day{
    font-family:'Cormorant Garamond',serif;

    font-size:3.4rem;
    font-weight:400;

    line-height:1;

    color:var(--marfil);
}


.agenda-month{
    font-size:.67rem;
    font-weight:500;

    letter-spacing:.25em;

    color:var(--arena);
}


.agenda-info h3{
    font-family:'Cormorant Garamond',serif;

    font-size:2rem;
    font-weight:400;

    margin-bottom:8px;

    color:var(--marfil);
}


.agenda-info p{
    font-size:.72rem;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:rgba(246,242,234,.55);
}


.agenda-link,
.agenda-status{
    font-family:'Inter',sans-serif;

    font-size:.68rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    text-decoration:none;

    color:var(--arena);
}


.agenda-link{
    padding-bottom:5px;

    border-bottom:1px solid rgba(213,185,152,.45);

    transition:.3s ease;
}


.agenda-link:hover{
    border-color:var(--arena);
}


.agenda-note{
    margin-top:45px;

    font-family:'Cormorant Garamond',serif;

    font-size:1.25rem;

    font-style:italic;

    color:rgba(246,242,234,.5);
}


/* =======================================================
   PRENSA
======================================================= */

.prensa{
    background:#f5f1ea;

    color:var(--texto);

    padding:150px 70px;
}


.prensa-inner{
    max-width:1200px;

    margin:auto;
}


.prensa-header{
    max-width:720px;

    margin-bottom:85px;
}


.prensa-header h2{
    font-family:'Cormorant Garamond',serif;

    font-size:5rem;
    font-weight:400;

    line-height:1;

    margin-bottom:28px;
}


.prensa-intro{
    font-family:'Cormorant Garamond',serif;

    font-size:1.65rem;

    line-height:1.6;

    color:var(--texto-suave);
}


/* ==========================================
   PRENSA DESTACADA
========================================== */

.prensa-destacada{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-bottom:90px;
}


.prensa-card{
    position:relative;

    min-height:360px;

    padding:38px;

    display:flex;

    flex-direction:column;

    background:#ebe2d6;

    transition:
        transform .45s ease,
        background .45s ease;
}


.prensa-card:hover{
    transform:translateY(-7px);

    background:#e4d8ca;
}


.prensa-medio{
    font-family:'Inter',sans-serif;

    font-size:.65rem;
    font-weight:500;

    letter-spacing:.28em;

    text-transform:uppercase;

    color:var(--acento);
}


.prensa-card h3{
    font-family:'Cormorant Garamond',serif;

    font-size:2.3rem;
    font-weight:400;

    line-height:1.1;

    margin-top:40px;
    margin-bottom:25px;
}


.prensa-card p{
    font-family:'Cormorant Garamond',serif;

    font-size:1.35rem;

    line-height:1.55;

    color:#5b5048;
}


.prensa-link{
    width:max-content;

    margin-top:auto;

    padding-top:35px;

    color:var(--texto);

    text-decoration:none;

    font-size:.68rem;
    font-weight:500;

    letter-spacing:.18em;

    text-transform:uppercase;

    border-bottom:1px solid rgba(45,41,38,.35);
}


/* ==========================================
   PRENSA SECUNDARIA
========================================== */

.prensa-lista{
    border-top:1px solid rgba(45,41,38,.18);
}


.prensa-item{
    display:grid;

    grid-template-columns:180px 1fr auto;

    gap:35px;

    align-items:center;

    padding:30px 0;

    border-bottom:1px solid rgba(45,41,38,.18);
}


.prensa-item h3{
    font-family:'Cormorant Garamond',serif;

    font-size:1.7rem;
    font-weight:400;
}


.prensa-item a{
    color:var(--texto);

    text-decoration:none;

    font-size:.66rem;
    font-weight:500;

    letter-spacing:.16em;

    text-transform:uppercase;
}


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

.contacto{
    width:100%;

    background:#e8dfd4;

    color:var(--texto);

    padding:150px 70px 90px;
}


.contacto-inner{
    width:100%;

    max-width:1200px;

    margin:0 auto;
}


.contacto-header{
    max-width:700px;

    margin-bottom:90px;
}


.contacto-header h2{
    font-family:'Cormorant Garamond',serif;

    font-size:5rem;
    font-weight:400;

    line-height:1;

    margin-bottom:30px;

    color:var(--texto);
}


.contacto-intro{
    max-width:560px;

    font-family:'Cormorant Garamond',serif;

    font-size:1.7rem;

    line-height:1.6;

    color:var(--texto-suave);
}


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

.contacto-grid{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:50px;

    padding:50px 0;

    border-top:1px solid rgba(45,41,38,.18);
    border-bottom:1px solid rgba(45,41,38,.18);
}


.contacto-bloque{
    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:15px;
}


.contacto-label{
    display:block;

    font-family:'Inter',sans-serif;

    font-size:.64rem;

    letter-spacing:.25em;

    text-transform:uppercase;

    color:var(--acento);
}


.contacto-bloque a{
    display:block;

    width:max-content;
    max-width:100%;

    color:var(--texto);

    font-family:'Cormorant Garamond',serif;

    font-size:1.6rem;

    line-height:1.35;

    text-decoration:none;

    transition:opacity .3s ease;
}


.contacto-bloque a:hover{
    opacity:.55;
}


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

.contacto-final{
    margin-top:90px;

    text-align:center;
}


.contacto-final p{
    margin:0 0 15px;

    font-family:'Cormorant Garamond',serif;

    font-size:3.2rem;
    font-weight:400;

    letter-spacing:.15em;

    color:var(--texto);
}


.contacto-final span{
    display:block;

    font-family:'Inter',sans-serif;

    font-size:.65rem;

    letter-spacing:.42em;

    text-transform:uppercase;

    color:var(--acento);
}


/* =======================================================
   ANIMACIONES
======================================================= */

@keyframes menuAppear{

    from{
        opacity:0;

        transform:translateY(-20px);
    }

    to{
        opacity:1;

        transform:translateY(0);
    }

}


@keyframes textAppear{

    from{
        opacity:0;

        transform:translateY(45px);
    }

    to{
        opacity:1;

        transform:translateY(0);
    }

}


/* ==========================================
   VELADURA INICIAL HERO
========================================== */

.hero::after{
    content:"";

    position:absolute;

    inset:0;

    z-index:10;

    background:var(--marfil);

    animation:revealPhoto 1.2s ease forwards;

    pointer-events:none;
}


@keyframes revealPhoto{

    from{
        opacity:1;

        filter:blur(8px);
    }

    to{
        opacity:0;

        filter:blur(0);

        visibility:hidden;
    }

}


/* =======================================================
   TABLET
======================================================= */

@media(max-width:1100px){

    .hero-content{
        padding:0 40px;
    }


    .hero-text{
        width:480px;
    }


    .hero-text h1{
        font-size:4rem;
    }


    .hero-text blockquote{
        font-size:1.7rem;
    }

}


/* =======================================================
   MÓVIL
======================================================= */

@media(max-width:900px){


    /* ======================================
       HERO
    ====================================== */

    .hero{
        width:100%;

        height:100svh;
        min-height:100svh;

        background-position:45% center;
    }


    /* ======================================
       HEADER MÓVIL
    ====================================== */

    .hero-header,
    .hero-header.scrolled{
        position:fixed;

        top:0;
        left:0;

        width:100%;

        padding:20px;

        background:transparent !important;

        box-shadow:none !important;

        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;

        border-radius:0 !important;
    }


    .header-inner,
    .hero-header.scrolled .header-inner{
        width:100% !important;
        max-width:none;

        margin:0;

        padding:0 !important;

        display:flex;

        align-items:center;
        justify-content:flex-end;

        position:relative;

        background:transparent !important;

        box-shadow:none !important;

        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;

        border-radius:0 !important;
    }


    /* ======================================
       HAMBURGUESA
    ====================================== */

    .menu-toggle{
        display:flex !important;

        position:relative;

        width:42px;
        height:42px;

        padding:8px;

        margin:0;

        border:0;

        border-radius:50%;

        background:rgba(31,29,27,.35);

        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);

        align-items:center;
        justify-content:center;

        flex-direction:column;

        gap:5px;

        cursor:pointer;

        z-index:1100;
    }


    .menu-toggle span{
        width:22px;
        height:1.5px;

        background:var(--marfil);
    }


    /* ======================================
       MENÚ CERRADO
    ====================================== */

    .main-nav{
        display:none !important;
    }


    /* ======================================
       MENÚ ABIERTO
    ====================================== */

    .main-nav.active{
        display:flex !important;

        flex-direction:column !important;

        align-items:stretch !important;

        justify-content:flex-start !important;

        position:absolute;

        top:calc(100% + 14px);

        right:0;
        left:auto;

        width:250px;

        height:auto !important;

        margin:0 !important;

        padding:18px 24px !important;

        gap:0 !important;

        background:rgba(31,29,27,.96) !important;

        border:1px solid rgba(246,242,234,.20);

        border-radius:22px;

        box-shadow:0 15px 40px rgba(0,0,0,.25);

        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);

        opacity:1 !important;

        visibility:visible !important;

        pointer-events:auto !important;

        transform:none !important;

        z-index:1050;
    }


    .main-nav.active a{
        display:block !important;

        width:100% !important;

        margin:0 !important;

        padding:14px 0 !important;

        color:var(--marfil) !important;

        font-family:'Inter',sans-serif;

        font-size:.76rem;
        font-weight:500;

        letter-spacing:.14em;

        line-height:1.4;

        text-align:center;

        text-transform:uppercase;

        white-space:nowrap;

        text-decoration:none;
    }


    /* ======================================
       HERO CONTENT
    ====================================== */

    .hero-content{
        position:absolute;

        inset:0;

        width:100%;
        height:100%;

        max-width:none;

        margin:0;

        padding:0 25px;

        display:block;

        z-index:15;
    }


    .hero-text{
        position:absolute;

        inset:0;

        width:100%;

        max-width:none;

        margin:0;

        padding:0;

        text-align:center;

        z-index:2;
    }


    /* ======================================
       VELO HERO
    ====================================== */

    .hero-text::before{
        content:"";

        position:absolute;

        z-index:-1;

        top:6%;
        bottom:8%;

        left:-40px;
        right:-40px;

        background:linear-gradient(
            180deg,
            rgba(31,29,27,0) 0%,
            rgba(31,29,27,.12) 18%,
            rgba(31,29,27,.25) 45%,
            rgba(31,29,27,.12) 75%,
            rgba(31,29,27,0) 100%
        );

        pointer-events:none;
    }


    /* ======================================
       TÍTULO HERO
    ====================================== */

    .hero-text h1{
        position:absolute;

        top:16%;

        left:20px;
        right:20px;

        margin:0;

        font-size:clamp(2.8rem,11vw,4rem);

        line-height:.92;
    }


    .hero-text h2{
        position:absolute;

        top:calc(16% + 88px);

        left:20px;
        right:20px;

        margin:0;

        font-size:.62rem;

        letter-spacing:.32em;

        line-height:1.5;
    }


    /* ======================================
       CITA HERO
    ====================================== */

    .hero-text blockquote{
        position:absolute;

        left:20px;
        right:20px;

        bottom:20%;

        max-width:320px;

        margin:0 auto;

        font-size:1.3rem;

        line-height:1.5;
    }


    .hero-text .autor{
        position:absolute;

        left:20px;
        right:20px;

        bottom:12%;

        margin:0;

        font-size:.62rem;
    }


    .hero-text .discover{
        position:absolute;

        left:20px;
        right:20px;

        bottom:4%;

        width:max-content;

        margin:auto;

        font-size:1.3rem;

        gap:15px;
    }


    /* ======================================
       MANIFIESTO
    ====================================== */

    .manifesto{
        padding:110px 0;
    }


    .manifesto-inner{
        padding:0 30px;
    }


    .manifesto-logo{
        margin-bottom:50px;
    }


    .manifesto h2{
        font-size:3rem;
    }


    .manifesto span{
        margin-bottom:55px;
    }


    .manifesto-text{
        font-size:1.6rem;

        line-height:1.7;
    }


    /* ======================================
       SECCIONES GENERALES
    ====================================== */

    .duo,
    .poetas,
    .proyecto-musical,
    .pan,
    .agenda,
    .prensa{
        padding:100px 30px;
    }


    /* ======================================
       DÚO
    ====================================== */

    .duo-inner{
        grid-template-columns:1fr;

        gap:55px;
    }


    .duo-image{
        order:1;
    }


    .duo-text{
        order:2;

        max-width:none;
    }


    .duo-text h2{
        font-size:3.5rem;

        margin-bottom:30px;
    }


    .duo-text p{
        font-size:1.45rem;

        line-height:1.6;
    }


    /* ======================================
       POETAS
    ====================================== */

    .poetas-header{
        margin-bottom:70px;
    }


    .poetas-header h2{
        font-size:3rem;
    }


    .poetas-header span{
        font-size:1.5rem;
    }


    .poetas-grid{
        grid-template-columns:1fr;

        gap:60px;
    }


    .cita-poeta{
        display:none;
    }


    .foto-poeta:hover img{
        transform:none;

        filter:grayscale(100%);
    }


    .poetas-final{
        margin-top:90px;
    }


    .poetas-final p{
        font-size:2rem;
    }


    /* ======================================
       PROYECTO MUSICAL
    ====================================== */

    .musical-inner{
        grid-template-columns:1fr;

        gap:55px;
    }


    .musical-text{
        max-width:none;
    }


    .musical-text h2{
        font-size:3.1rem;
    }


    .musical-text p{
        font-size:1.5rem;
    }


    .musical-caption{
        left:18px;
        bottom:16px;

        font-size:.55rem;

        letter-spacing:.22em;
    }


    .musical-image:hover img{
        transform:none;
    }


    /* ======================================
       PAN DE PUEBLO
    ====================================== */

    .pan-inner{
        grid-template-columns:1fr;

        gap:55px;
    }


    .pan-text h2{
        font-size:3.5rem;
    }


    .pan-text p{
        font-size:1.55rem;
    }


    .pan-enlaces{
        flex-direction:column;

        align-items:flex-start;

        gap:20px;

        margin-top:32px;
    }


    /* ======================================
       AGENDA
    ====================================== */

    .agenda-header{
        margin-bottom:60px;
    }


    .agenda-header h2{
        font-size:3.6rem;
    }


    .agenda-intro{
        font-size:1.45rem;
    }


    .agenda-event{
        grid-template-columns:75px 1fr;

        gap:22px;

        padding:28px 0;
    }


    .agenda-event:hover{
        padding-left:0;
        padding-right:0;

        background:transparent;
    }


    .agenda-day{
        font-size:2.7rem;
    }


    .agenda-month{
        font-size:.58rem;
    }


    .agenda-info h3{
        font-size:1.7rem;
    }


    .agenda-action{
        grid-column:2;

        margin-top:-10px;
    }


    /* ======================================
       PRENSA
    ====================================== */

    .prensa-header{
        margin-bottom:60px;
    }


    .prensa-header h2{
        font-size:3.6rem;
    }


    .prensa-intro{
        font-size:1.45rem;
    }


    .prensa-destacada{
        grid-template-columns:1fr;

        gap:22px;

        margin-bottom:70px;
    }


    .prensa-card{
        min-height:300px;

        padding:30px;
    }


    .prensa-card:hover{
        transform:none;
    }


    .prensa-item{
        grid-template-columns:1fr;

        gap:12px;

        padding:27px 0;
    }


    .prensa-item h3{
        font-size:1.5rem;
    }


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

    .contacto{
        padding:100px 25px 70px;
    }


    .contacto-header{
        margin-bottom:60px;
    }


    .contacto-header h2{
        font-size:3.6rem;
    }


    .contacto-intro{
        font-size:1.45rem;
    }


    .contacto-grid{
        grid-template-columns:1fr;

        gap:35px;

        padding:40px 0;
    }


    .contacto-bloque a{
        font-size:1.4rem;
    }


    .contacto-final{
        margin-top:65px;
    }


    .contacto-final p{
        font-size:2.6rem;
    }


    /* ======================================
       LEMAS
    ====================================== */

    .lema,
    .lema-duo,
    .lema-pan{
        letter-spacing:.32em;

        line-height:1.8;
    }

}


/* =======================================================
   MÓVILES PEQUEÑOS
======================================================= */

@media(max-width:480px){

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


    .hero-text h2{
        top:calc(16% + 82px);

        font-size:.58rem;

        letter-spacing:.27em;
    }


    .hero-text blockquote{
        max-width:285px;

        font-size:1.2rem;
    }


    .main-nav.active{
        width:min(250px, calc(100vw - 40px));
    }


    .duo,
    .poetas,
    .proyecto-musical,
    .pan,
    .agenda,
    .prensa{
        padding-left:24px;
        padding-right:24px;
    }


    .contacto{
        padding-left:24px;
        padding-right:24px;
    }


    .contacto-bloque a{
        overflow-wrap:anywhere;
    }


    .contacto-final span{
        letter-spacing:.28em;

        line-height:1.8;
    }

}

/* =======================================================
   VOLVER A LA PORTADA
======================================================= */

.back-to-top{
    position:fixed;

    right:30px;
    bottom:30px;

    z-index:9999;

    width:50px;
    height:50px;

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

    border-radius:50%;

    background:#1f1d1b;

    color:#f6f2ea;

    font-size:1.5rem;

    text-decoration:none;

    opacity:0;
    visibility:hidden;

    transform:translateY(15px);

    transition:.35s ease;
}

.back-to-top.visible{
    opacity:1;
    visibility:visible;

    transform:translateY(0);
}


.back-to-top.visible{
    opacity:1;
    visibility:visible;

    transform:translateY(0);
}


.back-to-top:hover{
    background:rgba(31,29,27,.9);

    transform:translateY(-3px);
}


/* MÓVIL */

@media(max-width:900px){

    .back-to-top{
        right:20px;
        bottom:20px;

        width:44px;
        height:44px;

        font-size:1.25rem;
    }

}

/* =======================================================
   BOTÓN VOLVER A LA PORTADA
======================================================= */

.back-to-top{
    position:fixed;
    right:30px;
    bottom:30px;

    width:52px;
    height:52px;

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

    z-index:99999;

    background:#1f1d1b;
    color:#f6f2ea;

    border:1px solid rgba(246,242,234,.3);
    border-radius:50%;

    font-family:'Cormorant Garamond',serif;
    font-size:1.6rem;

    text-decoration:none;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

    cursor:pointer;

    transition:
        transform .3s ease,
        background .3s ease;
}

.back-to-top:hover{
    transform:translateY(-4px);
    background:#8d7157;
}

@media(max-width:900px){

    .back-to-top{
        right:20px;
        bottom:20px;

        width:46px;
        height:46px;

        font-size:1.4rem;
    }

}