@charset "UTF-8";
/* ============================================================================
   CONECTA COMUNIDAD · PORTADA v27 (BRIEF_v27)
   Se carga después de v25-portada.css. Reemplaza a v26-portada.css.
   · «Comunidades» (.com27): el gran momento de la portada. En pantallas
     anchas, una escena: foto grande que cambia con una cortina guiada por un
     filo del color de cada comunidad. En celular y tableta, un carrusel
     táctil con botones, estado y regla de avance.
   · «Observatorio» (.obs27): una mini visualización sin números (una barra
     por departamento) que crece una sola vez, con su texto y enlace.
   · «Fundador» (.fundador27): pasa a banda de noche para alternar el ritmo
     entre Proyectos y Aliados, que son claras.
   Mismos tokens y tipografías del sitio.
   ========================================================================== */

.com27{ --cine:cubic-bezier(.77,0,.18,1); background:var(--noche); padding-block:var(--banda) }

/* ---------- Cabecera ---------- */
.com27__cab{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); column-gap:clamp(2rem,6vw,6rem);
  align-items:end; margin-bottom:clamp(2.5rem,5vw,4.25rem) }
.com27__cab .antetitulo{ grid-column:1 / -1 }
.com27__t{ margin:0; font-family:var(--sans); font-weight:600; font-size:var(--t-monumento); line-height:1.1;
  letter-spacing:-.02em; color:var(--papel); max-width:20ch; text-wrap:balance }
.com27__def{ margin:0; font-family:var(--lee); font-size:var(--t-lede); line-height:1.6; color:var(--t2); max-width:46ch }
.com27__def em{ font-style:italic; color:var(--piedra) }

/* ---------- Filas (comunes) ---------- */
.com27__lista{ list-style:none; margin:0; padding:0 }
.com27__a{ color:inherit; text-decoration:none }
.com27__n{ font-family:var(--sans); font-weight:600; letter-spacing:-.015em; line-height:1.15; color:var(--papel) }
.com27__r{ font-family:var(--lee); line-height:1.45; color:var(--t2) }
.com27__q{ font-family:var(--sans); font-size:.9rem; line-height:1.45; color:var(--t3) }
.com27__pie{ margin:0; font-family:var(--sans); font-size:.86rem; line-height:1.45; color:var(--t3) }
.com27__dir{ display:block; color:var(--cm); font-weight:600; letter-spacing:.005em }
.com27__a:focus-visible{ outline:3px solid var(--cm); outline-offset:4px; border-radius:8px }
.com27__hub{ margin:clamp(2rem,4vw,3rem) 0 0 }

/* ============================================================
   Pantallas anchas: la escena
   ============================================================ */
@media (min-width:64rem){
  .com27__mando{ display:none !important }
  .com27__lista{ position:relative; padding-left:calc(46% + clamp(2rem,4vw,4rem)); min-height:36rem }
  /* La fila no se posiciona: las fotos se ubican respecto de la lista. El trazo del acento que se dibuja
     bajo la fila elegida es una línea de fondo de 2 px que crece de izquierda a derecha. */
  .com27__i{ border-bottom:1px solid var(--fl); background:linear-gradient(var(--cm),var(--cm)) no-repeat 0 100% / 0 2px;
    transition:background-size .45s var(--curva) }
  .com27__i:first-child{ border-top:1px solid var(--fl) }
  .com27__i[data-on]{ background-size:100% 2px }

  .com27__a{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1.25rem;
    padding:clamp(1.15rem,2vw,1.55rem) .25rem }
  .com27__txt{ display:grid; grid-template-columns:minmax(9rem,13rem) minmax(0,1fr); column-gap:clamp(1rem,2.5vw,2rem); row-gap:.3rem; align-items:baseline }
  .com27__n{ grid-row:span 2; font-size:clamp(1.3rem,1rem + .8vw,1.75rem);
    transition:color .25s var(--curva), transform .3s var(--curva) }
  .com27__r{ font-size:1.08rem; transition:color .25s var(--curva) }
  .com27__i:not([data-on]) .com27__r{ color:#AFBBC2 }

  .com27__ir{ position:relative; display:inline-grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%;
    color:var(--t3); transition:color .25s var(--curva), transform .3s var(--curva) }
  .com27__ir::before{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--cm);
    transform:scale(0); transition:transform .32s cubic-bezier(.34,1.56,.64,1) }
  .com27__ir svg{ position:relative }

  .com27__i[data-on] .com27__n,.com27__a:hover .com27__n{ color:var(--cm) }
  .com27__i[data-on] .com27__n{ transform:translateX(6px) }
  .com27__i[data-on] .com27__ir{ color:var(--noche); transform:translateX(3px) }
  .com27__i[data-on] .com27__ir::before{ transform:scale(1) }

  /* Fotos: apiladas en la columna izquierda. Se ve la elegida y, mientras entra, la anterior debajo. */
  .com27__foto,.com27__filo{ position:absolute; left:0; top:0; bottom:3.4rem; width:46% }
  .com27__foto{ overflow:hidden; border-radius:12px; background:var(--noche-hondo); opacity:0; visibility:hidden; z-index:0 }
  .com27__foto picture{ display:block; width:100%; height:100% }
  .com27__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%) }
  .com27__i[data-prev] .com27__foto{ opacity:1; visibility:visible; z-index:1 }
  .com27__i[data-on] .com27__foto{ opacity:1; visibility:visible; z-index:2 }

  .com27__filo{ z-index:3; pointer-events:none; opacity:0 }
  .com27__filo::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:3px; background:var(--cm) }
  [data-com-lista][data-dir="atras"] .com27__filo::before{ left:auto; right:0 }

  /* La cortina: solo cuando JS la pide (data-dir) y el movimiento está permitido */
  [data-com-lista][data-dir] .com27__i[data-on] .com27__foto{ animation:com27-cortina .95s var(--cine) both }
  [data-com-lista][data-dir="atras"] .com27__i[data-on] .com27__foto{ animation-name:com27-cortina-atras }
  [data-com-lista][data-dir] .com27__i[data-on] .com27__foto img{ animation:com27-acerca 2.2s var(--curva) both }
  [data-com-lista][data-dir] .com27__i[data-on] .com27__filo{ animation:com27-filo .95s var(--cine) both, com27-filo-luz .95s linear both }
  [data-com-lista][data-dir="atras"] .com27__i[data-on] .com27__filo{ animation-name:com27-filo-atras, com27-filo-luz }

  /* Pie bajo la foto: dirección corta en el acento y leyenda */
  .com27__pie{ position:absolute; left:0; bottom:0; width:46%; height:2.6rem; display:flex; gap:.15rem 1rem; flex-wrap:wrap; align-content:start;
    opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .12s linear, transform .12s linear, visibility 0s linear .12s }  /* v27: el pie saliente se va antes de que entre el nuevo */
  .com27__dir{ display:inline }
  .com27__i[data-on] .com27__pie{ opacity:1; visibility:visible; transform:none; transition:opacity .3s var(--curva) .2s, transform .3s var(--curva) .2s, visibility 0s linear .12s }

  .com27__hub{ padding-left:calc(46% + clamp(2rem,4vw,4rem)) }
}

@media (min-width:64rem) and (max-width:79.99rem){
  .com27__txt{ grid-template-columns:1fr }
  .com27__n{ grid-row:auto; margin-bottom:.2rem }
  .com27__lista{ min-height:0 }
}

@keyframes com27-cortina{ from{ clip-path:inset(0 0 0 100%) } to{ clip-path:inset(0 0 0 0) } }
@keyframes com27-cortina-atras{ from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 0 0 0) } }
@keyframes com27-acerca{ from{ transform:scale(1.12) } to{ transform:scale(1) } }
@keyframes com27-filo{ from{ transform:translateX(100%) } to{ transform:translateX(0) } }
@keyframes com27-filo-atras{ from{ transform:translateX(-100%) } to{ transform:translateX(0) } }
@keyframes com27-filo-luz{ 0%,80%{ opacity:1 } 100%{ opacity:0 } }

/* ============================================================
   Celular y tableta: carrusel táctil
   ============================================================ */
@media (max-width:63.99rem){
  .com27__cab{ grid-template-columns:1fr; row-gap:1.1rem }
  .com27__escena{ margin-inline:calc(-1 * var(--canal)) }
  .com27__lista{ display:flex; gap:clamp(.85rem,2.5vw,1.25rem); overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--canal); padding:0 var(--canal) .25rem;
    scrollbar-width:none; -webkit-overflow-scrolling:touch }
  .com27__lista::-webkit-scrollbar{ display:none }
  .com27__i{ flex:0 0 min(80%, 21rem); scroll-snap-align:start; display:flex; flex-direction:column;
    background:var(--noche-2); border-radius:14px; overflow:hidden }
  .com27__a{ display:flex; flex-direction:column; flex:1 }
  .com27__foto{ display:block; aspect-ratio:4 / 4.3; overflow:hidden; background:var(--noche-hondo) }
  .com27__foto picture{ display:block; width:100%; height:100% }
  .com27__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%) }
  .com27__filo,.com27__ir{ display:none }
  .com27__txt{ display:grid; gap:.4rem; padding:1.1rem 1.15rem .5rem }
  .com27__n{ font-size:1.4rem; color:var(--cm) }
  .com27__r{ font-size:1.05rem; color:var(--papel) }
  .com27__pie{ padding:.35rem 1.15rem 1.15rem; font-size:.8rem }
  .com27__pie > span:last-child{ display:block; margin-top:.15rem }
  .com27__a:focus-visible{ outline-offset:-3px; border-radius:14px }

  .com27__mando{ display:flex; align-items:center; gap:.85rem; margin:1.1rem var(--canal) 0 }
  .com27__mando[hidden]{ display:none }
  .com27__btn{ flex:0 0 auto; display:inline-grid; place-items:center; width:2.9rem; height:2.9rem; border-radius:50%;
    background:transparent; color:var(--papel); border:1px solid rgba(244,242,238,.32); cursor:pointer;
    transition:background .2s var(--curva), border-color .2s var(--curva), opacity .2s var(--curva) }
  .com27__btn svg{ width:1.25rem; height:1.25rem }
  .com27__btn:hover{ background:rgba(244,242,238,.12); border-color:rgba(244,242,238,.55) }
  .com27__btn:focus-visible{ outline:3px solid var(--piedra); outline-offset:3px }
  .com27__btn:disabled{ opacity:.35; cursor:default }
  .com27__estado{ margin:0; flex:0 0 auto; min-width:8.5rem; font-family:var(--sans); font-size:.9rem; font-weight:600; color:var(--papel) }
  .com27__regla{ position:relative; flex:1; height:2px; background:rgba(244,242,238,.18); border-radius:2px; overflow:hidden }
  .com27__regla i{ position:absolute; left:0; top:0; bottom:0; width:20%; background:var(--cm,var(--sol));
    transform:translateX(calc(var(--k,0) * 100%)); transition:transform .3s var(--curva), background .3s var(--curva) }
}
@media (min-width:40rem) and (max-width:63.99rem){
  .com27__i{ flex-basis:min(44%, 22rem) }
}
@media (max-width:22.5rem){
  .com27__estado{ min-width:0; font-size:.84rem }
  .com27__mando{ gap:.6rem }
}

/* ============================================================
   Observatorio: una cifra con fecha y fuente
   ============================================================ */
.obs27{ background:var(--piedra); padding-block:clamp(3.75rem,7vw,6.5rem) }
.obs27__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); column-gap:clamp(2rem,6vw,6rem); row-gap:2.5rem; align-items:center }
.obs27 .antetitulo{ color:var(--petroleo-hondo); margin:0 0 var(--e-xs) }
.obs27__t{ margin:0; font-family:var(--lee); font-weight:400; font-size:clamp(1.5rem,1.05rem + 1.4vw,2.35rem); line-height:1.2;
  letter-spacing:-.01em; color:var(--tinta); max-width:22ch; text-wrap:balance }
.obs27__d{ margin:1.1rem 0 0; font-size:1.0625rem; line-height:1.62; color:var(--tinta-2); max-width:44ch }
.obs27__acc{ margin:1.5rem 0 0 }
.obs27 .boton--linea{ color:var(--tinta) }
.obs27 .boton--linea:focus-visible,.obs27 a:focus-visible{ outline:3px solid var(--petroleo); outline-offset:3px }

.obs27__dato{ margin:0; padding-left:clamp(1.5rem,4vw,3.5rem); border-left:1px solid var(--filete-firme) }
.obs27__k{ margin:0 0 .4rem; font-family:var(--sans); font-size:.86rem; font-weight:600; color:var(--petroleo-hondo) }
.obs27__que{ display:block; margin:.35rem 0 0; font-family:var(--lee); font-size:clamp(1.1rem,1rem + .4vw,1.3rem); line-height:1.5; color:var(--tinta); max-width:40ch }
.obs27__viz{ display:block; width:100%; height:clamp(4.5rem,8vw,6.25rem); margin-top:1.5rem; overflow:visible }
.obs27__b{ fill:rgba(20,80,79,.32); transform-box:fill-box; transform-origin:50% 100% }
.obs27__b--cus{ fill:var(--petroleo) }
.obs27__leyenda{ margin:.7rem 0 0; font-family:var(--sans); font-size:.9rem; line-height:1.45; color:var(--tinta-2) }
.obs27__cus{ font-weight:650; color:var(--petroleo-hondo) }
.obs27__f{ margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--filete); font-family:var(--sans); font-size:.82rem; line-height:1.5; color:var(--tinta-2) }
.obs27__f a{ color:var(--tinta); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px }
.obs27__f a:hover{ color:var(--petroleo-hondo) }

/* Las barras crecen una sola vez al entrar (JS pone data-obs-listo solo si hay movimiento) */
[data-obs-listo] .obs27__b{ transform:scaleY(0); transition:transform .7s var(--curva) calc(var(--i) * 28ms + .15s) }
[data-obs-listo][data-obs-ver] .obs27__b{ transform:scaleY(1) }

@media (max-width:55.99rem){
  .obs27__in{ grid-template-columns:1fr }
  .obs27__dato{ padding-left:0; border-left:0; padding-top:2rem; border-top:1px solid var(--filete-firme) }
}

/* ============================================================
   Fundador en banda de noche (ritmo: Proyectos claro, Fundador oscuro, Aliados claro)
   ============================================================ */
.fundador27{ background:var(--noche) }
.fundador27 .fundador13__cita{ color:var(--papel) }
.fundador27 .fundador13__bio{ color:var(--t2) }
.fundador27 .fundador24__acc .liga{ color:var(--papel); --ac:var(--sol) }
.fundador27 .retrato13__foto{ box-shadow:none }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .com27 *,.com27 *::before,.com27 *::after{ animation:none !important; transition:none !important }
  .com27__i[data-on] .com27__n{ transform:none }
  .com27__lista{ scroll-behavior:auto }
  .obs27__b{ transform:none !important; transition:none !important }
}

/* ============================================================================
   v28 (BRIEF_v28)
   · El Ecosistema vuelve: una línea y un botón al pie de Comunidades.
   · Lista negra anti-IA: sin filetes verticales junto al dato del Observatorio
     ni junto a las cifras de Proyectos (el espacio separa); el panel del
     resultado del ICT-5 sin degradado ni brillo; la guía sin la cifra «1»
     suelta (no es una secuencia).
   ========================================================================== */
.com27__eco{ margin:0 0 1.25rem; max-width:52ch; font-family:var(--lee); font-size:1.02rem; line-height:1.6; color:var(--t2) }
.com27__eco a{ color:var(--papel); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em }
.com27__eco a:hover{ text-decoration-color:var(--sol) }
.com27__eco a:focus-visible{ outline:3px solid var(--sol); outline-offset:2px; border-radius:3px }
.com27__acc{ margin:0; display:flex; flex-wrap:wrap; gap:.75rem }
.com27 .com27__eco-b{ color:var(--papel); border-color:rgba(244,242,238,.55) }
.com27 .com27__eco-b:focus-visible{ outline:3px solid var(--sol); outline-offset:3px }
@media (max-width:30rem){ .com27__acc .boton{ width:100%; justify-content:center } }

.obs27__dato{ border-left:0; padding-left:0 }
@media (min-width:56rem){ .obs27__in{ column-gap:clamp(3rem,7vw,7rem) } }
.proy24__cifras{ border-left:0; padding-left:0 }

.ict__res{ background:rgba(6,17,31,.28); box-shadow:none }
.ict__paso{ gap:0 }

/* v28: sin el filo de color de la cortina; el dueño lee las líneas verticales de color como rastro de IA */
.com27__filo::before{ content:none; display:none }
/* v28 · frentes: la etiqueta, en cursiva bajo el título (antes, píldora sobre la foto) */
.barra25 .barra25__etq{ display:block; margin-top:.15rem; padding:0; border-radius:0; background:none; box-shadow:none;
  font-family:var(--lee); font-style:italic; font-weight:400; font-size:.98rem; letter-spacing:0; line-height:1.4; color:var(--sol-2) }