/* =========================================
   1. VARIABLES & IDENTIDAD CORPORATIVA
   ========================================= */
:root {
    --palm-verde: #006837;
    --palm-naranja: #EB6109;
    --palm-dorado: #b88317;
    --text-body: #444444;
    --text-heading: #1a1a1a;
    --bg-light: #f9f9f9;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Poppins', sans-serif;
    --section-spacing: 90px;
}

   html, body {
             max-width: 100%;
             overflow-x: hidden;
      }
body { 
    font-family: var(--font-body); 
    color: var(--text-body); 
    background-color: #fff; 
    line-height: 1.6; 
    overflow-x: hidden;
}

/* Títulos */
h1, h2, h3, h4, h5, .display-5, .display-6 { 
    font-family: var(--font-heading); 
    color: var(--text-heading);
    font-weight: 700; 
}

/* Utilidades */
.text-verde { color: var(--palm-verde) !important; }
.text-naranja { color: var(--palm-naranja) !important; }
.text-dorado { color: var(--palm-dorado) !important; }
.text-accent { color: var(--palm-naranja) !important; }


.bg-verde-main { background-color: var(--palm-verde) !important; }
.bg-dorado { background-color: var(--palm-dorado); border-color: var(--palm-dorado); }
.bg-naranja { background-color: var(--palm-naranja); border-color: var(--palm-naranja); }
.bg-verde-claro { background-color: #e8f5e9; color: #1b5e20; border: 1px solid #c8e6c9; }

.section-padding { padding-top: var(--section-spacing); padding-bottom: var(--section-spacing); }

/* =========================================
   2. HERO SLIDER (SOLUCIÓN PANTALLA NEGRA)
   ========================================= */

/* REGLA DE ORO: Forzar altura en toda la cadena para evitar colapso */
.hero-slider-corp,
.hero-slider-corp .carousel-inner,
.hero-slider-corp .carousel-item {
    height: 85vh;       /* Altura base en PC */
    min-height: 600px;  /* Altura mínima segura */
    position: relative; /* Necesario para los hijos absolutos */
    background-color: #000; /* Fondo de seguridad */
    overflow: hidden;
}

/* El contenedor de la imagen debe ser absoluto y llenar todo */
.img-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* La imagen cubre todo el espacio sin deformarse */
.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: brightness(0.6);
    display: block;
}

/* Overlay oscuro para leer el texto */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 100%);
    z-index: 2;
    pointer-events: none; /* Permite clicks a través del overlay */
}

/* Centrado del texto usando posición absoluta sobre todo el slider */
.hero-slider-corp .container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%; /* Altura completa para centrar verticalmente */
    z-index: 10;
    display: flex;
    align-items: center; /* Centrado Vertical Flexbox */
}

.hero-content {
    width: 100%;
    max-width: 700px; 
    color: #fff !important; 
    margin-left: 20px; /* Margen seguridad izquierdo */
}

.hero-content h1 { 
    font-size: 3.8rem; margin-bottom: 20px; line-height: 1.1; 
    color: #fff !important;
    text-shadow: 0 4px 15px rgba(0,0,0,1);
}

.hero-content p.lead { 
    font-size: 1.25rem; font-weight: 400; margin-bottom: 30px;
    color: #f8f8f8 !important; 
    text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}

.badge-hero {
    display: inline-block; padding: 6px 16px; 
    background: var(--palm-verde); color: #fff;
    text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1.5px;
    border-radius: 4px; margin-bottom: 20px; font-weight: 600;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.btn-primary-corp {
    background-color: var(--palm-naranja); color: #fff;
    padding: 12px 35px; border-radius: 50px; border: none;
    font-weight: 600; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.5px;
    transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.btn-primary-corp:hover {
    background-color: #fff; color: var(--palm-naranja);
    transform: translateY(-3px);
}

/* Mouse Scroll */
.scroll-mouse-indicator {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    z-index: 20; opacity: 0.8; transition: 0.3s;
}
.mouse-wheel {
    display: block; width: 26px; height: 42px; border: 2px solid #fff;
    border-radius: 20px; position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.mouse-wheel::before {
    content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 4px; height: 6px; background: #fff; border-radius: 2px;
    animation: scrollWheel 1.5s infinite;
}
@keyframes scrollWheel { 0% { top: 8px; opacity: 1; } 100% { top: 20px; opacity: 0; } }

/* =========================================
   3. SECCIÓN SOBRE NOSOTROS (FONDO SÓLIDO)
   ========================================= */
.section-about-final { 
    padding: 100px 0; 
    background-color: #fff !important; /* IMPORTANTE: Tapa el slider */
    position: relative; 
    z-index: 10; 
}

/* Video Facade */
.video-wrapper-final { position: relative; padding: 15px; }
.video-facade {
    position: relative; cursor: pointer; border-radius: 20px; overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15); z-index: 2; border: 4px solid #fff;
}
.video-facade img { width: 100%; height: auto; display: block; filter: brightness(0.8); transition: 0.3s; }
.video-facade:hover img { filter: brightness(0.6); }
.play-button {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 70px; height: 70px; background: rgba(255,255,255,0.9);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: var(--palm-naranja); z-index: 5; transition: 0.3s;
}
.video-overlay-text {
    position: absolute; bottom: 20px; width: 100%; text-align: center;
    color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; z-index: 5;
}
.video-frame { 
    border-radius: 20px; overflow: hidden; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.15); 
    border: 4px solid #fff; background: #000;
}
.decor-box { 
    position: absolute; bottom: -10px; left: -10px; width: 120px; height: 120px; 
    background: var(--palm-dorado); opacity: 0.2; z-index: 1; border-radius: 20px; 
}
.link-arrow { text-decoration: none; border-bottom: 2px solid var(--palm-naranja); padding-bottom: 2px; transition: 0.3s; }
.link-arrow:hover { color: var(--palm-naranja) !important; border-color: transparent; }

/* =========================================
   4. CICLO DEL NEGOCIO
   ========================================= */
.timeline-section-final { padding: 100px 0; background: #f8f9fa; position: relative; z-index: 5; }
.timeline-wrapper { position: relative; width: 100%; max-width: 900px; margin: 0 auto; }
.svg-container { position: relative; height: 200px; margin-bottom: 20px; }
#snakePath { transition: stroke-dashoffset 1.5s ease-in-out; }

.traveler-dot { 
    position: absolute; width: 50px; height: 50px; 
    background: var(--palm-naranja); border: 4px solid #fff; 
    border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; 
    transform: translate(-50%, -50%); z-index: 10; transition: all 1.5s ease-in-out; 
    box-shadow: 0 5px 15px rgba(235, 97, 9, 0.4);
}
.station-dot { 
    position: absolute; width: 16px; height: 16px; background: #fff; 
    border: 3px solid #ccc; border-radius: 50%; transform: translate(-50%, -50%); 
    z-index: 5; transition: 0.3s; 
}
.station-dot.active { background: var(--palm-verde); border-color: var(--palm-verde); transform: translate(-50%, -50%) scale(1.3); }
.year-tooltip { position: absolute; top: -35px; left: 50%; transform: translateX(-50%); font-size: 0.75rem; font-weight: 700; color: #999; text-transform: uppercase; }

.timeline-card { display: none; animation: fadeUp 0.6s ease; }
.timeline-card.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.card-body-custom { 
    background: #fff; padding: 40px; border-radius: 20px; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.06); 
    display: flex; gap: 30px; align-items: flex-start; 
}
.icon-large { font-size: 3.5rem; opacity: 0.2; flex-shrink: 0; }
.btn-next-step { background: var(--palm-verde); color: #fff; padding: 10px 30px; border-radius: 50px; border: none; transition: 0.3s; }
.btn-next-step:hover { background: var(--palm-naranja); }

/* =========================================
   5. PRODUCTOS
   ========================================= */
.section-productos { background-color: var(--bg-light); }
.card-producto { 
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border-radius: 12px; overflow: hidden; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.3s; border: 1px solid #eee; text-decoration: none;
}
.card-producto:hover { transform: translateY(-8px); border-color: var(--palm-naranja); box-shadow: 0 20px 30px rgba(0,0,0,0.1); }

.img-container { 
    height: 220px; width: 100%; overflow: hidden; background: #fff; position: relative;
}
.img-container img { 
    width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; 
} 
.card-producto:hover .img-container img { transform: scale(1.05); }

.card-body-prod { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.card-body-prod h5 { margin-bottom: 10px; font-size: 1.25rem; color: #222; }
.card-body-prod p { color: #666; font-size: 0.9rem; margin-bottom: auto; }
.btn-link-prod { margin-top: 20px; color: var(--palm-naranja); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }

/* =========================================
   6. NOTICIAS
   ========================================= */
.card-noticia { background: #fff; border: 1px solid #eee; border-radius: 10px; overflow: hidden; transition: 0.3s; height: 100%; display: flex; flex-direction: column; }
.card-noticia:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.08); transform: translateY(-5px); }
.noticia-img-wrapper { position: relative; height: 200px; overflow: hidden; background-color: #f0f0f0; }
.noticia-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.card-noticia:hover .noticia-img-wrapper img { transform: scale(1.05); }
.categoria-badge { position: absolute; top: 15px; left: 15px; background: var(--palm-naranja); color: #fff; padding: 4px 12px; font-size: 0.7rem; border-radius: 4px; font-weight: 700; text-transform: uppercase; }

/* Corrección de sintaxis -webkit */
.title-clamp { 
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; 
    min-height: 3rem; 
    color: var(--text-heading); 
    transition: 0.3s;
}
.text-verde-hover:hover { color: var(--palm-verde) !important; }
.link-leer { margin-top: auto; }
.link-leer:hover { color: var(--palm-verde) !important; }

/* =========================================
   7. NAVEGACIÓN LATERAL
   ========================================= */
.quick-nav-right { position: fixed; right: 25px; top: 50%; transform: translateY(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 15px; }
.nav-dot { display: block; width: 12px; height: 12px; background: rgba(0,0,0,0.2); border-radius: 50%; position: relative; transition: 0.3s; }
.nav-dot:hover::after { content: attr(title); position: absolute; right: 25px; top: -4px; background: var(--palm-verde); color: #fff; padding: 3px 10px; border-radius: 4px; font-size: 0.75rem; white-space: nowrap; }
.nav-dot.active { background: var(--palm-verde); transform: scale(1.4); }

/* =========================================
   8. RESPONSIVE (MÓVIL Y TABLET)
   ========================================= */
@media (max-width: 991px) {
    :root { --section-spacing: 50px; }

    /* RESETEO DE ALTURA PARA MÓVIL (EVITA ESPACIOS NEGROS AL REDIMENSIONAR) */
    .hero-slider-corp,
    .hero-slider-corp .carousel-inner,
    .hero-slider-corp .carousel-item {
        height: auto; 
        min-height: 550px;
    }
    
    /* El texto en móvil fluye normal, no absoluto */
    .hero-content {
        width: 100%;
        max-width: none;
        margin-left: 0;
        text-align: center;
        padding: 40px 20px;
    }
    .hero-content h1 { font-size: 2.5rem; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }

    /* Intro & Video */
    .section-about-final { padding: 50px 0; }
    .video-wrapper-final { margin-bottom: 30px; }

    /* Timeline Simplificado */
    .svg-container { display: none; }
    .timeline-card { display: block; margin-bottom: 20px; animation: none; }
    .btn-next-step { display: none; }
    .card-body-custom { flex-direction: column; text-align: center; }
    .icon-large { margin: 0 auto 15px; font-size: 3rem; }

    /* Cifras */
    .divide-white .col-md-3 { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; margin-bottom: 15px; }
    .divide-white .col-6:nth-last-child(-n+2) { border-bottom: none; margin-bottom: 0; }

    /* Productos (2 por fila) */
    .img-container { height: 140px; } 
    .card-body-prod { padding: 15px; }
    .card-body-prod h5 { font-size: 1rem; margin-bottom: 5px; }
    .card-body-prod p { display: none; } 
    .btn-link-prod { font-size: 0.7rem; margin-top: 5px; }

    /* Noticias */
    .noticia-img-wrapper { height: 180px; }
    .title-clamp { font-size: 1.1rem; }

    /* Ocultar elementos PC */
    .quick-nav-right, .scroll-mouse-indicator { display: none; }
}

/* =========================================
   6. SECCIÓN NOTICIAS (MINIMALISTA)
   ========================================= */
.section-news {
    background-color: #fff;
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Tarjeta Principal (Grande) */
.card-news-main {
    display: block;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    color: var(--text-heading);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-news-main:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.news-img-container {
    position: relative;
    height: 300px;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

.news-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.card-news-main:hover .news-img-container img {
    transform: scale(1.05);
}

.badge-cat {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--palm-naranja);
    color: #fff;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.news-content-main {
    padding-top: 20px;
}

.news-meta {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 10px;
}

.news-title-main {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
    transition: color 0.3s;
}

.card-news-main:hover .news-title-main {
    color: var(--palm-verde);
}

.news-excerpt {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.link-read-more {
    font-weight: 700;
    color: var(--palm-verde);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* Tarjetas Laterales (Lista) */
.card-news-side {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    transition: 0.3s;
}

.card-news-side:hover {
    border-color: var(--palm-naranja);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transform: translateX(5px);
}

.side-img-wrapper {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.side-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.side-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 5px 0 10px 0;
    line-height: 1.4;
    /* Cortar título si es muy largo */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-news-side:hover .side-title {
    color: var(--palm-verde);
}

@media (max-width: 991px) {
    .news-img-container { height: 220px; }
    .news-title-main { font-size: 1.4rem; }
    .side-img-wrapper { width: 100px; height: 100px; }
    .side-title { font-size: 1rem; }
}

/* =========================================
   6. NOTICIAS (ESTILO MINIMALISTA)
   ========================================= */
.section-news { background-color: #fff; padding-top: 80px; padding-bottom: 80px; }

/* Tarjeta Grande */
.card-news-main {
    display: block; height: 100%; border-radius: 12px; overflow: hidden;
    position: relative; color: var(--text-heading);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-news-main:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.news-img-container {
    position: relative; height: 320px; width: 100%; overflow: hidden; border-radius: 12px;
}
.news-img-container img {
    width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease;
}
.card-news-main:hover .news-img-container img { transform: scale(1.05); }

.badge-cat {
    position: absolute; top: 20px; left: 20px;
    background: var(--palm-naranja); color: #fff;
    padding: 6px 14px; border-radius: 4px;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(235, 97, 9, 0.4);
}

.news-content-main { padding-top: 25px; }
.news-meta { font-size: 0.9rem; color: #888; margin-bottom: 12px; }
.news-title-main {
    font-size: 1.8rem; font-weight: 700; margin-bottom: 15px;
    line-height: 1.3; transition: color 0.3s;
}
.card-news-main:hover .news-title-main { color: var(--palm-verde); }
.news-excerpt { color: #555; font-size: 1rem; line-height: 1.6; margin-bottom: 20px; }
.link-read-more { font-weight: 700; color: var(--palm-verde); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; }

/* Tarjetas Laterales */
.card-news-side {
    display: flex; align-items: center; gap: 20px; padding: 15px;
    background: #fff; border-radius: 12px; border: 1px solid #f0f0f0; transition: 0.3s;
}
.card-news-side:hover {
    border-color: var(--palm-naranja);
    box-shadow: 0 5px 20px rgba(0,0,0,0.06); transform: translateX(5px);
}
.side-img-wrapper {
    width: 110px; height: 110px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
}
.side-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.side-title {
    font-size: 1.1rem; font-weight: 700; color: var(--text-heading);
    margin: 5px 0 0 0; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-news-side:hover .side-title { color: var(--palm-verde); }

@media (max-width: 991px) {
    .news-img-container { height: 220px; }
    .news-title-main { font-size: 1.4rem; }
    .side-img-wrapper { width: 90px; height: 90px; }
}