/* style.css */

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

html{
    scroll-behavior:smooth;
}

body{
    background:#f6f3ec;
    color:#1d1d1d;

    font-family:'Cormorant Garamond', serif;

    overflow-x:hidden;
}

/* HEADER */

.top-header{

    width:100%;

    background:#fdfdfd;

    border-bottom:1px solid #ddd;

    padding:25px 5%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;
}

.logo-area{
    display:flex;
    align-items:center;
    gap:20px;
}

.logo-box{

    width:80px;
    height:80px;

    background:#8c2f10;

    color:white;

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

    font-size:2rem;

    font-family:'Cinzel', serif;

    font-weight:bold;
}

.logo-text h2{

    font-size:2.2rem;

    font-family:'Cinzel', serif;

    font-weight:500;

    line-height:1;
}

.logo-text p{

    margin-top:5px;

    letter-spacing:3px;

    font-size:0.8rem;

    color:#666;
}

.search-box input{

    width:320px;

    max-width:100%;

    padding:14px 20px;

    border:1px solid #ddd;

    background:#fafafa;

    font-size:1rem;

    font-family:'Cormorant Garamond', serif;
}

/* NAVBAR */

.navbar{

    background:white;

    border-bottom:1px solid #ddd;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:50px;

    padding:18px;
}

.navbar a{

    text-decoration:none;

    color:#222;

    font-size:1.1rem;

    letter-spacing:1px;

    transition:0.3s;
}

.navbar a:hover{

    color:#8c2f10;
}

/* HERO */

.hero{

     min-height:100vh;
       padding:
    160px 20px
    120px;

    height:auto;

    background:
    linear-gradient(rgba(0,0,0,0.45),
    rgba(0,0,0,0.45)),
    url('https://images.unsplash.com/photo-1501004318641-b39e6451bec6?q=80&w=1600&auto=format&fit=crop');

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

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    position:relative;
}

.hero-content{

    width:min(900px,90%);

    color:white;
}

.mini-text{

    letter-spacing:4px;

    font-size:0.9rem;

    color:#d8c6a4;
}

.hero h1{

    font-family:'Cinzel', serif;

    font-size:clamp(3rem,8vw,6rem);

    line-height:1.1;

    margin:20px 0;
}

.hero-description{

    font-size:1.3rem;

    max-width:700px;

    margin:auto;

    color:#ececec;
}

.hero-button{

    display:inline-block;

    margin-top:40px;

    padding:15px 35px;

    border:1px solid #d8c6a4;

    color:white;

    text-decoration:none;

    letter-spacing:2px;

    transition:0.3s;
}

.hero-button:hover{

    background:#d8c6a4;

    color:black;
}

/* MAIN */

.main-container{

    width:min(1200px,92%);

    margin:auto;
}

/* RESEARCH CARD */

.research-card{

    background:white;

    margin-top:-90px;

    position:relative;

    z-index:10;

    padding:70px;

    box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.section-tag{

    color:#8c2f10;

    letter-spacing:3px;

    font-size:0.85rem;
}

.research-card h2{

    font-size:clamp(2rem,5vw,4rem);

    line-height:1.2;

    margin:25px 0;

    font-family:'Cinzel', serif;

    font-weight:500;
}

.gold-line{

    width:120px;
    height:2px;

    background:#b79057;

    margin:30px 0;
}

.research-text{

    font-size:1.4rem;

    color:#444;
}

/* INDEX */

.encyclopedia-index{

    margin-top:100px;
}

.title-row{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:50px;
}

.line{

    flex:1;

    height:1px;

    background:#ccb78c;
}

.title-row h3{

    font-size:1rem;

    letter-spacing:4px;
}

.index-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:25px;
}

.index-card{

    background:white;

    padding:40px;

    border:1px solid #ddd;

    text-decoration:none;

    color:#111;

    transition:0.4s;
}

.index-card:hover{

    transform:translateY(-8px);

    border-color:#8c2f10;
}

.index-card span{

    color:#8c2f10;

    letter-spacing:2px;

    font-size:0.8rem;
}

.index-card h4{

    margin-top:15px;

    font-size:2rem;

    font-weight:500;
}

/* ARTICLES */

.article-section{

    margin-top:130px;
}

.article-header p{

    color:#8c2f10;

    letter-spacing:3px;

    font-size:0.8rem;
}

.article-header h2{

    margin-top:10px;

    font-size:clamp(2.5rem,6vw,5rem);

    line-height:1;

    font-family:'Cinzel', serif;

    font-weight:500;
}

.article-body{

    margin-top:50px;

    background:white;

    padding:60px;

    border-left:4px solid #8c2f10;

    box-shadow:0 10px 40px rgba(0,0,0,0.05);
}

.article-body p{

    font-size:1.4rem;

    line-height:1.8;
}

.dropcap:first-letter{

    float:left;

    font-size:6rem;

    line-height:0.9;

    margin-right:15px;

    color:#8c2f10;

    font-family:'Cinzel', serif;
}

blockquote{

    margin:40px 0;

    padding:35px;

    background:#f7f2e7;

    border-left:4px solid #b79057;

    font-size:1.5rem;

    font-style:italic;
}

/* SCIENCE BOX */

.science-box{

    background:#f8f4eb;

    border:1px solid #ddd;

    padding:35px;

    margin-bottom:40px;
}

.science-box h4{

    font-size:2rem;

    margin-bottom:10px;

    color:#8c2f10;
}

/* NPK */

.npk-list{

    margin-left:30px;

    margin-bottom:30px;
}

.npk-list li{

    font-size:1.5rem;

    margin:15px 0;
}

/* COMPARISON */

.comparison-grid{

    margin-top:50px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:30px;
}

.comparison-card{

    background:white;

    padding:45px;

    box-shadow:0 10px 40px rgba(0,0,0,0.05);

    border-top:5px solid;
}

.industrial{

    border-color:#7f7f7f;
}

.organic{

    border-color:#2d4c31;
}

.comparison-card h3{

    font-size:2.5rem;

    margin-bottom:30px;

    font-family:'Cinzel', serif;
}

.comparison-card li{

    margin:18px 0;

    font-size:1.3rem;
}

/* FOOTER */

footer{

    margin-top:120px;

    background:#1f1f1f;

    color:#ddd;

    text-align:center;

    padding:50px 20px;

    letter-spacing:2px;
}

/* MOBILE */

@media(max-width:768px){

    .top-header{

        justify-content:center;

        text-align:center;
    }

    .logo-area{

        flex-direction:column;
    }

    .logo-text h2{

        font-size:1.6rem;
    }

    .hero{

        height:90vh;
    }

    .research-card{

        padding:35px;
    }

    .article-body{

        padding:30px;
    }

    .article-body p{

        font-size:1.2rem;
    }

}
/* =========================================
   NUEVAS PÁGINAS DE ARTÍCULOS
========================================= */

/* HERO DE ARTÍCULOS */

.article-hero{
    height:70vh;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    overflow:hidden;
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.45);
}

.hero-center{
    position:relative;
    z-index:2;
    color:white;
}

.hero-center p{
    letter-spacing:5px;
    margin-bottom:20px;
    color:#d7c3a3;
}

.hero-center h1{
    font-size:clamp(3rem,8vw,6rem);
    line-height:1;
    font-family:'Cinzel', serif;
}

/* FONDOS */

.ecosistema-hero{
    background:
    linear-gradient(rgba(0,0,0,0.45),
    rgba(0,0,0,0.45)),
    url('https://images.unsplash.com/photo-1464226184884-fa280b87c399?q=80&w=1600&auto=format&fit=crop');

    background-size:cover;
    background-position:center;
}

.microbiologia-hero{
    background:
    linear-gradient(rgba(0,0,0,0.45),
    rgba(0,0,0,0.45)),
    url('https://images.unsplash.com/photo-1501004318641-b39e6451bec6?q=80&w=1600&auto=format&fit=crop');

    background-size:cover;
    background-position:center;
}

.nutricion-hero{
    background:
    linear-gradient(rgba(0,0,0,0.45),
    rgba(0,0,0,0.45)),
    url('https://images.unsplash.com/photo-1471193945509-9ad0617afabf?q=80&w=1600&auto=format&fit=crop');

    background-size:cover;
    background-position:center;
}

.comparacion-hero{
    background:
    linear-gradient(rgba(0,0,0,0.55),
    rgba(0,0,0,0.55)),
    url('https://images.unsplash.com/photo-1464226184884-fa280b87c399?q=80&w=1600&auto=format&fit=crop');

    background-size:cover;
    background-position:center;
}

/* CONTENIDO */

.article-container{
    width:min(1100px,92%);
    margin:auto;
}

.article-content{
    background:white;
    margin-top:-80px;
    position:relative;
    z-index:5;
    padding:70px;
    box-shadow:0 20px 60px rgba(0,0,0,0.08);
}

.article-content h2{
    font-size:clamp(2rem,5vw,4rem);
    margin-bottom:30px;
    font-family:'Cinzel', serif;
}

.article-content p{
    font-size:1.4rem;
    line-height:1.8;
}

/* DROP CAP */

.dropcap:first-letter{
    float:left;
    font-size:6rem;
    line-height:0.9;
    margin-right:15px;
    color:#8c2f10;
    font-family:'Cinzel', serif;
}

/* BLOCKQUOTE */

blockquote{
    margin:50px 0;
    padding:40px;
    background:#f7f2e8;
    border-left:4px solid #b8925d;
    font-size:1.5rem;
    font-style:italic;
}

/* CAJAS */

.science-box,
.npk-card{
    background:#faf7f0;
    border:1px solid #e1d7c4;
    padding:35px;
    margin:40px 0;
}

.science-box h3,
.npk-card h3{
    font-size:2rem;
    margin-bottom:15px;
    color:#8c2f10;
}

/* COMPARACIÓN */

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

.comparison-card{
    background:white;
    padding:45px;
    border-top:5px solid;
    box-shadow:0 10px 40px rgba(0,0,0,0.05);
}

.industrial{
    border-color:#777;
}

.organic{
    border-color:#2d4c31;
}

.comparison-card h3{
    font-size:2.3rem;
    margin-bottom:20px;
}

.comparison-card li{
    margin:15px 0;
    font-size:1.3rem;
}

/* BOTÓN */

.back-button{
    display:inline-block;
    margin-top:60px;
    padding:16px 32px;
    background:#8c2f10;
    color:white;
    text-decoration:none;
    letter-spacing:2px;
}

.back-button:hover{
    background:#5f1f0a;
}
/* ANIMACIONES */

.article-content,
.science-box,
.npk-card,
.comparison-card{

    opacity:0;
    transform:translateY(40px);
    transition:all 1s ease;
}

.visible{
    opacity:1 !important;
    transform:translateY(0px) !important;
}
/* =====================================================
   PULIDO VISUAL PREMIUM
===================================================== */

/* BODY */

body{

    background:
    linear-gradient(
    to bottom,
    #f8f5ef,
    #f3eee4
    );

    background-attachment:fixed;
}

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

.top-header{

    position:sticky;

    top:0;

    z-index:999;

    backdrop-filter:blur(12px);

    background:rgba(255,255,255,0.92);

    box-shadow:0 4px 20px rgba(0,0,0,0.04);
}

/* LOGO */

.logo-box{

    box-shadow:
    0 10px 30px rgba(140,47,16,0.25);

    transition:0.4s;
}

.logo-box:hover{

    transform:rotate(-3deg) scale(1.05);
}

/* =====================================================
   NAVBAR
===================================================== */

.navbar{

    position:sticky;

    top:110px;

    z-index:998;

    backdrop-filter:blur(10px);

    background:rgba(255,255,255,0.94);

    box-shadow:0 6px 25px rgba(0,0,0,0.04);
}

.navbar a{

    position:relative;

    padding-bottom:6px;
}

.navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0%;

    height:2px;

    background:#8c2f10;

    transition:0.4s;
}

.navbar a:hover::after{

    width:100%;
}

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

.hero{

    overflow:hidden;
}

.hero::before{

    content:"";

    position:absolute;

    width:120%;

    height:120%;

    background:
    radial-gradient(
    rgba(255,255,255,0.08),
    transparent
    );

    animation:heroMove 10s linear infinite;
}

@keyframes heroMove{

    0%{
        transform:translateX(-5%) translateY(-5%);
    }

    50%{
        transform:translateX(2%) translateY(2%);
    }

    100%{
        transform:translateX(-5%) translateY(-5%);
    }

}

.hero-content{

    animation:fadeHero 1.5s ease;
}

@keyframes fadeHero{

    from{
        opacity:0;
        transform:translateY(40px);
    }

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

}

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

.hero-button{

    position:relative;

    overflow:hidden;
}

.hero-button::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.3),
    transparent
    );

    transition:0.8s;
}

.hero-button:hover::before{

    left:100%;
}

/* =====================================================
   RESEARCH CARD
===================================================== */

.research-card{

    border-radius:6px;

    overflow:hidden;

    position:relative;
}

.research-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:6px;

    height:100%;

    background:
    linear-gradient(
    to bottom,
    #8c2f10,
    #d1b07a
    );
}

/* =====================================================
   INDEX CARDS
===================================================== */

.index-card{

    position:relative;

    overflow:hidden;

    border-radius:6px;

    transition:
    transform 0.5s,
    box-shadow 0.5s;
}

.index-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    135deg,
    transparent,
    rgba(140,47,16,0.04)
    );

    opacity:0;

    transition:0.4s;
}

.index-card:hover::before{

    opacity:1;
}

.index-card:hover{

    transform:
    translateY(-12px)
    scale(1.02);

    box-shadow:
    0 25px 50px rgba(0,0,0,0.08);
}

/* =====================================================
   ARTICLE CONTENT
===================================================== */

.article-content{

    border-radius:4px;

    overflow:hidden;
}

/* =====================================================
   BLOCKQUOTE
===================================================== */

blockquote{

    position:relative;
}

blockquote::before{

    content:"“";

    position:absolute;

    top:-30px;

    left:20px;

    font-size:6rem;

    color:rgba(140,47,16,0.15);

    font-family:'Cinzel', serif;
}

/* =====================================================
   SCIENCE BOX
===================================================== */

.science-box{

    border-radius:4px;

    position:relative;

    overflow:hidden;
}

.science-box::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:
    linear-gradient(
    90deg,
    #8c2f10,
    #d8b98c
    );
}

/* =====================================================
   COMPARISON CARDS
===================================================== */

.comparison-card{

    border-radius:6px;

    overflow:hidden;
}

.comparison-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 25px 50px rgba(0,0,0,0.08);
}

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

footer{

    position:relative;

    overflow:hidden;
}

footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.03),
    transparent
    );

    animation:footerLight 6s linear infinite;
}

@keyframes footerLight{

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

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

}

/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar{

    width:10px;
}

::-webkit-scrollbar-track{

    background:#eee7dc;
}

::-webkit-scrollbar-thumb{

    background:#8c2f10;
}

::-webkit-scrollbar-thumb:hover{

    background:#5f1f0a;
}
/* =====================================================
   EDITORIAL SECTION
===================================================== */

.editorial-section{

    width:min(1400px,92%);

    margin:140px auto;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(400px,1fr));

    gap:70px;

    align-items:center;
}

.editorial-image{

    position:relative;

    overflow:hidden;

    border-radius:6px;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.12);
}

.editorial-image img{

    width:100%;

    height:700px;

    object-fit:cover;

    transition:1.2s;
}

.editorial-image:hover img{

    transform:scale(1.08);
}

.editorial-content{

    padding:20px;
}

.editorial-tag{

    letter-spacing:5px;

    color:#8c2f10;

    margin-bottom:25px;
}

.editorial-content h2{

    font-size:clamp(2.5rem,5vw,5rem);

    line-height:1.1;

    margin-bottom:30px;

    font-family:'Cinzel', serif;
}

.editorial-content p{

    font-size:1.4rem;

    line-height:1.9;

    color:#444;
}

.editorial-button{

    display:inline-block;

    margin-top:40px;

    padding:18px 36px;

    background:#8c2f10;

    color:white;

    text-decoration:none;

    letter-spacing:3px;

    transition:0.4s;
}

.editorial-button:hover{

    background:#5f1f0a;

    transform:translateY(-5px);
}

/* =====================================================
   GALERÍA
===================================================== */

.gallery-section{

    width:min(1400px,92%);

    margin:120px auto;
}

.gallery-title{

    text-align:center;

    margin-bottom:60px;
}

.gallery-title h2{

    font-size:clamp(2.5rem,5vw,5rem);

    font-family:'Cinzel', serif;
}

.gallery-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:30px;
}

.gallery-card{

    position:relative;

    overflow:hidden;

    height:500px;

    border-radius:6px;

    cursor:pointer;
}

.gallery-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;
}

.gallery-card:hover img{

    transform:scale(1.1);
}

.gallery-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,0.75),
    transparent
    );

    display:flex;

    align-items:flex-end;

    padding:40px;
}

.gallery-overlay h3{

    color:white;

    font-size:2rem;

    font-family:'Cinzel', serif;
}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px){

    .editorial-image img{

        height:450px;
    }

    .gallery-card{

        height:350px;
    }

}
/* =====================================================
   LOADER CINEMATOGRÁFICO
===================================================== */

.page-loader{

    position:fixed;

    inset:0;

    background:#f5f1e8;

    z-index:999999;

    display:flex;

    justify-content:center;

    align-items:center;

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

.loader-center{

    text-align:center;
}

.loader-logo{

    width:110px;

    height:110px;

    border:2px solid #8c2f10;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    font-size:2.5rem;

    font-family:'Cinzel', serif;

    color:#8c2f10;

    margin-bottom:25px;

    animation:loaderSpin 4s linear infinite;
}

.loader-center p{

    letter-spacing:4px;

    color:#6b4d33;
}

.loader-hidden{

    opacity:0;

    visibility:hidden;
}

@keyframes loaderSpin{

    0%{
        transform:rotate(0deg);
    }

    100%{
        transform:rotate(360deg);
    }

}

/* =====================================================
   FADE ENTRE PÁGINAS
===================================================== */

body{

    animation:pageFade 1.2s ease;
}

@keyframes pageFade{

    from{
        opacity:0;
        transform:translateY(10px);
    }

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

}

/* =====================================================
   LINK TRANSITIONS
===================================================== */

a{

    transition:
    color 0.3s,
    background 0.3s,
    transform 0.3s;
}

/* =====================================================
   EFECTO ELEGANTE HERO
===================================================== */

.hero-content h1{

    animation:titleReveal 1.5s ease;
}

@keyframes titleReveal{

    from{

        opacity:0;

        transform:
        translateY(50px);

        letter-spacing:10px;
    }

    to{

        opacity:1;

        transform:
        translateY(0);

        letter-spacing:0;
    }

}

/* =====================================================
   GLASSMORPHISM SUAVE
===================================================== */

.research-card,
.index-card,
.article-content{

    backdrop-filter:blur(10px);

    background:
    rgba(255,255,255,0.93);
}

/* =====================================================
   HOVER SUAVE GLOBAL
===================================================== */

button,
a,
.index-card,
.gallery-card,
.comparison-card{

    transition:all 0.4s ease;
}

/* =====================================================
   EFECTO DE LUZ
===================================================== */

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.05),
    transparent
    );

    animation:lightMove 8s linear infinite;
}

@keyframes lightMove{

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

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

}
/* =====================================================
   ATMÓSFERA CINEMÁTICA
===================================================== */

/* PARTÍCULAS */

.ambient-particles{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:1;

    overflow:hidden;
}

.ambient-particles::before,
.ambient-particles::after{

    content:"";

    position:absolute;

    width:200%;

    height:200%;

    background-image:
    radial-gradient(
    rgba(140,47,16,0.08) 1px,
    transparent 1px
    );

    background-size:120px 120px;

    animation:particlesMove 80s linear infinite;
}

.ambient-particles::after{

    animation-direction:reverse;

    opacity:0.4;
}

@keyframes particlesMove{

    from{
        transform:translate(0,0);
    }

    to{
        transform:translate(-200px,-200px);
    }

}

/* =====================================================
   TEXTURA PAPEL
===================================================== */

.paper-texture{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:2;

    opacity:0.06;

    background-image:url('https://www.transparenttextures.com/patterns/paper-fibers.png');
}

/* =====================================================
   PROFUNDIDAD GENERAL
===================================================== */

.hero,
.editorial-section,
.gallery-section,
.research-card,
.article-content{

    position:relative;

    z-index:5;
}

/* =====================================================
   GLOW EDITORIAL
===================================================== */

.hero-content h1{

    text-shadow:
    0 5px 15px rgba(0,0,0,0.2),
    0 10px 30px rgba(0,0,0,0.15),
    0 20px 60px rgba(0,0,0,0.1);
}

/* =====================================================
   EFECTO PREMIUM EN TARJETAS
===================================================== */

.index-card,
.comparison-card,
.science-box{

    position:relative;
}

.index-card::after,
.comparison-card::after,
.science-box::after{

    content:"";

    position:absolute;

    inset:0;

    border:1px solid rgba(255,255,255,0.4);

    pointer-events:none;
}

/* =====================================================
   EFECTO PARALLAX HERO
===================================================== */

.hero{

    background-attachment:fixed;
}

/* =====================================================
   SOMBRA SUAVE PREMIUM
===================================================== */

.research-card,
.index-card,
.article-content,
.gallery-card{

    box-shadow:
    0 10px 30px rgba(0,0,0,0.05),
    0 20px 60px rgba(0,0,0,0.03);
}

/* =====================================================
   EFECTO HOVER IMÁGENES
===================================================== */

.gallery-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,0.5),
    transparent
    );

    opacity:0;

    transition:0.5s;

    z-index:2;
}

.gallery-card:hover::before{

    opacity:1;
}

/* =====================================================
   HERO OVERLAY MÁS CINEMÁTICO
===================================================== */

.hero-overlay{

    background:
    linear-gradient(
    to bottom,
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.55)
    );
}

/* =====================================================
   LÍNEAS EDITORIALES
===================================================== */

.gold-line{

    width:120px;

    height:2px;

    background:
    linear-gradient(
    90deg,
    #8c2f10,
    #d7b27a
    );

    margin:30px 0;
}

/* =====================================================
   EFECTO REVEAL
===================================================== */

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:1.2s;
}

.reveal.active{

    opacity:1;

    transform:translateY(0);
}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px){

    .hero{

        background-attachment:scroll;
    }

}

/* =====================================================
   NAVBAR INTELIGENTE
===================================================== */

.navbar{

    transition:
    transform 0.5s,
    background 0.5s;
}

.nav-hidden{

    transform:translateY(-120%);
}

/* =====================================================
   TÍTULOS PREMIUM
===================================================== */

.hero-content h1,
.article-content h2,
.gallery-title h2{

    position:relative;
}

.hero-content h1::after,
.article-content h2::after,
.gallery-title h2::after{
position:relative;

    content:"";

    position:absolute;

    left:50%;

    bottom:-10px;

    width:80px;

    height:2px;

    background:
    linear-gradient(
    90deg,
    transparent,
    #d7b27a,
    transparent
    );

    transform:translateX(-50%);
}

/* =====================================================
   EFECTO MAGNÉTICO
===================================================== */

.hero-button,
.editorial-button,
.back-button{

    transition:
    transform 0.2s ease;
}

/* =====================================================
   3D CARDS
===================================================== */

.index-card,
.gallery-card,
.comparison-card{

    transform-style:preserve-3d;

    perspective:1000px;
}

.index-card:hover,
.gallery-card:hover,
.comparison-card:hover{

    transform:
    rotateX(3deg)
    rotateY(-3deg)
    translateY(-10px);
}

/* =====================================================
   BRILLO DINÁMICO
===================================================== */

.index-card::before,
.gallery-card::before{

    content:"";

    position:absolute;

    top:-150%;

    left:-150%;

    width:300%;

    height:300%;

    background:
    linear-gradient(
    45deg,
    transparent,
    rgba(255,255,255,0.08),
    transparent
    );

    transform:rotate(25deg);

    transition:1s;
}

.index-card:hover::before,
.gallery-card:hover::before{

    top:100%;
    left:100%;
}

/* =====================================================
   FLOAT EFFECT
===================================================== */

.editorial-image{

    animation:floatImage 6s ease-in-out infinite;
}

@keyframes floatImage{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* =====================================================
   SCROLL INDICATOR
===================================================== */

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0%;

    height:4px;

    background:
    linear-gradient(
    90deg,
    #8c2f10,
    #d7b27a
    );

    z-index:999999;
}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px){

    body{
        cursor:auto;
    }

    

}
/* =====================================================
   SIDEBAR INTELIGENTE
===================================================== */

.smart-sidebar{

    position:fixed;

    left:30px;

    top:50%;

    transform:translateY(-50%);

    z-index:999;

    display:flex;

    flex-direction:column;

    gap:18px;
}

.smart-sidebar a{

    color:#6b4d33;

    text-decoration:none;

    font-size:0.95rem;

    letter-spacing:2px;

    transition:0.3s;

    opacity:0.6;
}

.smart-sidebar a:hover{

    opacity:1;

    transform:translateX(8px);

    color:#8c2f10;
}

.sidebar-line{

    width:2px;

    height:120px;

    background:
    linear-gradient(
    to bottom,
    #8c2f10,
    transparent
    );

    margin-bottom:10px;
}

/* =====================================================
   MODO LECTURA
===================================================== */

.reading-mode-btn{

    position:fixed;

    right:30px;

    bottom:30px;

    z-index:9999;

    background:#8c2f10;

    color:white;

    border:none;

    padding:16px 24px;

    letter-spacing:2px;

    cursor:pointer;

    transition:0.4s;

    font-family:'Cinzel', serif;
}

.reading-mode-btn:hover{

    background:#5f1f0a;

    transform:translateY(-4px);
}

/* =====================================================
   READING MODE
===================================================== */

.reading-mode{

    background:#efe6d6 !important;

    color:#2a2118 !important;
}

.reading-mode .hero,
.reading-mode .gallery-section,
.reading-mode .editorial-section,
.reading-mode .ambient-particles{

    display:none !important;
}

.reading-mode .article-content,
.reading-mode .research-card{

    width:min(850px,92%);

    margin:auto;

    box-shadow:none;

    background:#f8f1e4;

    border:none;
}

.reading-mode p{

    font-size:1.6rem !important;

    line-height:2.2 !important;
}

/* =====================================================
   CAPÍTULO TRANSITIONS
===================================================== */

.article-content,
.research-card{

    animation:chapterReveal 1.4s ease;
}

@keyframes chapterReveal{

    from{

        opacity:0;

        transform:
        translateY(80px);

        filter:blur(8px);
    }

    to{

        opacity:1;

        transform:
        translateY(0);

        filter:blur(0);
    }

}

/* =====================================================
   MINI MAPA
===================================================== */

.chapter-map{

    position:fixed;

    right:30px;

    top:50%;

    transform:translateY(-50%);

    z-index:999;
}

.chapter-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#b8925d;

    margin:18px 0;

    transition:0.4s;
}

.chapter-dot.active{

    background:#8c2f10;

    transform:scale(1.8);
}

/* =====================================================
   ATMÓSFERA SUAVE
===================================================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:
    radial-gradient(
    circle at top,
    rgba(255,255,255,0.08),
    transparent 60%
    );

    z-index:1;
}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:1100px){

    .smart-sidebar,
    .chapter-map{

        display:none;
    }

}

@media(max-width:768px){

    .reading-mode-btn{

        right:15px;

        bottom:15px;

        padding:12px 18px;

        font-size:0.8rem;
    }

} /* =====================================================
   STATS SECTION
===================================================== */

.stats-section{

    width:min(1300px,92%);

    margin:140px auto;
}

.stats-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;
}

.stat-card{

    background:white;

    padding:60px 40px;

    text-align:center;

    border-radius:6px;

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

    transition:0.5s;
}

.stat-card:hover{

    transform:translateY(-10px);
}

.stat-card h2{

    font-size:5rem;

    color:#8c2f10;

    font-family:'Cinzel', serif;
}

.stat-card p{

    margin-top:20px;

    font-size:1.2rem;

    color:#555;
}

/* =====================================================
   TIMELINE
===================================================== */

.timeline-section{

    width:min(1100px,92%);

    margin:140px auto;
}

.timeline-section h2{

    text-align:center;

    font-size:clamp(2.5rem,5vw,5rem);

    margin-bottom:80px;

    font-family:'Cinzel', serif;
}

.timeline{

    position:relative;

    padding-left:40px;
}

.timeline::before{

    content:"";

    position:absolute;

    left:8px;

    top:0;

    width:3px;

    height:100%;

    background:
    linear-gradient(
    to bottom,
    #8c2f10,
    #d7b27a
    );
}

.timeline-item{

    position:relative;

    margin-bottom:80px;
}

.timeline-dot{

    position:absolute;

    left:-40px;

    top:10px;

    width:20px;

    height:20px;

    border-radius:50%;

    background:#8c2f10;

    box-shadow:
    0 0 20px rgba(140,47,16,0.5);
}

.timeline-content{

    background:white;

    padding:40px;

    border-radius:6px;

    box-shadow:
    0 15px 40px rgba(0,0,0,0.05);
}

.timeline-content h3{

    font-size:2rem;

    margin-bottom:15px;

    font-family:'Cinzel', serif;
}

/* =====================================================
   SEARCH HIGHLIGHT
===================================================== */

.highlight{

    background:#d7b27a;

    padding:2px 4px;
}
/* =====================================================
   HERO CINEMATOGRÁFICO ULTRA
===================================================== */

.hero{

    position:relative;

    overflow:hidden;

    isolation:isolate;
}

.hero::before{

    content:"";

    position:absolute;

    inset:-10%;

    background:
    radial-gradient(
    circle at top right,
    rgba(255,255,255,0.12),
    transparent 40%
    );

    z-index:1;

    animation:
    heroLightMove 12s ease-in-out infinite;

    pointer-events:none;
}

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to bottom,
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.55)
    );

    z-index:1;

    pointer-events:none;
}

/* CONTENIDO */

.hero-content{

    position:relative;

    z-index:5;

    animation:
    heroFloat 6s ease-in-out infinite;
}

/* TÍTULO */

.hero-content h1{

    text-shadow:
    0 5px 15px rgba(0,0,0,0.25),
    0 10px 30px rgba(0,0,0,0.2),
    0 20px 60px rgba(0,0,0,0.15);

    animation:
    heroTitleReveal 1.8s ease;
}

/* DESCRIPCIÓN */

.hero-description{

    animation:
    fadeDescription 2.4s ease;
}

/* BOTÓN */

.hero-button{

    backdrop-filter:blur(8px);

    background:
    rgba(255,255,255,0.04);

    border:
    1px solid rgba(255,255,255,0.25);

    box-shadow:
    0 10px 40px rgba(0,0,0,0.2);
}

/* ANIMACIONES */

@keyframes heroLightMove{

    0%{
        transform:
        translateX(-3%)
        translateY(-3%);
    }

    50%{
        transform:
        translateX(3%)
        translateY(3%);
    }

    100%{
        transform:
        translateX(-3%)
        translateY(-3%);
    }
}

@keyframes heroFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }
}

@keyframes heroTitleReveal{

    from{

        opacity:0;

        transform:
        translateY(70px);

        filter:blur(10px);
    }

    to{

        opacity:1;

        transform:
        translateY(0);

        filter:blur(0);
    }
}

@keyframes fadeDescription{

    from{

        opacity:0;

        transform:
        translateY(30px);
    }

    to{

        opacity:1;

        transform:
        translateY(0);
    }
} /* =====================================================
   SCROLL CINEMÁTICO PREMIUM
===================================================== */

html{

    scroll-behavior:smooth;
}

/* SUAVIDAD GENERAL */

body{

    scroll-behavior:smooth;

    perspective:1px;
}

/* REVEAL CINEMÁTICO */

.reveal-cinematic{

    opacity:0;

    transform:
    translateY(120px)
    scale(0.96);

    filter:
    blur(12px);

    transition:
    opacity 1.4s ease,
    transform 1.4s ease,
    filter 1.4s ease;
}

.reveal-cinematic.active{

    opacity:1;

    transform:
    translateY(0)
    scale(1);

    filter:
    blur(0);
}

/* STAGGER */

.reveal-delay-1{
    transition-delay:0.15s;
}

.reveal-delay-2{
    transition-delay:0.3s;
}

.reveal-delay-3{
    transition-delay:0.45s;
}

.reveal-delay-4{
    transition-delay:0.6s;
}

/* MOVIMIENTO SUAVE */

.gallery-card,
.index-card,
.stat-card,
.timeline-content,
.science-box,
.npk-card,
.comparison-card{

    will-change:
    transform,
    opacity;
}

/* PROFUNDIDAD */

.editorial-image{

    transform-style:preserve-3d;
}

.editorial-image img{

    transform:
    translateZ(0);
}

/* PARALLAX SUAVE */

.hero,
.article-hero{

    transform-style:preserve-3d;
} /* =====================================================
   EFECTO 3D ULTRA PREMIUM
===================================================== */

.index-card,
.gallery-card,
.stat-card,
.comparison-card,
.science-box,
.npk-card{

    transform-style:preserve-3d;

    perspective:1200px;

    transition:
    transform 0.15s ease,
    box-shadow 0.3s ease;

    position:relative;

    overflow:hidden;
}

/* BRILLO DINÁMICO */

.index-card::after,
.gallery-card::after,
.stat-card::after,
.comparison-card::after,
.science-box::after,
.npk-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at var(--x) var(--y),
        rgba(255,255,255,0.18),
        transparent 35%
    );

    opacity:0;

    transition:opacity 0.3s ease;

    pointer-events:none;

    z-index:2;
}

.index-card:hover::after,
.gallery-card:hover::after,
.stat-card:hover::after,
.comparison-card:hover::after,
.science-box:hover::after,
.npk-card:hover::after{

    opacity:1;
}

/* PROFUNDIDAD INTERNA */

.index-card h4,
.gallery-overlay,
.stat-card h2,
.comparison-card h3,
.science-box h3,
.npk-card h3{

    transform:translateZ(40px);
}

/* SOMBRA PREMIUM */

.index-card:hover,
.gallery-card:hover,
.stat-card:hover,
.comparison-card:hover,
.science-box:hover,
.npk-card:hover{

    box-shadow:
    0 30px 70px rgba(0,0,0,0.18),
    0 10px 30px rgba(0,0,0,0.08);
} /* =====================================================
   BUSCADOR PREMIUM
===================================================== */

.index-card{

    transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    filter 0.4s ease;
}

/* OCULTAR SUAVE */

.index-card.search-hidden{

    opacity:0;

    transform:
    scale(0.9)
    translateY(20px);

    pointer-events:none;

    position:absolute;

    filter:blur(6px);
}

/* RESULTADOS */

.search-result-info{

    margin-top:25px;

    color:#8c2f10;

    letter-spacing:2px;

    font-size:0.95rem;
}

/* HIGHLIGHT */

.highlight-text{

    background:
    linear-gradient(
    90deg,
    rgba(215,178,122,0.45),
    rgba(140,47,16,0.18)
    );

    padding:2px 6px;

    border-radius:4px;
}

/* INPUT PREMIUM */

.search-box input{

    transition:
    all 0.4s ease;
}

.search-box input:focus{

    outline:none;

    border-color:#8c2f10;

    box-shadow:
    0 0 0 4px rgba(140,47,16,0.08),
    0 10px 30px rgba(0,0,0,0.06);

    transform:translateY(-2px);
}

/* SIN RESULTADOS */

.no-results{

    width:100%;

    text-align:center;

    padding:40px;

    font-size:1.3rem;

    color:#6b4d33;

    animation:
    fadeNoResults 0.5s ease;
}

@keyframes fadeNoResults{

    from{

        opacity:0;

        transform:
        translateY(15px);
    }

    to{

        opacity:1;

        transform:
        translateY(0);
    }
} /* =====================================================
   FIX NAVBAR EN CAPÍTULOS
===================================================== */

.article-hero{
    margin-top:0;
}

/* SOLO PARA PÁGINAS DE CAPÍTULOS */

.article-container{
    position:relative;
    z-index:5;
}

/* EVITA NAVBAR BUG */

body:has(.article-hero) .navbar{

    position:relative !important;

    top:0 !important;

    transform:none !important;

    width:100%;

}

/* SI NO EXISTE NAVBAR, NO DEJA ESPACIOS RAROS */

body:has(.article-hero) .top-header{

    display:none;
}

/* HERO MÁS LIMPIO */

.article-hero{

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}

/* TEXTO CENTRADO REAL */

.hero-center{

    width:min(900px,90%);

    margin:auto;

    text-align:center;

    position:relative;

    z-index:3;
}

/* EVITA ELEMENTOS FLOTANDO */

.hero-center::before,
.hero-center::after{

    display:none !important;
}

/* CAPÍTULOS MÁS ESTABLES */

.article-content{

    margin-top:-40px;

    position:relative;

    z-index:10;
} /* =====================================================
   FIX CURSOR PREMIUM
===================================================== */

.custom-cursor,
.cursor-dot{

    position:fixed !important;

    z-index:99999999 !important;

    pointer-events:none;

}

/* EVITA QUE LOS HERO TAPEN EL CURSOR */

.hero,
.article-hero,
.overlay,
.hero-overlay{

    pointer-events:auto;
} /* =====================================================
   FIX HERO CAPÍTULOS
===================================================== */

.article-hero{

    min-height:85vh;

    padding-top:120px;

    padding-bottom:120px;
}

.hero-center{

    position:relative;

    z-index:20;
}

.overlay{

    z-index:1;
}
/* =====================================================
   CURSOR PREMIUM BASE (CLEAN)
===================================================== */


.custom-cursor,
.cursor-dot{

    position:fixed;
    top:0;
    left:0;

    pointer-events:none;

    z-index:999999;

    transform:translate(-50%,-50%);
}

/* CÍRCULO GRANDE */

.custom-cursor{

    width:35px;
    height:35px;

    border:1px solid rgba(140,47,16,0.6);
    border-radius:50%;

    transition:width 0.25s ease,
               height 0.25s ease,
               background 0.25s ease,
               border-color 0.25s ease;

    backdrop-filter:blur(2px);
}

/* PUNTO CENTRAL */

.cursor-dot{

    width:6px;
    height:6px;

    background:#8c2f10;
    border-radius:50%;
}

/* HOVER */

.cursor-hover{

    width:70px;
    height:70px;

    background:rgba(140,47,16,0.05);
    border-color:#d7b27a;
}  /* =====================================================
   FIX BUG CÍRCULO ROJO / RESIDUO SUPERIOR IZQUIERDA
   Versión limpia y segura
===================================================== */

body::before,
.top-header::before,
.navbar::before,
header::before {
    display: none !important;
}

/* Cubrir solo el residuo sin tapar el logo */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 50px;           /* más pequeño y preciso */
    height: 50px;
    background: #fdfdfd;   /* mismo color del header */
    z-index: 999998;
    pointer-events: none;
}

/* Proteger el logo */
.logo-area,
.logo-box,
.top-header {
    position: relative;
    z-index: 999999;
}

/* Limpiar custom cursor si lo tienes activo */
.custom-cursor,
.cursor-dot {
    display: none !important;
}

/* Evitar overflow raro */
html, body {
    overflow-x: hidden;
} /* FIX RÁPIDO */
.smart-sidebar,
.chapter-map {
    display: none !important;
}

body:has(.article-hero) .sidebar-line {
    display: none !important;
}