/* ============================
   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:#ff0017;
  --red-dark:#cc0012;
  --black:#0a0a0a;
  --dark:#1a1a1a;
  --gray-900:#222;
  --gray-700:#3d3d3d;
  --gray-500:#7a7a7a;
  --gray-300:#c8c8c8;
  --gray-100:#efefef;
  --cyan:#1bb7d5;
  --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{
  display:flex;
  align-items:center;
  flex-shrink:0;
  margin-top: -40px;
}
.logo-img{
  height: 180px;
  width: auto;
}
.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{
  display:flex;
  align-items:center;
  gap: 24px;
  padding: 14px var(--gutter);
  min-height: 70px;
}
.main-nav{flex:1; display:flex; justify-content:center;}
.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{
    display:flex; flex-direction:column; gap:4px; padding:6px;
    margin-left:auto;
  }
  .hamburger span{ width:22px; height:2px; background:#222; }

  /* El logo mide 180px de alto en desktop (~124px de ancho) y el nav de
     portal/eco-header compensa ese ancho con margin-left/padding-left
     fijos. En mobile el logo se reduce y esa compensación baja con él,
     si no el nav se desborda o se monta encima del logo. */
  .logo-img{
    height: 56px;
  }
  .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;
  }
}

/* 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 60px;
  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: #cfcfcf;
  letter-spacing: 0.5px;
  line-height: 0.88;
  text-transform: none;
  font-stretch: 110%;
}

/* 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; }

.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: 80px 0 0;
  position: relative;
  overflow: hidden;
}
.historia-top{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: start;
  padding-bottom: 60px;
  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-photo{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  width: 100%;
  z-index: 2;
}
.historia-photo img:first-child{
  width: 100%;
  /* La foto real mide 1400×560 (2.5:1). El height:480px fijo original
     coincidía con esa proporción en desktop por eso no se recortaba;
     replicamos la misma proporción aquí para que no recorte gente de
     los costados a ningún ancho. */
  aspect-ratio: 5 / 2;
  height: auto;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: 4px;
}
.historia-boomerang{
  position: absolute;
  right: var(--gutter);
  top: 0;
  height: 100px;
  width: auto;
  z-index: 3;
}
@media(max-width: 880px){
  .historia-top{ grid-template-columns: 1fr; }
}

/* ============================
   CULTURA (DARK)
   ============================ */
.cultura{
  background: var(--dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect x='4' y='4' width='56' height='56' rx='10' ry='10' fill='none' stroke='rgba(255,255,255,0.055)' stroke-width='1'/%3E%3C/svg%3E");
  color:#dcdcdc;
  padding: 90px 0 100px;
  margin-top: -300px;
  padding-top: calc(300px + 90px);
  position: relative;
  z-index: 1;
}
.cultura-grid{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: start;
}
/* ---- Left column ---- */
.cultura-left{
  display: flex;
  flex-direction: column;
  padding-top: 80px;
}
.cultura-arrow{
  display: block;
  width: 52px;
  height: 24px;
  margin-bottom: 52px;
}
.cultura-arrow svg{ width:100%; height:100%; }
.cultura-main{
  color: #cfcfcf;
  font-size: clamp(13.5px, 1.15vw, 16px);
  line-height: 1.8;
  margin-bottom: 40px;
}
.cultura-sub-wrap{
  position: relative;
  padding-left: 32px;
  max-width: 380px;
  margin-left: auto;
}
.cultura-sub-wrap::before{
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 2px;
  height: 70%;
  background: var(--red);
  transform: rotate(20deg);
  transform-origin: top center;
}
.cultura-sub{
  font-size: 12.5px;
  color: #8a8a8a;
  line-height: 1.75;
  font-style: italic;
}
/* ---- Right column ---- */
.cultura-right{
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.cultura-quote{
  font-size: clamp(13.5px, 1.15vw, 16px);
  color: #e0e0e0;
  line-height: 1.65;
  text-align: right;
}
.cultura-photo-wrap{
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 52px), calc(100% - 52px) 100%, 0 100%);
}
.cultura-photo-wrap img{
  width: 100%;
  height: auto;
  border-radius: 3px;
  display: block;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.cultura-deco{
  position: absolute;
  bottom: -18px;
  right: -22px;
  width: 70px;
  height: 70px;
  display: block;
  background: linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--red) calc(50% - 1.5px), var(--red) calc(50% + 1.5px), transparent calc(50% + 1.5px));
  background-repeat: no-repeat;
}
@media(max-width:880px){
  .cultura-grid{ grid-template-columns:1fr; }
  .cultura-deco{ display:none; }
}

/* ============================
   EQUIPO
   ============================ */
.equipo{
  background: white;
  color:#fff;
  padding: 80px 0 60px;
  position: relative;
}
.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{
  position:absolute;
  right: var(--gutter);
  top: 30px;
  display:flex; gap: 8px;
}
.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;
}

/* ============================
   CARRERAS
   ============================ */
.carreras{
  background: #fff;
  padding: 0 0 60px;
  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: 80px 0 60px;
}
.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;
}
.sost-images{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.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; }
}
@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: 70px 0 90px;
  overflow: hidden;
}
.clientes-marquee{
  margin-top: 64px;
  overflow: hidden;
  width: 100%;
}
.clientes-marquee:hover .clientes-track{
  animation-play-state: paused;
}
.clientes-track{
  display: flex;
  align-items: center;
  width: max-content;
  animation: clientes-scroll 24s linear infinite;
}
.clientes-track img{
  height: 68px;
  width: auto;
  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{ height: 86px; }
@keyframes clientes-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}

/* ============================
   BLOG
   ============================ */
.blog{
  background:#fff;
  padding: 60px 0 80px;
}
.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: 64px 0 76px;
  position: relative;
  overflow: hidden;
}
.holding-inner{
  display:flex;
  flex-direction:column;
}
.holding-top{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items:start;
  gap: 40px;
  padding-bottom: 56px;
}
.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: 56px;
  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: clamp(120px, 16vw, 280px);
}

/* ── 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-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; }
}

/* ============================
   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: 32px;
  padding-bottom: 32px;
}
/* Logo absoluto: fuera del flujo, no infla la altura del header */
.site-header--cyan .logo{
  position: absolute;
  left: var(--gutter);
  top: 0;
  margin-top: 0;
  z-index: 2;
}
/* Compensar el espacio del logo (124px) + gap (24px) */
.site-header--cyan .portal-nav-group{
  margin-left: 148px;
}

/* 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(27,183,213,.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: 180px;
  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;
}
/* Capas de fondo para cross-fade */
.phero__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .9s ease;
}
.phero__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: 120px;
  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);
  font-size: clamp(36px, 5.2vw, 72px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -1px;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.phero__cyan{ display: block; color: var(--cyan); }
.phero__white{ display: block; color: #fff; }

/* Sub-nav bar */
.phero__subnav{
  position: relative;
  z-index: 2;
  background: transparent;
  padding: 16px 0 48px;
}
.phero__subnav-list{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.phero__subnav-list li{
  padding: 0 28px;
  border-left: 1px solid rgba(255,255,255,.12);
  cursor: pointer;
}
.phero__subnav-list li:first-child{ border-left: none; padding-left: 0; }
.phero__subnav-list a{
  color: rgba(255,255,255,.55);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  transition: color .2s;
  display: block;
}
.phero__subnav-list a:hover{ color: #fff; }
.phero__subnav-list .is-active a{ color: #fff; font-weight: 600; }

/* Progress bar */
.phero__progress-bar{
  height: 2px;
  background: rgba(255,255,255,.18);
  margin-top: 8px;
  border-radius: 1px;
  overflow: hidden;
}
.phero__progress-bar span{
  display: block;
  height: 100%;
  width: 0%;
  background: var(--cyan);
  border-radius: 1px;
}
@media(max-width:760px){
  .phero{ min-height: 60vh; }
  .phero__subnav-list{ grid-template-columns: 1fr; gap: 12px; }
  .phero__subnav-list li{ border-left: none; padding: 0; }
}

/* ============================
   PSERV — Portal Services
   ============================ */
.pserv{
  background: #fff;
  padding: 80px 0 90px;
}
.pserv__inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  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; }
}

/* ============================
   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: 60px 0 40px;
}
.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; }
}

/* ============================
   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;
}
.phidro__inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 60px 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; }
  .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: 64px;
  align-items: center;
}
.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);
  font-size: clamp(52px, 7vw, 96px);
  font-weight: 700;
  line-height: 0.95;
  color: var(--black);
  letter-spacing: -1px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.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(27,183,213,.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; }
}

/* ============================
   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(27,183,213,0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,183,213,0.13) 1px, transparent 1px),
    linear-gradient(rgba(27,183,213,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,183,213,0.04) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  padding: 48px 0 100px;
}
.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(27,183,213,0.4),
    rgba(27,183,213,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(27,183,213,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(27,183,213,0.25), rgba(27,183,213,0.25)),
    linear-gradient(rgba(27,183,213,0.25), rgba(27,183,213,0.25)),
    linear-gradient(rgba(27,183,213,0.25), rgba(27,183,213,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(27,183,213,0.65);
  background: #f2f5f7;
  padding: 2px 8px;
  border: 1px solid rgba(27,183,213,0.22);
  line-height: 1.2;
  pointer-events: none;
}

/* 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(27,183,213,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,183,213,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(27,183,213,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(27,183,213,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(27,183,213,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(27,183,213,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: 56px 0 72px; }
}

/* ============================
   PROYECTOS — Portfolio
   ============================ */
.proy-section{
  background-color: #f2f5f7;
  background-image:
    linear-gradient(rgba(27,183,213,0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,183,213,0.13) 1px, transparent 1px),
    linear-gradient(rgba(27,183,213,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,183,213,0.04) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  padding: 48px 0 100px;
  min-height: 80vh;
}

/* 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(27,183,213,0.08); color: var(--cyan); }
.proy-dd-opt.is-selected{
  background: rgba(27,183,213,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(27,183,213,0.2);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.25s, transform 0.22s, box-shadow 0.25s;
}
.proy-card:hover{
  border-color: rgba(27,183,213,0.55);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(27,183,213,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(27,183,213,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,183,213,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(27,183,213,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(27,183,213,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(27,183,213,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;
  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;
  margin-top: 0;
  z-index: 10;
}
/* Nav row */
.eco-header__nav{
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: 148px;
}
.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;
}
.eco-header__back{
  margin-left: auto;
  font-size: 13px;
  color: var(--eco-text);
  transition: color .2s;
}
.eco-header__back:hover{ color: var(--eco-heading); }

/* ── 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: 100px 32px 60px;
  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: 60px 32px clamp(80px, 10vw, 140px);
  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;
  padding: 9px 16px 9px 38px;
  font-size: 13px;
  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: 48px 0 80px;
}
.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: 64px 20px 40px; }
  .eco-catalog{ padding: 40px 20px 80px; }
  .eco-hero{ padding: 80px 24px 50px; }
}
@media(max-width: 480px){
  .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 {
  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: 48px 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);
}

.proy-detail-section {
  padding: 60px 0 100px;
  background: #fbfbfb;
}

.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(27,183,213,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(27,183,213,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: 60px 0 110px;
}
.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: 32px;
  padding-bottom: 32px;
}
.site-header--green .logo {
  position: absolute;
  left: var(--gutter);
  top: 0;
  margin-top: 0;
  z-index: 2;
}
.site-header--green .portal-nav-group {
  margin-left: 148px;
}
.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;
}
.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: 10px 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;
}
.hero-gestion .container {
  max-width: 1550px;
  width: 94%;
}
.hero-gestion-grid {
  display: grid;
  grid-template-columns: 1.38fr 0.62fr;
  gap: 30px;
  align-items: center;
}
@media(max-width: 980px) {
  .hero-gestion-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

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

.map-svg-el {
  width: 100%;
  max-width: 100%;
  height: auto;
  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 {
  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 {
  fill: var(--eco-green) !important;
  stroke: var(--eco-green) !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;
}

/* 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;
}

.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;
}
.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: 80px 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: 60px 0 100px;
}

.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: 24px;
  text-transform: uppercase;
}

/* 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;
}

.services-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  margin-top: 80px;
  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);
}

/* 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: 90px 0;
  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: 80px 0;
  border-top: 1px solid rgba(0,0,0,0.04);
}
.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: 14px;
  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: 85px 0 55px;
  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: 50px 0 30px;
  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, #ff0017);
}
.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: 40px 0 110px; /* Ample espacio antes del footer */
  background: #ffffff;
}
.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, #ff0017);
}
.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: 50px 0 100px;
}
.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, #ff0017);
}
.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, #ff0017);
  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: 60px 0 100px;
  background: #f8fafc;
  border-top: 1px solid #e9edf2;
}
.related-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 30px;
  color: #111;
}

/* Banner CTA Contextual */
.post-contextual-cta {
  padding: 50px 0 100px;
  background: #fff;
}
.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, #e30613);
  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;
}

/* ============================================================
   INGENIERÍA HIDRÁULICA — ECOSISTEMA STYLE (.page-hidraulica-eco)
   ============================================================ */

#hidro-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.page-hidraulica-eco {
  background-color: #091322;
  color: #ffffff;
  position: relative;
  overflow-x: hidden;
}

.eco-header__tag--cyan {
  background: rgba(0, 200, 224, 0.12) !important;
  border-color: rgba(0, 200, 224, 0.35) !important;
  color: #00c8e0 !important;
}

.eco-hero__eyebrow--cyan {
  color: #00c8e0 !important;
}

.eco-hero__cta--cyan {
  background: #00c8e0 !important;
  color: #091322 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 20px rgba(0, 200, 224, 0.35);
}

.eco-hero__cta--cyan:hover {
  background: #25d4ea !important;
  color: #091322 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 200, 224, 0.5);
}

.page-hidraulica-eco .eco-hero__title {
  font-size: clamp(2rem, 3.8vw, 3.2rem) !important;
  line-height: 1.12;
}

.hidro-cyan-text {
  color: #00c8e0 !important;
  font-style: italic;
}

.hidro-hero__cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 auto;
}

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

.hidro-hero__ghost-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #00c8e0;
  color: #00c8e0;
  transform: translateY(-2px);
}

.hidro-stats-eco .eco-stat__num {
  color: #00c8e0 !important;
}

/* Sección Editorial ("El agua es más que una red") con imagen a color hidraulica1.png */
.hidro-emotional-eco {
  position: relative;
  z-index: 2;
  background-image: linear-gradient(180deg, rgba(7, 14, 26, 0.45) 0%, rgba(9, 19, 34, 0.58) 100%), url('images/hidraulica1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: none !important;
  padding: 110px 0;
  text-align: center;
}

.eco-network__pre--cyan {
  color: #00c8e0 !important;
}

/* Texto más largo (más ancho) y ligeramente más pequeño */
.hidro-emotional__editorial-box {
  margin-top: 24px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-align: center;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.hidro-editorial__lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #ffffff;
  font-weight: 400;
  margin-bottom: 20px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

.hidro-editorial__sub {
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

/* Catálogo de Servicios Hidráulicos (Grid de 4 tarjetas sin recuadros ni bordes blancos) */
.hidro-catalog-sec {
  position: relative;
  z-index: 2;
  padding: 100px 0;
  background: #091322;
  border: none !important;
}

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

.hidro-catalog__pre {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #00c8e0;
  margin-bottom: 10px;
}

.hidro-catalog__title {
  font-family: var(--font-display, 'IBM Plex Sans', sans-serif);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 14px;
}

.hidro-catalog__desc {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

.hidro-grid-4cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
  border: none !important;
}

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

.hidro-service-card {
  background: rgba(15, 28, 50, 0.65) !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 24px !important;
  transition: transform 0.35s ease, background 0.35s ease !important;
}

.hidro-service-card:hover {
  transform: translateY(-4px) !important;
  background: rgba(18, 36, 64, 0.85) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.eco-card__sector--cyan {
  color: #00c8e0 !important;
}


.hidro-card-eco__media {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
  margin-bottom: 18px;
  border-radius: 14px;
}

.hidro-card-eco__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.hidro-service-card:hover .hidro-card-eco__media img {
  transform: scale(1.08);
}

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

.hidro-card-eco__specs {
  list-style: none;
  padding: 16px 16px 0;
  margin: 16px 0 0;
  border-top: none !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hidro-card-eco__specs li {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.eco-card__link--cyan {
  color: #00c8e0 !important;
}

.eco-card__link--cyan:hover {
  color: #ffffff !important;
}

/* ============================
   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{
    margin-left: 64px;
  }
  .breadcrumb-inner{
    padding-left: 0;
  }
  .eco-header__nav{
    margin-left: 64px;
  }
}

/* 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 a 2 líneas 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: 2;
    -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%);
  }
}
/* No basta con destrabar el alto del reveal: .hero-card tiene una altura
   FIJA (min-height:72vw) y .hero-card__content es position:absolute con
   top:0/bottom:0, así que su alto nunca puede superar el de la tarjeta sin
   importar cuánto texto tenga — el botón "Entrar" quedaba recortado por el
   overflow:hidden de .hero-card. En táctil + mobile, el contenido pasa a
   flujo normal para que la tarjeta crezca según lo que necesite mostrar. */
@media (hover: none) and (max-width: 760px){
  .hero-card{ min-height: 0; }
  .hero-card__content{
    position: relative;
    top: auto; bottom: auto; left: auto;
    min-height: 72vw;
  }
}

/* El solape de -300px/390px en .cultura está calibrado para el alto fijo
   de la foto de escritorio (480px). Con la foto ahora proporcional (y más
   baja) en mobile, ese offset fijo deja un hueco oscuro enorme antes del
   texto de Cultura. Va al final a propósito: .cultura sin media query
   declara margin-top/padding-top más abajo en el archivo y gana la
   cascada si este override no aparece después. */
@media(max-width: 880px){
  .cultura{
    margin-top: 0;
    padding-top: 60px;
  }
}