:root{
  --primary-green:#1e8449;
  --secondary-green:#27ae60;
  --light-green:#58d68d;
  --accent-green:#a9dfbf;
  --very-light-green:#eafaf1;
  --dark-green:#145a32;
  --white:#ffffff;
  --light-gray:#f8f9fa;
  --dark-gray:#2c3e50;
  --shadow:rgba(0,0,0,.1);
  --gradient-primary:linear-gradient(135deg,#1e8449 0%,#27ae60 100%);
  --gradient-light:linear-gradient(135deg,#eafaf1 0%,#a9dfbf 100%);
  --shadow-light:rgba(45,80,22,.1);
  --shadow-medium:rgba(45,80,22,.15);
  --shadow-heavy:rgba(45,80,22,.25);
}

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

body{
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  line-height:1.6;
  color:var(--text-dark, var(--dark-gray)); /* fallback sin tocar estilos */
}

/* ================================
   Timeline Section (mejorada)
   ================================ */
.timeline-section{
  /* Controles rápidos */
  --gray-0:#f9fafb;
  --gray-1:#f1f5f9;
  --pattern-opacity:.5;
  --pattern-blur:.2px; /* ya no se usa en filter */
  --edge-fade:.65;

  position:relative;
  padding:100px 0;
  background:
    radial-gradient(120% 80% at 50% -10%,var(--gray-1) 0%,var(--gray-0) 60%),
    #fff;
  overflow:hidden;
}

/* Capa 1: Patrón SVG fijo, sin animación ni blur dinámico */
.timeline-section::before{
  content:"";
  position:absolute; inset:0;
  background:url("../img/bg-icons.svg") repeat;
  background-size:140px 140px;
  background-position:0 0;       /* fijo */
  opacity:var(--pattern-opacity);
  filter:none;                   /* evita repintado costoso */
  pointer-events:none;
  z-index:0;

  animation:none !important;     /* sin drift */
  animation-play-state:paused !important;
  will-change:auto;              /* sin reservar capas innecesarias */
}

/* Capa 2: velo/fade para bordes suaves */
.timeline-section::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(255,255,255, calc(var(--edge-fade)*.9)) 0%,
      rgba(255,255,255,0) 12%,
      rgba(255,255,255,0) 88%,
      rgba(255,255,255, calc(var(--edge-fade)*.9)) 100%
    ),
    radial-gradient(120% 100% at 50% 10%,
      rgba(0,0,0,.04) 0%,
      rgba(0,0,0,0) 60%
    );
  pointer-events:none;
  z-index:1;
}

/* Contenido por encima del velo */
.timeline-section>*{ position:relative; z-index:2; }

.timeline-header{ text-align:center; margin-bottom:80px; }

/* Tipografías fluidas */
.timeline-title{
  font-weight:700;
  color:var(--primary-green);
  margin-bottom:1rem;
  font-size:clamp(1.8rem, 3vw + .5rem, 2.8rem);
}
.timeline-subtitle{
  color:var(--secondary-green);
  max-width:600px;
  margin:0 auto;
  font-size:clamp(1rem, .7vw + .7rem, 1.2rem);
}

.timeline{
  position:relative;
  max-width:1000px;
  margin:0 auto;
}

.timeline::after{
  content:'';
  position:absolute;
  width:4px;
  background:#1e5631;
  top:0; bottom:0;
  left:50%;
  margin-left:-2px;
  border-radius:2px;
}

.timeline-item{
  position:relative;
  background-color:inherit;
  width:50%;
  padding:20px 40px;
  margin-bottom:30px;
}

.timeline-item::after{
  content:'';
  position:absolute;
  width:20px; height:20px;
  background:var(--primary-green);
  border:4px solid var(--white);
  top:30px;
  border-radius:50%;
  z-index:1;
  box-shadow:0 0 0 3px var(--primary-green);
}

.timeline-left{ left:0; }
.timeline-right{ left:50%; }

.timeline-left::after{ right:-12px; }
.timeline-right::after{ left:-12px; }

.timeline-content{
  padding:30px;
  background:var(--white);
  position:relative;
  border-radius:15px;
  box-shadow:0 8px 25px var(--shadow-medium);
  border:1px solid rgba(33,231,43,.2);
  transition:transform .3s ease, box-shadow .3s ease;
}

.timeline-content:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 40px var(--shadow-heavy);
}

.timeline-left .timeline-content::after{
  content:" ";
  position:absolute;
  top:22px; right:-15px;
  width:0; height:0; z-index:1;
  border:medium solid var(--white);
  border-width:15px 0 15px 15px;
  border-color:transparent transparent transparent var(--white);
}
.timeline-right .timeline-content::after{
  content:" ";
  position:absolute;
  top:22px; left:-15px;
  width:0; height:0; z-index:1;
  border:medium solid var(--white);
  border-width:15px 15px 15px 0;
  border-color:transparent var(--white) transparent transparent;
}

.timeline-year{
  display:inline-block;
  background:linear-gradient(135deg,var(--primary-green),var(--secondary-green));
  color:var(--white);
  padding:8px 20px;
  border-radius:25px;
  font-weight:700;
  font-size:1.1rem;
  margin-bottom:15px;
}
.timeline-content h3{
  color:var(--primary-green);
  font-weight:700;
  font-size:1.4rem;
  margin-bottom:15px;
}
.timeline-content p{
  color:#000;
  line-height:1.7;
}

.philosophy-badge{
  display:inline-block;
  background:var(--very-light-green);
  color:var(--primary-green);
  padding:8px 16px;
  border-radius:15px;
  font-size:.9rem;
  font-weight:600;
  border:1px solid var(--accent-green);
}


/* ================================
   Team Section (sin tocar efectos)
   ================================ */
.equipo-section{
  background:#f8f9fa;
  padding:100px 0;
  position:relative;
}
.equipo-title{ text-align:center; margin-bottom:80px; }
.titulo-us2{
  color:var(--primary-green);
  font-weight:700;
  margin-bottom:20px;
  position:relative;
  font-size:clamp(1.8rem, 3.2vw + .5rem, 3.5rem);
}
.titulo-us2::after{
  content:'';
  position:absolute; bottom:-10px; left:50%;
  transform:translateX(-50%);
  width:80px; height:4px;
  background:var(--gradient-primary);
  border-radius:2px;
}
.equipo-title p{
  color:var(--dark-green);
  font-weight:300;
  font-size:clamp(1rem, .6vw + .7rem, 1.3rem);
}
.equipo-grid{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}
.equipo-card{
  background:var(--white);
  border-radius:25px;
  overflow:hidden;
  box-shadow:0 20px 40px var(--shadow);
  transition:all .3s ease;
  border:2px solid var(--very-light-green);
  position:relative;
  display:flex;
  align-items:center;
  padding:30px;
  text-align:left;
  margin-bottom:40px;
}
.equipo-card::before{
  content:'';
  position:absolute; top:0; left:0;
  width:100%; height:5px;
  background:var(--gradient-primary);
}

.equipo-img{
  flex:0 0 150px;
  display:flex; justify-content:center; align-items:center;
  margin-right:30px;
}
.equipo-card img{
  width:300px; height:300px;
  border-radius:50%;
  object-fit:contain;
  border:5px solid var(--accent-green);
  margin:0;
  transition:all .3s ease;
}
.equipo-card-body{ flex:1; padding:0; text-align:left; }
.equipo-card-body h5{
  font-size:clamp(1.2rem, .9vw + .9rem, 1.8rem);
  color:var(--primary-green);
  margin-bottom:10px; font-weight:600;
}
.rol{
  color:var(--secondary-green);
  font-weight:600;
  font-size:clamp(.85rem, .6vw + .6rem, 1.2rem);
  margin-bottom:15px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.equipo-card-body p{
  color:var(--dark-gray);
  line-height:1.6;
  font-size:1rem;
  margin-bottom:10px;
}

/* ================================
   Differentiator Section (intacto)
   ================================ */
.differentiator-section{
  margin:80px 0;
  padding:50px 0;
  background:#005517;
  color:var(--white);
  position:relative;
}
.differentiator-content{
  position:relative; z-index:2;
  text-align:center;
  max-width:1200px; margin:0 auto;
  padding:0 20px;
}
.differentiator-title{
  font-weight:700;
  margin-bottom:1.5rem;
  text-shadow:0 2px 4px rgba(0,0,0,.3);
  font-size:clamp(1.6rem, 2.2vw + .6rem, 2.5rem);
}
.differentiator-text{
  font-size:clamp(.95rem, .6vw + .6rem, 1.1rem);
  line-height:1.6; margin-bottom:2.5rem; opacity:.95;
}
.cta-button{
  display:inline-block;
  background:var(--white);
  color:var(--primary-green);
  padding:14px 32px;
  border-radius:50px;
  font-weight:700; font-size:1rem;
  text-decoration:none;
  transition:all .3s ease;
  box-shadow:0 6px 20px rgba(0,0,0,.2);
  border:2px solid transparent;
}
.cta-button:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(0,0,0,.3);
  color:var(--primary-green);
  border-color:var(--white);
  background:rgba(255,255,255,.95);
}

/* Features Grid (mantiene blur y hover) */
.features-grid{
  display:flex; justify-content:center; gap:20px;
  margin:40px 0; overflow-x:auto; padding:0 20px 8px;
}
.features-grid::-webkit-scrollbar{ height:6px; }
.features-grid::-webkit-scrollbar-thumb{ background:var(--accent-green); border-radius:10px; }
.features-grid::-webkit-scrollbar-track{ background:transparent; }
.feature-card{
  flex:0 0 250px;
  background:rgba(255,255,255,.1);
  padding:20px; border-radius:12px; text-align:center;
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);
  transition:all .3s ease;
}
.feature-card:hover{ transform:translateY(-4px); background:rgba(255,255,255,.15); }
.feature-icon{ font-size:2rem; margin-bottom:12px; color:var(--accent-green); }
.feature-title{ font-size:1rem; font-weight:600; margin-bottom:8px; }
.feature-text{ font-size:.85rem; opacity:.9; line-height:1.4; }

/* Waves (se mantienen; solo responsive height) */
.wave-divider-testimonios{
  position:absolute; left:0; width:100%; height:80px;
  background-size:cover; pointer-events:none; z-index:1;
}
.wave-divider-testimonios.top{
  top:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="%23ffffff"></path></svg>') no-repeat center top;
}
.wave-divider-testimonios.bottom{
  bottom:0; transform:rotate(180deg);
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="%23ffffff"></path></svg>') no-repeat center top;
}

/* Efectos base (se respetan) */
.fade-in{ opacity:0; transform:translateY(40px); transition:all .8s ease; }
.fade-in.appear{ opacity:1; transform:translateY(0); }
.slide-left{ opacity:0; transform:translateX(-60px); transition:all .8s ease; }
.slide-left.appear{ opacity:1; transform:translateX(0); }
.slide-right{ opacity:0; transform:translateX(60px); transition:all .8s ease; }
.slide-right.appear{ opacity:1; transform:translateX(0); }
.zoom-in{ opacity:0; transform:scale(.8); transition:all .8s ease; }
.zoom-in.appear{ opacity:1; transform:scale(1); }

/* =========================================
   RESPONSIVE (sin eliminar efectos/formas)
   ========================================= */

/* Celulares ≤576px */
@media (max-width:576px){
  .timeline-section{ padding:70px 0; }
  .timeline-header{ margin-bottom:48px; }

  .timeline::after{ left:20px; }
  .timeline-item{
    width:100%;
    left:0;
    padding-left:60px; padding-right:20px;
  }
  .timeline-item::after{ left:10px; width:16px; height:16px; }
  .timeline-left .timeline-content::after,
  .timeline-right .timeline-content::after{ display:none; } /* solo oculta la flechita en móviles */

  .timeline-content{ padding:22px; }

  .equipo-card{
    flex-direction:column;
    text-align:center;
    padding:22px;
  }
  .equipo-img{ margin:0 0 18px 0; }
  .equipo-card img{ width:180px; height:180px; object-fit:contain; }

  .features-grid{ gap:14px; }
  .feature-card{ flex:0 0 210px; }

  .wave-divider-testimonios{ height:60px; }
}

/* Tablets en vertical ≤768px */
@media (max-width:768px){
  .timeline::after{ left:30px; }
  .timeline-item{
    width:100%;
    left:0;
    padding-left:70px; padding-right:25px;
  }
  .timeline-item::after{ left:18px; }
  .timeline-content::after{ display:none; } /* mantiene caja limpia en mobile/tablet */

  .equipo-card{ flex-direction:column; align-items:center; }
  .equipo-card img{ width:220px; height:220px; }

  .features-grid{ flex-wrap:wrap; justify-content:center; }
  .feature-card{ flex:1 1 45%; min-width:200px; }

  .wave-divider-testimonios{ height:70px; }
}

/* ================================
   Differentiator: 2x2 en tablets
   ================================ */

/* Rango de tablets (vertical y horizontal) */
@media (min-width: 600px) and (max-width: 1024px) {
  /* Cambiamos de flex a grid SOLO en tablets */
  .features-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    grid-auto-rows: 1fr;            /* alturas parejas */
    gap: 20px;                      /* mismo gap que tenías en flex */
    overflow-x: visible;            /* sin scroll horizontal en grid */
    padding-bottom: 0;              /* ya no hace falta el “rail” */
  }

  /* Cards estiran a la misma altura y conservan efectos */
  .feature-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;    /* respeta icono/título/texto */
    /* Mantiene: blur, hover, borde y transición del CSS original */
  }

  /* Ajustes ópticos sutiles para tablet */
  .feature-icon { font-size: 2.1rem; }
  .feature-title { font-size: 1.05rem; }
  .feature-text { font-size: 0.9rem; line-height: 1.5; }
}

/* Opcional: desktop amplio = 4 en fila (se mantiene responsivo) */
@media (min-width: 1200px) {
  .features-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 24px;
    overflow-x: visible;
  }
}

/* Laptops ≥1200px */
@media (min-width:1200px){
  .timeline-content{ padding:34px; }
  .equipo-card img{ width:300px; height:300px; }
}

/* PCs muy grandes ≥1400px (solo respira más) */
@media (min-width:1400px){
  .timeline-section{ padding:120px 0; }
  .timeline{ max-width:1100px; }
  .equipo-grid{ max-width:1280px; }
}


.differentiator-section {
  position: relative; /* Necesario para ubicar los dividers dentro */
}

/* ===== Divider contenedor ===== */
.divider {
  position: absolute;
  left: 0; 
  right: 0;
  width: 100%;
  pointer-events: none;
}
.divider--top { top: -55px; }       /* ahora arriba */
.divider--top2 { top: -55px; }       /* ahora arriba */
.divider--bottom { bottom: -55px; } /* ahora abajo */

/* ===== Divider capa ===== */
.divider__layer {
  display: block;
  width: 100%;
  height: var(--divider-height, 50px);
  background-image: var(--divider-image, none);
  background-size: var(--divider-size, 1016px 100%);
  background-repeat: repeat-x;
  background-position: center bottom;
  opacity: var(--divider-opacity, 1);
  transform: scaleY(var(--divider-flip, 1));
  transform-origin: center;
}

/* Configuración de cada divider */
#divider-top {
  --divider-image: url("../img/divisor-news.svg");
  --divider-size: 1016px 100%;
  --divider-height: 60px;
  --divider-opacity: 1;
  --divider-flip: 1;
}
#divider-top2 {
  --divider-image: url("../img/divisor-grayeq.svg");
  --divider-size: 1016px 100%;
  --divider-height: 60px;
  --divider-opacity: 1;
  --divider-flip: 1;
  z-index: 1000 !important;
}


#divider-bottom {
  --divider-image: url("../img/divisor-news.svg");
  --divider-size: 1016px 100%;
  --divider-height: 60px;
  --divider-opacity: 1;
  --divider-flip: -1;
}