/* ============================
   5T Ingenieros - Home
   ============================ */

/* ---- Tipografías de marca ---- */
@font-face{
  font-family: 'Circular Std';
  src: url('fonts/Circular Std Book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Circular Std';
  src: url('fonts/circular-std-medium-500.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Circular Std';
  src: url('fonts/FontsFree-Net-CircularStd-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Helvetica LT 93 Black Extended desactivado: el TTF original tiene la tabla cmap dañada
   y el navegador rechaza el archivo. Para titulares de impacto (ALTO VALOR,
   GESTIÓN EMPRESARIAL...) se usa Circular Std Bold tracked + uppercase como display.
   Si más adelante reemplazas el .ttf por uno válido, reactivá este bloque:
@font-face{
  font-family: 'Helvetica LT';
  src: url('fonts/HelveticaBlackExt.woff') format('woff'),
       url('fonts/HelveticaBlackExt.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
*/
@font-face{
  font-family: 'Raleway 5T';
  src: url('fonts/Raleway-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root{
  --red:#f2001d;
  --red-dark:#e20613;
  --black:#0a0a0a;
  --dark:#1a1a1a;
  --gray-900:#222;
  --gray-700:#3d3d3d;
  --gray-500:#7a7a7a;
  --gray-300:#c8c8c8;
  --gray-100:#efefef;
  --cyan:#1bb7d5;
  --cyan-rgb: 27,183,213; /* mismo cian en rgb, para las transparencias rgba() */
  --green:#00bd3d;
  --white:#fff;
  --max:1240px;
  --gutter: clamp(20px, 4vw, 60px);

  /* Cuerpo: Circular Std de marca + Helvetica Neue del sistema (Mac/iOS)
     + Inter como fallback cross-platform desde Google Fonts. */
  --font: 'Circular Std', 'Helvetica Neue', 'Inter', Helvetica, Arial, sans-serif;
  /* Display / titulares grandes: IBM Plex Sans (prueba) */
  --font-display: 'IBM Plex Sans', 'Helvetica Neue', 'Circular Std', Impact, Arial, sans-serif;
  /* Acentos secundarios */
  --font-accent: 'Raleway 5T', 'Circular Std', 'Helvetica Neue', sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font);
  font-weight:400;
  color: var(--gray-900);
  background: #fff;
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:0;background:none;}

.container{
  width:100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section-title{
  font-family: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  font-weight:700;
  font-size: clamp(28px, 4.4vw, 54px);
  line-height: 1.1;
  color:#0a0a0a;
  letter-spacing:-0.5px;
}
.title-pre{
  display: block;
  font-family: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  font-size: 0.48em;
  font-weight: 300;
  color: #222;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.section-title .red{color:var(--red); font-weight:700;}
.section-title .muted{color:#9a9a9a;}

.btn-red{
  display:inline-block;
  background: var(--red);
  color:#fff;
  font-weight:600;
  font-size:14px;
  padding: 14px 30px;
  border-radius: 28px;
  letter-spacing:.2px;
  transition: background .2s ease, transform .2s ease;
}
.btn-red:hover{background:var(--red-dark); transform: translateY(-1px);}

/* ============================
   HEADER
   ============================ */
.logo{
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 2;
  display:flex;
  align-items:flex-start;
  flex-shrink:0;
  width: 96px;
  margin-top: 0;
  overflow: visible;
}
.logo-img{
  height: 140px;
  width: auto;
  max-width: none;
  transform: none;
}
.site-header{
  position: sticky;
  top:0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.header-inner{
  position: relative;
  display:flex;
  align-items:center;
  gap: 24px;
  padding: 6px var(--gutter);
  min-height: 84px;
}
.main-nav{flex:1; display:flex; justify-content:center;}
.header-inner > .main-nav{ margin-left: 120px; }

/* Index: como el header también es blanco, se centra visualmente el dibujo
   dentro del archivo del logo (que trae mucho blanco arriba) sin recortarlo
   ni volver a aumentar la altura de la franja. */
.site-header--home .logo{
  position: absolute;
  /* La caja tiene el alto exacto del header y recorta el blanco sobrante del
     archivo: antes la placa blanca colgaba ~14px sobre la foto de abajo. */
  top: 0;
  height: 84px;
  overflow: hidden;
  width: 96px;
  align-items: flex-start;
  margin-top: 0;
  z-index: 2;
}
.site-header--home .logo-img{
  height: 140px;
  max-width: none;
  transform: translateY(-42px);
}
.site-header--home .header-inner{
  padding: 6px var(--gutter);
  min-height: 84px;
}
.site-header--home .header-inner > .main-nav{ margin-left: 120px; }
@media(max-width: 980px){
  /* Mobile: header compacto. Se muestra solo la franja del archivo que
     rodea el isotipo (el resto es blanco), centrada en el header, para que
     la placa no se monte sobre el contenido de abajo. */
  .site-header--home .header-inner{
    min-height: 64px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  /* El dibujo conserva su tamaño original (archivo a 116px → isotipo de
     ~45px de alto); solo se recorta el blanco sobrante del archivo. */
  .site-header--home .logo{
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: 56px;
    overflow: hidden;
    margin-top: 0;
  }
  .site-header--home .logo-img{
    height: 116px;
    transform: translateY(-42px);
  }
}
.nav-pill{
  display:flex;
  align-items:center;
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 999px;
  padding: 6px 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.main-nav ul{
  list-style:none;
  display:flex;
  gap: clamp(10px, 1.6vw, 26px);
  flex-wrap: nowrap;
}
.main-nav a{
  font-size:13px;
  font-weight:500;
  color: var(--gray-700);
  position:relative;
  padding: 6px 2px;
  transition: color .2s;
  white-space: nowrap;
}
.main-nav a:hover, .main-nav a.active{color: var(--black); font-weight:600;}

.lang-btn{
  background: var(--red);
  color:#fff;
  font-weight:700;
  font-size:11px;
  padding: 8px 14px;
  border-radius: 18px;
  letter-spacing:.6px;
}
.hamburger{display:none;}
@media(max-width: 980px){
  .main-nav{display:none;}
  .hamburger{
    /* padding subido de 6px a 12px: el botón quedaba en ~34x26px,
       debajo del mínimo táctil recomendado (~44px). El ícono (3 líneas
       de 22px) no cambia, solo crece el área de toque alrededor. */
    display:flex; flex-direction:column; gap:4px; padding:12px;
  }
  .hamburger span{ width:22px; height:2px; background:#222; }

  /* El botón ENG quedaba pegado al logo (a la izquierda) porque era el
     hamburguesa quien recibía el margin-left:auto; con el nav oculto en
     mobile, ENG debe ser quien empuje el grupo [ENG][hamburguesa] hacia
     la derecha del header. */
  .lang-btn{
    margin-left: auto;
    /* padding vertical subido de 8px a 14px: el botón quedaba en
       ~31px de alto, debajo del mínimo táctil recomendado (~44px). */
    padding: 14px 16px;
  }

  /* El logo conserva su placa blanca completa y sobresale ligeramente del
     header; al estar absoluto no aumenta la altura de la franja. */
  .logo{
    width: 80px;
  }
  .logo-img{
    height: 116px;
    transform: none;
  }
  .eco-header .header-inner{
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .eco-header__nav{
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .eco-header__tag{
    white-space: normal;
  }

  /* El menú móvil se abre togleando esta clase. Va debajo del header
     completo (top:100%), no a una altura fija: en las páginas de portal el
     header es más alto que 64px y el panel tapaba el botón de hamburguesa. */
  .main-nav.open{
    display:flex;
    position:absolute;
    top:100%; left:0; right:0;
    background:#fff;
    padding:18px var(--gutter);
    border-bottom:1px solid #eee;
    box-shadow: 0 10px 20px rgba(0,0,0,.08);
  }
  /* El margin-left:120px que deja espacio al logo en desktop también
     corría el panel abierto hacia la derecha (index). */
  .header-inner > .main-nav.open,
  .site-header--home .header-inner > .main-nav.open{
    margin-left: 0;
  }
  .main-nav.open ul{
    flex-direction:column;
    gap:14px;
    align-items:flex-start;
    width: 100%;
  }
  /* .nav-pill sigue teniendo su border-radius:999px y padding de píldora
     horizontal pensados para una sola fila angosta. Sobre una lista
     vertical de 6 links eso se ve como un óvalo que recorta el texto.
     Se neutraliza el estilo de píldora mientras el menú está abierto. */
  .main-nav.open .nav-pill{
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    width: 100%;
  }
}

/* social vertical rail */
.social-rail{
  position: fixed;
  right: 12px;
  top: 38%;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index: 9999;
}
.social-rail a{
  display:flex; width:32px; height:32px; align-items:center; justify-content:center;
  background:var(--red); color:#fff; border-radius:50%;
  transition: transform .2s;
}
.social-rail a:hover{transform: translateX(-4px);}
.social-rail svg{ width:14px; height:14px; fill:#fff;}
@media(max-width:680px){ .social-rail{display:none;} }

/* ============================
   HERO
   ============================ */
.bg-edificios{
  background: url('images/fondoedificios.webp') center top / 160% auto no-repeat;
}
.hero{
  background: transparent;
  padding: 30px 0 28px;
  position:relative;
}
.hero-title{
  text-align:center;
  margin: 12px 0 36px;
}
.hero-pre{
  display:block;
  font-family: 'Circular Std', 'Helvetica Neue', sans-serif;
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 400;
  color: #5e5e5e;
  /* En em (no px) para que el solape escale junto con el texto: a 32px
     desktop da los mismos -16px de antes, pero en mobile (font más chico
     por el clamp) el solape se achica proporcionalmente en vez de quedar
     fijo y verse pegado. */
  margin-bottom: -0.5em;
  font-style: normal;
}
.hero-big{
  display:block;
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 110px);
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.5px;
  line-height: 0.88;
  text-transform: none;
  font-stretch: 110%;
}
/* Entradilla: qué es 5T, antes de las dos puertas */
.hero-lead{
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.65;
  color: #5e5e5e;
  text-wrap: balance;
}
.hero-pick{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 2px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8a8a;
}
.hero-pick svg{ width: 13px; height: 13px; }

/* Indicadores de impacto — sin caja, sobre el fondo del hero */
.hero-stats{
  position: relative;
  z-index: 4;
  margin: 60px 0 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 20px;
}
.hero-stat{
  position: relative;
  text-align: center;
  padding: 8px 16px;
}
.hero-stat + .hero-stat::before{
  content: "";
  position: absolute;
  left: -10px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: rgba(15, 19, 25, 0.09);
}
.hero-stat__num{
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 39px);
  line-height: 1;
  letter-spacing: -1.4px;
  color: #0f1319;
  font-variant-numeric: tabular-nums;
}
.hero-stat__num .stat-affix{ color: var(--red); }
.hero-stat__num::after{
  content: "";
  display: block;
  width: 22px;
  height: 3px;
  margin: 13px auto 10px;
  background: var(--red);
  border-radius: 2px;
}
.hero-stat__label{
  display: block;
  font-size: 11.5px;
  line-height: 1.45;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7c7c7c;
}
/* Variante cian: páginas de Consultoría Civil (Hidráulica, Institucional,
   Integral) usan el acento cian de esa línea de negocio en vez del rojo
   por defecto (pensado para el home). */
.hero-stats--cyan .hero-stat__num .stat-affix{ color: var(--cyan); }
.hero-stats--cyan .hero-stat__num::after{ background: var(--cyan); }
@media(max-width: 640px){
  .hero-stats{
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
    column-gap: 0;
  }
  .hero-stat{ padding: 6px 10px; }
  .hero-stat__num{ font-size: clamp(26px, 8vw, 34px); letter-spacing: -1.2px; }
  .hero-stat__label{ font-size: 10.5px; }
  .hero-stat + .hero-stat::before{ display: none; }
  .hero-stat:nth-child(even)::before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 1px;
    background: rgba(15, 19, 25, 0.10);
  }
}
@media(max-width: 380px){
  .hero-stats{ grid-template-columns: 1fr; row-gap: 24px; }
  .hero-stat:nth-child(even)::before{ display: none; }
}

/* Outer shape — una sola forma que contiene ambos paneles */
.hero-cards{
  position: relative;
  display: flex;
  flex-direction: row;
  min-height: clamp(420px, 50vw, 620px);
  margin-top: 12px;
  overflow: hidden;
  border-radius: 0 52px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), calc(100% - 64px) 100%, 0 100%);
  isolation: isolate;
}

.hero-cards__divider{ display: none; }

@media(max-width: 760px){
  .hero-cards{ flex-direction: column; }
  /* La tarjeta pasa a ocupar el 100% del ancho al apilarse, pero el
     contenido seguía calculado al 50vw (mitad del layout de escritorio
     lado a lado), forzando el texto a una columna angosta con muchas más
     líneas de las que cabían en el alto fijo del reveal. */
  .hero-card__content{ width: 100%; }
}

/* Paneles interiores — sin forma propia */
.hero-card{
  position: relative;
  flex: 1;
  overflow: hidden;
  isolation: isolate;
  transition: flex 0.75s ease-in-out;
}
.hero-card:hover{ flex: 1.4; }
@media(max-width: 760px){
  .hero-card{ min-height: 72vw; flex: 1 !important; }
}
.hero-card__bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position: center;
  z-index:0;
  transition: transform .5s ease;
}
.hero-card:hover .hero-card__bg{ transform: scale(1.04); }
.hero-card__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.88) 100%);
  z-index:1;
}
.hero-card__frame{
  position:absolute;
  inset: 16px;
  border-radius: 0 36px 0 0;
  z-index:2;
  pointer-events:none;
}
.hero-card--blue  .hero-card__frame{ border: 2.5px solid var(--cyan); border-radius: 0; }
.hero-card--green .hero-card__frame{ border: 2.5px solid var(--green); }

.hero-card__content{
  position:absolute;
  left:0; top:0; bottom:0;
  /* Ancho fijo = mitad inicial del contenedor — no cambia al expandirse el panel */
  width: calc(min(50vw, 620px) - var(--gutter));
  z-index: 3;
  display:flex;
  flex-direction:column;
  justify-content: flex-end;
  padding: 36px 40px;
  color:#fff;
}
.hero-card__content h2{
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 38px);
  line-height:1.1;
  font-weight: 700;
  margin-bottom: 0;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.hero-card--blue .hero-card__content h2{ color: var(--cyan); }
.hero-card--green .hero-card__content h2{ color: #fff; }
/* Logo de marca bajo el título (Táctica en la tarjeta de Mentoría Individual) */
.hero-card__logo{
  display:block;
  /* Sin esto el flex column lo estira a todo el ancho y el SVG queda centrado */
  align-self: flex-start;
  height: 20px;
  width: auto;
  margin-top: 14px;
}

.hero-card__eyebrow{
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hero-card--blue .hero-card__eyebrow{ color: var(--cyan); }
.hero-card--green .hero-card__eyebrow{ color: rgba(255, 255, 255, 0.85); }

.hero-reveal{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .5s ease, opacity .35s ease;
}
.hero-card:hover .hero-reveal{
  max-height: 260px;
  opacity: 1;
}
.hero-card__content p{
  font-size: 13.5px;
  font-weight: 300;
  color:#dddddd;
  max-width: 88%;
  line-height: 1.55;
  margin-top: 18px;
  margin-bottom: 22px;
}
/* ── Tarjeta del hero clicable por completo ──
   El enlace cubre toda la tarjeta por encima del contenido (z-index 3), de modo
   que se puede pulsar en cualquier punto y no solo en "Entrar". El marco decorativo
   ya tiene pointer-events:none, asi que no interfiere. */
.hero-card__link{
  position: absolute;
  inset: 0;
  z-index: 4;
}
.hero-card__link:focus-visible{
  outline: 3px solid var(--cyan);
  outline-offset: -8px;
}
/* "Entrar" pasa a ser un <span>: conserva su aspecto pero ya no es un enlace
   aparte, para que la tarjeta cuente como uno solo. */
.card-link{
  font-size:14px;
  color:#fff;
  font-weight:500;
  border-bottom: 1px solid var(--cyan);
  padding-bottom: 4px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  width: max-content;
}
.card-link span{ color: var(--cyan); font-weight:700; }

/* ============================
   NUESTRA HISTORIA
   ============================ */
.historia{
  background: transparent;
  padding: 28px 0 0;
  position: relative;
  overflow: hidden;
}
.historia-top{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 44px;
  align-items: start;
  padding-bottom: 40px;
  position: relative;
}
.historia-texto{
  color: #3a3a3a;
  font-size: 15px;
  line-height: 1.7;
  padding-top: 8px;
  max-width: 520px;
  text-align: right;
  margin-left: auto;
}
.historia-texto p + p{ margin-top: 1em; }
.historia-photo{
  /* Full-bleed: se sale del container y ocupa todo el ancho del viewport
     en vez de vivir dentro de una tarjeta centrada. Así se siente parte
     de la arquitectura de la página (una franja, como una sección
     completa) en vez de una imagen "flotando sobrepuesta" sobre el
     fondo blanco. El overflow:hidden de .historia (más arriba) contiene
     el pequeño excedente que causa 100vw cuando hay scrollbar.
     El ancho se limita también según el alto disponible (igual que el
     mapa de gestión: width:min(100%, calc(Nvh*ratio))), para que en
     cualquier pantalla — no solo por debajo de un punto de quiebre fijo —
     la franja se ajuste de forma continua y nunca quede más alta de lo
     que se alcanza a ver, cortando a la gente sentada en el piso. El
     centrado usa margin-left (no transform:translateX) porque el
     "Reveal-on-scroll fade" de script.js le pone su propio transform
     inline (translateY) a este mismo elemento, y un transform inline
     pisa por completo cualquier transform de centrado puesto por CSS. */
  position: relative;
  width: min(100vw, calc(85vh * 2));
  margin-left: calc(50vw - min(100vw, calc(85vh * 2)) / 2);
  z-index: 2;
}
.historia-fallback-img,
.historia-photo .historia-video{
  width: 100%;
  /* El video (y su poster, ambos exportados en 2:1 = 1400×700) necesitan
     más alto que la foto original (2.5:1) porque la escena tiene gente
     con las manos arriba Y gente sentada en el piso al mismo tiempo — en
     una franja más baja siempre se termina cortando a unos o a otros. */
  aspect-ratio: 2 / 1;
  height: auto;
  object-fit: cover;
  object-position: top center;
  display: block;
  background: #e5e5e5;
}
/* El video va absoluto encima de la foto de respaldo (que queda fija,
   abajo, en flujo normal) y arranca invisible: solo se revela cuando
   script.js confirma que arrancó a reproducirse de verdad (evento
   "playing"), no apenas se intenta. Si nunca llega a reproducirse —
   red lenta, fuente bloqueada, lo que sea — se queda en opacity:0 y
   la foto de abajo nunca deja de verse. */
.historia-photo .historia-video{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
.historia-fallback-img{ object-position: center center; }
.historia-photo .historia-video.is-playing{ opacity: 1; }
.historia-boomerang{
  position: absolute;
  /* Es una "esquina doblada" pensada para marcar el borde de la foto.
     Con el video full-bleed, su borde real es el del viewport (right:0),
     ya no el inset de var(--gutter) que tenía la tarjeta centrada. */
  right: 0;
  top: 0;
  /* Escala junto con la foto (que ocupa el ancho de la pantalla en celular)
     para mantener siempre la misma proporción respecto a la esquina de la
     foto y no terminar tapando caras del personal cuando la imagen se
     achica en mobile. */
  height: clamp(30px, 9vw, 100px);
  width: auto;
  z-index: 3;
}
@media(max-width: 880px){
  .historia-top{ grid-template-columns: 1fr; }
}


/* ============================
   EQUIPO
   ============================ */
.equipo{
  background: white;
  color:#fff;
  padding: 40px 0 28px;
  position: relative;
}
@media(max-width: 760px){
  .equipo{ padding: 28px 0 20px; }
}
.equipo::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 370px;
  background: var(--dark);
  z-index: 0;
}
.equipo .container{
  position: relative;
  z-index: 1;
}
.equipo .section-title{ color:#fff; }
.equipo .title-pre{ color:#fff; }
.equipo-title{ margin-bottom: 30px; }
.equipo-controls{
  /* Antes iba position:absolute, anclado a .equipo .container, para
     quedar a la altura del título "Nuestro equipo" (que vivía en esta
     misma sección, a la izquierda). Al mover ese título a la sección
     Historia (antes del video), ya no hay nada junto a qué alinearse
     acá arriba — y absoluto a 30px del borde superior del container
     quedaba tapado por el header sticky. Ahora fluye normal, antes del
     carrusel. */
  display:flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 14px;
}
.equipo-controls .ctrl{
  width: 38px; height:38px;
  border-radius:50%;
  border: 1.5px solid var(--red);
  color: var(--red);
  font-size:18px;
  display:flex; align-items:center; justify-content:center;
  transition: all .2s ease;
}
.equipo-controls .ctrl:hover{ background: var(--red); color:#fff;}

.equipo-slider{ overflow: hidden; margin-top: 20px; }
.equipo-track{
  display: flex;
  flex-wrap: nowrap;
  gap: 22px;
  transition: transform .4s ease;
}
.equipo-track .member-card{
  flex-shrink: 0;
}

.member-card{
  position:relative;
  aspect-ratio: 1 / 1.25;
  overflow:hidden;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%, 0 18%);
  background: #2a2a2a;
  cursor: pointer;
}
.member-photo{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter: brightness(.92);
  transition: filter .4s ease;
}
.member-photo::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.85) 100%);
  transition: background .4s ease;
}
.member-card:hover .member-photo{ filter: brightness(.75); }
.member-card:hover .member-photo::after{
  background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.92) 100%);
}
.member-info{
  position:absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px 26px;
  color:#fff;
  z-index:2;
}
.member-info h3{
  font-family: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing:-0.3px;
}
.member-reveal{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .45s ease, opacity .3s ease;
}
.member-card:hover .member-reveal{
  max-height: 130px;
  opacity: 1;
}
.member-info p{
  font-size: 11.5px;
  color: #d0d0d0;
  line-height:1.5;
  font-weight:300;
}

/* El corte diagonal de .member-card asume que la esquina recortada cae
   dentro de la franja oscura fija de .equipo::before (370px). En móvil
   el encabezado ocupa más alto y la tarjeta (a ancho completo) queda
   más abajo, así que el recorte terminaba mostrando el fondo blanco de
   la sección en vez de fundirse con el oscuro — una esquina blanca
   triangular fea sobre la foto. En móvil se quita el corte. */
@media(max-width: 760px){
  .member-card{ clip-path: none; border-radius: 14px; }
}

/* ============================
   CARRERAS
   ============================ */
.carreras{
  background: #fff;
  padding: 0 0 40px;
  margin-top: 10px;
}
.carreras .section-title{
  color: #b8b8b8;
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 28px);
  letter-spacing: 0;
}
.carreras .title-pre{
  color: #b8b8b8;
  font-size: 1em;
  font-weight: 400;
  font-family: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  letter-spacing: 0;
}
.carreras-inner{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 30px;
}
.carreras-inner .btn-red{
  grid-column: 2;
  justify-self: center;
}
.carreras-text p{
  color:#666;
  font-size:14px;
  margin-top: 14px;
  max-width: 460px;
}
@media(max-width: 720px){
  .carreras-inner{ grid-template-columns: 1fr; }
  .carreras-inner .btn-red{ grid-column: 1; justify-self: start; }
}

/* ============================
   SOSTENIBILIDAD
   ============================ */
.sostenibilidad{
  background:#fff;
  padding: 40px 0 28px;
}
@media(max-width: 760px){
  .sostenibilidad{ padding: 28px 0 20px; }
}
.sost-inner{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items:center;
}
.sost-text p{
  color:#3a3a3a;
  font-size:14.5px;
  line-height:1.7;
  margin: 22px 0 28px;
  max-width: 450px;
}
.sost-text p strong{ color:var(--red); font-weight:600;}
.sost-bic{ display:flex; justify-content:center;}
.sost-bic img{ max-width: 240px; height:auto;}
.sost-btn-wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 2;
  margin-bottom: -24px;
}
/* Franja de borde a borde, con una separación blanca visible entre fotos. */
.sost-images{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sost-img{
  aspect-ratio: 4/3;
  overflow:hidden;
}
.sost-img img{
  width:100%; height:100%; object-fit:cover; transition: transform .4s ease;
}
.sost-img:hover img{ transform: scale(1.04); }
@media(max-width: 880px){
  /* El logo BIC no necesita el mismo ancho que el texto: se reduce y queda
     como una insignia al lado del párrafo en vez de una columna completa. */
  .sost-inner{ grid-template-columns: 1fr auto; gap: 24px; }
  .sost-bic img{ max-width: 150px; }
  .sost-images{ gap: 8px; }
}
@media(max-width: 560px){
  /* Ya no hay espacio para texto + logo lado a lado: se apilan, pero el
     logo se mantiene pequeño y alineado a la izquierda como una insignia,
     no como una imagen protagonista centrada. */
  .sost-inner{ grid-template-columns: 1fr; }
  .sost-bic{ justify-content: flex-start; margin-bottom: 32px; }
  .sost-bic img{ max-width: 120px; }
  /* Tres fotos completas a lo ancho ya caben bien en tablet; solo en
     celular real se apilan para que no queden diminutas. */
  .sost-images{ grid-template-columns: 1fr; }
}

/* ============================
   CLIENTES
   ============================ */
.clientes{
  background:#fff;
  padding: 36px 0 40px;
  overflow: hidden;
}
@media(max-width: 760px){
  .clientes{ padding: 24px 0 28px; }
}
.clientes-marquee{
  margin-top: 44px;
  overflow: hidden;
  width: 100%;
}
.clientes-marquee:hover .clientes-track{
  animation-play-state: paused;
}
.clientes-track{
  display: flex;
  align-items: center;
  width: max-content;
  /* Duración calibrada para ~65px/s con 8 clientes por set; si se agregan o
     quitan logos, ajustarla en la misma proporción que cambie el ancho. */
  animation: clientes-scroll 38s linear infinite;
}
.clientes-track img{
  /* max-width además de max-height: algunos logos (Bancoldex, con su
     eslogan debajo; AMB, que trae pegado el sello de "110 años";
     Colsubsidio) son mucho más anchos que alto — a los 68px de alto de
     siempre terminaban bastante más anchos que el resto. Con las dos
     cotas el que manda es la más chica. El valor de max-width quedó en
     290 (no más bajo) porque un tope muy chico los dejaba muy bajitos
     de alto en vez de solo controlar el ancho — se busca que el alto
     de todos quede parecido, no solo que ninguno se pase de ancho. */
  height: auto;
  width: auto;
  max-height: 68px;
  max-width: 290px;
  flex-shrink: 0;
  filter: grayscale(1) opacity(.65);
  margin: 0 52px;
  transition: filter .3s;
}
.clientes-track img:hover{ filter: grayscale(0) opacity(1); }
.clientes-track img.cliente-lg{ max-height: 86px; }
@media(max-width: 640px){
  /* El margin de 52px por lado es el mismo que en desktop: en una
     pantalla angosta dejaba tramos largos de vacío entre un logo y el
     siguiente durante la animación. Se reduce para que se vea más lleno. */
  .clientes-track img{ max-height: 52px; max-width: 220px; margin: 0 26px; }
  .clientes-track img.cliente-lg{ max-height: 66px; }
  /* Con logos más chicos la cinta es ~1/3 más corta; con la misma duración
     se movía a 44px/s vs 65px/s en desktop y se sentía lenta. Se acorta la
     duración en la misma proporción para igualar la velocidad. */
  .clientes-track{ animation-duration: 25.5s; }
}
@keyframes clientes-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}

/* ============================
   BLOG
   ============================ */
.blog{
  background:#fff;
  padding: 32px 0 40px;
}
@media(max-width: 760px){
  .blog{ padding: 24px 0 28px; }
}
.blog-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 40px;
}
@media(max-width:760px){ .blog-grid{grid-template-columns:1fr;} }

.post{display:flex;flex-direction:column; gap:14px;}
.post-img{
  position:relative;
  aspect-ratio: 16/9;
  background-size:cover;
  background-position:center;
  border-radius: 2px;
}
.post-date{
  position:absolute;
  bottom:14px; right:14px;
  background: rgba(0,0,0,.6);
  color:#fff;
  padding: 4px 10px;
  font-size:11px;
  border-radius:14px;
}
.post h3{
  font-size: 18px;
  font-weight: 700;
  color:#0a0a0a;
  line-height:1.3;
  margin-top: 4px;
}
.post p{
  color:#666;
  font-size:13.5px;
  line-height:1.6;
}
.blog-cta{
  display:flex; justify-content:center;
  margin-top: 36px;
}

/* ============================
   HOLDING
   ============================ */
.holding{
  background:#fff;
  padding: 32px 0 40px;
  position: relative;
  overflow: hidden;
}
@media(max-width:760px){
  .holding{ padding: 24px 0 28px; }
}
.holding-inner{
  display:flex;
  flex-direction:column;
}
.holding-top{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items:start;
  gap: 40px;
  padding-bottom: 40px;
}
.holding-col-desc{
  padding-top: 28px;
}
.holding-desc{
  color:#999;
  font-size:14px;
  line-height:1.7;
}
.holding-col-agora{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  padding-top: 40px;
}
.holding-col-agora a{
  display: inline-block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.holding-col-agora a:hover{
  opacity: 0.85;
  transform: translateY(-2px);
}
.holding-agora-img{
  height: 52px;
  width: auto;
  display: block;
}
.holding-logos{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.holding-logos a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.holding-logos a:hover{
  opacity: 0.85;
  transform: translateY(-3px);
}
.holding-logos img{
  height: 40px;
  width: auto;
  display: block;
}
.holding-logos .logo-lg{
  height: 66px;
}
@media(max-width: 760px){
  .holding-top{ grid-template-columns:1fr; }
  .holding-logos{ gap: 28px; }
  .holding-logos img{ height: 32px; }
  .holding-logos .logo-lg{ height: 48px; }
}

/* ============================
   ECO — BENEFITS SECTION
   ============================ */
.eco-benefits{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 5fr 7fr;
  background: transparent;
  min-height: 600px;
  margin-bottom: 0;
}

/* ── Left visual ── */
.eco-benefits__visual{
  position: relative;
  overflow: hidden;
}
.eco-benefits__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  filter: grayscale(60%) brightness(.38);
}
.eco-benefits__visual-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 55%, rgba(8,8,8,.9) 100%);
}

/* ── Right panel — white with diagonal bottom-left cut ── */
.eco-benefits__content{
  background: #1c1c1c;
  clip-path: polygon(44px 0, 100% 0, 100% 100%, 0 100%, 0 44px);
  padding: clamp(52px, 5.5vw, 84px) clamp(48px, 5vw, 80px) clamp(48px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
}

/* ── Upper group: label + headline ── */
.eco-benefits__upper{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Lower group: grid + CTA ── */
.eco-benefits__lower{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Label ── */
.eco-benefits__label{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--eco-green);
  margin: 0;
}
.eco-benefits__dots{
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  flex-shrink: 0;
}
.eco-benefits__dots i{
  display: block;
  width: 5px;
  height: 5px;
  background: var(--eco-green);
  border-radius: 1px;
  font-style: normal;
}

/* ── Headline ── */
.eco-benefits__headline{
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(32px, 3.4vw, 54px);
  line-height: 1.08;
  color: #fff;
  margin: 0;
}
.eco-benefits__headline em{
  font-style: normal;
  color: var(--eco-green);
}

/* ── Feature grid — table-border style ── */
.eco-benefits__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,.12);
  border-left: 1px solid rgba(255,255,255,.12);
}
.eco-benefit{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 24px;
  border-right: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  transition: background .18s;
  cursor: default;
}
.eco-benefit:hover{ background: rgba(61,196,61,.07); }
.eco-benefit__icon{
  color: rgba(255,255,255,.38);
  transition: color .18s;
  line-height: 0;
}
.eco-benefit:hover .eco-benefit__icon{ color: var(--eco-green); }
.eco-benefit__name{
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  line-height: 1.35;
}

/* ── CTA ── */
.eco-benefits__cta{ }
.eco-benefits__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 30px;
  border: 2px solid var(--eco-green);
  border-radius: 28px;
  color: var(--eco-green);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  text-decoration: none;
  transition: background .2s, color .2s, transform .2s;
}
.eco-benefits__btn:hover{ background: var(--eco-green); color: #fff; transform: translateY(-1px); }
.eco-benefits__btn svg{ transition: transform .2s; }
.eco-benefits__btn:hover svg{ transform: translateX(4px); }

/* ── Responsive ── */
@media(max-width: 900px){
  .eco-benefits{ grid-template-columns: 1fr; }
  .eco-benefits__visual{ height: 300px; }
  .eco-benefits__content{
    clip-path: none;
    justify-content: flex-start;
    gap: 32px;
  }
  .eco-benefits__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 480px){
  .eco-benefits__grid{ grid-template-columns: 1fr; }
}

/* ============================
   FOOTER
   ============================ */
/* ── Footer global ── */
.site-footer{ color:#bcbcbc; font-size:13px; background:#1c1c1c url('images/fondocuadros.webp') center / cover; position:relative; z-index:1; }

/* ── Sección principal ── */
.footer-main{
  padding: 0 0 52px;
  position: relative;
}
.footer-inner{
  display:grid;
  grid-template-columns: 320px auto 1fr;
  gap: 0;
  align-items:stretch;
  position:relative;
  z-index:1;
}
.footer-brand{
  display:flex; align-items:flex-start; justify-content:flex-start;
  align-self: start;
  padding:0 40px 0 0;
}
.footer-logo-img{ width:140px; height:auto; }
.footer-nav{
  padding:50px 0 0 0;
  display:flex; align-items:flex-start;
}
.footer-nav ul{
  list-style:none; display:flex; flex-direction:column; gap:5px;
  border-right:2px solid var(--red);
  padding-right:72px;
}
.footer-nav a{
  font-size:13px; color:#bcbcbc; text-decoration:none; transition:color .2s;
}
.footer-nav a:hover{ color:#fff; }
.footer-contact{
  padding:50px 0 0 88px;
  display:flex; flex-direction:column; justify-content:flex-start;
}
.footer-contact h4{
  color:#fff; font-size:22px; font-weight:700; margin-bottom:18px;
}
.footer-phones{
  display:flex; gap:28px; flex-wrap:wrap;
  color:#bcbcbc; font-size:13px; margin-bottom:10px;
}
.footer-phones a{ color:#bcbcbc; text-decoration:none; }
.footer-addr{ color:#bcbcbc; font-size:13px; line-height:1.7; margin-bottom:20px; }
.footer-social{
  list-style:none; display:flex; gap:8px;
}
.footer-social a{
  display:flex; width:34px; height:34px;
  background:var(--red); border-radius:6px;
  align-items:center; justify-content:center;
  color:#fff; transition:background .2s;
}
.footer-social a:hover{ background:var(--red-dark); }

/* ── Portal de servicios ── */
.footer-portal{
  background: transparent;
  padding:32px 0 36px;
}
.portal-heading{
  color:#aaa; font-size:14px; margin-bottom:14px;
}
.portal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.portal-card{
  position:relative;
  display:flex;
  height:100px;
  background-size:cover;
  background-position:center;
  overflow:hidden;
  text-decoration:none;
}
.portal-card--full{ grid-column:1 / -1; }
.portal-overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.62);
  background-image:radial-gradient(circle at 5% 5%, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:28px 28px;
}
.portal-content{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:0 28px;
}
.portal-label{
  font-family: var(--font-display);
  font-weight:700; font-size:16px;
  letter-spacing:1.5px; text-transform:uppercase; color:#fff;
}
.portal-chev-img{
  height:22px; width:auto; flex-shrink:0;
}
.portal-accent{
  display:block; position:absolute;
  bottom:0; left:0; right:0;
  height:3px; background:var(--cc);
  clip-path:polygon(0 0, calc(100% - 32px) 0, 100% 100%, 0 100%);
}

/* ── Barra inferior ── */
.footer-bottom{
  border-top:1px solid #2a2a2a;
  padding:18px 0 36px;
}
.footer-bottom-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center; gap:16px;
}
.footer-legal{
  font-size:11px; color:#555; text-decoration:none;
}
.footer-legal:hover{ color:#999; }
.footer-copy{ font-size:11px; color:#555; white-space:nowrap; }
.footer-copy a{ color:#555; text-decoration:underline; text-underline-offset:2px; }
.footer-copy a:hover{ color:#222; }
.footer-holding{
  display:flex; align-items:center; justify-content:flex-end;
  gap:5px; font-size:12px; color:#666;
}
.footer-holding strong{ color:#bbb; }
.footer-holding img{ height:22px; width:auto; }

@media(max-width:760px){
  .footer-inner{ grid-template-columns:1fr; }
  .footer-brand{ align-self:auto; }
  .footer-nav{ border-right:none; border-bottom:1px solid var(--red); padding:20px 0; }
  /* .footer-nav ul trae su PROPIO border-right (para separarse de la
     columna de contacto en el grid de desktop) que no se tocaba acá —
     quedaba una línea roja vertical flotando sola en el layout apilado
     de mobile, sin nada que separar. */
  .footer-nav ul{ border-right:none; padding-right:0; }
  /* El logo del footer (width:140px fijo) quedaba visiblemente más grande
     que el del header en mobile (que sí se reduce por breakpoint) — se
     achica para que ambos tengan una presencia similar. */
  .footer-logo-img{ width:108px; }
  .footer-contact{ padding-left:0; padding-top:20px; }
  .portal-grid{ grid-template-columns:1fr; }
  .footer-bottom-inner{ grid-template-columns:1fr; gap:6px; }
  .footer-holding{ justify-content:flex-start; }
  /* El copyright (~90 caracteres) traía white-space:nowrap pensado para
     el layout de 3 columnas de desktop — en mobile, ya apilado a 1
     columna, forzaba scroll horizontal en todo el sitio porque el texto
     no cabía en una sola línea. */
  .footer-copy{ white-space:normal; }
}

/* ============================
   Portal header — color + breadcrumb
   ============================ */
.site-header--cyan{
  background: var(--cyan);
  overflow: visible;
}
/* Header más bajo → logo sobrepasa el cyan */
.site-header--cyan .header-inner{
  position: relative;
  align-items: center;
  padding-top: 7px;
  padding-bottom: 7px;
  min-height: 84px;
}
/* Logo absoluto: fuera del flujo, no infla la altura del header */
.site-header--cyan .logo{
  position: absolute;
  left: var(--gutter);
  top: 0;
  transform: none;
  margin-top: 0;
  z-index: 2;
}
/* Compensar el espacio del logo compacto + gap */
.site-header--cyan .portal-nav-group{
  margin-left: 120px;
}

/* Blog: misma geometría compacta de los portales, conservando el blanco
   y el acento rojo propios de esta sección. */
.site-header--red .header-inner{
  position: relative;
  align-items: center;
  padding-top: 7px;
  padding-bottom: 7px;
  min-height: 84px;
}
.site-header--red .logo{
  position: absolute;
  left: var(--gutter);
  top: 0;
  transform: none;
  margin-top: 0;
  z-index: 2;
}
.site-header--red .portal-nav-group{
  margin-left: 120px;
}

/* Logo un poco más compacto en los headers de color: sigue sobresaliendo
   levemente de la franja, pero en mobile ya no tapa la primera opción del
   menú desplegable. */
.site-header--cyan .logo,
.site-header--green .logo,
.site-header--red .logo{
  width: 82px;
}
.site-header--cyan .logo-img,
.site-header--green .logo-img,
.site-header--red .logo-img{
  height: 120px;
}
@media(max-width: 980px){
  .site-header--cyan .logo,
  .site-header--green .logo,
  .site-header--red .logo{
    width: 69px;
  }
  .site-header--cyan .logo-img,
  .site-header--green .logo-img,
  .site-header--red .logo-img{
    height: 100px;
  }
}

/* Grupo nav+breadcrumb en columna */
.portal-nav-group{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.portal-nav-row{
  display: flex;
  align-items: center;
  gap: 24px;
}
.portal-nav-row .main-nav{ flex: 1; }

/* Nav pill: fondo blanco igual que home */
.site-header--cyan .nav-pill{
  background: #fff;
  border-color: #e0e0e0;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
/* Links oscuros sobre pill blanco */
.site-header--cyan .main-nav a{
  color: var(--gray-700);
}
.site-header--cyan .main-nav a:hover{
  color: var(--black);
  font-weight: 600;
}
/* Activo: azul más claro sobre pill blanco */
.site-header--cyan .main-nav a[data-active="true"],
.site-header--cyan .main-nav a.active{
  color: #0a8ba8;
  font-weight: 600;
  background: rgba(var(--cyan-rgb), .18);
  border-radius: 999px;
  padding: 5px 14px;
  margin: -5px -14px;
}

/* ENG: blanco con letras cyan */
.site-header--cyan .lang-btn{
  background: #fff;
  color: var(--cyan);
}
.site-header--cyan .lang-btn:hover{ background: rgba(255,255,255,.88); }

/* Hamburger blanco en portal */
.site-header--cyan .hamburger span{ background: #fff; }

/* Miga de pan */
.breadcrumb-inner{
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 20px;
  margin-top: 4px;
}
.bc-home{
  color: rgba(255,255,255,.8);
  display: flex;
  align-items: center;
  transition: color .2s;
}
.bc-home:hover{ color: #fff; }
.bc-sep{
  color: rgba(255,255,255,.55);
  font-size: 14px;
  line-height: 1;
}
.bc-item{
  color: rgba(255,255,255,.9);
  font-size: 13px;
}

/* ============================
   PORTAL PAGES — shared styles
   ============================ */

/* Títulos de sección en cyan para el portal */
.page-portal .section-title{
  color: var(--cyan);
}
.page-portal .section-title .red{
  color: var(--cyan);
}
/* Botón principal en cyan en vez de rojo */
.page-portal .btn-red{
  background: var(--cyan);
}
.page-portal .btn-red:hover{
  background: #17a0bb;
}

/* Buttons */
.btn-cyan{
  display: inline-block;
  background: var(--cyan);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 13px 30px;
  border-radius: 28px;
  letter-spacing: .2px;
  transition: background .2s, transform .2s;
}
.btn-cyan:hover{ background: #12a3be; transform: translateY(-1px); }

.btn-cyan-outline{
  display: inline-block;
  border: 2px solid var(--cyan);
  color: var(--cyan);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 30px;
  border-radius: 28px;
  letter-spacing: .2px;
  transition: background .2s, color .2s;
}
.btn-cyan-outline:hover{ background: var(--cyan); color: #fff; }

.btn-white-outline{
  display: inline-block;
  border: 2px solid rgba(255,255,255,.8);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 30px;
  border-radius: 28px;
  letter-spacing: .2px;
  transition: background .2s, color .2s;
}
.btn-white-outline:hover{ background: rgba(255,255,255,.15); }

/* ============================
   PHERO — Portal Hero
   ============================ */
.phero{
  position: relative;
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding-bottom: 36px;
}
/* Fondo fijo del hero: un único video en loop (sin fotos ni cruce entre ellas) */
.phero__video-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .9s ease;
}
.phero__video-bg.is-visible{ opacity: 1; }
.phero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.20) 0%, rgba(0,0,0,.65) 70%, rgba(0,0,0,.78) 100%);
  z-index: 1;
}
.phero__content{
  position: relative;
  z-index: 2;
  padding-top: 180px;
  padding-bottom: 40px;
}
.phero__pre{
  color: rgba(255,255,255,.85);
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 300;
  margin-bottom: 6px;
}
.phero__title{
  font-family: var(--font-display);
  /* Más contenido y con aire entre líneas: el título actual es más largo
     ("Consultoría civil y construcción") y a 72px/0.95 se veía apretado. */
  font-size: clamp(32px, 4.2vw, 60px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.5px;
  text-transform: uppercase;
  margin-bottom: 36px;
}
.phero__cyan{ display: block; color: var(--cyan); }
.phero__white{ display: block; color: #fff; }

@media(max-width:760px){
  .phero{ min-height: 60vh; }
}

/* ============================
   PSERV — Portal Services
   ============================ */
.pserv{
  background: #fff;
  padding: 56px 0 28px;
}
.pserv__inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.pserv__photo{
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), calc(100% - 48px) 100%, 0 100%);
  overflow: hidden;
}
.pserv__photo img{
  width: 100%;
  height: 480px;
  object-fit: cover;
  object-position: center;
  display: block;
}
.pserv__pre{
  color: #888;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 6px;
}
.pserv__title{
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 700;
  color: var(--cyan);
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin-bottom: 22px;
}
.pserv__desc{
  color: #555;
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 18px;
}
.pserv__brochure{
  color: #666;
  font-size: 13.5px;
  margin-bottom: 28px;
}
.pserv__brochure a{
  color: var(--cyan);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media(max-width:880px){
  .pserv__inner{ grid-template-columns: 1fr; gap: 36px; }
  .pserv__photo img{ height: 320px; }
  .pserv{ padding: 36px 0 24px; }
}

/* ============================
   PEQUIPO — Portal Equipo
   ============================ */
.pequipo{
  /* Cyan empieza en la mitad de las member-cards */
  background: linear-gradient(to bottom, #fff calc(100% - 268px), var(--cyan) calc(100% - 268px));
  padding: 44px 0 28px;
}
.pequipo__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}
.pequipo__title{
  font-family: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  color: var(--cyan);
  line-height: 1.1;
}
.pequipo__sub{
  color: #888;
  font-size: 15px;
  font-weight: 400;
  margin-top: 4px;
}
.pequipo .equipo-controls{
  position: static;
  display: flex;
  gap: 8px;
  align-self: center;
}
.pequipo .equipo-controls .ctrl{
  border-color: var(--cyan);
  color: var(--cyan);
}
.pequipo .equipo-controls .ctrl:hover{
  background: var(--cyan);
  color: #fff;
}
@media(max-width:760px){
  .pequipo__head{ flex-direction: column; gap: 16px; }
  .pequipo{ padding: 28px 0 20px; }
}

/* ============================
   PHIDRO — Hidráulica Section
   ============================ */
.phidro{
  background: var(--cyan);
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), calc(100% - 64px) 100%, 0 100%);
  padding-bottom: 80px;
}
/* El clip-path de .phidro siempre deja ver el fondo blanco en su propia
   esquina inferior derecha, sin importar qué sección venga después. Al
   apilar dos franjas seguidas, ambas necesitan ir "planas". */
.phidro--flat{
  clip-path: none;
}
/* Variante oscura (Infraestructura Institucional) — mismo tono marino de
   su propia página, para no repetir el mismo cian dos veces seguidas. */
.phidro--dark{
  background: #091322;
}

/* ============================
   ESPECIALIDADES (Hidráulica / Institucional / Ingeniería Integral)
   — reutiliza .hero-cards de la home; fondo claro, sin bloques de
   color sólido. Ahora con 3 puertas: el ancho fijo de .hero-card__content
   (pensado para 2 paneles a 50vw) se reescala a ~1/3 solo aquí.
   ============================ */
.civil-specialties{
  background: #fff;
  padding: 8px 0 28px;
}
.civil-specialties .section-title{
  text-align: center;
  margin-bottom: 22px;
}
.civil-specialties .hero-cards{
  margin-top: 0;
}
.civil-specialties .hero-card__content{
  width: calc(min(34vw, 420px) - var(--gutter));
}
/* 3 paneles más angostos que el original de 2 → el título necesita un
   tamaño menor para no desbordar el panel (ej. "INFRAESTRUCTURA"). */
.civil-specialties .hero-card__content h2{
  font-size: clamp(18px, 1.9vw, 28px);
}
@media(max-width: 760px){
  .civil-specialties .hero-card__content{ width: 100%; }
  .civil-specialties .hero-card__content h2{ font-size: clamp(22px, 2.6vw, 38px); }
}
/* Las mismas 3 puertas en el portal de Gestión, debajo de Resultados de Impacto.
   El recuadro oscuro de Resultados se monta 70px sobre lo que sigue
   (.impact-summary-container margin-bottom:-70px), así que se suman al relleno. */
.gestion-specialties{ padding-top: calc(70px + 36px); }
.gestion-specialties .card-link{
  border-bottom-color: var(--green);
}
.gestion-specialties .card-link span{
  color: #fff;
}

/* Páginas de línea de Gestión (aceleracion-empresarial / consultoria-a-la-medida):
   usan la misma plantilla que las líneas civiles (psv-banner, psv-catalog,
   proy-card…), que está pintada con --cyan / --cyan-rgb. Aquí se cambian
   esas dos variables por el verde de marca y todo el bloque pasa a verde. */
.page-linea-gestion{
  --cyan: var(--green);
  --cyan-rgb: 0,189,61;
}
.page-linea-gestion .btn-cyan:hover{ background: #00a334; }
/* Resumen corto bajo el título de cada proyecto destacado */
.page-linea-gestion .proy-card__desc{
  font-size: 13.5px;
  line-height: 1.55;
  color: #5a6270;
  margin: 8px 0 12px;
}
.phidro__inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px var(--gutter) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.phidro__photo{
  overflow: hidden;
  border-radius: 2px;
}
.phidro__photo img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}
.phidro__pre{
  color: rgba(255,255,255,.8);
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 4px;
}
.phidro__title{
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 66px);
  color: #fff;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 28px;
}
.phidro__question{
  font-size: clamp(18px, 2vw, 26px);
  color: #fff;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.2;
}
.phidro__desc{
  color: rgba(255,255,255,.85);
  font-size: 13.5px;
  line-height: 1.75;
  margin-bottom: 14px;
}
.phidro__desc:last-of-type{ margin-bottom: 28px; }
@media(max-width:880px){
  .phidro__inner{ grid-template-columns: 1fr; gap: 32px; padding-top: 28px; }
  .phidro__photo img{ height: 260px; }
  .phidro{ clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%); }
}

/* ============================
   SERVICIOS CIVIL — Banner
   ============================ */
.psv-banner{
  padding: 80px 0 80px;
  background: #fff;
}
.psv-banner__inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.psv-banner__inner > *{
  /* Sin esto, una palabra larga en psv-banner__h1 (ej. "INFRAESTRUCTURA")
     fuerza el min-content de esa columna por encima de su 1fr, empujando
     y aplastando la columna de la imagen a una tira angosta. */
  min-width: 0;
}
.psv-banner__content{
  /* El h1 escala en cqw (ancho de ESTA columna), no en vw (ancho del
     viewport completo) — así el tamaño se ajusta solo tanto si el hero
     está en 2 columnas (desktop) como en 1 columna (mobile, donde esta
     misma columna pasa a ser casi el ancho completo), sin necesidad de
     recalcular a mano en cada breakpoint. */
  container-type: inline-size;
}
.psv-banner__kicker{
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 16px;
}
.psv-banner__h1{
  font-family: var(--font-display);
  /* cqw = ancho de .psv-banner__content, no del viewport. Con vw, la
     misma palabra larga ("INFRAESTRUCTURA") cabía o no según el hero
     estuviera en 1 o 2 columnas, y en 2 columnas nunca alcanzaba —
     de ahí que se rompiera en fragmentos ilegibles. Con cqw, el tamaño
     siempre es proporcional al ancho real disponible en cualquier
     layout, así que la palabra completa entra siempre en una línea. */
  font-size: clamp(22px, 8.5cqw, 60px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--black);
  letter-spacing: -1px;
  margin-bottom: 14px;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.psv-banner__sub{
  font-family: var(--font);
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 600;
  color: var(--cyan);
  line-height: 1.3;
  margin-bottom: 24px;
}
.psv-banner__body{
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray-700);
  margin-bottom: 36px;
  max-width: 500px;
}
.psv-banner__img{
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 56px), calc(100% - 56px) 100%, 0 100%);
}
.psv-banner__img img{
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
}
.psv-banner__img-accent{
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--cyan-rgb), .12) 0%, transparent 50%);
  pointer-events: none;
}
@media(max-width:860px){
  .psv-banner__inner{
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .psv-banner__img img{ height: 300px; }
  .psv-banner{ padding: 48px 0 60px; }
}
.psv-banner__ctas{
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: center;
}

/* Franja de cifras (stats) reutilizando .hero-stats fuera del hero de home */
.psv-stats{
  background: #fff;
  padding: 8px 0 28px;
}

/* Sección editorial clara (reemplaza el bloque emocional oscuro .eco-network
   en las páginas de Ingeniería Hidráulica/Institucional/Integral) */
.civil-editorial{
  background: #f7f9fa;
  padding: 44px 0;
  text-align: center;
}
@media(max-width:760px){
  .civil-editorial{ padding: 32px 0; }
}
.civil-editorial__pre{
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 14px;
}
.civil-editorial__title{
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 700;
  color: var(--black);
  line-height: 1.2;
  margin-bottom: 24px;
}
.civil-editorial__body{
  max-width: 720px;
  margin: 0 auto;
  color: var(--gray-700);
  font-size: 15px;
  line-height: 1.75;
}
.civil-editorial__body p + p{ margin-top: 16px; }

.psv-catalog__desc{
  max-width: 560px;
  color: var(--gray-500);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 10px;
}

/* ============================
   SERVICIOS CIVIL — Catálogo
   ============================ */
/* ===== BLUEPRINT CATALOG ===== */
.psv-catalog{
  background-color: #f2f5f7;
  /* Engineering graph paper: 80px major grid + 16px minor grid */
  background-image:
    linear-gradient(rgba(var(--cyan-rgb), 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cyan-rgb), 0.13) 1px, transparent 1px),
    linear-gradient(rgba(var(--cyan-rgb), 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cyan-rgb), 0.04) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  padding: 36px 0 64px;
}
.psv-catalog .container{ position: relative; }

/* Vertical axis/ruler line — left of container */
.psv-catalog .container::before{
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -18px;
  width: 1px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(var(--cyan-rgb), 0.4),
    rgba(var(--cyan-rgb), 0.4) 4px,
    transparent 4px,
    transparent 14px
  );
  pointer-events: none;
}

.psv-catalog__header{
  position: relative;
  margin-top: 48px;
  margin-bottom: 40px;
  padding-bottom: 0;
  border-bottom: none;
}
/* Technical annotation removed */
.psv-catalog__pre{
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 14px;
}
.psv-catalog__title{
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 700;
  color: var(--cyan);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.5px;
}

/* ---- Service groups — each styled as a technical drawing detail ---- */
/* ---- Service group — 3-column layout ---- */
.psv-group{
  position: relative;
  display: grid;
  grid-template-columns: 240px 1fr 1fr;
  gap: 48px;
  padding: 52px 0 52px;
  border-bottom: 1px solid rgba(var(--cyan-rgb), 0.18);
}
.psv-group:last-child{ border-bottom: none; }

/* Dimension line with terminal ticks above each group */
.psv-group::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0; right: 0;
  height: 10px;
  background-image:
    linear-gradient(rgba(var(--cyan-rgb), 0.25), rgba(var(--cyan-rgb), 0.25)),
    linear-gradient(rgba(var(--cyan-rgb), 0.25), rgba(var(--cyan-rgb), 0.25)),
    linear-gradient(rgba(var(--cyan-rgb), 0.25), rgba(var(--cyan-rgb), 0.25));
  background-size: 100% 1px, 1px 10px, 1px 10px;
  background-position: 0 50%, 0 0, 100% 0;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* data-ref label on the dimension line */
.psv-group::after{
  content: attr(data-ref);
  position: absolute;
  top: -6px;
  right: 0;
  font-family: 'Courier New', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(var(--cyan-rgb), 0.65);
  background: #f2f5f7;
  padding: 2px 8px;
  border: 1px solid rgba(var(--cyan-rgb), 0.22);
  line-height: 1.2;
  pointer-events: none;
}
html[lang="en"] .psv-group[data-ref-en]::after{
  content: attr(data-ref-en);
}

/* Left column: number + title + desc */
.psv-group__label{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.psv-group__idx{
  font-family: var(--font-display);
  font-size: clamp(52px, 5.5vw, 76px);
  font-weight: 700;
  color: var(--cyan);
  opacity: 0.18;
  line-height: 1;
  letter-spacing: -3px;
  display: block;
}
.psv-group__name{
  font-family: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 700;
  color: var(--black);
  line-height: 1.25;
  margin-bottom: 2px;
}
.psv-group__desc{
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.55;
}

/* Center column: illustration image */
.psv-group__figure{
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  align-self: center;
}
.psv-group__figure::after{
  /* Blueprint corner bracket overlay */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--cyan-rgb), 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cyan-rgb), 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.psv-group__figure img{
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
}

/* Right column: items list — single column */
.psv-group__items{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 14px;
  border-left: 1px solid rgba(var(--cyan-rgb), 0.2);
}
.psv-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  color: var(--gray-700);
  font-size: 15px;
  font-weight: 400;
  border-bottom: 1px solid rgba(var(--cyan-rgb), 0.09);
}
.psv-item:last-child{ border-bottom: none; }
/* Coordinate point marker */
.psv-item::before{
  content: '';
  display: block;
  width: 5px; height: 5px;
  border: 1.5px solid rgba(var(--cyan-rgb), 0.55);
  border-radius: 50%;
  flex-shrink: 0;
}

/* breadcrumb extra item */
.bc-item--active{
  color: rgba(255,255,255,.55);
  font-weight: 400;
}

@media(max-width:900px){
  .psv-group{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 32px;
  }
  .psv-group__label{ grid-column: 1; grid-row: 1; }
  .psv-group__figure{ grid-column: 2; grid-row: 1; }
  .psv-group__items{ grid-column: 1 / -1; grid-row: 2; border-left: none; border-top: 1px solid rgba(var(--cyan-rgb), 0.2); padding-left: 0; padding-top: 16px; flex-direction: row; flex-wrap: wrap; gap: 0; }
  .psv-item{ width: 50%; }
}
@media(max-width:580px){
  .psv-group{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .psv-group__label{ grid-column: 1; grid-row: 1; }
  .psv-group__figure{ grid-column: 1; grid-row: 2; }
  .psv-group__items{ grid-column: 1; grid-row: 3; flex-direction: column; }
  .psv-item{ width: 100%; }
  .psv-catalog{ padding: 40px 0 48px; }
}

/* ============================
   PROYECTOS — Portfolio
   ============================ */
.proy-section{
  background-color: #f2f5f7;
  background-image:
    linear-gradient(rgba(var(--cyan-rgb), 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cyan-rgb), 0.13) 1px, transparent 1px),
    linear-gradient(rgba(var(--cyan-rgb), 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cyan-rgb), 0.04) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  padding: 36px 0 64px;
  min-height: 80vh;
}
@media(max-width:760px){
  .proy-section{ padding: 24px 0 40px; min-height: 0; }
}

/* Page header */
.proy-header{
  margin-top: 48px;
  margin-bottom: 44px;
}
.proy-pre{
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 10px;
}
.proy-title{
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 700;
  color: var(--cyan);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.5px;
}

/* ---- Filters ---- */
.proy-filters{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

/* Dropdown trigger button */
.proy-dropdown{ position: relative; }

.proy-dd-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  transition: border-color 0.18s, box-shadow 0.18s;
  white-space: nowrap;
  min-width: 210px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.proy-dd-btn:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.proy-dropdown.is-open .proy-dd-btn {
  border-color: #94a3b8;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.proy-dd-label{
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  flex-shrink: 0;
}
.proy-dd-val{
  flex: 1;
  text-align: left;
  color: #222;
  font-weight: 500;
}
.proy-dd-btn svg{
  flex-shrink: 0;
  color: #aaa;
  transition: transform 0.2s;
}
.proy-dropdown.is-open .proy-dd-btn svg{ transform: rotate(180deg); }

/* Dropdown list */
.proy-dd-list{
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.1);
  list-style: none;
  padding: 6px;
  z-index: 200;
}
.proy-dropdown.is-open .proy-dd-list{ display: block; }

.proy-dd-opt{
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 13.5px;
  color: #444;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.15s, color 0.15s;
}
.proy-dd-opt:hover{ background: rgba(var(--cyan-rgb), 0.08); color: var(--cyan); }
.proy-dd-opt.is-selected{
  background: rgba(var(--cyan-rgb), 0.1);
  color: var(--cyan);
  font-weight: 600;
}

/* Clear button */
.proy-clear{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  background: transparent;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 12.5px;
  color: #888;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}
.proy-clear:hover{ border-color: #bbb; color: #444; }

/* Results count */
.proy-count{
  margin-left: auto;
  font-size: 12px;
  color: #aaa;
  white-space: nowrap;
}
.proy-count strong{ color: var(--cyan); font-weight: 700; }

/* ---- Grid — módulo estructural asimétrico ---- */
.proy-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: 16px;
}

/* ---- Card — hoja de detalle técnico ---- */
.proy-card{
  position: relative;
  background: #fff;
  border: 1px solid rgba(var(--cyan-rgb), 0.2);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.25s, transform 0.22s, box-shadow 0.25s;
}
.proy-card:hover{
  border-color: rgba(var(--cyan-rgb), 0.55);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(var(--cyan-rgb), 0.12);
}
.proy-card.is-hidden{ display: none; }

/* Marcadores de esquina tipo plano técnico (Removido por requerimiento) */
.proy-card::before{
  display: none;
}


/* ---- Área de imagen ---- */
.proy-card__img-wrap{
  position: relative;
  overflow: hidden;
}
.proy-card__img{
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  transition: transform 0.45s ease, filter 0.35s ease;
}
.proy-card:hover .proy-card__img{
  transform: scale(1.06);
  filter: brightness(1.04);
}
/* Cuadrícula blueprint sobre la imagen */
.proy-card__img-wrap::after{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--cyan-rgb), 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cyan-rgb), 0.12) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  mix-blend-mode: overlay;
}
/* Overlay cyan en hover */
.proy-card__img-wrap::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 40%, rgba(var(--cyan-rgb), 0.28) 100%);
  opacity: 0;
  transition: opacity 0.35s;
  z-index: 1;
  pointer-events: none;
}
.proy-card:hover .proy-card__img-wrap::before{ opacity: 1; }

/* Código de referencia técnica (Removido por requerimiento) */
.proy-card__ref{
  display: none;
}

/* ---- Cuerpo de la tarjeta ---- */
.proy-card__body{
  padding: 16px 18px 20px;
  border-top: 1px solid rgba(var(--cyan-rgb), 0.12);
}

/* Tag — indicador cuadrado */
.proy-card__tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 9px;
}
.proy-card__tag::before{
  content: '';
  display: block;
  width: 7px; height: 7px;
  flex-shrink: 0;
}
.proy-card__tag--interventoria{ color: #0b9db5; }
.proy-card__tag--interventoria::before{ background: #0b9db5; }
.proy-card__tag--diseno{ color: #059669; }
.proy-card__tag--diseno::before{ background: #059669; }
.proy-card__tag--gerencia{ color: #4f46e5; }
.proy-card__tag--gerencia::before{ background: #4f46e5; }
.proy-card__tag--aceleracion{ color: #00bd3d; }
.proy-card__tag--aceleracion::before{ background: #00bd3d; }
.proy-card__tag--finanzas{ color: #0284c7; }
.proy-card__tag--finanzas::before{ background: #0284c7; }
.proy-card__tag--sostenibilidad{ color: #059669; }
.proy-card__tag--sostenibilidad::before{ background: #059669; }
.proy-card__tag--ventas{ color: #8b5cf6; }
.proy-card__tag--ventas::before{ background: #8b5cf6; }
.proy-card__tag--innovacion{ color: #d97706; }
.proy-card__tag--innovacion::before{ background: #d97706; }


.proy-card__title{
  font-family: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #0e1a2b;
  line-height: 1.35;
  margin-bottom: 14px;
}

/* Meta */
.proy-card__meta{
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font);
  font-size: 11.5px;
  color: #8a9aaa;
}
.proy-card__meta-item{
  display: flex;
  align-items: center;
  gap: 5px;
}
.proy-card__meta svg{ opacity: 0.4; flex-shrink: 0; }

/* Estado vacío */
.proy-empty{
  display: none;
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 20px;
  color: #aaa;
  font-size: 14px;
}
.proy-empty.is-visible{ display: block; }

.proy-more-wrap{
  text-align: center;
  margin-top: 48px;
}
.proy-more-wrap[hidden]{ display: none; }

@media(max-width:960px){
  .proy-grid{ grid-template-columns: repeat(2, 1fr); }
  .proy-card--featured{ grid-column: span 2; }
}
@media(max-width:640px){
  .proy-grid{ grid-template-columns: 1fr; }
  .proy-card--featured{ flex-direction: column; }
  .proy-card--featured .proy-card__img-wrap{ flex: none; min-height: auto; }
  .proy-card--featured .proy-card__img{ height: 220px; }
  .proy-card--featured .proy-card__body{ border-left: none; border-top: 1px solid rgba(var(--cyan-rgb), 0.12); }
  .proy-filters{ gap: 10px; }
  .proy-count{ margin-left: 0; }
}

/* ============================================================
   ECOSISTEMA EMPRESARIAL
   ============================================================ */

.page-ecosistema{
  --eco-bg:       #0d0d0d;
  --eco-bg2:      #131313;
  --eco-card:     rgba(255,255,255,.042);
  --eco-border:   rgba(255,255,255,.08);
  --eco-text:     #8a9aaa;
  --eco-heading:  #e8f0f8;
  --eco-green:    #3dc43d;
  --eco-agro:     #6bcb4e;
  --eco-tech:     #1bb7d5;
  --eco-const:    #f5a623;
  --eco-salud:    #e84c88;
  --eco-comercio: #9b59b6;
  --eco-mfg:      #ff6b6b;
  --eco-serv:     #4db8ff;
  --eco-turismo:  #ffd166;
  background: #080808;
  color: var(--eco-text);
}

/* ── Header ── */
.eco-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(13,13,13,.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--eco-border);
  overflow: visible;
}
.eco-header .header-inner{
  position: relative;
}
/* Logo — misma lógica que .site-header--cyan .logo */
.eco-header .logo{
  position: absolute;
  left: var(--gutter);
  top: 0;
  transform: none;
  margin-top: 0;
  z-index: 10;
}
/* Nav row */
.eco-header__nav{
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: 120px;
}
.eco-header__tag{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--eco-green);
  border: 1px solid rgba(61,196,61,.35);
  border-radius: 999px;
  padding: 3px 10px;
}
/* La etiqueta "Gestión Empresarial" es un enlace de regreso a la línea de
   negocio, junto a "← Inicio" */
a.eco-header__tag{ transition: background .2s; }
a.eco-header__tag:hover{ background: rgba(61,196,61,.12); }
.eco-header__back{
  margin-left: auto;
  font-size: 13px;
  color: var(--eco-text);
  transition: color .2s;
}
.eco-header__back:hover{ color: var(--eco-heading); }
/* ENG/ESP sobre el header oscuro del ecosistema (outline verde en vez del rojo) */
.eco-header .lang-btn{
  background: transparent;
  color: var(--eco-green);
  border: 1px solid rgba(61,196,61,.35);
}
.eco-header .lang-btn:hover{ background: rgba(61,196,61,.12); }
/* En pantallas angostas la etiqueta de sección se oculta para que quepan
   el enlace "← Inicio" y el botón ENG dentro del ancho de la pantalla */
@media (max-width: 480px){
  /* Ahora la etiqueta es el enlace a Gestión Empresarial: se mantiene
     visible pero compacta para que quepa junto a "← Inicio" y ENG. */
  .eco-header__tag{ font-size: 9.5px; letter-spacing: .3px; padding: 4px 7px; white-space: nowrap; }
  .eco-header__back{ white-space: nowrap; font-size: 12px; }
  .eco-header__nav{ flex:1; justify-content:flex-end; gap: 8px; flex-wrap: nowrap; }
  .eco-header .lang-btn{ position: relative; padding: 7px 10px; }
  .eco-header .lang-btn::after{ content:''; position:absolute; inset:-8px -2px; }
}

/* ── Hero ── */
.eco-hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 100px 40px 60px;
  background:
    radial-gradient(circle at 78% 18%, rgba(61,196,61,.08) 0%, transparent 42%),
    radial-gradient(circle at 18% 82%, rgba(61,196,61,.05) 0%, transparent 38%),
    linear-gradient(155deg, #1e1e1e 0%, #111111 45%, #080808 100%);
  z-index: 1;
}
#eco-canvas{
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* 3-column layout: images | text | images */
.eco-hero__layout{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 40px;
  align-items: center;
  width: 100%;
  max-width: 1200px;
}
.eco-hero__imgs{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.eco-hero__img-frame{
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.eco-hero__img-frame:first-child{ aspect-ratio: 3/4; }
.eco-hero__img-frame:last-child { aspect-ratio: 4/3; }
.eco-hero__img-frame img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(15%) brightness(.8);
  transition: filter .4s;
}
.eco-hero__img-frame:hover img{ filter: grayscale(0%) brightness(1); }
/* subtle green tint overlay */
.eco-hero__img-frame::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(61,196,61,.08) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Floating + rotation per image ── */
.eco-hero__img-frame{
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 6px 16px rgba(0,0,0,.4);
}
/* left column */
.eco-hero__imgs:first-child .eco-hero__img-frame:nth-child(1){
  transform: rotate(-3.5deg) translateX(-8px);
  animation: eco-float-a 8s ease-in-out infinite;
}
.eco-hero__imgs:first-child .eco-hero__img-frame:nth-child(2){
  transform: rotate(2deg) translateX(12px);
  animation: eco-float-b 11s ease-in-out infinite;
  animation-delay: -4s;
}
/* right column */
.eco-hero__imgs:last-child .eco-hero__img-frame:nth-child(1){
  transform: rotate(3deg) translateX(6px);
  animation: eco-float-b 9s ease-in-out infinite;
  animation-delay: -2s;
}
.eco-hero__imgs:last-child .eco-hero__img-frame:nth-child(2){
  transform: rotate(-2deg) translateX(-10px);
  animation: eco-float-a 12s ease-in-out infinite;
  animation-delay: -6s;
}
@keyframes eco-float-a{
  0%, 100%{ translate: 0 0px; }
  50%      { translate: 0 -14px; }
}
@keyframes eco-float-b{
  0%, 100%{ translate: 0 -7px; }
  50%      { translate: 0 7px; }
}

.eco-hero__content{
  text-align: center;
  padding: 0 16px;
}
.eco-hero__eyebrow{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--eco-green);
  margin-bottom: 28px;
}
.eco-hero__title{
  font-family: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  font-weight: 700;
  font-size: clamp(42px, 6vw, 80px);
  line-height: .93;
  color: var(--eco-heading);
  margin-bottom: 20px;
  letter-spacing: -2px;
  text-transform: uppercase;
}
.eco-hero__title em{
  font-style: normal;
  color: var(--eco-green);
}
.eco-hero__subtitle{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--eco-text);
  margin-bottom: 36px;
}
.eco-hero__subtitle::before,
.eco-hero__subtitle::after{
  content: '';
  display: block;
  width: 28px; height: 1px;
  background: rgba(255,255,255,.2);
}
.eco-hero__tagline{
  display: none; /* moved to subtitle concept */
}
.eco-hero__cta{
  display: inline-block;
  background: transparent;
  border: 1.5px solid var(--eco-green);
  color: var(--eco-green);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 30px;
  border-radius: 999px;
  letter-spacing: .3px;
  transition: background .2s, color .2s;
}
.eco-hero__cta:hover{ background: var(--eco-green); color: #fff; }

/* Stats bar */
.eco-hero__stats{
  position: relative;
  z-index: 2;
  display: flex;
  gap: 0;
  margin-top: 64px;
  border: 1px solid var(--eco-border);
  border-radius: 14px;
  overflow: hidden;
}
.eco-stat{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  border-right: 1px solid var(--eco-border);
  background: rgba(255,255,255,.025);
}
.eco-stat:last-child{ border-right: none; }
.eco-stat__num{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1;
  color: var(--eco-heading);
}
.eco-stat__plus{
  font-size: 28px;
  font-weight: 700;
  color: var(--eco-green);
  line-height: 1;
  vertical-align: super;
}
.eco-stat__label{
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--eco-text);
  margin-top: 6px;
}

/* ── Network intro ── */
.eco-network{
  position: relative;
  z-index: 1;
  padding: 44px 32px 32px;
  background: transparent;
}
.eco-network__container{
  max-width: 1200px;
  margin: 0 auto;
}
.eco-network__intro{
  max-width: 560px;
  margin-bottom: 52px;
}
.eco-network__pre{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--eco-green);
  margin-bottom: 16px;
}
.eco-network__title{
  font-family: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.1;
  color: var(--eco-heading);
  margin-bottom: 20px;
  letter-spacing: -1px;
}
.eco-network__desc{
  font-size: 15px;
  line-height: 1.8;
  color: var(--eco-text);
}

/* Sector pills */
.eco-sectors{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.eco-sector-btn{
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--eco-border);
  background: transparent;
  color: var(--eco-text);
  cursor: pointer;
  transition: all .2s;
}
.eco-sector-btn:hover{
  border-color: rgba(255,255,255,.25);
  color: var(--eco-heading);
}
.eco-sector-btn.is-active{
  background: var(--eco-green);
  border-color: var(--eco-green);
  color: #fff;
  font-weight: 600;
}
.eco-sector-btn[data-sector="agroindustria"].is-active { background: var(--eco-agro);   border-color: var(--eco-agro); }
.eco-sector-btn[data-sector="tecnologia"].is-active   { background: var(--eco-tech);    border-color: var(--eco-tech); }
.eco-sector-btn[data-sector="construccion"].is-active { background: var(--eco-const);   border-color: var(--eco-const); }
.eco-sector-btn[data-sector="salud"].is-active        { background: var(--eco-salud);   border-color: var(--eco-salud); }
.eco-sector-btn[data-sector="comercio"].is-active     { background: var(--eco-comercio);border-color: var(--eco-comercio); }
.eco-sector-btn[data-sector="manufactura"].is-active  { background: var(--eco-mfg);     border-color: var(--eco-mfg); }
.eco-sector-btn[data-sector="servicios"].is-active    { background: var(--eco-serv);    border-color: var(--eco-serv); }
.eco-sector-btn[data-sector="turismo"].is-active      { background: var(--eco-turismo); border-color: var(--eco-turismo); }

/* ── Catalog ── */
.eco-catalog{
  position: relative;
  z-index: 1;
  padding: 32px 32px clamp(40px, 5vw, 64px);
  background: #f2f1ec;
}
.eco-catalog__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* Filters — light theme */
.eco-filters{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}


.eco-search-wrap{
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 280px;
}
.eco-search-wrap svg{
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: #888;
  pointer-events: none;
}
.eco-search{
  width: 100%;
  background: #fff;
  border: 1px solid #d8d5cf;
  border-radius: 999px;
  /* font-size < 16px hace que iOS Safari haga zoom automático al enfocar */
  padding: 9px 16px 9px 38px;
  font-size: 16px;
  color: #222;
  outline: none;
  transition: border-color .2s;
}
.eco-search::placeholder{ color: #999; }
.eco-search:focus{ border-color: var(--eco-green); }

/* Eco dropdown — light */
.eco-dropdown{ position: relative; }
.eco-dd-btn{
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #d8d5cf;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  color: #555;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s;
}
.eco-dd-btn:hover{ border-color: #aaa; color: #222; }
.eco-dd-val{ color: #222; font-weight: 500; }
.eco-dd-btn svg{ transition: transform .2s; flex-shrink: 0; }
.eco-dropdown.is-open .eco-dd-btn svg{ transform: rotate(180deg); }
.eco-dd-list{
  display: none;
  position: absolute;
  top: calc(100% + 6px); left: 0;
  background: #fff;
  border: 1px solid #d8d5cf;
  border-radius: 10px;
  min-width: 200px;
  padding: 6px;
  z-index: 50;
  list-style: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.eco-dropdown.is-open .eco-dd-list{ display: block; }
.eco-dd-opt{
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: #555;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.eco-dd-opt:hover{ background: #f5f4f0; color: #222; }
.eco-dd-opt.is-selected{ color: var(--eco-green); font-weight: 600; }

/* Clear + count */
.eco-clear{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #666;
  background: transparent;
  border: 1px solid #d8d5cf;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.eco-clear:hover{ color: #222; border-color: #aaa; }
.eco-count{ margin-left: auto; font-size: 13px; color: #777; }
.eco-count strong{ color: var(--eco-green); font-weight: 700; }

/* ── Company grid — table-border, 4 columns ── */
.eco-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #d5d2cb;
  border-left: 1px solid #d5d2cb;
}

/* ── Card ── */
.eco-card{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 290px;
  padding: 22px 22px 20px;
  border-right: 1px solid #d5d2cb;
  border-bottom: 1px solid #d5d2cb;
  background: #f2f1ec;
  transition: background .18s, transform .18s;
  cursor: default;
}
.eco-card:hover{ background: #eae8e1; }

.eco-card__top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

/* Sector label — top left, small caps */
.eco-card__sector{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--pc, #666);
  margin: 0;
  line-height: 1.2;
}

.eco-card__program-tag{
  font-size: 9px;
  font-weight: 600;
  color: #555;
  background: rgba(0,0,0,0.06);
  padding: 3px 6px;
  border-radius: 4px;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

/* Logo area — logo image + company name */
.eco-card__logo-area{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 16px 0 12px;
}

.eco-card__logo-img{
  height: 52px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.06));
  transition: transform .2s ease;
  margin-bottom: 12px;
}
.eco-card:hover .eco-card__logo-img{
  transform: scale(1.04);
  transform-origin: left center;
}

/* Specific logos sizing without static transform scale layout offsets */
.eco-card__logo-img[src*="productosvicky"],
.eco-card__logo-img[src*="optienergia"],
.eco-card__logo-img[src*="telltex"],
.eco-card__logo-img[src*="arepasdeyei"],
.eco-card__logo-img[src*="vinoamazonico"],
.eco-card__logo-img[src*="comultiagrop"],
.eco-card__logo-img[src*="bioingredientes"],
.eco-card__logo-img[src*="tecnovant"],
.eco-card__logo-img[src*="tuimagendigital"]{
  height: 58px;
  margin-bottom: 6px;
}

/* Specific logos scaling for dense logos */
.eco-card__logo-img[src*="deelicitaciones"],
.eco-card__logo-img[src*="promitec"],
.eco-card__logo-img[src*="naturalslim"],
.eco-card__logo-img[src*="ipler"]{
  height: 38px;
  margin-top: 7px;
  margin-bottom: 19px;
}

/* Logotype — sector color accent, regular/medium weight, larger & spaced below logo */
.eco-card[data-sector="agroindustria"] { --pc: var(--eco-agro); }
.eco-card[data-sector="tecnologia"]    { --pc: var(--eco-tech); }
.eco-card[data-sector="construccion"]  { --pc: var(--eco-const); }
.eco-card[data-sector="salud"]         { --pc: var(--eco-salud); }
.eco-card[data-sector="comercio"]      { --pc: var(--eco-comercio); }
.eco-card[data-sector="manufactura"]   { --pc: var(--eco-mfg); }
.eco-card[data-sector="servicios"]     { --pc: var(--eco-serv); }
.eco-card[data-sector="turismo"]       { --pc: var(--eco-turismo); }

.eco-card__logotype{
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.35;
  color: #222;
  word-break: break-word;
  margin-top: 6px;
}

/* Description — 2 lines max */
.eco-card__desc{
  font-size: 12.5px;
  line-height: 1.45;
  color: #555;
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.eco-card__footer{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 14px;
  padding-top: 0;
  border-top: none;
}

.eco-card__link{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--pc, #3dc43d);
  text-decoration: none;
  background: rgba(0,0,0,0.05);
  padding: 4px 10px;
  border-radius: 999px;
  transition: background .2s, color .2s, transform .15s;
}

.eco-card__link:hover{
  background: var(--pc, #3dc43d);
  color: #fff;
  transform: translateY(-1px);
}

.eco-card.is-hidden{ display: none; }
.eco-card--batch2{ display: none; }

/* Empty state */
.eco-empty{
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 20px;
  color: #888;
  font-size: 14px;
  border-right: 1px solid #d5d2cb;
  border-bottom: 1px solid #d5d2cb;
  background: #f2f1ec;
}

/* ── Load more ── */

.eco-loadmore-wrap{
  display: flex;
  justify-content: center;
  padding: 32px 0 48px;
}
.eco-loadmore-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 36px;
  border: 2px solid #222;
  border-radius: 28px;
  background: transparent;
  color: #222;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  transition: background .2s, color .2s;
  position: relative;
  min-width: 220px;
  justify-content: center;
}
.eco-loadmore-btn:hover{ background: #222; color: #fff; }
.eco-loadmore-btn__spinner{
  display: none;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: eco-spin .7s linear infinite;
}
@keyframes eco-spin{ to{ transform: rotate(360deg); } }
.eco-loadmore-btn.is-loading .eco-loadmore-btn__label{ opacity: 0; }
.eco-loadmore-btn.is-loading .eco-loadmore-btn__spinner{ display: block; position: absolute; }

/* ── Responsive ── */
@media(max-width: 1100px){
  .eco-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media(max-width: 960px){
  .eco-hero__layout{ grid-template-columns: 160px 1fr 160px; gap: 24px; }
  .eco-hero__title{ font-size: clamp(36px, 6vw, 64px); }
}
@media(max-width: 760px){
  .eco-hero__layout{ grid-template-columns: 1fr; }
  .eco-hero__imgs{ display: none; }
  .eco-hero__stats{ flex-direction: column; border-radius: 12px; }
  .eco-stat{ border-right: none; border-bottom: 1px solid var(--eco-border); }
  .eco-stat:last-child{ border-bottom: none; }
  .eco-grid{ grid-template-columns: repeat(2, 1fr); }
  .eco-network{ padding: 36px 20px 24px; }
  .eco-catalog{ padding: 28px 20px 40px; }
  .eco-hero{ padding: 80px 24px 50px; }
}
@media(max-width: 600px){
  /* A 2 columnas, cada tarjeta queda ~<230px: las etiquetas de sector
     ("Incubación Digital 2025"), el nombre de la empresa y la
     descripción se recortaban contra el borde derecho. Se pasa a 1
     columna antes (600px en vez de 480px) para que quepan enteras. */
  .eco-grid{ grid-template-columns: 1fr; }
  .eco-hero__title{ letter-spacing: -1px; }
}

/* ============================================================
   DETALLE DE PROYECTO
   ============================================================ */
.proy-detail-banner-wrap {
  padding-top: 0;
  margin: 0;
  background: var(--cyan);
}
.proy-detail-banner-wrap--integral{ background: #14283f; }
.proy-detail-banner {
  position: relative;
  width: 100%;
  height: 480px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
}
.proy-detail-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.85) 100%);
  z-index: 1;
}
.proy-detail-banner__container {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;
  width: 100%;
}
.proy-detail-banner__content {
  position: relative;
  padding: 36px 0;
  color: #fff;
  width: 100%;
  max-width: 820px;
}
.proy-detail-banner__eyebrow {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}
.proy-detail-banner__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Banner de los proyecto-*.html de Ingeniería Integral: estos 4 proyectos
   no cuentan con fotografía de obra propia, solo planos técnicos (fondo
   blanco). En vez de forzar una foto ajena o un plano recortado y
   deslavado bajo el degradé oscuro, el banner usa una retícula tipo
   plano técnico sobre fondo oscuro — mismo acento cian y mismo sistema
   visual que el resto del sitio (Hidráulica, Institucional, etc.). */
.proy-detail-banner--integral{
  background-image:
    linear-gradient(rgba(var(--cyan-rgb), 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cyan-rgb), 0.1) 1px, transparent 1px),
    linear-gradient(135deg, #0c1a2c 0%, #14283f 55%, #1c3350 100%) !important;
  background-size: 32px 32px, 32px 32px, cover !important;
}
.proy-detail-banner--integral .proy-detail-banner__overlay{
  background: linear-gradient(180deg, rgba(9,19,34,0.25) 0%, rgba(9,19,34,0.55) 50%, rgba(9,19,34,0.92) 100%);
}
/* Proyectos que solo tienen planos: mismo banner que el resto (imagen de
   fondo + degradé), pero el plano se ajusta a la altura del banner en vez
   de estirarse a todo el ancho (con 'cover' un plano de ~800px quedaba
   ampliado ~2x y borroso). Los lados se rellenan con el blanco del papel. */
.proy-detail-banner--plano{
  background-size: auto 100% !important;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
}

.proy-detail-section {
  padding: 32px 0 44px;
  background: #fbfbfb;
}
@media(max-width:760px){
  .proy-detail-section{ padding: 24px 0 32px; }
}

.proy-detail-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}

.proy-detail-content {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Bloques de sección */
.proy-detail-block__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-left: none;
  padding-left: 0;
}
.proy-detail-block__desc {
  font-size: 15.5px;
  color: var(--gray-700);
  line-height: 1.8;
}

/* Grid de Logros e Impactos (Minimalista y elegante con números gigantes) */
.proy-impact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 30px;
}
@media(max-width: 580px) {
  .proy-impact-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
.proy-impact-card {
  background: transparent;
  border: none;
  border-left: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.25s ease;
}
.proy-impact-card:hover {
  transform: translateY(-2px);
}
.proy-impact-card__num {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.8vw, 54px);
  font-weight: 700;
  color: var(--cyan);
  line-height: 1;
  margin-bottom: 0;
  letter-spacing: -1px;
}
.proy-impact-card__label {
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.5;
  font-weight: 400;
}

/* Lista de Actividades Desarrolladas */
.proy-activity-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 20px;
}
.proy-activity-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: transparent;
  border: none !important;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  transition: transform 0.2s ease;
}
.proy-activity-card:hover {
  transform: translateX(4px);
  box-shadow: none;
}
.proy-activity-card__num {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--green);
  background: rgba(61, 196, 61, 0.12);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.proy-activity-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.proy-activity-card__title {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--navy-900);
  margin: 0 0 2px 0;
  line-height: 1.35;
}
.proy-activity-card__desc {
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.6;
  margin: 0;
}

/* Carrusel de Imágenes */
.proy-gallery-carousel {
  position: relative;
  width: 100%;
}
.proy-carousel-viewport {
  overflow: hidden;
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.proy-carousel-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: 100%;
}
.proy-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
}
.proy-gallery-card {
  position: relative;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #f2f5f8 0%, #e6ecf1 100%);
  border: 1.5px dashed rgba(var(--cyan-rgb), 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  overflow: hidden;
  cursor: default;
}
.proy-gallery-card svg {
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  stroke-width: 1.2;
  opacity: 0.7;
}
.proy-gallery-card span {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Controles del Carrusel */
.proy-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 16px;
}
.proy-carousel-ctrl {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--cyan);
  color: var(--cyan);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.proy-carousel-ctrl:hover {
  background: var(--cyan);
  color: #fff;
}
.proy-carousel-dots {
  display: flex;
  gap: 8px;
}
.proy-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-300);
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  padding: 0;
}
.proy-carousel-dot.is-active {
  background: var(--cyan);
  transform: scale(1.2);
}

/* Sidebar */
.proy-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: sticky;
  top: 100px;
}

/* Tarjeta Ficha Técnica (Sin esquinas celestes decorativas) */
.proy-sidebar-card {
  background: #fff;
  border: 1.5px solid rgba(var(--cyan-rgb), 0.18);
  border-radius: 4px;
  padding: 30px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.02);
  position: relative;
}
.proy-sidebar-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 22px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--gray-100);
  padding-bottom: 12px;
}

.tech-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tech-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tech-item__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.tech-item__val {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--black);
  line-height: 1.4;
}

/* Slot para Logo del Cliente y Aliados (Sin recuadro ni etiqueta "Cliente") */
.client-logo-wrap {
  margin: 10px 0 14px;
  padding: 4px 0 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.client-logo-wrap__label {
  display: none !important;
}
.client-logo-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 18px;
  width: 100%;
  padding-top: 4px;
}
.client-logo-img {
  max-width: 170px;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.04));
  transition: transform 0.2s ease;
}
.client-logo-img--lg {
  max-width: 240px;
  max-height: 82px;
}
.client-logo-img:hover {
  transform: scale(1.03);
}

@media(max-width: 880px) {
  .proy-detail-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .proy-detail-sidebar {
    position: static;
  }
  .proy-detail-banner {
    height: 340px;
  }
  .proy-detail-banner__content {
    padding: 30px;
  }
}

/* ============================================================
   GESTIÓN EMPRESARIAL — PORTAL
   ============================================================ */

/* Branding Verde de Marca */
.page-portal--green {
  --eco-green: var(--green);
  --portal-color: var(--green);
}

.page-portal--green .section-title {
  color: var(--eco-green);
}
.page-portal--green .section-title .red {
  color: var(--eco-green);
}

/* Botón principal en verde */
.page-portal--green .btn-red {
  background: var(--eco-green);
}
.page-portal--green .btn-red:hover {
  filter: brightness(0.9);
}

/* Sección Equipo en verde con mayor franja inferior */
.page-portal--green .pequipo {
  background: linear-gradient(to bottom, #fff 180px, var(--eco-green) 180px);
  padding: 44px 0 64px;
}
.page-portal--green .pequipo__title {
  color: var(--eco-green);
}
.page-portal--green .pequipo .equipo-controls .ctrl {
  border-color: var(--eco-green);
  color: var(--eco-green);
}
.page-portal--green .pequipo .equipo-controls .ctrl:hover {
  background: var(--eco-green);
  color: #fff;
}

/* Header verde institucional (mismo esquema que .site-header--cyan) */
.site-header--green {
  background: var(--eco-green, #3dc43d);
  overflow: visible;
}
.site-header--green .header-inner {
  position: relative;
  align-items: center;
  padding-top: 7px;
  padding-bottom: 7px;
  min-height: 84px;
}
.site-header--green .logo {
  position: absolute;
  left: var(--gutter);
  top: 0;
  transform: none;
  margin-top: 0;
  z-index: 2;
}
.site-header--green .portal-nav-group {
  margin-left: 120px;
}
.site-header--green .nav-pill {
  background: #fff;
  border-color: rgba(0, 189, 61, 0.25);
  box-shadow: 0 1px 6px rgba(0, 189, 61, 0.08);
}
.site-header--green .main-nav a {
  color: var(--gray-700);
}
.site-header--green .main-nav a:hover {
  color: var(--black);
}
.site-header--green .main-nav a.active {
  color: var(--eco-green);
  background: rgba(0, 189, 61, 0.15);
  border-radius: 999px;
  padding: 5px 14px;
  margin: -5px -14px;
}
/* El menú de Gestión tiene 7 opciones (las 3 líneas de servicio + Proyectos,
   Ecosistema y Blog): entre el ancho de escritorio y el de hamburguesa (980px)
   no cabía y se salía del header. Aquí se compacta letra y espacios. */
@media (min-width: 981px) and (max-width: 1300px) {
  .site-header--green .nav-pill { padding: 6px 14px; }
  .site-header--green .main-nav ul { gap: 12px; }
  .site-header--green .main-nav a { font-size: 11.5px; }
  .site-header--green .main-nav a.active { padding: 5px 10px; margin: -5px -10px; }
}
@media (min-width: 981px) and (max-width: 1080px) {
  .site-header--green .nav-pill { padding: 6px 10px; }
  .site-header--green .main-nav ul { gap: 8px; }
  .site-header--green .main-nav a { font-size: 10.5px; }
  .site-header--green .main-nav a.active { padding: 5px 7px; margin: -5px -7px; }
}
.site-header--green .lang-btn {
  background: #fff;
  color: var(--eco-green);
}
.site-header--green .lang-btn:hover {
  background: rgba(255, 255, 255, 0.88);
}
.site-header--green .hamburger span {
  background: #fff;
}

/* Redes sociales en rojo de marca */
.site-header--green .social-rail a {
  background: var(--red);
}
.site-header--green .social-rail a:hover {
  filter: brightness(0.9);
}

/* Miga de pan en blanco brillante */
.site-header--green .breadcrumb-inner .bc-item,
.site-header--green .breadcrumb-inner .bc-sep,
.site-header--green .breadcrumb-inner .bc-home {
  color: #ffffff;
}
.site-header--green .breadcrumb-inner a.bc-home:hover,
.site-header--green .breadcrumb-inner a.bc-item:hover {
  color: rgba(255, 255, 255, 0.82);
}

/* Botón verde outline */
.btn-green-outline {
  display: inline-block;
  border: 2px solid var(--eco-green, var(--green));
  color: var(--eco-green, var(--green));
  font-weight: 600;
  font-size: 14px;
  padding: 12px 30px;
  border-radius: 28px;
  letter-spacing: .2px;
  transition: background .2s, color .2s;
  cursor: pointer;
  background: transparent;
}
.btn-green-outline:hover {
  background: var(--eco-green, var(--green));
  color: #fff;
}

/* Adaptación del layout de proyectos para Portal Gestión Verde */
.page-portal--green .proy-section {
  background-image:
    linear-gradient(rgba(0,189,61,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,189,61,0.12) 1px, transparent 1px),
    linear-gradient(rgba(0,189,61,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,189,61,0.04) 1px, transparent 1px);
}
.page-portal--green .proy-pre,
.page-portal--green .proy-title,
.page-portal--green .proy-dd-label,
.page-portal--green .proy-count strong {
  color: var(--eco-green);
}
.page-portal--green .proy-dd-btn:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.page-portal--green .proy-dropdown.is-open .proy-dd-btn {
  border-color: #94a3b8;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.page-portal--green .proy-dd-opt:hover {
  background: rgba(0,189,61,0.08);
  color: var(--eco-green);
}
.page-portal--green .proy-dd-opt.is-selected {
  background: rgba(0,189,61,0.12);
  color: var(--eco-green);
}
.page-portal--green .proy-card {
  border-color: rgba(0,189,61,0.2);
}
.page-portal--green .proy-impact-card__num {
  color: var(--eco-green);
}
.page-portal--green .proy-carousel-dot.is-active {
  background: var(--eco-green);
}
.page-portal--green .proy-carousel-ctrl:hover {
  border-color: var(--eco-green);
  color: var(--eco-green);
}




/* Hero y Mapa layout */
.hero-gestion {
  position: relative;
  padding: 88px 0 60px;
  background: radial-gradient(circle, rgba(242, 244, 248, 0.78) 0%, rgba(235, 237, 241, 0.96) 100%), url('images/fondocuadros.webp') center/cover no-repeat;
}
@media(max-width: 980px) {
  .hero-gestion { padding-top: 44px; }
}
.hero-gestion .container {
  max-width: 1550px;
  width: 94%;
}
.hero-gestion-grid {
  display: grid;
  grid-template-columns: 1.38fr 0.62fr;
  gap: 30px;
  align-items: start;
}
@media(max-width: 980px) {
  .hero-gestion-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.map-col {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.map-svg-el {
  /* El viewBox mide 1040x1390 (ancho/alto = 0.7482): se limita el ancho con
     esa misma proporción para que, al topar con max-height, la caja del SVG
     encoja también de ancho (si no, el contenido queda centrado dentro de
     una caja más ancha de lo que ocupa, con aire invisible a los lados) */
  width: min(100%, calc(78vh * 0.7482));
  height: auto;
  max-height: 78vh;
  display: block;
}

/* Map specific styling */
.map-svg-el,
.map-svg-el g,
.map-svg-el path,
.map-svg-el polygon {
  filter: none !important; /* Turn off all SVG-internal drop shadow filters */
}

.map-svg-el path,
.map-svg-el polygon {
  fill: #ffffff !important;
  stroke: var(--eco-green) !important;
  stroke-width: 1.2px !important;
  transition: fill 0.35s ease, stroke-width 0.35s ease, filter 0.35s ease;
}

/* El translateX/scale que había aquí compensaba que el mapa ocupaba solo
   ~55% del ancho del viewBox original (el resto era la textura decorativa
   de fondo) — por eso se veía chico y desplazado, y solo en desktop
   porque el ajuste nunca se adaptó a mobile. Se recortó el viewBox del
   SVG para que el mapa llene su caja a cualquier ancho, sin necesitar
   este hack por breakpoint. */

/* Protect and style Text Layer paths (department names) */
.map-svg-el g[data-name="NOMBRES DEPARTAMENTOS"] path,
.map-svg-el g[data-name="Text"] path {
  fill: #161c21 !important;
  stroke: none !important;
  pointer-events: none !important;
}

/* Protect and style Texture Layer paths */
.map-svg-el g[data-name="TEXTURA"],
.map-svg-el g[data-name="TEXTURA"] *,
.map-svg-el g[data-name="NOMBRES DEPARTAMENTOS"],
.map-svg-el g[data-name="NOMBRES DEPARTAMENTOS"] *,
.map-svg-el g[data-name="Text"],
.map-svg-el g[data-name="Text"] * {
  pointer-events: none !important;
}
.map-svg-el g[data-name="TEXTURA"] path {
  fill: none !important;
  stroke: rgba(91, 227, 91, 0.25) !important; /* Subtle brand green texture */
  stroke-width: 0.5px !important;
  pointer-events: none !important;
}

/* Ensure coordinate circles have no default path styling */
.map-svg-el circle {
  stroke: none !important;
}

/* Active interactive departments hover/click states for all departments */
.map-svg-el [data-name] {
  pointer-events: auto !important;
  cursor: pointer !important;
}
.map-svg-el [data-name] * {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.map-svg-el [data-name]:hover path,
.map-svg-el [data-name]:hover polygon,
.map-svg-el path[data-name]:hover,
.map-svg-el polygon[data-name]:hover {
  fill: rgba(0, 189, 61, 0.18) !important;
  stroke-width: 2.2px !important;
}

.map-svg-el [data-name].is-active path,
.map-svg-el [data-name].is-active polygon,
.map-svg-el path[data-name].is-active,
.map-svg-el polygon[data-name].is-active {
  fill: var(--eco-green) !important;
  stroke: var(--eco-green) !important;
}

/* Los puntos del mapa son decorativos: no deben tapar el clic de los departamentos
   (antes el punto de Cauca bloqueaba el clic en el centro del departamento) */
.map-svg-el circle,
.map-svg-el [data-name] circle {
  pointer-events: none !important;
}

/* Dots on active departments */
.map-svg-el circle {
  fill: var(--eco-green) !important;
  opacity: 0.95;
  transition: fill 0.3s ease;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes map-pulse {
  0% { r: 12px; opacity: 0.8; }
  50% { r: 20px; opacity: 0.3; }
  100% { r: 24px; opacity: 0; }
}

.map-svg-el circle[r="16.3"] {
  animation: map-pulse 2.2s infinite ease-in-out;
}

/* Active department's dot turns white */
.map-svg-el g.is-active circle {
  fill: #ffffff !important;
  opacity: 1;
}

/* ── Territorios sin intervención: estado por defecto ──
   Gris en lugar del verde de marca, para que se lea de inmediato
   que ahí todavía no hay impacto. */
.map-svg-el [data-name].is-active.is-sin-impacto path,
.map-svg-el [data-name].is-active.is-sin-impacto polygon {
  fill: #b9bfc4 !important;
  stroke: #b9bfc4 !important;
}
/* Oculta las cifras: no hay datos que mostrar */
.dept-slider-container.is-sin-impacto .dept-card-stats {
  display: none;
}
/* La imagen queda desaturada para no sugerir un proyecto en la zona */
.dept-slider-container.is-sin-impacto .dept-slider-img {
  filter: grayscale(1);
  opacity: 0.55;
}
.dept-slider-container.is-sin-impacto .dept-slider-desc {
  font-style: italic;
  color: #7a8288;
}

/* Hero textos y header info */
.hero-text-col {
  padding-left: 20px;
}
@media(max-width: 980px) {
  .hero-text-col { padding-left: 0; }
}

.hero-heading-block {
  margin-bottom: 36px;
}
.hero-kicker-num {
  font-family: var(--font-display);
  font-size: clamp(44px, 11vw, 76px);
  font-weight: 700;
  color: var(--eco-green);
  line-height: 1;
  letter-spacing: -2px;
}
.hero-gestion-title {
  font-family: var(--font-display);
  display: flex;
  flex-direction: column;
  line-height: 0.95;
  margin: 4px 0 12px;
}
.hero-gestion-title .title-solid {
  font-size: clamp(34px, 8.5vw, 58px);
  font-weight: 700;
  color: var(--eco-green);
  letter-spacing: -1px;
}
.hero-gestion-title .title-outline {
  font-size: clamp(34px, 8.5vw, 58px);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.8px var(--eco-green);
  letter-spacing: -1px;
}
.hero-gestion-desc {
  font-size: 16px;
  line-height: 1.55;
  color: var(--black);
  max-width: 460px;
  font-weight: 400;
}

/* Nombre "GESTIÓN EMPRESARIAL" sobre el +2800 */
.hero-gestion-name {
  font-family: var(--font-display);
  display: flex;
  flex-direction: column;
  line-height: 0.98;
  margin-bottom: 10px;
}
.hero-gestion-name .title-solid {
  font-size: clamp(20px, 4vw, 30px);
  font-weight: 700;
  color: var(--eco-green);
  letter-spacing: -0.5px;
}
.hero-gestion-name .title-outline {
  font-size: clamp(20px, 4vw, 30px);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--eco-green);
  letter-spacing: -0.5px;
}
.hero-gestion-intro {
  max-width: 470px;
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.55;
  color: #3a3f47;
  font-weight: 400;
}
.hero-gestion-brochure {
  display: inline-block;
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 600;
  color: #3a3f47;
  text-decoration: none;
}
.hero-gestion-brochure .highlight {
  color: var(--eco-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s;
}
.hero-gestion-brochure:hover .highlight { opacity: 0.75; }

/* ============================
   PROYECTOS DE GESTIÓN — carrusel en gestion-empresarial.html
   ============================ */
.gproy {
  padding: 64px 0 8px;
  background: #f4f6f5;
}
.gproy__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 30px;
}
.gproy .proy-pre {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eco-green);
  margin-bottom: 6px;
}
.gproy__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--eco-green);
  margin: 0;
}
.gproy__nav { display: flex; gap: 10px; flex-shrink: 0; }
.gproy__ctrl {
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(0, 189, 61, 0.4);
  border-radius: 50%;
  background: #fff;
  color: var(--eco-green);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}
.gproy__ctrl:hover { background: var(--eco-green); color: #fff; border-color: var(--eco-green); }
.gproy__ctrl:disabled { opacity: 0.3; cursor: default; }

.gproy__track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gproy__track::-webkit-scrollbar { display: none; }
.gproy__track .proy-card {
  flex: 0 0 clamp(268px, 31%, 340px);
  scroll-snap-align: start;
}

.gproy__foot { margin-top: 32px; text-align: center; }

/* Acentos verdes para las tarjetas dentro del carrusel */
.gproy .proy-card { border-color: rgba(0, 189, 61, 0.22); }
.gproy .proy-card:hover {
  border-color: rgba(0, 189, 61, 0.55);
  box-shadow: 0 8px 28px rgba(0, 189, 61, 0.14);
}
.gproy .proy-card__img-wrap::after {
  background-image:
    linear-gradient(rgba(0, 189, 61, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 189, 61, 0.12) 1px, transparent 1px);
}
.gproy .proy-card__img-wrap::before {
  background: linear-gradient(160deg, transparent 40%, rgba(0, 189, 61, 0.28) 100%);
}

@media(max-width: 760px) {
  .gproy { padding: 52px 0 60px; }
  .gproy__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .gproy__track .proy-card { flex: 0 0 80%; }
}

/* Sidebar Details Slider (under hero headings) */
.dept-slider-container {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 20px 24px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.03);
  max-width: 440px;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.slider-header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 4px;
}

.slider-header-nav .dept-slider-overlay-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--eco-green);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.slider-arrow {
  background: none;
  border: none;
  color: var(--eco-green);
  font-size: 32px;
  font-weight: 300;
  cursor: pointer;
  transition: transform 0.2s, color 0.2s;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  line-height: 1;
}
.slider-arrow:hover {
  transform: scale(1.2);
  color: #2ea32e;
}

.dept-slider-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.dept-slider-media {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  /* Modern clean diagonal cut */
  clip-path: polygon(0 0, 100% 0, 100% 88%, 90% 100%, 0 100%);
}
.dept-slider-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Crédito de la foto (licencia CC de Wikimedia Commons: autor + licencia) */
.dept-slider-credit {
  position: absolute;
  left: 8px;
  bottom: 6px;
  max-width: 75%;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.9);
  font-size: 9px;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dept-slider-credit:hover { color: #fff; text-decoration: underline; }
.dept-slider-credit:empty { display: none; }

.dept-card-stats {
  display: flex;
  gap: 10px;
}
.dept-stat-box {
  flex: 1;
  background: rgba(61, 196, 61, 0.08);
  border: 1px solid rgba(61, 196, 61, 0.2);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.dept-stat-num {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--eco-green);
  line-height: 1.1;
}
.dept-stat-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #333;
  margin-top: 3px;
}

.dept-slider-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

/* En pantallas anchas pero bajas, el mapa ya se ajusta al alto (max-height
   en .map-svg-el) pero esta columna de texto + tarjeta era más alta que el
   mapa y se cortaba abajo. Se recortan rellenos y tamaños de letra para
   que quepa completa junto al mapa. Solo aplica con el grid de 2 columnas
   (min-width:981px); en mobile, apilado, no hace falta. */
@media (max-height: 960px) and (min-width: 981px) {
  .hero-gestion { padding: 32px 0 24px; }
  .hero-gestion-name { margin-bottom: 4px; }
  .hero-gestion-name .title-solid,
  .hero-gestion-name .title-outline { font-size: clamp(18px, 3vw, 24px); }
  .hero-gestion-intro { margin-bottom: 6px; }
  .hero-gestion-brochure { margin-bottom: 10px; }
  .hero-kicker-num { font-size: clamp(36px, 7vw, 52px); }
  .hero-gestion-title { margin: 2px 0 6px; }
  .hero-gestion-title .title-solid,
  .hero-gestion-title .title-outline { font-size: clamp(26px, 5.5vw, 38px); }
  .dept-slider-container { margin-top: 8px; padding: 14px 20px; gap: 8px; }
  .dept-slider-content { gap: 8px; }
  .dept-slider-media { height: 85px; }
}
.dept-tematicas-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--eco-green);
}
.dept-slider-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gray-700);
  font-weight: 400;
}

/* Bottom Panel: TOP 5 regions card */
.bottom-regions-panel {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  width: 100%;
}
.bottom-regions-panel .top-regions-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 24px 40px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.03);
  max-width: 900px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 40px;
  align-items: center;
}
.bottom-regions-panel .top-regions-title {
  margin-bottom: 0;
  border-right: 1.5px dashed rgba(61,196,61,0.25);
  padding-right: 20px;
}
.bottom-regions-panel .top-regions-content {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 30px;
  align-items: center;
}
.bottom-regions-panel .top-regions-title .text-outline {
  font-size: 32px;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--eco-green);
  letter-spacing: 0.5px;
}
.bottom-regions-panel .top-regions-title .text-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--eco-green);
  letter-spacing: 1.2px;
  margin-top: 4px;
}
.bottom-regions-panel .top-regions-shapes {
  display: flex;
  gap: 20px;
}
.bottom-regions-panel .region-shape-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.bottom-regions-panel .region-svg {
  width: 58px;
  height: 58px;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(61,196,61,0.08));
  margin-bottom: 8px;
}
.bottom-regions-panel .region-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--gray-500);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bottom-regions-panel .top-regions-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 1.5px dashed rgba(61,196,61,0.25);
  padding-left: 20px;
}
.bottom-regions-panel .stat-percentage {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  color: var(--eco-green);
  line-height: 1;
}

@media(max-width: 860px) {
  .bottom-regions-panel .top-regions-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
  }
  .bottom-regions-panel .top-regions-title {
    border-right: none;
    border-bottom: 1.5px dashed rgba(61,196,61,0.25);
    padding-right: 0;
    padding-bottom: 15px;
  }
}


/* Resumen de Impacto */
.impact-summary {
  background: #f7f9fb;
  padding: 48px 0;
  border-top: 1px solid rgba(0,0,0,0.03);
  border-bottom: 1px solid rgba(0,0,0,0.03);
}
/* ====== INTEGRATED RESUMEN DE IMPACTO & SERVICIOS ====== */

.impact-and-services-section {
  position: relative;
  background: #ffffff;
  padding: 40px 0 56px;
}
@media(max-width:760px){
  .impact-summary{ padding: 32px 0; }
  .impact-and-services-section{ padding: 28px 0 36px; }
}

.impact-summary-container {
  position: relative;
  z-index: 10;
  text-align: center;
  margin-bottom: -70px; /* Pull the dark card down so it overlaps the banner! */
}

.impact-summary-container .section-title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--eco-green);
  letter-spacing: 1px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.impact-summary-subtitle {
  font-size: 15px;
  color: var(--gray-500);
  margin-bottom: 24px;
}

/* Dark impact stats card */
.impact-dark-card {
  background: #0f1011;
  border-radius: 24px;
  padding: 36px 32px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
  max-width: 1200px;
  margin: 0 auto;
}

.impact-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.impact-stat-item .stat-num {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  color: var(--eco-green);
  line-height: 1;
  margin-bottom: 8px;
}

.trend-arrow-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--eco-green);
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
  vertical-align: middle;
}

.trend-arrow-circle svg {
  display: block;
}

.impact-stat-item .stat-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0;
  letter-spacing: 0.3px;
  line-height: 1.35;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.impact-stat-item .stat-divider {
  display: none;
}

.impact-stat-item .stat-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.2;
}

.impact-stat-item .stat-label .label-white {
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.impact-stat-item .stat-label .label-green {
  font-size: 11px;
  font-weight: 700;
  color: var(--eco-green);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Services Banner Shape and Content */
.services-banner-shape-wrap {
  position: relative;
  background: transparent;
  padding: 0;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 86% 100%, 0 100%);
  width: 100%;
}

.services-banner-shape-content {
  background: url('images/ge_p2_2.webp') center/cover no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 86% 100%, 0 100%);
  width: 100%;
  position: relative;
  padding: 220px 0 160px; /* Increased padding to make container longer */
  min-height: 580px;
}

.services-banner-shape-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.82) 100%);
  z-index: 1;
}

.services-banner-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
}

.services-banner-text-col {
  grid-column: 2; /* Positioned on the right side */
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 50px; /* Shift text slightly further down */
}

.services-banner-text-col .banner-kicker {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}

.services-banner-text-col .banner-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 7vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.services-banner-text-col .banner-title .title-sub {
  color: #ffffff;
}

.services-banner-text-col .banner-title .title-main {
  color: var(--eco-green);
}

.services-banner-text-col .banner-desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 24px;
  font-weight: 400;
}

.services-banner-text-col .banner-brochure-link {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
}

.services-banner-text-col .banner-brochure-link .highlight {
  color: var(--eco-green);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s;
}

.services-banner-text-col .banner-brochure-link:hover .highlight {
  color: #2ea32e;
}

/* Al entrar por el menú (#servicios) el encabezado fijo y el logo de la
   cabecera (tarjeta blanca hasta ~180px) tapaban el inicio del bloque de
   Táctica: se deja ese espacio al llegar al ancla */
#servicios{ scroll-margin-top: 200px; }

.services-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-top: 56px;
  align-items: flex-start;
}

/* Tactica (Left column) */
.tactica-info-col {
  padding-right: 30px;
}

.tactica-logo-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tactica-logo-header {
  display: flex;
  align-items: center;
}

.tactica-logo-text {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--eco-green);
  letter-spacing: 0.5px;
}

.tactica-subtitle {
  font-size: 17px;
  font-weight: 600;
  color: var(--gray-600);
  line-height: 1.4;
}

.tactica-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gray-700);
}

.btn-green-fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--eco-green);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 30px;
  text-decoration: none;
  width: fit-content;
  box-shadow: 0 4px 15px rgba(91, 227, 91, 0.2);
  transition: transform 0.25s, filter 0.25s, box-shadow 0.25s;
}

.btn-green-fill:hover {
  transform: translateY(-2px);
  filter: brightness(0.9);
  box-shadow: 0 6px 20px rgba(91, 227, 91, 0.3);
}

.tactica-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-green-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--eco-green);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 26px;
  border: 2px solid var(--eco-green);
  border-radius: 30px;
  text-decoration: none;
  width: fit-content;
  transition: transform 0.25s, background 0.25s, color 0.25s;
}

.btn-green-outline:hover {
  transform: translateY(-2px);
  background: var(--eco-green);
  color: #ffffff;
}

/* ============================
   CTA WHATSAPP (por página)
   ============================ */
.cta-wa{
  --cta-accent: var(--red);
  --cta-tint: #faf4f4;
  background: var(--cta-tint);
  padding: 36px 0 40px;
  text-align: center;
}
@media(max-width:760px){
  .cta-wa{ padding: 28px 0 32px; }
}
.page-portal .cta-wa{ --cta-accent: var(--cyan); --cta-tint: #f2f8fb; }
.page-portal--green .cta-wa{ --cta-accent: var(--green); --cta-tint: #f2f8f4; }
.page-ecosistema .cta-wa{ --cta-accent: var(--green); --cta-tint: #f2f8f4; }
.page-hidraulica-eco .cta-wa{ --cta-accent: var(--cyan); --cta-tint: #f2f8fb; }

.cta-wa__title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 2.4vw, 27px);
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: #1a1e26;
  margin-bottom: 26px;
  text-wrap: balance;
}
.cta-wa__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--cta-accent);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 30px;
  border-radius: 32px;
  text-decoration: none;
  transition: transform 0.2s, filter 0.2s;
}
.cta-wa__btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}
.cta-wa__btn svg{ width: 19px; height: 19px; fill: currentColor; flex-shrink: 0; }

/* CTA de texto, a mitad de página (no invasivo) */
.cta-inline{
  max-width: var(--max);
  margin: 0 auto;
  padding: 36px var(--gutter);
  text-align: center;
}
@media(max-width:760px){
  .cta-inline{ padding: 28px var(--gutter); }
}
.cta-inline a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: clamp(14px, 1.5vw, 16px);
  color: #6b7280;
  transition: color 0.2s, gap 0.2s;
}
.cta-inline a:hover{ color: var(--red); gap: 12px; }
.cta-inline__arrow{ color: var(--red); font-size: 1.05em; line-height: 1; }
.page-portal .cta-inline a:hover,
.page-portal .cta-inline__arrow{ color: var(--cyan); }
.page-portal--green .cta-inline a:hover,
.page-portal--green .cta-inline__arrow{ color: var(--green); }

/* Timeline (Right column) */
.services-timeline-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-left: 20px;
}

.timeline-line {
  position: absolute;
  left: 39px; /* Centered with markers */
  top: 10px;
  bottom: 10px;
  width: 1.5px;
  background: var(--gray-300);
  z-index: 1;
}

.timeline-item {
  position: relative;
  display: flex;
  gap: 24px;
  z-index: 2;
}

.timeline-marker {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--eco-green);
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.timeline-marker svg {
  fill: currentColor;
}

.timeline-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
}

.timeline-item-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
}

.timeline-item-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-700);
}

/* Responsive adjust */
@media(max-width: 980px) {
  .impact-dark-card {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 24px;
    padding: 30px 20px;
  }
  
  .services-banner-grid {
    grid-template-columns: 1fr;
  }
  
  .services-banner-text-col {
    grid-column: 1;
    padding: 40px 20px;
  }
  
  .services-banner-shape-content {
    padding: 100px 0 60px;
  }
  
  .services-details-grid {
    grid-template-columns: 1fr;
    gap: 50px;
    margin-top: 50px;
  }
  
  .tactica-info-col {
    padding-right: 0;
  }
}

/* Marketplace Banner */
.marketplace-banner {
  background: linear-gradient(rgba(10,10,10,0.78), rgba(10,10,10,0.78)), url('images/blog_linkedin_1.jpg') center/cover no-repeat;
  padding: 64px 0;
}
@media(max-width:760px){
  .marketplace-banner{ padding: 44px 0; }
}
.marketplace-banner {
  text-align: center;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.marketplace-kicker {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--eco-green);
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.marketplace-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 12px;
}
.marketplace-desc {
  font-size: 15px;
  color: rgba(255,255,255,0.75);
  max-width: 520px;
  margin: 0 auto 30px;
  line-height: 1.6;
}
.btn-green-outline {
  display: inline-block;
  border: 2px solid var(--eco-green);
  color: var(--eco-green);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 30px;
  border-radius: 28px;
  letter-spacing: .2px;
  transition: background .2s, color .2s, transform .2s;
}
.btn-green-outline:hover {
  background: var(--eco-green);
  color: #fff;
  transform: translateY(-1px);
}

/* Suscríbete / Newsletter */
.newsletter-gestion {
  background: #fff;
  padding: 48px 0;
  border-top: 1px solid rgba(0,0,0,0.04);
}
@media(max-width:760px){
  .newsletter-gestion{ padding: 32px 0; }
}
.newsletter-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}
@media(max-width: 820px) {
  .newsletter-inner {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }
}

.newsletter-text .section-title {
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
}
.newsletter-text .muted {
  color: var(--eco-green);
  font-weight: 700;
}

.newsletter-form {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 480px;
}
@media(max-width: 480px) {
  .newsletter-form {
    flex-direction: column;
  }
}

.newsletter-form input {
  flex: 1;
  padding: 14px 20px;
  border-radius: 28px;
  border: 1.5px solid #e0e0e0;
  /* font-size < 16px hace que iOS Safari haga zoom automático al enfocar */
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s;
  background: #f7f9fb;
}
.newsletter-form input:focus {
  border-color: var(--eco-green);
}
.newsletter-form button {
  background: var(--eco-green);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 14px 28px;
  border-radius: 28px;
  transition: background 0.2s, transform 0.2s;
}
.newsletter-form button:hover {
  background: #2ea32e;
  transform: translateY(-1px);
}

/* ============================================================
   5T Ingenieros - Blog Unificado & Navegación Contextual
   ============================================================ */

/* Hero Blog con Textura Grid de Ingeniería (Cuadrícula 80px/16px) */
.blog-hero {
  background-color: #0b0d12;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  color: #fff;
  padding: 56px 0 40px;
  text-align: center;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.blog-hero__pre {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 12px;
}
.blog-hero__title {
  font-family: 'Circular Std', sans-serif;
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}
.blog-hero__desc {
  max-width: 680px;
  margin: 0 auto 36px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

/* Tabs de filtrado por Área */
.blog-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  padding: 8px;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
}
.blog-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 30px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.25s ease;
}
.blog-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.blog-tab.is-active {
  background: #fff;
  color: #0a0a0a;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.tab-dot--gestion { background: #3dc43d; } /* Verde Gestión */
.tab-dot--civil { background: #00c8e0; }   /* Azul/Cyan Civil */

/* Sección de Etiquetas por Temática (Pill Tags) */
.blog-tags-bar-section {
  padding: 24px 0;
  background: #ffffff;
  border-bottom: 1px solid #eaecf0;
}
.topic-tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.topic-tag-pill {
  background: #ffffff;
  border: 1.5px solid #d0d5dd;
  color: #344054;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.topic-tag-pill:hover {
  border-color: #98a2b3;
  color: #101828;
  background: #f9fafb;
}
.topic-tag-pill.is-active {
  background: #101828;
  border-color: #101828;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.15);
}

/* Sección de Post Destacado (Minimalista Hero Card) */
.blog-featured-section {
  padding: 36px 0 24px;
  background: #ffffff;
}
.featured-card-minimal {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  background: #fdfdfd;
}
@media (max-width: 900px) {
  .featured-card-minimal {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.featured-img-wrap {
  width: 100%;
  height: 380px;
  border-radius: 24px;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}
.featured-card-minimal:hover .featured-img-wrap {
  transform: scale(1.015);
}
.tag-badge-minimal {
  background: #f2f4f7;
  color: #344054;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 12px;
  letter-spacing: 0.2px;
}
.featured-title-minimal {
  font-family: 'Circular Std', sans-serif;
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 700;
  line-height: 1.2;
  color: #101828;
  margin-bottom: 16px;
}
.featured-title-minimal a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.featured-title-minimal a:hover {
  color: var(--red, #f2001d);
}
.featured-card-minimal--gestion:hover .featured-title-minimal a,
.featured-card-minimal--gestion .featured-title-minimal a:hover {
  color: #3dc43d !important;
}
.featured-card-minimal--civil:hover .featured-title-minimal a,
.featured-card-minimal--civil .featured-title-minimal a:hover {
  color: #00c8e0 !important;
}
.featured-excerpt-minimal {
  font-size: 16px;
  line-height: 1.6;
  color: #475467;
  margin-bottom: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-read-more-pill {
  display: inline-flex;
  align-items: center;
  padding: 12px 26px;
  background: #101828;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  border-radius: 24px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-read-more-pill:hover {
  background: #1bb7d5;
  transform: translateY(-2px);
}

/* Sección de Grilla Principal de Artículos Minimalista */
.blog-main-section {
  padding: 24px 0 44px;
  background: #ffffff;
}
@media(max-width:760px){
  .blog-main-section{ padding: 20px 0 32px; }
}
.section-header-minimal {
  margin-bottom: 32px;
}
.minimal-section-title {
  font-family: 'Circular Std', sans-serif;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  color: #101828;
  letter-spacing: -0.5px;
}

.blog-grid-minimal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 960px) {
  .blog-grid-minimal {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .blog-grid-minimal {
    grid-template-columns: 1fr;
  }
}

/* Card Minimalista (Inspirado en la imagen de referencia) */
.blog-card-minimal {
  display: flex;
  flex-direction: column;
}
.card-img-link {
  display: block;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 14px;
}
.card-img-minimal {
  width: 100%;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
  border-radius: 20px;
}
.blog-card-minimal:hover .card-img-minimal {
  transform: scale(1.03);
}
.card-body-minimal {
  display: flex;
  flex-direction: column;
}
.card-title-minimal {
  font-family: 'Circular Std', sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: #101828;
  margin: 6px 0 8px;
}
.card-title-minimal a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.blog-card-minimal:hover .card-title-minimal a {
  color: var(--red, #f2001d);
}
.blog-card-minimal--gestion:hover .card-title-minimal a {
  color: #3dc43d !important;
}
.blog-card-minimal--civil:hover .card-title-minimal a {
  color: #00c8e0 !important;
}
.card-excerpt-minimal {
  font-size: 14px;
  line-height: 1.55;
  color: #667085;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Botones y Badges Específicos por Área */
.btn-read-more-pill--gestion {
  background: #3dc43d;
  color: #ffffff;
}
.btn-read-more-pill--gestion:hover {
  background: #2ea32e;
  transform: translateY(-2px);
}

.btn-read-more-pill--civil {
  background: #00c8e0;
  color: #ffffff;
}
.btn-read-more-pill--civil:hover {
  background: #00a8bd;
  transform: translateY(-2px);
}

.tag-badge-minimal {
  background: #eaecf0;
  color: #344054;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 10px;
  letter-spacing: 0.2px;
}
.tag-badge-minimal--gestion,
.tag-badge-minimal--civil {
  background: #eaecf0;
  color: #344054;
}

/* Badges y Temas */
.badge--gestion { background: #3dc43d; } /* Verde Gestión */
.badge--civil { background: #00c8e0; }   /* Azul/Cyan Civil */

/* Detalle del Artículo (blog-post.html) */
.page-blog-post {
  background: #fdfdfd;
}
.post-detail-wrapper {
  padding: 24px 0 44px;
}
@media(max-width:760px){
  .post-detail-wrapper{ padding: 20px 0 32px; }
}
.post-detail-inner {
  max-width: 820px;
  margin: 0 auto;
}
.back-to-blog-btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  text-decoration: none;
  margin-bottom: 30px;
  transition: color 0.2s;
}
.back-to-blog-btn:hover {
  color: var(--red, #f2001d);
}
.post-header {
  margin-bottom: 30px;
}
.post-meta-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.post-meta-top .blog-badge {
  position: static;
}
.post-meta-item {
  font-size: 13px;
  color: #777;
  font-weight: 500;
}
.post-title {
  font-family: 'Circular Std', sans-serif;
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  color: #111;
  margin-bottom: 24px;
}
.post-author-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: #f4f7fa;
  border-radius: 12px;
}
.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--dark, #1a1a1a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
}
.author-info strong {
  display: block;
  font-size: 15px;
  color: #111;
}
.author-info span {
  font-size: 13px;
  color: #666;
}

.post-hero-image {
  width: 100%;
  height: 420px;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  margin-bottom: 40px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.post-body-content {
  font-size: 17px;
  line-height: 1.75;
  color: #2c2c2c;
}
.post-body-content .lead {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  color: #111;
  margin-bottom: 28px;
}
.post-body-content h2 {
  font-size: 24px;
  font-weight: 700;
  color: #111;
  margin: 36px 0 16px;
}
.post-body-content p {
  margin-bottom: 20px;
}
.post-body-content blockquote {
  border-left: 4px solid var(--red, #f2001d);
  padding: 18px 26px;
  margin: 32px 0;
  background: #f9fbfd;
  font-style: italic;
  font-size: 18.5px;
  color: #1d2939;
  border-radius: 0 12px 12px 0;
}
.site-header--green ~ .post-detail-wrapper .post-body-content blockquote {
  border-left-color: #3dc43d;
  background: #f4fbf4;
}
.site-header--cyan ~ .post-detail-wrapper .post-body-content blockquote {
  border-left-color: #00c8e0;
  background: #f0fbfe;
}
.post-body-content ul {
  margin: 0 0 24px 20px;
}
.post-body-content li {
  margin-bottom: 10px;
}

/* Artículos Relacionados */
.blog-related-section {
  padding: 32px 0 44px;
  background: #f8fafc;
  border-top: 1px solid #e9edf2;
}
@media(max-width:760px){
  .blog-related-section{ padding: 24px 0 32px; }
}
.related-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 30px;
  color: #111;
}

/* Banner CTA Contextual */
.post-contextual-cta {
  padding: 24px 0 44px;
  background: #fff;
}
@media(max-width:760px){
  .post-contextual-cta{ padding: 20px 0 32px; }
}
.cta-banner-card {
  padding: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.cta-banner-card--gestion {
  background: linear-gradient(135deg, #0f361f 0%, #3dc43d 100%);
}
.cta-banner-card--civil {
  background: linear-gradient(135deg, #0a1f28 0%, #00c8e0 100%);
}
.cta-banner-text h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}
.cta-banner-text p {
  font-size: 15px;
  opacity: 0.9;
  max-width: 580px;
}

@media (max-width: 768px) {
  .cta-banner-card {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
  }
  .cta-banner-text p {
    margin: 0 auto;
  }
  .post-hero-image {
    height: 250px;
  }
}

/* ==========================================
   COMUNIDAD MODAL (ECOSISTEMA)
   ========================================== */
.comunidad-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.comunidad-modal.is-active {
  opacity: 1;
  visibility: visible;
}
.comunidad-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 25, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.comunidad-modal__content {
  position: relative;
  z-index: 1;
  background-color: #0b0d12;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 40px 32px;
  max-width: 490px;
  width: 100%;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85), 0 0 35px rgba(61, 196, 61, 0.15);
  transform: scale(0.92) translateY(12px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.comunidad-modal.is-active .comunidad-modal__content {
  transform: scale(1) translateY(0);
}
.comunidad-modal__close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 30px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease;
}
.comunidad-modal__close:hover {
  color: var(--eco-green, #3dc43d);
  transform: scale(1.15);
}
.comunidad-modal__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(61, 196, 61, 0.12);
  border: 1px solid rgba(61, 196, 61, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
}
.comunidad-modal__icon svg {
  stroke: var(--eco-green, #3dc43d);
}
.comunidad-modal__badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--eco-green, #3dc43d);
  background: rgba(61, 196, 61, 0.15);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.comunidad-modal__title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.3;
}
.comunidad-modal__desc {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.55;
  margin-bottom: 14px;
}
.comunidad-modal__subtext {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
  margin-bottom: 22px;
}
.comunidad-modal__socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.comunidad-modal__socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--red, #f2001d);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(227, 6, 19, 0.35);
}
.comunidad-modal__socials a:hover {
  transform: translateY(-3px) scale(1.08);
  background: var(--red-dark, #b8050f);
  box-shadow: 0 6px 16px rgba(227, 6, 19, 0.5);
}
.comunidad-modal__socials svg {
  width: 14px;
  height: 14px;
  fill: #ffffff;
}

/* ============================================================
   SUBPÁGINA INGENIERÍA HIDRÁULICA (ingenieria-hidraulica.html)
   ============================================================ */

/* Hero */
.hidro-page-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 140px 0 90px;
  background-color: #0b1528;
  background-image: radial-gradient(circle at 75% 30%, rgba(0, 200, 224, 0.18) 0%, transparent 65%),
                    linear-gradient(180deg, rgba(11, 21, 40, 0.78) 0%, rgba(7, 13, 26, 0.95) 100%),
                    url('images/hidro_pipes.webp');
  background-size: cover;
  background-position: center;
  color: #ffffff;
  overflow: hidden;
}

.hidro-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(0, 200, 224, 0.12), transparent 50%);
  pointer-events: none;
}

.hidro-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 920px;
}

.hidro-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(0, 200, 224, 0.14);
  border: 1px solid rgba(0, 200, 224, 0.4);
  color: #00c8e0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.hidro-hero__title {
  font-family: var(--font-display, 'IBM Plex Sans', sans-serif);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 700;
  line-height: 1.08;
  color: #ffffff;
  letter-spacing: -1px;
  margin-bottom: 24px;
}

.hidro-hero__title span {
  color: #00c8e0;
}

.hidro-hero__sub {
  font-size: clamp(1.1rem, 2vw, 1.32rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 780px;
  margin-bottom: 38px;
  font-weight: 300;
}

.hidro-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.btn-cyan-fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 30px;
  background: #00c8e0;
  color: #0b1528;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 200, 224, 0.35);
}

.btn-cyan-fill:hover {
  background: #25d4ea;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 200, 224, 0.5);
  color: #0b1528;
}

.btn-cyan-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 30px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 30px;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.btn-cyan-ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #00c8e0;
  color: #00c8e0;
  transform: translateY(-2px);
}

/* Sección 2: El agua es más que una red */
.hidro-emotional-sec {
  padding: 100px 0;
  background: #f8fafc;
  position: relative;
  overflow: hidden;
}

.hidro-emotional-sec::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(0, 200, 224, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hidro-emotional__grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 60px;
  align-items: center;
}

@media (max-width: 900px) {
  .hidro-emotional__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.hidro-emotional__pre {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #00a5b8;
  margin-bottom: 12px;
}

.hidro-emotional__title {
  font-family: var(--font-display, 'IBM Plex Sans', sans-serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  color: #0f172a;
}

.hidro-emotional__card {
  background: #ffffff;
  border-radius: 24px;
  padding: 44px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(0, 200, 224, 0.2);
  position: relative;
}

.hidro-emotional__card::before {
  content: '“';
  position: absolute;
  top: 10px;
  right: 30px;
  font-size: 130px;
  font-family: Georgia, serif;
  color: rgba(0, 200, 224, 0.12);
  line-height: 1;
  pointer-events: none;
}

.hidro-emotional__text p {
  font-size: 1.18rem;
  line-height: 1.7;
  color: #334155;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.hidro-emotional__text p:last-child {
  margin-bottom: 0;
}

.hidro-emotional__highlight {
  font-weight: 700;
  color: #0b1528;
  border-left: 4px solid #00c8e0;
  padding-left: 18px;
  margin-top: 24px;
}

/* Sección 3: Qué hacemos (Tarjetas grandes) */
.hidro-services-sec {
  padding: 100px 0;
  background: #ffffff;
}

.hidro-sec-header {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 60px;
}

.hidro-sec-header__tag {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #00a5b8;
  margin-bottom: 12px;
}

.hidro-sec-header__title {
  font-family: var(--font-display, 'IBM Plex Sans', sans-serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  color: #0f172a;
  line-height: 1.15;
  margin-bottom: 16px;
}

.hidro-sec-header__sub {
  font-size: 1.1rem;
  color: #64748b;
  line-height: 1.6;
}

.hidro-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 1024px) {
  .hidro-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .hidro-cards-grid {
    grid-template-columns: 1fr;
  }
}

.hidro-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.hidro-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 200, 224, 0.5);
  box-shadow: 0 20px 40px rgba(0, 200, 224, 0.14);
}

.hidro-card__media {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: #0f172a;
}

.hidro-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.hidro-card:hover .hidro-card__img {
  transform: scale(1.08);
}

.hidro-card__num {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(11, 21, 40, 0.78);
  backdrop-filter: blur(8px);
  color: #00c8e0;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(0, 200, 224, 0.35);
}

.hidro-card__body {
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.hidro-card__title {
  font-family: var(--font-display, 'IBM Plex Sans', sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
  line-height: 1.25;
}

.hidro-card__desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #64748b;
  margin-bottom: 20px;
  flex-grow: 1;
}

.hidro-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #f1f5f9;
  padding-top: 16px;
}

.hidro-card__features li {
  font-size: 0.88rem;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.hidro-card__features li::before {
  content: '✓';
  color: #00c8e0;
  font-weight: 700;
}

/* Sección 4: La ingeniería en cifras */
.hidro-stats-sec {
  padding: 90px 0;
  background: #070d1a;
  background-image: radial-gradient(circle at 50% 50%, rgba(0, 200, 224, 0.12) 0%, transparent 70%);
  color: #ffffff;
  position: relative;
}

.hidro-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

@media (max-width: 900px) {
  .hidro-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .hidro-stats-grid {
    grid-template-columns: 1fr;
  }
}

.hidro-stat-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 200, 224, 0.25);
  border-radius: 20px;
  padding: 36px 24px;
  text-align: center;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.hidro-stat-card:hover {
  border-color: #00c8e0;
  background: rgba(0, 200, 224, 0.06);
  transform: translateY(-4px);
}

.hidro-stat-card__num {
  font-family: var(--font-display, 'IBM Plex Sans', sans-serif);
  font-size: clamp(2.5rem, 4vw, 3.6rem);
  font-weight: 700;
  color: #00c8e0;
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -1px;
}

.hidro-stat-card__label {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  line-height: 1.4;
}

/* Sección Proyectos Relacionados */
.hidro-proyectos-sec {
  padding: 100px 0;
  background: #f8fafc;
}

/* Nota: el bloque "ECOSISTEMA STYLE" para Ingeniería Hidráulica /
   Infraestructura Institucional / Ingeniería Integral (dark theme,
   .page-hidraulica-eco / .page-institucional-eco / .page-integral-eco y
   sus hidro-* asociados) se eliminó: esas 3 páginas ahora usan el
   sistema de diseño claro "Portal Civil" (site-header--cyan, .psv-banner,
   .psv-catalog, .civil-editorial), igual que ingenieria-estructural.html. */

/* Galería de los proyecto-*.html de Ingeniería Integral: son planos
   técnicos (fondo blanco), se muestran completos con "contain" sobre
   el degradé claro que ya trae .proy-gallery-card, en vez de recortarlos
   con "cover" como las fotos de otras galerías. */
.proy-gallery-card--plano{
  background-size: contain !important;
  background-repeat: no-repeat !important;
  /* Sin posición explícita el plano quedaba pegado arriba a la izquierda,
     con todo el espacio libre a la derecha. */
  background-position: center !important;
  background-color: #eef2f6;
}

/* Línea de apoyo del CTA final (título → texto → botón) */
.cta-wa__text {
  max-width: 640px;
  margin: -8px auto 22px;
  font-size: 15px;
  line-height: 1.6;
  color: #5a6270;
}

/* ============================
   RESPONSIVE FIX — headers de portal en mobile
   Va al final del archivo a propósito: las reglas de color
   (.site-header--cyan / --green .portal-nav-group{margin-left:148px})
   están declaradas sin media query más arriba, así que un override con
   la misma especificidad solo gana si aparece después en la cascada.
   ============================ */
@media(max-width: 980px){
  .site-header--cyan .portal-nav-group,
  .site-header--green .portal-nav-group,
  .site-header--red .portal-nav-group{
    margin-left: 90px;
  }
  /* Con .main-nav oculto en mobile, ya no queda ningún elemento con
     flex:1 empujando lo que sigue — ENG y la hamburguesa quedaban pegados
     al logo en vez de ir al borde derecho del header. */
  .portal-nav-row .lang-btn{
    margin-left: auto;
    /* Píldora más compacta para que no domine la franja; el área táctil
       se conserva con el ::after invisible (~44px de alto). */
    position: relative;
    padding: 8px 14px;
  }
  .site-header--home .lang-btn{
    position: relative;
    padding: 8px 14px;
  }
  .site-header--home .lang-btn::after,
  .portal-nav-row .lang-btn::after{
    content: '';
    position: absolute;
    inset: -7px -4px;
  }
  .portal-nav-row{
    gap: 4px;
  }
  .portal-nav-row .hamburger{
    padding: 12px 10px;
  }
  .breadcrumb-inner{
    margin-top: 0;
  }
  .bc-item, .bc-sep{
    font-size: 12px;
  }
  .breadcrumb-inner{
    padding-left: 0;
    /* Sin flex-wrap, migas largas (3 niveles con títulos largos de
       proyecto) no bajaban de línea como grupo: cada .bc-item se
       encogía y el TEXTO de cada uno se partía en 2 líneas dentro de
       una sola fila apretada, ilegible. Al envolver, cada tramo de la
       miga baja completo a su propia línea si no cabe. */
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .bc-item, .bc-sep, .bc-home{
    white-space: nowrap;
  }
  /* El último tramo (título del proyecto) puede ser más ancho que la
     pantalla: con nowrap y sin min-width:0 estiraba todo el header y
     sacaba ENG y la hamburguesa del viewport (scroll horizontal). */
  .portal-nav-group,
  .breadcrumb-inner{
    min-width: 0;
  }
  .bc-item--active{
    white-space: normal;
    min-width: 0;
  }
  .eco-header__nav{
    margin-left: 90px;
  }
}

/* El texto de las hero-card y la bio de member-card solo se revelaban en
   :hover — en dispositivos táctiles ese contenido nunca se veía porque no
   hay hover real. Se muestra siempre en dispositivos sin hover (touch). */
@media (hover: none){
  .hero-reveal{
    max-height: none;
    opacity: 1;
  }
  /* Mostrar el párrafo completo siempre alargaba muchísimo la tarjeta en
     mobile. Se recorta con puntos suspensivos: queda un
     adelanto breve y el CTA "Entrar" siempre visible justo debajo. */
  .hero-card__content p{
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .member-reveal{
    max-height: none;
    opacity: 1;
  }
  .member-card .member-photo{ filter: brightness(.75); }
  .member-card .member-photo::after{
    background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.92) 100%);
  }
}
/* En mobile las puertas no pueden depender de `hover`: algunos navegadores
   táctiles lo reportan como disponible y dejaban ocultos la descripción y
   el CTA. El breakpoint garantiza que el texto sea visible en cualquier
   celular. Además, el contenido pasa a flujo normal para que la tarjeta
   pueda crecer y no lo recorte con overflow:hidden. */
@media (max-width: 760px){
  .hero-pre{
    margin-bottom: -0.15em;
  }
  .hero-card{ min-height: 0; }
  .hero-card__content{
    position: relative;
    top: auto; bottom: auto; left: auto;
    width: 100%;
    min-height: 72vw;
  }
  .hero-reveal{
    max-height: none;
    opacity: 1;
  }
  .hero-card__content p{
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* En las dos puertas del inicio se conserva el diseño original y se
     muestra la descripción completa. La tarjeta crece con el contenido. */
  .hero .hero-card__content p{
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    overflow: visible;
  }
}