:root {
  --primary: #4F6F52;
  --primary-dark: #3A5540;
  --primary-light: #86A789;
  --secondary: #F5EFE6;
  --accent: #D8C4B6;
  --dark: #1A1A1A;
  --light: #FFFFFF;
  --gray: #F5F5F5;
  --gray-dark: #E0E0E0;
  --danger: #E74C3C;
  --warning: #F39C12;
  --success: #2ECC71;

  --font-main: 'Inter', sans-serif;
  --border-radius: 12px;
  --box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  --transition: all .4s cubic-bezier(.175,.885,.32,1.275);
}

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

body {
  font-family: var(--font-main);
  color: var(--dark);
  line-height: 1.6;
  overflow-x: hidden;
  background-color: var(--light);
}

/* Tipografía */
h1, h2, h3, h4, h5, h6 { font-weight:800; line-height:1.2; margin-bottom:1.5rem; }
h1 { font-size:3.5rem; color: var(--light); }
h2 { font-size:2.8rem; }
h3 { font-size:2rem; }
p { margin-bottom:1.5rem; font-size:1.1rem; }
a { text-decoration:none; color:inherit; transition:var(--transition); }

/* Layout */
.container { width:100%; max-width:1280px; margin:0 auto; padding:0 2rem; }
section { padding:6rem 0; }
.section-light { background-color: var(--light); }
.section-dark {
  background-color: var(--primary);
  color: var(--light);
  position: relative; overflow:hidden;
}
.section-dark::before {
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%233a5540' fill-opacity='0.1'/%3E%3C/svg%3E") no-repeat;
  opacity:.3;
}

/* Botones */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:1rem 2rem; border-radius:var(--border-radius);
  font-weight:600; cursor:pointer; transition:var(--transition);
  border:2px solid transparent; gap:.5rem; position:relative; overflow:hidden;
}
.btn::before {
  content:''; position:absolute; inset:0; left:-100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition:var(--transition);
}
.btn:hover::before { left:100%; }
.btn-primary { background-color:var(--primary); color:var(--light); }
.btn-primary:hover { background-color:var(--primary-dark); transform:translateY(-3px); box-shadow:0 15px 30px rgba(79,111,82,.3); }
.btn-secondary { background:transparent; color:var(--primary); border-color:var(--primary); }
.btn-secondary:hover { background:var(--primary); color:var(--light); transform:translateY(-3px); box-shadow:0 15px 30px rgba(79,111,82,.2); }

.btn-hero-primary { background-color:var(--light); color:var(--primary); padding:1.2rem 2.5rem; font-size:1.1rem; }
.btn-hero-primary:hover { background-color:var(--primary-dark); color:var(--light); transform:translateY(-3px); box-shadow:0 15px 30px rgba(255,255,255,.2); }
.btn-hero-secondary { background:transparent; color:var(--light); border:2px solid var(--light); padding:1.2rem 2.5rem; font-size:1.1rem; }
.btn-hero-secondary:hover { background:var(--light); color:var(--primary); transform:translateY(-3px); box-shadow:0 15px 30px rgba(255,255,255,.2); }

.tag {
  display:inline-block; padding:.5rem 1.2rem; background-color:var(--primary-light);
  color:var(--light); border-radius:30px; font-size:.8rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.5rem;
}
.tag-purple { background-color:#6C63FF; }

/* Navbar */
.navbar {
  position:fixed; top:0; left:0; width:100%;
  background-color: rgba(255,255,255,.95);
  box-shadow:0 5px 20px rgba(0,0,0,.1);
  z-index:1000; padding:1rem 0; transition:var(--transition); backdrop-filter: blur(10px);
}
.navbar.scrolled { padding:.8rem 0; background-color:rgba(255,255,255,.98); box-shadow:0 5px 25px rgba(0,0,0,.15); }
.navbar-content { display:flex; justify-content:space-between; align-items:center; }
.navbar-logo { display:flex; align-items:center; gap:.8rem; font-weight:800; font-size:1.5rem; color:var(--primary); }
.navbar-logo img { height:45px; transition:var(--transition); }
.navbar-logo:hover img { transform: rotate(5deg); }
.navbar-links { display:flex; gap:2rem; }
.nav-link { font-weight:600; color:var(--dark); position:relative; padding:.5rem 0; }
.nav-link:hover { color:var(--primary); }
.nav-link::after {
  content:''; position:absolute; bottom:0; left:0; width:0; height:3px;
  background-color:var(--primary); transition:var(--transition); border-radius:3px;
}
.nav-link:hover::after { width:100%; }
.navbar-cta { display:flex; gap:1rem; }

/* Hero */
.hero {
  position:relative; height:100vh; min-height:800px; display:flex; align-items:center;
  color:var(--light); margin-top:-80px; padding-top:80px; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 100%),
              url('../Imagenes/imagenherosection.png') center/cover no-repeat;
  z-index:-1;
}
.hero::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:20%;
  background:linear-gradient(to top, var(--light), transparent); z-index:-1; opacity:.2;
}
.hero-container { position:relative; z-index:2; }
.hero-content { max-width:700px; }
.hero-title {
  font-size:4rem; margin-bottom:1.5rem; line-height:1.1; animation:fadeInUp 1s ease-out;
  color:var(--light) !important; text-shadow:0 6px 30px rgba(0,0,0,.35);
}
.hero-subtitle { font-size:1.3rem; margin-bottom:2.5rem; opacity:0; animation:fadeInUp 1s ease-out .2s forwards; }
.hero-cta-buttons { display:flex; gap:1.5rem; margin-top:2.5rem; opacity:0; animation:fadeInUp 1s ease-out .4s forwards; }

/* Solución – NUEVA estructura */
/* Solución más limpia */
.solution-feature-stack p { margin-bottom: .8rem; }
.solution-visual-card { background: var(--light); border: 1px solid var(--gray-dark); border-radius: 16px; box-shadow: var(--box-shadow); }
.sv-body--row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 1.5rem; }
@media (min-width: 768px) {
  .sv-body--row { grid-template-columns: repeat(4, 1fr); }
}
.sv-stat.simple { background: var(--secondary); border-radius: 12px; padding: 1rem; text-align:center; }
.sv-stat.simple .sv-number { display:block; font-size: 1.9rem; font-weight: 800; color: var(--primary); }
.sv-stat.simple .sv-label { font-weight: 600; opacity: .95; font-size: .95rem; }
/* Fondo y aire para la sección de Solución */


/* Grid y separación general */
.solution-new-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: start;
}

/* Más espacio entre botones y tarjetas (en cualquier lado) */
.solution-feature-stack .solution-actions { margin-top: 1.2rem; }
.solution-visual-card { margin-top: 2rem; }

/* Card contenedora de los indicadores */
.solution-visual-card {
  background: var(--light);
  border: 1px solid var(--gray-dark);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  overflow: hidden;
}

/* Grid de indicadores */
.sv-body--row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 1.6rem;
}
@media (min-width: 900px) {
  .sv-body--row { grid-template-columns: repeat(4, 1fr); }
}

/* Tarjetitas: estilo + microinteracciones */
.sv-stat.simple {
  background: linear-gradient(180deg, #fff 0%, #f6f3ee 100%);
  border: 1px solid var(--gray-dark);
  border-radius: 14px;
  padding: 1.1rem 1rem;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}
.sv-stat.simple .sv-number {
  display:block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.05;
}
.sv-stat.simple .sv-label {
  font-weight: 600;
  opacity: .95;
  font-size: .95rem;
}

/* Hover / foco (tacto más “bonito”) */
.sv-stat.simple:hover,
.sv-stat.simple:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0,0,0,.10);
  border-color: rgba(79,111,82,.35);
}

/* Entrada suave con tus clases existentes de fade-in */
.sv-stat.simple.fade-in { opacity: 0; transform: translateY(14px); }
.sv-stat.simple.fade-in.animated { opacity: 1; transform: translateY(0); }

/* Responsive extra: más aire en móviles */
@media (max-width: 768px) {
  .solution-new-grid { grid-template-columns: 1fr; gap: 2rem; }
  .solution-visual-card { margin-top: 1rem; }
}
/* Fondo de la sección con degradado sutil */
.solution-section {
  background: linear-gradient(160deg, var(--secondary) 0%, var(--accent) 45%, #e0d5cb 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 0;
  border-top: 1px solid rgba(79, 111, 82, 0.05);
}

/* Estructura nueva */
.solution-header { max-width: 980px; margin: 0 auto 1.5rem; }
.solution-body { max-width: 980px; margin: 0 auto; }
.solution-actions { margin-top: 1.25rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* Lista de features con iconos */
/* --- Rediseño Sección Solución: Paneles Etéreos --- */
.solution-tech-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Simetría perfecta 2x2 */
  gap: 3rem;
  margin: 4rem 0;
  position: relative;
}

.tech-panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.03); /* Casi transparente */
  border-left: 3px solid var(--primary-light);
  transition: all 0.5s ease;
  z-index: 1;
}

/* El orbe flotante de fondo */
.tech-orb {
  position: absolute;
  width: 120px;
  height: 120px;
  filter: blur(50px);
  border-radius: 50%;
  z-index: -1;
  opacity: 0.15;
  transition: all 0.6s ease;
  animation: floatOrb 6s infinite ease-in-out;
}

.orb-1 { background: var(--primary); top: -20%; left: -10%; }
.orb-2 { background: var(--accent); bottom: -20%; right: 10%; animation-delay: 1s; }
.orb-3 { background: var(--primary-light); top: 10%; right: -10%; animation-delay: 2s; }
.orb-4 { background: var(--primary-dark); bottom: 10%; left: 20%; animation-delay: 3s; }

.tech-icon {
  font-size: 2.5rem;
  color: var(--primary);
  filter: drop-shadow(0 0 10px rgba(79, 111, 82, 0.2));
  transition: transform 0.4s ease;
}

.tech-text h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  color: var(--primary-dark);
}

.tech-text p {
  font-size: 1rem;
  margin: 0;
  color: #444;
  line-height: 1.5;
}

/* Efecto al pasar el mouse */
.tech-panel:hover {
  background: rgba(255, 255, 255, 0.6);
  transform: translateX(10px);
  border-left-width: 6px;
}

.tech-panel:hover .tech-icon {
  transform: scale(1.2) rotate(-5deg);
}

.tech-panel:hover .tech-orb {
  opacity: 0.4;
  transform: scale(1.5);
}

@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -20px); }
}

/* Responsive */
@media (max-width: 900px) {
  .solution-tech-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* Indicadores abajo, con aire extra */
.solution-visual { margin: 2rem auto 0; max-width: 1080px; }
.solution-visual-card {
  background: var(--light);
  border: 1px solid var(--gray-dark);
  border-radius: 16px;
  box-shadow: var(--box-shadow);
}
.sv-body--row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.25rem; }
.sv-stat.simple {
  background: var(--secondary);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.sv-stat.simple:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,.08); }
.sv-stat.simple .sv-number { display:block; font-size:1.9rem; font-weight:800; color:var(--primary); }
.sv-stat.simple .sv-label { font-weight:600; opacity:.95; font-size:.95rem; }

/* Aparición en scroll (más suave que la anterior) */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform: none; }
.reveal:nth-child(1){ transition-delay: .05s }
.reveal:nth-child(2){ transition-delay: .10s }
.reveal:nth-child(3){ transition-delay: .15s }
.reveal:nth-child(4){ transition-delay: .20s }

/* Responsive */
@media (max-width: 1024px){
  .solution-feature-list{ grid-template-columns: 1fr; }
  .sv-body--row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .sv-body--row { grid-template-columns: 1fr; }
  .solution-actions{ justify-content: flex-start; }
}
/* Servicios (planes) – igual */
/* Servicios (planes) con Carrusel */
.services-section { 
  position: relative; 
  overflow: hidden; 
  background-color: #f8f9fa; /* Color gris clarito de fondo */
  padding: 80px 0;
}
.services-header { text-align: center; max-width: 800px; margin: 0 auto 3rem; }

.plans-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px; /* Espacio para que las flechas no tapen el contenido */
}

.plans-viewport {
  overflow: hidden;
  width: 100%;
  padding: 40px 0;
}

.plans-track {
  display: flex;
  gap: 2rem; /* Espacio entre cuadros */
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Movimiento suave */
  padding: 20px 0;
}

.plan-slide {
  min-width: calc(33.333% - 1.35rem);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.plan-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem 2rem 2.5rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.6s ease, border-color 0.6s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid #e9ecef;
  border-top: 3px solid rgba(79, 111, 82, 0.25);
  height: 100%;
  transform: scale(0.9);
  opacity: 0.6;
  display: flex;
  flex-direction: column;
}

/* Añade este bloque nuevo justo debajo de .plan-card */
.plan-card.is-active {
  transform: scale(1.05); /* El del centro crece */
  opacity: 1; /* Brillo total para el activo */
  z-index: 10;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  border-color: var(--primary);
}


.plan-card.popular {
  border: 1px solid #4F6F52;
  border-top: 3px solid #4F6F52;
}

.plan-card.popular::before {
  content: 'MÁS POPULAR'; 
  position: absolute; 
  top: 0; right: 0; 
  background: #4F6F52; 
  color: white;
  padding: .5rem 1.5rem; 
  font-size: .8rem; 
  font-weight: 700; 
  border-radius: 0 0 0 12px;
}

.plan-name { font-size: 1.1rem; color: #4F6F52; margin: 0.25rem 0 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
.plan-price { font-size: 2.8rem; font-weight: 800; color: #1a1a1a; margin-bottom: 0; padding-bottom: 1.25rem; border-bottom: 1px solid #e9ecef; }
.plan-price span { font-size: 1rem; font-weight: 500; color: #6c757d; }
.plan-description {
  font-size: 0.88rem;
  color: #5a7a5c;
  font-weight: 500;
  text-align: center;
  margin: 1.25rem 0 1.5rem;
  padding: 0.55rem 1rem;
  background: rgba(79, 111, 82, 0.08);
  border-radius: 6px;
  line-height: 1.5;
}
.plan-features { list-style: none; margin-bottom: 2rem; text-align: left; padding: 0; flex: 1; }
.plan-features li { display: flex; align-items: center; gap: .75rem; margin-bottom: 0.85rem; font-size: 0.93rem; color: #444; }
.plan-features i { font-size: 1rem; flex-shrink: 0; }
.plan-features .fa-check-circle { color: #4F6F52; }
.plan-features .fa-times-circle { color: #dc3545; }
.plan-card .btn { margin-top: auto; }

/* Estilo de las flechitas */
.plans-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 50%;
  color: #4F6F52;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.plans-arrow:hover {
  background: #4F6F52;
  color: white;
}

.plans-prev { left: 0; }
.plans-next { right: 0; }

/* Para que se vea bien en celulares */
@media (max-width: 1024px) {
  .plan-slide { min-width: calc(50% - 1rem); }
}
@media (max-width: 768px) {
  .plan-slide { min-width: 100%; }
  .plans-container { padding: 0 40px; }
  .plan-card { transform: scale(1); opacity: 1; }
}

/* IA – sin la tag */
.ai-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:4rem; align-items:center; }
.ai-media-container { position:relative; border-radius:var(--border-radius); overflow:hidden; box-shadow:var(--box-shadow); transform:perspective(1000px) rotateY(-5deg); transition:var(--transition); }
.ai-media-container:hover { transform:perspective(1000px) rotateY(0); }
.ai-video { width:100%; height:auto; border-radius:var(--border-radius); display:block; }
.ai-content { max-width:500px; }
.ai-title { margin-bottom:2rem; }
.ai-description { margin-bottom:2.5rem; font-size:1.15rem; }
.ai-features-list { list-style:none; }
.ai-features-list li { display:flex; gap:1.2rem; margin-bottom:2rem; align-items:flex-start; }
.ai-features-list i { font-size:1.8rem; color:var(--primary-light); margin-top:.25rem; flex-shrink:0; }
.ai-icon-purple { color:#6C63FF !important; }

/* UAVs – catálogo */
.uavs-header { text-align:center; max-width:900px; margin:0 auto 3rem; }
.uav-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; max-width:860px; margin:0 auto; }
.uav-card { background:var(--light); border:1px solid var(--gray-dark); border-radius:16px; box-shadow:var(--box-shadow); overflow:hidden; transition:var(--transition); display:flex; flex-direction:column; }
.uav-card:hover { transform:translateY(-8px); box-shadow:0 18px 36px rgba(0,0,0,.12); }
.uav-image { width:100%; height:200px; object-fit:cover; }
.uav-body { padding:1.4rem; display:flex; flex-direction:column; gap:.7rem; }
.uav-name { color:var(--primary); font-size:1.4rem; }
.uav-desc { opacity:.9; }
.uav-actions { margin-top:.4rem; }
.uav-specs { display:none; margin-top:.8rem; padding:1rem; background:var(--gray); border-radius:12px; }
.uav-specs ul { list-style:none; display:grid; gap:.6rem; }
.uav-specs li i { color:var(--primary); width:22px; }

.uav-note { margin-top:1.5rem; opacity:.85; text-align:center; }

/* Etiqueta PROTOTIPO en UAVs */
.uav-card.prototype::before {
  content: 'PROTOTIPO';
  position: absolute;
  top: 0; 
  right: 0;
  background: var(--primary);
  color: var(--light);
  padding: .5rem 1rem;
  font-size: .8rem; 
  font-weight: 700;
  border-bottom-left-radius: 12px;
}

.uav-card { position: relative; }


/* Partners */
.partners-section { text-align:center; position:relative; }
.partners-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:3rem; margin-top:4rem; }
.partner-card { background:var(--light); padding:2rem; border-radius:var(--border-radius); box-shadow:var(--box-shadow); transition:var(--transition); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.partner-card:hover { transform:translateY(-10px); box-shadow:0 15px 30px rgba(0,0,0,.1); }
.partner-card img { height:80px; margin-bottom:1.5rem; object-fit:contain; filter:grayscale(100%); opacity:.7; transition:var(--transition); }
.partner-card:hover img { filter:grayscale(0); opacity:1; }
.partner-card p { font-weight:600; color:var(--primary); margin-bottom:0; }

/* Fondo suave y soporte imágenes reales en partners */
.partners-section {
  background: linear-gradient(180deg, #fff 0%, #f8f9f8 100%);
}

.partner-card img {
  height: 80px;
  object-fit: contain;
  filter: none;   /* sin escala de grises */
  opacity: 1;     /* opacasión normal */
}


/* Equipo (igual) */
.team-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:3rem; margin-top:4rem; }
.team-member { background:var(--light); border-radius:var(--border-radius); overflow:hidden; box-shadow:var(--box-shadow); transition:var(--transition); text-align:center; }
.team-member:hover { transform:translateY(-10px); box-shadow:0 20px 40px rgba(0,0,0,.15); }
.team-image { width:100%; height:300px; object-fit:cover; }
.team-info { padding:2rem; }
.team-name { font-size:1.5rem; color:var(--primary); margin-bottom:.5rem; }
.team-role { color:var(--primary-light); font-weight:600; margin-bottom:1.5rem; }
.team-description { margin-bottom:1.5rem; }
.team-social { display:flex; justify-content:center; gap:1rem; }
.team-social a {
  display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  background:var(--gray); border-radius:50%; color:var(--primary); transition:var(--transition);
}
.team-social a:hover { background:var(--primary); color:var(--light); transform:translateY(-3px); }
/* Team: ver más / ver menos */
.team-grid--more {
  display: none;
}
.team-grid--more.is-open {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.team-actions {
  text-align: center; 
  margin-top: 2rem;
}
/* CTA (más transparente + formulario) */
.cta-section {
  position:relative; padding:8rem 0; color:var(--light); text-align:center; overflow:hidden;
}
.cta-section::before {
  content:''; position:absolute; inset:0;
  /* Menos opacidad que antes para verse menos “verde” */
  background: linear-gradient(135deg, rgba(79,111,82,0.6) 0%, rgba(58,85,64,0.6) 100%),
              url('https://images.unsplash.com/photo-1586348943529-beaae6c28db9?auto=format&fit=crop&w=1815&q=80') center/cover no-repeat;
  z-index:-1;
}
.cta-container { position:relative; z-index:2; max-width:900px; margin:0 auto; }
.cta-title { font-size:3.2rem; margin-bottom:1.2rem; }
.cta-subtitle { font-size:1.2rem; margin-bottom:2rem; opacity:.95; }

.quote-form {
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  border-radius:16px; padding:1.5rem; backdrop-filter: blur(4px);
}
.qf-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.qf-field { display:flex; flex-direction:column; gap:.4rem; text-align:left; }
.qf-field label { font-weight:600; opacity:.95; }
.qf-field input, .qf-field textarea {
  width:100%; border-radius:10px; border:1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.25); color:#fff; padding:.9rem 1rem;
}
.qf-field input::placeholder, .qf-field textarea::placeholder { color:rgba(255,255,255,.8); }
.qf-actions { display:flex; gap:1rem; justify-content:center; margin-top:1rem; flex-wrap:wrap; }
.qf-legal { margin-top:.7rem; font-size:.9rem; opacity:.9; }
.qf-legal a { text-decoration:underline; }

/* Footer */
.footer { background-color:var(--primary-dark); color:var(--light); padding:5rem 0 2rem; position:relative; }
.footer::before { content:''; position:absolute; top:0; left:0; width:100%; height:5px; background:linear-gradient(90deg, var(--primary-light), var(--accent), var(--primary-light)); }
.footer-content { display:grid; grid-template-columns:repeat(4,1fr); gap:3rem; margin-bottom:4rem; }
.footer-logo { display:flex; align-items:center; gap:.8rem; font-weight:800; font-size:1.5rem; margin-bottom:1.5rem; }
.footer-logo img { height:40px; }
.footer-about { margin-bottom:2rem; opacity:.8; }
.footer-links { display:flex; flex-direction:column; gap:1rem; }
.footer-title { font-size:1.3rem; margin-bottom:1.5rem; position:relative; padding-bottom:.5rem; }
.footer-title::after { content:''; position:absolute; bottom:0; left:0; width:40px; height:3px; background-color:var(--accent); border-radius:3px; }
.footer-links a { transition:var(--transition); opacity:.8; display:flex; align-items:center; gap:.5rem; }
.footer-links a:hover { opacity:1; color:var(--accent); transform:translateX(5px); }
.footer-social { display:flex; gap:1rem; margin-top:1.5rem; }
.footer-social a {
  display:flex; align-items:center; justify-content:center; width:45px; height:45px;
  background-color:rgba(255,255,255,.1); border-radius:50%; transition:var(--transition);
}
.footer-social a:hover { background-color:var(--accent); color:var(--primary-dark); transform:translateY(-5px); }
.footer-bottom { text-align:center; padding-top:3rem; border-top:1px solid rgba(255,255,255,.1); }
.copyright { margin-bottom:1.5rem; opacity:.7; }
.legal-links { display:flex; justify-content:center; gap:2rem; }
.legal-links a { opacity:.7; transition:var(--transition); font-size:.9rem; }
.legal-links a:hover { opacity:1; color:var(--accent); }

/* Animaciones */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-15px); }
}
.fade-in { opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s ease; }
.fade-in.animated { opacity:1; transform:translateY(0); }
.float { animation: float 5s ease-in-out infinite; }

/* Responsive */
@media (max-width:1200px) {
  .plans-grid { grid-template-columns:1fr; max-width:500px; margin:3rem auto; }
  .plan-card.popular { transform:scale(1); }
}
@media (max-width:1024px) {
  h1 { font-size:3rem; }
  h2 { font-size:2.5rem; }
  .hero-title { font-size:3.2rem; }
  .solution-new-grid, .ai-grid { grid-template-columns:1fr; gap:2rem; }
  .uav-cards { grid-template-columns:repeat(2,1fr); max-width:100%; }
}
@media (max-width:768px) {
  h1 { font-size:2.5rem; }
  h2 { font-size:2rem; }
  h3 { font-size:1.7rem; }
  .container { padding:0 1.5rem; }
  section { padding:4rem 0; }
  .navbar-content { flex-direction:column; gap:1.5rem; }
  .navbar-links { flex-wrap:wrap; justify-content:center; gap:1.2rem; }
  .hero { min-height:700px; text-align:center; }
  .hero-title { font-size:2.8rem; }
  .hero-subtitle { font-size:1.1rem; }
  .hero-cta-buttons { flex-direction:column; gap:1.2rem; }
  .uav-cards { grid-template-columns:1fr; }
  .team-grid--more.is-open { grid-template-columns: 1fr; }
  .footer-content { grid-template-columns:1fr; text-align:center; gap:2.5rem; }
  .footer-title::after { left:50%; transform:translateX(-50%); }
  .legal-links { flex-direction:column; gap:1rem; }
}
@media (max-width:480px) {
  h1 { font-size:2.2rem; }
  h2 { font-size:1.8rem; }
  section { padding:3rem 0; }
  .hero { min-height:600px; }
  .hero-title { font-size:2.2rem; }
  .btn { padding:.9rem 1.8rem; }
}
/* ==== IA: fondo degradado + video a la izquierda + títulos sin iconos ==== */

/* Quita el patrón de .section-dark y aplica degradado solo en #ai */
#ai.section-dark {
  background: linear-gradient(135deg, #4F6F52 0%, #6f8f73 40%, #86A789 100%);
}
#ai.section-dark::before {
  background: none;
  opacity: 0;
}

/* Contenedor del video (izquierda) más firme y sin “recuadro fantasma” */
.ai-media-container {
  transform: none;              /* quitamos el tilt */
  background: transparent;
  min-height: 360px;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}
.ai-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;            /* llena el bloque sin barras negras */
  border-radius: var(--border-radius);
  opacity: 1;                   /* visible aun si canplay tarda */
}

/* Lista sin iconos, con subrayado moderno en h3 */
.ai-features-list {
  list-style: none;
  display: grid;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
}
.ai-features-list li {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.ai-features-list li:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  background: rgba(255,255,255,0.09);
}
/* por si quedaron <i> en el HTML viejo, los ocultamos igual */
.ai-features-list i { display: none !important; }

/* Subrayado degradado en los subtítulos */
.ai-features-list h3 {
  margin: 0 0 .4rem 0;
  position: relative;
}
.ai-features-list h3::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin-top: .45rem;
  border-radius: 3px;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,.7) 40%, #cfe3d2 100%);
}

/* Texto del párrafo un poco más legible sobre verde */
#ai .ai-description,
#ai .ai-features-list p {
  color: rgba(255,255,255,.95);
}

/* Responsive: apila mejor en pantallas pequeñas */
@media (max-width: 1024px) {
  .ai-grid { grid-template-columns: 1fr; gap: 2rem; }
  .ai-media-container { min-height: 280px; }
}
/* Contenedor del video YouTube */
.ai-media-container {
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--box-shadow);
  background: #000;          /* evita bordes blancos mientras carga */
  transform: none;           /* opcional: quita la rotación 3D si estorba */
}

/* Wrapper responsivo con relación 16:9 */
.iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;      /* mantiene 16:9 en cualquier ancho */
}

/* El iframe llena completamente el wrapper */
.iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* --- AI: forzar fondo y apagar el overlay genérico --- */
#ai.ai-section {
  /* Elige un fondo (deja una y comenta las demás) */
  /* 1) Verde suave moderno */
 /background: linear-gradient(135deg, #5f7c62 0%, #7ea889 50%, #a5c9aa 100%) !important;

  /* 2) Verde con “neblina” radial */
  /*background: radial-gradient(1200px 600px at 25% 15%, #6b876e 0%, #5f7c62 45%, #4f6f52 100%) !important; */

  /* 3) Verde oscuro elegante */
  /* background: linear-gradient(180deg, #486552 0%, #3e5a48 50%, #35503f 100%) !important; */

  color: var(--light);
  position: relative;
  overflow: hidden;
}

/* Apagar la textura/overlay que viene de .section-dark::before */
#ai.ai-section::before {
  content: none !important;       /* Desactiva por completo */
  /* Si prefieres solo aclararlo en lugar de quitarlo:
  background: none !important;
  opacity: 0 !important;
  */
}
/* Oculta texto para lectores de pantalla solamente */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  border: 0;
}

/* Contenedor centrado */
.team-social {
  display: flex;
  gap: .7rem;
  justify-content: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* Botón redondo tipo icon */
.btn-social.icon {
  width: 44px; height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid currentColor;
  background: #fff;
  color: var(--primary);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.btn-social.icon i { font-size: 1.1rem; line-height: 1; }

/* Colores de marca */
.btn-social.icon.ig { color: #E4405F; }   /* Instagram */
.btn-social.icon.li { color: #0a66c2; }   /* LinkedIn  */

/* Hover/active */
.btn-social.icon:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0,0,0,.10);
  background: currentColor;
  color: #fff;
}
.btn-social.icon:hover i { color: #fff; }
/* Botones sociales más elegantes */
.btn-social.icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid #666;      /* gris neutro */
  background: #fff;
  color: #444;                 /* gris oscuro */
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.btn-social.icon i {
  font-size: 1.1rem;
  line-height: 1;
}

/* Hover elegante */
.btn-social.icon:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0,0,0,.1);
  background: #444;
  color: #fff;
  border-color: #444;
}

/* Texto biografía corregido */
.team-description {
  color: #333 !important;
  font-size: 0.95rem;
  opacity: 1;
}
/* Botón "Ver más" */
#btn-team-toggle {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);     /* 🔹 Texto SIEMPRE visible */
  font-weight: 600;
  padding: 0.8rem 1.6rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all .3s ease;
}

/* Hover con animación elegante */
#btn-team-toggle:hover {
  background: var(--primary);
  color: #fff;               /* 🔹 Texto se invierte en hover */
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
}
/* --- Fix definitivo botón "Ver más" --- */
.team-actions #btn-team-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 2rem;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  opacity: 1 !important;
  color: #fff !important;
  border: 2px solid #4F6F52 !important;
  background: #4F6F52 !important;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  font-size: 1rem;
  font-weight: 600;
}

/* Efecto de barrido como en tus .btn::before, pero manteniendo el texto */
.team-actions #btn-team-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  left: -120%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  pointer-events: none;
  transition: left .6s cubic-bezier(.175,.885,.32,1.275);
  border-radius: 12px;
}

/* Hover: no lo ocultamos; solo intensificamos */
.team-actions #btn-team-toggle:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.14) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.25);
}

.team-actions #btn-team-toggle:hover::before {
  left: 120%;
}
/* Fondo con imagen y overlay degradado para la sección de contacto */
#contact {
  position: relative;
  background: url("https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=1600&q=80")
              center/cover no-repeat;
  color: #fff; /* para que todo el texto sea legible */
  z-index: 1;
}

#contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(34, 85, 55, 0.85),   /* verde oscuro arriba */
    rgba(34, 85, 55, 0.65)    /* más claro abajo */
  );
  z-index: 0;
}

#contact .container {
  position: relative;
  z-index: 1; /* que el contenido esté encima del overlay */
}
/* ===== AI: Título arriba, video izq., features der. ===== */
.ai-grid.ai--headline-left{
  display: grid;
  grid-template-columns: minmax(520px, 1.2fr) 1fr; /* IZQ (video) / DER (features) */
  grid-template-areas:
    "header  header"
    "media   features";
  gap: 2rem 2.5rem;
  align-items: start;
}

/* Áreas */
.ai-header         { grid-area: header; max-width: 1100px; }
.ai-media-container{ grid-area: media;  position: relative; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); }
.ai-content        { grid-area: features; } /* si dejas el <ul> dentro */
.ai-features-list  { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }

/* Video/iframe 100% dentro del contenedor */
.ai-media-container iframe,
.ai-media-container video { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Ratio y tamaño del video */
.ai-grid.ai--headline-left .ai-media-container { aspect-ratio: 16 / 9; min-height: 480px; }
@media (max-width: 1200px){ .ai-grid.ai--headline-left .ai-media-container { min-height: 420px; } }
@media (max-width: 900px) { .ai-grid.ai--headline-left .ai-media-container { min-height: 300px; } }

/* Estilo de las 3 tarjetas (cajoncitos) */
.ai-features-list li{
  background: rgba(255,255,255,.65);
  border: 1px solid var(--gray-dark);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ai-features-list li:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
}
.ai-features-list h3{ margin: 0 0 .35rem 0; font-size: 1.15rem; color: var(--dark); }
.ai-features-list p { margin: 0; color: var(--dark); opacity: .9; }

/* Texto del header (ajuste fino) */
.ai-title{ margin-bottom: .8rem; }
.ai-description{ margin-bottom: 0; max-width: 70ch; }

/* Responsive: 1 columna en móvil */
@media (max-width: 900px){
  .ai-grid.ai--headline-left{
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "media"
      "features";
    gap: 1.5rem;
  }
}
/* ===== AI – layout headline arriba, video izq, features der ===== */
.ai-grid.ai--headline-left{
  display:grid;
  grid-template-areas:
    "header  header"
    "media   features";
  grid-template-columns: 58% 42%;   /* Video 58% | Features 42% */
  gap: 2rem 2.5rem;                 /* separaciones */
  align-items: start;
}

.ai-header{ 
  grid-area: header; 
  margin-bottom: .25rem;
}

.ai-media-container{
  grid-area: media;
  position: static;      /* quita cualquier pos. que pudiera solapar */
  z-index: 1;
}

.ai-content{
  grid-area: features;
  position: static;      /* evita solape */
  z-index: 2;
}

/* video responsivo con bordes y sombra */
.ai-media-container .iframe-wrap{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(0,0,0,.18);
}
.ai-media-container .iframe-wrap iframe{
  width: 100%;
  height: 100%;
  display: block;
}

/* tarjetas en columna con aire suficiente */
.ai-features-list{
  list-style: none;
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}
.ai-features-list li{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  backdrop-filter: blur(6px);
}

/* Responsive: en pantallas chicas apilar todo */
@media (max-width: 980px){
  .ai-grid.ai--headline-left{
    grid-template-areas:
      "header"
      "media"
      "features";
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
/* ===== AI – layout headline arriba, video izq, features der ===== */
.ai-grid.ai--headline-left{
  display:grid;
  grid-template-areas:
    "header  header"
    "media   features";
  grid-template-columns: 58% 42%;      /* ajusta 60/40 si prefieres */
  gap: 2rem 2.5rem;
  align-items: start;
}

/* Zonas del grid */
.ai-header{ grid-area: header; margin-bottom:.25rem; }
.ai-media-container{ grid-area: media; position:static; z-index:1; }
.ai-content{ grid-area: features; position:static; z-index:2; }

/* Si tenías efecto 3D en el media, lo anulamos aquí */
.ai--headline-left .ai-media-container{
  transform: none !important;
}

/* iframe responsivo */
.ai-media-container .iframe-wrap{
  width:100%;
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 42px rgba(0,0,0,.18);
}
.ai-media-container .iframe-wrap iframe{
  width:100%; height:100%; display:block;
}

/* Tarjetas a la derecha */
.ai-features-list{
  list-style:none;
  display:grid;
  gap:1.2rem;
  margin:0; padding:0;
}
.ai-features-list li{
  background: rgba(255,255,255,.90);
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:1.1rem 1.25rem;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  backdrop-filter: blur(6px);
}

/* ===== Colores oscuros (la sección es "section-dark" y heredaba blanco) ===== */
.ai--headline-left .ai-title,
.ai--headline-left .ai-description,
.ai--headline-left .ai-features-list li h3,
.ai--headline-left .ai-features-list li p{
  color: var(--dark) !important;
}

/* Responsive: apilar en móvil */
@media (max-width: 980px){
  .ai-grid.ai--headline-left{
    grid-template-areas:
      "header"
      "media"
      "features";
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
/* Volvemos títulos y descripción a blanco */
.ai--headline-left .ai-title,
.ai--headline-left .ai-description {
  color: #fff !important;
}

/* Las tarjetas se quedan negras como estaban */
.ai--headline-left .ai-features-list li h3,
.ai--headline-left .ai-features-list li p {
  color: #111 !important;
}

/* Empujar las tarjetas más a la derecha */
.ai--headline-left .ai-content {
  margin-left: 2rem;   /* prueba con 2rem, si quieres más espacio sube a 3rem o 4rem */
}

/* Responsive: en móviles que no se desborde */
@media (max-width: 980px){
  .ai--headline-left .ai-content {
    margin-left: 0; 
  }
}
/* ============= IA: layout limpio en dos columnas ============= */

/* 1) Contenedor de la fila */
.ai--headline-left .ai-row {
  display: grid;
  /* Columna izquierda = video (flexible, pero con mínimo) 
     Columna derecha = tarjetas con ancho fijo cómodo */
  grid-template-columns: minmax(640px, 1fr) 520px;
  column-gap: 56px;          /* espacio entre video y tarjetas */
  align-items: start;
}

/* 2) Asegurar que el contenido derecho NO esté absoluto */
.ai--headline-left .ai-content {
  position: static !important;   /* por si quedó absolute de antes */
  transform: none !important;
  margin: 0 !important;          /* quitamos margen de empuje viejo */
  z-index: 1;
}

/* 3) Columna derecha (tarjetas) en pila normal */
.ai--headline-left .ai-right,
.ai--headline-left .ai-features-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 4) Tarjetas “limpias” (ya las traías), sólo nos aseguramos del fondo */
.ai--headline-left .ai-card--clean {
  background: rgba(255,255,255,0.95);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  padding: 18px 22px;
  border: 1px solid rgba(0,0,0,.06);
}

/* 5) Video siempre en su columna, con proporción */
.ai--headline-left .ai-left { min-width: 0; } /* evita overflow en grid */
.ai--headline-left .iframe-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
}
.ai--headline-left .iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 6) Títulos en blanco (sección oscura), tarjetas en negro */
.ai--headline-left .ai-title,
.ai--headline-left .ai-description { color: #fff !important; }
.ai--headline-left .ai-card--clean h3,
.ai--headline-left .ai-card--clean p { color: #111 !important; }

/* 7) Responsive: en pantallas < 1100px apilamos todo */
@media (max-width:1100px) {
  .ai--headline-left .ai-row {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
}
/* ===== IA: layout con áreas para evitar empalmes ===== */
.ai-section .ai-grid{
  display: grid !important;
  grid-template-areas:
    "title title"
    "media cards";
  grid-template-columns: minmax(640px, 1fr) 520px; /* izq (video) / der (tarjetas) */
  column-gap: 64px;      /* separación entre video y tarjetas */
  row-gap: 24px;
  align-items: start;
}

/* Título + párrafo ocupan el bloque superior (dos columnas) */
.ai-section .ai-content{
  grid-area: title !important;
  position: static !important;     /* resetea cualquier absolute viejo */
  transform: none !important;
  margin: 0 !important;
  z-index: 1;
  color: #fff;                      /* título/subtítulo en blanco */
}

/* Video en su columna izquierda */
.ai-section .ai-media-container{
  grid-area: media !important;
  position: static !important;
  margin: 0 !important;
}
.ai-section .ai-media-container .iframe-wrap{
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
}
.ai-section .ai-media-container .iframe-wrap iframe{
  width: 100%; height: 100%; border: 0; display: block;
}

/* Tarjetas a la derecha, en columna normal */
.ai-section .ai-features-list{
  grid-area: cards !important;
  position: static !important;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: flex; flex-direction: column; gap: 22px;
}

/* Estilo de cada tarjeta */
.ai-section .ai-features-list li{
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  padding: 18px 22px;
}
.ai-section .ai-features-list li h3{ color: #111 !important; margin: 0 0 .25rem; }
.ai-section .ai-features-list li p { color: #333 !important; margin: 0; }

/* Responsive: apila en una columna en pantallas más chicas */
@media (max-width: 1100px){
  .ai-section .ai-grid{
    grid-template-areas:
      "title"
      "media"
      "cards";
    grid-template-columns: 1fr;
    column-gap: 0; row-gap: 22px;
  }
}
/* ===== AI SECTION (limpia y estable) ===== */
.ai-section {
  /* mantiene tu fondo "section-dark" con el patrón que ya tienes */
  position: relative;
  overflow: visible;
}

/* Grid general: cabecera arriba; debajo, dos columnas (video | lista) */
.ai-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  grid-template-areas:
    "head"
    "split";
}

/* Cabecera */
.ai-head { grid-area: head; }
.ai-title {
  color: var(--light);         /* FORZAMOS BLANCO */
  margin-bottom: .75rem;
}
.ai-description {
  color: rgba(255,255,255,.92); /* lectura cómoda sobre verde */
  max-width: 980px;
}

/* Split de dos columnas: video izquierda, lista derecha */
.ai-split {
  grid-area: split;
  display: grid;
  grid-template-columns: 1.15fr .85fr;  /* video un poco más ancho */
  gap: 2rem;
  align-items: start;
}

/* Video responsive 16:9 */
.ai-media { position: relative; }
.iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 36px rgba(0,0,0,.22);
  background: #000; /* mientras carga */
}
.iframe-wrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* Lista de tarjetas */
.ai-features {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 1.2rem;
}

/* Tarjeta */
.ai-card {
  position: relative;          /* evita solaparse con el vídeo */
  z-index: 1;
  padding: 1.1rem 1.25rem;
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--gray-dark);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  backdrop-filter: blur(2px);
  color: var(--dark);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ai-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0,0,0,.16);
}
.ai-card h3 {
  margin: 0 0 .35rem 0;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--dark);
}
.ai-card p {
  margin: 0;
  color: #3a3a3a;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .ai-split {
    grid-template-columns: 1fr;   /* apilado */
  }
  .ai-features {
    grid-template-columns: 1fr;
  }
}
/* ===== AI v2 – layout limpio y sin empalmes ===== */

#ai .ai-grid{
  display:grid;
  gap:2rem;
}

/* Cabecera */
#ai .ai-head{
  text-align:left;
  margin-bottom:1.5rem;
}

#ai .ai-title{
  color:#fff !important;          /* fuerza blanco del título */
  margin:0 0 .5rem 0;
}

#ai .ai-description{
  color:rgba(255,255,255,.9) !important;
  max-width:960px;
  margin:0;
}

/* Split: video izq. + tarjetas der. (sin empalmes) */
#ai .ai-split{
  display:grid;
  grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr); /* video > ancho */
  gap:2rem;
  align-items:start;
}

/* Video responsive con borde redondeado y sombra */
#ai .iframe-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  background: #000;
}

#ai .iframe-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* Tarjetas a la derecha */
#ai .ai-features{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
  list-style:none;
  padding:0;
  margin:0;
}

#ai .ai-card{
  background:rgba(255,255,255,.95);
  border-radius:14px;
  padding:1.2rem 1.25rem;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  color:#222;
  backdrop-filter:saturate(130%) blur(2px);
}

#ai .ai-card h3{
  margin:0 0 .45rem 0;
  font-size:1.06rem;
  color:#111;
}

#ai .ai-card p{
  margin:0;
  font-size:.95rem;
  color:#333;
  line-height:1.45;
}

/* Evitar que algo viejo empuje el contenido hacia los bordes */
#ai .ai-media-container,
#ai .ai-content,
#ai .ai-features-list{
  all:unset;      /* resetea cualquier estilo heredado conflictivo */
}

/* Responsive */
@media (max-width: 1024px){
  #ai .ai-split{
    grid-template-columns: 1fr;   /* apila: video arriba, tarjetas abajo */
  }
}
/* ===== IA SECTION – limpio y estable ===== */

#ai.section-dark {
  background: linear-gradient(135deg, #4F6F52 0%, #6f8f73 40%, #86A789 100%);
  color: var(--light);
  position: relative;
  overflow: hidden;
}
#ai.section-dark::before { content: none !important; }

/* Grid principal: cabecera arriba, split abajo (video | tarjetas) */
#ai .ai-grid {
  display: grid;
  gap: 2rem;
  grid-template-areas:
    "head"
    "split";
}

/* Cabecera (título y descripción) */
#ai .ai-head {
  grid-area: head;
  text-align: left;
  margin-bottom: 1rem;
}
#ai .ai-title {
  color: #fff !important;
  margin: 0 0 .6rem 0;
}
#ai .ai-description {
  color: rgba(255,255,255,.9) !important;
  max-width: 960px;
  margin: 0;
}

/* Split de dos columnas: video izq. + tarjetas der. */
#ai .ai-split {
  grid-area: split;
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr);
  gap: 2rem;
  align-items: start;
}

/* Video responsivo */
#ai .iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  background: #000;
}
#ai .iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Tarjetas a la derecha */
#ai .ai-features {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
#ai .ai-card {
  background: rgba(255,255,255,.95);
  border-radius: 14px;
  padding: 1.2rem 1.25rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  color: #222;
  backdrop-filter: saturate(130%) blur(2px);
}
#ai .ai-card h3 {
  margin: 0 0 .45rem 0;
  font-size: 1.06rem;
  color: #111;
}
#ai .ai-card p {
  margin: 0;
  font-size: .95rem;
  color: #333;
  line-height: 1.45;
}

/* Responsive: apila en móvil */
@media (max-width: 1024px) {
  #ai .ai-split {
    grid-template-columns: 1fr;
  }
}
/* ===== IA v3: video grande + tarjetas proporcionadas ===== */

/* Fondo de IA (conserva tu estética "section-dark") */
#ai.ai-v3 {
  position: relative;
  overflow: visible;
}

/* Grid general: header arriba, split abajo */
#ai.ai-v3 .ai-grid {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: 1fr;
  grid-template-areas:
    "head"
    "split";
}

/* Cabecera */
#ai.ai-v3 .ai-head { grid-area: head; }
#ai.ai-v3 .ai-title {
  color: #fff !important;
  margin: 0 0 .6rem 0;
}
#ai.ai-v3 .ai-description {
  color: rgba(255,255,255,.92) !important;
  max-width: 980px;
  margin: 0;
}

/* Split: hacemos el video más grande y las tarjetas proporcionales */
#ai.ai-v3 .ai-split {
  grid-area: split;
  display: grid;
  /* 1.4 / .8 → el video ocupa ~64% y tarjetas ~36% dentro del container */
  grid-template-columns: minmax(0, 1.4fr) minmax(380px, .8fr);
  gap: 2.25rem;
  align-items: start;
}

/* Media (video) — grande, 16:9, sombra elegante */
#ai.ai-v3 .ai-media { position: relative; min-width: 0; }
#ai.ai-v3 .iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 22px 46px rgba(0,0,0,.28);
}
#ai.ai-v3 .iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Tarjetas a la derecha (altura auto, sin solapes) */
#ai.ai-v3 .ai-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
#ai.ai-v3 .ai-card {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  color: #222;
  backdrop-filter: saturate(125%) blur(2px);
  transition: transform .2s ease, box-shadow .2s ease;
}
#ai.ai-v3 .ai-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0,0,0,.16);
}
#ai.ai-v3 .ai-card h3 {
  margin: 0 0 .4rem 0;
  font-size: 1.06rem;
  line-height: 1.2;
  color: #111;
}
#ai.ai-v3 .ai-card p {
  margin: 0;
  color: #333;
  font-size: .96rem;
}

/* RESPONSIVE: apila en una columna y evita desbordes */
@media (max-width: 1200px) {
  #ai.ai-v3 .ai-split {
    grid-template-columns: 1.2fr .8fr;
  }
}
@media (max-width: 1024px) {
  #ai.ai-v3 .ai-split {
    grid-template-columns: 1fr;
  }
  #ai.ai-v3 .ai-features {
    grid-template-columns: 1fr;
  }
}
/* ===== Logros y Reconocimientos ===== */
.awards-section{
  position: relative;
  background: radial-gradient(1200px 600px at 20% 5%, #f7faf8 0%, #f1f5f2 40%, #ffffff 100%);
  padding-top: 5rem; /* match con tus secciones */
  padding-bottom: 5rem;
}

.awards-head{
  text-align: left;
  max-width: 980px;
  margin: 0 auto 2rem;
}
.awards-title{
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--primary);
  margin: 0 0 .5rem 0;
}
.awards-subtitle{
  margin: 0;
  color: #475a4e; /* verde grisáceo sutil */
  opacity: .9;
}

.awards-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columnas desktop */
  gap: 1.5rem;
}

.award-card{
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--gray-dark);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.award-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
}

.award-card img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.award-card:hover img{
  transform: scale(1.04);
}

.award-body{
  padding: 1rem 1rem 1.1rem;
}
.award-body h3{
  margin: 0 0 .35rem 0;
  font-size: 1.05rem;
  color: #111;
}
.award-body p{
  margin: 0;
  color: #444;
  font-size: .96rem;
  line-height: 1.45;
}

/* Responsivo */
@media (max-width: 1024px){
  .awards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .awards-grid{ grid-template-columns: 1fr; }
}
/* ===== Carrusel: Logros y Reconocimientos ===== */
.awards-section{
  background: radial-gradient(1200px 600px at 20% 5%, #f7faf8 0%, #eef3ef 45%, #ffffff 100%);
}
.awards-head{ max-width:980px; margin:0 auto 1.5rem; text-align:center; }
.awards-title{ color:var(--primary); margin:0 0 .5rem 0; }
.awards-subtitle{ color:#475a4e; opacity:.9; margin:0; }

.awards-carousel{ position:relative; }
.awards-viewport{
  overflow:hidden; border-radius:18px;
  box-shadow:0 14px 34px rgba(0,0,0,.10);
}
.awards-track{
  list-style:none; margin:0; padding:0;
  display:flex; transition:transform .5s ease;
  will-change: transform;
}
.awards-slide{ min-width:100%; }
.awards-card{ position:relative; display:grid; grid-template-rows:auto 1fr; background:#fff; }
.awards-card img{
  width:100%; aspect-ratio: 16/9; object-fit:cover; display:block;
}
.awards-card figcaption{
  padding:1.1rem 1.25rem;
  border-top:1px solid var(--gray-dark);
}
.awards-card h3{ margin:0 0 .35rem 0; font-size:1.06rem; color:#111; }
.awards-card p{ margin:0; color:#444; }

/* Flechas */
.awards-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:#fff; color:#333; border:1px solid rgba(0,0,0,.1);
  display:grid; place-items:center; cursor:pointer; z-index:2;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.awards-arrow:hover{ transform:translateY(-50%) scale(1.06); box-shadow:0 12px 26px rgba(0,0,0,.16); }
.awards-prev{ left: -16px; }
.awards-next{ right:-16px; }

/* Bullets */
.awards-dots{
  display:flex; gap:.5rem; justify-content:center; margin-top:.9rem;
}
.awards-dot{
  width:10px; height:10px; border-radius:999px;
  background:#cfd8d2; cursor:pointer; border:none;
  transition:transform .2s ease, background .2s ease, width .2s ease;
}
.awards-dot[aria-selected="true"]{
  background: var(--primary);
  width:22px;
}

/* Responsive */
@media (max-width: 768px){
  .awards-prev{ left:4px; }
  .awards-next{ right:4px; }
}
/* ===== Awards Carousel ===== */
.awards-section { padding: 5rem 0 4rem; background: #f8faf8; }
.awards-head { text-align: center; margin-bottom: 1.5rem; }
.awards-title { font-size: 2.4rem; color: var(--primary); margin: 0 0 .4rem 0; }
.awards-subtitle { opacity: .85; max-width: 900px; margin: 0 auto; }

.awards-carousel {
  position: relative;
  margin-top: 1rem;
}

.awards-viewport {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 36px rgba(0,0,0,.12);
  background: #000;
}

.awards-track {
  display: flex;
  width: 100%;
  transition: transform .5s ease;
}

.awards-slide {
  min-width: 100%;
  list-style: none;
}

.awards-card { display: grid; grid-template-rows: auto auto; margin: 0; background: #fff; }
.awards-card img { width: 100%; height: clamp(320px, 48vw, 560px); object-fit: cover; display: block; }
.awards-card figcaption { padding: 1rem 1.25rem; background: #fff; }
.awards-card h3 { margin: 0 0 .35rem 0; color: #111; font-size: 1.1rem; }
.awards-card p { margin: 0; color: #374151; }

/* Flechas */
.awards-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  border: 0;
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 3;
}
.awards-prev { left: 12px; }
.awards-next { right: 12px; }
.awards-arrow i { color: #111; }

/* Bullets */
.awards-dots {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin-top: .9rem;
}
.awards-dot {
  width: 9px; height: 9px; border-radius: 999px;
  background: #cfd6cf; border: 0; cursor: pointer;
}
.awards-dot[aria-selected="true"] { background: var(--primary); }

/* Responsive */
@media (max-width: 768px){
  .awards-title { font-size: 2rem; }
  .awards-arrow { width: 40px; height: 40px; }
}
.plan-description {
  min-height: 60px;
}
.plan-card {
  max-width: 320px;
  margin: 0 auto;
}