/* ===================================================================
   SOFORESTA S.A.S. — Sitio público (borrador)
   Paleta tomada del logo: verde brillante (hojas) + verde oscuro (texto)
   =================================================================== */

:root {
  --verde: #2f9e2f;         /* hojas del logo */
  --verde-osc: #15691c;     /* texto del logo */
  --verde-mas-osc: #0d4a15; /* profundidad */
  --verde-claro: #eaf6ea;
  --verde-suave: #f4faf4;
  --acento-lima: #c4d600;   /* verde-amarilloso tipo Ecopetrol: línea de header y borde de tarjetas */
  --tinta: #1a241c;
  --gris: #262e28;
  --borde: #e2ece4;
  --blanco: #ffffff;
  --max: 1180px;
  --radio: 16px;
  --sombra: 0 10px 40px rgba(13, 74, 21, 0.10);
  --sombra-sm: 0 4px 16px rgba(13, 74, 21, 0.08);
  --fuente: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-titulo: "Barlow Semi Condensed", "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* El header queda fijo (sticky) arriba: sin esto, al saltar a una sección
     su borde superior queda tapado por el menú. 84px de header + respiro visual. */
  scroll-padding-top: 100px;
}

/* Resaltado de selección en verde de marca (en vez del azul del navegador) */
::selection { background: rgba(47, 158, 47, .28); color: inherit; }

/* Animaciones de aparición al hacer scroll (solo si hay JS) */
.js .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}
.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--tinta);
  background: var(--blanco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--fuente-titulo); font-weight: 800; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); color: var(--verde-mas-osc); }
p { margin: 0 0 1em; }

.contenedor { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 22px; }
.seccion { padding: clamp(40px, 6vw, 72px) 0; }
.kicker {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--verde); margin-bottom: 14px;
}
.kicker--claro { color: #bff0bf; }
.seccion__head { max-width: 680px; margin: 0 auto clamp(36px, 5vw, 60px); text-align: center; }
.seccion__intro { color: var(--gris); font-size: 1.08rem; }

/* ===== Botones ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; font-weight: 700; font-size: 1rem;
  border-radius: 10px; cursor: pointer; border: 2px solid transparent;
  transition: transform .06s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primario { background: var(--verde); color: #fff; box-shadow: var(--sombra-sm); }
.btn--primario:hover { background: var(--verde-osc); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--ghost:hover { background: rgba(255,255,255,.14); }
.btn--claro { background: #fff; color: var(--verde-osc); white-space: nowrap; }
.btn--claro:hover { background: var(--verde-claro); }

.enlace-flecha { color: var(--verde-osc); font-weight: 700; }
.enlace-flecha:hover { color: var(--verde); }

/* ===== Marca / logo ===== */
.marca { display: inline-flex; align-items: center; gap: 10px; }
.marca__logo { height: 52px; width: auto; display: block; }
.marca__fallback { display: none; align-items: center; gap: 10px; }
.marca__fallback.mostrar { display: inline-flex; }
.marca__icono { width: 40px; height: 40px; flex: none; }
.marca__icono .hojas ellipse { fill: var(--verde); }
.marca__icono .tronco { fill: var(--verde-osc); }
.marca__texto { font-weight: 700; font-size: 1.2rem; color: var(--verde-osc); letter-spacing: .01em; }
.marca__texto b { color: var(--verde); font-weight: 700; }
.marca__texto--claro { color: #fff; }
.marca__texto--claro b { color: #bff0bf; }

/* ===== Nav ===== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(10px);
  transition: box-shadow .2s ease;
}
/* Línea de acento lima bajo el header (estilo corporativo tipo Ecopetrol) */
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--acento-lima);
}
.nav.scrolled { box-shadow: var(--sombra-sm); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.menu { display: flex; align-items: center; gap: 26px; }
.menu a { font-weight: 600; font-size: .96rem; color: var(--tinta); position: relative; }
.menu a:not(.menu__portal):hover { color: var(--verde-osc); }
.menu a:not(.menu__portal)::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--verde); transition: width .2s ease;
}
.menu a:not(.menu__portal):hover::after { width: 100%; }
.menu__portal {
  background: var(--verde-claro); color: var(--verde-osc) !important;
  padding: 9px 16px; border-radius: 8px; font-weight: 700;
}
.menu__portal:hover { background: var(--verde); color: #fff !important; }

/* ===================================================================
   Menú desplegable de "Nuestro compromiso"
   Escritorio: hover/focus sobre .menu__item-drop revela el panel (con
   pico, sombra y stagger de entrada por ítem). Móvil (breakpoint más
   abajo): se convierte en un acordeón que abre/cierra un botón caret,
   controlado por JS (main.js), sin position:absolute.
   =================================================================== */
.menu__item-drop { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.menu__drop-caret-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; margin: 0 0 0 -2px;
  background: none; border: none; color: var(--tinta); cursor: default;
  pointer-events: none; /* en escritorio el hover del contenedor ya abre el panel */
}
.menu__drop-caret {
  width: 9px; height: 6px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.menu__item-drop:hover .menu__drop-caret,
.menu__item-drop:focus-within .menu__drop-caret,
.menu__item-drop.is-open .menu__drop-caret { transform: rotate(180deg); }

.menu__drop-panel {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translate(-50%, -8px);
  min-width: 264px; background: var(--blanco);
  border: 1px solid var(--borde); border-radius: 14px;
  box-shadow: var(--sombra); padding: 8px;
  opacity: 0; pointer-events: none; z-index: 45;
  transition: opacity .26s ease, transform .26s cubic-bezier(.2, .7, .2, 1);
}
.menu__drop-panel::before {
  content: ""; position: absolute; top: -6px; left: 50%;
  width: 12px; height: 12px; background: var(--blanco);
  border-left: 1px solid var(--borde); border-top: 1px solid var(--borde);
  border-radius: 3px 0 0 0; transform: translateX(-50%) rotate(45deg);
}
.menu__item-drop:hover .menu__drop-panel,
.menu__item-drop:focus-within .menu__drop-panel,
.menu__item-drop.is-open .menu__drop-panel {
  opacity: 1; pointer-events: auto; transform: translate(-50%, 0);
}
.menu__drop-panel a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  font-weight: 600; font-size: .9rem; color: var(--tinta);
  opacity: 0; transform: translateY(6px);
  transition: background .18s ease, color .18s ease, opacity .32s ease, transform .32s ease;
}
.menu__drop-panel a::after { display: none; }
.menu__drop-panel a:hover { background: var(--verde-claro); color: var(--verde-osc); }
.menu__item-drop:hover .menu__drop-panel a,
.menu__item-drop:focus-within .menu__drop-panel a,
.menu__item-drop.is-open .menu__drop-panel a { opacity: 1; transform: none; }
.menu__drop-panel a:nth-child(1) { transition-delay: .02s; }
.menu__drop-panel a:nth-child(2) { transition-delay: .06s; }
.menu__drop-panel a:nth-child(3) { transition-delay: .1s; }
.menu__drop-panel a:nth-child(4) { transition-delay: .14s; }
.menu__drop-item-icon {
  flex: none; width: 19px; height: 19px; fill: none;
  stroke: var(--verde-osc); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .menu__drop-panel, .menu__drop-panel a, .menu__drop-caret { transition: none !important; }
}

.hamburguesa { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.hamburguesa span { display: block; width: 26px; height: 3px; background: var(--verde-osc); border-radius: 3px; margin: 5px 0; transition: .25s; }

/* ===== Hero ===== */
.hero {
  position: relative; overflow: hidden;
  min-height: min(88vh, 760px);
  display: flex; flex-direction: column; justify-content: center;
  color: #fff; text-align: left;
  -webkit-user-select: none; user-select: none; /* look limpio como la referencia */
  /* Cuando tengas una foto real: reemplaza el degradado por
     background: linear-gradient(...), url('img/hero.jpg') center/cover; */
  background:
    linear-gradient(120deg, rgba(13,74,21,.94) 0%, rgba(21,105,28,.86) 45%, rgba(47,158,47,.72) 100%);
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; background: transparent; border: 0;
}
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  /* Oscurecido NEUTRO (negro translúcido), no verde: respeta los colores
     originales del video. Concentrado a la izquierda (donde va el texto);
     el lado derecho queda con el color original. */
  background:
    /* Charco difuminado detrás del texto (izquierda), se desvanece antes del lado derecho */
    radial-gradient(130% 115% at 18% 48%, rgba(0,0,0,.70) 0%, rgba(0,0,0,.40) 34%, rgba(0,0,0,0) 66%),
    /* Refuerzo horizontal para cubrir todo el ancho del titular */
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.34) 34%, rgba(0,0,0,.12) 54%, rgba(0,0,0,0) 74%),
    /* Base inferior suave */
    linear-gradient(to top, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 26%);
}
.hero__inner { position: relative; z-index: 2; }
/* En pantallas anchas, el contenedor estándar (1180px) deja mucho espacio vacío
   a la izquierda del hero. Lo ensanchamos solo aquí para que el texto se acerque
   al borde y aproveche mejor el video de fondo. */
.hero .contenedor { max-width: 1460px; }
.hero__eyebrow { color: #eafbe8; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; margin-bottom: 16px; text-shadow: 0 0 2px rgba(0,0,0,.5), 0 1px 10px rgba(0,0,0,.6); }
.hero__titulo { font-size: clamp(2.2rem, 6vw, 4.2rem); font-weight: 800; margin: 0 0 18px; max-width: 15ch; min-height: 1.2em; text-shadow: 0 0 2px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.62), 0 6px 34px rgba(0,0,0,.5); }
.hero__rotador { display: inline-block; animation: aparecer .5s ease; }
.hero__sub { font-size: clamp(1.05rem, 2vw, 1.3rem); color: #f2fbf1; max-width: 46ch; margin-bottom: 30px; text-shadow: 0 0 2px rgba(0,0,0,.5), 0 1px 14px rgba(0,0,0,.6); }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__scroll {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 2; color: #fff; font-size: 1.5rem; opacity: .8; animation: flotar 1.8s ease-in-out infinite;
}
@keyframes flotar { 0%,100% { transform: translate(-50%, 0);} 50% { transform: translate(-50%, 8px);} }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: none;} }


/* ===== Nosotros ===== */
/* align-items: start (no center) -- el bloque de la derecha (logo + 2
   tarjetas) es bastante más alto que el texto de la izquierda; centrarlo
   hacía que el logo empezara más arriba que "QUIÉNES SOMOS", desalineado
   con el texto. Alineados por arriba, los dos títulos arrancan a la par. */
.nosotros__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
.nosotros__texto p { color: var(--gris); }
.nosotros__stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }

/* --- Mini-tarjetas "Huila" / "Certificaciones" ------------------------------
   Misma estructura EXACTA en las dos (ícono → kicker → título → una línea de
   detalle), todo centrado, para que se lean como un par parejo. Los sellos
   reales no se ven bien reducidos a miniatura (se probó y se descartó) — el
   detalle de las 4 normas es texto simple, igual de liviano que "Neiva,
   Colombia" en la otra tarjeta; quien quiera ver los sellos completos los
   tiene abajo en HSEQ o en el panel flotante de certificaciones. */
.mini-card {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 22px 18px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 3px;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease, border-color .25s ease;
}
.mini-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-sm); }
.mini-card__icono {
  flex: none; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 6px;
  background: var(--verde-claro); display: flex; align-items: center; justify-content: center;
}
.mini-card__icono svg { width: 22px; height: 22px; fill: none; stroke: var(--verde-osc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mini-card__kicker { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--verde); }
.mini-card__titulo { display: block; font-family: var(--fuente-titulo); font-size: 1.3rem; font-weight: 800; color: var(--verde-mas-osc); line-height: 1.2; margin-top: 2px; }
.mini-card__desc { display: block; color: var(--gris); font-size: .85rem; margin-top: 1px; max-width: 22ch; }
.mini-card--certs { background: var(--verde-suave); border-color: var(--verde); }
.mini-card--certs .mini-card__icono { background: #fff; }
@media (max-width: 480px) {
  .nosotros__stats { grid-template-columns: 1fr; }
}

/* --- Logo animado de los 35 años (sin tarjeta, directo sobre la página) -----
   El logo va con fondo transparente (img/aniversario/logo-35-anios.webp) y el
   brillo que lo recorre es un degradado diagonal recortado con la silueta
   exacta del "35" + las hojas (logo-35-anios-brillo.webp, sacada del propio
   logo, con alfa real). Todo lo que se anima es transform/opacity (lo resuelve
   la GPU, sin repintar la máscara en cada cuadro) y arranca recién cuando el
   bloque aparece en pantalla (.nosotros__stats.visible, la clase que ya pone
   main.js). */
.aniversario { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 28px; padding: 0 0 6px; }
.aniversario__logo { flex: 0 0 auto; width: min(100%, 250px); text-align: center; }
.logo35 { position: relative; isolation: isolate; width: min(100%, 250px); aspect-ratio: 800 / 701; margin: 0 auto; }
.logo35__img { width: 100%; height: 100%; object-fit: contain; }
.logo35__brillo {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask: url("../img/aniversario/logo-35-anios-brillo.webp") center / 100% 100% no-repeat;
          mask: url("../img/aniversario/logo-35-anios-brillo.webp") center / 100% 100% no-repeat;
  mix-blend-mode: screen;
}
.logo35__brillo::before { /* la franja de luz */
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 55%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 70%, transparent 100%);
  transform: translateX(-115%) skewX(-14deg); will-change: transform; /* fuera de cuadro, a la izquierda */
}
.aniversario__desde { margin: 8px 0 0; color: var(--gris); font-size: .92rem; }
.aniversario__desde strong { color: var(--verde-osc); }

/* Miniatura clickeable del recap de 35 años -- nunca se reproduce ahí mismo,
   solo abre el video completo (con sonido) en .recap-overlay. Proporción 9:16
   porque el video es vertical. */
.aniversario__video-btn {
  position: relative; display: block; flex: 0 0 auto; width: 150px; aspect-ratio: 9 / 16;
  border: none; padding: 0; margin: 0; cursor: pointer; overflow: hidden;
  border-radius: var(--radio); background: var(--tinta); box-shadow: var(--sombra-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.aniversario__video-btn:hover, .aniversario__video-btn:focus-visible {
  transform: translateY(-4px); box-shadow: var(--sombra);
}
.aniversario__video-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.aniversario__video-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 74, 21, .12) 0%, rgba(13, 74, 21, .12) 50%, rgba(10, 30, 13, .8) 100%);
}
.aniversario__video-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.aniversario__video-play svg {
  width: 42px; height: 42px; fill: var(--blanco);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
.aniversario__video-label {
  position: absolute; left: 0; right: 0; bottom: 10px;
  color: var(--blanco); font-size: .7rem; font-weight: 700; line-height: 1.3;
  text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

/* Ventana superpuesta del video de 35 años -- mismo lenguaje visual que
   .campania-overlay (mismo overlay, mismo botón de cerrar). */
.recap-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(13, 74, 21, .72);
}
.recap-overlay[hidden] { display: none; }
.recap-caja { position: relative; width: 100%; max-width: 420px; }
.recap-video {
  display: block; width: 100%; max-height: 85vh;
  border-radius: var(--radio); box-shadow: var(--sombra); background: #000;
}
.recap-cerrar {
  position: absolute; top: -14px; right: -14px; width: 32px; height: 32px;
  border-radius: 999px; border: none; background: var(--blanco); color: var(--tinta);
  font-size: 20px; line-height: 1; cursor: pointer; box-shadow: var(--sombra-sm);
}
.recap-cerrar:hover { background: var(--verde-claro); }

/* Entrada + movimiento: solo con JS (igual que .reveal) y una vez visible */
.js .aniversario .logo35__img {
  opacity: 0; transform: scale(.94);
  transition: opacity .9s ease .1s, transform 1.1s cubic-bezier(.2, .7, .2, 1) .1s;
}
.js .nosotros__stats.visible .logo35__img { opacity: 1; transform: none; }
.nosotros__stats.visible .logo35__brillo::before { animation: logo35-brillo 5.5s cubic-bezier(.45, 0, .55, 1) 1.4s infinite; }
/* Barrido de ~2.2 s (0-40% del ciclo) que cruza el logo de borde a borde, con
   arranque y llegada suaves; el resto del ciclo la franja espera fuera de
   cuadro (a la derecha) antes de repetir. -115% / 200% = justo fuera del
   logo por cada lado (la franja mide el 55% del ancho del logo, así que estos
   porcentajes valen para cualquier tamaño). */
@keyframes logo35-brillo {
  0%        { transform: translateX(-115%) skewX(-14deg); }
  40%, 100% { transform: translateX(200%)  skewX(-14deg); }
}
@media (prefers-reduced-motion: reduce) {
  .js .aniversario .logo35__img { opacity: 1; transform: none; transition: none; }
  .logo35__brillo { display: none; }
}

/* ===== Misión y Visión ===== */
.mision-vision { padding: clamp(28px, 4vw, 48px) 0 clamp(30px, 4vw, 46px); }
.mv__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
.mv__card {
  background: var(--verde-suave); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 30px 32px;
}
.mv__card p { color: var(--gris); margin: 0; }
@media (max-width: 760px) { .mv__grid { grid-template-columns: 1fr; } }

/* ===== Servicios (texto + mosaicos al lado, tipo Garver) ===== */
.servicios { background: var(--verde-suave); padding: clamp(28px, 4vw, 48px) 0; }
.servicios__layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.4fr); gap: clamp(30px, 5vw, 64px); align-items: center; }
.servicios__texto p { color: var(--gris); }

.markets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.market {
  position: relative; overflow: hidden; border-radius: var(--radio);
  min-height: 158px;
  display: flex; align-items: flex-end;
  box-shadow: var(--sombra-sm);
  isolation: isolate;
  color: #fff; text-decoration: none;
  transition: box-shadow .3s ease, transform .3s ease;
}
/* La 7ma tarjeta (Forestal) ocupa toda la fila para no dejarla suelta */
.market:nth-child(7) { grid-column: 1 / -1; }
.market::before { /* foto (o placeholder verde) que hace zoom */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--img, none), linear-gradient(140deg, var(--verde-osc), var(--verde));
  background-size: cover, cover; background-position: center; background-repeat: no-repeat;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.market::after { /* velo oscuro (para leer el nombre) + línea lima inferior, tipo Ecopetrol */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--acento-lima), var(--acento-lima)),
    linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.05) 100%);
  background-position: bottom, center;
  background-size: 100% 4px, 100% 100%;
  background-repeat: no-repeat, no-repeat;
}
.market:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.market:hover::before { transform: scale(1.08); }
.market__icono {
  position: absolute; top: 14px; left: 16px; width: 26px; height: 26px;
  fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .92;
}
.market__nombre {
  font-size: 1.1rem; font-weight: 700; line-height: 1.2; padding: 14px 20px; max-width: 82%;
  text-shadow: 0 2px 12px rgba(0,0,0,.65);
}
.market__flecha {
  position: absolute; right: 20px; bottom: 22px; font-size: 1.4rem; font-weight: 700;
  opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.market:hover .market__flecha { opacity: 1; transform: none; }
.cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.card {
  flex: 1 1 300px; max-width: 352px;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 30px 26px; box-shadow: var(--sombra-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sombra); border-color: var(--verde); }
.card__icono {
  width: 56px; height: 56px; border-radius: 14px; background: var(--verde-claro);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.card__icono svg { width: 30px; height: 30px; fill: none; stroke: var(--verde-osc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { font-size: 1.2rem; color: var(--verde-mas-osc); }
.card p { color: var(--gris); margin: 0; font-size: .98rem; }

/* ===== Clientes ===== */
.clientes { background: var(--verde-suave); }
.clientes__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cliente {
  position: relative; overflow: hidden;
  flex: 1 1 170px; max-width: 214px; height: 104px;
  background: linear-gradient(180deg, #fff, var(--verde-suave));
  border: 2px solid var(--verde); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; padding: 18px 22px;
  box-shadow: 0 10px 26px rgba(47, 158, 47, .16);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease;
}
/* Barrido de brillo (shine) al pasar el mouse */
.cliente::before {
  content: ""; position: absolute; top: 0; left: -130%;
  width: 65%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
}
.cliente:hover::before { left: 150%; }
.cliente:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 16px 34px rgba(13, 74, 21, .20);
  border-color: var(--verde);
}
.cliente img {
  max-height: 58px; max-width: 100%; width: auto; object-fit: contain;
  transition: transform .3s ease;
}
.cliente:hover img { transform: scale(1.07); }

/* Ecopetrol: cliente destacado (sobresale con logo más grande + glow que late) */
.cliente--destacado {
  animation: pulso-destacado 2.6s ease-in-out infinite;
}
.cliente--destacado:hover { animation-play-state: paused; }
.cliente--destacado img { max-height: 70px; }
@keyframes pulso-destacado {
  0%, 100% { box-shadow: 0 12px 28px rgba(47, 158, 47, .24); }
  50%      { box-shadow: 0 12px 40px rgba(47, 158, 47, .46); }
}
@media (prefers-reduced-motion: reduce) {
  .cliente--destacado { animation: none; }
}

/* ===== Cobertura nacional (mapa interactivo) ===== */
.mapa-cobertura { background: #fff; }
#csm-mapa, #csm-mapa * { box-sizing: border-box; }
#csm-mapa {
  position: relative; width: 100%;
  height: clamp(380px, 70vw, 600px);
  border-radius: 14px; overflow: hidden;
  background: #0b0f14; isolation: isolate;
  box-shadow: var(--sombra);
}
#csm-mapa canvas {
  display: block; width: 100%; height: 100%; cursor: grab;
  touch-action: pan-y; /* un dedo sigue haciendo scroll de la página */
}
#csm-mapa canvas:active { cursor: grabbing; }
#csm-hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .5px;
  color: rgba(255, 255, 255, .82); background: rgba(10, 14, 10, .45);
  padding: 7px 14px; border-radius: 99px; backdrop-filter: blur(4px);
  pointer-events: none; opacity: 0; transition: opacity .5s ease; text-align: center;
}
#csm-hint.on { opacity: 1; }
#csm-boot {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: #0b0f14; color: rgba(255, 255, 255, .55);
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 1px;
  z-index: 2;
}

/* ===== HSEQ / Certificaciones ===== */
/* Sin tarjeta ni marco: los sellos son elementos gráficos autocontenidos,
   así que flotan directo sobre el fondo, separados por una línea sutil. */
.hseq { background: var(--verde-suave); padding: clamp(48px, 6vw, 76px) 0; }
.hseq .seccion__head { margin-bottom: clamp(28px, 4vw, 40px); }
.certs { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 24px; }
.cert {
  flex: 1 1 220px; max-width: 280px; text-align: center;
  padding: 10px 26px; position: relative;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.cert:hover { transform: translateY(-6px); }
.cert__img { display: none; height: 104px; width: auto; margin: 0 auto 18px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(13,74,21,.12)); }
.cert__img.cargada { display: block; }
.cert__badge { width: 76px; height: 76px; margin: 0 auto 18px; display: block; filter: drop-shadow(0 8px 16px rgba(13,74,21,.12)); }
.cert__badge.oculto { display: none; }
.cert__badge circle { fill: var(--verde-claro); stroke: var(--verde); stroke-width: 2.5; }
.cert__badge .cert__check { fill: none; stroke: var(--verde-osc); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.cert__badge .cert__cintas { fill: var(--verde); opacity: .85; }
.cert h3 { color: var(--verde-mas-osc); margin: 0 0 4px; font-size: 1.2rem; letter-spacing: -.01em; }
.cert p { color: var(--gris); margin: 0; font-size: .92rem; }
@media (max-width: 640px) {
  .cert + .cert::before { display: none; } /* al apilarse en columna, sin línea vertical */
}

/* ===== Botón flotante de Certificaciones ===== */
/* Esquina inferior derecha (antes compartía esquina con el botón de
   WhatsApp, ya quitado del sitio). */
.cert-float { position: fixed; right: 22px; bottom: 22px; z-index: 60; }
.cert-float__btn {
  width: 64px; border: none; cursor: pointer; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  /* Halo blanco pegado al contorno del logo (no un recuadro: sigue la forma
     transparente del PNG) + sombra oscura debajo. Entre los dos, el botón se
     nota sobre cualquier color de fondo del video, claro u oscuro. */
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 1))
    drop-shadow(0 0 5px rgba(255, 255, 255, 1))
    drop-shadow(0 0 10px rgba(255, 255, 255, .9))
    drop-shadow(0 0 18px rgba(255, 255, 255, .6))
    drop-shadow(0 6px 12px rgba(0, 0, 0, .5));
  transition: transform .2s ease, filter .2s ease;
}
.cert-float__btn-img { width: 100%; height: auto; display: block; }
.cert-float__btn:hover { transform: scale(1.08); }

.cert-float__panel {
  position: absolute; right: 0; bottom: 58px; width: 300px; max-width: calc(100vw - 44px);
  background: #fff; border-radius: var(--radio); box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
  padding: 16px; transform-origin: bottom right;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(14px) scale(.94);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.cert-float__panel--abierto { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }

.cert-float__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--borde);
}
.cert-float__head span { font-weight: 700; font-size: .84rem; color: var(--verde-mas-osc); line-height: 1.3; }
.cert-float__cerrar {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--verde-suave); color: var(--verde-osc); font-size: 1.1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.cert-float__cerrar:hover { background: var(--verde-claro); }

.cert-float__lista { display: grid; gap: 12px; }
.cert-float__item { display: flex; align-items: center; gap: 12px; }
.cert-float__item img { height: 40px; width: auto; flex: none; }
.cert-float__item strong { display: block; color: var(--tinta); font-size: .92rem; }
.cert-float__item span { display: block; color: var(--gris); font-size: .82rem; }

@media (max-width: 480px) {
  .cert-float { right: 16px; bottom: 16px; }
  .cert-float__panel { width: min(300px, calc(100vw - 32px)); }
}

/* ===== Banda sostenibilidad ===== */
.banda { background: linear-gradient(120deg, var(--verde-mas-osc), var(--verde-osc)); color: #fff; }
.banda h2 { color: #fff; max-width: 20ch; }
.banda p { color: #d9f0d9; max-width: 52ch; margin: 0; }
.banda__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }

/* ===== Empleo ===== */
.empleo__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.empleo__texto p { color: var(--gris); }
.empleo__deco { display: flex; justify-content: center; }
.empleo__deco svg { width: min(220px, 60%); height: auto; }
.empleo__deco .hojas ellipse { fill: var(--verde); opacity: .9; }
.empleo__deco .tronco { fill: var(--verde-osc); }

/* ===== Contacto ===== */
.contacto { background: var(--verde-suave); }
.contacto__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 64px); }
.contacto__lista { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 18px; }
.contacto__lista li { color: var(--gris); }
.contacto__lista strong { color: var(--verde-osc); }
.contacto__form { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px; box-shadow: var(--sombra-sm); display: grid; gap: 12px; }
.contacto__form label { display: grid; gap: 5px; font-weight: 600; font-size: .92rem; color: var(--tinta); }
.contacto__form input, .contacto__form textarea, .contacto__form select {
  font: inherit; padding: 10px 12px; border: 1.5px solid var(--borde); border-radius: 10px;
  background: #fff; color: var(--tinta); resize: vertical;
  /* min-width:0 explícito: input[type=file] trae un ancho mínimo nativo
     (el texto "Seleccionar archivo / Ningún archivo seleccionado") que sin
     esto "explota" cualquier grid que lo contenga más allá del viewport. */
  width: 100%; min-width: 0;
}
.contacto__form textarea { min-height: 90px; }
.contacto__form input:focus, .contacto__form textarea:focus, .contacto__form select:focus { outline: none; border-color: var(--verde); }
/* input[type=file]: mismo marco que el resto, pero sin el padding pensado
   para texto (el botón nativo "Elegir archivo" ya trae el suyo). */
.contacto__form input[type="file"] { padding: 8px; font-size: .88rem; }
.contacto__ayuda { font-weight: 400; font-size: .78rem; color: var(--gris); }
.contacto__nota { background: var(--verde-claro); color: var(--verde-osc); padding: 12px 14px; border-radius: 10px; margin: 0; font-size: .92rem; }
.contacto__nota--error { background: #fdecea; color: #c0392b; }

/* Casilla de consentimiento (Habeas Data / declaración de buena fe) */
.form__consentimiento {
  display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px !important;
  font-weight: 400 !important; font-size: .86rem !important; color: var(--gris) !important;
  cursor: pointer;
}
.form__consentimiento input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--verde); cursor: pointer; }

/* Panel informativo lateral (reutilizado en PQRS y SAGRILAFT) */
.info-panel { background: var(--verde-suave); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px 24px; }
.info-panel h3 { color: var(--verde-mas-osc); margin-top: 0; }
.info-panel p { color: var(--gris); font-size: .95rem; }
.info-panel .aviso-legal {
  background: #fff8e1; border: 1px solid #f0dca0; color: #7a5c00;
  padding: 12px 14px; border-radius: 10px; font-size: .84rem; margin-top: 16px;
}

/* ===== Footer ===== */
.footer { background: var(--verde-mas-osc); color: #cfe6d1; }
.footer__inner { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding-top: 56px; padding-bottom: 30px; }
.footer__marca p { max-width: 34ch; margin-top: 10px; color: #a9cdad; }
.footer__links { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.footer__links a:hover { color: #fff; }
.footer__legal { border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0; text-align: center; font-size: .88rem; color: #9cc3a1; }

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 900px) {
  .nosotros__grid, .empleo__grid, .contacto__grid { grid-template-columns: minmax(0, 1fr); }
  .servicios__layout { grid-template-columns: minmax(0, 1fr); }
  .empleo__deco { display: none; }
}
@media (max-width: 640px) {
  .markets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market:nth-child(7) { grid-column: 1 / -1; }
}
@media (max-width: 1200px) {
  .hamburguesa { display: block; }
  .menu {
    position: fixed; inset: 84px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--borde);
    padding: 10px 22px 20px; box-shadow: var(--sombra);
    transform: translateY(-12px); opacity: 0; pointer-events: none; transition: .22s ease;
  }
  .menu.abierto { transform: none; opacity: 1; pointer-events: auto; }
  .menu a { padding: 14px 0; border-bottom: 1px solid var(--borde); }
  .menu a::after { display: none; }
  .menu__portal { text-align: center; margin-top: 12px; }
  .hero { text-align: left; }

  /* Menú desplegable en móvil: acordeón en vez de panel flotante — lo
     controla la clase .is-open que agrega main.js al tocar el caret. */
  .menu__item-drop {
    display: flex; flex-wrap: wrap; align-items: center;
    width: 100%; padding: 0; border-bottom: 1px solid var(--borde);
  }
  .menu__item-drop .menu__drop-trigger { flex: 1; padding: 14px 0; border-bottom: none; }
  .menu__drop-caret-btn { width: 40px; height: 40px; pointer-events: auto; cursor: pointer; }
  .menu__drop-panel {
    position: static; transform: none; opacity: 1; pointer-events: auto;
    box-shadow: none; border: none; border-radius: 0; padding: 0;
    width: 100%; max-height: 0; overflow: hidden;
    transition: max-height .32s cubic-bezier(.2, .7, .2, 1);
  }
  .menu__drop-panel::before { display: none; }
  /* La regla de escritorio ".menu__item-drop.is-open .menu__drop-panel" (más
     arriba, fuera de este media query) también aplica acá por tener más
     especificidad que ".menu__drop-panel { transform: none }" de esta misma
     sección -- sin este override, el panel queda centrado con
     translate(-50%, 0) como en escritorio, corrido medio ancho propio fuera
     de la pantalla en vez de mostrarse debajo del enlace. Bug real detectado
     2026-10-16: el acordeón SÍ se abría (max-height avanzaba) pero el
     contenido quedaba invisible, corrido fuera de la pantalla. */
  .menu__item-drop.is-open .menu__drop-panel { max-height: 260px; padding-bottom: 8px; transform: none; }
  .menu__drop-panel a {
    opacity: 1; transform: none; padding: 10px 8px 10px 18px;
    border-bottom: none; font-size: .88rem;
  }
}
@media (max-width: 540px) {
  /* .nosotros__stats ya se maneja arriba (1fr por debajo de 480px, con las
     mini-tarjetas de "Huila"/"Certificaciones" — ver esa regla) */
  .banda__inner { flex-direction: column; align-items: flex-start; }
}

/* ===================================================================
   Páginas de detalle de servicio
   =================================================================== */
.hero-detalle {
  position: relative; overflow: hidden;
  min-height: 56vh; display: flex; align-items: center; color: #fff;
}
/* Páginas sin foto de fondo (PQRS, SAGRILAFT): un hero más bajo, para que se
   vea más contenido/contexto sin tener que desplazarse tanto. */
.hero-detalle--compacto { min-height: auto; padding: 70px 0 56px; }
.hero-detalle::before {
  /* Degradado de respaldo: base siempre presente, debajo de las fotos (si las hay). */
  content: ""; position: absolute; inset: 0; z-index: -3;
  background: var(--img, none), linear-gradient(140deg, var(--verde-osc), var(--verde));
  background-size: cover; background-repeat: no-repeat;
  /* --img-pos: punto de enfoque horizontal/vertical opcional por página (p. ej.
     para que en pantallas angostas el recorte no corte a las personas de la
     foto). Por defecto sigue centrado, igual que antes, en todas las páginas
     que no lo definan. */
  background-position: var(--img-pos, center);
}
/* Fotos reales en crossfade (inyectadas por JS vía data-imagenes). Varias capas
   apiladas en el mismo sitio; la que tiene .activa se ve, el resto en opacity:0,
   así el cambio de una a otra es un desvanecido suave, no un corte brusco. */
.hero-detalle__bg {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.6s ease;
}
.hero-detalle__bg.activa { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-detalle__bg { transition: none; }
}
.hero-detalle::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.30) 70%),
              linear-gradient(to top, rgba(0,0,0,.5), transparent 55%);
}
.hero-detalle__eyebrow { color: #cdeecd; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: .85rem; margin-bottom: 12px; }
.hero-detalle h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; margin: 0 0 16px; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.hero-detalle p { font-size: 1.1rem; max-width: 54ch; color: #eef7ee; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.detalle-cta { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; }
/* Frase destacada dentro del banner (barra lima a la izquierda, tipografía de título) */
.hero-detalle .hero-detalle__destacado {
  max-width: 44ch; margin-top: 20px; padding-left: 16px;
  border-left: 4px solid var(--acento-lima);
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.3; color: #fff;
}
/* Banner con foto de fondo y bastante texto encima (Medio ambiente): oscurece la
   parte izquierda, donde va el texto, con un degradado verde-negro que se
   desvanece hacia la derecha para que la foto siga luciendo, y suma una sombra
   suave a las letras. En celular el texto ocupa todo el ancho, así que el
   degradado pasa a vertical. Va después de .hero-detalle::after para pisarlo. */
.hero-detalle--legible::after {
  background:
    linear-gradient(90deg, rgba(4, 24, 9, .86) 0%, rgba(4, 24, 9, .78) 30%, rgba(4, 24, 9, .60) 50%, rgba(4, 24, 9, .26) 70%, rgba(4, 24, 9, .06) 88%, rgba(4, 24, 9, 0) 100%),
    linear-gradient(to top, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0) 45%),
    linear-gradient(to bottom, rgba(0, 0, 0, .24), rgba(0, 0, 0, 0) 38%);
}
.hero-detalle--legible h1,
.hero-detalle--legible p,
.hero-detalle--legible .hero-detalle__eyebrow { text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 16px rgba(0, 0, 0, .55); }
@media (max-width: 900px) {
  .hero-detalle--legible::after {
    background:
      linear-gradient(180deg, rgba(4, 24, 9, .66), rgba(4, 24, 9, .78)),
      linear-gradient(to top, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0) 45%),
      linear-gradient(to bottom, rgba(0, 0, 0, .24), rgba(0, 0, 0, 0) 38%);
  }
}

.detalle { padding: clamp(50px, 8vw, 90px) 0; }
.detalle__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.detalle__texto p { color: var(--gris); }
.detalle__panel { background: var(--verde-suave); border: 1px solid var(--borde); border-radius: var(--radio); padding: 28px; }
.detalle__panel h3 { color: var(--verde-mas-osc); margin-top: 0; }
.detalle__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.detalle__lista li { padding-left: 28px; position: relative; color: var(--tinta); }
.detalle__lista li::before { content: "✓"; position: absolute; left: 0; color: var(--verde); font-weight: 700; }
.volver { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--verde-osc); font-weight: 700; }
.volver:hover { color: var(--verde); }
@media (max-width: 900px) { .detalle__grid { grid-template-columns: minmax(0, 1fr); } }

/* Galería de trabajos realizados (dentro de la página de cada servicio) */
.galeria { background: var(--verde-suave); padding: clamp(46px, 7vw, 80px) 0; }
.galeria__head { max-width: 640px; margin: 0 auto clamp(28px, 4vw, 42px); text-align: center; }
/* auto-fit con tope de ancho: mismas dimensiones de tile sin importar si hay 2, 3 o 4 fotos */
.galeria__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 360px)); gap: 20px; justify-content: center; }
.galeria__item {
  position: relative; overflow: hidden; border-radius: var(--radio);
  aspect-ratio: 4 / 3; box-shadow: var(--sombra-sm);
}
.galeria__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.galeria__item:hover img { transform: scale(1.08); }
@media (max-width: 760px) {
  .galeria__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .galeria__item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}

/* ===================================================================
   Medio ambiente: proyectos clave
   Componentes reutilizables (.proyecto, .impacto) por si las demás
   páginas de "Nuestro compromiso" quieren el mismo formato.
   =================================================================== */

/* -- Proyectos clave: foto + texto, alternando de lado -- */
.proyectos { position: relative; overflow: hidden; background: #fff; padding: clamp(56px, 8vw, 104px) 0; }
.proyectos::before { /* mancha suave de verde claro detrás del primer proyecto */
  content: ""; position: absolute; left: -220px; top: 12%;
  width: 540px; height: 540px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--verde-claro), transparent 70%);
}
.proyectos .contenedor { position: relative; }
.proyectos .seccion__head { margin-bottom: clamp(40px, 6vw, 72px); }

.proyecto { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 84px); align-items: center; }
.proyecto + .proyecto { margin-top: clamp(64px, 9vw, 120px); }
.proyecto--inverso { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.proyecto--inverso .proyecto__media { order: 2; }

.proyecto__media { position: relative; isolation: isolate; margin: 0; }
.proyecto__media::before { /* marco lima desplazado detrás de la foto */
  content: ""; position: absolute; z-index: -1; inset: 16px -16px -16px 16px;
  border: 2px solid var(--acento-lima); border-radius: calc(var(--radio) + 4px);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.proyecto--inverso .proyecto__media::before { inset: 16px 16px -16px -16px; }
.proyecto:hover .proyecto__media::before { transform: translate(-6px, -6px); }
.proyecto--inverso:hover .proyecto__media::before { transform: translate(6px, -6px); }
.proyecto__foto { overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radio); background: var(--verde-claro); box-shadow: var(--sombra); }
.proyecto__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.proyecto:hover .proyecto__foto img { transform: scale(1.05); }
.proyecto__media figcaption {
  position: absolute; left: 16px; bottom: 16px; max-width: calc(100% - 32px);
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 99px; background: rgba(8, 40, 14, .68); color: #fff;
  font-size: .86rem; font-weight: 600; line-height: 1.25; backdrop-filter: blur(6px);
}
.proyecto__media figcaption svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--acento-lima); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.proyecto__num {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--verde);
}
.proyecto__num::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--acento-lima); }
.proyecto h3 { margin-bottom: 16px; font-size: clamp(1.75rem, 3.4vw, 2.5rem); color: var(--verde-mas-osc); }
.proyecto__contenido p { color: var(--gris); font-size: 1.05rem; line-height: 1.7; }
.proyecto sub { font-size: .7em; line-height: 0; } /* CO₂: el subíndice por defecto abre el interlineado */

/* Cifras de impacto: una tarjeta por dato, con borde superior lima */
.impacto { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.impacto li { padding: 16px 14px 14px; background: var(--verde-suave); border: 1px solid var(--borde); border-top: 3px solid var(--acento-lima); border-radius: 14px; }
.impacto__valor { display: block; font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1; letter-spacing: -.02em; color: var(--verde-osc); }
.impacto__etiqueta { display: block; margin-top: 8px; font-size: .84rem; line-height: 1.35; color: var(--gris); }
.impacto--ancho { grid-template-columns: minmax(0, 1fr); }
.impacto--ancho li { display: flex; align-items: center; gap: 18px; }
.impacto--ancho .impacto__etiqueta { margin-top: 0; font-size: .95rem; }

@media (max-width: 900px) {
  .proyecto, .proyecto--inverso { grid-template-columns: minmax(0, 1fr); }
  .proyecto--inverso .proyecto__media { order: 0; }
  .proyecto__media::before, .proyecto--inverso .proyecto__media::before { inset: 12px -12px -12px 12px; }
  .proyecto--inverso:hover .proyecto__media::before { transform: translate(-6px, -6px); }
}
@media (max-width: 560px) {
  .impacto { grid-template-columns: minmax(0, 1fr); }
  .impacto li { display: flex; align-items: baseline; gap: 14px; }
  .impacto__valor { flex: none; min-width: 4.4ch; }
  .impacto__etiqueta { margin-top: 0; }
  .impacto--ancho li { align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .proyecto__foto img, .proyecto__media::before { transition: none; }
  .proyecto:hover .proyecto__foto img { transform: none; }
  .proyecto:hover .proyecto__media::before, .proyecto--inverso:hover .proyecto__media::before { transform: none; }
}

/* ===== Banner de campañas (Talento Humano/SGI, administrado desde GESTOR
   DE TI) -- ver js/main.js. z-index 1000: por encima de todo lo demás del
   sitio (lo más alto que ya existía era 60, .cert-float). ===== */
.campania-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(13, 74, 21, 0.55);
}
.campania-caja { position: relative; width: 100%; max-width: 480px; }
.campania-imagen {
  display: block;
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.campania-cerrar {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: var(--blanco);
  color: var(--tinta);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--sombra-sm);
}
.campania-cerrar:hover { background: var(--verde-claro); }