/* ============================================================
   EAT RECICLAR — variables.css
   Tokens de diseño (basados en template Mivora + marca EAT Reciclar)
   ============================================================ */

:root {

  /* ---------- COLORES DE MARCA ---------- */
  /* Verde oscuro EAT Reciclar: botones y CTAs (sobre fondos claros) */
  --color-primario:        #54a31a;
  --color-primario-hover:  #468a14;

  /* Verde claro: acentos sobre fondos oscuros (texto resaltado, íconos) */
  --color-acento:          #7eea57;

  /* ---------- NEUTROS (sistema Mivora) ---------- */
  --color-negro:           #212121;   /* texto principal / fondos oscuros */
  --color-negro-suave:     #282828;   /* cards sobre fondo oscuro */
  --color-gris-700:        #636363;   /* texto secundario */
  --color-gris-500:        #7b7b7b;   /* texto terciario */
  --color-gris-300:        #bebebe;   /* texto sobre fondo oscuro */
  --color-gris-200:        #d3d3d3;   /* bordes */
  --color-gris-100:        #ebebeb;   /* bordes suaves / divisores */
  --color-fondo-suave:     #f5f5f5;   /* fondo de secciones claras */
  --color-fondo-gris:      #f2f2f2;   /* fondo alterno */
  --color-blanco:          #ffffff;

  /* ---------- OVERLAYS ---------- */
  --overlay-hero:          rgba(33, 33, 33, 0.45);
  --overlay-oscuro:        rgba(33, 33, 33, 0.60);

  /* ---------- TIPOGRAFÍA ---------- */
  /* Instrument Sans: titulares · Inter: cuerpo (par validado EAT Reciclar) */
  --fuente-titulos: 'Instrument Sans', 'Segoe UI', sans-serif;
  --fuente-cuerpo:  'Inter', 'Segoe UI', sans-serif;

  /* Escala tipográfica (desktop) */
  --texto-hero:     clamp(2.5rem, 5.2vw, 4.75rem);  /* H1 hero */
  --texto-h2:       clamp(2rem, 3.4vw, 3.25rem);    /* títulos de sección */
  --texto-h3:       clamp(1.35rem, 2vw, 1.75rem);   /* títulos de card */
  --texto-grande:   1.125rem;
  --texto-base:     1rem;
  --texto-sm:       0.875rem;
  --texto-eyebrow:  0.8125rem;

  /* ---------- LAYOUT ---------- */
  --contenedor-max: 1600px;   /* ancho validado del proyecto */
  --pad-lateral:    clamp(1.25rem, 4vw, 4rem);
  --espacio-seccion: clamp(4.5rem, 9vw, 8.5rem);

  /* ---------- GEOMETRÍA ---------- */
  --radio-pill:   50px;       /* botones y header píldora */
  --radio-card:   20px;
  --radio-img:    16px;

  /* ---------- MOVIMIENTO ---------- */
  /* Curva de easing Framer validada para el proyecto */
  --ease-framer:  cubic-bezier(0.44, 0, 0.56, 1);
  --ease-suave:   cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-rapida:   0.25s;
  --dur-media:    0.45s;
  --dur-lenta:    0.8s;

  /* ---------- BREAKPOINTS (sistema unificado) ---------- */
  /* Solo de referencia: CSS no permite usar var() dentro de @media.
     Los valores reales están hardcoded en las media queries del archivo. */
  --bp-sm: 600px;    /* mobile chico → mobile grande */
  --bp-md: 810px;    /* mobile/tablet → desktop */
  --bp-lg: 1200px;   /* desktop → desktop grande */

  /* ---------- SOMBRAS ---------- */
  --sombra-header: 0 4px 24px rgba(33, 33, 33, 0.08);
  --sombra-card:   0 8px 32px rgba(33, 33, 33, 0.10);
}

/* ============================================================
   EAT RECICLAR — styles.css
   Estilos base + secciones (se construye sección por sección)
   ============================================================ */

/* ---------- RESET BÁSICO ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  color: var(--color-negro);
  background-color: var(--color-blanco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  border: none;
  cursor: pointer;
  background: none;
}

/* ---------- UTILIDADES ---------- */
.contenedor {
  width: 100%;
  max-width: var(--contenedor-max);
  margin-inline: auto;
  padding-inline: var(--pad-lateral);
}

/* Solo lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- BOTONES ---------- */
/* Botón primario: verde oscuro EAT Reciclar, geometría pill Mivora */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radio-pill);
  font-family: var(--fuente-titulos);
  font-size: var(--texto-base);
  font-weight: 500;
  line-height: 1.2;
  transition:
    background-color var(--dur-rapida) var(--ease-framer),
    transform var(--dur-rapida) var(--ease-framer);
  /* Necesario para la animación de swap de texto */
  position: relative;
  overflow: hidden;
}

.btn--primario {
  background-color: var(--color-primario);
  color: var(--color-blanco);
}

.btn--primario:hover {
  background-color: var(--color-primario-hover);
}

/* Swap vertical de texto en hover (micro-interacción Mivora):
   el texto visible sube y entra una copia desde abajo */
.btn__texto {
  display: block;
  transition: transform var(--dur-media) var(--ease-framer);
}

.btn__texto--copia {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  text-align: center;
}

.btn:hover .btn__texto--principal {
  transform: translateY(-150%);
}

.btn:hover .btn__texto--copia {
  transform: translateY(-150%);
}

/* ============================================================
   HEADER — Píldora flotante (geometría Mivora)
   Dos píldoras: [logo + nav]  (notch)  [botón Contáctanos]
   ============================================================ */
.header {
  position: fixed !important;
  top: 1.25rem;
  left: 0;
  right: 0;
  z-index: 1000;
  will-change: auto;
}

.header__inner {
  display: flex;
  align-items: stretch;
  gap: 0.625rem; /* el "notch" entre las dos píldoras */
  max-width: var(--contenedor-max);
  margin-inline: auto;
  padding-inline: var(--pad-lateral);
}

/* Píldora principal: logo + navegación */
.header__pildora {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-blanco);
  border-radius: var(--radio-pill);
  padding: 0.625rem 0.75rem 0.625rem 1.5rem;
  box-shadow: var(--sombra-header);
  min-height: 64px;
}

/* ---------- LOGO ---------- */
.header__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

.header__logo img {
  height: 42px;
  width: auto;
}

.header__logo-texto {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-negro);
  letter-spacing: -0.01em;
}

.header__logo-texto span {
  color: var(--color-primario);
}

.header__logo-icono {
  flex-shrink: 0;
}

/* ============================================================
   HERO — Video a pantalla completa + card flotante
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  display: flex;
  align-items: center; /* bloque de texto centrado vertical (fidelidad Mivora) */
  overflow: hidden;
  padding-block: 7rem 2.5rem;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-hero);
  z-index: 1;
}

.hero__contenido {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
  /* La card es absoluta: el texto reserva su espacio a la derecha */
  padding-right: clamp(0px, 28vw, 460px);
}

/* ---------- Columna de texto ---------- */
.hero__texto {
  max-width: 720px;
}

.hero__titulo {
  font-family: var(--fuente-titulos);
  /* Escala Mivora: titular grande en 3 líneas, centrado verticalmente */
  font-size: clamp(2.4rem, 4.6vw, 4.5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-blanco);
  margin-bottom: 1.25rem;
}

.hero__subtitulo {
  font-size: var(--texto-grande);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  max-width: 520px;
  margin-bottom: 1.75rem;
}

.hero__cta {
  padding: 1rem 2rem;
}

/* ---------- Card flotante (certificación) ---------- */
.hero__card {
  /* Abajo-derecha con margen, esquinas redondeadas (exacto Mivora) */
  position: absolute;
  right: var(--pad-lateral);
  bottom: 2.25rem;
  background-color: var(--color-blanco);
  border-radius: var(--radio-card);
  padding: 1.5rem;
  width: 100%;
  max-width: 460px;
  box-shadow: var(--sombra-card);
}

.hero__card-titulo {
  font-family: var(--fuente-titulos);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-negro);
  margin-bottom: 1rem;
}

.hero__card-imagen {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1.25rem;
}

.hero__card-metricas {
  display: flex;
}

.hero__card-metrica {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* Divisor sólido fino entre métricas (fidelidad Mivora) */
.hero__card-metrica + .hero__card-metrica {
  border-left: 1px solid var(--color-gris-100);
  padding-left: 1.5rem;
  margin-left: 1.5rem;
}

.hero__card-etiqueta {
  font-size: var(--texto-sm);
  color: var(--color-gris-700);
  line-height: 1.4;
}

.hero__card-valor {
  font-family: var(--fuente-titulos);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-negro);
  letter-spacing: -0.02em;
}

/* ---------- NAVEGACIÓN ---------- */
.header__nav {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  margin-inline: auto; /* nav centrado dentro de la píldora */
}

.header__link {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-base);
  font-weight: 500;
  color: var(--color-negro);
  position: relative;
  padding-block: 0.25rem;
  transition: color var(--dur-rapida) var(--ease-framer);
}

.header__link:hover {
  color: var(--color-primario);
}

/* Subrayado de sección activa (scroll-spy desde main.js) */
.header__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-media) var(--ease-framer);
}

.header__link.activo::after,
.header__link:hover::after {
  transform: scaleX(1);
}

/* Píldora secundaria: botón Contáctanos */
.header__cta {
  flex-shrink: 0;
  box-shadow: var(--sombra-header);
  padding-inline: 2rem;
}

/* ---------- HAMBURGUESA (oculta en desktop) ---------- */
.header__hamburguesa {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
}

.header__hamburguesa span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-negro);
  border-radius: 2px;
  transition: transform var(--dur-media) var(--ease-framer),
              opacity var(--dur-rapida) var(--ease-framer);
}

/* Estado abierto: hamburguesa → X */
.header__hamburguesa.abierto span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.header__hamburguesa.abierto span:nth-child(2) {
  opacity: 0;
}
.header__hamburguesa.abierto span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   ELEMENTOS COMUNES DE SECCIÓN
   ============================================================ */
section {
  padding-block: var(--espacio-seccion);
}

/* Eyebrow en píldora (detalle Mivora) */
.eyebrow {
  display: inline-block;
  font-family: var(--fuente-titulos);
  font-size: var(--texto-eyebrow);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-gris-700);
  border: 1px solid var(--color-gris-200);
  border-radius: var(--radio-pill);
  padding: 0.375rem 1rem;
  margin-bottom: 1.25rem;
}

.eyebrow--claro {
  color: var(--color-gris-300);
  border-color: var(--color-gris-700);
}

/* Título de sección con juego bicolor Mivora */
.titulo-seccion {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-h2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-negro);
}

.titulo-seccion--claro { color: var(--color-blanco); }
.gris   { color: var(--color-gris-500); }
.verde  { color: var(--color-acento); }        /* sobre fondos oscuros */
.verde-oscuro { color: var(--color-primario); } /* sobre fondos claros */

/* ============================================================
   GESTIÓN CERTIFICADA — Proceso por pasos (estructura Redient)
   ============================================================ */
.proceso {
  position: relative;
  overflow: hidden;
  background-color: #16201b; /* fallback */
  padding-block: clamp(4.5rem, 8vw, 7rem) 0;
}

.proceso__fondo {
  position: absolute;
  inset: 0;
  background: none center / cover no-repeat;
}

.proceso__inner {
  position: relative;
  z-index: 1;
}

/* Eyebrow con punto (estilo Redient) */
.proceso__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--fuente-titulos);
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--color-blanco);
}

.proceso__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-blanco);
}

.proceso__titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-h2);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-blanco);
  margin-top: 1.25rem;
  margin-bottom: clamp(4rem, 9vw, 7.5rem);
}

/* ---------- Línea de progreso con marcador ---------- */
.proceso__linea {
  position: relative;
  height: 52px;
  display: flex;
  align-items: center;
  margin-bottom: 2.5rem;
}

.proceso__linea-base {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.28);
  border-radius: 2px;
}

/* Tramo activo: crece según el paso actual (JS fija --progreso) */
.proceso__linea-activa {
  position: absolute;
  left: 0;
  width: var(--progreso, 12.5%);
  height: 2.5px;
  background-color: var(--color-acento);
  border-radius: 2px;
  transition: width 0.7s var(--ease-framer);
}

/* Marcador circular numerado */
.proceso__marcador {
  position: absolute;
  left: var(--progreso, 12.5%);
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--color-acento);
  color: var(--color-negro);
  font-family: var(--fuente-titulos);
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: left 0.7s var(--ease-framer);
}

/* ---------- Cards de pasos ---------- */
.proceso__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  /* Las cards "salen" del fondo hacia el final de la sección (como Redient) */
  margin-bottom: 0;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.proceso__card {
  background-color: var(--color-blanco);
  border-radius: var(--radio-img);
  padding: 1.625rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  cursor: default;
  transition: transform var(--dur-media) var(--ease-framer);
}

.proceso__card:hover { transform: translateY(-6px); }

.proceso__paso {
  font-size: var(--texto-sm);
  color: var(--color-gris-700);
  margin-bottom: 3.5rem; /* gran espacio como la referencia */
}

.proceso__card h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-negro);
  margin-bottom: 0.875rem;
}

.proceso__card p {
  color: var(--color-gris-700);
  font-size: var(--texto-sm);
  line-height: 1.7;
}

/* ============================================================
   POR QUÉ ELEGIRNOS
   ============================================================ */
.porque__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.porque__lista { margin-top: 1.75rem; }

.porque__item {
  padding-block: 1.125rem;
  border-bottom: 1px dashed var(--color-gris-200);
}

.porque__item:first-child { padding-top: 0; }

.porque__item h3 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--fuente-titulos);
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 0.625rem;
}

.porque__punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-acento);
  flex-shrink: 0;
}

.porque__item p {
  color: var(--color-gris-700);
  padding-left: 1.25rem;
}

/* Imagen con botón superpuesto (detalle Mivora "Meet our team") */
.porque__imagen {
  position: relative;
  border-radius: var(--radio-card);
  overflow: visible;
}

.porque__imagen img {
  width: 100%;
  height: 100%;
  min-height: 460px;
  max-height: 560px;
  object-fit: cover;
  border-radius: var(--radio-card);
}

.porque__btn {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 4rem);
  box-shadow: 0 0 0 8px var(--color-blanco);
}

/* ============================================================
   INFRAESTRUCTURA
   ============================================================ */
.infraestructura { background-color: var(--color-fondo-suave); }

.infraestructura__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem 4rem;
  align-items: center;
}

.infraestructura__descripcion {
  color: var(--color-gris-700);
  margin-top: 1.25rem;
  max-width: 580px;
}

.infraestructura__imagen {
  grid-row: span 2;
}

.infraestructura__imagen img {
  width: 100%;
  max-height: 520px;
  border-radius: var(--radio-card);
  object-fit: cover;
}

.infraestructura__lista{display:flex;flex-direction:column;gap:1rem;list-style:none;margin:1.5rem 0 0;padding:0}

.infraestructura__lista li {
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  font-weight: 500;
  padding-block: 0.875rem;
  padding-left: 0;
  position: relative;
  border-bottom: 1px dashed var(--color-gris-200);
  transition: color var(--dur-rapida) var(--ease-framer);
}

.infraestructura__lista li:hover { color: var(--color-primario); }

.infraestructura__lista li::before { content: none; }

/* ============================================================
   MISIÓN Y VISIÓN
   ============================================================ */
.mision { background-color: var(--color-fondo-suave); }

.mision__encabezado {
  max-width: 760px;
  margin-bottom: 2.25rem;
}

.mision__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}

.mision__card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.75rem;
  background-color: var(--color-blanco);
  border-radius: var(--radio-card);
  padding: 1.75rem;
  align-items: start;
}

.mision__card h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.mision__card-info > p {
  color: var(--color-gris-700);
  font-size: var(--texto-sm);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

.mision__metricas {
  border: 1px dashed var(--color-gris-200);
  border-radius: var(--radio-img);
  padding: 1.25rem;
}

.mision__metrica {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.mision__metrica + .mision__metrica {
  border-top: 1px dashed var(--color-gris-200);
  margin-top: 1rem;
  padding-top: 1rem;
}

.mision__metrica strong {
  font-family: var(--fuente-titulos);
  font-size: 1.6rem;
  font-weight: 500;
  min-width: 90px;
}

.mision__metrica span {
  font-size: var(--texto-sm);
  color: var(--color-gris-700);
}

.mision__card img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--radio-img);
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 10vw, 8rem);
  background-color: var(--color-negro); /* fallback si la imagen no carga */
}

.cta__fondo{position:absolute;inset:0;background:linear-gradient(rgba(10,40,15,.28),rgba(10,40,15,.28)),url('../assets/images/cta-fondo.jpg') center/cover no-repeat;background-color:#1f5a1a;z-index:0}

.cta__contenido {
  position: relative;
  text-align: center;
  max-width: 880px;
}

.cta__contenido h2 {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-h2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-blanco);
  margin-bottom: 1.25rem;
}

.cta__contenido p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 560px;
  margin: 0 auto 2.25rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  overflow: hidden;
  padding-block: var(--espacio-seccion);
  background-color: var(--color-negro-suave); /* fallback */
}

.footer__fondo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(33, 33, 33, 0.35), rgba(33, 33, 33, 0.35)),
    none center / cover no-repeat;
}

.footer__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 1.25rem;
  align-items: stretch;
}

.footer__card {
  background-color: var(--color-blanco);
  border-radius: var(--radio-card);
  padding: 2rem;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.75rem;
}

.footer__mensaje {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}

.footer__nota {
  font-size: var(--texto-sm);
  color: var(--color-gris-700);
  margin-bottom: 0.875rem;
}

.footer__form {
  display: flex;
  gap: 0.625rem;
  border: 1px dashed var(--color-gris-200);
  border-radius: var(--radio-pill);
  padding: 0.375rem 0.375rem 0.375rem 1.25rem;
  margin-bottom: 2rem;
}

.footer__form input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  color: var(--color-negro);
  background: transparent;
  min-width: 0;
}

.footer__form input::placeholder { color: var(--color-gris-500); }

.footer__suscribir { padding: 0.75rem 1.5rem; }

.footer__credito {
  font-size: var(--texto-sm);
  color: var(--color-gris-500);
}

.footer__columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 2rem;
  height: 100%;
}

.footer__col h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.footer__col-iso { margin-top: 1.5rem; }

.footer__col li { margin-bottom: 0.625rem; }

.footer__col a,
.footer__col p {
  color: var(--color-gris-700);
  font-size: var(--texto-sm);
  line-height: 1.7;
  transition: color var(--dur-rapida) var(--ease-framer);
}

.footer__col a:hover { color: var(--color-primario); }


/* ============================================================
   SERVICIOS — Carrusel de tarjetas de medios
   ============================================================ */
.servicios { background-color: var(--color-blanco); }

.servicios__encabezado {
  max-width: 820px;
  margin-bottom: 2rem;
}

.servicios__intro {
  color: var(--color-gris-700);
  margin-top: 1.25rem;
  max-width: 560px;
}

.carrusel__pista {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  cursor: grab;
}

.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista.arrastrando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }

.carrusel__card {
  flex: 0 0 360px;
  scroll-snap-align: start;
  user-select: none;
}

.carrusel__media {
  border-radius: var(--radio-img);
  overflow: hidden;
  margin-bottom: 1rem;
  aspect-ratio: 16 / 10;
}

.carrusel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease-framer);
}

.carrusel__card:hover .carrusel__media img { transform: scale(1.05); }

.carrusel__card h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.carrusel__card p {
  color: var(--color-gris-700);
  font-size: var(--texto-sm);
  line-height: 1.65;
  margin-bottom: 0.75rem;
}

.carrusel__meta {
  font-size: 0.8125rem;
  color: var(--color-gris-500);
}

/* Controles: flechas + progreso + contador (referencia motionsites) */
.carrusel__controles {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.carrusel__flechas { display: flex; gap: 0.625rem; }

.carrusel__flecha {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px dashed var(--color-gris-200);
  color: var(--color-negro);
  font-size: 1.1rem;
  transition: border-color var(--dur-rapida) var(--ease-framer),
              background-color var(--dur-rapida) var(--ease-framer);
}

.carrusel__flecha:hover {
  border-color: var(--color-primario);
  background-color: var(--color-fondo-suave);
}

.carrusel__progreso {
  flex: 1;
  height: 3px;
  background-color: var(--color-gris-100);
  border-radius: 3px;
  overflow: hidden;
}

.carrusel__progreso-barra {
  display: block;
  height: 100%;
  width: 20%;
  background-color: var(--color-negro);
  border-radius: 3px;
  transition: width var(--dur-media) var(--ease-framer);
}

.carrusel__contador {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--color-gris-700);
  min-width: 64px;
  text-align: right;
}

/* ============================================================
   ALIADOS — Ticker de cards escalonadas (geometría Mivora)
   ============================================================ */
.aliados {
  position: relative;
  overflow: hidden;
  padding-block: var(--espacio-seccion);
  background-color: var(--color-negro); /* fallback */
}

.aliados__fondo {
  position: absolute;
  inset: 0;
  background:
    var(--overlay-oscuro),
    none center / cover no-repeat;
  z-index: 0;
}

.aliados__encabezado {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 2.75rem;
}

.aliados__sub {
  color: rgba(255, 255, 255, 0.85);
  margin-top: 1rem;
}

/* ---------- Ticker ---------- */
.aliados__ticker {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Espacio para el escalón de las cards bajas */
  padding-block: 0.5rem 2rem;
}

.aliados__fila {
  display: flex;
  width: max-content;
  animation: marqueeIzq 38s linear infinite;
}

.aliados__fila:hover { animation-play-state: paused; }

.aliados__grupo {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding-right: 1.5rem;
}

@keyframes marqueeIzq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Card de solo logo (referencia aprobada) ---------- */
.logo-card {
  width: 320px;
  height: 260px;
  flex-shrink: 0;
  background-color: var(--color-blanco);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.25rem;
  transition: transform var(--dur-media) var(--ease-framer);
}

.logo-card:hover { transform: translateY(-6px) scale(1.02); }

.logo-card img {
  max-width: 82%;
  max-height: 78%;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .aliados__fila { animation: none; }
}

/* ============================================================
   MISIÓN Y VISIÓN
   ============================================================ */
.mision { background-color: var(--color-fondo-suave); }

.mision__encabezado {
  max-width: 760px;
  margin-bottom: 2.25rem;
}

.mision__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}

.mision__card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.75rem;
  background-color: var(--color-blanco);
  border-radius: var(--radio-card);
  padding: 1.75rem;
  align-items: start;
}

.mision__card h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.mision__card-info > p {
  color: var(--color-gris-700);
  font-size: var(--texto-sm);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

.mision__metricas {
  border: 1px dashed var(--color-gris-200);
  border-radius: var(--radio-img);
  padding: 1.25rem;
}

.mision__metrica {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.mision__metrica + .mision__metrica {
  border-top: 1px dashed var(--color-gris-200);
  margin-top: 1rem;
  padding-top: 1rem;
}

.mision__metrica strong {
  font-family: var(--fuente-titulos);
  font-size: 1.6rem;
  font-weight: 500;
  min-width: 90px;
}

.mision__metrica span {
  font-size: var(--texto-sm);
  color: var(--color-gris-700);
}

.mision__card img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--radio-img);
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 10vw, 8rem);
  background-color: var(--color-negro); /* fallback si la imagen no carga */
}

.cta__fondo{position:absolute;inset:0;background:linear-gradient(rgba(10,40,15,.28),rgba(10,40,15,.28)),url('../assets/images/cta-fondo.jpg') center/cover no-repeat;background-color:#1f5a1a;z-index:0}

.cta__contenido {
  position: relative;
  text-align: center;
  max-width: 880px;
}

.cta__contenido h2 {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-h2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-blanco);
  margin-bottom: 1.25rem;
}

.cta__contenido p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 560px;
  margin: 0 auto 2.25rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  overflow: hidden;
  padding-block: var(--espacio-seccion);
  background-color: var(--color-negro-suave); /* fallback */
}

.footer__fondo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(33, 33, 33, 0.35), rgba(33, 33, 33, 0.35)),
    none center / cover no-repeat;
}

.footer__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 1.25rem;
  align-items: stretch;
}

.footer__card {
  background-color: var(--color-blanco);
  border-radius: var(--radio-card);
  padding: 2rem;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.75rem;
}

.footer__mensaje {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}

.footer__nota {
  font-size: var(--texto-sm);
  color: var(--color-gris-700);
  margin-bottom: 0.875rem;
}

.footer__form {
  display: flex;
  gap: 0.625rem;
  border: 1px dashed var(--color-gris-200);
  border-radius: var(--radio-pill);
  padding: 0.375rem 0.375rem 0.375rem 1.25rem;
  margin-bottom: 2rem;
}

.footer__form input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  color: var(--color-negro);
  background: transparent;
  min-width: 0;
}

.footer__form input::placeholder { color: var(--color-gris-500); }

.footer__suscribir { padding: 0.75rem 1.5rem; }

.footer__credito {
  font-size: var(--texto-sm);
  color: var(--color-gris-500);
}

.footer__columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 2rem;
  height: 100%;
}

.footer__col h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.footer__col-iso { margin-top: 1.5rem; }

.footer__col li { margin-bottom: 0.625rem; }

.footer__col a,
.footer__col p {
  color: var(--color-gris-700);
  font-size: var(--texto-sm);
  line-height: 1.7;
  transition: color var(--dur-rapida) var(--ease-framer);
}

.footer__col a:hover { color: var(--color-primario); }


/* ============================================================
   SERVICIOS — Carrusel de tarjetas de medios
   ============================================================ */
.servicios { background-color: var(--color-blanco); }

.servicios__encabezado {
  max-width: 820px;
  margin-bottom: 2rem;
}

.servicios__intro {
  color: var(--color-gris-700);
  margin-top: 1.25rem;
  max-width: 560px;
}

.carrusel__pista {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  cursor: grab;
}

.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista.arrastrando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }

.carrusel__card {
  flex: 0 0 360px;
  scroll-snap-align: start;
  user-select: none;
}

.carrusel__media {
  border-radius: var(--radio-img);
  overflow: hidden;
  margin-bottom: 1rem;
  aspect-ratio: 16 / 10;
}

.carrusel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease-framer);
}

.carrusel__card:hover .carrusel__media img { transform: scale(1.05); }

.carrusel__card h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.carrusel__card p {
  color: var(--color-gris-700);
  font-size: var(--texto-sm);
  line-height: 1.65;
  margin-bottom: 0.75rem;
}

.carrusel__meta {
  font-size: 0.8125rem;
  color: var(--color-gris-500);
}

/* Controles: flechas + progreso + contador (referencia motionsites) */
.carrusel__controles {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.carrusel__flechas { display: flex; gap: 0.625rem; }

.carrusel__flecha {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px dashed var(--color-gris-200);
  color: var(--color-negro);
  font-size: 1.1rem;
  transition: border-color var(--dur-rapida) var(--ease-framer),
              background-color var(--dur-rapida) var(--ease-framer);
}

.carrusel__flecha:hover {
  border-color: var(--color-primario);
  background-color: var(--color-fondo-suave);
}

.carrusel__progreso {
  flex: 1;
  height: 3px;
  background-color: var(--color-gris-100);
  border-radius: 3px;
  overflow: hidden;
}

.carrusel__progreso-barra {
  display: block;
  height: 100%;
  width: 20%;
  background-color: var(--color-negro);
  border-radius: 3px;
  transition: width var(--dur-media) var(--ease-framer);
}

.carrusel__contador {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--color-gris-700);
  min-width: 64px;
  text-align: right;
}

/* ============================================================
   ALIADOS — Ticker de cards escalonadas (geometría Mivora)
   ============================================================ */
.aliados {
  position: relative;
  overflow: hidden;
  padding-block: var(--espacio-seccion);
  background-color: var(--color-negro); /* fallback */
}

.aliados__fondo {
  position: absolute;
  inset: 0;
  background:
    var(--overlay-oscuro),
    none center / cover no-repeat;
  z-index: 0;
}

.aliados__encabezado {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 2.75rem;
}

.aliados__sub {
  color: rgba(255, 255, 255, 0.85);
  margin-top: 1rem;
}

/* ---------- Ticker ---------- */
.aliados__ticker {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Espacio para el escalón de las cards bajas */
  padding-block: 0.5rem 2rem;
}

.aliados__fila {
  display: flex;
  width: max-content;
  animation: marqueeIzq 38s linear infinite;
}

.aliados__fila:hover { animation-play-state: paused; }

.aliados__grupo {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding-right: 1.5rem;
}

@keyframes marqueeIzq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Card testimonial exacta (Top + Bottom en zigzag) ---------- */
.testi-card {
  width: 380px;
  flex-shrink: 0;
}

/* Alturas alternadas como la referencia */
.testi-card--baja { margin-top: 3rem; }

/* Bloque superior: avatar (logo) + nombre + sector.
   Alineado a la IZQUIERDA, más angosto a la derecha */
.testi-card__top {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: var(--color-blanco);
  border-radius: var(--radio-card) var(--radio-card) var(--radio-card) 0;
  padding: 1.5rem 1.375rem;
  width: calc(100% - 1.75rem);
}

.testi-card__avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: var(--color-blanco);
  border: 1px solid var(--color-gris-100);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem;
  flex-shrink: 0;
  overflow: hidden;
}

.testi-card__avatar img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.testi-card__top h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-negro);
  line-height: 1.15;
}

.testi-card__top span {
  font-size: var(--texto-sm);
  color: var(--color-gris-700);
}

/* Bloque inferior: frase — desplazado a la DERECHA (escalón zigzag) */
.testi-card__body {
  background-color: var(--color-blanco);
  border-radius: 0 var(--radio-card) var(--radio-card) var(--radio-card);
  padding: 1.5rem 1.5rem 1.625rem;
  width: calc(100% - 1.75rem);
  margin-left: 1.75rem;
  margin-top: 0.625rem; /* ranura oscura entre bloques, como el original */
  min-height: 150px;
}

.testi-card__body p {
  color: var(--color-gris-700);
  font-size: 1.05rem;
  line-height: 1.65;
}

.testi-card {
  transition: transform var(--dur-media) var(--ease-framer);
}

.testi-card:hover { transform: translateY(-6px); }

@media (prefers-reduced-motion: reduce) {
  .aliados__fila { animation: none; }
}

/* ============================================================
   MISIÓN Y VISIÓN
   ============================================================ */
.mision { background-color: var(--color-fondo-suave); }

.mision__encabezado {
  max-width: 760px;
  margin-bottom: 2.25rem;
}

.mision__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}

.mision__card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.75rem;
  background-color: var(--color-blanco);
  border-radius: var(--radio-card);
  padding: 1.75rem;
  align-items: start;
}

.mision__card h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.mision__card-info > p {
  color: var(--color-gris-700);
  font-size: var(--texto-sm);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

.mision__metricas {
  border: 1px dashed var(--color-gris-200);
  border-radius: var(--radio-img);
  padding: 1.25rem;
}

.mision__metrica {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.mision__metrica + .mision__metrica {
  border-top: 1px dashed var(--color-gris-200);
  margin-top: 1rem;
  padding-top: 1rem;
}

.mision__metrica strong {
  font-family: var(--fuente-titulos);
  font-size: 1.6rem;
  font-weight: 500;
  min-width: 90px;
}

.mision__metrica span {
  font-size: var(--texto-sm);
  color: var(--color-gris-700);
}

.mision__card img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--radio-img);
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 10vw, 8rem);
  background-color: var(--color-negro); /* fallback si la imagen no carga */
}

.cta__fondo{position:absolute;inset:0;background:linear-gradient(rgba(10,40,15,.28),rgba(10,40,15,.28)),url('../assets/images/cta-fondo.jpg') center/cover no-repeat;background-color:#1f5a1a;z-index:0}

.cta__contenido {
  position: relative;
  text-align: center;
  max-width: 880px;
}

.cta__contenido h2 {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-h2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-blanco);
  margin-bottom: 1.25rem;
}

.cta__contenido p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 560px;
  margin: 0 auto 2.25rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  overflow: hidden;
  padding-block: var(--espacio-seccion);
  background-color: var(--color-negro-suave); /* fallback */
}

.footer__fondo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(33, 33, 33, 0.35), rgba(33, 33, 33, 0.35)),
    none center / cover no-repeat;
}

.footer__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 1.25rem;
  align-items: stretch;
}

.footer__card {
  background-color: var(--color-blanco);
  border-radius: var(--radio-card);
  padding: 2rem;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.75rem;
}

.footer__mensaje {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}

.footer__nota {
  font-size: var(--texto-sm);
  color: var(--color-gris-700);
  margin-bottom: 0.875rem;
}

.footer__form {
  display: flex;
  gap: 0.625rem;
  border: 1px dashed var(--color-gris-200);
  border-radius: var(--radio-pill);
  padding: 0.375rem 0.375rem 0.375rem 1.25rem;
  margin-bottom: 2rem;
}

.footer__form input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  color: var(--color-negro);
  background: transparent;
  min-width: 0;
}

.footer__form input::placeholder { color: var(--color-gris-500); }

.footer__suscribir { padding: 0.75rem 1.5rem; }

.footer__credito {
  font-size: var(--texto-sm);
  color: var(--color-gris-500);
}

.footer__columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 2rem;
  height: 100%;
}

.footer__col h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.footer__col-iso { margin-top: 1.5rem; }

.footer__col li { margin-bottom: 0.625rem; }

.footer__col a,
.footer__col p {
  color: var(--color-gris-700);
  font-size: var(--texto-sm);
  line-height: 1.7;
  transition: color var(--dur-rapida) var(--ease-framer);
}

.footer__col a:hover { color: var(--color-primario); }


/* ============================================================
   SERVICIOS — Carrusel de tarjetas de medios
   ============================================================ */
.servicios { background-color: var(--color-blanco); }

.servicios__encabezado {
  max-width: 820px;
  margin-bottom: 2rem;
}

.servicios__intro {
  color: var(--color-gris-700);
  margin-top: 1.25rem;
  max-width: 560px;
}

.carrusel__pista {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  cursor: grab;
}

.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista.arrastrando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }

.carrusel__card {
  flex: 0 0 360px;
  scroll-snap-align: start;
  user-select: none;
}

.carrusel__media {
  border-radius: var(--radio-img);
  overflow: hidden;
  margin-bottom: 1rem;
  aspect-ratio: 16 / 10;
}

.carrusel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease-framer);
}

.carrusel__card:hover .carrusel__media img { transform: scale(1.05); }

.carrusel__card h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.carrusel__card p {
  color: var(--color-gris-700);
  font-size: var(--texto-sm);
  line-height: 1.65;
  margin-bottom: 0.75rem;
}

.carrusel__meta {
  font-size: 0.8125rem;
  color: var(--color-gris-500);
}

/* Controles: flechas + progreso + contador (referencia motionsites) */
.carrusel__controles {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.carrusel__flechas { display: flex; gap: 0.625rem; }

.carrusel__flecha {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px dashed var(--color-gris-200);
  color: var(--color-negro);
  font-size: 1.1rem;
  transition: border-color var(--dur-rapida) var(--ease-framer),
              background-color var(--dur-rapida) var(--ease-framer);
}

.carrusel__flecha:hover {
  border-color: var(--color-primario);
  background-color: var(--color-fondo-suave);
}

.carrusel__progreso {
  flex: 1;
  height: 3px;
  background-color: var(--color-gris-100);
  border-radius: 3px;
  overflow: hidden;
}

.carrusel__progreso-barra {
  display: block;
  height: 100%;
  width: 20%;
  background-color: var(--color-negro);
  border-radius: 3px;
  transition: width var(--dur-media) var(--ease-framer);
}

.carrusel__contador {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--color-gris-700);
  min-width: 64px;
  text-align: right;
}

/* ============================================================
   ALIADOS — Ticker de cards escalonadas (geometría Mivora)
   ============================================================ */
.aliados {
  position: relative;
  overflow: hidden;
  padding-block: var(--espacio-seccion);
  background-color: var(--color-negro); /* fallback */
}

.aliados__fondo {
  position: absolute;
  inset: 0;
  background:
    var(--overlay-oscuro),
    none center / cover no-repeat;
  z-index: 0;
}

.aliados__encabezado {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 2.75rem;
}

.aliados__sub {
  color: rgba(255, 255, 255, 0.85);
  margin-top: 1rem;
}

/* ---------- Ticker ---------- */
.aliados__ticker {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Espacio para el escalón de las cards bajas */
  padding-block: 0.5rem 2rem;
}

.aliados__fila {
  display: flex;
  width: max-content;
  animation: marqueeIzq 38s linear infinite;
}

.aliados__fila:hover { animation-play-state: paused; }

.aliados__grupo {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding-right: 1.5rem;
}

@keyframes marqueeIzq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Card simple: logo protagonista ---------- */
.aliado-card {
  width: 400px;
  flex-shrink: 0;
  background-color: var(--color-blanco);
  border-radius: var(--radio-card);
  padding: 2rem 1.75rem 1.75rem;
  text-align: center;
  transition: transform var(--dur-media) var(--ease-framer);
}

.aliado-card:hover { transform: translateY(-6px); }

/* Logo grande, protagonista de la card */
.aliado-card__logo {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.aliado-card__logo img {
  max-width: 78%;
  max-height: 110px;
  object-fit: contain;
}

.aliado-card h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-negro);
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.aliado-card__sector {
  display: block;
  font-size: var(--texto-sm);
  color: var(--color-gris-500);
  margin-bottom: 0.75rem;
}

.aliado-card p {
  color: var(--color-gris-700);
  font-size: var(--texto-sm);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .aliados__fila { animation: none; }
}

/* ============================================================
   MISIÓN Y VISIÓN
   ============================================================ */
.mision { background-color: var(--color-fondo-suave); }

.mision__encabezado {
  max-width: 760px;
  margin-bottom: 2.25rem;
}

.mision__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}

.mision__card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.75rem;
  background-color: var(--color-blanco);
  border-radius: var(--radio-card);
  padding: 1.75rem;
  align-items: start;
}

.mision__card h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.mision__card-info > p {
  color: var(--color-gris-700);
  font-size: var(--texto-sm);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

.mision__metricas {
  border: 1px dashed var(--color-gris-200);
  border-radius: var(--radio-img);
  padding: 1.25rem;
}

.mision__metrica {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.mision__metrica + .mision__metrica {
  border-top: 1px dashed var(--color-gris-200);
  margin-top: 1rem;
  padding-top: 1rem;
}

.mision__metrica strong {
  font-family: var(--fuente-titulos);
  font-size: 1.6rem;
  font-weight: 500;
  min-width: 90px;
}

.mision__metrica span {
  font-size: var(--texto-sm);
  color: var(--color-gris-700);
}

.mision__card img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--radio-img);
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 10vw, 8rem);
  background-color: var(--color-negro); /* fallback si la imagen no carga */
}

.cta__fondo{position:absolute;inset:0;background:linear-gradient(rgba(10,40,15,.28),rgba(10,40,15,.28)),url('../assets/images/cta-fondo.jpg') center/cover no-repeat;background-color:#1f5a1a;z-index:0}

.cta__contenido {
  position: relative;
  text-align: center;
  max-width: 880px;
}

.cta__contenido h2 {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-h2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-blanco);
  margin-bottom: 1.25rem;
}

.cta__contenido p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 560px;
  margin: 0 auto 2.25rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  overflow: hidden;
  padding-block: var(--espacio-seccion);
  background-color: var(--color-negro-suave); /* fallback */
}

.footer__fondo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(33, 33, 33, 0.35), rgba(33, 33, 33, 0.35)),
    none center / cover no-repeat;
}

.footer__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 1.25rem;
  align-items: stretch;
}

.footer__card {
  background-color: var(--color-blanco);
  border-radius: var(--radio-card);
  padding: 2rem;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.75rem;
}

.footer__mensaje {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}

.footer__nota {
  font-size: var(--texto-sm);
  color: var(--color-gris-700);
  margin-bottom: 0.875rem;
}

.footer__form {
  display: flex;
  gap: 0.625rem;
  border: 1px dashed var(--color-gris-200);
  border-radius: var(--radio-pill);
  padding: 0.375rem 0.375rem 0.375rem 1.25rem;
  margin-bottom: 2rem;
}

.footer__form input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  color: var(--color-negro);
  background: transparent;
  min-width: 0;
}

.footer__form input::placeholder { color: var(--color-gris-500); }

.footer__suscribir { padding: 0.75rem 1.5rem; }

.footer__credito {
  font-size: var(--texto-sm);
  color: var(--color-gris-500);
}

.footer__columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 2rem;
  height: 100%;
}

.footer__col h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.footer__col-iso { margin-top: 1.5rem; }

.footer__col li { margin-bottom: 0.625rem; }

.footer__col a,
.footer__col p {
  color: var(--color-gris-700);
  font-size: var(--texto-sm);
  line-height: 1.7;
  transition: color var(--dur-rapida) var(--ease-framer);
}

.footer__col a:hover { color: var(--color-primario); }


/* ============================================================
   SERVICIOS — Carrusel de tarjetas de medios
   ============================================================ */
.servicios { background-color: var(--color-blanco); }

.servicios__encabezado {
  max-width: 820px;
  margin-bottom: 2rem;
}

.servicios__intro {
  color: var(--color-gris-700);
  margin-top: 1.25rem;
  max-width: 560px;
}

.carrusel__pista {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  cursor: grab;
}

.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista.arrastrando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }

.carrusel__card {
  flex: 0 0 360px;
  scroll-snap-align: start;
  user-select: none;
}

.carrusel__media {
  border-radius: var(--radio-img);
  overflow: hidden;
  margin-bottom: 1rem;
  aspect-ratio: 16 / 10;
}

.carrusel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease-framer);
}

.carrusel__card:hover .carrusel__media img { transform: scale(1.05); }

.carrusel__card h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.carrusel__card p {
  color: var(--color-gris-700);
  font-size: var(--texto-sm);
  line-height: 1.65;
  margin-bottom: 0.75rem;
}

.carrusel__meta {
  font-size: 0.8125rem;
  color: var(--color-gris-500);
}

/* Controles: flechas + progreso + contador (referencia motionsites) */
.carrusel__controles {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.carrusel__flechas { display: flex; gap: 0.625rem; }

.carrusel__flecha {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px dashed var(--color-gris-200);
  color: var(--color-negro);
  font-size: 1.1rem;
  transition: border-color var(--dur-rapida) var(--ease-framer),
              background-color var(--dur-rapida) var(--ease-framer);
}

.carrusel__flecha:hover {
  border-color: var(--color-primario);
  background-color: var(--color-fondo-suave);
}

.carrusel__progreso {
  flex: 1;
  height: 3px;
  background-color: var(--color-gris-100);
  border-radius: 3px;
  overflow: hidden;
}

.carrusel__progreso-barra {
  display: block;
  height: 100%;
  width: 20%;
  background-color: var(--color-negro);
  border-radius: 3px;
  transition: width var(--dur-media) var(--ease-framer);
}

.carrusel__contador {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--color-gris-700);
  min-width: 64px;
  text-align: right;
}

/* ============================================================
   ALIADOS — Ticker de cards escalonadas (geometría Mivora)
   ============================================================ */
.aliados {
  position: relative;
  overflow: hidden;
  padding-block: var(--espacio-seccion);
  background-color: var(--color-negro); /* fallback */
}

.aliados__fondo {
  position: absolute;
  inset: 0;
  background:
    var(--overlay-oscuro),
    none center / cover no-repeat;
  z-index: 0;
}

.aliados__encabezado {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 2.75rem;
}

.aliados__sub {
  color: rgba(255, 255, 255, 0.85);
  margin-top: 1rem;
}

/* ---------- Ticker ---------- */
.aliados__ticker {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* Espacio para el escalón de las cards bajas */
  padding-block: 0.5rem 2rem;
}

.aliados__fila {
  display: flex;
  width: max-content;
  animation: marqueeIzq 38s linear infinite;
}

.aliados__fila:hover { animation-play-state: paused; }

.aliados__grupo {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding-right: 1.5rem;
}

@keyframes marqueeIzq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Card escalonada (Top + Bottom como en Mivora) ---------- */
.aliado-card {
  width: 380px;
  flex-shrink: 0;
}

/* Cards alternas descienden (alturas alternadas de la referencia) */
.aliado-card--baja { margin-top: 2.5rem; }

/* Bloque superior: logo + nombre + sector
   Más angosto y alineado a la derecha → crea el escalón */
.aliado-card__top {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background-color: var(--color-blanco);
  border-radius: var(--radio-card) var(--radio-card) var(--radio-card) 0;
  padding: 1.125rem 1.25rem;
  width: calc(100% - 2rem);
  margin-left: 2rem;
  position: relative;
  z-index: 1;
}

.aliado-card__logo {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background-color: var(--color-blanco);
  border: 1px solid var(--color-gris-100);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  flex-shrink: 0;
  overflow: hidden;
}

.aliado-card__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.aliado-card__top h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-negro);
  line-height: 1.2;
}

.aliado-card__top span {
  font-size: var(--texto-sm);
  color: var(--color-gris-700);
}

/* Bloque inferior: descripción — ancho completo, escalón a la izquierda */
.aliado-card__body {
  background-color: var(--color-blanco);
  border-radius: 0 0 var(--radio-card) var(--radio-card);
  border-top-left-radius: var(--radio-card);
  padding: 1.5rem 1.625rem;
  margin-top: 0;
  min-height: 132px; /* cuerpos parejos entre cards */
}

.aliado-card__body p {
  color: var(--color-gris-700);
  font-size: var(--texto-sm);
  line-height: 1.65;
}

/* Hover sutil: la card se eleva */
.aliado-card {
  transition: transform var(--dur-media) var(--ease-framer);
}

.aliado-card:hover { transform: translateY(-6px); }

@media (prefers-reduced-motion: reduce) {
  .aliados__fila { animation: none; }
}

/* ============================================================
   MISIÓN Y VISIÓN
   ============================================================ */
.mision { background-color: var(--color-fondo-suave); }

.mision__encabezado {
  max-width: 760px;
  margin-bottom: 2.25rem;
}

.mision__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}

.mision__card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.75rem;
  background-color: var(--color-blanco);
  border-radius: var(--radio-card);
  padding: 1.75rem;
  align-items: start;
}

.mision__card h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.mision__card-info > p {
  color: var(--color-gris-700);
  font-size: var(--texto-sm);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

.mision__metricas {
  border: 1px dashed var(--color-gris-200);
  border-radius: var(--radio-img);
  padding: 1.25rem;
}

.mision__metrica {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.mision__metrica + .mision__metrica {
  border-top: 1px dashed var(--color-gris-200);
  margin-top: 1rem;
  padding-top: 1rem;
}

.mision__metrica strong {
  font-family: var(--fuente-titulos);
  font-size: 1.6rem;
  font-weight: 500;
  min-width: 90px;
}

.mision__metrica span {
  font-size: var(--texto-sm);
  color: var(--color-gris-700);
}

.mision__card img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--radio-img);
}

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 10vw, 8rem);
}

.cta__fondo{position:absolute;inset:0;background:linear-gradient(rgba(10,40,15,.28),rgba(10,40,15,.28)),url('../assets/images/cta-fondo.jpg') center/cover no-repeat;background-color:#1f5a1a;z-index:0}

.cta__contenido {
  position: relative;
  text-align: center;
  max-width: 880px;
}

.cta__contenido h2 {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-h2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-blanco);
  margin-bottom: 1.25rem;
}

.cta__contenido p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 560px;
  margin: 0 auto 2.25rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  overflow: hidden;
  padding-block: var(--espacio-seccion);
}

.footer__fondo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(33, 33, 33, 0.35), rgba(33, 33, 33, 0.35)),
    none center / cover no-repeat;
}

.footer__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 1.25rem;
  align-items: stretch;
}

.footer__card {
  background-color: var(--color-blanco);
  border-radius: var(--radio-card);
  padding: 2rem;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.75rem;
}

.footer__mensaje {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}

.footer__nota {
  font-size: var(--texto-sm);
  color: var(--color-gris-700);
  margin-bottom: 0.875rem;
}

.footer__form {
  display: flex;
  gap: 0.625rem;
  border: 1px dashed var(--color-gris-200);
  border-radius: var(--radio-pill);
  padding: 0.375rem 0.375rem 0.375rem 1.25rem;
  margin-bottom: 2rem;
}

.footer__form input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  color: var(--color-negro);
  background: transparent;
  min-width: 0;
}

.footer__form input::placeholder { color: var(--color-gris-500); }

.footer__suscribir { padding: 0.75rem 1.5rem; }

.footer__credito {
  font-size: var(--texto-sm);
  color: var(--color-gris-500);
}

.footer__columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 2rem;
  height: 100%;
}

.footer__col h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.footer__col-iso { margin-top: 1.5rem; }

.footer__col li { margin-bottom: 0.625rem; }

.footer__col a,
.footer__col p {
  color: var(--color-gris-700);
  font-size: var(--texto-sm);
  line-height: 1.7;
  transition: color var(--dur-rapida) var(--ease-framer);
}

.footer__col a:hover { color: var(--color-primario); }


/* ============================================================
   SERVICIOS — Carrusel de tarjetas de medios
   ============================================================ */
.servicios { background-color: var(--color-blanco); }

.servicios__encabezado {
  max-width: 820px;
  margin-bottom: 2rem;
}

.servicios__intro {
  color: var(--color-gris-700);
  margin-top: 1.25rem;
  max-width: 560px;
}

.carrusel__pista {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  cursor: grab;
}

.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista.arrastrando { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }

.carrusel__card {
  flex: 0 0 360px;
  scroll-snap-align: start;
  user-select: none;
}

.carrusel__media {
  border-radius: var(--radio-img);
  overflow: hidden;
  margin-bottom: 1rem;
  aspect-ratio: 16 / 10;
}

.carrusel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease-framer);
}

.carrusel__card:hover .carrusel__media img { transform: scale(1.05); }

.carrusel__card h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.carrusel__card p {
  color: var(--color-gris-700);
  font-size: var(--texto-sm);
  line-height: 1.65;
  margin-bottom: 0.75rem;
}

.carrusel__meta {
  font-size: 0.8125rem;
  color: var(--color-gris-500);
}

/* Controles: flechas + progreso + contador (referencia motionsites) */
.carrusel__controles {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.carrusel__flechas { display: flex; gap: 0.625rem; }

.carrusel__flecha {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px dashed var(--color-gris-200);
  color: var(--color-negro);
  font-size: 1.1rem;
  transition: border-color var(--dur-rapida) var(--ease-framer),
              background-color var(--dur-rapida) var(--ease-framer);
}

.carrusel__flecha:hover {
  border-color: var(--color-primario);
  background-color: var(--color-fondo-suave);
}

.carrusel__progreso {
  flex: 1;
  height: 3px;
  background-color: var(--color-gris-100);
  border-radius: 3px;
  overflow: hidden;
}

.carrusel__progreso-barra {
  display: block;
  height: 100%;
  width: 20%;
  background-color: var(--color-negro);
  border-radius: 3px;
  transition: width var(--dur-media) var(--ease-framer);
}

.carrusel__contador {
  font-family: var(--fuente-titulos);
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--color-gris-700);
  min-width: 64px;
  text-align: right;
}

/* ============================================================
   ALIADOS — Marquee infinito de logos (doble fila)
   ============================================================ */
.aliados {
  position: relative;
  overflow: hidden;
}

.aliados__fondo {
  position: absolute;
  inset: 0;
  background:
    var(--overlay-oscuro),
    none center / cover no-repeat;
  z-index: 0;
}

.aliados__encabezado {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 2.75rem;
}

.aliados__marquee {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Desvanecido en los bordes (look 2026) */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.aliados__fila {
  display: flex;
  width: max-content;
}

.aliados__grupo {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-right: 1.5rem;
}

/* Animación continua: cada fila desplaza el 100% de un grupo */
.aliados__fila--izq { animation: marqueeIzq 32s linear infinite; }
.aliados__fila--der { animation: marqueeDer 36s linear infinite; }

.aliados__fila:hover { animation-play-state: paused; }

@keyframes marqueeIzq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes marqueeDer {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Tarjeta de logo */
.aliados__logo {
  background-color: var(--color-blanco);
  border-radius: var(--radio-img);
  width: 240px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1.75rem;
  transition: transform var(--dur-media) var(--ease-framer);
}

.aliados__logo:hover { transform: translateY(-6px) scale(1.03); }

.aliados__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) opacity(0.75);
  transition: filter var(--dur-media) var(--ease-framer);
}

.aliados__logo:hover img { filter: grayscale(0) opacity(1); }

@media (prefers-reduced-motion: reduce) {
  .aliados__fila--izq,
  .aliados__fila--der { animation: none; }
}

/* ============================================================
   EAT RECICLAR — animations.css
   Animaciones de aparición (scroll reveal) y micro-interacciones
   Activadas por IntersectionObserver en js/animations.js
   ============================================================ */

/* ---------- SCROLL REVEAL ----------
   Uso: agregar la clase .revelar al elemento.
   JS le añade .visible cuando entra al viewport. */
.revelar {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-lenta) var(--ease-framer),
    transform var(--dur-lenta) var(--ease-framer);
}

.revelar.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variante con retraso escalonado (cards en grilla) */
.revelar[data-retraso="1"] { transition-delay: 0.1s; }
.revelar[data-retraso="2"] { transition-delay: 0.2s; }
.revelar[data-retraso="3"] { transition-delay: 0.3s; }
.revelar[data-retraso="4"] { transition-delay: 0.4s; }

/* ---------- ENTRADA DEL HEADER al cargar ---------- */
@keyframes headerEntrada {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header {
  animation: none; /* menú estático, sin movimiento */
}

/* ---------- ACCESIBILIDAD: respetar reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .revelar {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .header {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ============================================================
   EAT RECICLAR — responsive.css
   Breakpoints Mivora: desktop ≥1200 · tablet 810–1199 · móvil ≤809
   ============================================================ */

/* ---------- TABLET (≤ 1199px) ---------- */
@media (max-width: 1199px) {

  /* HERO: la card vuelve al flujo, debajo del texto */
  .hero__contenido {
    flex-direction: column;
    align-items: flex-start;
    padding-right: 0;
  }

  .hero__card {
    position: static;
    border-radius: var(--radio-card);
    max-width: 480px;
    margin-top: 2rem;
  }

  /* HEADER: el nav se oculta y aparece hamburguesa */
  .header__nav {
    position: fixed;
    inset: 0;
    background-color: var(--color-blanco);
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-media) var(--ease-framer),
                visibility var(--dur-media) var(--ease-framer);
    z-index: -1; /* detrás de la píldora para que logo/X sigan visibles */
  }

  .header__nav.abierto {
    opacity: 1;
    visibility: visible;
  }

  .header__link {
    font-size: 1.5rem;
  }

  .header__hamburguesa {
    display: flex;
  }
}

/* ---------- MÓVIL (≤ 809px) ---------- */
@media (max-width: 809px) {

  /* HERO en móvil */
  .hero {
    padding-block: 7rem 2.5rem;
  }

  .hero__subtitulo {
    font-size: var(--texto-base);
  }

  .hero__cta {
    width: 100%;
  }

  .hero__card {
    max-width: 100%;
    padding: 1.25rem;
  }

  .hero__card-imagen {
    height: 150px;
  }

  .hero__card-valor {
    font-size: 1.125rem;
  }

  .header {
    top: 0.75rem;
  }

  .header__pildora {
    min-height: 56px;
    padding: 0.5rem 0.5rem 0.5rem 1.125rem;
  }

  .header__logo img {
    height: 34px;
  }

  .header__logo-texto {
    font-size: 1.05rem;
  }

  /* El CTA "Contáctanos" se integra al menú móvil para no saturar la barra */
  .header__cta {
    display: none;
  }
}

/* ---------- MÓVIL PEQUEÑO (≤ 390px) ---------- */

/* ============================================================
   RESPONSIVE — SECCIONES (página completa)
   ============================================================ */

/* ---------- TABLET (≤ 1199px) ---------- */
@media (max-width: 1199px) {

  .proceso__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mision__grid {
    grid-template-columns: 1fr;
  }

  .porque__grid,
  .infraestructura__grid {
    grid-template-columns: 1fr;
  }

  .infraestructura__imagen {
    grid-row: auto;
    order: 3;
  }

  .porque__imagen img { min-height: 420px; }
}

/* ---------- MÓVIL (≤ 809px) ---------- */
@media (max-width: 809px) {

  /* Carrusel de servicios en móvil */
  .carrusel__card { flex: 0 0 82%; }

  .carrusel__controles { gap: 1rem; }

  /* Proceso: 1 columna */
  .proceso__grid { grid-template-columns: 1fr; }
  .proceso__paso { margin-bottom: 2rem; }
  .proceso__linea { display: none; } /* la línea no aporta en columna */

  /* Por qué: botón vuelve al flujo */
  .porque__btn {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 1rem;
    box-shadow: none;
  }

  .porque__imagen img { min-height: 300px; }

  /* Misión: card en columna */
  .mision__card {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }

  .mision__card img { min-height: 220px; }

  /* Aliados: cards más compactas */
  .logo-card { width: 240px; height: 200px; padding: 1.5rem; }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr; }
  .footer__card { padding: 1.75rem; }
  .footer__columnas { grid-template-columns: 1fr; gap: 1.75rem; }

  .footer__form {
    flex-direction: column;
    border-radius: var(--radio-card);
    padding: 0.875rem;
    gap: 0.75rem;
  }

  .footer__form input { padding: 0.5rem 0.25rem; }
  .footer__suscribir { width: 100%; }
}


  
/* ====== PREMIUM 2026: microinteracciones (añadidas) ====== */
.btn{will-change:transform}
.btn--primario{transition:transform .25s cubic-bezier(.44,0,.56,1),box-shadow .3s,background-color .25s}
.btn--primario:hover{box-shadow:0 8px 28px rgba(84,163,26,.35)} /* glow sutil */
/* botón pill con flecha */
.btn--flecha{display:inline-flex;align-items:center;gap:10px}
.btn--flecha .btn__arrow{display:inline-flex;transition:transform .25s cubic-bezier(.44,0,.56,1)}
.btn--flecha:hover .btn__arrow{transform:translateX(4px)}
/* stagger reveal más marcado */
.revelar{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.44,0,.56,1),transform .7s cubic-bezier(.44,0,.56,1)}
.revelar.visible{opacity:1;transform:none}
.revelar[data-retraso="1"]{transition-delay:.08s}
.revelar[data-retraso="2"]{transition-delay:.16s}
.revelar[data-retraso="3"]{transition-delay:.24s}
.revelar[data-retraso="4"]{transition-delay:.32s}
.revelar[data-retraso="5"]{transition-delay:.40s}
.revelar[data-retraso="6"]{transition-delay:.48s}
.revelar[data-retraso="7"]{transition-delay:.56s}
.revelar[data-retraso="8"]{transition-delay:.64s}
/* placeholder de imagen en blanco (mientras no hay fotos) */
.img-blank{background:#eef1ee;border:1px dashed #cfd8cf;border-radius:var(--radio-img,16px);width:100%;height:100%;min-height:160px;display:block}
figure .img-blank,.media .img-blank{min-height:220px}
@media (prefers-reduced-motion:reduce){.revelar{opacity:1;transform:none;transition:none}.btn__arrow{transition:none}}
/* tarjeta magnética: el JS añade transform; aquí la transición */
[data-magnetico]{transition:transform .2s cubic-bezier(.44,0,.56,1)}
/* marcos de aliados vacíos */
.aliado-vacio{background:#fff;border:1px solid #ececec;border-radius:16px;height:120px;display:flex;align-items:center;justify-content:center}
.aliado-vacio::after{content:"";width:60%;height:34px;border-radius:8px;background:repeating-linear-gradient(45deg,#f3f3f3,#f3f3f3 8px,#fafafa 8px,#fafafa 16px)}

/* ===== Layout mínimo páginas internas (reutiliza componentes Mivora) ===== */
.pagina-top{padding-top:9rem}
.bloque-sep{padding:5rem 0}
.intro-narrativa{max-width:780px;color:var(--color-gris-700,#636363);line-height:1.8;margin-top:1.25rem}
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem}
.auth-centro{min-height:78vh;display:flex;align-items:center;justify-content:center;padding:9rem 1.25rem 4rem}
.auth-centro .footer__card{max-width:440px;width:100%}
.campo{margin-bottom:1.1rem}
.campo label{display:block;font-size:.85rem;font-weight:500;margin-bottom:.4rem}
.campo input{width:100%;border:1px solid #d9d9d9;border-radius:50px;padding:.85rem 1.2rem;font-size:.95rem;font-family:inherit}
.campo input:focus{outline:none;border-color:#54a31a;box-shadow:0 0 0 3px rgba(84,163,26,.15)}
.auth-msg{padding:.8rem 1rem;border-radius:12px;font-size:.9rem;margin-bottom:1rem;display:none}
.auth-msg--ok{background:#eaf6e1;color:#3b6d11;display:block}
.auth-msg--err{background:#fdecec;color:#a32d2d;display:block}
.auth-links{margin-top:1.4rem;text-align:center;font-size:.9rem;color:#636363}
.auth-links a{color:#54a31a;font-weight:500}
@media(max-width:900px){.cert-grid{grid-template-columns:1fr}}

/* ===== FOOTER LIQUID GLASS (frame del video del hero + vidrio) ===== */
.footerg{position:relative;padding:5rem 0 3rem;overflow:hidden;background:#0a120d}
.footerg__bg{position:absolute;inset:0;background:#0a120d;z-index:0;overflow:hidden}
.footerg__bg video{width:100%;height:100%;object-fit:cover}
.footerg__bg::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(10,18,13,.5),rgba(10,18,13,.72))}
.footerg__inner{position:relative;z-index:1;border-radius:28px;padding:2.5rem;color:rgba(255,255,255,.72)}
.liquid-glass{background:rgba(255,255,255,.04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 1px rgba(255,255,255,.12);position:relative;overflow:hidden}
.liquid-glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.15) 20%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.15) 80%,rgba(255,255,255,.45) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.footerg__top{display:grid;grid-template-columns:5fr 7fr;gap:3rem;margin-bottom:2.5rem}
.footerg__logo{display:flex;align-items:center;gap:.6rem;font-family:var(--fuente-titulos,'Instrument Sans');font-size:1.25rem;color:#fff}
.footerg__logo strong{color:#7eea57;font-weight:600}
.footerg__desc{font-size:.9rem;line-height:1.7;max-width:24rem;margin-top:1rem}
.footerg__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.footerg__col h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#fff;font-weight:600;margin-bottom:1rem}
.footerg__col a{display:block;font-size:.82rem;color:rgba(255,255,255,.6);text-decoration:none;margin-bottom:.55rem;transition:color .2s}
.footerg__col a:hover{color:#fff}
.footerg__bottom{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.1)}
.footerg__legal{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;opacity:.55;margin:0}
.footerg__legal strong{color:rgba(255,255,255,.8)}
.footerg__social{display:flex;align-items:center;gap:1rem}
.footerg__social span{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;opacity:.55}
.footerg__social a{color:rgba(255,255,255,.7);transition:color .2s,transform .2s}
.footerg__social a:hover{color:#fff;transform:translateY(-2px)}

.header__logo-img{height:46px;width:auto;display:block}
@media (max-width: 599px){.header__logo-img{height:38px}}



/* ===== ALIADOS MARQUEE INFINITO (minimal 2026) ===== */
.aliados2{background:#fff;padding:7rem 0;overflow:hidden}
.aliados2__titulo{font-family:var(--fuente-titulos,'Instrument Sans');font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:600;text-align:center;color:#212121;letter-spacing:-.02em;margin-bottom:3.5rem}
.aliados2__titulo .verde{color:#54a31a}
.aliados2__marquee{position:relative;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.aliados2__pista{display:flex;align-items:center;width:max-content;animation:aliadosScroll 32s linear infinite}
@keyframes aliadosScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.aliados2__logo{flex:0 0 auto;height:70px;width:170px;margin:0 2.75rem;display:flex;align-items:center;justify-content:center}
.aliados2__logo img{max-height:70px;max-width:170px;width:auto;height:auto;object-fit:contain;display:block}
/* única excepción: innergy es blanco sobre azul (su identidad) */
.aliados2__logo--box{background:#2447f0;border-radius:14px;width:70px;padding:8px}
.aliados2__logo--box img{max-width:54px;max-height:54px}
.aliados2__logo--varichem img{max-height:84px}
@media (max-width: 599px){.aliados2{padding:4.5rem 0}.aliados2__logo{margin:0 1.6rem;width:130px}.aliados2__pista{animation-duration:24s}}
@media(prefers-reduced-motion:reduce){.aliados2__pista{animation:none;justify-content:center;width:100%;flex-wrap:wrap;gap:2rem}}




/* ===== MIVORA: imagen protagonista + botón flotante ===== */
.card-cta{position:absolute;left:0;right:0;bottom:1.5rem;display:flex;justify-content:center;z-index:2}
.card-cta .btn{box-shadow:0 12px 32px rgba(33,33,33,.22)}

@media (min-width: 810px){
  /* POR QUÉ ELEGIRNOS — imagen IZQ + texto DER, más pegados */
  .porque__grid{grid-template-columns:45% 55%;gap:1.5rem;align-items:center}
  .porque__imagen{order:1}
  .porque__contenido{order:2;max-width:30rem}
  /* INFRAESTRUCTURA — texto IZQ + imagen DER, más pegados */
  .infraestructura__grid{grid-template-columns:55% 45%;gap:1.5rem;align-items:center}
  .infraestructura__contenido{max-width:30rem}
}
.porque__imagen,
.infraestructura__imagen{position:relative;border-radius:24px;overflow:hidden;min-height:560px;margin:0}
.porque__imagen .img-blank,
.infraestructura__imagen .img-blank{width:100%;height:100%;min-height:560px;border-radius:24px}


.infraestructura__lista .porque__item{list-style:none}
.infraestructura__lista .porque__item h3{display:flex;align-items:center;gap:.7rem;margin:0;font-size:1.05rem;font-weight:500}

/* ============================================================
   SISTEMA VISUAL ÚNICO — normalización (Framer/Stripe/Notion)
   ============================================================ */

/* 1) TIPOGRAFÍA: 3 niveles visibles + hero + meta -------------- */
/* Título de sección: MISMO tamaño en toda la web */
.titulo-seccion{
  font-family:var(--fuente-titulos)!important;
  font-size:var(--texto-h2)!important;
  font-weight:600!important;
  line-height:1.12!important;
  letter-spacing:-.02em!important;
  color:var(--color-negro)!important;
}
/* Subtítulo / título de card: un solo tamaño */
.mision__card-info h3,
.proceso__paso h3,
.carrusel__card h3,
.porque__item h3,
.infraestructura__lista .porque__item h3{
  font-family:var(--fuente-titulos)!important;
  font-size:var(--texto-h3)!important;
  font-weight:600!important;
  line-height:1.2!important;
  color:var(--color-negro)!important;
}
/* Texto base: un solo tamaño */
.porque__item p,.mision__card-info p,.infraestructura__descripcion,
.servicios__intro,.proceso__paso p,.carrusel__card p,.hero__sub,
.seccion__texto,p.base{
  font-family:var(--fuente-cuerpo)!important;
  font-size:var(--texto-base)!important;
  font-weight:400!important;
  line-height:1.7!important;
  color:var(--color-gris-700)!important;
}
/* Eyebrow: un solo tamaño */
.eyebrow{font-size:var(--texto-eyebrow)!important;font-weight:600!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--color-primario)!important}
/* sin peso 700 suelto */
strong,b{font-weight:600}

/* 2) COLOR: fondo blanco en TODO el contenido (salvo CTA y footer) */
.porque,.infraestructura,.mision,.servicios,.proceso,.aliados2,.nosotros{background:var(--color-blanco)!important}
.mision{background:var(--color-blanco)!important}
body{background:var(--color-blanco)}
/* el verde solo en acentos y acciones */
.gris{color:var(--color-gris-500)!important}
.verde,.verde-oscuro{color:var(--color-primario)!important}

/* 3) BOTONES: solo 2 tipos ------------------------------------- */
.btn{border-radius:var(--radio-pill)!important;font-family:var(--fuente-cuerpo)!important;font-weight:600!important;font-size:var(--texto-base)!important;transition:background-color .25s,box-shadow .25s,transform .25s}
.btn--primario{background:var(--color-primario)!important;color:#fff!important;border:none!important;box-shadow:none!important}
.btn--primario:hover{background:var(--color-primario-hover)!important;box-shadow:0 8px 24px rgba(84,163,26,.28)!important}
.btn--secundario{background:transparent!important;color:var(--color-negro)!important;border:1.5px solid var(--color-gris-200)!important;box-shadow:none!important}
.btn--secundario:hover{border-color:var(--color-primario)!important;color:var(--color-primario)!important}

/* 4) ESPACIADO: mismo ritmo en todas las secciones de contenido */
.porque,.infraestructura,.mision,.servicios,.proceso,.aliados2{
  padding-top:var(--espacio-seccion)!important;
  padding-bottom:var(--espacio-seccion)!important;
}
/* encabezados de sección: misma separación con su contenido */
.mision__encabezado,.servicios__encabezado,.proposito__encabezado{margin-bottom:3rem!important}



/* ============================================================
   SISTEMA VISUAL ÚNICO — radios, sombras y espaciado
   ============================================================ */
:root{
  --radio-sm: 12px;     /* elementos pequeños */
  --radio-card: 20px;   /* tarjetas / imágenes */
  --radio-xl: 28px;     /* paneles grandes (footer, auth) */
  --sombra-card: 0 8px 32px rgba(33,33,33,.08);   /* única sombra de card */
  --sombra-btn: 0 8px 24px rgba(84,163,26,.28);   /* única sombra de botón */
  --gap-1:.5rem; --gap-2:1rem; --gap-3:1.5rem; --gap-4:2rem; --gap-5:3rem;
}

/* RADIOS: consolidar los valores sueltos a tokens */
.footerg__inner,.auth-card{border-radius:var(--radio-xl)!important}
.mision__card,.carrusel__card,.porque__imagen,.infraestructura__imagen,
.scard,.vcard,.cert,.footer__card{border-radius:var(--radio-card)!important}
.aliados2__logo--box,.campo input{border-radius:var(--radio-sm)!important}
.btn,.btn--primario,.btn--secundario{border-radius:var(--radio-pill)!important}

/* SOMBRAS: una sola para cards, una sola para botones; nada de glows sueltos */
.mision__card,.carrusel__card,.scard,.vcard,.footer__card{box-shadow:var(--sombra-card)!important}
.btn--primario:hover{box-shadow:var(--sombra-btn)!important}
.card-cta .btn{box-shadow:var(--sombra-btn)!important}

/* ESPACIADO INTERNO: ritmo consistente en cards y listas */
.porque__lista{display:flex;flex-direction:column;gap:var(--gap-4)!important}
.infraestructura__lista{gap:var(--gap-2)!important}
.proceso__pasos{gap:var(--gap-3)!important}
.mision__grid{gap:var(--gap-3)!important}

/* ===== Ajuste fino: listas de "Por qué elegirnos" e Infraestructura ===== */
.porque__item h3,
.infraestructura__lista .porque__item h3{
  font-size:1.1rem!important;
  font-weight:600!important;
  margin-bottom:.35rem!important;
}
.porque__item p{
  font-size:.95rem!important;
  line-height:1.6!important;
}
.porque__lista{gap:1.35rem!important}
.infraestructura__lista{gap:.85rem!important}
.infraestructura__lista li{padding-block:.5rem!important;font-size:1.05rem!important}

/* ============================================================
   ESCALA TIPOGRÁFICA CANÓNICA — autoridad final (todo el sitio)
   Niveles: display · h2 · h3 · lead · base · sm · xs
   ============================================================ */
:root{
  --fs-display: clamp(2.5rem, 5.2vw, 4.5rem);
  --fs-h2:      clamp(1.9rem, 3vw, 2.6rem);
  --fs-h3:      1.35rem;
  --fs-lead:    1.125rem;
  --fs-base:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.8125rem;
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.65;
}

/* DISPLAY — solo el hero */
.hero__titulo{font-family:var(--fuente-titulos)!important;font-size:var(--fs-display)!important;font-weight:600!important;line-height:var(--lh-tight)!important;letter-spacing:-.02em!important}

/* H2 — todos los títulos de sección, mismo tamaño */
.titulo-seccion{font-size:var(--fs-h2)!important;font-weight:600!important;line-height:var(--lh-tight)!important;letter-spacing:-.02em!important;color:var(--color-negro)!important}

/* H3 — títulos de card / subtítulo, mismo tamaño */
.mision__card-info h3,.carrusel__card h3,.proceso__paso h3,
.scard h3,.vcard h3,.cert h3{font-size:var(--fs-h3)!important;font-weight:600!important;line-height:var(--lh-snug)!important;color:var(--color-negro)!important;margin-bottom:.6rem!important}

/* Etiquetas de lista (puntos) — un escalón menor, son listas no subtítulos */
.porque__item h3,.infraestructura__lista .porque__item h3{font-size:1.05rem!important;font-weight:600!important;line-height:var(--lh-snug)!important;margin-bottom:.3rem!important}

/* LEAD — intros de sección */
.servicios__intro,.hero__sub,.mision__encabezado p,.proposito__encabezado p{font-size:var(--fs-lead)!important;font-weight:400!important;line-height:var(--lh-normal)!important;color:var(--color-gris-700)!important}

/* BASE — cuerpo de texto general */
.porque__item p,.mision__card-info p,.infraestructura__descripcion,
.proceso__paso p,.carrusel__card p,.scard p,.vcard p,
.infraestructura__lista li,.contacto-info p,.cert p{font-size:var(--fs-base)!important;font-weight:400!important;line-height:var(--lh-normal)!important;color:var(--color-gris-700)!important}

/* SM — metadatos, columnas de footer, enlaces secundarios */
.carrusel__contador,.carrusel__meta,.footerg__desc,.footerg__col a,
.footer__col a,.footer__col p,.auth-links{font-size:var(--fs-sm)!important;line-height:var(--lh-normal)!important}

/* XS — eyebrows, etiquetas, créditos */
.eyebrow,.footerg__col h3,.footer__col h3,.footerg__legal,.footerg__social span{font-size:var(--fs-xs)!important;font-weight:600!important;letter-spacing:.12em!important;text-transform:uppercase!important}
.eyebrow{color:var(--color-primario)!important}

/* PESOS: solo 400 (cuerpo) / 600 (títulos). Nada de 700 ni 500 sueltos */
h1,h2,h3,h4,.titulo-seccion,.btn,strong,b{font-weight:600!important}
p,li,span:not(.eyebrow):not(.gris):not(.verde):not(.verde-oscuro){font-weight:inherit}

/* ============================================================
   TIPOGRAFÍA ÚNICA — una sola familia en todo el sitio
   ============================================================ */
:root{
  --fuente-titulos: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --fuente-cuerpo:  'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
}
html, body, button, input, textarea, select,
h1, h2, h3, h4, h5, h6, p, a, span, li, label, figcaption, strong, em{
  font-family: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif !important;
}

/* ============================================================
   MENÚ ESTÁTICO (sticky) — pinned arriba, hero detrás
   ============================================================ */
:root{ --header-h: 92px; }
.header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100%;
  z-index: 1000;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  animation: none !important;
}
/* el hero sube detrás del menú para conservar el video a pantalla completa */
.hero{ margin-top: 0 !important; }
.hero__contenido, .hero .contenedor{ position: relative; z-index: 1; }

/* ===== NOSOTROS — Impulsando el cambio (ref. Mivora exacta) ===== */
.nosotros{background:var(--color-blanco)}
.nosotros__encabezado{text-align:center;max-width:880px;margin-inline:auto}
.nosotros__icono{color:var(--color-gris-500);margin-bottom:.75rem}
.nosotros__titulo{font-family:var(--fuente-titulos);font-size:var(--fs-h2);font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--color-negro)}
.nosotros__galeria{display:flex;align-items:center;justify-content:center;gap:2rem;margin-block:4rem 3rem}
.nosotros__img{border-radius:var(--radio-card);overflow:hidden;flex:1;max-width:380px}
.nosotros__img img,.nosotros__img .img-blank{width:100%;height:100%;object-fit:cover}
.nosotros__img--lateral{aspect-ratio:3/4}
.nosotros__img--central{aspect-ratio:3/4.6;max-width:400px}
.nosotros__accion{text-align:center}
@media (max-width: 809px){.nosotros__galeria{flex-direction:column;gap:1.25rem}.nosotros__img,.nosotros__img--central{max-width:100%;width:100%;aspect-ratio:16/10}}

/* ============================================================
   PROCESO — fondo gris suave + cards blancas + numeración (1+2+3)
   ============================================================ */
.proceso{background:#f6f8f6!important;padding-top:var(--espacio-seccion)!important;padding-bottom:var(--espacio-seccion)!important}
.proceso__fondo{display:none!important}

/* línea de tiempo legible sobre claro */
.proceso__linea-base{background:#e2e6e2!important}
.proceso__linea-activa{background:var(--color-primario)!important}
.proceso__marcador{background:var(--color-primario)!important;color:#fff!important;box-shadow:0 6px 18px rgba(84,163,26,.35)!important}

/* grid 4 columnas con ritmo */
@media (min-width: 810px){.proceso__grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:1.5rem!important}}

/* 2) cada paso en card blanca con sombra */
.proceso__card{
  position:relative!important;
  background:#fff!important;
  border-radius:var(--radio-card)!important;
  padding:2rem 1.75rem!important;
  box-shadow:var(--sombra-card)!important;
  margin-bottom:0!important;
  transition:transform .3s var(--ease-framer,cubic-bezier(.44,0,.56,1)),box-shadow .3s!important;
}
.proceso__card:hover{transform:translateY(-6px)!important;box-shadow:0 18px 44px rgba(33,33,33,.12)!important}
.proceso__card h3{color:var(--color-negro)!important;margin-bottom:.6rem!important}
.proceso__card p{color:var(--color-gris-700)!important}

/* 3) numeración reforzada: etiqueta + número grande tenue */
.proceso__paso{
  display:inline-block!important;
  font-size:var(--fs-sm)!important;font-weight:600!important;
  color:var(--color-primario)!important;letter-spacing:.1em!important;
  text-transform:uppercase!important;margin-bottom:.9rem!important;
}


/* ===== PROCESO encabezado: patrón de color de la página ===== */
.proceso__eyebrow{color:var(--color-primario)!important;font-size:var(--fs-xs)!important;font-weight:600!important;letter-spacing:.12em!important;text-transform:uppercase!important}
.proceso__punto{background-color:var(--color-primario)!important}
.proceso__titulo{color:var(--color-negro)!important;font-size:var(--fs-h2)!important;font-weight:600!important}

/* ============================================================
   PROCESO 2 — cards estilo Mivora con movimiento (dark)
   ============================================================ */
.proceso2{background:#16201b;padding:var(--espacio-seccion) 0;overflow:hidden}
.proceso2__head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:3rem}
.proceso2 .eyebrow--claro{color:var(--color-acento)!important}
.proceso2 .titulo-seccion{color:#fff!important}
.proceso2 .titulo-seccion .verde{color:var(--color-acento)!important}
.proceso2__flechas{display:flex;gap:.75rem}
.proceso2 .carrusel__flecha{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font-size:1.1rem;cursor:pointer;transition:background .25s,border-color .25s}
.proceso2 .carrusel__flecha:hover{background:var(--color-primario);border-color:var(--color-primario)}
.proceso2__carrusel{padding-left:max(1.5rem,calc((100vw - var(--contenedor-max))/2 + var(--pad-lateral)))}
.proceso2 .carrusel__pista{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.5rem}
.proceso2 .carrusel__pista::-webkit-scrollbar{display:none}
.pcard{
  flex:0 0 360px;scroll-snap-align:start;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radio-card);
  padding:2rem;display:flex;flex-direction:column;min-height:420px;
  transition:background .3s,transform .3s,border-color .3s;
}
.pcard:hover{background:rgba(255,255,255,.07);transform:translateY(-6px);border-color:rgba(126,234,87,.4)}
.pcard__icono{width:44px;height:44px;color:var(--color-acento);margin-bottom:1.5rem}
.pcard__icono svg{width:100%;height:100%}
.pcard h3{color:#fff!important;font-size:var(--fs-h3)!important;font-weight:600!important;margin-bottom:.6rem!important}
.pcard p{color:rgba(255,255,255,.72)!important;font-size:var(--fs-base)!important;line-height:1.6!important;margin-bottom:1.5rem}
.pcard__btn{align-self:flex-start;background:transparent!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.3)!important;padding:.6rem 1.4rem!important}
.pcard__btn:hover{background:var(--color-primario)!important;border-color:var(--color-primario)!important;color:#fff!important}
.pcard__ilustracion{margin-top:auto;color:rgba(255,255,255,.45);padding-top:1.5rem}
.pcard__ilustracion svg{width:100%;height:80px}
@media (max-width: 599px){.pcard{flex:0 0 84vw}.proceso2__head{flex-direction:column;align-items:flex-start}}

/* ===== Imagen proporcional y centrada (Por qué elegirnos / Infraestructura) ===== */
@media (min-width: 810px){
  .porque__grid,.infraestructura__grid{align-items:center!important}
}
.porque__imagen,.infraestructura__imagen{
  min-height:0!important;
  height:480px!important;
  max-height:480px!important;
  max-width:420px!important;
  width:100%!important;
  margin:0!important;
  align-self:center!important;
}
/* En Por qué: imagen pegada al lado DERECHO de su columna (más cerca del texto) */
.porque__imagen{
  justify-self:end!important;
  margin:0!important;
}
/* En Infraestructura: imagen pegada al lado IZQUIERDO de su columna (más cerca del texto) */
.infraestructura__imagen{
  justify-self:start!important;
  margin-left:auto!important;
}
.porque__imagen .img-blank,.infraestructura__imagen .img-blank,
.porque__imagen img,.infraestructura__imagen img{
  min-height:0!important;height:100%!important;width:100%!important;
  object-fit:cover!important;
}
/* el botón flotante dentro de la imagen, bien posicionado */
.card-cta{bottom:1.25rem!important}

/* ===== Ritmo vertical más compacto (menos espacio en blanco) ===== */
:root{ --espacio-seccion: clamp(3rem, 5vw, 5rem); }
.porque,.infraestructura,.mision,.servicios,.proceso2,.aliados2,.nosotros{
  padding-top:var(--espacio-seccion)!important;
  padding-bottom:var(--espacio-seccion)!important;
}
.nosotros__galeria{margin-block:2.5rem 2rem!important}
.mision__encabezado,.servicios__encabezado{margin-bottom:2.25rem!important}

/* ============================================================
   FOOTER estilo "card blanca" (ref. documento) — CSS puro
   ============================================================ */
.footerh{
  position:relative;
  background:#2c5a23;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 70%, rgba(0,0,0,.18) 100%),
    url('../assets/images/footer-camion.jpg');
  background-size:cover;
  background-position:55% bottom;
  background-repeat:no-repeat;
  padding:clamp(2rem,4vw,3.5rem) clamp(1rem,3vw,2.5rem) clamp(13rem,22vw,21rem);
  min-height:780px;
}
@media (max-width: 599px){
  .footerh{
    background-position:68% bottom;
    padding-bottom:clamp(11rem,30vw,16rem);
    min-height:auto;
  }
}
.footerh__card{
  max-width:1240px;margin:0 auto;
  background:rgba(255,255,255,.98);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.7);border-radius:var(--radio-xl);
  box-shadow:0 30px 70px rgba(0,0,0,.18);overflow:hidden;
}
.footerh__top{
  display:flex;flex-direction:column;gap:2.5rem;
  padding:3rem clamp(1.5rem,4vw,3.5rem);
}
@media (min-width: 810px){.footerh__top{flex-direction:row;justify-content:space-between}}
.footerh__marca{display:flex;align-items:center;gap:.75rem}
.footerh__logo{width:44px;height:44px;border-radius:12px;background:#16201b;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 2px rgba(255,255,255,.15)}
.footerh__nombre{font-size:1.4rem;font-weight:700;color:var(--color-negro);letter-spacing:-.02em}
.footerh__nombre strong{color:var(--color-primario);font-weight:700}
.footerh__links{display:grid;grid-template-columns:repeat(3,auto);gap:2.5rem}
.footerh__col h3{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--color-negro);margin-bottom:1rem}
.footerh__col a{display:block;font-size:var(--fs-sm);color:var(--color-gris-500);font-weight:500;text-decoration:none;margin-bottom:.6rem;transition:color .25s}
.footerh__col a:hover{color:var(--color-primario)}
.footerh__bottom{
  display:flex;flex-direction:column;gap:1.25rem;align-items:center;
  border-top:1px solid #eef0ee;background:#fff;
  padding:1.5rem clamp(1.5rem,4vw,3.5rem);
}
@media (min-width: 810px){.footerh__bottom{flex-direction:row;justify-content:space-between}}
.footerh__copy{font-size:var(--fs-sm);color:var(--color-gris-500);font-weight:500;margin:0}
.footerh__copy strong{color:var(--color-negro);font-weight:600}
.footerh__social{display:flex;gap:.75rem}
.footerh__social a{
  width:40px;height:40px;border-radius:50%;border:1px solid #eef0ee;
  display:flex;align-items:center;justify-content:center;color:var(--color-gris-500);
  transition:all .3s;
}
.footerh__social a:hover{background:var(--color-primario);border-color:var(--color-primario);color:#fff}
@media (max-width: 599px){.footerh__links{grid-template-columns:1fr;gap:1.5rem}}

/* ===== Footer: logo real + dirección + NIT + cert ===== */
.footerh__marca{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;max-width:300px}
.footerh__logo-img{height:64px;width:auto;display:block}
.footerh__dir{font-size:var(--fs-sm);color:var(--color-gris-500);line-height:1.6;margin:0}
.footerh__nit{
  font-size:var(--fs-xs);
  color:var(--color-gris-500);
  font-weight:500;
  letter-spacing:.02em;
  margin:0;
}
.footerh__nit strong{color:var(--color-negro);font-weight:600;margin-right:.25rem}
.footerh__lema{font-size:var(--fs-sm);color:var(--color-primario);font-weight:600;font-style:normal;margin:0}

/* ===== Copyright row (v63) ===== */
.footerh__copyright{
  font-size:var(--fs-sm);
  color:var(--color-gris-500);
  font-weight:500;
  margin:0;
  text-align:center;
}
@media (min-width: 810px){
  .footerh__copyright{text-align:left}
}
.footerh__copyright strong{color:var(--color-negro);font-weight:600}
.footerh__copyright .sep{
  display:inline-block;
  margin:0 .5rem;
  color:rgba(33,33,33,.25);
}

/* ===== Nuestros Servicios: más aire en las cards ===== */
.servicios .carrusel__card{padding:.25rem .5rem 1.5rem!important}
.servicios .carrusel__media{margin-bottom:1.5rem!important}
.servicios .carrusel__card h3{font-size:var(--fs-h3)!important;margin-bottom:.75rem!important;line-height:1.25!important}
.servicios .carrusel__card p{font-size:var(--fs-base)!important;line-height:1.75!important;color:var(--color-gris-700)!important;margin-bottom:0!important}
.servicios .carrusel__pista{gap:2rem!important}

/* ===== ANIMACIONES PREMIUM v40 (Hero split-line + img scale + eyebrow underline) ===== */

/* 1) HERO — split-line reveal del título y stagger del subtítulo
   Cuando .hero__texto.revelar recibe la clase .visible (por el IntersectionObserver),
   las 2 líneas del título suben en cascada y luego el subtítulo entra. */
.hero__titulo .linea{
  display:block;
  overflow:hidden;
  line-height:1.05;
}
.hero__titulo .linea__interior{
  display:inline-block;
  transform:translateY(105%);
  will-change:transform;
  transition:transform 1s cubic-bezier(.44,0,.56,1);
}
.hero__texto.visible .hero__titulo .linea:nth-child(1) .linea__interior{
  transform:translateY(0);
  transition-delay:.25s;
}
.hero__texto.visible .hero__titulo .linea:nth-child(2) .linea__interior{
  transform:translateY(0);
  transition-delay:.45s;
}
.hero__texto.visible .hero__titulo .linea:nth-child(3) .linea__interior{
  transform:translateY(0);
  transition-delay:.65s;
}
/* Mientras se aplica el split-line, neutralizamos la transformación heredada de .revelar
   en el .hero__texto (porque el .revelar global le da translateY al CONTENEDOR; queremos
   que solo las líneas internas hagan el movimiento). */
.hero__texto.revelar{
  transform:none !important;
  transition:opacity .6s ease;
}
.hero__texto.revelar.visible{opacity:1}

/* El subtítulo entra después del título */
.hero__subtitulo{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .8s cubic-bezier(.44,0,.56,1), transform .8s cubic-bezier(.44,0,.56,1);
  transition-delay:.75s;
}
.hero__texto.visible .hero__subtitulo{
  opacity:1;
  transform:none;
}

/* 2) IMÁGENES — scale Mivora-style ("asentamiento")
   El contenedor sube y desvanece (.revelar) Y el hijo directo hace zoom-out. */
.revelar--img{
  overflow:hidden;
}
.revelar--img > *{
  transform:scale(1.08);
  transition:transform 1.2s cubic-bezier(.44,0,.56,1);
  transition-delay:.15s;
  will-change:transform;
}
.revelar--img.visible > *{
  transform:scale(1);
}

/* 3) EYEBROW — underline animado de izq a der */
.eyebrow{
  position:relative;
  display:inline-block;
  padding-bottom:6px;
}
.eyebrow::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  height:1px;
  width:100%;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .8s cubic-bezier(.44,0,.56,1);
  transition-delay:.25s;
}
/* Se dispara cuando el contenedor padre con .revelar entra al viewport,
   o cuando el propio .eyebrow tiene .revelar.visible */
.revelar.visible .eyebrow::after,
.eyebrow.revelar.visible::after{
  transform:scaleX(1);
}

/* 4) Respeto a usuarios con movimiento reducido */
@media (prefers-reduced-motion: reduce){
  .hero__titulo .linea__interior,
  .hero__subtitulo,
  .revelar--img > *,
  .eyebrow::after{
    transform:none !important;
    opacity:1 !important;
    transition:none !important;
  }
  .eyebrow::after{transform:scaleX(1) !important}
}

/* ===== EYEBROW MODELO 2 — minimalista con línea v45 ===== */
.eyebrow{
  display:inline-flex !important;
  align-items:center !important;
  gap:.75rem !important;
  padding-bottom:0 !important;
  position:static !important;
}
.eyebrow::before{
  content:'' !important;
  display:inline-block !important;
  width:32px;
  height:1px;
  background:currentColor !important;
  flex-shrink:0;
}
/* Desactivar el underline animado del v40 (ya no aplica con este modelo) */
.eyebrow::after{
  content:none !important;
}

/* ===== PROCESO — cards con número, sin ilustración redundante v46 ===== */
.pcard{position:relative;display:flex;flex-direction:column;gap:1rem;padding:2rem 1.75rem !important;min-height:360px}
.pcard__num{
  position:absolute;top:1.5rem;right:1.75rem;
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:2.5rem;font-weight:600;
  color:rgba(126,234,87,.25);
  letter-spacing:-.02em;line-height:1;
  pointer-events:none;
}
/* El botón de "Ver detalle" se ve mejor con un poco de espacio arriba */
.pcard .pcard__btn{margin-top:auto;align-self:flex-start}
/* La flecha del botón con variante clara (porque va sobre fondo oscuro) */
.proceso2 .pcard__btn.btn--secundario{
  border-color:rgba(255,255,255,.3);
  color:#fff;
  background:transparent;
}
.proceso2 .pcard__btn.btn--secundario:hover{
  border-color:var(--color-acento);
  color:var(--color-acento);
  background:rgba(126,234,87,.08);
}
.proceso2 .pcard__btn .btn__arrow{
  width:18px;height:18px;margin-left:.5rem;
  transition:transform .3s cubic-bezier(.44,0,.56,1);
}
.proceso2 .pcard__btn:hover .btn__arrow{transform:translateX(4px)}
/* Aseguramos que el ícono no se vea afectado por el número */
.pcard__icono{position:relative;z-index:1}

/* ===== PROCESO v47 — Grid de 4 cards (no carrusel), hover animado, sin números ===== */

/* Convertir el carrusel a grid de 4 columnas (sin scroll horizontal) */
.proceso2 .carrusel{overflow:visible !important}
.proceso2 .carrusel__pista{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  gap:1.5rem !important;
  overflow:visible !important;
  scroll-snap-type:none !important;
  padding:0 var(--pad-lateral, 2rem) !important;
}
@media (max-width: 1199px){
  .proceso2 .carrusel__pista{grid-template-columns:repeat(2, 1fr) !important}
}
@media (max-width: 599px){
  .proceso2 .carrusel__pista{grid-template-columns:1fr !important}
}

/* Quitar el contador y barra de progreso del carrusel (no aplican en grid) */
.proceso2 .carrusel__contador,
.proceso2 .carrusel__barra,
.proceso2 .carrusel__progreso{display:none !important}

/* Card con borde más definido, hover lift, icono animado */
.pcard{
  position:relative;
  display:flex;flex-direction:column;
  gap:1.25rem;
  padding:2rem 1.75rem !important;
  min-height:340px;
  background:rgba(255,255,255,.03) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:var(--radio-card, 20px) !important;
  transition:transform .5s cubic-bezier(.44,0,.56,1),
             border-color .35s ease,
             background .35s ease,
             box-shadow .5s ease;
  cursor:default;
}
.pcard:hover{
  transform:translateY(-8px);
  border-color:rgba(126,234,87,.4) !important;
  background:rgba(126,234,87,.04) !important;
  box-shadow:0 24px 50px rgba(0,0,0,.35);
}

/* Icono más grande y con animación al hover */
.pcard__icono{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  color:var(--color-acento, #7eea57);
  transition:transform .5s cubic-bezier(.44,0,.56,1), color .35s ease;
}
.pcard__icono svg{width:100%;height:100%}
.pcard:hover .pcard__icono{
  transform:scale(1.1) rotate(-6deg);
}

/* Título y descripción ya están bien, solo aseguramos spacing */
.pcard h3{margin:0;font-size:var(--fs-h3) !important;line-height:1.25}
.pcard p{margin:0;color:rgba(255,255,255,.7);line-height:1.6;flex-grow:1}

/* Botón al fondo de la card */
.pcard__btn{margin-top:auto;align-self:flex-start}

/* ===== CTA con video sobre blanco v53 ===== */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

.cta{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#16201b; /* verde oscuro como fallback si el video no carga */
  padding:clamp(5rem,12vw,9rem) clamp(1.5rem,5vw,4rem);
  text-align:center;
}
.cta__fondo, .cta__orb{display:none !important}

/* Video de fondo */
.cta__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

/* Overlay oscuro semi-transparente sobre el video para que el texto blanco sea legible */
.cta::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(22,32,27,.55) 0%, rgba(22,32,27,.65) 100%);
  pointer-events:none;
}

/* Contenido por encima del video */
.cta__contenido{
  position:relative;
  z-index:2;
  max-width:900px;
  margin:0 auto;
}

/* TÍTULO con la fuente del sitio (Instrument Sans), sin cursiva */
.cta h2{
  font-family: var(--fuente-titulo, 'Instrument Sans', sans-serif) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: var(--fs-h2) !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
  color: #ffffff !important;
  margin: 0 0 1.5rem !important;
  max-width: 780px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.cta h2 .verde{color: #ffffff !important}

/* Subtítulo */
.cta p{
  font-family: var(--fuente-cuerpo, 'Instrument Sans', sans-serif) !important;
  font-style: normal !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size:clamp(.95rem, 1.4vw, 1.05rem) !important;
  font-weight:400 !important;
  max-width:560px;
  margin:0 auto 2.5rem !important;
  line-height:1.6;
}
.cta p strong{color: #ffffff !important;font-weight:600}

/* Botones */
.cta__botones{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}

/* Botón "Ver servicios" (secundario) sobre el fondo oscuro del CTA:
   override contextual para que se vea blanco. No afecta a otros .btn--secundario del sitio. */
.cta .btn--secundario{
  background: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
}
.cta .btn--secundario:hover{
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* Respeto a reduced-motion: ocultar video y usar fondo simple */
@media (prefers-reduced-motion: reduce){
  .cta__video{display:none}
}

/* ===== Aliados sin título — spacing compacto v50 ===== */
/* Reducir padding superior porque ya no hay título encima */
.aliados2{padding:3.5rem 0 4.5rem !important}
@media (max-width: 599px){.aliados2{padding:2.5rem 0 3rem !important}}

/* ============================================================
   v59 — ESTANDARIZACIÓN POR QUÉ ELEGIRNOS + INFRAESTRUCTURA
   Brief: ambas secciones como un mismo sistema visual.
   ============================================================ */

:root{
  --bloque-img-alto: 600px;
  --bloque-img-ancho: 460px;
  --bloque-gap: clamp(2.5rem, 4vw, 4rem);
  --bloque-radio: 24px;
  --bloque-sombra: none;
  --bloque-texto-max: 32rem;
  --bloque-container-max: 1280px;
}

/* CONTAINER: max-width consistente y centrado en ambas */
.porque .contenedor,
.infraestructura .contenedor{
  max-width: var(--bloque-container-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* PADDING DE SECCIÓN: idéntico */
.porque,
.infraestructura{
  padding-top: clamp(4rem, 7vw, 6rem) !important;
  padding-bottom: clamp(4rem, 7vw, 6rem) !important;
  overflow:hidden;            /* evita cualquier overflow horizontal */
}

/* GRID idéntico — desktop */
@media (min-width: 810px){
  .porque__grid,
  .infraestructura__grid{
    display:grid !important;
    grid-template-columns: 1fr var(--bloque-img-ancho) !important;
    gap: var(--bloque-gap) !important;
    align-items:center !important;
  }
  /* AMBAS: texto IZQ + imagen DER (orden natural HTML) */
  .porque__contenido,
  .infraestructura__texto{ order: initial !important; }
  .porque__imagen,
  .infraestructura__imagen{ order: initial !important; }
}

/* IMAGEN: dimensiones, radio y sombra idénticos */
.porque__imagen,
.infraestructura__imagen{
  position:relative !important;
  width: 100% !important;
  max-width: var(--bloque-img-ancho) !important;
  height: var(--bloque-img-alto) !important;
  min-height: 0 !important;
  max-height: var(--bloque-img-alto) !important;
  margin: 0 !important;
  border-radius: var(--bloque-radio) !important;
  overflow: hidden !important;
  box-shadow: var(--bloque-sombra) !important;
  justify-self: initial !important;
}

.porque__imagen img,
.infraestructura__imagen img,
.porque__imagen .img-blank,
.infraestructura__imagen .img-blank{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: var(--bloque-radio) !important;
  display: block !important;
}

/* CARD-CTA dentro de la imagen: posición uniforme */
.porque__imagen .card-cta,
.infraestructura__imagen .card-cta{
  position:absolute !important;
  left:50% !important;
  bottom:1.25rem !important;
  transform:translateX(-50%) !important;
  z-index:2;
}

/* BLOQUE DE TEXTO: max-width y alineación idénticos */
.porque__contenido,
.infraestructura__texto{
  max-width: var(--bloque-texto-max) !important;
  width: 100% !important;
}

/* TÍTULOS h2: tamaño, peso, line-height, margen idénticos */
.porque .titulo-seccion,
.infraestructura .titulo-seccion{
  font-size: var(--fs-h2) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  margin: 0.75rem 0 1.5rem 0 !important;
}

/* EYEBROW: margen inferior uniforme */
.porque .eyebrow,
.infraestructura .eyebrow{
  margin-bottom: 0 !important;
}

/* LISTAS: spacing entre items uniforme */
.porque__lista,
.infraestructura__lista{
  display:flex !important;
  flex-direction:column !important;
  gap: 1.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ITEMS de lista: tipografía y spacing interno uniforme */
.porque__item h3,
.infraestructura .porque__item h3{
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 0 0 0.4rem 0 !important;
  display:flex;
  align-items:flex-start;
  gap:.6rem;
}
.infraestructura .porque__item h3{
  margin-bottom: 0 !important;  /* infraestructura no tiene <p> después */
}
.porque__item p{
  margin: 0 !important;
  line-height: 1.6 !important;
  color: var(--color-gris-500, #636363) !important;
  font-size: .95rem !important;
}

/* DESCRIPCIÓN intermedia (solo Infraestructura) */
.infraestructura__descripcion{
  margin: 0 0 1.5rem 0 !important;
  line-height: 1.6 !important;
  color: var(--color-gris-500, #636363) !important;
  font-size: 1rem !important;
  max-width: var(--bloque-texto-max) !important;
}

/* RESPONSIVE: mobile/tablet apilado */
@media (max-width: 809px){
  .porque__grid,
  .infraestructura__grid{
    display:flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    align-items: center !important;
  }
  /* En mobile ambas siguen el orden natural HTML (texto arriba, imagen abajo) */
  .porque__imagen,
  .porque__contenido,
  .infraestructura__imagen,
  .infraestructura__texto{
    order: initial !important;
    max-width: 100% !important;
  }
  .porque__imagen,
  .infraestructura__imagen{
    width: 100% !important;
    max-width: 460px !important;
    height: clamp(360px, 60vw, 520px) !important;
    max-height: clamp(360px, 60vw, 520px) !important;
    margin: 0 auto !important;
  }
}

/* En mobile muy chico ajustamos un poco más */
@media (max-width: 599px){
  .porque__imagen,
  .infraestructura__imagen{
    height: clamp(300px, 75vw, 420px) !important;
    max-height: clamp(300px, 75vw, 420px) !important;
    border-radius: 20px !important;
  }
}

/* v59.1 — Defensiva: eliminar cualquier halo blanco residual */
.porque__btn{box-shadow:none !important}
.porque__imagen,.infraestructura__imagen{
  box-shadow:none !important;
  border:none !important;
  outline:none !important;
}
.porque__imagen img,.infraestructura__imagen img{
  border:none !important;
  outline:none !important;
}

/* ============================================================
   v62 — INFRAESTRUCTURA con Stats Grid + Imagen Wide (estilo 2026)
   ============================================================ */

/* Anular el grid antiguo de infraestructura cuando es modo stats */
.infraestructura--stats .infraestructura__grid{display:block !important}
.infraestructura--stats{
  padding-top: clamp(4rem, 7vw, 6rem) !important;
  padding-bottom: clamp(4rem, 7vw, 6rem) !important;
}

/* HEADER centrado arriba */
.infraestructura__encabezado{
  text-align:center;
  max-width: 760px;
  margin: 0 auto 3rem;
}
.infraestructura__encabezado .eyebrow{
  justify-content:center;
  margin-bottom: 1rem !important;
}
.infraestructura__encabezado .titulo-seccion{
  font-size: var(--fs-h2) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 1rem !important;
}
.infraestructura--stats .infraestructura__descripcion{
  color: var(--color-gris-500, #636363) !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  margin: 0 auto !important;
  max-width: 580px !important;
  text-align:center;
}

/* STATS GRID — 4 columnas en desktop, responsive abajo */
.stats-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin: 0 0 3rem;
}
.stat-card{
  background: #fafafa;
  border: 1px solid rgba(33,33,33,0.06);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform .4s cubic-bezier(.44,0,.56,1),
              border-color .35s ease,
              background .35s ease;
  cursor: default;
}
.stat-card:hover{
  transform: translateY(-4px);
  border-color: var(--color-primario, #54a31a);
  background: #fff;
}
.stat-card__numero{
  font-family: var(--fuente-titulo, 'Instrument Sans', sans-serif);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  color: var(--color-primario, #54a31a);
  margin-bottom: .5rem;
  letter-spacing: -0.02em;
}
.stat-card__plus{
  font-size: .65em;
  font-style: normal;
  display: inline-block;
  margin-left: 2px;
  color: var(--color-primario, #54a31a);
}
.stat-card__label{
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--color-negro, #212121);
  text-transform: uppercase;
}

/* IMAGEN WIDE panorámica */
.infraestructura__wide{
  position: relative;
  width: 100%;
  height: 500px;
  max-height: 500px;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #16201b;
}
.infraestructura__wide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.infraestructura__wide .card-cta{
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 2;
}

/* RESPONSIVE */
@media (max-width: 899px){
  .stats-grid{grid-template-columns: repeat(2, 1fr); gap: 1rem}
  .stat-card{padding: 1.5rem 1rem}
  .infraestructura__wide{height: 400px; max-height: 400px}
}
@media (max-width: 599px){
  .stats-grid{grid-template-columns: 1fr 1fr; gap: .75rem}
  .stat-card{padding: 1.25rem .75rem}
  .stat-card__numero{font-size: 2.5rem}
  .stat-card__label{font-size: .75rem}
  .infraestructura__wide{height: 280px; max-height: 280px; border-radius: 20px}
}

/* ============================================================
   v63 — INFRAESTRUCTURA: stats integrados + camión completo
   Cumple brief completo: sin cursivas, mismo sistema visual,
   misma estructura que Por qué elegirnos.
   ============================================================ */

/* ANULAR el modo --stats anterior (v62) para evitar conflictos */
.infraestructura--stats{display:none !important}

/* INFRAESTRUCTURA v3: mismo grid que Por qué elegirnos */
@media (min-width: 810px){
  .infraestructura--v3 .infraestructura__grid{
    display:grid !important;
    grid-template-columns: 1fr var(--bloque-img-ancho) !important;
    gap: var(--bloque-gap) !important;
    align-items:center !important;
  }
}

.infraestructura--v3 .infraestructura__contenido{
  max-width: var(--bloque-texto-max) !important;
  width: 100% !important;
}

/* TIPOGRAFÍA: Sin cursivas, mismo sistema del sitio */
.infraestructura--v3 .titulo-seccion{
  font-family: var(--fuente-titulo, 'Instrument Sans', sans-serif) !important;
  font-style: normal !important;
  font-size: var(--fs-h2) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  margin: 0.75rem 0 1rem !important;
}
.infraestructura--v3 .infraestructura__descripcion{
  font-family: var(--fuente-cuerpo, 'Instrument Sans', sans-serif) !important;
  font-style: normal !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--color-gris-500, #636363) !important;
  margin: 0 0 2rem 0 !important;
  max-width: var(--bloque-texto-max) !important;
}

/* STATS GRID 2×2 dentro de la columna izquierda */
.stats-grid--2x2{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
  margin: 0 !important;
  width: 100% !important;
}

/* STAT CARD — diseño 2026, sin cursivas, sombra premium sutil */
.infraestructura--v3 .stat-card{
  background: #ffffff !important;
  border: 1px solid rgba(33, 33, 33, 0.08) !important;
  border-radius: 16px !important;
  padding: 1.5rem 1.5rem !important;
  text-align: left !important;
  min-height: 130px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-shadow: 0 1px 3px rgba(33, 33, 33, 0.03) !important;
  transition: transform .35s cubic-bezier(.44, 0, .56, 1),
              border-color .35s ease,
              box-shadow .35s ease !important;
  cursor: default !important;
}
.infraestructura--v3 .stat-card:hover{
  transform: translateY(-3px) !important;
  border-color: var(--color-primario, #54a31a) !important;
  box-shadow: 0 12px 28px rgba(84, 163, 26, 0.10) !important;
}

/* NÚMERO — protagonismo visual, fuente del sitio (no cursiva) */
.infraestructura--v3 .stat-card__numero{
  font-family: var(--fuente-titulo, 'Instrument Sans', sans-serif) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: clamp(2.25rem, 3.5vw, 2.75rem) !important;
  line-height: 1 !important;
  color: var(--color-primario, #54a31a) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: .5rem !important;
}
.infraestructura--v3 .stat-card__plus{
  font-size: .55em !important;
  font-style: normal !important;
  font-weight: 500 !important;
  display: inline-block !important;
  margin-left: 1px !important;
  color: var(--color-primario, #54a31a) !important;
  vertical-align: top !important;
  margin-top: .3em !important;
}
.infraestructura--v3 .stat-card__label{
  font-family: var(--fuente-cuerpo, 'Instrument Sans', sans-serif) !important;
  font-style: normal !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: var(--color-gris-500, #636363) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* IMAGEN del camión — completo, mismas dimensiones que Por qué */
.infraestructura--v3 .infraestructura__imagen{
  position: relative !important;
  width: 100% !important;
  max-width: var(--bloque-img-ancho) !important;
  height: var(--bloque-img-alto) !important;
  min-height: 0 !important;
  max-height: var(--bloque-img-alto) !important;
  margin: 0 !important;
  border-radius: var(--bloque-radio) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  justify-self: end !important;
}
.infraestructura--v3 .infraestructura__imagen img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border: none !important;
  outline: none !important;
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1) !important;
}

/* PARALLAX sutil al hover/scroll: la imagen se mueve apenas un poco */
.infraestructura--v3 .infraestructura__imagen:hover img{
  transform: scale(1.03) !important;
}

/* CARD-CTA flotante centrada al fondo */
.infraestructura--v3 .infraestructura__imagen .card-cta{
  position: absolute !important;
  left: 50% !important;
  bottom: 1.5rem !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
}

/* RESPONSIVE — tablet */
@media (max-width: 899px){
  .infraestructura--v3 .stats-grid--2x2{gap: .75rem !important}
  .infraestructura--v3 .stat-card{padding: 1.25rem !important; min-height: 115px !important}
}

/* RESPONSIVE — mobile: apilado, imagen completa visible */
@media (max-width: 809px){
  .infraestructura--v3 .infraestructura__grid{
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }
  .infraestructura--v3 .infraestructura__imagen{
    order: 2 !important;
    width: 100% !important;
    max-width: 460px !important;
    height: clamp(380px, 65vw, 540px) !important;
    max-height: clamp(380px, 65vw, 540px) !important;
    margin: 0 auto !important;
    justify-self: center !important;
  }
  .infraestructura--v3 .infraestructura__contenido{
    order: 1 !important;
    max-width: 100% !important;
  }
}

/* RESPONSIVE — mobile chico */
@media (max-width: 599px){
  .infraestructura--v3 .stats-grid--2x2{gap: .75rem !important}
  .infraestructura--v3 .stat-card{
    padding: 1.1rem !important;
    min-height: 100px !important;
    border-radius: 14px !important;
  }
  .infraestructura--v3 .stat-card__numero{font-size: 1.85rem !important}
  .infraestructura--v3 .stat-card__label{font-size: .8rem !important}
  .infraestructura--v3 .infraestructura__imagen{
    height: clamp(300px, 75vw, 420px) !important;
    max-height: clamp(300px, 75vw, 420px) !important;
    border-radius: 20px !important;
  }
}

/* ANIMACIÓN de entrada progresiva (las cards aparecen una tras otra) */
.infraestructura--v3 .stat-card{
  opacity: 1;
}
.infraestructura--v3 .stats-grid--2x2.revelar .stat-card{
  animation: stat-fade-in .6s cubic-bezier(.22, 1, .36, 1) both;
}
.infraestructura--v3 .stats-grid--2x2.revelar .stat-card:nth-child(1){animation-delay: 0s}
.infraestructura--v3 .stats-grid--2x2.revelar .stat-card:nth-child(2){animation-delay: .08s}
.infraestructura--v3 .stats-grid--2x2.revelar .stat-card:nth-child(3){animation-delay: .16s}
.infraestructura--v3 .stats-grid--2x2.revelar .stat-card:nth-child(4){animation-delay: .24s}

@keyframes stat-fade-in{
  from{opacity: 0; transform: translateY(16px)}
  to{opacity: 1; transform: translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  .infraestructura--v3 .stats-grid--2x2 .stat-card{animation: none !important}
}

/* v68 — Footer: franja de certificación Bureau Veritas */
.footerh__cert{
  margin: .85rem 0 0 !important;
  padding-top: .85rem;
  border-top: 1px solid rgba(33,33,33,.08);
  display: flex;
  flex-direction: column;
  gap: .15rem;
  max-width: 260px;
}
.footerh__cert-label{
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--color-gris-500, #636363);
}
.footerh__cert-norms{
  font-size: .85rem;
  font-weight: 500;
  color: var(--color-primario, #54a31a);
  letter-spacing: 0;
}

/* ============================================================
   v69 — PÁGINAS INTERNAS (nosotros.html, etc.)
   ============================================================ */

/* HERO INTERNO — 100vh con imagen estática + overlay (mismo patrón del index pero sin video) */
.hero--interno{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero--interno .hero__media{
  position: absolute; inset: 0;
  z-index: -1;
}
.hero--interno .hero__imagen{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  animation: hero-scale 1.6s cubic-bezier(.22,1,.36,1) both;
}
.hero--interno .hero__overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.35) 50%,
    rgba(0,0,0,.65) 100%);
}
@keyframes hero-scale{
  from{ transform: scale(1.08); }
  to  { transform: scale(1); }
}
.hero--interno .hero__contenido{
  position: relative;
  color: #fff;
  padding-top: var(--header-h, 92px);
}
.hero--interno .hero__titulo{
  font-family: var(--fuente-titulo, 'Instrument Sans', sans-serif);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 1rem 0 1.5rem;
}
.hero--interno .hero__subtitulo{
  font-size: var(--fs-lead);
  color: rgba(255,255,255,.85);
  max-width: 540px;
  margin: 0;
}
.eyebrow--claro{
  color: #fff !important;
}
.eyebrow--claro::before{
  background: #fff !important;
}
@media (prefers-reduced-motion: reduce){
  .hero--interno .hero__imagen{ animation: none; }
}

/* ============================================================
   NOSOTROS — Encabezado e intro
   ============================================================ */
.nosotros__intro{
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-gris-500, #636363);
  margin: 0 auto 1rem;
  max-width: 760px;
  text-align: center;
}
.nosotros__intro:last-of-type{ margin-bottom: 2.5rem; }

/* ============================================================
   VALORES CORPORATIVOS — Grid 2×2 de 4 cards con iconos
   ============================================================ */
.valores{
  padding: clamp(4rem, 7vw, 6rem) 0;
  background: #fafafa;
}
.valores__encabezado{
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.valores__encabezado .eyebrow{ justify-content: center; }
.valores__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
.valor-card{
  background: #fff;
  border: 1px solid rgba(33,33,33,.06);
  border-radius: 20px;
  padding: 2.25rem 2rem;
  transition: transform .35s cubic-bezier(.44,0,.56,1),
              border-color .35s ease,
              box-shadow .35s ease;
}
.valor-card:hover{
  transform: translateY(-4px);
  border-color: var(--color-primario, #54a31a);
  box-shadow: 0 16px 32px rgba(84,163,26,.08);
}
.valor-card__icono{
  width: 56px; height: 56px;
  border-radius: 14px;
  background: #e8f5dc;
  color: var(--color-primario, #54a31a);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
}
.valor-card h3{
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 .65rem;
  color: var(--color-negro, #212121);
  letter-spacing: -.005em;
}
.valor-card p{
  font-size: .95rem;
  line-height: 1.6;
  color: var(--color-gris-500, #636363);
  margin: 0;
}
@media (max-width: 809px){
  .valores__grid{ grid-template-columns: 1fr; gap: 1rem; }
}

/* ============================================================
   CERTIFICACIÓN — Texto izq + 3 normas der
   ============================================================ */
.certificacion{
  padding: clamp(4rem, 7vw, 6rem) 0;
  background: #fff;
}
.certificacion__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  max-width: 1280px;
}
.certificacion__contenido{ max-width: 520px; }
.certificacion__intro{
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-gris-500, #636363);
  margin: 1rem 0 1.5rem;
}
.certificacion__alcance{
  font-size: .95rem;
  line-height: 1.65;
  color: var(--color-gris-500, #636363);
  padding: 1.25rem 1.5rem;
  background: #fafafa;
  border-left: 3px solid var(--color-primario, #54a31a);
  border-radius: 0 12px 12px 0;
  margin: 0;
}
.certificacion__alcance strong{
  color: var(--color-negro, #212121);
  font-weight: 600;
}
.certificacion__normas{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.norma-card{
  background: #fff;
  border: 1px solid rgba(33,33,33,.08);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 1.25rem;
  align-items: center;
  transition: transform .35s, border-color .35s, box-shadow .35s;
}
.norma-card:hover{
  transform: translateX(4px);
  border-color: var(--color-primario, #54a31a);
  box-shadow: 0 12px 24px rgba(84,163,26,.08);
}
.norma-card__sello{
  background: var(--color-primario, #54a31a);
  color: #fff;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .05em;
  padding: .5rem .75rem;
  border-radius: 8px;
  text-align: center;
  grid-row: 1 / 3;
}
.norma-card__numero{
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-negro, #212121);
  line-height: 1;
}
.norma-card__numero span{
  font-size: .65em;
  color: var(--color-gris-500, #636363);
  font-weight: 400;
}
.norma-card__nombre{
  font-size: .9rem;
  color: var(--color-gris-500, #636363);
  line-height: 1.4;
}
@media (max-width: 809px){
  .certificacion__grid{ grid-template-columns: 1fr; gap: 2rem; }
}

/* ============================================================
   v70 — SERVICIOS.HTML (filas alternadas + alcance ISO)
   ============================================================ */

/* INTRO de la página */
.servicios-intro{ padding: clamp(4rem, 7vw, 6rem) 0 2rem; background: #fff; }
.servicios-intro__encabezado{
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.servicios-intro__encabezado .eyebrow{ justify-content: center; }
.servicios-intro__texto{
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-gris-500, #636363);
  margin: 1.25rem auto 0;
  max-width: 680px;
}

/* DETALLE — Filas alternadas */
.servicios-detalle{ padding: 2rem 0 clamp(4rem, 7vw, 6rem); background: #fff; }
.serv-fila{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(3rem, 5vw, 4.5rem) 0;
  border-top: 1px solid rgba(33,33,33,.06);
}
.serv-fila:first-of-type{ border-top: 0; padding-top: 1.5rem; }
.serv-fila--invertida .serv-fila__media{ order: 2; }
.serv-fila--invertida .serv-fila__info{ order: 1; }

/* Número grande de fondo */
.serv-fila__numero{
  position: absolute;
  top: 1.5rem;
  right: 0;
  font-family: var(--fuente-titulo, 'Instrument Sans', sans-serif);
  font-weight: 600;
  font-size: clamp(5rem, 12vw, 10rem);
  line-height: 1;
  color: rgba(84,163,26,.04);
  z-index: 0;
  pointer-events: none;
  letter-spacing: -0.04em;
}
.serv-fila--invertida .serv-fila__numero{ right: auto; left: 0; }

/* Media */
.serv-fila__media{
  position: relative;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #f4f4f4;
}
.serv-fila__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.serv-fila:hover .serv-fila__media img{ transform: scale(1.04); }

/* Info */
.serv-fila__info{ position: relative; z-index: 1; }
.serv-fila__info h3{
  font-family: var(--fuente-titulo, 'Instrument Sans', sans-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  color: var(--color-negro, #212121);
  margin: 1rem 0 1.25rem;
  letter-spacing: -.015em;
}
.serv-fila__info p{
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--color-gris-500, #636363);
  margin: 0 0 1.5rem;
}
.serv-fila__lista{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .6rem;
}
.serv-fila__lista li{
  position: relative;
  padding-left: 1.65rem;
  font-size: .95rem;
  color: var(--color-negro, #212121);
  line-height: 1.45;
}
.serv-fila__lista li::before{
  content: "";
  position: absolute;
  left: 0; top: .5rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-primario, #54a31a);
}

@media (max-width: 809px){
  .serv-fila{ grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 0; }
  .serv-fila--invertida .serv-fila__media{ order: 1; }
  .serv-fila--invertida .serv-fila__info{ order: 2; }
  .serv-fila__numero{ font-size: clamp(4rem, 18vw, 6rem); top: 0; }
}

/* ALCANCE ISO — Banda final verde oscuro */
.alcance-iso{
  background: #16201b;
  color: #fff;
  padding: clamp(4rem, 7vw, 6rem) 0;
}
.alcance-iso__grid{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.alcance-iso__sello{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  text-align: center;
}
.alcance-iso__sello-iso{
  font-family: var(--fuente-titulo, 'Instrument Sans', sans-serif);
  font-size: 3rem;
  font-weight: 600;
  color: var(--color-acento, #7eea57);
  line-height: 1;
  letter-spacing: .02em;
}
.alcance-iso__sello-normas{
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.alcance-iso__sello-normas span{
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  padding: .5rem 1rem;
  background: rgba(126,234,87,.08);
  border-radius: 8px;
}
.alcance-iso__contenido h2{ color: #fff !important; }
.alcance-iso__contenido h2 .verde-claro{ color: var(--color-acento, #7eea57); }
.alcance-iso__texto{
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
  margin: 1.25rem 0 0;
  max-width: 720px;
}
@media (max-width: 809px){
  .alcance-iso__grid{ grid-template-columns: 1fr; gap: 2rem; }
  .alcance-iso__sello{ max-width: 280px; margin: 0 auto; }
}

/* ============================================================
   v71 — CONTACTO.HTML (datos + formulario + mapa)
   ============================================================ */
.contacto{ padding: clamp(4rem, 7vw, 6rem) 0; background: #fff; }
.contacto__grid{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  max-width: 1280px;
}

/* COLUMNA IZQUIERDA: Datos */
.contacto__info{ max-width: 480px; }
.contacto__intro{
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--color-gris-500, #636363);
  margin: 1rem 0 2rem;
}

.contacto__datos{
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin-bottom: 2rem;
}
.contacto__dato{
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: #fafafa;
  border: 1px solid rgba(33,33,33,.06);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .3s, border-color .3s, background .3s;
}
.contacto__dato:hover{
  transform: translateX(4px);
  background: #fff;
  border-color: var(--color-primario, #54a31a);
}
.contacto__dato-icono{
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #e8f5dc;
  color: var(--color-primario, #54a31a);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contacto__dato--whatsapp .contacto__dato-icono{
  background: #25d366;
  color: #fff;
}
.contacto__dato-info{ display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.contacto__dato-label{
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-gris-500, #636363);
}
.contacto__dato-valor{
  font-size: .98rem;
  font-weight: 500;
  color: var(--color-negro, #212121);
  line-height: 1.4;
}

.contacto__cert{
  padding-top: 1.25rem;
  border-top: 1px solid rgba(33,33,33,.08);
  display: flex; flex-direction: column; gap: .15rem;
  margin: 0;
}
.contacto__cert-label{
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-gris-500, #636363);
}
.contacto__cert-norms{
  font-size: .92rem;
  font-weight: 500;
  color: var(--color-primario, #54a31a);
}

/* COLUMNA DERECHA: Formulario */
.contacto__form-wrap{
  background: #fafafa;
  border: 1px solid rgba(33,33,33,.06);
  border-radius: 24px;
  padding: clamp(2rem, 4vw, 2.75rem);
}
.contacto__form{ display: flex; flex-direction: column; gap: 1.1rem; }
.contacto__form-titulo{
  font-family: var(--fuente-titulo, 'Instrument Sans', sans-serif);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--color-negro, #212121);
  margin: 0 0 .25rem;
  letter-spacing: -.01em;
}
.contacto__form-subtitulo{
  font-size: .95rem;
  color: var(--color-gris-500, #636363);
  margin: 0 0 1rem;
}

.form-grupo{ display: flex; flex-direction: column; gap: .4rem; }
.form-fila{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grupo label{
  font-size: .82rem;
  font-weight: 500;
  color: var(--color-negro, #212121);
  letter-spacing: .01em;
}
.form-grupo input,
.form-grupo select,
.form-grupo textarea{
  font-family: inherit;
  font-size: .95rem;
  color: var(--color-negro, #212121);
  background: #fff;
  border: 1px solid rgba(33,33,33,.1);
  border-radius: 10px;
  padding: .75rem 1rem;
  transition: border-color .25s, box-shadow .25s;
  width: 100%;
  outline: none;
}
.form-grupo textarea{ resize: vertical; min-height: 110px; font-family: inherit; }
.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus{
  border-color: var(--color-primario, #54a31a);
  box-shadow: 0 0 0 3px rgba(84,163,26,.12);
}
.form-grupo input::placeholder,
.form-grupo textarea::placeholder{ color: #9a9a9a; }

.contacto__form-boton{ margin-top: .5rem; align-self: flex-start; }
.contacto__form-aviso{
  font-size: .8rem;
  color: var(--color-gris-500, #636363);
  margin: .5rem 0 0;
  line-height: 1.5;
}

@media (max-width: 980px){
  .contacto__grid{ grid-template-columns: 1fr; gap: 2rem; }
  .contacto__info{ max-width: 100%; }
  .form-fila{ grid-template-columns: 1fr; }
}

/* MAPA */
.contacto-mapa{
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 7vw, 6rem);
  background: #fafafa;
}
.contacto-mapa__encabezado{
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2.5rem;
}
.contacto-mapa__encabezado .eyebrow{ justify-content: center; }
.contacto-mapa__intro{
  font-size: 1rem;
  color: var(--color-gris-500, #636363);
  margin: 1rem 0 0;
}
.contacto-mapa__embed{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--contenedor-padding, 24px);
  height: 460px;
  border-radius: 24px;
  overflow: hidden;
  box-sizing: border-box;
}
.contacto-mapa__embed iframe{
  display: block;
  border-radius: 20px;
  filter: saturate(.9);
}
@media (max-width: 600px){
  .contacto-mapa__embed{ height: 380px; }
}

/* ============================================================
   v72 — INFRAESTRUCTURA.HTML (3 bloques + stats)
   ============================================================ */
.infra-bloque{
  padding: clamp(4rem, 7vw, 6rem) 0;
  background: #fff;
}
.infra-bloque--alt{ background: #fafafa; }

.infra-bloque__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  max-width: 1280px;
}
.infra-bloque__grid--invertido .infra-bloque__info{ order: 2; }
.infra-bloque__grid--invertido .infra-bloque__media{ order: 1; }

.infra-bloque__info{ max-width: 540px; }
.infra-bloque__texto{
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-gris-500, #636363);
  margin: 1.25rem 0 0;
}

.infra-bloque__media{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  box-shadow: 0 24px 48px rgba(33,33,33,.08);
}
.infra-bloque__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.infra-bloque__media:hover img{ transform: scale(1.05); }

@media (max-width: 809px){
  .infra-bloque__grid{ grid-template-columns: 1fr; gap: 2rem; }
  .infra-bloque__grid--invertido .infra-bloque__info{ order: 2; }
  .infra-bloque__grid--invertido .infra-bloque__media{ order: 1; }
  .infra-bloque__info{ max-width: 100%; }
}

/* STATS — Verde oscuro */
.infra-stats{
  background: #16201b;
  color: #fff;
  padding: clamp(4rem, 7vw, 6rem) 0;
}
.infra-stats__encabezado{
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.infra-stats__encabezado .eyebrow{ justify-content: center; }
.infra-stats__encabezado h2{ color: #fff !important; }
.infra-stats__encabezado h2 .verde-claro{ color: var(--color-acento, #7eea57); }

.infra-stats__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}
.infra-stat{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform .35s, border-color .35s, background .35s;
}
.infra-stat:hover{
  transform: translateY(-4px);
  border-color: rgba(126,234,87,.4);
  background: rgba(126,234,87,.04);
}
.infra-stat__numero{
  font-family: var(--fuente-titulo, 'Instrument Sans', sans-serif);
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1;
  color: var(--color-acento, #7eea57);
  letter-spacing: -0.02em;
}
.infra-stat__numero span{
  font-size: .55em;
  color: rgba(126,234,87,.7);
  margin-left: 2px;
}
.infra-stat__label{
  margin-top: .75rem;
  font-size: .9rem;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  letter-spacing: .01em;
}
@media (max-width: 809px){
  .infra-stats__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .infra-stats__grid{ grid-template-columns: 1fr; }
}

/* ============================================================
   v73 — AUTH (login.html · registro.html · recuperar.html)
   Minimalista centrado: solo logo + form + volver al inicio
   ============================================================ */
.auth-body{
  margin: 0;
  background:
    radial-gradient(ellipse at top, rgba(126,234,87,.06) 0%, transparent 50%),
    radial-gradient(ellipse at bottom, rgba(84,163,26,.04) 0%, transparent 50%),
    #fff;
  min-height: 100vh;
}
.auth{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  gap: 1.5rem;
}
.auth__card{
  width: 100%;
  max-width: 440px;
  background: #fff;
  border: 1px solid rgba(33,33,33,.06);
  border-radius: 24px;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: 0 24px 48px rgba(33,33,33,.06);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  animation: auth-entrar .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes auth-entrar{
  from{ opacity: 0; transform: translateY(12px); }
  to  { opacity: 1; transform: translateY(0); }
}

.auth__logo{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: transform .3s;
}
.auth__logo:hover{ transform: scale(1.04); }
.auth__logo img{
  height: 56px;
  width: auto;
  display: block;
}

.auth__encabezado{ text-align: center; }
.auth__titulo{
  font-family: var(--fuente-titulo, 'Instrument Sans', sans-serif);
  font-weight: 600;
  font-size: 1.65rem;
  letter-spacing: -.01em;
  color: var(--color-negro, #212121);
  margin: 0 0 .35rem;
}
.auth__subtitulo{
  font-size: .95rem;
  color: var(--color-gris-500, #636363);
  margin: 0;
  line-height: 1.5;
}

.auth__form{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.auth__form .form-grupo__cabecera{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.auth__checkbox{
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .87rem;
  color: var(--color-gris-500, #636363);
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
}
.auth__checkbox input[type="checkbox"]{
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--color-primario, #54a31a);
  cursor: pointer;
  flex-shrink: 0;
}
.auth__checkbox a{
  color: var(--color-primario, #54a31a);
  text-decoration: none;
  font-weight: 500;
}
.auth__checkbox a:hover{ text-decoration: underline; }

.auth__boton{
  width: 100%;
  justify-content: center;
  margin-top: .25rem;
}

.auth__alternativa{
  text-align: center;
  font-size: .9rem;
  color: var(--color-gris-500, #636363);
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(33,33,33,.06);
}
.auth__alternativa a{
  color: var(--color-primario, #54a31a);
  text-decoration: none;
  font-weight: 600;
}
.auth__alternativa a:hover{ text-decoration: underline; }

.auth__link-secundario{
  font-size: .8rem;
  color: var(--color-primario, #54a31a);
  text-decoration: none;
  font-weight: 500;
}
.auth__link-secundario:hover{ text-decoration: underline; }

.auth__volver{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  align-self: center;
  font-size: .82rem;
  color: var(--color-gris-500, #636363);
  text-decoration: none;
  font-weight: 500;
  margin-top: .25rem;
  transition: color .25s, transform .25s;
}
.auth__volver:hover{
  color: var(--color-negro, #212121);
  transform: translateX(-2px);
}

.auth__cert{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  margin: 0;
  text-align: center;
}
.auth__cert span:first-child{
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-gris-500, #636363);
}
.auth__cert span:last-child{
  font-size: .8rem;
  font-weight: 500;
  color: var(--color-primario, #54a31a);
  letter-spacing: 0;
}

/* ============================================================
   v74 — REFUERZOS RESPONSIVE Y ACCESIBILIDAD
   ============================================================ */

/* HERO INTERNO — Ajustes responsive */
@media (max-width: 899px){
  .hero--interno{ min-height: 92vh; }
  .hero--interno .hero__titulo{
    font-size: clamp(2.2rem, 7vw, 3.2rem);
    line-height: 1.1;
  }
  .hero--interno .hero__subtitulo{
    font-size: 1rem;
    max-width: 100%;
  }
}
@media (max-width: 599px){
  .hero--interno{ min-height: 88vh; }
  .hero--interno .hero__contenido{
    padding-top: calc(var(--header-h, 72px) + 1rem);
  }
}

/* HEADER — Con 6 enlaces, subir el breakpoint a 1099px */
@media (max-width: 1099px) and (min-width: 1000px){
  .header__nav{ gap: 1.5rem; }
  .header__link{ font-size: .9rem; }
}

/* SERVICIOS — filas alternadas en mobile */
@media (max-width: 599px){
  .serv-fila{ padding: 2rem 0; }
  .serv-fila__info h3{
    font-size: 1.35rem;
    line-height: 1.25;
  }
  .serv-fila__info p{ font-size: .95rem; }
  .serv-fila__numero{
    font-size: 4.5rem;
    top: -.5rem;
  }
}

/* INFRAESTRUCTURA — Bloques en mobile */
@media (max-width: 599px){
  .infra-bloque{ padding: 2.5rem 0; }
  .infra-bloque__texto{
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* CONTACTO — Datos y formulario en mobile */
@media (max-width: 599px){
  .contacto{ padding: 2.5rem 0; }
  .contacto__dato{
    padding: .85rem 1rem;
    grid-template-columns: 40px 1fr;
    gap: .85rem;
  }
  .contacto__dato-icono{ width: 38px; height: 38px; }
  .contacto__dato-valor{ font-size: .9rem; }
  .contacto__form-wrap{ padding: 1.5rem 1.25rem; }
  .contacto-mapa__embed{ padding: 0 12px; height: 340px; }
  .contacto-mapa__embed iframe{ border-radius: 16px; }
}

/* VALORES — Cards en mobile */
@media (max-width: 599px){
  .valor-card{ padding: 1.75rem 1.5rem; }
  .valor-card h3{ font-size: 1.1rem; }
  .valor-card p{ font-size: .9rem; }
}

/* CERTIFICACIÓN — Cards de normas en mobile */
@media (max-width: 599px){
  .norma-card{
    padding: 1.25rem 1.25rem;
    grid-template-columns: 50px 1fr;
    gap: 1rem;
  }
  .norma-card__numero{ font-size: 1.3rem; }
  .norma-card__nombre{ font-size: .85rem; }
}

/* AUTH — Cards en mobile */
@media (max-width: 480px){
  .auth{ padding: 1rem .75rem; }
  .auth__card{
    padding: 1.75rem 1.25rem;
    border-radius: 18px;
  }
  .auth__titulo{ font-size: 1.4rem; }
  .auth__logo img{ height: 48px; }
  .form-grupo__cabecera{ flex-direction: column; align-items: flex-start; gap: .25rem; }
}

/* ACCESIBILIDAD — Focus visible en TODOS los elementos interactivos */
*:focus-visible{
  outline: 2px solid var(--color-primario, #54a31a);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus-visible,
.btn:focus-visible,
a:focus-visible{
  outline: 2px solid var(--color-primario, #54a31a);
  outline-offset: 3px;
}

/* Imágenes — evitar que rompan layout si no cargan */
img{
  max-width: 100%;
  height: auto;
}

/* Prevenir overflow horizontal en mobile */
html, body{
  overflow-x: hidden;
}

/* Mejorar scroll en iOS */
html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Touch targets mínimos 44×44 en mobile (iOS HIG) */
@media (max-width: 599px){
  .header__link,
  .footerh__col a,
  .contacto__dato,
  .btn{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .footerh__col a{ padding: .25rem 0; }
}

/* Reducir motion según preferencia */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   PAGE HEADER COMPACTO — v60
   Sistema unificado para páginas internas (nosotros, servicios,
   infraestructura, contacto). Reemplaza el hero--interno 100vh
   por un header funcional de ~35vh. Mantiene Instrument Sans,
   verde oscuro como fondo y eyebrow verde acento.
   ============================================================ */
.page-header {
  background: #16201b;
  color: #fff;
  padding: clamp(7rem, 12vw, 10rem) 0 clamp(3rem, 5vw, 5rem);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.page-header::after {
  content: '';
  position: absolute;
  bottom: -120px;
  right: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126, 234, 87, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.page-header .contenedor {
  position: relative;
  z-index: 1;
}
.page-header__eyebrow {
  display: inline-block;
  font-family: 'Instrument Sans', sans-serif;
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7eea57;
  margin-bottom: 1.25rem;
}
.page-header__titulo {
  font-family: 'Instrument Sans', sans-serif;
  font-style: normal;
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin: 0 0 1.25rem;
}
.page-header__lead {
  font-family: 'Instrument Sans', sans-serif;
  font-style: normal;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 680px;
  margin: 0;
}
.page-header__meta {
  font-family: 'Instrument Sans', sans-serif;
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  margin: 1.5rem 0 0;
}
@media (max-width: 599px) {
  .page-header { padding: 6rem 0 2.5rem; }
  .page-header::after { width: 240px; height: 240px; bottom: -80px; right: -80px; }
}

/* ============================================================
   CONTACTO — Refinamientos visuales v61
   Mejora cards, mapa y formulario sin romper layout existente.
   ============================================================ */

/* Cards de datos — hover más elegante (lift + sombra suave) */
.contacto__dato{
  transition: transform .3s cubic-bezier(.2,.7,.2,1),
              box-shadow .3s ease,
              border-color .3s,
              background .3s !important;
}
.contacto__dato:hover{
  transform: translateY(-3px) !important;
  background: #fff !important;
  border-color: rgba(84,163,26,.25) !important;
  box-shadow: 0 12px 28px rgba(84,163,26,.10) !important;
}
.contacto__dato-icono{
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
/* Al hacer hover en la card (no whatsapp), el ícono se llena de verde */
.contacto__dato:not(.contacto__dato--whatsapp):hover .contacto__dato-icono{
  background: #54a31a;
  color: #fff;
}
.contacto__dato:hover .contacto__dato-icono{
  transform: scale(1.05);
}

/* Form wrapper — elevación sutil */
.contacto__form-wrap{
  background: #ffffff !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.06);
  border-color: rgba(33,33,33,.05) !important;
  position: relative;
}

/* Badge "Respuesta en 24h" arriba del form titulo */
.contacto__form-badge{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #e8f5dc;
  color: #468a14;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .4rem .85rem;
  border-radius: 50px;
  margin-bottom: 1rem;
  width: fit-content;
}
.contacto__form-badge::before{
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #54a31a;
  box-shadow: 0 0 0 4px rgba(84,163,26,.18);
  animation: contactoPulso 2s ease-in-out infinite;
}
@keyframes contactoPulso{
  0%, 100% { box-shadow: 0 0 0 4px rgba(84,163,26,.18); }
  50%      { box-shadow: 0 0 0 7px rgba(84,163,26,.05); }
}

/* Mapa — más prominente con sombra y mayor altura */
.contacto-mapa__embed{
  height: 520px !important;
  box-shadow: 0 25px 60px rgba(0,0,0,.08);
}
.contacto-mapa__embed iframe{
  height: 100% !important;
  width: 100%;
  filter: saturate(.95);
}

/* CTA "Cómo llegar" debajo del mapa */
.contacto-mapa__cta-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.contacto-mapa__cta-wrap .contacto-mapa__nota{
  font-size: .875rem;
  color: #636363;
  margin: 0;
}

@media (max-width: 599px){
  .contacto-mapa__embed{ height: 380px !important; }
}

/* ============================================================
   HEADER v62 — Sistema completo con dropdowns
   - Menú con 3 dropdowns (Nosotros · Servicios · Infraestructura)
   - Login como ícono pequeño en esquina derecha
   - Botón "Cotiza ahora" separado del menú (fuera de la píldora)
   - Color: gris oscuro por defecto + verde en hover/activo
   - Medidas precisas (logo 40px, píldora 72px)
   ============================================================ */

/* --- Medidas precisas --- */
.header__inner {
  gap: 16px !important;
  align-items: center !important;
}
.header__pildora {
  min-height: 72px !important;
  padding: 12px 16px 12px 40px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem;
}
.header__logo img {
  height: 40px !important;
  width: auto;
}

/* --- Nav contenedor --- */
.header__nav {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin: 0 auto;
}

/* --- Links simples del menú (Inicio, Contacto) --- */
.header__link {
  font-family: 'Instrument Sans', sans-serif !important;
  font-style: normal !important;
  color: #212121 !important;
  font-weight: 500 !important;
  font-size: 0.9375rem !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  padding: 0.625rem 0.875rem !important;
  border-radius: 8px !important;
  transition: color 0.2s ease, background 0.2s ease !important;
  position: relative;
}
.header__link::after { display: none !important; } /* Quitar el subrayado anim viejo */
.header__link:hover {
  color: #54a31a !important;
  background: rgba(84, 163, 26, 0.06) !important;
}
.header__link.activo {
  color: #54a31a !important;
  font-weight: 600 !important;
  background: rgba(84, 163, 26, 0.08) !important;
}

/* ============================================================
   DROPDOWN
   ============================================================ */
.header__dropdown {
  position: relative;
}
.header__dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Instrument Sans', sans-serif;
  font-style: normal;
  color: #212121;
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.625rem 0.875rem;
  border-radius: 8px;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.header__dropdown__trigger:hover,
.header__dropdown:hover .header__dropdown__trigger,
.header__dropdown:focus-within .header__dropdown__trigger,
.header__dropdown.abierto .header__dropdown__trigger {
  color: #54a31a;
  background: rgba(84, 163, 26, 0.06);
}
.header__dropdown__arrow {
  width: 11px;
  height: 11px;
  transition: transform 0.25s ease;
}
.header__dropdown:hover .header__dropdown__arrow,
.header__dropdown:focus-within .header__dropdown__arrow,
.header__dropdown.abierto .header__dropdown__arrow {
  transform: rotate(180deg);
}

/* --- Panel del dropdown --- */
.header__dropdown__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 280px;
  background: #ffffff;
  border-radius: 18px;
  padding: 0.625rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(33, 33, 33, 0.04);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.25s ease;
  z-index: 100;
}
.header__dropdown:hover .header__dropdown__panel,
.header__dropdown:focus-within .header__dropdown__panel,
.header__dropdown.abierto .header__dropdown__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* --- Bridge invisible para que el hover no se corte entre trigger y panel --- */
.header__dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
}

/* --- Links dentro del dropdown --- */
.header__dropdown__link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  color: #212121;
  font-family: 'Instrument Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.9375rem;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.2s ease;
  white-space: nowrap;
}
.header__dropdown__link:hover {
  background: #f0f7ea;
  color: #54a31a;
  padding-left: 1.25rem;
}

/* --- Link destacado (Báscula) — solo negrita, sin viñeta --- */
.header__dropdown__link--destacado {
  font-weight: 600;
}

/* --- Separador opcional dentro del panel --- */
.header__dropdown__separador {
  height: 1px;
  background: rgba(33, 33, 33, 0.06);
  margin: 0.375rem 0.5rem;
}

/* ============================================================
   LOGIN ICON
   ============================================================ */
.header__login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(33, 33, 33, 0.12);
  color: #212121;
  text-decoration: none;
  transition: all 0.25s ease;
  flex-shrink: 0;
  margin-left: 0.25rem;
}
.header__login:hover {
  background: rgba(84, 163, 26, 0.08);
  border-color: #54a31a;
  color: #54a31a;
  transform: translateY(-1px);
}
.header__login svg {
  width: 18px;
  height: 18px;
}

/* ============================================================
   BOTÓN "COTIZA AHORA" (fuera de la píldora)
   ============================================================ */
.header__cta {
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  padding: 0 1.5rem !important;
  white-space: nowrap;
  border-radius: 50px !important;
}

/* ============================================================
   RESPONSIVE — Mobile: hamburguesa con dropdowns como accordion
   ============================================================ */
@media (max-width: 1099px) {
  .header__nav,
  .header__login {
    display: none !important;
  }
  .header__hamburguesa {
    display: flex !important;
    margin-left: auto;
  }
  /* Cuando el menú móvil está abierto */
  .header__nav.abierto {
    display: flex !important;
    position: absolute;
    top: calc(100% + 8px);
    left: 16px;
    right: 16px;
    flex-direction: column;
    align-items: stretch;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    padding: 12px;
    z-index: 200;
    gap: 4px;
    margin: 0;
  }
  .header__nav.abierto .header__link,
  .header__nav.abierto .header__dropdown__trigger {
    width: 100%;
    justify-content: space-between;
    padding: 0.875rem 1rem;
  }
  .header__nav.abierto .header__dropdown {
    width: 100%;
  }
  /* Login en móvil dentro del menú */
  .header__nav.abierto .header__login-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 8px;
    padding: 0.75rem 1rem;
    border: 1.5px solid rgba(33, 33, 33, 0.10);
    border-radius: 12px;
    color: #212121;
    text-decoration: none;
    font-weight: 500;
  }
  /* Dropdowns en mobile = accordion (cerrados por defecto) */
  .header__nav.abierto .header__dropdown__panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: #f6f7f5;
    margin: 4px 0 0;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }
  .header__nav.abierto .header__dropdown.abierto .header__dropdown__panel {
    max-height: 600px;
    padding: 8px;
  }
  /* Login icon oculto en mobile (va dentro del menú abierto) */
  .header__login {
    display: none !important;
  }
  /* Cotiza button — ocultar arriba, mostrar dentro del menú */
  .header__cta {
    display: none !important;
  }
  .header__nav.abierto .header__cta-mobile {
    display: inline-flex !important;
    margin-top: 8px;
    justify-content: center;
    width: 100%;
  }
  .header__login-mobile,
  .header__cta-mobile { display: none; }
}

@media (min-width: 1100px) {
  .header__hamburguesa { display: none !important; }
  .header__login-mobile,
  .header__cta-mobile { display: none !important; }
}

/* Estado activo del trigger de dropdown (cuando estás en una página dentro del grupo) */
.header__dropdown__trigger.activo {
  color: #54a31a !important;
  font-weight: 600 !important;
  background: rgba(84, 163, 26, 0.08) !important;
}

/* ============================================================
   PAGE HEADER v65 — Video de fondo logo animado
   Capa 0: video (loop subtle lighting changes)
   Capa 1: overlay oscuro + acento radial verde
   Capa 2: contenido (eyebrow + título + lead)
   ============================================================ */
.page-header__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(22,32,27,0.55) 0%, rgba(22,32,27,0.72) 100%);
  pointer-events: none;
}
.page-header::after {
  z-index: 1 !important;
}
.page-header .contenedor {
  z-index: 2 !important;
}
/* En reduced-motion: pausar video */
@media (prefers-reduced-motion: reduce){
  .page-header__video { display: none; }
}

/* ============================================================
   FORMULARIO CONTACTO — Checkbox Habeas Data (Ley 1581/2012)
   ============================================================ */
.form-habeas {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  margin: 1rem 0 1.5rem;
  background: #f6f7f5;
  border-radius: 12px;
  border-left: 3px solid #54a31a;
}
.form-habeas input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  accent-color: #54a31a;
  cursor: pointer;
}
.form-habeas label {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #3a3a3a;
  cursor: pointer;
  margin: 0;
  font-weight: 400;
}
.form-habeas label a {
  color: #54a31a;
  text-decoration: underline;
  font-weight: 600;
}
.form-habeas label a:hover {
  color: #468a14;
}
.form-habeas__req {
  color: #dc2626;
  font-weight: 600;
}

/* ============================================================
   Párrafos de contenido justificados — jul 2026 (Symmetry)
   Solo texto de lectura. NO afecta títulos, subtítulos,
   leads centrados, footer ni textos de ayuda del formulario.
   ============================================================ */
.mision__card-info p,
.carrusel__card p,
.porque__item p,
.valor-card p,
.serv-fila__info p,
.infra-bloque__texto,
.infraestructura__descripcion,
.servicios__intro,
.alcance-iso__texto,
.certificacion__intro,
.certificacion__alcance,
.contacto__intro {
  text-align: justify;
  text-justify: inter-word;
}

/* ============================================================
   Ubicación de la báscula (infraestructura) — jul 2026 (Symmetry)
   ============================================================ */
.infra-ubicacion {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.infra-ubicacion__dir {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 !important;
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base) !important;
  color: var(--color-negro) !important;
  font-weight: 500 !important;
  text-align: left !important;
}
.infra-ubicacion__icono {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--color-primario);
}
.infra-ubicacion__btn {
  text-decoration: none;
}

/* ============================================================
   Submenú flyout — categoría "Gestión ambiental y empresarial"
   jul 2026 (Symmetry)
   ============================================================ */
.header__submenu { position: relative; }
.header__submenu__trigger { justify-content: space-between; }
.header__submenu__arrow {
  width: 12px;
  height: 12px;
  flex: none;
  transition: transform 0.2s ease;
}
.header__submenu:hover .header__submenu__arrow,
.header__submenu:focus-within .header__submenu__arrow {
  transform: translateX(3px);
  color: #54a31a;
}
/* Puente invisible para no cortar el hover entre trigger y panel lateral */
.header__submenu::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 16px;
  background: transparent;
}
.header__submenu__panel {
  position: absolute;
  top: -0.625rem;
  left: calc(100% + 10px);
  min-width: 250px;
  background: #ffffff;
  border-radius: 18px;
  padding: 0.625rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(33, 33, 33, 0.04);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.25s ease;
  z-index: 110;
}
.header__submenu:hover .header__submenu__panel,
.header__submenu:focus-within .header__submenu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Móvil: el submenú se muestra indentado dentro del acordeón */
@media (max-width: 1099px) {
  .header__nav.abierto .header__dropdown.abierto .header__dropdown__panel {
    max-height: 900px;
  }
  .header__nav.abierto .header__submenu__panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: transparent;
    min-width: 0;
    padding: 2px 0 2px 14px;
    margin: 2px 0 0;
  }
  .header__nav.abierto .header__submenu__arrow { transform: rotate(90deg); }
  .header__submenu::after { display: none; }
}

/* ============================================================
   Submenú anidado en "Servicios" (Gestión ambiental y empresarial)
   jul 2026 (Symmetry). Flyout en desktop, acordeón en móvil.
   ============================================================ */
.header__subdropdown { position: relative; }
.header__subdropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  width: 100%;
  padding: 0.625rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  color: #212121;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.header__subdropdown__trigger:hover,
.header__subdropdown:hover .header__subdropdown__trigger,
.header__subdropdown.abierto .header__subdropdown__trigger {
  background: #f0f7ea;
  color: #54a31a;
}
.header__subdropdown__arrow {
  width: 11px;
  height: 11px;
  flex: none;
  transition: transform 0.2s ease;
}
.header__subdropdown:hover .header__subdropdown__arrow,
.header__subdropdown.abierto .header__subdropdown__arrow {
  transform: rotate(90deg);
}
/* Desktop: flyout hacia la derecha */
.header__subdropdown__panel {
  position: absolute;
  top: -0.625rem;
  left: 100%;
  min-width: 240px;
  background: #ffffff;
  border-radius: 16px;
  padding: 0.625rem;
  box-shadow: 0 16px 48px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.04);
  border: 1px solid rgba(33,33,33,0.04);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.2s ease;
  z-index: 110;
}
/* Puente invisible para no cortar el hover entre panel y flyout */
.header__subdropdown__panel::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.85rem;
  width: 0.85rem;
  background: transparent;
}
.header__subdropdown:hover .header__subdropdown__panel,
.header__subdropdown:focus-within .header__subdropdown__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(0.5rem);
}

/* Móvil: el flyout pasa a acordeón dentro del panel de Servicios */
@media (max-width: 1099px) {
  .header__nav.abierto .header__subdropdown { width: 100%; }
  .header__nav.abierto .header__subdropdown__trigger { width: 100%; }
  .header__nav.abierto .header__subdropdown__panel {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: #eef1ec;
    margin: 4px 0 0;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }
  .header__subdropdown__panel::before { display: none; }
  .header__nav.abierto .header__subdropdown.abierto .header__subdropdown__panel {
    max-height: 500px;
    padding: 6px;
  }
  /* Más aire para el acordeón principal con el submenú desplegado */
  .header__nav.abierto .header__dropdown.abierto .header__dropdown__panel {
    max-height: 1000px;
  }
}

/* ============================================================
   Banners (page-header / hero): párrafos justificados, NO títulos
   jul 2026 (Symmetry)
   ============================================================ */
.page-header__lead,
.hero__subtitulo {
  text-align: justify;
  text-justify: inter-word;
}

/* Categoría del submenú como enlace + encabezado de grupo en servicios — jul 2026 */
.header__subdropdown__trigger { text-decoration: none; }
.serv-grupo {
  max-width: 820px;
  margin: 1rem auto 0;
  padding-top: 3.5rem;
  text-align: center;
}
.serv-grupo .eyebrow { justify-content: center; }
.serv-grupo__intro {
  margin-top: 1rem;
  font-size: var(--fs-lead, 1.125rem);
  line-height: var(--lh-normal, 1.6);
  color: var(--color-gris-700);
  text-align: center;
}

/* Tarjetas del carrusel del home como enlaces — jul 2026 */
a.carrusel__card { text-decoration: none; color: inherit; cursor: pointer; }

/* ============================================================
   Header: logo más grande y mejor distribuido — jul 2026 (Symmetry)
   ============================================================ */
.header__logo img,
.header__logo-img { height: 52px !important; }
.header__pildora { min-height: 76px !important; padding: 12px 20px 12px 32px !important; }
@media (max-width: 599px) {
  .header__logo img,
  .header__logo-img { height: 44px !important; }
}

/* ============================================================
   Flechas del carrusel más visibles (verde de marca) — jul 2026
   ============================================================ */
.carrusel__flecha {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid var(--color-primario) !important;
  color: var(--color-primario) !important;
  background-color: #ffffff !important;
  cursor: pointer;
}
.carrusel__flecha:hover {
  background-color: var(--color-primario) !important;
  color: #ffffff !important;
  border-color: var(--color-primario) !important;
}
.carrusel__flecha:disabled {
  opacity: .4;
  cursor: default;
}

/* ============================================================
   "En cifras" (infra-stats): degradado + patron + glass + movimiento — jul 2026
   ============================================================ */
.infra-stats {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 440px at 50% -6%, rgba(84,163,26,0.26), transparent 60%),
    linear-gradient(160deg, #223428 0%, #17241c 100%);
}
.infra-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%237eea57'/%3E%3C/svg%3E");
  background-size: 28px 28px;
  opacity: 0.08;
  animation: statsDrift 60s linear infinite;
}
.infra-stats::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -25%;
  left: -15%;
  width: 55%;
  height: 90%;
  background: radial-gradient(circle at center, rgba(84,163,26,0.28), transparent 60%);
  filter: blur(34px);
  pointer-events: none;
  animation: statsGlow 15s ease-in-out infinite alternate;
}
@keyframes statsDrift {
  from { background-position: 0 0; }
  to   { background-position: 280px 280px; }
}
@keyframes statsGlow {
  0%   { transform: translate(0, 0); opacity: .9; }
  100% { transform: translate(120%, 18%); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .infra-stats::before, .infra-stats::after { animation: none; }
}
.infra-stats > .contenedor { position: relative; z-index: 1; }
.infra-stat { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ============================================================
   Fondos "eco" con movimiento en secciones oscuras planas — jul 2026
   (mismo estilo de "En cifras": degradado + patrón + resplandor)
   ============================================================ */
.proceso2, .alcance-iso {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 440px at 50% -6%, rgba(84,163,26,0.22), transparent 60%),
    linear-gradient(160deg, #223428 0%, #17241c 100%) !important;
}
.proceso2::before, .alcance-iso::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%237eea57'/%3E%3C/svg%3E");
  background-size: 28px 28px; opacity: 0.07;
  animation: statsDrift 60s linear infinite;
}
.proceso2::after, .alcance-iso::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -25%; left: -15%; width: 55%; height: 90%;
  background: radial-gradient(circle at center, rgba(84,163,26,0.26), transparent 60%);
  filter: blur(34px);
  animation: statsGlow 15s ease-in-out infinite alternate;
}
.proceso2 > *, .alcance-iso > .contenedor { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .proceso2::before, .proceso2::after,
  .alcance-iso::before, .alcance-iso::after { animation: none; }
}

/* Intro de servicios: corte de líneas equilibrado (evita hueco feo) — jul 2026 */
.servicios-intro__texto {
  text-align: center;
  text-wrap: balance;
}

/* Logo EAT del footer un poco más grande — jul 2026 */
.footerh__logo-img { height: 78px !important; }