/* ============================================================================
   REDISEÑO 2026 — Corporación Protectora Verde
   ----------------------------------------------------------------------------
   Capa que se carga DESPUÉS de css/styles.css y reescribe el "chrome" común
   (loader, topbar, header, mega-menú, drawer, footer, flotantes) y añade los
   componentes nuevos: mapa de incidencia, showcase de video, carrusel de
   mensajes, tarjetas con movimiento y la página de presentación de proyectos.

   Convención: los tokens viven en :root de styles.css; aqui solo se anaden
   los que el rediseño necesita. Cada sección va marcada con un banderín.
   ========================================================================== */

:root{
  --tinta-2:#0C1A13;
  --crema:#FAFBF7;
  --oro:#E8C547;
  --oro-2:#F5DE7E;
  --linea-2:#E7EEDF;
  --rad-sm:14px;
  --sombra-card:0 1px 2px rgba(11,46,31,.04),0 8px 24px -12px rgba(11,46,31,.18);
  --sombra-alta:0 2px 4px rgba(11,46,31,.05),0 28px 60px -28px rgba(11,46,31,.42);
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:84px;
}

/* Respeta a quien pide menos movimiento en su sistema operativo */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* ============================================================================
   1. LOADER DE PÁGINA
   ========================================================================== */
.loader{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:
    radial-gradient(1200px 700px at 50% 20%,rgba(138,195,45,.12),transparent 60%),
    radial-gradient(900px 600px at 80% 90%,rgba(5,140,187,.12),transparent 60%),
    var(--bosque);
  transition:opacity .6s var(--ease),visibility .6s;
}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-in{display:grid;place-items:center;gap:1.35rem;text-align:center}
.loader-mark{position:relative;width:132px;height:132px;display:grid;place-items:center}
.loader-mark img{
  width:96px;height:96px;object-fit:contain;position:relative;z-index:2;
  animation:ldPulse 2.2s var(--ease) infinite;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.45));
}
.loader-mark::before,.loader-mark::after{
  content:'';position:absolute;inset:0;border-radius:50%;
}
.loader-mark::before{
  border:2px solid rgba(255,255,255,.10);
}
.loader-mark::after{
  border:2px solid transparent;
  border-top-color:var(--lima);border-right-color:var(--azul-2);
  animation:spin 1.15s linear infinite;
}
@keyframes ldPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.loader-word{
  font-family:var(--display);font-weight:700;color:#fff;
  font-size:clamp(1.05rem,3.4vw,1.35rem);letter-spacing:-.01em;line-height:1.15;
}
.loader-word span{
  display:block;font-family:var(--body);font-weight:600;font-size:.66rem;
  letter-spacing:.32em;text-transform:uppercase;color:var(--lima-2);margin-top:.45rem;
}
.loader-bar{
  width:min(210px,52vw);height:3px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.14);
}
.loader-bar i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--lima),var(--azul-2));
  transition:width .35s var(--ease);
}
body.cargando{overflow:hidden}

/* ============================================================================
   2. BARRA DE PROGRESO DE LECTURA
   ========================================================================== */
.progreso{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:90;
  transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--lima),var(--azul));
  transition:transform .12s linear;pointer-events:none;
}

/* ============================================================================
   3. TOP BAR  (ONG – Colombia + croquis + selector de idioma)
   ========================================================================== */
.topbar{
  background:linear-gradient(100deg,var(--bosque) 0%,var(--bosque-3) 55%,#0A3B4A 100%);
  color:rgba(255,255,255,.85);font-size:.78rem;position:relative;z-index:60;
}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:40px;flex-wrap:wrap;
}
.tb-left{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;letter-spacing:.01em}
.tb-left .co-mapa{
  width:16px;height:19px;flex-shrink:0;fill:currentColor;color:var(--lima-2);
  filter:drop-shadow(0 0 6px rgba(138,195,45,.45));
}
.tb-right{display:inline-flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.tb-right a{
  display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .55rem;border-radius:8px;
  color:rgba(255,255,255,.82);transition:color .25s,background .25s;
}
.tb-right a:hover{color:#fff;background:rgba(255,255,255,.08)}
.tb-right svg{width:14px;height:14px;stroke:currentColor;fill:none}
.tb-sep{width:1px;height:16px;background:rgba(255,255,255,.18);margin:0 .3rem}

/* Selector de idioma */
.lang{display:inline-flex;align-items:center;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:2px;gap:2px}
.lang button{
  font:inherit;font-size:.7rem;font-weight:700;letter-spacing:.06em;
  color:rgba(255,255,255,.7);padding:.24rem .6rem;border-radius:99px;
  transition:color .25s,background .25s;
}
.lang button.on{background:var(--lima);color:#06210f}
.lang button:hover:not(.on){color:#fff}

/* ============================================================================
   4. HEADER / MARCA / MEGA-MENÚ
   ========================================================================== */
.header{
  background:rgba(250,251,247,.78);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid rgba(221,230,212,.6);
}
.header.shrunk{
  background:rgba(250,251,247,.96);
  box-shadow:0 10px 40px -28px rgba(11,46,31,.5);
}
.nav{min-height:var(--nav-h);gap:1.6rem}
.header.shrunk .nav{min-height:68px}

/* Marca: sin anillo, logo más grande y wordmark legible */
.brand{gap:.8rem;align-items:center}
.brand .ring{
  position:static;width:auto;height:auto;background:none;box-shadow:none;
  border-radius:0;display:block;
}
.brand .ring::before{display:none}
.brand .ring img{
  width:56px;height:56px;border-radius:0;object-fit:contain;
  transition:width .35s var(--ease),height .35s var(--ease);
  filter:drop-shadow(0 4px 12px rgba(11,46,31,.18));
}
.header.shrunk .brand .ring img{width:46px;height:46px}
.brand .bn{gap:.16rem}
.brand .bn b{
  font-family:var(--display);font-weight:800;font-size:1.16rem;color:var(--bosque);
  letter-spacing:-.022em;line-height:1;
}
.brand .bn span{
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--neon);font-weight:700;line-height:1;
}
.footer .brand .bn b{color:#fff}
.footer .brand .bn span{color:var(--lima-2)}
.footer .brand .ring img{width:60px;height:60px}

/* Menú principal */
.menu{gap:.1rem}
.menu > a,.menu .has-sub > a{
  font-size:.905rem;font-weight:600;color:#33463b;padding:.6rem .72rem;border-radius:11px;
}
.menu a::after{bottom:.3rem;height:2.5px}
.menu > a:hover,.menu .has-sub:hover > a{background:rgba(138,195,45,.10);color:var(--bosque)}
.menu .has-sub > a{display:inline-flex;align-items:center;gap:.28rem}
.sub-caret{width:13px;height:13px;transition:transform .3s var(--ease)}
.menu .has-sub:hover .sub-caret{transform:rotate(180deg)}

/* Mega-menú: tarjetas con icono + descripción */
.menu .submenu{
  border-radius:20px;padding:.7rem;border:1px solid var(--linea-2);
  background:rgba(255,255,255,.98);backdrop-filter:blur(18px);
  box-shadow:0 30px 70px -30px rgba(11,46,31,.42),0 2px 6px rgba(11,46,31,.05);
}
.menu .submenu::before{
  content:'';position:absolute;left:0;right:0;top:-10px;height:10px;
}
.menu .submenu a{
  display:grid;grid-template-columns:34px 1fr;align-items:center;gap:.7rem;
  padding:.6rem .7rem;border-radius:13px;font-size:.9rem;font-weight:600;
  color:var(--tinta);transition:background .22s,transform .22s var(--ease);
}
.menu .submenu a::after{display:none}
.menu .submenu a:hover{background:var(--hueso-2);transform:translateX(3px)}
.menu .submenu a .mm-ic{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(138,195,45,.16),rgba(5,140,187,.14));
  color:var(--bosque);
}
.menu .submenu a .mm-ic svg{width:17px;height:17px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.menu .submenu a .mm-tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.menu .submenu a .mm-tx small{
  font-weight:500;font-size:.735rem;color:var(--niebla);letter-spacing:0;
}
.menu .submenu .dotp{display:none}
.menu .submenu-2c{grid-template-columns:1fr 1fr;gap:.1rem;min-width:min(620px,84vw)}

/* Pie del mega-menú con una acción destacada */
.mm-pie{
  grid-column:1/-1;margin-top:.35rem;padding:.75rem .85rem;border-radius:14px;
  background:linear-gradient(120deg,var(--bosque),var(--bosque-3));color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  font-size:.83rem;font-weight:600;
}
.mm-pie:hover{transform:none !important;background:linear-gradient(120deg,var(--bosque-3),#12523a)}
.mm-pie svg{width:16px;height:16px;stroke:var(--lima-2);fill:none;stroke-width:2.2;flex-shrink:0}

/* Botón CTA del nav */
.nav-cta .btn-primary{padding:.78rem 1.35rem;font-size:.9rem}

/* ============================================================================
   5. DRAWER MÓVIL
   ========================================================================== */
.drawer{
  background:linear-gradient(165deg,var(--bosque) 0%,#0A2419 60%,#08321F 100%);
  padding:1.2rem 1.2rem 2.4rem;width:min(90vw,380px);
}
.drawer-head{
  display:flex;align-items:center;gap:.7rem;padding:.4rem 0 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.10);margin-bottom:.7rem;
}
.drawer-head img{width:48px;height:48px;object-fit:contain}
.drawer-head b{font-family:var(--display);color:#fff;font-size:1.02rem;display:block;line-height:1.1}
.drawer-head span{font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--lima-2);font-weight:700}
.drawer > a{border-radius:12px;padding:.85rem .8rem;border-bottom:none;font-size:1.02rem}
.drawer > a:hover{background:rgba(255,255,255,.06)}
.drawer .dgroup > span{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem .8rem;border-radius:12px;cursor:pointer;
  font-size:1.02rem;font-weight:600;color:#fff;
}
.drawer .dgroup > span::after{
  content:'';width:8px;height:8px;border-right:2px solid var(--lima-2);
  border-bottom:2px solid var(--lima-2);transform:rotate(45deg) translateY(-2px);
  transition:transform .3s var(--ease);
}
.drawer .dgroup.open > span::after{transform:rotate(-135deg) translateY(-2px)}
.drawer .dg-items{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease);
}
.drawer .dgroup.open .dg-items{grid-template-rows:1fr}
.drawer .dg-items > *{min-height:0;overflow:hidden}
.drawer .dg-items a{
  font-size:.94rem;padding:.62rem .8rem .62rem 1.5rem;border-bottom:none;
  color:rgba(255,255,255,.74);border-radius:10px;
}
.drawer .dg-items a:hover{background:rgba(255,255,255,.06);color:var(--lima-2)}
.drawer .dotp{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--lima);margin-right:.6rem;vertical-align:middle;opacity:.7;
}
.drawer-lang{
  margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  font-size:.8rem;color:rgba(255,255,255,.6);
}

/* ============================================================================
   6. SECCIONES: ritmo, encabezados y fondos
   ========================================================================== */
.sec{padding:clamp(4rem,8vw,7rem) 0}
.sec-alt{background:linear-gradient(180deg,var(--crema),var(--hueso-2))}
.sec-dark{
  background:
    radial-gradient(900px 500px at 12% 0%,rgba(138,195,45,.10),transparent 62%),
    radial-gradient(900px 600px at 88% 100%,rgba(5,140,187,.12),transparent 62%),
    var(--bosque);
}
.sec-head{max-width:66ch}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head .h-sec{margin-top:.55rem}
.sec-head .lead{margin-top:.9rem}
.sec-head.center .lead{margin-inline:auto}

/* Franja decorativa entre secciones */
.franja-ola{display:block;width:100%;height:auto;margin-bottom:-1px}
.franja-ola path{fill:var(--bosque)}

/* ============================================================================
   7. TARJETAS CON MOVIMIENTO — cada familia con su propia personalidad
   ========================================================================== */

/* 7.1 Tarjeta con borde-gradiente que se enciende (pilares) */
.pilar{
  position:relative;z-index:1;border-radius:var(--rad);padding:1.6rem 1.4rem;
  background:#fff;border:1px solid var(--linea-2);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s;
}
.pilar::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;
  background:linear-gradient(140deg,var(--lima),var(--azul));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .45s;
}
.pilar:hover{transform:translateY(-8px);box-shadow:var(--sombra-alta);border-color:transparent}
.pilar:hover::after{opacity:1}

/* 7.2 Tarjeta numerada con "peel" diagonal (prioridades) */
.prio{
  position:relative;overflow:hidden;border-radius:var(--rad);padding:2rem 1.6rem 1.7rem;
  background:#fff;border:1px solid var(--linea-2);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.prio::before{
  content:'';position:absolute;right:-70px;top:-70px;width:180px;height:180px;border-radius:50%;
  background:linear-gradient(140deg,rgba(138,195,45,.20),rgba(5,140,187,.14));
  transition:transform .7s var(--ease);transform:scale(.55);
}
.prio:hover{transform:translateY(-8px);box-shadow:var(--sombra-alta)}
.prio:hover::before{transform:scale(1.25)}
.prio > *{position:relative}
.prio-n{
  font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1;
  background:linear-gradient(140deg,var(--lima),var(--azul));
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:.32;
  display:block;
}

/* 7.3 Tarjeta con imagen que hace zoom + capa que sube (áreas / programas) */
.card-foto{
  position:relative;overflow:hidden;border-radius:var(--rad);isolation:isolate;
  min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.5rem;color:#fff;box-shadow:var(--sombra-card);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.card-foto img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.1s var(--ease),filter .6s;
}
.card-foto::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,26,17,0) 24%,rgba(7,26,17,.62) 62%,rgba(7,26,17,.93) 100%);
  transition:opacity .5s;
}
.card-foto:hover{transform:translateY(-8px);box-shadow:var(--sombra-alta)}
.card-foto:hover img{transform:scale(1.09)}
.card-foto h3{font-size:1.22rem;margin-bottom:.35rem}
.card-foto p{
  font-size:.9rem;color:rgba(255,255,255,.82);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s var(--ease),opacity .45s,margin .5s;
}
.card-foto:hover p,.card-foto:focus-within p{max-height:8rem;opacity:1;margin-top:.3rem}
.card-foto .cf-tag{
  position:absolute;top:1.1rem;left:1.1rem;
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.34rem .7rem;border-radius:99px;color:#06210f;background:var(--lima);
}

/* 7.4 Tarjeta "glass" sobre fondo oscuro con línea que corre (ejes) */
.card-glass{
  position:relative;overflow:hidden;border-radius:var(--rad);padding:1.5rem 1.35rem;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);color:#fff;
  transition:transform .5s var(--ease),background .4s,border-color .4s;
}
.card-glass::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--lima),var(--azul-2));
  transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease);
}
.card-glass:hover{background:rgba(255,255,255,.10);border-color:rgba(168,224,90,.35);transform:translateY(-6px)}
.card-glass:hover::before{transform:scaleY(1)}

/* 7.5 Efecto "tilt" suave (se activa desde JS con data-tilt) */
[data-tilt]{transform-style:preserve-3d;will-change:transform}
[data-tilt] > *{transform:translateZ(24px)}

/* 7.6 Brillo que barre la tarjeta al pasar el cursor */
.brillo{position:relative;overflow:hidden}
.brillo::after{
  content:'';position:absolute;top:0;left:-140%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .8s var(--ease);pointer-events:none;
}
.brillo:hover::after{left:160%}

/* ============================================================================
   8. HERO: capas con parallax y video/imagen viva
   ========================================================================== */
.hero{min-height:clamp(600px,88vh,880px)}
/* La capa de fondo se desborda un poco para que el parallax nunca deje ver
   el borde superior o inferior de la imagen. */
.hero-bg{inset:-12% 0;will-change:transform}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(105deg,rgba(7,26,17,.90) 0%,rgba(7,26,17,.66) 42%,rgba(7,26,17,.18) 78%),
    linear-gradient(0deg,rgba(7,26,17,.55),transparent 45%);
}
.hero-bg img{animation:heroKen 26s var(--ease) infinite alternate}
@keyframes heroKen{
  0%{transform:scale(1.06) translate3d(0,0,0)}
  100%{transform:scale(1.16) translate3d(-1.6%,-1.4%,0)}
}
.hero-inner{position:relative;z-index:2}
.hero-copy h1{font-size:clamp(2.5rem,6vw,4.4rem)}
.hero .tagline{font-family:var(--serif);font-style:italic}

/* Cinta de credenciales bajo el hero */
.credenciales{
  position:relative;z-index:3;margin-top:-1px;
  background:linear-gradient(100deg,var(--bosque-3) 0%,#0C4436 55%,#0A3B4A 100%);
  border-top:1px solid rgba(255,255,255,.08);
}
.credenciales .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);padding-inline:0;
}
.cred{
  padding:1.4rem clamp(1rem,2.4vw,1.8rem);
  display:flex;align-items:center;gap:.85rem;transition:background .4s;
  border-left:1px solid rgba(255,255,255,.10);
}
.cred:first-child{border-left:none}
.cred:hover{background:rgba(255,255,255,.05)}
.cred svg{width:26px;height:26px;stroke:var(--lima-2);fill:none;stroke-width:1.7;flex-shrink:0}
.cred b{display:block;font-family:var(--display);color:#fff;font-size:1.3rem;line-height:1.05}
.cred span{font-size:.76rem;color:rgba(255,255,255,.66);line-height:1.3;display:block}

/* ============================================================================
   9. MAPA DE ZONAS DE INCIDENCIA (coropleta por departamentos)
   ========================================================================== */
.mapa-inc{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.5rem,4vw,3.2rem);align-items:start;
}
.mi-canvas{position:relative;isolation:isolate;max-width:520px;margin-inline:auto;width:100%}
.mi-glow{
  position:absolute;inset:6%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(138,195,45,.16),rgba(5,140,187,.09) 55%,transparent 72%);
  filter:blur(34px);animation:miLatido 9s ease-in-out infinite;
}
@keyframes miLatido{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.07);opacity:1}}
/* El SVG conserva su proporción: si se le pone max-height, el contenido se
   encoge dentro de la caja y el mapa queda diminuto. Se limita el ancho del
   contenedor en su lugar. */
.mi-svg{width:100%;height:auto;display:block;overflow:visible}

/* Departamentos */
.mi-dep{
  fill:rgba(255,255,255,.055);
  stroke:rgba(255,255,255,.34);stroke-width:.7;stroke-linejoin:round;
  cursor:pointer;outline:none;
  transition:fill .55s var(--ease),stroke .25s,stroke-width .25s,filter .3s;
}
.mi-vivo .mi-dep{
  animation:miDep .55s var(--ease) both;
  animation-delay:calc(var(--i) * 16ms);
}
@keyframes miDep{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mi-dep:hover,.mi-dep.on,.mi-dep:focus-visible{
  stroke:#fff;stroke-width:1.8;filter:drop-shadow(0 0 10px rgba(168,224,90,.55));
}
.mi-dep.sin-datos{stroke:rgba(255,255,255,.20)}
.mi-dep.sin-datos:hover{stroke:rgba(255,255,255,.6);filter:none}

/* Etiquetas de los departamentos más relevantes */
.mi-eti{
  pointer-events:none;text-anchor:middle;
  font-family:var(--body);font-weight:700;
  paint-order:stroke;stroke:rgba(6,24,15,.75);stroke-width:3.4;stroke-linejoin:round;
}
.mi-eti-n{fill:#fff;font-size:15px;letter-spacing:.01em}
.mi-eti-v{fill:var(--lima-2);font-size:13px;font-weight:800}
.mi-vivo .mi-eti{animation:miFade .6s .5s var(--ease) both}
@keyframes miFade{from{opacity:0}to{opacity:1}}

/* Recuadro del archipiélago */
.mi-inset{
  position:absolute;top:2%;left:0;width:clamp(58px,9%,84px);
  border:1px dashed rgba(255,255,255,.22);border-radius:10px;padding:.35rem .3rem .2rem;
  background:rgba(255,255,255,.03);text-align:center;
}
.mi-inset svg{width:100%;height:auto;display:block}
.mi-inset .mi-dep-inset{fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.4);stroke-width:1.6}
.mi-inset span{
  display:block;margin-top:.2rem;font-size:.48rem;line-height:1.2;
  letter-spacing:.04em;color:rgba(255,255,255,.5);
}

/* Leyenda de la escala */
.mi-leyenda{
  display:flex;align-items:center;gap:.55rem;justify-content:center;
  margin-top:.9rem;font-size:.68rem;color:rgba(255,255,255,.5);
}
.mi-leyenda .ml-barra{
  flex:0 1 190px;height:7px;border-radius:99px;
  border:1px solid rgba(255,255,255,.14);
}

/* Tooltip */
.mi-tip{
  position:absolute;z-index:5;transform:translate(-50%,calc(-100% - 14px));
  min-width:190px;padding:.75rem .85rem;border-radius:14px;pointer-events:none;
  background:rgba(8,28,19,.97);color:#fff;border:1px solid rgba(168,224,90,.3);
  box-shadow:0 24px 54px -24px rgba(0,0,0,.8);
  font-size:.78rem;display:flex;flex-direction:column;gap:.22rem;
  animation:miTip .2s var(--ease);
}
.mi-tip[hidden]{display:none}
@keyframes miTip{from{opacity:0;transform:translate(-50%,calc(-100% - 2px))}}
.mi-tip b{font-family:var(--display);font-size:.98rem;margin-bottom:.2rem}
.mi-tip-row{display:flex;justify-content:space-between;gap:1rem;color:rgba(255,255,255,.6)}
.mi-tip-row em{font-style:normal;font-weight:700;color:#fff}
.mi-tip-sec{
  margin-top:.35rem;font-size:.65rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--lima-2);
}
.mi-tip-vacio{color:rgba(255,255,255,.55);font-size:.75rem}

/* Panel lateral */
.mi-panel-head h3{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-top:.5rem;color:#fff}
.mi-resumen{margin-top:.85rem;color:rgba(255,255,255,.72);font-size:.95rem;max-width:52ch}
.mi-resumen b{color:var(--lima-2)}

.mi-tabs{
  display:inline-flex;gap:.25rem;margin:1.4rem 0 1.1rem;padding:4px;
  border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
}
.mi-tab{
  font:inherit;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.66);
  padding:.5rem 1.05rem;border-radius:99px;
  transition:background .3s,color .3s,box-shadow .3s;
}
.mi-tab.active{background:var(--lima);color:#06210f;box-shadow:0 8px 20px -12px rgba(138,195,45,.9)}
.mi-tab:hover:not(.active){color:#fff}

.mi-rank{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.mi-rank li{
  display:grid;grid-template-columns:26px 1fr;gap:.75rem;align-items:center;
  padding:.55rem .75rem;border-radius:13px;cursor:default;
  background:transparent;border:1px solid transparent;
  transition:background .3s,border-color .3s,transform .35s var(--ease);
  animation:miFila .5s var(--ease) both;animation-delay:var(--d);
}
@keyframes miFila{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.mi-rank li:hover,.mi-rank li.on{
  background:rgba(255,255,255,.08);border-color:rgba(168,224,90,.32);transform:translateX(4px);
}
.mi-r-pos{
  font-family:var(--display);font-weight:800;font-size:.9rem;color:var(--lima-2);
  text-align:center;opacity:.75;
}
.mi-r-body{display:flex;flex-direction:column;gap:.28rem;min-width:0}
.mi-r-top{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem}
.mi-r-top b{font-size:.92rem;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi-r-top em{font-style:normal;font-size:.82rem;font-weight:700;color:var(--lima-2);flex-shrink:0}
.mi-r-bar{display:block;height:5px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.mi-r-bar i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--lima),var(--azul-2));
  animation:miBarra .9s var(--ease) both;transform-origin:left;
}
@keyframes miBarra{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mi-r-sub{font-size:.72rem;color:rgba(255,255,255,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi-nota{margin-top:1rem;font-size:.73rem;color:rgba(255,255,255,.45);max-width:46ch}

/* ============================================================================
   10. SHOWCASE DE VIDEO (destacado grande + rail de miniaturas)
   ========================================================================== */
.vshow{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);
  gap:clamp(1.1rem,2.6vw,1.9rem);align-items:start}
.vshow-main{
  position:relative;border-radius:var(--rad-lg);overflow:hidden;
  aspect-ratio:16/9;background:#07160F;box-shadow:var(--sombra-alta);
}
.vshow-main video{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}

/* Piezas grabadas en vertical: el marco crece a lo alto y el video se muestra
   completo, con una copia desenfocada del póster rellenando los costados. */
.vshow-main.vertical{aspect-ratio:auto;height:clamp(380px,64vh,620px)}
.vshow-main.vertical video{object-fit:contain}
.vs-fondo{
  position:absolute;inset:-8%;z-index:0;display:none;
  background-size:cover;background-position:center;
  filter:blur(26px) saturate(1.15) brightness(.55);transform:scale(1.12);
}
.vshow-main.vertical .vs-fondo{display:block}
.vshow-main .vs-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:2.4rem 1.6rem 1.3rem;
  background:linear-gradient(0deg,rgba(7,22,15,.92),transparent);
  color:#fff;pointer-events:none;
}
.vshow-main .vs-cap b{display:block;font-family:var(--display);font-size:1.22rem;line-height:1.2}
.vshow-main .vs-cap span{font-size:.83rem;color:rgba(255,255,255,.72)}
.vs-badge{
  position:absolute;top:1rem;left:1rem;z-index:3;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.36rem .75rem;border-radius:99px;font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#06210f;background:var(--lima);
}
.vs-badge::before{
  content:'';width:6px;height:6px;border-radius:50%;background:#06210f;
  animation:vsLive 1.6s ease-in-out infinite;
}
@keyframes vsLive{0%,100%{opacity:1}50%{opacity:.25}}
.vs-mute{
  position:absolute;top:1rem;right:1rem;z-index:3;width:40px;height:40px;
  border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(7,22,15,.55);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);transition:background .3s,transform .3s var(--ease);
}
.vs-mute:hover{background:rgba(7,22,15,.8);transform:scale(1.08)}
.vs-mute svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

.vshow-rail{
  display:flex;flex-direction:column;gap:.7rem;
  max-height:min(72vh,520px);overflow-y:auto;padding-right:.35rem;
  scrollbar-width:thin;scrollbar-color:var(--linea) transparent;
  scroll-snap-type:y proximity;
}
.vshow-rail::-webkit-scrollbar{width:6px}
.vshow-rail::-webkit-scrollbar-thumb{background:var(--linea);border-radius:99px}
.sec-dark .vshow-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2)}
.vs-item{
  position:relative;display:grid;grid-template-columns:104px 1fr;gap:.8rem;
  align-items:center;padding:.55rem;border-radius:16px;cursor:pointer;
  border:1px solid transparent;background:transparent;text-align:left;width:100%;
  transition:background .3s,border-color .3s,transform .4s var(--ease);
  scroll-snap-align:start;
}
.vs-item:hover{background:#fff;border-color:var(--linea-2);transform:translateX(4px)}
.sec-dark .vs-item:hover{background:rgba(255,255,255,.07);border-color:rgba(168,224,90,.3)}
.vs-item.on{background:#fff;border-color:rgba(138,195,45,.55);box-shadow:var(--sombra-card)}
.sec-dark .vs-item.on{background:rgba(255,255,255,.10);border-color:var(--lima);box-shadow:none}
.vs-thumb{
  position:relative;border-radius:11px;overflow:hidden;aspect-ratio:16/10;background:#0B2E1F;
}
.vs-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.vs-item:hover .vs-thumb img{transform:scale(1.08)}
.vs-thumb::after{
  content:'';position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(7,22,15,.28) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center;
  opacity:0;transition:opacity .3s;
}
.vs-item:hover .vs-thumb::after{opacity:1}
.vs-item.on .vs-thumb{outline:2px solid var(--lima);outline-offset:-2px}
.vs-meta{min-width:0}
.vs-meta b{display:block;font-size:.88rem;font-weight:700;color:var(--tinta);line-height:1.25}
.sec-dark .vs-meta b{color:#fff}
.vs-meta span{display:block;font-size:.74rem;color:var(--niebla);margin-top:.2rem;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sec-dark .vs-meta span{color:rgba(255,255,255,.55)}

/* ============================================================================
   11. CARRUSEL DE MENSAJES / TESTIMONIOS  (deslizante, con arrastre)
   ========================================================================== */
.msg-wrap{position:relative}
.msg-rail{
  display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.4rem .2rem 1.4rem;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
}
.msg-rail::-webkit-scrollbar{display:none}
.msg-rail.arrastrando{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.msg{
  flex:0 0 clamp(280px,80vw,400px);scroll-snap-align:center;
  position:relative;border-radius:var(--rad);padding:1.6rem 1.4rem 1.3rem;
  background:#fff;border:1px solid var(--linea-2);box-shadow:var(--sombra-card);
  display:flex;flex-direction:column;gap:.9rem;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.msg:hover{transform:translateY(-6px);box-shadow:var(--sombra-alta)}
.msg::before{
  content:'“';position:absolute;top:-.35rem;right:1.1rem;
  font-family:var(--serif);font-size:5rem;line-height:1;color:var(--lima);opacity:.22;
}
.msg-tx{font-size:.95rem;color:#3b4d43;line-height:1.65;position:relative}
.msg-pie{display:flex;align-items:center;gap:.75rem;margin-top:auto}
.msg-av{
  width:44px;height:44px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;
  color:#06210f;background:linear-gradient(140deg,var(--lima-2),var(--lima));
}
.msg-av svg{width:21px;height:21px;stroke:currentColor;fill:none}
.msg-pie b{display:block;font-size:.88rem;color:var(--tinta);line-height:1.2}
.msg-pie span{display:block;font-size:.75rem;color:var(--niebla)}
.msg-ctrl{display:flex;align-items:center;gap:.8rem;margin-top:.3rem}
.msg-dots{display:flex;gap:.4rem;flex:1;flex-wrap:wrap}
.msg-dots button{
  width:8px;height:8px;border-radius:99px;background:var(--linea);
  transition:width .4s var(--ease),background .3s;
}
.msg-dots button.on{width:26px;background:linear-gradient(90deg,var(--lima),var(--azul))}
.msg-nav{display:flex;gap:.45rem}
.msg-nav button{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--linea);background:#fff;color:var(--bosque);
  transition:background .3s,color .3s,transform .3s var(--ease),border-color .3s;
}
.msg-nav button:hover{background:var(--bosque);color:#fff;border-color:var(--bosque);transform:scale(1.06)}
.msg-nav svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2}

/* CTA de WhatsApp dentro del bloque de mensajes */
.msg-cta{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:1.6rem;padding:1.2rem 1.4rem;border-radius:var(--rad);
  background:linear-gradient(120deg,rgba(37,211,102,.10),rgba(138,195,45,.10));
  border:1px solid rgba(37,211,102,.28);
}
.msg-cta p{flex:1;min-width:220px;font-size:.93rem;color:#3b4d43;margin:0}
.msg-cta b{color:var(--tinta)}
.btn-wa{
  background:#25D366;color:#06210f;box-shadow:0 14px 32px -14px rgba(37,211,102,.85);
}
.btn-wa:hover{background:#1FBE5A}
.btn-wa svg{width:19px;height:19px;fill:currentColor;stroke:none}

/* ============================================================================
   12. MARQUEE DE ALIADOS (cinta infinita)
   ========================================================================== */
.marquee{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-pista{display:flex;gap:clamp(2rem,5vw,4rem);width:max-content;
  animation:mqRueda 34s linear infinite;align-items:center}
.marquee:hover .marquee-pista{animation-play-state:paused}
@keyframes mqRueda{to{transform:translateX(-50%)}}
.marquee-pista a,.marquee-pista span{
  display:grid;place-items:center;height:64px;flex-shrink:0;
  filter:grayscale(1);opacity:.62;transition:filter .4s,opacity .4s,transform .4s var(--ease);
}
.marquee-pista a:hover{filter:none;opacity:1;transform:scale(1.06)}
.marquee-pista img{max-height:100%;width:auto;object-fit:contain}

/* ============================================================================
   13. PÁGINA "PRESENTAR PROYECTO": pasos + descargas
   ========================================================================== */
.pasos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.1rem;counter-reset:paso;position:relative;
}
.paso{
  position:relative;padding:1.7rem 1.3rem 1.4rem;border-radius:var(--rad);
  background:#fff;border:1px solid var(--linea-2);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.paso::before{
  counter-increment:paso;content:counter(paso,decimal-leading-zero);
  position:absolute;top:-16px;left:1.3rem;
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:.92rem;color:#fff;
  background:linear-gradient(140deg,var(--bosque),var(--bosque-3));
  box-shadow:0 10px 22px -12px rgba(11,46,31,.8);
}
.paso:hover{transform:translateY(-7px);box-shadow:var(--sombra-alta);border-color:rgba(138,195,45,.4)}
.paso h3{font-size:1.02rem;margin:.9rem 0 .45rem}
.paso p{font-size:.875rem;color:var(--niebla);line-height:1.6}
.paso-ic{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(138,195,45,.16),rgba(5,140,187,.14));
  color:var(--bosque);margin-left:auto;
}
.paso-ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
/* línea que conecta los pasos en escritorio */
@media (min-width:960px){
  .pasos::before{
    content:'';position:absolute;left:2.9rem;right:2.9rem;top:2px;height:2px;z-index:0;
    background:repeating-linear-gradient(90deg,var(--linea) 0 8px,transparent 8px 16px);
  }
  .paso{z-index:1}
}

/* Tarjetas de descarga */
.descargas{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.1rem}
.doc{
  display:grid;grid-template-columns:56px 1fr;gap:1rem;align-items:start;
  padding:1.25rem;border-radius:var(--rad);background:#fff;border:1px solid var(--linea-2);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.doc:hover{transform:translateY(-6px);box-shadow:var(--sombra-alta);border-color:rgba(138,195,45,.45)}
.doc-ic{
  width:56px;height:56px;border-radius:15px;display:grid;place-items:center;
  font-size:.62rem;font-weight:800;letter-spacing:.06em;color:#fff;position:relative;
}
.doc-ic.pdf{background:linear-gradient(140deg,#C8422F,#9B2C1D)}
.doc-ic.docx{background:linear-gradient(140deg,#2B6CB0,#1A4E85)}
.doc-ic.xlsx{background:linear-gradient(140deg,#1E7A48,#125533)}
.doc-body b{display:block;font-family:var(--display);font-size:1rem;color:var(--tinta);line-height:1.25}
.doc-body p{font-size:.85rem;color:var(--niebla);margin:.4rem 0 .8rem;line-height:1.6}
.doc-meta{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.72rem;color:var(--niebla);margin-bottom:.75rem;
}
.doc-meta span{
  padding:.2rem .55rem;border-radius:99px;background:var(--hueso-2);font-weight:600;
}
.doc-dl{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.84rem;font-weight:700;
  color:var(--bosque);padding:.5rem .9rem;border-radius:99px;
  border:1px solid var(--linea);background:var(--hueso);
  transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease);
}
.doc-dl:hover{background:var(--bosque);color:#fff;border-color:var(--bosque);transform:translateY(-2px)}
.doc-dl svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}

/* Acordeón de ayuda "cómo llenar el formulario" */
.acord{display:flex;flex-direction:column;gap:.7rem}
.acord-it{
  border:1px solid var(--linea-2);border-radius:16px;background:#fff;overflow:hidden;
  transition:border-color .35s,box-shadow .35s;
}
.acord-it.open{border-color:rgba(138,195,45,.5);box-shadow:var(--sombra-card)}
.acord-bt{
  width:100%;display:flex;align-items:center;gap:.85rem;text-align:left;
  padding:1rem 1.15rem;font:inherit;font-weight:700;font-size:.95rem;color:var(--tinta);
}
.acord-bt .ab-n{
  width:28px;height:28px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
  font-size:.76rem;font-weight:800;color:var(--bosque);background:var(--hueso-2);
  transition:background .3s,color .3s;
}
.acord-it.open .ab-n{background:var(--lima);color:#06210f}
.acord-bt .ab-mas{
  margin-left:auto;width:20px;height:20px;flex-shrink:0;position:relative;
}
.acord-bt .ab-mas::before,.acord-bt .ab-mas::after{
  content:'';position:absolute;inset:50% 0 auto 0;height:2px;border-radius:2px;
  background:var(--neon);transition:transform .35s var(--ease);
}
.acord-bt .ab-mas::after{transform:rotate(90deg)}
.acord-it.open .ab-mas::after{transform:rotate(0)}
.acord-cuerpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.acord-it.open .acord-cuerpo{grid-template-rows:1fr}
.acord-cuerpo > div{min-height:0;overflow:hidden}
.acord-cuerpo p{padding:0 1.15rem 1.15rem 3.35rem;font-size:.88rem;color:var(--niebla);line-height:1.7}
.acord-cuerpo ul{padding:0 1.15rem 1.15rem 4.4rem;font-size:.88rem;color:var(--niebla);line-height:1.7}

/* Aviso / caja destacada */
.aviso{
  display:flex;gap:.9rem;padding:1.1rem 1.25rem;border-radius:16px;
  background:linear-gradient(120deg,rgba(232,197,71,.12),rgba(138,195,45,.08));
  border:1px solid rgba(232,197,71,.4);font-size:.88rem;color:#4a4326;line-height:1.65;
}
.aviso svg{width:20px;height:20px;flex-shrink:0;stroke:#B8912A;fill:none;stroke-width:2;margin-top:.15rem}
.aviso b{color:var(--tinta)}

/* ============================================================================
   14. FOOTER
   ========================================================================== */
.footer{
  background:
    radial-gradient(800px 400px at 8% 0%,rgba(138,195,45,.10),transparent 60%),
    radial-gradient(800px 500px at 92% 100%,rgba(5,140,187,.12),transparent 60%),
    var(--tinta-2);
  color:rgba(255,255,255,.66);padding-top:clamp(3rem,6vw,4.6rem);
}
.f-aliados{
  border-bottom:1px solid rgba(255,255,255,.09);padding-bottom:2.2rem;margin-bottom:2.6rem;
}
.f-aliados p{
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.42);text-align:center;margin-bottom:1.3rem;
}
.f-aliados .marquee-pista a{filter:grayscale(1) brightness(2.6) contrast(.5);opacity:.55}
.f-aliados .marquee-pista a:hover{filter:none;opacity:1}
.ftop{
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:clamp(1.6rem,4vw,3rem);
  padding-bottom:2.6rem;
}
.fbrand > p{font-size:.88rem;line-height:1.7;margin-top:1rem;max-width:38ch}
.fbrand .tl{
  font-family:var(--serif);font-style:italic;color:var(--lima-2);
  font-size:.95rem;margin-top:.7rem;
}
.footer h4{
  font-family:var(--display);font-size:.86rem;color:#fff;margin-bottom:1rem;
  letter-spacing:.02em;position:relative;padding-bottom:.6rem;
}
.footer h4::after{
  content:'';position:absolute;left:0;bottom:0;width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--lima),var(--azul));
}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.footer ul a{
  font-size:.87rem;color:rgba(255,255,255,.62);
  transition:color .25s,padding-left .3s var(--ease);display:inline-block;
}
.footer ul a:hover{color:var(--lima-2);padding-left:.35rem}
.footer .fc{display:flex;align-items:flex-start;gap:.55rem;font-size:.86rem;line-height:1.5}
.footer .fc svg{width:15px;height:15px;stroke:var(--lima);fill:none;flex-shrink:0;margin-top:.2rem}
.socials{display:flex;gap:.55rem;margin-top:1.3rem}
.socials a{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
  transition:background .3s,transform .35s var(--ease),border-color .3s;
}
.socials a:hover{background:var(--lima);border-color:var(--lima);transform:translateY(-3px)}
.socials svg{width:17px;height:17px;fill:rgba(255,255,255,.8)}
.socials a:hover svg{fill:#06210f}
.fbot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.3rem 0 1.6rem;border-top:1px solid rgba(255,255,255,.09);
  font-size:.78rem;color:rgba(255,255,255,.46);
}
.fbot .leaf{display:inline-flex;align-items:center;gap:.45rem}
.fbot .leaf svg{width:15px;height:15px;fill:var(--lima)}
.f-legal{display:flex;gap:1rem;flex-wrap:wrap}
.f-legal a:hover{color:var(--lima-2)}

/* ============================================================================
   15. FLOTANTES: WhatsApp con burbuja + volver arriba
   ========================================================================== */
.wa-flota{
  position:fixed;right:clamp(1rem,3vw,1.8rem);bottom:clamp(1rem,3vw,1.8rem);z-index:80;
  display:flex;align-items:flex-end;gap:.6rem;flex-direction:row-reverse;
}
.wa-btn{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:#25D366;color:#fff;box-shadow:0 16px 36px -14px rgba(37,211,102,.9);
  transition:transform .4s var(--ease),box-shadow .4s;position:relative;
}
.wa-btn::before{
  content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:waPing 2.6s var(--ease) infinite;
}
@keyframes waPing{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.55);opacity:0}}
.wa-btn:hover{transform:scale(1.08)}
.wa-btn svg{width:29px;height:29px;fill:currentColor}
.wa-burbuja{
  max-width:min(260px,64vw);padding:.85rem 1rem;border-radius:18px 18px 4px 18px;
  background:#fff;border:1px solid var(--linea-2);box-shadow:var(--sombra-alta);
  font-size:.83rem;line-height:1.5;color:#3b4d43;position:relative;
  opacity:0;transform:translateY(10px) scale(.94);transform-origin:bottom right;
  transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none;
}
.wa-flota.abierta .wa-burbuja{opacity:1;transform:none;pointer-events:auto}
.wa-burbuja b{display:block;color:var(--tinta);margin-bottom:.2rem}
.wa-cerrar{
  position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;
  background:var(--tinta);color:#fff;display:grid;place-items:center;font-size:.8rem;
  line-height:1;box-shadow:0 4px 12px -4px rgba(0,0,0,.5);
}
.to-top{
  position:fixed;left:clamp(1rem,3vw,1.8rem);bottom:clamp(1rem,3vw,1.8rem);z-index:80;
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.92);border:1px solid var(--linea);color:var(--bosque);
  backdrop-filter:blur(10px);box-shadow:var(--sombra-card);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .4s,visibility .4s,transform .4s var(--ease),background .3s;
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--bosque);color:#fff}
.to-top svg{width:19px;height:19px}

/* ============================================================================
   16. TABLA DE PROYECTOS: chips de estado y refinamiento
   ========================================================================== */
.pj-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem}
.pj-stat{
  position:relative;overflow:hidden;padding:1.25rem 1.3rem;border-radius:var(--rad);
  background:linear-gradient(140deg,var(--bosque),var(--bosque-3));color:#fff;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.pj-stat:hover{transform:translateY(-5px);box-shadow:var(--sombra-alta)}
.pj-stat::after{
  content:'';position:absolute;right:-40px;bottom:-40px;width:130px;height:130px;
  border-radius:50%;background:radial-gradient(circle,rgba(138,195,45,.30),transparent 70%);
}
.pj-stat b{display:block;font-family:var(--display);font-size:clamp(1.7rem,4vw,2.3rem);line-height:1}
.pj-stat span{display:block;font-size:.8rem;color:rgba(255,255,255,.66);margin-top:.35rem}
.pj-estado{
  display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .6rem;border-radius:99px;
  font-size:.68rem;font-weight:700;white-space:nowrap;
}
.pj-estado::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.pj-estado.est{background:rgba(5,140,187,.12);color:#046B90}
.pj-estado.reg{background:rgba(111,168,40,.14);color:#4B7A16}
.pj-estado.apr{background:rgba(20,71,47,.13);color:#0F3A28;box-shadow:inset 0 0 0 1px rgba(20,71,47,.22)}

/* ============================================================================
   17. RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .ftop{grid-template-columns:1.4fr 1fr 1fr}
  .ftop > div:last-child{grid-column:1/-1}
}
@media (max-width:980px){
  .mapa-inc{grid-template-columns:1fr}
  .mi-canvas{max-width:440px;margin-inline:auto}
  .vshow{grid-template-columns:1fr}
  .vshow-rail{flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;
    padding-bottom:.8rem;scroll-snap-type:x proximity}
  .vs-item{grid-template-columns:1fr;flex:0 0 210px;align-items:stretch}
  .vs-item:hover{transform:translateY(-4px)}
  .credenciales .wrap{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .menu{display:none}
  .burger{display:grid}
  .nav-cta .btn-primary{display:none}
  .nav{min-height:72px}
  .brand .ring img{width:48px;height:48px}
  .brand .bn b{font-size:1.04rem}
}
@media (max-width:760px){
  .ftop{grid-template-columns:1fr 1fr}
  .fbrand{grid-column:1/-1}
  .topbar .wrap{justify-content:center;text-align:center;padding-block:.4rem}
  .tb-right .tb-tel span,.tb-right .tb-mail span{display:none}
  .msg{flex:0 0 min(86vw,340px)}
  .wa-burbuja{max-width:min(230px,58vw)}
}
@media (max-width:560px){
  .ftop{grid-template-columns:1fr}
  .credenciales .wrap{grid-template-columns:1fr}
  .cred{padding:1rem 1.2rem}
  .mi-rank li{grid-template-columns:22px 1fr;gap:.55rem;padding:.5rem .55rem}
  .mi-tabs{width:100%;justify-content:space-between}
  .mi-tab{flex:1;padding:.5rem .4rem;font-size:.76rem}
  .doc{grid-template-columns:1fr;gap:.85rem}
  .fbot{flex-direction:column;align-items:flex-start;gap:.6rem}
}

/* ============================================================================
   18. AJUSTES FINALES
   ========================================================================== */

/* Tarjeta de "canal de contacto": reusa .msg pero sin la comilla decorativa */
.msg.canal::before{display:none}
.msg.canal{padding:1.4rem 1.35rem 1.25rem}
.msg.canal .msg-tx{font-size:.9rem;flex:1}
.msg.canal .doc-dl{align-self:flex-start;margin-top:.2rem}
.msg.canal .doc-dl.wa{
  background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.45);color:#12803C;
}
.msg.canal .doc-dl.wa:hover{background:#25D366;color:#06210f;border-color:#25D366}
.msg.canal .msg-av{font-size:.86rem;letter-spacing:.04em}

/* Enlace activo del menú cuando la sección es la de la página actual */
.menu .has-sub.activa > a{color:var(--bosque)}
.menu .has-sub.activa > a::after{transform:scaleX(1)}

/* Sub-navegación pegajosa: se apoya en el header nuevo */
.subnav{top:68px;background:rgba(250,251,247,.94);border-bottom:1px solid var(--linea-2)}
.subnav a{font-weight:600}
.subnav a:hover,.subnav a.active{
  background:var(--bosque);color:#fff;box-shadow:0 8px 20px -14px rgba(11,46,31,.9);
}

/* Galería "en territorio" sobre fondo claro */
.sec:not(.sec-dark) .imp figcaption{color:#fff}

/* Botón fantasma coherente con el rediseño */
.btn-ghost{
  border:1px solid var(--linea);background:#fff;color:var(--bosque);
  box-shadow:var(--sombra-card);
}
.btn-ghost:hover{background:var(--bosque);color:#fff;border-color:var(--bosque)}

/* Cinta de aliados del pie: el marquee necesita un alto fijo */
.f-aliados .marquee-pista a{height:48px}

/* El formulario de contacto respira igual en todas las páginas */
.form .pj-select{
  padding:.85rem 1rem;border:1px solid var(--linea);border-radius:12px;
  font:inherit;font-size:.95rem;background:var(--blanco);color:var(--bosque);
}

/* Impresión: fuera cromo, solo contenido */
@media print{
  .loader,.progreso,.topbar,.header,.drawer,.scrim,.wa-flota,.to-top,
  .subnav,.marquee,.msg-ctrl{display:none !important}
  body{background:#fff}
}

/* ============================================================================
   19. CORRECCIONES DE MAQUETACIÓN (revisión visual)
   ========================================================================== */

/* Los cinco pasos caben en una fila y así la línea punteada tiene sentido */
@media (min-width:1180px){
  .pasos{grid-template-columns:repeat(5,1fr)}
}
@media (min-width:760px) and (max-width:1179px){
  .pasos{grid-template-columns:repeat(3,1fr)}
  .pasos::before{display:none}
}

/* Cuatro documentos en una rejilla 2×2 limpia */
@media (min-width:900px){
  .descargas{grid-template-columns:repeat(2,1fr)}
}

/* Tabla de proyectos: repartimos el ancho para que el nombre respire */
table.pj{table-layout:fixed;width:100%}
table.pj th:nth-child(1),table.pj td:nth-child(1){width:52px}
table.pj th:nth-child(2),table.pj td:nth-child(2){width:34%}
table.pj th:nth-child(3),table.pj td:nth-child(3){width:12%}
table.pj th:nth-child(4),table.pj td:nth-child(4){width:15%}
table.pj th:nth-child(5),table.pj td:nth-child(5){width:13%}
table.pj th:nth-child(6),table.pj td:nth-child(6){width:11%}
table.pj th:nth-child(7),table.pj td:nth-child(7){width:14%}
table.pj td{vertical-align:top}
table.pj .badge{white-space:normal;line-height:1.3}
@media (max-width:1024px){
  table.pj{table-layout:auto;min-width:920px}
  table.pj th,table.pj td{width:auto !important}
}

/* Las tarjetas de pilares sí se distinguen del panel blanco que las contiene */
.pilares-panel .pilar{background:var(--crema);border-color:var(--linea-2)}
.pilares-panel .pilar:hover{background:#fff}

/* Filas de pestañas que se desplazan: pista visible de que hay más a la derecha */
.pipe-tabs,.subnav .wrap{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%);
  scroll-snap-type:x proximity;
}
.pipe-tabs .pipe-tab,.subnav a{scroll-snap-align:start}
@media (min-width:1280px){
  .pipe-tabs,.subnav .wrap{-webkit-mask-image:none;mask-image:none}
}
.pipe-tab{transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.pipe-tab:hover:not(.active){border-color:var(--neon);color:var(--bosque);transform:translateY(-2px)}
.pipe-tab.active{box-shadow:0 10px 24px -14px rgba(11,46,31,.9)}


/* ============================================================================
   20. RITMO Y TRANSICIONES ENTRE SECCIONES
   ----------------------------------------------------------------------------
   Antes el sitio alternaba bandas claras y oscuras a todo el ancho y el corte
   se sentía duro. Ahora el lienzo claro es continuo y las secciones oscuras
   son paneles redondeados que se apoyan sobre él: la lectura fluye y el
   contraste sigue marcando jerarquía.
   ========================================================================== */
body{
  background:
    linear-gradient(180deg,var(--crema) 0%,var(--hueso) 34%,var(--hueso) 66%,var(--crema) 100%);
  background-attachment:fixed;
}

/* Ojo: .sec y .sec-dark tienen la misma especificidad, así que el fondo
   transparente solo debe alcanzar a las secciones claras. */
.sec{padding:clamp(4.4rem,8.5vw,7.4rem) 0}
.sec:not(.sec-dark){background:transparent}
/* (sustituida por el ritmo unificado de la sección 44) */

/* La banda "alterna" deja de ser un bloque plano: es un velo suave */
.sec-alt{background:transparent;position:relative;isolation:isolate}
.sec-alt::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70% 60% at 15% 0%,rgba(138,195,45,.09),transparent 62%),
    radial-gradient(70% 70% at 85% 100%,rgba(5,140,187,.08),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.7),rgba(236,241,228,.55));
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
}

/* Paneles oscuros: mismos márgenes y radio en todo el sitio */
.sec-dark{
  position:relative;isolation:isolate;
  background:linear-gradient(165deg,var(--bosque) 0%,#0A2A1D 55%,#09313F 100%);
  margin-inline:clamp(0px,2.2vw,32px);
  border-radius:clamp(18px,2.6vw,40px);
  box-shadow:0 44px 100px -56px rgba(11,46,31,.6);
  overflow:hidden;
}
.sec-dark::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(90% 70% at 10% 0%,rgba(138,195,45,.14),transparent 60%),
    radial-gradient(90% 80% at 92% 100%,rgba(5,140,187,.16),transparent 60%);
}
.sec-dark + .sec-dark{margin-top:clamp(.9rem,2vw,1.6rem)}

/* Encabezados de sección: mismo ritmo en todas las páginas */
.sec-head{max-width:64ch;margin-bottom:clamp(2rem,4vw,3.2rem)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head .h-sec{margin-top:.6rem}
.sec-head .lead{margin-top:1rem}
.sec-head.center .lead{margin-inline:auto}

/* El sub-hero se enlaza con la sección siguiente en vez de cortarla en seco */
.subhero{padding-bottom:clamp(2.4rem,5vw,3.6rem)}
.subhero::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:70px;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(244,247,239,.16));
  pointer-events:none;
}

/* ============================================================================
   21. MEGA-MENÚ: legibilidad
   ========================================================================== */
.menu .submenu{min-width:min(330px,86vw)}
.menu .submenu-2c{min-width:min(680px,90vw)}
.menu .submenu a .mm-tx{white-space:normal}
.menu .submenu a .mm-tx small{
  display:block;white-space:normal;line-height:1.35;margin-top:.1rem;
}
/* El pie del mega-menú es un enlace dentro de .submenu, así que necesita
   ganar en especificidad o hereda el color oscuro del resto de enlaces. */
.menu .submenu a.mm-pie,
.menu .submenu a.mm-pie:hover{
  color:#fff;grid-template-columns:1fr auto;gap:.8rem;
}
.menu .submenu a.mm-pie span{color:#fff;font-weight:700}
.menu .submenu a.mm-pie svg{stroke:var(--lima-2)}

/* ============================================================================
   22. BOTÓN "VOLVER ARRIBA" con anillo de progreso
   ========================================================================== */
.to-top{
  position:fixed;left:clamp(.9rem,2.4vw,1.6rem);bottom:clamp(.9rem,2.4vw,1.6rem);
  z-index:80;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:none;border:none;box-shadow:none;
  color:var(--bosque);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.9);
  transition:opacity .35s,visibility .35s,transform .4s var(--ease),color .3s;
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{color:var(--neon)}
.to-top .tt-anillo{
  position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);
}
.to-top .tt-pista{
  fill:rgba(255,255,255,.82);stroke:rgba(11,46,31,.13);stroke-width:2;
}
.to-top .tt-avance{
  fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset .12s linear;
}
.to-top .tt-flecha{
  position:relative;width:16px;height:16px;
  stroke:currentColor;fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s var(--ease);
}
.to-top:hover .tt-flecha{transform:translateY(-2px)}
.sec-dark .to-top{color:#fff}

/* ============================================================================
   23. ALIADOS: logos legibles en claro y en oscuro
   ========================================================================== */
.marquee-pista img{max-height:100%;max-width:190px;width:auto;object-fit:contain}
/* Sobre el pie oscuro los logos se leen mal: unos son oscuros y otros traen
   fondo blanco. Se les da una tarjeta blanca a todos para que se vean parejos. */
.f-aliados .marquee-pista a{
  height:auto;min-height:52px;padding:.55rem .95rem;border-radius:11px;
  background:rgba(255,255,255,.92);filter:grayscale(1);opacity:.68;
  transition:opacity .35s,filter .35s,transform .4s var(--ease);
}
.f-aliados .marquee-pista a:hover{filter:none;opacity:1;transform:translateY(-3px)}
.f-aliados .marquee-pista img{max-height:34px}
.f-aliados .marquee-pista{align-items:center}

/* ============================================================================
   24. HERO: acciones y llamada al video
   ========================================================================== */
.hero-acciones{
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  margin:1.6rem 0 .4rem;
}
.btn-video{
  display:inline-flex;align-items:center;gap:.75rem;padding:.5rem 1.15rem .5rem .5rem;
  border-radius:999px;color:#fff;font-weight:600;font-size:.92rem;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .3s,border-color .3s,transform .4s var(--ease);
}
.btn-video:hover{background:rgba(255,255,255,.18);border-color:rgba(168,224,90,.6);transform:translateY(-2px)}
.bv-play{
  position:relative;width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;background:var(--lima);color:#06210f;
}
.bv-play svg{width:15px;height:15px;fill:currentColor;stroke:none;margin-left:2px}
.bv-play::after{
  content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--lima);
  animation:waPing 2.8s var(--ease) infinite;
}
.bv-tx{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.bv-tx small{font-size:.7rem;font-weight:600;color:rgba(255,255,255,.62);letter-spacing:.02em}

/* Movimiento más presente en la foto de fondo */
.hero-bg img{animation:heroKen 34s var(--ease) infinite alternate}
@keyframes heroKen{
  0%  {transform:scale(1.08) translate3d(0,0,0)}
  50% {transform:scale(1.16) translate3d(-2.2%,-1.2%,0)}
  100%{transform:scale(1.10) translate3d(1.6%,-2.4%,0)}
}

@media (max-width:640px){
  .hero-acciones{gap:.6rem}
  .btn-video{font-size:.86rem;padding-right:1rem}
}

/* ============================================================================
   25. "QUIÉNES SOMOS": el logo va limpio, sin anillo ni disco blanco
   ----------------------------------------------------------------------------
   Mismo criterio que en la cabecera: el logo ya es circular por sí mismo, así
   que envolverlo en otro círculo duplicaba la forma y lo hacía pesado.
   ========================================================================== */
.about-visual .ring-xl{
  width:100%;background:none;border:none;box-shadow:none;border-radius:0;
}
.about-visual .ring-xl::before{display:none}
.about-visual .ring-xl img{
  width:86%;height:86%;object-fit:contain;
  filter:drop-shadow(0 26px 50px rgba(11,46,31,.28));
  animation:logoFlota 9s ease-in-out infinite;
}
@keyframes logoFlota{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%    {transform:translateY(-12px) rotate(-1.2deg)}
}
/* El halo se queda, pero más suave: da profundidad sin dibujar un borde */
.about-visual .halo{
  inset:2%;filter:blur(30px);opacity:.55;
  background:radial-gradient(circle,rgba(138,195,45,.30),rgba(5,140,187,.16) 55%,transparent 72%);
}
.about-visual .float{
  box-shadow:var(--sombra-card);border-color:var(--linea-2);
  backdrop-filter:blur(6px);background:rgba(255,255,255,.94);
}

/* Las rejillas con minmax fijo desbordan en pantallas de 320 px: el mínimo
   nunca debe superar el ancho disponible. */
.descargas{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.pasos{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}

/* El mega-menú ancho de Proyectos se centraba bajo su enlace y se salía por la
   derecha en pantallas medianas: se ancla al borde derecho del propio enlace. */
.menu .submenu-2c{left:auto;right:0;transform:translateX(0) translateY(8px)}
.menu .has-sub:hover .submenu-2c,
.menu .has-sub:focus-within .submenu-2c{transform:translateX(0) translateY(0)}

/* ============================================================================
   26. SECCIÓN CON VIDEO DE FONDO (contacto de la portada)
   ----------------------------------------------------------------------------
   El bloque de contacto era una rejilla blanca muy plana. Ahora es un panel
   oscuro con video en bucle detrás: ui.js lo arranca en silencio y lo pausa
   cuando sale de pantalla, así que no consume datos de más.
   ========================================================================== */
.sec-video{position:relative;isolation:isolate}
.sec-video-capa{position:absolute;inset:0;z-index:-1;overflow:hidden}
.sec-video-capa video{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.06);filter:saturate(.85);
}
.sec-video-capa .sv-velo{
  position:absolute;inset:0;
  background:
    radial-gradient(80% 70% at 20% 0%,rgba(11,46,31,.62),transparent 68%),
    radial-gradient(80% 80% at 90% 100%,rgba(6,32,44,.70),transparent 65%),
    linear-gradient(180deg,rgba(7,26,17,.86),rgba(7,26,17,.72) 45%,rgba(7,26,17,.90));
}
/* El degradado decorativo de .sec-dark sobraría encima del video */
.sec-video::after{display:none}

/* --- Tarjetas de canal sobre el panel oscuro --- */
.sec-video .msg{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:none;
}
.sec-video .msg:hover{
  background:rgba(255,255,255,.12);border-color:rgba(168,224,90,.42);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.7);
}
.sec-video .msg-tx{color:rgba(255,255,255,.76)}
.sec-video .msg-pie b{color:#fff}
.sec-video .msg-pie span{color:rgba(255,255,255,.55)}
.sec-video .msg.canal .doc-dl{
  background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);color:#fff;
}
.sec-video .msg.canal .doc-dl:hover{background:var(--lima);border-color:var(--lima);color:#06210f}
.sec-video .msg.canal .doc-dl.wa{
  background:rgba(37,211,102,.18);border-color:rgba(37,211,102,.5);color:#8FF0B4;
}
.sec-video .msg.canal .doc-dl.wa:hover{background:#25D366;border-color:#25D366;color:#06210f}
.sec-video .msg-nav button{
  background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.2);color:#fff;
}
.sec-video .msg-nav button:hover{background:#fff;color:var(--bosque);border-color:#fff}
.sec-video .msg-dots button{background:rgba(255,255,255,.28)}
.sec-video .msg-dots button.on{background:linear-gradient(90deg,var(--lima),var(--azul-2))}
.sec-video .msg-cta{
  background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.35);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.sec-video .msg-cta p{color:rgba(255,255,255,.8)}
.sec-video .msg-cta b{color:#fff}

/* --- Datos de contacto --- */
.sec-video .contact-info .ci{border-bottom-color:rgba(255,255,255,.12)}
.sec-video .contact-info .ic{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);
}
.sec-video .contact-info .ic svg{stroke:var(--lima-2)}
.sec-video .contact-info .ci b{color:rgba(255,255,255,.55)}
.sec-video .contact-info .ci a,
.sec-video .contact-info .ci p{color:#fff}
.sec-video .contact-info .ci a:hover{color:var(--lima-2)}

/* --- Formulario en vidrio --- */
.sec-video .form{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 32px 80px -40px rgba(0,0,0,.75);
}
.sec-video .field label{color:rgba(255,255,255,.82)}
.sec-video .field input,
.sec-video .field textarea,
.sec-video .form .pj-select{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;
}
.sec-video .field input::placeholder,
.sec-video .field textarea::placeholder{color:rgba(255,255,255,.42)}
.sec-video .field input:focus,
.sec-video .field textarea:focus{
  background:rgba(255,255,255,.14);border-color:var(--lima);
  box-shadow:0 0 0 4px rgba(138,195,45,.18);
}
.sec-video .form .note{color:rgba(255,255,255,.55)}

@media (max-width:900px){
  .sec-video-capa video{filter:saturate(.85) brightness(.9)}
}

/* ============================================================================
   27. DIVISOR DEGRADADO Y SECCIÓN DE CIERRE
   ----------------------------------------------------------------------------
   El panel de "Cuatro pilares" ya usaba una línea degradada en su borde
   superior. Se convierte en el motivo de división de todo el sitio: cada panel
   oscuro abre con la misma línea, y así el corte entre el lienzo claro y el
   bloque oscuro se siente intencionado en vez de brusco.
   ========================================================================== */
.sec-dark::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--lima),var(--azul),var(--lima-2),var(--azul-2),var(--lima));
  background-size:200% 100%;
  animation:divisorFluye 14s linear infinite;
}
@keyframes divisorFluye{to{background-position:200% 0}}

/* Divisor suelto, para separar bloques dentro de una misma sección */
.divisor{
  display:block;height:3px;border:none;border-radius:3px;margin:clamp(2rem,4vw,3rem) auto;
  width:min(180px,40%);
  background:linear-gradient(90deg,transparent,var(--lima),var(--azul),transparent);
  opacity:.85;
}
.sec-dark .divisor{opacity:.6}

/* --- Sección de cierre: se funde con el pie en vez de dejar una franja clara --- */
.sec-cierre{
  margin-inline:0;border-radius:0;
  box-shadow:none;
  padding-bottom:clamp(3rem,6vw,5rem);
}
.sec-cierre .sv-velo{
  background:
    radial-gradient(80% 60% at 20% 0%,rgba(11,46,31,.62),transparent 66%),
    radial-gradient(80% 70% at 90% 55%,rgba(6,32,44,.66),transparent 62%),
    linear-gradient(180deg,
      rgba(7,26,17,.88) 0%,
      rgba(7,26,17,.70) 34%,
      rgba(10,32,22,.86) 72%,
      var(--tinta-2) 100%);
}
/* El pie arranca justo donde termina el velo, sin costura */
.sec-cierre + .footer{padding-top:clamp(2.2rem,4.5vw,3.4rem)}
.sec-cierre + .footer .f-aliados{border-top:1px solid rgba(255,255,255,.07);padding-top:2rem}

/* ============================================================================
   28. ESPACIADO DE LA PORTADA
   ========================================================================== */
/* La rejilla de contacto: las dos columnas terminan más parejas */
.sec-video .contact{align-items:stretch;gap:clamp(1.6rem,3.4vw,3rem)}
.sec-video .contact-info{display:flex;flex-direction:column;justify-content:center}
.sec-video .contact-info .ci{padding:.95rem 0}
.sec-video .form{align-self:start}

/* El carrusel de canales respira menos por debajo: ya lo separa el bloque CTA */
.sec-video .msg-wrap{margin-bottom:clamp(1.4rem,3vw,2.2rem) !important}
.sec-video .msg-rail{padding-bottom:1rem}
.sec-video .msg-ctrl{margin-top:.1rem}

/* Cinta de credenciales y "quiénes somos": menos aire muerto entre ambas */
.credenciales + .sec{padding-top:clamp(3.2rem,6.5vw,5.6rem)}

/* Panel de pilares: el aire interior era escaso arriba y sobraba abajo */
.pilares-panel{padding:clamp(2rem,3.6vw,3rem) clamp(1.3rem,2.8vw,2.4rem) clamp(2.2rem,3.8vw,3.2rem)}
.pilares-grid{margin-top:clamp(1.8rem,3.2vw,2.6rem);align-items:stretch}
.pilares-panel .pilar{height:100%;justify-content:flex-start;padding-bottom:1.9rem}
.pilar p{max-width:34ch}

/* Galería en territorio: el pie de foto no se come la imagen */
.impact-grid{gap:clamp(.7rem,1.5vw,1.1rem)}

/* ============================================================================
   29. ÚLTIMOS AJUSTES DE LA PORTADA
   ========================================================================== */

/* Las dos columnas del contacto arrancan a la misma altura */
.sec-video .contact{align-items:start}
.sec-video .contact-info{justify-content:flex-start}

/* El número de cada prioridad se leía como un fantasma: ahora es un índice
   claro, arriba a la derecha, por encima del círculo decorativo. */
.prio{padding-top:1.7rem}
.prio-n{
  position:absolute;top:1.25rem;right:1.5rem;z-index:2;
  font-family:var(--display);font-weight:800;font-size:1.45rem;line-height:1;
  background:linear-gradient(140deg,var(--neon),var(--azul));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.72;letter-spacing:-.02em;
  transition:opacity .4s var(--ease),transform .5s var(--ease);
}
.prio:hover .prio-n{opacity:1;transform:translateY(-2px)}
.prio h3{padding-right:2.6rem}

/* Logos del pie: sobre la tarjeta blanca conservan su color, solo se atenúan */
.f-aliados .marquee-pista a{filter:none;opacity:.82}
.f-aliados .marquee-pista a:hover{opacity:1}

/* Cierre: el bloque de WhatsApp no necesita tanto brillo */
.sec-video .msg-cta{background:rgba(37,211,102,.10);border-color:rgba(37,211,102,.28)}

/* ============================================================================
   30. AFINADO FINAL
   ========================================================================== */

/* Cinta de aliados sobre fondo claro: los logos tenían poco alto y quedaban
   casi transparentes. Más aire, algo más de presencia y color al pasar. */
.marquee-pista a,.marquee-pista span{height:74px}
.marquee-pista img{max-height:74px;max-width:200px;width:auto;object-fit:contain}
.marquee-pista a{filter:grayscale(1);opacity:.72}
.marquee-pista a:hover{filter:none;opacity:1}
.f-aliados .marquee-pista a{height:auto;min-height:54px}
.f-aliados .marquee-pista img{max-height:36px}

/* El índice de cada prioridad se lee sin competir con el título */
.prio-n{
  background:linear-gradient(140deg,var(--bosque),var(--azul));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.55;font-size:1.35rem;
}
.prio:hover .prio-n{opacity:.9}

/* ============================================================================
   31. CIERRE DE PÁGINA: la última sección se apoya en el pie
   ----------------------------------------------------------------------------
   Da igual si la última sección es clara u oscura: entre ella y el footer no
   debe quedar una franja suelta. Las oscuras pierden el redondeo y funden su
   fondo con el color del pie; las claras solo recortan el aire sobrante.
   ========================================================================== */
body > section.sec:last-of-type{padding-bottom:clamp(3rem,5.5vw,4.6rem)}

body > section.sec-dark:last-of-type{
  margin-inline:0;border-radius:0;box-shadow:none;
  background:
    linear-gradient(180deg,transparent 52%,var(--tinta-2) 100%),
    linear-gradient(165deg,var(--bosque) 0%,#0A2A1D 55%,#09313F 100%);
}
body > section.sec-dark:last-of-type::after{display:none}
body > section.sec-dark:last-of-type + .footer{padding-top:clamp(2.2rem,4.5vw,3.4rem)}
body > section.sec-dark:last-of-type + .footer .f-aliados{
  border-top:1px solid rgba(255,255,255,.07);padding-top:2rem;
}

/* Bloques legales y PQR: menos aire muerto entre tarjetas y cierre */
.pd-grid,.pd-lista{margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.sec-head + .pd-bloque{margin-top:0}

/* ============================================================================
   32. SECCIÓN DE PROGRAMAS CON COLOR
   ----------------------------------------------------------------------------
   Cada programa ya tenía su color propio en --accent. Ahora ese color también
   se ve antes de leer: un icono en la esquina superior y un halo del mismo
   tono al pasar el cursor. La sección deja de ser un fondo plano.
   ========================================================================== */
/* Panel claro con color propio. Mismo esqueleto que los paneles oscuros
   (márgenes, radio y línea superior), pero sobre fondo claro. */
.sec-panel{
  position:relative;isolation:isolate;
  margin-inline:clamp(0px,2.2vw,32px);
  border-radius:clamp(18px,2.6vw,40px);
  overflow:hidden;
  background:linear-gradient(168deg,#F2F8EC 0%,#EAF4F5 46%,#F4EFF6 100%);
  box-shadow:inset 0 0 0 1px rgba(11,46,31,.05);
}
/* Variante en verdes y azules, para los bloques de territorio */
.sec-panel-verde{
  background:linear-gradient(168deg,#EFF7E9 0%,#E6F2F0 50%,#EAF3F8 100%);
}
.sec-panel-verde::before{
  background:
    radial-gradient(32% 34% at 12% 14%,rgba(111,168,40,.26),transparent 64%),
    radial-gradient(30% 32% at 40% 6%,rgba(39,179,196,.22),transparent 62%),
    radial-gradient(32% 34% at 72% 16%,rgba(5,140,187,.22),transparent 64%),
    radial-gradient(34% 34% at 92% 62%,rgba(138,195,45,.24),transparent 64%),
    radial-gradient(36% 34% at 18% 88%,rgba(63,180,106,.24),transparent 64%) !important;
}
.sec-panel-verde::after{
  background:linear-gradient(90deg,var(--lima),var(--azul),var(--lima-2),var(--azul-2),var(--lima)) !important;
  background-size:200% 100% !important;
}

/* Los siete colores de los programas tiñen el fondo de su propia sección */
.sec-panel::before{
  content:'';position:absolute;inset:-10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(30% 34% at 10% 16%,rgba(224,122,63,.26),transparent 64%),
    radial-gradient(28% 30% at 34% 6%,rgba(229,84,122,.22),transparent 62%),
    radial-gradient(30% 32% at 62% 12%,rgba(63,143,224,.24),transparent 64%),
    radial-gradient(32% 34% at 90% 30%,rgba(39,179,196,.26),transparent 64%),
    radial-gradient(34% 32% at 74% 90%,rgba(138,95,214,.20),transparent 64%),
    radial-gradient(36% 34% at 22% 88%,rgba(63,180,106,.24),transparent 64%);
  filter:blur(10px);
  animation:progFluye 30s ease-in-out infinite alternate;
}
@keyframes progFluye{
  0%  {transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-2%,2%,0) scale(1.07)}
}
/* Misma línea divisora que abre los paneles oscuros */
.sec-panel::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,#e07a3f,#e5547a,#3f8fe0,#27b3c4,#3fb46a,#8a5fd6);
  background-size:200% 100%;
  animation:divisorFluye 18s linear infinite;
}

/* Icono de la tarjeta: mismo color que el acento del programa */
.prog-ic{
  position:absolute;top:1rem;right:1rem;z-index:3;
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  color:#fff;background:rgba(8,24,16,.42);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .45s var(--ease),border-color .45s,transform .5s var(--ease);
}
.prog-ic svg{width:22px;height:22px;stroke:currentColor;fill:none}
.prog:hover .prog-ic{
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
  border-color:transparent;transform:translateY(-3px) scale(1.06);
  box-shadow:0 12px 28px -12px var(--accent);
}
/* El texto ya no compite con el icono */
.prog .body h3{padding-right:.2rem}
.prog:hover{transform:translateY(-10px)}
.prog .glow{transition:opacity .5s var(--ease)}
.prog:hover .glow{opacity:.85}

/* Pista de arrastre más clara */
.prog-hint svg{width:15px;height:15px;stroke:currentColor;fill:none}
.prog-dots{margin-top:.9rem}

/* ============================================================================
   33. SECCIÓN DE VIDEO CON FONDO AURORA
   ----------------------------------------------------------------------------
   Degradado lento en verde y azul: da vida al bloque sin competir con las
   piezas de video, que son lo que hay que mirar.
   ========================================================================== */
.sec-aurora{position:relative;isolation:isolate;overflow:hidden}
.sec-aurora::after{
  content:'';position:absolute;inset:-25%;z-index:-1;pointer-events:none;display:block;
  background:
    radial-gradient(38% 42% at 18% 22%,rgba(138,195,45,.30),transparent 62%),
    radial-gradient(42% 46% at 82% 18%,rgba(5,140,187,.30),transparent 62%),
    radial-gradient(46% 44% at 62% 88%,rgba(63,180,221,.24),transparent 62%),
    radial-gradient(40% 40% at 25% 82%,rgba(111,168,40,.24),transparent 62%);
  filter:blur(20px);
  animation:auroraFluye 26s ease-in-out infinite alternate;
}
@keyframes auroraFluye{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(2.5%,-2%,0) scale(1.08)}
  100%{transform:translate3d(-2%,2.5%,0) scale(1.04)}
}
.sec-aurora .h-sec,.sec-aurora .sec-head h2{color:#fff}
.sec-aurora .lead{color:rgba(255,255,255,.78)}

/* ============================================================================
   34. ICONOS: un solo criterio en toda la página
   ----------------------------------------------------------------------------
   Todos los contenedores de icono son cuadrados, centran su SVG con grid y
   el trazo hereda el color del contenedor. Así no hay iconos descuadrados ni
   desalineados entre secciones.
   ========================================================================== */
.paso-ic,.doc-ic,.msg-av,.prog-ic,.cred > svg,
.contact-info .ic,.valor .ic,.area .ic,.dp-ic,.dp-note-ic,.pilar-ic,.mm-ic,.pipe-empty .ic{
  display:grid;place-items:center;flex:none;
}
.paso-ic svg,.msg-av svg,.prog-ic svg,.contact-info .ic svg,
.valor .ic svg,.area .ic svg,.dp-ic svg,.dp-note-ic svg,.mm-ic svg{
  display:block;
}
/* Los iconos en línea (listas de contacto, pie, chips) se alinean al texto */
.footer .fc svg,.doc-dl svg,.btn svg,.aviso svg,.prog-hint svg,.tb-right svg{
  flex:none;display:block;
}
.footer .fc{align-items:center}
.footer .fc svg{margin-top:0}

/* El icono del paso vuelve al centro de su tarjeta en móvil */
@media (max-width:760px){
  .paso-ic{margin-left:0}
  .paso{text-align:left}
}

/* ============================================================================
   35. POLÍTICA DE DATOS CENTRADA
   ========================================================================== */
.sec-centrada .dp{max-width:1000px;margin-inline:auto}
.sec-centrada .dp-note{
  text-align:left;align-items:center;
}
.sec-centrada .dp-chips{justify-content:flex-start}
.sec-centrada .dp-grid{justify-items:stretch}
.sec-centrada .dp-card{text-align:left}
.sec-centrada .dp-cta{
  text-align:center;justify-items:center;
}
.sec-centrada .dp-cta > *{margin-inline:auto}

/* El rail de piezas se desplaza: un desvanecido abajo avisa de que hay más */
.vshow-rail{
  max-height:min(70vh,520px);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 88%,transparent 100%);
}
@media (max-width:980px){
  .vshow-rail{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%);
  }
}
/* La aurora se mantiene aunque la sección sea la última de la página */
body > section.sec-aurora:last-of-type::after{display:block}

/* En la política de datos todo el bloque comparte el mismo eje centrado */
.sec-centrada .dp > h3,
.sec-centrada .dp-titulo{text-align:center;margin-bottom:1rem}
.sec-centrada .dp-cta{flex-direction:column;text-align:center;gap:1rem}
@media (min-width:820px){
  .sec-centrada .dp-cta{flex-direction:row;justify-content:center;text-align:left}
}

/* ============================================================================
   36. AVATAR DE ICONO DE LOS CANALES DE CONTACTO
   ----------------------------------------------------------------------------
   .msg-av es un <span> dentro de .msg-pie, así que la regla `.msg-pie span`
   (0,1,1) le ganaba a `.msg-av` (0,1,0): el contenedor volvía a display:block
   —el icono quedaba pegado arriba— y heredaba el color del texto secundario,
   que sobre el panel oscuro es blanco translúcido. Hay que igualar o superar
   esa especificidad.
   ========================================================================== */
.msg-pie .msg-av,
.sec-video .msg-pie .msg-av{
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:14px;flex:none;
  color:#06210f;
  background:linear-gradient(140deg,var(--lima-2),var(--lima));
  box-shadow:0 8px 18px -10px rgba(138,195,45,.9);
}
.msg-pie .msg-av svg{
  width:21px;height:21px;display:block;
  stroke:currentColor;fill:none;stroke-width:1.9;
}
.msg.canal:hover .msg-av{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 12px 24px -10px rgba(138,195,45,1);
}
.msg-av{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}

/* ============================================================================
   37. TARJETAS DE PROGRAMA: más color y más claras de leer
   ========================================================================== */
.prog{aspect-ratio:4/5;border-radius:26px}
.prog .tag{
  top:1.05rem;left:1.05rem;font-size:.66rem;padding:.45rem .9rem;
  box-shadow:0 8px 20px -8px var(--accent),0 0 0 1px rgba(255,255,255,.25) inset;
}
/* La barra de color del programa se ve siempre, no solo al pasar el cursor */
.prog .accent-line{
  top:auto;bottom:0;height:6px;transform:scaleX(1);transform-origin:left;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 -10px 26px -6px var(--accent);
}
.prog .body{padding:1.4rem 1.4rem 1.7rem}
.prog .body h3{font-size:1.2rem;margin-bottom:.5rem}
.prog .body p{
  font-size:.87rem;color:rgba(255,255,255,.9);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* Un pie de tarjeta que invita a seguir */
.prog .body::after{
  content:'Conoce el programa';
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.85rem;
  font-size:.76rem;font-weight:700;letter-spacing:.02em;color:#fff;
  padding:.42rem .85rem .42rem .9rem;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),background .3s;
}
.prog:hover .body::after,.prog:focus-within .body::after{opacity:1;transform:none}
.prog:hover .body::after{background:linear-gradient(120deg,var(--accent),var(--accent-2));border-color:transparent}
/* Halo del color del programa detrás de la tarjeta */
.prog::after{
  content:'';position:absolute;inset:auto 8% -14px 8%;height:34px;z-index:-1;
  border-radius:999px;background:var(--accent);filter:blur(22px);
  opacity:0;transition:opacity .5s var(--ease);
}
.prog:hover::after{opacity:.55}
.prog-rail{padding-bottom:2.2rem}

@media (max-width:560px){
  .prog{aspect-ratio:3/4}
  .prog .body::after{opacity:1;transform:none}
}

/* El logo de Proyectos 360 lleva texto bajo el símbolo: necesita algo más de
   alto que el resto para que la bajada se lea. */
.marquee-pista img[src*="proyectos-360"]{max-height:56px}
.f-aliados .marquee-pista img[src*="proyectos-360"]{max-height:32px}

/* ============================================================================
   38. PANEL "CUATRO PILARES" EN VERDE
   ----------------------------------------------------------------------------
   El panel era una caja blanca sobre lienzo claro: no separaba nada. Pasa al
   verde de la marca, con el mismo degradado de los demás bloques oscuros, y
   conserva su línea superior de color. Las tarjetas de dentro se convierten
   en vidrio sobre el verde.
   ========================================================================== */
.pilares-panel{
  background:linear-gradient(165deg,var(--bosque) 0%,#0A2A1D 52%,#09313F 100%);
  border-color:transparent;
  box-shadow:0 44px 100px -56px rgba(11,46,31,.65);
}
/* La mancha decorativa del fondo, ahora en verde lima sobre oscuro */
.pilares-panel::after{
  background:radial-gradient(circle,rgba(138,195,45,.22),transparent 68%);
}
/* La línea superior es la misma que abre los paneles oscuros */
.pilares-panel::before{
  height:3px;
  background:linear-gradient(90deg,var(--lima),var(--azul),var(--lima-2),var(--azul-2),var(--lima));
  background-size:200% 100%;
  animation:divisorFluye 14s linear infinite;
}

.pilares-head .eyebrow{color:var(--lima-2)}
.pilares-head .eyebrow::before{background:linear-gradient(90deg,var(--lima-2),var(--azul-2))}
.pilares-panel .h-sec{color:#fff}
.pilares-panel .h-sec .accent{color:var(--azul-2)}
.pilares-head .lead{color:rgba(255,255,255,.76)}

/* Tarjetas de pilar en vidrio */
.pilares-panel .pilar{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.pilares-panel .pilar:hover{
  background:rgba(255,255,255,.11);
  border-color:rgba(168,224,90,.38);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.7);
}
.pilares-panel .pilar::after{opacity:0 !important}
.pilares-panel .pilar h3{color:#fff}
.pilares-panel .pilar p{color:rgba(255,255,255,.74)}

/* El círculo del icono también se adapta al fondo verde */
.pilares-panel .pilar-ic{
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border-color:rgba(255,255,255,.2);
  color:var(--lima-2);
}
.pilares-panel .pilar:hover .pilar-ic{
  background:linear-gradient(160deg,rgba(168,224,90,.28),rgba(63,180,221,.18));
  color:#fff;
  box-shadow:0 16px 34px -16px rgba(138,195,45,.8);
}

/* Dos paneles claros consecutivos necesitan aire entre ellos, igual que los
   oscuros, para que se lean como bloques distintos. */
.sec-panel + .sec-panel{margin-top:clamp(1rem,2.2vw,1.8rem)}
/* Los pies de foto de la galería se leen sobre la propia foto, no sobre el panel */
.sec-panel .imp figcaption{color:#fff}

/* ============================================================================
   39. SECCIÓN CON FOTOGRAFÍA DE FONDO
   ----------------------------------------------------------------------------
   Misma idea que .sec-video pero con una imagen fija: la foto aporta contexto
   y el velo verde la baja hasta que el texto encima se lee sin esfuerzo.
   ========================================================================== */
.sec-foto{position:relative;isolation:isolate}
.sec-foto-capa{position:absolute;inset:0;z-index:-1;overflow:hidden}
.sec-foto-capa img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.08);
  animation:fotoKen 38s var(--ease) infinite alternate;
}
@keyframes fotoKen{
  0%  {transform:scale(1.08) translate3d(0,0,0)}
  100%{transform:scale(1.16) translate3d(-1.8%,-1.4%,0)}
}
.sec-foto-capa .sv-velo{
  position:absolute;inset:0;
  background:
    radial-gradient(80% 60% at 16% 0%,rgba(11,46,31,.86),transparent 70%),
    radial-gradient(80% 70% at 90% 70%,rgba(6,42,58,.84),transparent 66%),
    linear-gradient(150deg,rgba(11,46,31,.95) 0%,rgba(10,36,25,.90) 48%,rgba(9,49,63,.92) 100%);
}
/* Si la sección cierra la página, el velo termina en el color del pie */
body > section.sec-foto:last-of-type .sv-velo{
  background:
    radial-gradient(80% 60% at 18% 0%,rgba(11,46,31,.82),transparent 66%),
    radial-gradient(80% 70% at 88% 55%,rgba(6,32,44,.78),transparent 62%),
    linear-gradient(180deg,rgba(7,26,17,.92) 0%,rgba(7,26,17,.82) 42%,var(--tinta-2) 100%);
}
/* El degradado decorativo de .sec-dark sobra encima de la foto */
.sec-foto::after{display:none}
@media (prefers-reduced-motion: reduce){
  .sec-foto-capa img{animation:none}
}

/* ============================================================================
   40. LÍNEA DEL HEADER
   ----------------------------------------------------------------------------
   El borde gris de la cabecera se sustituye por la misma línea degradada que
   abre los paneles: se desvanece hacia los extremos, gana presencia al hacer
   scroll y deja un halo tenue debajo.
   ========================================================================== */
.header{border-bottom:none}
.header::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(138,195,45,.55) 12%,
    var(--lima) 28%,
    var(--azul) 52%,
    var(--lima-2) 74%,
    rgba(168,224,90,.55) 88%,
    transparent 100%);
  background-size:220% 100%;
  animation:divisorFluye 16s linear infinite;
  opacity:.6;
  transition:opacity .4s var(--ease),height .4s var(--ease);
}
.header.shrunk::after{
  opacity:1;height:2.5px;
  box-shadow:0 4px 16px -4px rgba(138,195,45,.45);
}
@media (prefers-reduced-motion: reduce){
  .header::after{animation:none}
}

/* ============================================================================
   41. NÚMERO DE LAS PRIORIDADES
   ----------------------------------------------------------------------------
   El texto con degradado se diluía sobre el círculo decorativo claro. Pasa a
   color sólido: contraste real, y el degradado se reserva para el hover.
   ========================================================================== */
.prio-n{
  background:none;-webkit-background-clip:initial;background-clip:initial;
  color:var(--bosque);opacity:.5;
  font-size:1.55rem;font-weight:800;letter-spacing:-.03em;
  -webkit-text-fill-color:currentColor;
}
.prio:hover .prio-n{color:var(--neon);opacity:1;transform:translateY(-2px)}
/* El círculo decorativo se aparta del número para no restarle legibilidad */
.prio::before{background:linear-gradient(140deg,rgba(138,195,45,.16),rgba(5,140,187,.10))}

/* ============================================================================
   42. NÚMERO DE PRIORIDAD (corrección de especificidad)
   ----------------------------------------------------------------------------
   styles.css declara `.prio .prio-n` (0,2,0), que gana a cualquier `.prio-n`
   (0,1,0) por muy abajo que esté. Hay que igualar el selector.
   ========================================================================== */
.prio .prio-n{
  z-index:2;top:1.2rem;right:1.4rem;
  font-size:1.6rem;font-weight:800;letter-spacing:-.03em;
  color:var(--bosque);-webkit-text-fill-color:var(--bosque);
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  opacity:.45;
  transition:opacity .4s var(--ease),color .4s,transform .5s var(--ease);
}
.prio:hover .prio-n{
  opacity:1;color:var(--neon);-webkit-text-fill-color:var(--neon);
  transform:translateY(-2px);
}

/* ============================================================================
   43. ÁREAS DE ACCIÓN ("Quiénes somos"): fichas con color y respuesta al cursor
   ----------------------------------------------------------------------------
   Eran etiquetas planas. Cada una toma el color del programa que le
   corresponde, con un punto de color, y al pasar el cursor se llena.
   ========================================================================== */
.pills{display:flex;flex-wrap:wrap;gap:.55rem}
.pills span{
  --c:#6FA828;
  position:relative;display:inline-flex;align-items:center;gap:.5rem;
  padding:.52rem 1rem .52rem .85rem;border-radius:999px;
  font-size:.85rem;font-weight:600;color:#33463b;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(11,46,31,.10);
  box-shadow:0 1px 2px rgba(11,46,31,.04);
  cursor:default;
  transition:transform .4s var(--ease),background .35s,color .35s,
             border-color .35s,box-shadow .4s var(--ease);
}
.pills span::before{
  content:'';width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--c);transition:background .35s,transform .4s var(--ease);
}
.pills span:hover{
  transform:translateY(-3px);
  background:var(--c);color:#fff;border-color:transparent;
  box-shadow:0 14px 28px -14px var(--c);
}
.pills span:hover::before{background:#fff;transform:scale(1.25)}

/* Un color por área, el mismo de su programa en la página de Qué hacemos */
.pills span:nth-child(1){--c:#e07a3f}   /* Vivienda      */
.pills span:nth-child(2){--c:#e5547a}   /* Salud         */
.pills span:nth-child(3){--c:#3f8fe0}   /* Educación     */
.pills span:nth-child(4){--c:#27b3c4}   /* Agua          */
.pills span:nth-child(5){--c:#e0a93f}   /* Alimentación  */
.pills span:nth-child(6){--c:#6FA828}   /* Agroindustria */
.pills span:nth-child(7){--c:#E8C547}   /* Energía       */
.pills span:nth-child(8){--c:#3fb46a}   /* Medio ambiente*/
.pills span:nth-child(9){--c:#8a5fd6}   /* Emprendimiento*/

/* ============================================================================
   44. RITMO VERTICAL DEFINITIVO
   ----------------------------------------------------------------------------
   Medido en el navegador: los huecos entre secciones iban de 198 a 262 px, y
   se notaban como vacíos. El relleno base baja y toda sección que no sea la
   primera recorta su parte superior, así el hueco queda en ~145 px parejo en
   todas las páginas. Se usa el combinador `~` (no `+`) para que también valga
   cuando entre dos secciones hay una banda suelta, como la de credenciales.
   ========================================================================== */
/* Un único gobierno del relleno vertical, para todas las secciones por igual
   (incluidas .sec-dark y .sec-panel, que antes lo reescribían con
   padding-block y descuadraban el ritmo). */
body > section.sec{
  padding-top:clamp(2.4rem,4.4vw,3.8rem);
  padding-bottom:clamp(3.2rem,6vw,5.2rem);
}
body > section.sec:first-of-type{padding-top:clamp(3.2rem,6vw,5.2rem)}

/* El divisor marca la separación: no necesita margen por debajo, el relleno
   de la sección ya lo aporta. */
.divisor{margin:clamp(1.8rem,3.4vw,2.6rem) auto 0}

/* Encabezado de sección algo más ceñido a su contenido */
.sec-head{margin-bottom:clamp(1.7rem,3.4vw,2.7rem)}

/* Paneles consecutivos: un respiro entre ellos para que se lean separados */
body > section.sec-panel ~ section.sec-panel{margin-top:clamp(.8rem,1.8vw,1.4rem)}

/* La última sección cierra un poco más ajustada contra el pie */
body > section.sec:last-of-type{padding-bottom:clamp(2.6rem,5vw,4.2rem)}

/* ============================================================================
   45. BLOQUE "QUIÉNES SOMOS"
   ----------------------------------------------------------------------------
   El panel recortaba el logo por arriba (el parallax lo desplazaba fuera de un
   contenedor con overflow:hidden) y dejaba un vacío abajo porque las dos
   columnas no estaban equilibradas. Ahora se centran entre sí y el bloque de
   áreas lleva rótulo propio.
   ========================================================================== */
.about{align-items:center;gap:clamp(1.6rem,4vw,3.4rem)}
.about-visual{aspect-ratio:auto;padding-block:clamp(.5rem,2vw,1.5rem)}
.about-visual .ring-xl{width:min(100%,340px);aspect-ratio:1;margin-inline:auto}
.about-visual .ring-xl img{width:100%;height:100%}

/* Rótulo del bloque de áreas */
.pills-tit{
  margin:1.6rem 0 .75rem;
  font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--niebla);display:flex;align-items:center;gap:.7rem;
}
.pills-tit::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--linea),transparent);
}

/* Fichas de área: fondo sólido y sombra propia, se leen como piezas */
.pills span{
  background:#fff;
  border-color:rgba(11,46,31,.08);
  box-shadow:0 1px 2px rgba(11,46,31,.05),0 6px 14px -10px rgba(11,46,31,.18);
}
.pills span::before{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
@supports not (color: color-mix(in srgb,red 50%,blue)){
  .pills span::before{box-shadow:none}
}

/* styles.css declara `.about-copy .pills span` (0,2,1): hay que igualarlo */
.about-copy .pills{gap:.55rem;margin-top:0}
.about-copy .pills span{
  --c:#6FA828;
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.84rem;font-weight:600;color:#33463b;
  background:#fff;border:1px solid rgba(11,46,31,.09);
  padding:.55rem 1.05rem .55rem .85rem;border-radius:999px;
  box-shadow:0 1px 2px rgba(11,46,31,.05),0 8px 18px -12px rgba(11,46,31,.22);
  transition:transform .4s var(--ease),background .35s,color .35s,
             border-color .35s,box-shadow .4s var(--ease);
}
.about-copy .pills span:hover{
  transform:translateY(-3px);
  background:var(--c);color:#fff;border-color:transparent;
  box-shadow:0 14px 28px -14px var(--c);
}

/* ============================================================================
   46. PÁGINA "PRESENTA TU PROYECTO": color y ritmo
   ========================================================================== */

/* --- El vidrio del contacto vale igual sobre video que sobre fotografía --- */
.sec-foto .form,
.sec-foto .contact-info .ci,
.sec-foto .contact-info .ic,
.sec-foto .msg-cta{ }
.sec-foto .form{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 32px 80px -40px rgba(0,0,0,.75);
}
.sec-foto .field label{color:rgba(255,255,255,.82)}
.sec-foto .field input,
.sec-foto .field textarea,
.sec-foto .form .pj-select{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;
}
.sec-foto .field input::placeholder,
.sec-foto .field textarea::placeholder{color:rgba(255,255,255,.42)}
.sec-foto .field input:focus,
.sec-foto .field textarea:focus{
  background:rgba(255,255,255,.14);border-color:var(--lima);
  box-shadow:0 0 0 4px rgba(138,195,45,.18);
}
.sec-foto .form .note{color:rgba(255,255,255,.55)}
.sec-foto .contact-info .ci{border-bottom-color:rgba(255,255,255,.12)}
.sec-foto .contact-info .ic{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.sec-foto .contact-info .ic svg{stroke:var(--lima-2)}
.sec-foto .contact-info .ci b{color:rgba(255,255,255,.55)}
.sec-foto .contact-info .ci a,.sec-foto .contact-info .ci p{color:#fff}
.sec-foto .contact-info .ci a:hover{color:var(--lima-2)}
.sec-foto .msg-cta{
  background:rgba(37,211,102,.10);border-color:rgba(37,211,102,.30);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.sec-foto .msg-cta p{color:rgba(255,255,255,.8)}
.sec-foto .msg-cta b{color:#fff}

/* --- Los cinco pasos, cada uno con su color --- */
.paso{--c:var(--neon)}
.paso.p1{--c:#e07a3f}
.paso.p2{--c:#3f8fe0}
.paso.p3{--c:#8a5fd6}
.paso.p4{--c:#27b3c4}
.paso.p5{--c:#3fb46a}
.paso::before{
  background:linear-gradient(140deg,var(--c),color-mix(in srgb,var(--c) 55%,#fff));
  box-shadow:0 10px 22px -12px var(--c);
}
@supports not (color: color-mix(in srgb,red 50%,blue)){
  .paso::before{background:var(--c)}
}
.paso .paso-ic{
  background:color-mix(in srgb,var(--c) 14%,#fff);
  color:var(--c);margin-left:auto;
}
@supports not (color: color-mix(in srgb,red 50%,blue)){
  .paso .paso-ic{background:var(--hueso-2);color:var(--bosque)}
}
.paso:hover{border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.paso:hover .paso-ic{
  background:var(--c);color:#fff;transform:translateY(-3px) scale(1.05);
  box-shadow:0 14px 28px -14px var(--c);
}
.paso .paso-ic{transition:background .4s,color .4s,transform .45s var(--ease),box-shadow .45s}
/* La línea que une los pasos toma el degradado de la marca */
@media (min-width:1180px){
  .pasos::before{
    background:linear-gradient(90deg,#e07a3f,#3f8fe0,#8a5fd6,#27b3c4,#3fb46a);
    opacity:.35;height:2px;
  }
}

/* --- Tarjetas de descarga: se reconoce el tipo de archivo de un vistazo --- */
.doc{position:relative;overflow:hidden}
.doc::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--dc,var(--neon));opacity:.85;
  transform:scaleY(.4);transform-origin:center;
  transition:transform .5s var(--ease),opacity .4s;
}
.doc:hover::before{transform:scaleY(1);opacity:1}
.doc:has(.doc-ic.pdf){--dc:#C8422F}
.doc:has(.doc-ic.xlsx){--dc:#1E7A48}
.doc:has(.doc-ic.docx){--dc:#2B6CB0}
.doc-ic{box-shadow:0 10px 22px -12px rgba(11,46,31,.6)}
.doc:hover .doc-ic{transform:translateY(-2px)}
.doc-ic{transition:transform .4s var(--ease)}

/* --- Acordeones: la fila activa se distingue --- */
.acord-it{background:#fff}
.acord-it.open{border-color:rgba(138,195,45,.55);box-shadow:var(--sombra-alta)}
.acord-bt:hover{background:rgba(138,195,45,.05)}
.acord-bt{transition:background .3s}

/* La rejilla auto-fit del parche de 320 px se declaraba después de la media
   query de cinco columnas y la anulaba: se vuelve a fijar aquí, al final. */
@media (min-width:1180px){
  .pasos{grid-template-columns:repeat(5,1fr)}
}
@media (min-width:760px) and (max-width:1179px){
  .pasos{grid-template-columns:repeat(3,1fr)}
}

/* ============================================================================
   47. AJUSTE FINAL DE ESPACIOS
   ----------------------------------------------------------------------------
   Los paneles se acercan a los bordes de la ventana (menos margen lateral),
   el relleno vertical se recorta un poco más y se separa el primer panel de
   la banda de credenciales, que quedaba pegada.
   ========================================================================== */
.sec-dark,.sec-panel{margin-inline:clamp(0px,1.1vw,16px)}

body > section.sec{
  padding-top:clamp(2rem,3.8vw,3.2rem);
  padding-bottom:clamp(2.8rem,5.2vw,4.4rem);
}
body > section.sec:first-of-type{padding-top:clamp(2.8rem,5.2vw,4.4rem)}
body > section.sec:last-of-type{padding-bottom:clamp(2.4rem,4.4vw,3.6rem)}

/* La banda de credenciales no debe tocar el panel que la sigue */
.credenciales + .sec-panel,
.credenciales + .sec-dark{margin-top:clamp(.9rem,2vw,1.6rem)}

/* Encabezados algo más cerca de su contenido */
.sec-head{margin-bottom:clamp(1.5rem,3vw,2.3rem)}
.divisor{margin:clamp(1.5rem,2.8vw,2.2rem) auto 0}

/* En móvil los paneles van a sangre completa: el margen lateral roba ancho */
@media (max-width:640px){
  .sec-dark,.sec-panel{margin-inline:0;border-radius:0}
  .credenciales + .sec-panel,
  .credenciales + .sec-dark{margin-top:0}
}

/* ============================================================================
   48. ICONOS EN EL MENÚ MÓVIL
   ----------------------------------------------------------------------------
   El drawer usaba guiones; ahora lleva los mismos iconos que el mega-menú de
   escritorio, para que las dos navegaciones se lean igual.
   ========================================================================== */
.drawer .dg-items a{
  display:grid;grid-template-columns:30px 1fr;align-items:center;gap:.7rem;
  padding:.6rem .8rem;
}
.dg-ic{
  width:30px;height:30px;border-radius:9px;flex:none;
  display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  color:var(--lima-2);
  transition:background .3s,border-color .3s,color .3s,transform .35s var(--ease);
}
.dg-ic svg{width:16px;height:16px;display:block;stroke:currentColor;fill:none}
.drawer .dg-items a:hover .dg-ic,
.drawer .dg-items a:focus-visible .dg-ic{
  background:var(--lima);border-color:transparent;color:#06210f;transform:scale(1.06);
}
/* Los enlaces sueltos del drawer se alinean con los que llevan icono */
.drawer > a{padding-left:.8rem}

/* ============================================================================
   49. ÁREAS TÁCTILES EN MÓVIL
   ----------------------------------------------------------------------------
   Medido a 390 px: 31 enlaces y botones quedaban por debajo de 34 px de alto,
   difíciles de acertar con el dedo. Se amplía la zona sensible sin tocar el
   tamaño visual, con relleno donde cabe y con una capa transparente donde no.
   ========================================================================== */
@media (max-width:900px){
  /* Enlaces del pie y listas: relleno vertical, misma tipografía */
  .footer ul a,.footer .fc a{padding-block:.5rem;display:inline-block}
  .footer ul{gap:.15rem}
  .f-legal a{padding:.5rem 0;display:inline-block}
  .f-legal{gap:.4rem 1.1rem}

  /* Contactos de la barra superior y selector de idioma */
  .tb-right a{padding:.72rem .7rem}
  .lang{padding:3px}
  .lang button{padding:.62rem .95rem}

  /* Cerrar la burbuja de WhatsApp */
  .wa-cerrar{width:28px;height:28px;top:-11px;right:-11px}
  .wa-cerrar::after{content:'';position:absolute;inset:-9px}
}

/* Los puntos del carrusel se ven pequeños a propósito, pero su zona sensible
   no puede serlo: se amplía con una capa transparente por encima. */
.msg-dots button{position:relative}
.msg-dots button::after{content:'';position:absolute;inset:-14px -7px}
.msg-dots{gap:.55rem;padding-block:.35rem}

/* Igual para las flechas del carrusel de programas en pantallas pequeñas */
@media (max-width:900px){
  .prog-dots button{position:relative}
  .prog-dots button::after{content:'';position:absolute;inset:-14px -7px}
}

/* Migas de pan: enlaces cortos que conviene agrandar en táctil.
   Los enlaces que van dentro de un párrafo se dejan como están: ampliarlos
   rompería el interlineado del texto que los rodea. */
@media (max-width:900px){
  .subhero .crumb{gap:.35rem;flex-wrap:wrap}
  .subhero .crumb a{padding:.5rem .1rem;display:inline-block}
}

/* Los datos de contacto de la política de datos son enlaces de una línea:
   también necesitan zona sensible en táctil. */
@media (max-width:900px){
  .dp-contact li{padding-block:.15rem}
  .dp-contact a{padding-block:.42rem;display:inline-block}
}

/* ============================================================================
   50. PESTAÑAS DEL CICLO Y PANEL DE ESTUDIO
   ----------------------------------------------------------------------------
   El degradado del borde derecho difuminaba el último botón aunque la fila
   cupiera entera. Ahora solo aparece cuando la fila realmente se desplaza, y
   el panel de Estudio muestra los proyectos reales en lugar de un aviso.
   ========================================================================== */
.pipe-tabs{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 97%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 97%,transparent 100%);
  padding-right:2px;
}
/* A partir del ancho en el que las nueve pestañas caben, sin degradado */
@media (min-width:1120px){
  .pipe-tabs{-webkit-mask-image:none;mask-image:none;padding-right:0}
}
/* Bordes homogéneos: antes unas se veían grises y otras verdes */
.pipe-tab{border:1px solid var(--linea-2);background:#fff;color:#4b5f54}
.pipe-tab:hover:not(.active){
  border-color:rgba(138,195,45,.55);color:var(--bosque);
  background:rgba(138,195,45,.06);transform:translateY(-2px);
}
.pipe-tab.active{
  background:var(--bosque);color:#fff;border-color:var(--bosque);
  box-shadow:0 10px 24px -14px rgba(11,46,31,.9);
}

/* --- Rótulo de la vista activa: dice qué está mostrando la tabla --- */
.pj-vista{margin:clamp(1.2rem,2.6vw,1.9rem) 0 clamp(1rem,2vw,1.4rem);max-width:64ch}
.pj-vista h3{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.2rem,2.4vw,1.5rem);color:var(--bosque);margin:0 0 .35rem;
}
.pj-vista p{color:var(--niebla);font-size:.93rem;line-height:1.6;margin:0}

/* Las cifras dejan de animarse con data-cifra: ahora las escribe el propio
   renderizador de la tabla, así nunca contradicen a las filas de abajo. */
.pj-stat b{transition:none}
.pj-tools{margin-top:0}

/* ============================================================================
   51. FILA DE PESTAÑAS Y ESPACIADO DEL PANEL
   ----------------------------------------------------------------------------
   La fila tenía overflow-x:auto y relleno solo por debajo, así que al elevarse
   un botón en hover su borde superior quedaba recortado. Y el relleno del panel
   más el margen del rótulo sumaban 69 px de aire muerto entre las pestañas y
   el contenido.
   ========================================================================== */
.pipe-tabs{
  padding-block:.5rem;              /* espacio para que el hover no se corte */
  padding-inline:2px;
  margin-inline:-2px;
  margin-top:.6rem;
  align-items:center;
}
.pipe-tab{flex:none}

.pipe-panel{padding-top:clamp(1.4rem,2.6vw,2rem)}
.pj-vista{margin-top:0;margin-bottom:clamp(.9rem,1.8vw,1.3rem)}
.pj-stats{margin-bottom:clamp(.9rem,1.8vw,1.3rem)}
.pj-tools{margin-block:0 .6rem}
.pj-count{margin-bottom:.35rem}

/* El aviso de las etapas sin datos no necesita tanto alto */
.pipe-empty{padding:clamp(1.8rem,3.4vw,2.6rem) clamp(1.3rem,3vw,2.2rem)}

/* ============================================================================
   52. LOGO NUEVO (emblema CPV)
   ----------------------------------------------------------------------------
   El emblema es verde oscuro con filo dorado. Sobre fondo claro se lee solo,
   pero sobre las superficies verdes del sitio (loader, drawer, pie) su interior
   se funde con el fondo. Se le añade un halo tenue —no un recuadro— para que
   despegue, y un poco más de tamaño donde antes iba muy pequeño.
   ========================================================================== */
.loader-mark img,
.drawer-head img,
.footer .brand .ring img{
  filter:
    drop-shadow(0 0 16px rgba(226,240,205,.22))
    drop-shadow(0 10px 24px rgba(0,0,0,.55));
}

/* El sello tiene más detalle que el logo anterior: gana unos píxeles */
.brand .ring img{width:60px;height:60px}
.header.shrunk .brand .ring img{width:50px;height:50px}
.drawer-head img{width:54px;height:54px}
.footer .brand .ring img{width:64px;height:64px}

/* En claro basta con una sombra suave que lo asiente */
.header .brand .ring img{
  filter:drop-shadow(0 5px 14px rgba(11,46,31,.22));
}

@media (max-width:900px){
  .brand .ring img{width:52px;height:52px}
}

/* ============================================================================
   53. BANDERA DE COLOMBIA EN LA BARRA SUPERIOR
   ----------------------------------------------------------------------------
   Un chip diminuto junto a "Colombia". En reposo es casi neutro; al pasar el
   cursor por el grupo se enciende en amarillo bandera —un destello, no un
   neón— y el croquis lo acompaña. La idea es que se note sin hacer ruido.
   ========================================================================== */
.tb-left{
  cursor:default;
  transition:color .3s var(--ease);
}
.co-bandera{
  display:inline-flex;width:19px;height:13px;flex:none;
  border-radius:3px;overflow:hidden;
  /* Mismo brillo en reposo que el croquis: filo cálido y un halo de 6 px */
  border:1px solid rgba(252,209,22,.5);
  box-shadow:
    0 0 6px rgba(252,209,22,.45),
    0 1px 3px rgba(0,0,0,.35);
  filter:saturate(1.2) brightness(1.08);
  transition:transform .45s var(--ease),
             box-shadow .45s var(--ease),
             border-color .35s,
             filter .35s;
}
.co-bandera svg{width:100%;height:100%;display:block}

.tb-left:hover{color:#fff}
.tb-left:hover .co-bandera{
  transform:translateY(-1px) scale(1.14);
  border-color:rgba(252,209,22,.9);
  filter:saturate(1.35) brightness(1.18);
  box-shadow:
    0 0 0 1px rgba(252,209,22,.4),
    0 0 13px rgba(252,209,22,.65),
    0 0 26px rgba(252,209,22,.32);
}
/* El croquis se suma al guiño, en ámbar, sin robar protagonismo */
.tb-left:hover .co-mapa{
  color:#FCD116;
  filter:drop-shadow(0 0 7px rgba(252,209,22,.5));
}
.co-mapa{transition:color .35s var(--ease),filter .4s var(--ease)}

@media (prefers-reduced-motion: reduce){
  .co-bandera{transition:box-shadow .01ms,border-color .01ms}
  .tb-left:hover .co-bandera{transform:none}
}


/* ============================================================================
   54. PROCESO OFICIAL: TRES FASES Y DIAGRAMA DE NUEVE PASOS
   Las tarjetas .paso ahora llevan la lista de documentos de cada fase, y el
   diagrama del documento oficial se publica como HTML (no como imagen) para
   que sea responsive, traducible y legible con lector de pantalla.
   ========================================================================== */
.pasos-3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.paso-lista{
  list-style:none;margin:.9rem 0 0;padding:.85rem 0 0;
  border-top:1px dashed var(--linea-2);display:grid;gap:.4rem;
}
.paso-lista li{
  position:relative;padding-left:1.4rem;font-size:.82rem;line-height:1.5;
  color:var(--tinta-2);
}
.paso-lista li::before{
  content:'';position:absolute;left:0;top:.48em;width:7px;height:7px;
  border-radius:50%;background:var(--c,var(--lima));
}

/* --- el diagrama ---------------------------------------------------------- */
.flujo{
  list-style:none;margin:2.2rem 0 0;padding:0;position:relative;
  display:grid;gap:.85rem;
}
.flujo::before{
  content:'';position:absolute;left:21px;top:.6rem;bottom:.6rem;width:2px;
  background:linear-gradient(180deg,rgba(138,195,45,.15),var(--lima) 18%,var(--azul) 82%,rgba(5,140,187,.15));
  border-radius:2px;
}
.flujo-fase{
  display:flex;align-items:center;gap:.7rem;margin:.9rem 0 .1rem;
  position:relative;z-index:1;
}
.flujo-fase:first-child{margin-top:0}
.flujo-fase span{
  display:inline-flex;align-items:center;gap:.45rem;
  margin-left:56px;padding:.32rem .8rem;border-radius:99px;
  background:linear-gradient(135deg,var(--bosque),var(--bosque-3));color:#fff;
  font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 10px 22px -14px rgba(11,46,31,.9);
}
.flujo-it{
  display:grid;grid-template-columns:44px 1fr;gap:.9rem;align-items:start;
  position:relative;z-index:1;
}
.flujo-n{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:1.02rem;color:#fff;
  background:linear-gradient(140deg,var(--bosque-2),var(--bosque-3));
  box-shadow:0 10px 24px -14px rgba(11,46,31,.95),0 0 0 5px var(--crema);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.flujo-card{
  background:#fff;border:1px solid var(--linea-2);border-radius:var(--rad);
  padding:1rem 1.15rem;position:relative;
  display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;align-items:start;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.flujo-card h3{grid-column:1;font-size:.98rem;margin:0 0 .3rem}
.flujo-card p{grid-column:1;font-size:.86rem;color:var(--niebla);line-height:1.6;margin:0}
.flujo-ic{
  grid-column:2;grid-row:1 / span 2;
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(138,195,45,.16),rgba(5,140,187,.14));
  color:var(--bosque);
}
.flujo-ic svg{width:20px;height:20px}
.flujo-it:hover .flujo-card{
  transform:translateX(4px);box-shadow:var(--sombra-card);
  border-color:rgba(138,195,45,.45);
}
.flujo-it:hover .flujo-n{transform:scale(1.07)}

.flujo-pie{
  margin-top:1.8rem;padding:1.2rem 1.35rem;border-radius:var(--rad);
  background:linear-gradient(135deg,rgba(138,195,45,.13),rgba(5,140,187,.1));
  border:1px solid var(--linea-2);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
}
.flujo-pie b{display:block;font-family:var(--display);font-size:1.02rem}
.flujo-pie span{display:block;font-size:.86rem;color:var(--niebla);margin-top:.2rem}
.flujo-pie .btn svg{width:18px;height:18px;margin-right:.4rem}

@media (max-width:600px){
  .flujo{gap:.7rem}
  .flujo::before{left:17px}
  .flujo-it{grid-template-columns:36px 1fr;gap:.7rem}
  .flujo-n{width:36px;height:36px;border-radius:12px;font-size:.9rem;box-shadow:0 8px 18px -12px rgba(11,46,31,.95),0 0 0 4px var(--crema)}
  .flujo-fase span{margin-left:46px;font-size:.68rem}
  .flujo-card{padding:.9rem 1rem;grid-template-columns:1fr}
  .flujo-ic{display:none}
  .flujo-pie{flex-direction:column;align-items:flex-start}
  .flujo-pie .btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion: reduce){
  .flujo-it:hover .flujo-card,.flujo-it:hover .flujo-n{transform:none}
}


/* ============================================================================
   55. BROCHURE INSTITUCIONAL
   La "tapa" es CSS puro, no una miniatura del PDF: la portada del documento
   es una ilustración generada con IA y sacarla de contexto se leería como una
   foto de terreno. Aquí sólo evoca un impreso.
   ========================================================================== */
.brochure{
  display:grid;grid-template-columns:minmax(210px,270px) 1fr;gap:clamp(1.4rem,3.4vw,2.8rem);
  align-items:center;
}
.br-tapa{
  position:relative;aspect-ratio:1/1.294;border-radius:16px;overflow:hidden;
  padding:1.5rem 1.3rem;display:flex;flex-direction:column;justify-content:flex-end;
  color:#fff;isolation:isolate;
  background:linear-gradient(155deg,var(--bosque) 0%,var(--bosque-3) 58%,#1b5c3a 100%);
  box-shadow:var(--sombra-alta),inset 0 0 0 1px rgba(255,255,255,.07);
  transform:rotate(-1.6deg);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.brochure:hover .br-tapa{transform:rotate(0deg) translateY(-4px)}
.br-tapa::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 80% at 85% 8%,rgba(138,195,45,.35),transparent 60%);
}
.br-tapa::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:9px;
  background:linear-gradient(180deg,var(--lima),var(--azul));
}
.br-sello{
  position:absolute;top:1.2rem;left:1.3rem;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 0 26px -6px rgba(138,195,45,.75);
}
.br-sello img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.br-tapa b{
  font-family:var(--display);font-weight:800;line-height:1.08;
  font-size:clamp(1.25rem,2.4vw,1.6rem);letter-spacing:-.01em;
}
.br-anio{
  font-family:var(--display);font-weight:800;font-size:1.9rem;color:var(--lima-2);
  line-height:1;margin-top:.25rem;
}
.br-pie{
  margin-top:.9rem;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.16);
  font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72);
}
.br-texto{min-width:0}
.br-texto .lead{margin-bottom:1.3rem}
.br-indice{
  list-style:none;margin:0 0 1.5rem;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));gap:.65rem 1.4rem;
}
.br-indice li{display:grid;grid-template-columns:auto 1fr;gap:.65rem;align-items:baseline}
.br-n{
  font-family:var(--display);font-weight:800;font-size:.78rem;color:var(--lima);
  letter-spacing:.02em;
}
.br-indice b{display:block;font-size:.9rem}
.br-indice span{display:block;font-size:.8rem;color:var(--niebla);line-height:1.5}
.br-texto .btn svg{width:18px;height:18px;margin-right:.45rem}

@media (max-width:760px){
  .brochure{grid-template-columns:1fr}
  .br-tapa{max-width:230px;margin:0 auto;transform:none}
  .brochure:hover .br-tapa{transform:translateY(-3px)}
  .br-texto{text-align:left}
  .br-texto .btn{width:100%;justify-content:center;white-space:normal;text-align:center;line-height:1.35}
}
@media (prefers-reduced-motion: reduce){
  .br-tapa,.brochure:hover .br-tapa{transform:none;transition:none}
}