/* =========================================
HERO NOSOTROS
========================================= */
@font-face {
    font-family: 'Albertus';
    src: url('../fonts/Albertus\ Medium\ Regular.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.hero-nosotros{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding-top: 6.5vh; /* Mucho más arriba (puedes cambiarlo a 3vh o 0vh si lo quieres al límite) */
}


.video-nosotros{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-3;
}

.overlay-nosotros{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:
    linear-gradient(
        rgba(0,0,0,.40),
        rgba(0,0,0,.60)
    );

    z-index:-2;
}

.contenido-nosotros{
    z-index:2;
    animation:fadeHero 1.5s ease;
    width: 100%;
}

.contenido-nosotros h1{
    font-family: 'Albertus', serif;
    font-size:8rem;
    color:white;
    letter-spacing:12px;
    margin-bottom:1rem;
}

.contenido-nosotros p{
    font-size:2.5rem;
    color:#ddd;
    line-height:1.6;
}

h3{
    font-size: 2rem;
    font-weight: 300;
    color: white;
    text-align: center;
    max-width: 760px;
    margin: 0.5rem auto 1.5rem;
}




/* =========================================
SECCIONES ESENCIA
========================================= */

.esencia-section{
    position:relative;
    width:100%;
    min-height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
    padding:8rem;
    border-bottom:
    1px solid rgba(255,255,255,.05);
}


/* VIDEO */

.video-esencia{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-3;
    transition:4s;
}


/* OVERLAY */

.esencia-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:
    linear-gradient(
        to right,
        rgba(0,0,0,.90),
        rgba(0,0,0,.55)
    );

    z-index:-2;
}


/* GRID */

.esencia-grid{
    width:100%;
    display:grid;
    grid-template-columns:
    1fr 1fr;
    gap:6rem;
    align-items:center;
    position:relative;
    z-index:2;
}


/* REVERSE */

.esencia-grid.reverse .esencia-contenido{
    order:2;
}

.esencia-grid.reverse .esencia-imagen{
    order:1;
}


/* CONTENIDO */

.esencia-contenido{
    max-width:700px;
}


/* STATUS */

.estado{
    display:inline-block;
    padding:1rem 2rem;
    margin-bottom:2rem;
    border-radius:50px;
    background:
    rgba(51,243,3,.08);
    border:
    1px solid rgba(51,243,3,.3);
    color:var(--secundario);
    letter-spacing:2px;
    font-size:1.2rem;
    backdrop-filter:blur(10px);
}


/* TITULOS */

.esencia-contenido h2{
    font-size:6rem;
    color:white;
    line-height:1.1;
    margin-bottom:3rem;
    text-transform:uppercase;
}


/* TEXTO */

.esencia-contenido p{
    font-size:1.9rem;
    line-height:2;
    color:#ddd;
    text-align: justify;
}


/* IMAGEN */

.esencia-imagen{
    position:relative;
}

.esencia-imagen img{
    width:100%;
    height:700px;
    object-fit:cover;
    border-radius:30px;
    transition:.5s;
    box-shadow:
    0 0 40px rgba(0,0,0,.5);
}

.esencia-imagen img:hover{
    transform:
    scale(1.03)
    translateY(-10px);
}


/* HOVER VIDEO */

.esencia-section:hover .video-esencia{
    transform:scale(1.05);
}


/* GLOW */

.esencia-section::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:
    radial-gradient(
        circle,
        rgba(51,243,3,.15),
        transparent 70%
    );
    filter:blur(90px);
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:-1;
}

.esencia-contenido li{
    color:#ddd;
    font-size: 20px;
    line-height:1.8;
    margin-bottom:1.5rem;
}




/* =========================================
VALORES
========================================= */

.valores-center{
    width:100%;
    position:relative;
    z-index:2;
    text-align:center;
}

.valores-center h2{
    font-size:6rem;
    color:white;
    margin:2rem 0 5rem;
}

.valores-grid{
    display:grid;
    grid-template-columns:
    repeat(4,1fr);
    gap:2rem;
}

.valor-card{
    padding:2.5rem;
    border-radius:25px;
    background:
    rgba(255,255,255,.05);
    border:
    1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(15px);
    transition:.4s;
}

.valor-card:hover{
    transform:
    translateY(-10px);
    box-shadow:
    0 0 25px rgba(51,243,3,.25);
}

.valor-card h3{
    font-size:3.5rem;
    color:var(--secundario);
    margin-bottom:1rem;
}

.valor-card p{
    font-size:1.6rem;
    line-height:1.7;
    color:#ddd;
}

.valores-center h3{
    margin-bottom: 50px;
}



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

/* ============================================================
   REEMPLAZA todas las reglas .timeline-* de tu CSS por esto.
   (deja intacto .politica-scroll y lo que esté después)
   ============================================================ */

.carousel-section{
    padding:8rem 4rem;
    background:#0d0d0d;
    overflow:hidden;
}

.carousel-title{
    text-align:center;
    font-size:5rem;
    color:var(--secundario);
    margin-bottom:4rem;
}

.carousel-3d{
    position:relative;
    max-width:1500px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
}

.carousel-stage{
    position:relative;
    width:100%;
    height:560px;
    perspective:1600px;
    perspective-origin:50% 50%;
}

.carousel-item{
    position:absolute;
    top:50%;
    left:50%;
    width:440px;
    margin-left:-220px;
    margin-top:-230px;
    transform-style:preserve-3d;
    transition:transform .6s cubic-bezier(.25,.8,.25,1),
               opacity .6s ease,
               filter .6s ease;
    cursor:pointer;
    will-change:transform,opacity;
}

.carousel-item.is-active{
    cursor:default;
}

.carousel-image{
    width:100%;
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.5);
}

.carousel-image img{
    width:100%;
    height:280px;
    object-fit:cover;
    display:block;
}

.carousel-content{
    padding:2.5rem 2.5rem 2rem;
    background:linear-gradient(145deg, rgba(20,20,20,.95), rgba(35,35,35,.95));
    border:1px solid rgba(51,243,3,.15);
    border-radius:0 0 25px 25px;
    backdrop-filter:blur(15px);
}

.carousel-year{
    font-size:1.8rem;
    color:var(--secundario);
    margin-bottom:.8rem;
    font-weight:600;
}

.carousel-content h4{
    color:#fff;
    font-size:1.6rem;
    margin-bottom:1rem;
    line-height:1.3;
}

.carousel-content p{
    color:#d8d8d8;
    font-size:1.05rem;
    line-height:1.7;
    /* clamp para que las tarjetas laterales no se vean gigantes */
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.carousel-item.is-active .carousel-content p{
    -webkit-line-clamp:6;
}

/* Flechas */
.carousel-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:200;
    width:56px;
    height:56px;
    border-radius:50%;
    border:1px solid rgba(51,243,3,.4);
    background:rgba(20,20,20,.85);
    color:var(--secundario);
    font-size:1.4rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}

.carousel-arrow:hover{
    background:var(--secundario);
    color:#0d0d0d;
    box-shadow:0 0 25px rgba(51,243,3,.5);
}

.carousel-arrow.prev{ left:0; }
.carousel-arrow.next{ right:0; }

/* Puntos de navegación */
.carousel-dots{
    display:flex;
    justify-content:center;
    gap:.8rem;
    margin-top:3rem;
}

.carousel-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:rgba(255,255,255,.25);
    cursor:pointer;
    transition:.3s;
}

.carousel-dot.active{
    background:var(--secundario);
    box-shadow:0 0 12px rgba(51,243,3,.6);
    transform:scale(1.3);
}

/* Responsive */
@media (max-width:900px){
    .carousel-section{ padding:5rem 1.5rem; }
    .carousel-title{ font-size:3rem; margin-bottom:2.5rem; }
    .carousel-stage{ height:480px; }
    .carousel-item{
        width:300px;
        margin-left:-150px;
        margin-top:-200px;
    }
    .carousel-image img{ height:190px; }
    .carousel-content{ padding:1.6rem 1.6rem 1.4rem; }
    .carousel-content h4{ font-size:1.25rem; }
    .carousel-content p{ font-size:.95rem; }
    .carousel-arrow{ width:44px; height:44px; font-size:1.1rem; }
}


.politica-scroll{

    max-height:550px;

    overflow-y:auto;

    padding-right:1.5rem;

    margin-top:2rem;
}

.politica-scroll p{

    color:#ddd;

    line-height:1.9;

    margin-bottom:2rem;
}

.politica-scroll ul{

    padding-left:2rem;
}

.politica-scroll li{

    color:#ddd;

    line-height:1.8;

    margin-bottom:1.5rem;
}

/* Scroll personalizado */

.politica-scroll::-webkit-scrollbar{

    width:8px;
}

.politica-scroll::-webkit-scrollbar-track{

    background:rgba(255,255,255,.05);
}

.politica-scroll::-webkit-scrollbar-thumb{

    background:var(--secundario);

    border-radius:20px;
}


/* =========================================
CTA
========================================= */
.cta-nosotros{
    padding:10rem 2rem;
    display:flex;
    justify-content:center;
    align-items:center;
    background:
    linear-gradient(
        rgba(0,0,0,.70),
        rgba(0,0,0,.80)
    ),
    url("../img/nosotros/truck.jpeg");

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

.cta-panel{
    max-width:800px;
    padding:5rem;
    text-align:center;
    background:
    rgba(255,255,255,.05);
    backdrop-filter:blur(15px);
    border:
    1px solid rgba(255,255,255,.08);
    border-radius:30px;
    box-shadow:
    0 20px 60px rgba(0,0,0,.35);
    transition:.4s;
}

.cta-panel:hover{
    transform:translateY(-8px);
    box-shadow:
    0 0 25px rgba(51,243,3,.15),
    0 20px 60px rgba(0,0,0,.4);
}

.cta-panel h2{
    font-size:5rem;
    color:white;
    margin-bottom:2rem;
    line-height:1.1;
}

.cta-panel p{
    font-size:2rem;
    line-height:1.8;
    color:#d6d6d6;
    margin-bottom:3rem;
}

.cta-panel a{
    display:inline-block;
    padding:1.6rem 4rem;
    background:var(--secundario);
    color:black;
    text-decoration:none;
    font-weight:700;
    border-radius:100px;
    transition:.3s;
}

.cta-panel a:hover{
    transform:translateY(-4px);
    box-shadow:
    0 0 25px rgba(51,243,3,.4);
}



/* =========================================
REVEAL
========================================= */
.reveal-left,
.reveal-right,
.reveal-up{
    opacity:0;
    transition:1s ease;
}

.reveal-left{
    transform:translateX(-80px);
}

.reveal-right{
    transform:translateX(80px);
}

.reveal-up{
    transform:translateY(80px);
}

.reveal-left.active,
.reveal-right.active,
.reveal-up.active{
    opacity:1;
    transform:translate(0);
}



/* =========================================
ANIMACIONES
========================================= */
@keyframes fadeHero{
    0%{
        opacity:0;
        transform:translateY(40px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}



/* =========================================
RESPONSIVE / MEDIA QUERIES
========================================= */

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


@media(max-width:992px){
    .esencia-section {
        padding: 6rem 3rem;
    }

    .esencia-grid{
        grid-template-columns:1fr;
        gap: 3rem;
    }

    .esencia-grid.reverse .esencia-contenido,
    .esencia-grid.reverse .esencia-imagen{
        order:unset;
    }

    .timeline {
        max-width: 100%;
        padding: 0 1rem;
    }

    .timeline::before{
        left: 30px;
    }

    .timeline-item,
    .timeline-item.reverse{
        flex-direction:column;
        padding-left: 60px;
        padding-right: 0;
        align-items: flex-start;
    }

    .timeline-item::before{
        left: 30px;
        top: 25px;
    }

    .timeline-image,
    .timeline-info{
        width:100%;
    }
}


@media(max-width:768px){
    .hero-nosotros{
        height:80vh;
    }

    .contenido-nosotros h1{
        font-size: 3.2rem; /* Ajustado para evitar desbordes con letter-spacing */
        letter-spacing: 6px;
    }

    .contenido-nosotros p{
        font-size:1.6rem;
        padding:0 1rem;
    }

    .esencia-section{
        padding: 4rem 1.5rem;
    }

    .esencia-contenido h2,
    .valores-center h2,
    .timeline-title{
        font-size: 3rem;
    }

    .esencia-contenido p,
    .esencia-contenido li{
        font-size:1.5rem;
    }

    .esencia-imagen img{
        height:280px;
    }

    .valores-grid{
        grid-template-columns:1fr;
        gap: 1.5rem;
    }

    .timeline-year {
        font-size: 3rem;
    }

    .timeline-content {
        padding: 2.5rem 2rem;
    }

    .timeline-content h4 {
        font-size: 2.2rem;
    }

    .timeline-content p {
        font-size: 1.5rem;
    }

    .cta-panel{
        padding:3rem 1.5rem;
        margin: 0 1rem;
    }

    .cta-panel h2{
        font-size:3rem;
    }

    .cta-panel p{
        font-size:1.5rem;
    }
}