@charset "UTF-8";
/* ============================================================================
   CONECTA COMUNIDAD · CAPA v11.0 · "Ecosistema"
   ----------------------------------------------------------------------------
   Se carga después de sistema.css y componentes.css. No los reemplaza: los
   eleva con la lógica que hizo atractivas las webs hermanas (Conecta COAR,
   Conecta Escuela, Brújula Vocacional, Conecta con Propósito):
     · fotografía real a sangre con velo y titulares grandes
     · vidrio esmerilado solo sobre foto u oscuro
     · botones en pastilla, cifras que montan sobre la portada
     · demostraciones que avanzan solas hasta que alguien las toca
     · un único juego de curvas y duraciones; todo respeta el movimiento reducido
   Cada espacio del ecosistema tiene su acento propio (sobre noche):
     COAR oro · Escuela grana · Brújula ámbar · Propósito lila · Lab agua
   ========================================================================== */

:root{
  --ac-coar:      #E8C270;
  --ac-escuela:   #EBA3AF;
  --ac-brujula:   #F4A261;
  --ac-proposito: #C3B1EC;
  --ac-lab:       #7CC4BE;
  --ac-casa:      var(--piedra);

  --r-sm:.5rem; --r-md:.875rem; --r-lg:1.25rem; --r-xl:1.75rem;
  --sombra-media: 0 12px 32px -16px rgba(6,17,31,.35);
  --sombra-honda: 0 30px 70px -30px rgba(6,17,31,.65);
  --salida: cubic-bezier(.2,.7,.2,1);

  /* v12: escala única para todo el sitio y acento oro para la acción principal */
  /* v13: escala más contenida (los titulares no tapan las fotos en escritorio) */
  --t-display: clamp(2.2rem, 1.3rem + 2.6vw, 3.6rem);
  --t-h2:      clamp(1.7rem, 1.15rem + 1.5vw, 2.6rem);
  --sol:       #D9A441;
  --sol-2:     #E8C270;
  --sol-hondo: #B9852B;
  --toque:     44px;
  --t-h3:      clamp(1.18rem, 1.04rem + .45vw, 1.45rem);
  --tr-titular: -.02em;
}

/* ---------- Botones en pastilla ---------- */
.boton{ border-radius:999px; padding:.85rem 1.45rem; min-height:3rem }
.boton--vidrio{ background:rgba(244,242,238,.08); color:var(--papel); border-color:rgba(244,242,238,.32);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
.boton--vidrio:hover,.oscuro .boton--vidrio:hover{ background:rgba(244,242,238,.18); border-color:rgba(244,242,238,.55); color:var(--papel) }
.oscuro .boton--vidrio{ background:rgba(244,242,238,.08); color:var(--papel); border-color:rgba(244,242,238,.32) }
.nav__cta{ border-radius:999px }

/* ---------- Vidrio ---------- */
.vidrio{
  background:rgba(10,26,47,.46);
  -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.12), var(--sombra-media);
  border-radius:var(--r-lg);
}
.chip{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.02em;
  padding:.42rem .85rem; border-radius:999px; color:var(--papel);
  background:rgba(10,26,47,.38); box-shadow:inset 0 0 0 1px rgba(244,242,238,.22);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
.chip i{ width:.45rem; height:.45rem; border-radius:50%; background:var(--c, var(--piedra)); box-shadow:0 0 0 3px color-mix(in srgb, var(--c, var(--piedra)) 30%, transparent) }
.chip--claro{ color:var(--tinta); background:rgba(14,23,38,.05); box-shadow:inset 0 0 0 1px rgba(14,23,38,.14) }

/* ---------- Tipografía grande ---------- */
.display{ font-size:var(--t-display); line-height:1.08; letter-spacing:var(--tr-titular); font-weight:650; font-stretch:102%; text-wrap:balance }
.h2{ font-size:var(--t-h2); line-height:1.12; letter-spacing:var(--tr-titular); font-weight:650; font-stretch:101% }
.h3{ font-size:var(--t-h3); line-height:1.22; letter-spacing:-.012em }
.antetitulo{ font-family:var(--sans); font-size:.82rem; font-weight:650; letter-spacing:.01em; text-transform:none; color:var(--ac); margin:0 0 var(--e-sm) }
.entrada{ font-size:var(--t-lede); line-height:1.6; color:var(--t2); max-width:54ch }
.acento-texto{ color:var(--ac) }

/* ---------- Portada v11: titular de cartel ---------- */
.portada--v11{ max-height:none; min-height:max(36rem, 100svh) }
.portada--v11 .portada__velo{ background:
    linear-gradient(to bottom, rgba(10,26,47,.55) 0, rgba(10,26,47,0) 18%),
    radial-gradient(90% 85% at 0% 100%, rgba(10,26,47,.9) 0, rgba(10,26,47,.55) 42%, rgba(10,26,47,0) 78%),
    linear-gradient(to top, rgba(10,26,47,.78) 0, rgba(10,26,47,0) 46%) }
.portada--v11 .portada__in{ padding-bottom:clamp(6.5rem, 14vh, 9rem); padding-top:calc(var(--alto-nav) + 1.5rem) }
.portada--v11 .portada__rejilla{ grid-template-columns:1fr }
.portada--v11 .portada__texto{ max-width:58rem }
.portada--v11 h1{ font-size:var(--t-display); font-weight:650; line-height:1.08; letter-spacing:var(--tr-titular); font-stretch:102%; max-width:20ch; margin-top:var(--e-md) }
.portada--v11 .portada__lede{ display:block; font-size:clamp(1rem,.92rem + .4vw,1.2rem); max-width:46ch; margin-top:var(--e-md) }
.portada--v11 .acciones{ margin-top:var(--e-lg) }
.portada--v11 .boton{ min-height:3rem; padding:.8rem 1.4rem; font-size:.95rem }
.portada--v11 .portada__control{ justify-self:start; margin-top:var(--e-md) }
.portada--v11 .portada__bajar{ display:none }
.portada--v11 h1 .linea{ display:block; overflow:hidden; padding-bottom:.06em }
.portada--v11 h1 .linea > span{ display:inline-block; animation:linea-entra .9s var(--salida) both; animation-delay:calc(var(--n,0) * 110ms + 120ms) }
.portada--v11 .entra-sube{ animation:sube .9s var(--salida) both; animation-delay:calc(var(--n,0) * 90ms + 420ms) }
@keyframes linea-entra{ from{ transform:translateY(105%) } to{ transform:none } }
@keyframes sube{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .portada--v11 h1 .linea > span,.portada--v11 .entra-sube{ animation:none } }
@media (max-width:40rem){
  .portada--v11 h1{ font-size:clamp(1.95rem, 1.3rem + 3.4vw, 2.4rem); max-width:16ch }
  .portada--v11 .portada__velo{ background:
    linear-gradient(to bottom, rgba(10,26,47,.6) 0, rgba(10,26,47,.15) 22%, rgba(10,26,47,.35) 45%),
    linear-gradient(to top, rgba(10,26,47,.95) 0, rgba(10,26,47,.8) 35%, rgba(10,26,47,.25) 70%) }
  .portada--v11 .portada__lede{ font-size:.98rem }
  .portada--v11 .portada__in{ padding-bottom:clamp(8.5rem, 20vh, 10rem) }
  .portada--v11 .acciones{ flex-direction:column; align-items:stretch; max-width:22rem }
}

/* ---------- Cifras que montan sobre la portada ---------- */
.cifras{ position:relative; z-index:3; margin-top:calc(-1 * clamp(4.5rem, 10vh, 6.5rem)) }
.cifras .vidrio{ background:rgba(10,26,47,.9) }
.cifras__in{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:clamp(1rem,2.4vw,1.6rem); gap:0 }
@media (min-width:62rem){ .cifras__in{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.cifra{ padding:clamp(.8rem,1.6vw,1.2rem) clamp(.9rem,2vw,1.6rem); color:var(--papel); position:relative }
.cifra + .cifra::before{ content:""; position:absolute; left:0; top:22%; bottom:22%; width:1px; background:rgba(244,242,238,.16) }
@media (max-width:61.99rem){ .cifra:nth-child(3)::before{ display:none } .cifra:nth-child(n+3){ border-top:1px solid rgba(244,242,238,.12) } }
.cifra__n{ display:block; font-family:var(--sans); font-weight:650; font-stretch:104%; font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem); line-height:1; letter-spacing:-.03em;
  color:var(--papel); font-variant-numeric:tabular-nums }
.cifra__n small{ font-size:.45em; letter-spacing:0; margin-left:.3em; color:var(--piedra) }
.cifra__t{ display:block; margin-top:.55rem; font-family:var(--sans); font-size:.86rem; line-height:1.4; color:#C9D4D7; max-width:22ch }

/* ---------- Propósito y propuesta de valor ---------- */
.proposito{ padding-block:clamp(5rem,10vw,8.5rem) clamp(4rem,8vw,7rem) }
.proposito__cab{ display:grid; gap:var(--e-lg); align-items:end }
@media (min-width:62rem){ .proposito__cab{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:var(--e-2xl) } }
.proposito__frase{ font-family:var(--sans); font-weight:600; font-size:clamp(1.6rem,1rem + 2.4vw,3rem); line-height:1.1; letter-spacing:-.026em; color:var(--tinta); text-wrap:balance }
.proposito__frase em{ font-style:normal; color:var(--petroleo); background:linear-gradient(transparent 62%, rgba(20,80,79,.14) 62%) }

.valor{ list-style:none; padding:0; margin-top:clamp(2.5rem,5vw,4rem); display:grid; gap:var(--e-sm) }
@media (min-width:48rem){ .valor{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:72rem){ .valor{ grid-template-columns:1.25fr 1fr 1fr; grid-template-rows:auto auto } .valor__i:first-child{ grid-row:span 2 } .valor__i:nth-child(3){ grid-column:3; grid-row:1 / span 2 } .valor__i:nth-child(4){ grid-column:2; grid-row:2 } }
.valor__i{ position:relative; overflow:hidden; border-radius:var(--r-lg); min-height:16rem; isolation:isolate; color:var(--papel);
  display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(1.3rem,2.4vw,2rem); background:var(--noche) }
.valor__i:first-child{ min-height:22rem }
.valor__foto{ position:absolute; inset:0; z-index:-2 }
.valor__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); transition:transform 1.2s var(--salida) }
.valor__i:hover .valor__foto img{ transform:scale(1.05) }
.valor__i::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(10,26,47,.94) 0, rgba(10,26,47,.62) 45%, rgba(10,26,47,.2) 100%) }
.valor__i--liso{ background:var(--petroleo) }
.valor__i--liso::after{ background:radial-gradient(120% 90% at 100% 0%, rgba(124,196,190,.22), transparent 60%) }
.valor__n{ font-family:var(--sans); font-size:.78rem; font-weight:650; letter-spacing:.01em; text-transform:none; color:var(--piedra) }
.valor__t{ font-family:var(--sans); font-weight:650; font-size:clamp(1.3rem,1.05rem + .9vw,1.85rem); line-height:1.1; letter-spacing:-.022em; margin-top:.6rem; color:var(--papel) }
.valor__d{ font-family:var(--sans); font-size:.95rem; line-height:1.55; color:#DCE3E6; margin-top:.7rem; max-width:40ch }
.valor__prueba{ display:inline-flex; gap:.5rem; align-items:center; margin-top:1rem; font-family:var(--sans); font-size:.82rem; font-weight:600; color:var(--piedra); text-decoration:none }
.valor__prueba::after{ content:"→"; transition:transform .25s var(--salida) }
.valor__prueba:hover::after{ transform:translateX(4px) }

/* ---------- ECOSISTEMA (portada y página) ---------- */
.eco{ position:relative; background:var(--noche-hondo); color:var(--papel); overflow:hidden; isolation:isolate;
  padding-block:clamp(5rem,10vw,8.5rem); --ac:var(--piedra) }
.eco::before{ content:""; position:absolute; inset:8% -10% auto; height:70%; z-index:-1; pointer-events:none;
  background:radial-gradient(50% 60% at 75% 30%, color-mix(in srgb, var(--eco-c, var(--piedra)) 22%, transparent), transparent 70%);
  transition:background .8s ease }
.eco__cab{ display:grid; gap:var(--e-md); align-items:end }
@media (min-width:62rem){ .eco__cab{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--e-2xl) } }
.eco__cab .entrada{ color:#C9D4D7 }

/* Recorrido: la vida escolar como una línea con cinco paradas */
.ruta{ list-style:none; padding:0; margin:clamp(2.5rem,5vw,3.5rem) 0 0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:relative }
.ruta::before{ content:""; position:absolute; left:10%; right:10%; top:1.05rem; height:1px; background:linear-gradient(90deg, var(--ac-escuela), var(--ac-brujula), var(--ac-coar), var(--ac-proposito), var(--ac-lab)); opacity:.6 }
.ruta li{ text-align:center; padding:0 .4rem; position:relative }
.ruta__p{ width:2.1rem; height:2.1rem; margin:0 auto; border-radius:50%; display:grid; place-items:center; background:var(--noche-hondo);
  box-shadow:inset 0 0 0 1.5px var(--c); font-family:var(--sans); font-size:.78rem; font-weight:700; color:var(--c) }
.ruta__t{ display:block; margin-top:.7rem; font-family:var(--sans); font-size:.82rem; font-weight:650; color:var(--papel) }
.ruta__d{ display:block; font-family:var(--sans); font-size:.76rem; line-height:1.35; color:#9FB4B8; margin-top:.2rem }
@media (max-width:47.99rem){
  .ruta{ grid-template-columns:1fr; gap:.9rem; text-align:left }
  .ruta::before{ left:1.05rem; right:auto; top:1rem; bottom:1rem; width:1px; height:auto; background:linear-gradient(180deg, var(--ac-escuela), var(--ac-brujula), var(--ac-coar), var(--ac-proposito), var(--ac-lab)) }
  .ruta li{ text-align:left; display:grid; grid-template-columns:2.1rem 1fr; column-gap:.9rem; padding:0 }
  .ruta__p{ margin:0; grid-row:span 2 }
  .ruta__t{ margin-top:.1rem }
}

/* Selector de espacios: pestañas a la izquierda, escenario a la derecha */
.eco__panel{ margin-top:clamp(2.5rem,5vw,4rem); display:grid; gap:clamp(1.5rem,3vw,2.5rem) }
@media (min-width:64rem){ .eco__panel{ grid-template-columns:minmax(0,22rem) minmax(0,1fr); align-items:stretch } }
.eco__tabs{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; align-content:start }
@media (max-width:63.99rem){ .eco__tabs{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:.5rem; padding-bottom:.4rem; margin-inline:calc(-1 * var(--canal)); padding-inline:var(--canal); scrollbar-width:none } .eco__tabs::-webkit-scrollbar{ display:none } .eco__tabs li{ flex:0 0 auto; scroll-snap-align:start } }
.eco__tab{ appearance:none; width:100%; text-align:left; cursor:pointer; border:0; color:var(--papel); font:inherit;
  display:grid; grid-template-columns:auto 1fr; gap:.15rem .85rem; align-items:center; padding:.95rem 1.1rem; border-radius:var(--r-md);
  background:rgba(244,242,238,.04); box-shadow:inset 0 0 0 1px rgba(244,242,238,.08); position:relative; overflow:hidden;
  transition:background .3s ease, box-shadow .3s ease }
.eco__tab:hover{ background:rgba(244,242,238,.08) }
.eco__tab[aria-selected="true"]{ background:color-mix(in srgb, var(--c) 14%, rgba(244,242,238,.04)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent) }
.eco__tab i{ grid-row:span 2; width:.7rem; height:.7rem; border-radius:50%; background:var(--c); box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent) }
.eco__tab b{ font-family:var(--sans); font-size:1rem; font-weight:650; letter-spacing:-.01em }
.eco__tab span{ font-family:var(--sans); font-size:.8rem; color:#9FB4B8; line-height:1.35 }
.eco__tab::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--c); transform:scaleX(0); transform-origin:left; opacity:.9 }
.eco__panel[data-auto="true"] .eco__tab[aria-selected="true"]::after{ animation:avance var(--intervalo,7s) linear forwards }
@media (max-width:63.99rem){ .eco__tab{ width:auto; grid-template-columns:auto auto; padding:.7rem 1rem } .eco__tab span{ display:none } .eco__tab i{ grid-row:auto } }

.eco__escena{ position:relative; min-height:clamp(30rem, 52vw, 38rem) }
.eco__vista{ position:absolute; inset:0; display:grid; gap:var(--e-lg); align-content:start; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .55s ease, transform .7s var(--salida), visibility 0s .55s }
.eco__vista[data-on="true"]{ opacity:1; visibility:visible; transform:none; transition:opacity .55s ease, transform .7s var(--salida) }
@media (min-width:48rem){ .eco__vista{ grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); align-items:center } }
@media (max-width:63.99rem){ .eco__escena{ min-height:0; display:grid } .eco__vista{ position:relative; grid-area:1/1 } }
.eco__texto{ --ac:var(--c) }
.eco__marca{ display:flex; align-items:center; gap:.7rem; font-family:var(--sans); font-weight:650; font-size:1.05rem; color:var(--papel) }
.eco__marca img{ height:2.1rem; width:auto }
.eco__marca .iso{ width:2.1rem; height:2.1rem; border-radius:.55rem; display:grid; place-items:center; background:color-mix(in srgb, var(--c) 18%, var(--noche)); color:var(--c) }
.eco__marca .iso svg{ width:1.2rem; height:1.2rem }
.eco__t{ font-family:var(--sans); font-weight:650; font-size:clamp(1.6rem,1.1rem + 1.8vw,2.5rem); line-height:1.06; letter-spacing:-.026em; margin-top:var(--e-md); color:var(--papel); text-wrap:balance }
.eco__d{ font-family:var(--sans); font-size:.98rem; line-height:1.6; color:#C9D4D7; margin-top:var(--e-sm); max-width:44ch }
.eco__datos{ list-style:none; padding:0; margin:var(--e-md) 0 0; display:grid; gap:.55rem }
.eco__datos li{ display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:baseline; font-family:var(--sans); font-size:.9rem; color:#DCE3E6; line-height:1.45 }
.eco__datos li::before{ content:""; width:.42rem; height:.42rem; border-radius:50%; background:var(--c); transform:translateY(-.1rem) }
.eco__datos small{ color:#8FA6AA; font-size:.78rem }
.eco__para{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:var(--e-md) }
.eco__para span{ font-family:var(--sans); font-size:.74rem; font-weight:600; padding:.3rem .65rem; border-radius:999px; color:var(--c); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent) }
.eco__acciones{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:var(--e-lg) }
.eco__acciones .boton:not(.boton--vidrio){ background:var(--c); border-color:var(--c); color:var(--tinta) }
.eco__acciones .boton:not(.boton--vidrio):hover{ background:color-mix(in srgb, var(--c) 82%, white); border-color:transparent }

/* Dispositivos: computadora y celular con las webs reales */
.disp{ position:relative; display:block; padding-bottom:8%; padding-right:9%; text-decoration:none }
.capitulo .eco__vista{ grid-area:auto }
.disp__pc{ position:relative; border-radius:.9rem; background:#0B1220; padding:.55rem .55rem 0; box-shadow:var(--sombra-honda), inset 0 0 0 1px rgba(255,255,255,.08) }
.disp__barra{ display:flex; align-items:center; gap:.3rem; padding:.15rem .35rem .5rem }
.disp__barra i{ width:.42rem; height:.42rem; border-radius:50%; background:rgba(255,255,255,.18) }
.disp__barra span{ margin-left:.6rem; flex:1; font-family:var(--sans); font-size:.62rem; color:#8FA6AA; background:rgba(255,255,255,.06); border-radius:999px; padding:.18rem .7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.disp__pc img{ border-radius:.35rem .35rem 0 0; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top }
.disp__movil{ position:absolute; right:0; bottom:0; width:27%; min-width:6.5rem; border-radius:1.4rem; padding:.32rem; background:#0B1220;
  box-shadow:var(--sombra-honda), inset 0 0 0 1px rgba(255,255,255,.12); transform:translateY(0); transition:transform .9s var(--salida) }
.disp__movil img{ border-radius:1.1rem; width:100%; aspect-ratio:9/19.5; object-fit:cover; object-position:top }
.disp__movil::before{ content:""; position:absolute; top:.6rem; left:50%; width:28%; height:.42rem; margin-left:-14%; border-radius:999px; background:#0B1220; z-index:1 }
.eco__vista[data-on="true"] .disp__movil{ animation:flota 6s ease-in-out infinite }
@keyframes flota{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
@media (prefers-reduced-motion:reduce){ .eco__vista[data-on="true"] .disp__movil{ animation:none } }

/* Conecta Lab: no tiene web pública; su escena se dibuja en código */
.lab-escena{ border-radius:var(--r-lg); padding:clamp(1.2rem,2.5vw,2rem); background:linear-gradient(160deg, #0F3B3B, #0A1A2F 70%);
  box-shadow:var(--sombra-honda), inset 0 0 0 1px rgba(124,196,190,.2); display:grid; gap:1.2rem }
.lab-escena__cab{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; font-family:var(--sans) }
.lab-escena__cab b{ font-size:clamp(2.4rem,1.6rem + 2.6vw,3.6rem); font-weight:650; letter-spacing:-.03em; color:var(--ac-lab); line-height:1 }
.lab-escena__cab span{ font-size:.82rem; color:#C9D4D7; max-width:24ch; text-align:right; line-height:1.4 }
.puntos{ display:grid; grid-template-columns:repeat(20,1fr); gap:clamp(3px,.5vw,6px) }
.puntos i{ aspect-ratio:1; border-radius:50%; background:rgba(124,196,190,.18); transition:background .4s ease; transition-delay:calc(var(--d,0) * 6ms) }
.puntos[data-encendido="true"] i{ background:rgba(124,196,190,.42) }
.puntos i.uno{ background:var(--ac-lab) !important; box-shadow:0 0 0 3px rgba(124,196,190,.25); animation:late 2.4s ease-in-out infinite }
@keyframes late{ 0%,100%{ box-shadow:0 0 0 3px rgba(124,196,190,.25) } 50%{ box-shadow:0 0 0 7px rgba(124,196,190,.08) } }
@media (prefers-reduced-motion:reduce){ .puntos i.uno{ animation:none } }
.lab-escena__fuente{ font-family:var(--sans); font-size:.74rem; color:#8FA6AA }

/* ---------- Frentes compactos (portada) ---------- */
.frentes3{ padding-block:clamp(5rem,9vw,8rem) }
.frentes3__cab{ display:grid; gap:var(--e-md); align-items:end; margin-bottom:clamp(2rem,4vw,3rem) }
@media (min-width:62rem){ .frentes3__cab{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--e-2xl) } }

/* ---------- Proyectos en territorio: tarjetas de foto ---------- */
.lugares{ list-style:none; padding:0; margin:0; display:grid; gap:var(--e-sm) }
@media (min-width:56rem){ .lugares{ grid-template-columns:1.4fr 1fr 1fr } }
.lugar{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:26rem; isolation:isolate; color:var(--papel); background:var(--noche) }
.lugar a{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(1.3rem,2.4vw,2rem); text-decoration:none; color:inherit }
.lugar__foto{ position:absolute; inset:0; z-index:-2 }
.lugar__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); transition:transform 1.2s var(--salida) }
.lugar:hover .lugar__foto img{ transform:scale(1.06) }
.lugar::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(10,26,47,.95), rgba(10,26,47,.35) 55%, rgba(10,26,47,.05)) }
.lugar__sitio{ font-family:var(--sans); font-size:.78rem; font-weight:650; letter-spacing:.01em; text-transform:none; color:var(--piedra) }
.lugar__t{ font-family:var(--sans); font-weight:650; font-size:clamp(1.45rem,1.1rem + 1.1vw,2.1rem); line-height:1.06; letter-spacing:-.024em; margin-top:.5rem }
.lugar__d{ font-family:var(--sans); font-size:.92rem; line-height:1.5; color:#DCE3E6; margin-top:.6rem; max-width:38ch }
.lugar__alianza{ display:inline-flex; margin-top:1rem; align-self:flex-start }
.lugar__ir{ position:absolute; top:1.2rem; right:1.2rem; width:2.6rem; height:2.6rem; border-radius:50%; display:grid; place-items:center;
  background:rgba(244,242,238,.12); box-shadow:inset 0 0 0 1px rgba(244,242,238,.25); transition:background .3s ease, transform .3s var(--salida) }
.lugar:hover .lugar__ir{ background:var(--piedra); color:var(--tinta); transform:rotate(-45deg) }

/* ---------- Método: el 5P como anillo y la regla del ICT-5 ---------- */
.metodo5{ position:relative; overflow:hidden; isolation:isolate; padding-block:clamp(5rem,9vw,8rem) }
.metodo5__rej{ display:grid; gap:clamp(2.5rem,5vw,4rem); align-items:center }
@media (min-width:62rem){ .metodo5__rej{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) } }
.anillo{ position:relative; width:min(100%, 30rem); aspect-ratio:1; margin-inline:auto }
.anillo svg{ width:100%; height:100% }
.anillo__centro{ position:absolute; inset:30%; border-radius:50%; display:grid; place-items:center; text-align:center; padding:1rem;
  background:rgba(6,17,31,.4); box-shadow:inset 0 0 0 1px rgba(216,203,179,.25) }
.anillo__centro b{ display:block; font-family:var(--sans); font-size:clamp(1.4rem,1rem + 1.4vw,2.2rem); font-weight:650; color:var(--piedra); letter-spacing:-.02em; line-height:1 }
.anillo__centro span{ display:block; font-family:var(--sans); font-size:.78rem; color:#C5D3D5; margin-top:.4rem; line-height:1.35 }
.anillo__p{ position:absolute; transform:translate(-50%,-50%); appearance:none; border:0; cursor:pointer; font:inherit;
  width:clamp(4.6rem, 9vw, 5.8rem); aspect-ratio:1; border-radius:50%; display:grid; place-content:center; text-align:center;
  background:var(--petroleo-hondo); color:var(--papel); box-shadow:inset 0 0 0 1.5px rgba(216,203,179,.5), var(--sombra-media); transition:background .3s ease, transform .3s var(--salida) }
.anillo__p b{ font-family:var(--sans); font-size:.72rem; color:var(--piedra); font-weight:700; letter-spacing:.08em }
.anillo__p span{ font-family:var(--sans); font-size:clamp(.66rem,.56rem + .26vw,.8rem); font-weight:650; margin-top:.1rem }
.anillo__p:hover,.anillo__p[aria-pressed="true"]{ background:var(--piedra); color:var(--tinta); transform:translate(-50%,-50%) scale(1.06) }
.anillo__p:hover b,.anillo__p[aria-pressed="true"] b{ color:var(--petroleo) }
.anillo__nota{ text-align:center; font-family:var(--sans); font-size:.9rem; color:#DCE3E6; margin-top:var(--e-md); min-height:3.2em; max-width:36ch; margin-inline:auto }
.anillo__nota b{ color:var(--piedra) }
.regla{ list-style:none; padding:0; margin:var(--e-lg) 0 0; display:grid; gap:.7rem }
.regla li{ display:grid; grid-template-columns:2.4rem 1fr; gap:.9rem; align-items:start; font-family:var(--sans); font-size:.95rem; line-height:1.5; color:#DCE3E6 }
.regla li b{ display:block; color:var(--papel); font-weight:650 }
.regla__n{ width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.82rem; color:var(--piedra); box-shadow:inset 0 0 0 1px rgba(216,203,179,.4) }

/* ---------- Página Ecosistema: órbita ---------- */
.orbita{ position:relative; width:min(100%, 40rem); aspect-ratio:1; margin-inline:auto }
.orbita svg.orbita__lineas{ position:absolute; inset:0; width:100%; height:100% }
.orbita__nodo{ position:absolute; transform:translate(-50%,-50%); text-decoration:none; text-align:center; width:clamp(6.5rem, 15vw, 8.5rem) }
.orbita__nodo i{ display:block; width:clamp(3.4rem,7vw,4.4rem); aspect-ratio:1; margin:0 auto; border-radius:50%; background:color-mix(in srgb, var(--c) 18%, var(--noche));
  box-shadow:inset 0 0 0 1.5px var(--c), 0 0 0 0 color-mix(in srgb, var(--c) 40%, transparent); display:grid; place-items:center; color:var(--c); transition:box-shadow .4s ease, transform .4s var(--salida) }
.orbita__nodo i svg{ width:42%; height:42% }
.orbita__nodo:hover i,.orbita__nodo:focus-visible i{ transform:scale(1.08); box-shadow:inset 0 0 0 1.5px var(--c), 0 0 0 10px color-mix(in srgb, var(--c) 14%, transparent) }
.orbita__nodo b{ display:block; margin-top:.55rem; font-family:var(--sans); font-size:.86rem; font-weight:650; color:var(--papel) }
.orbita__nodo span{ display:block; font-family:var(--sans); font-size:.72rem; color:#9FB4B8; line-height:1.3; margin-top:.15rem }
.orbita__centro{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:34%; aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; text-align:center; background:radial-gradient(circle, #11253F, #0A1A2F); box-shadow:inset 0 0 0 1px rgba(216,203,179,.35), 0 0 80px rgba(216,203,179,.12) }
.orbita__centro img{ width:72%; height:auto }
.orbita__centro small{ display:block; font-family:var(--sans); font-size:.7rem; color:var(--piedra); margin-top:.4rem; letter-spacing:.06em }
.orbita__lineas circle{ fill:none; stroke:rgba(216,203,179,.16); stroke-dasharray:2 6 }
.orbita__lineas line{ stroke:rgba(216,203,179,.22); stroke-width:1 }
.orbita__lineas .pulso{ stroke-dasharray:6 200; animation:pulso 4s linear infinite }
@keyframes pulso{ to{ stroke-dashoffset:-206 } }
@media (prefers-reduced-motion:reduce){ .orbita__lineas .pulso{ animation:none; stroke-dasharray:none } }
@media (max-width:40rem){ .orbita__nodo span{ display:none } }

/* Capítulo por espacio: una "landing" dentro de la página */
.capitulo{ position:relative; isolation:isolate; overflow:hidden; color:var(--papel); background:var(--noche); padding-block:clamp(5rem,10vw,8rem); --ac:var(--c) }
.capitulo__fondo{ position:absolute; inset:0; z-index:-2 }
.capitulo__fondo img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); scale:1.1 }
@supports (animation-timeline:view()){
  .capitulo__fondo img{ animation:paralaje linear both; animation-timeline:view() }
  @keyframes paralaje{ from{ translate:0 -5% } to{ translate:0 5% } }
}
.capitulo::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(6,17,31,.95) 0, rgba(6,17,31,.82) 42%, rgba(6,17,31,.45) 100%),
             radial-gradient(60% 70% at 85% 20%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%) }
.capitulo__rej{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center }
@media (min-width:62rem){ .capitulo__rej{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) } .capitulo--inv .capitulo__rej > :first-child{ order:2 } }
.capitulo__n{ font-family:var(--sans); font-size:.8rem; font-weight:700; letter-spacing:.01em; color:var(--c); text-transform:none }
.capitulo__t{ font-family:var(--sans); font-weight:650; font-size:var(--t-h2); line-height:1.12; letter-spacing:var(--tr-titular); margin-top:var(--e-sm); text-wrap:balance; color:var(--papel) }
.capitulo__d{ font-family:var(--sans); font-size:1.02rem; line-height:1.65; color:#DCE3E6; margin-top:var(--e-md); max-width:48ch }
.capitulo__cifras{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:var(--e-lg); padding:1rem }
.capitulo__cifras div{ padding:.4rem .8rem; position:relative }
.capitulo__cifras div + div::before{ content:""; position:absolute; left:0; top:15%; bottom:15%; width:1px; background:rgba(244,242,238,.16) }
.capitulo__cifras b{ display:block; font-family:var(--sans); font-weight:650; font-size:clamp(1.35rem,1rem + 1.2vw,2rem); letter-spacing:-.025em; color:var(--c); line-height:1.05 }
.capitulo__cifras span{ display:block; font-family:var(--sans); font-size:.76rem; line-height:1.35; color:#C9D4D7; margin-top:.35rem }
@media (max-width:30rem){ .capitulo__cifras{ grid-template-columns:1fr; } .capitulo__cifras div + div::before{ display:none } .capitulo__cifras div + div{ border-top:1px solid rgba(244,242,238,.12) } }
.capitulo__vinculo{ margin-top:var(--e-lg); padding:1rem 1.2rem; font-family:var(--sans); font-size:.9rem; line-height:1.55; color:#DCE3E6 }
.capitulo__vinculo b{ color:var(--c); display:block; font-size:.74rem; letter-spacing:.01em; text-transform:none; margin-bottom:.3rem }

/* Matriz actor × espacio */
.matriz{ width:100%; border-collapse:separate; border-spacing:0; font-family:var(--sans); font-size:.9rem; min-width:40rem }
.matriz-cont{ overflow-x:auto; margin-top:var(--e-xl); border-radius:var(--r-lg); box-shadow:inset 0 0 0 1px var(--filete); background:var(--blanco) }
.matriz th,.matriz td{ padding:1rem 1.1rem; text-align:left; border-bottom:1px solid var(--filete); vertical-align:top }
.matriz thead th{ font-size:.78rem; letter-spacing:.01em; text-transform:none; color:var(--mudo); font-weight:650 }
.matriz thead th span{ display:inline-block; width:.55rem; height:.55rem; border-radius:50%; background:var(--c); margin-right:.45rem; vertical-align:.05em }
.matriz tbody th{ font-weight:650; color:var(--tinta); white-space:nowrap }
.matriz td{ color:var(--tinta-2); line-height:1.45 }
.matriz td.si::before{ content:"●"; color:var(--petroleo); margin-right:.4rem; font-size:.7em; vertical-align:.15em }
.matriz tr:last-child th,.matriz tr:last-child td{ border-bottom:0 }

/* ---------- Aparición escalonada ---------- */
.rv [data-entra]{ transition-duration:.75s; transition-timing-function:var(--salida) }

/* ---------- Ajustes de navegación para 7 enlaces ---------- */
@media (min-width:72.01rem) and (max-width:84rem){ .nav__lista{ gap:.85rem } .nav__lista a{ font-size:.84rem } }
.nav__lista a.nav__eco{ color:var(--papel) }
.nav__lista a.nav__eco::before{ content:""; display:inline-block; width:.42rem; height:.42rem; border-radius:50%; margin-right:.45rem; vertical-align:.08em;
  background:conic-gradient(var(--ac-escuela), var(--ac-brujula), var(--ac-coar), var(--ac-proposito), var(--ac-lab), var(--ac-escuela)) }

/* Pie: espacios del ecosistema con su punto de color */
.pie__eco li a::before{ content:""; display:inline-block; width:.4rem; height:.4rem; border-radius:50%; background:var(--c); margin-right:.5rem; vertical-align:.1em }

/* ---------- Utilidades ---------- */
.mt-3xl{ margin-top:var(--e-3xl) }
.centro{ text-align:center; margin-inline:auto }
.banda--papel{ background:var(--papel) }
.banda--blanca{ background:var(--blanco) }

/* ============================================================================
   v12 · SISTEMA COMÚN
   Escala única, un solo antetítulo, acción principal en oro, entradas
   escalonadas, áreas táctiles y foco coherentes. Contraste calculado (WCAG 2.1):
     tinta / sol 7.99 · noche / sol 7.77 · tinta / sol-2 10.59 (hover)
     petróleo / papel 8.2 (antetítulo sobre claro) · piedra / noche 10.9 (sobre oscuro)
   ========================================================================== */

/* Escala única de titulares de sección */
.titular,.h2,.monumento,.grupo__t,.franja__t,.capitulo__t{
  font-family:var(--sans); font-size:var(--t-h2); line-height:1.12; letter-spacing:var(--tr-titular); font-weight:650; font-stretch:101%; text-wrap:balance }
/* Aire coherente bajo los titulares de sección */
.titular + .entrada,.h2 + .entrada,.titular + .lede,.h2 + .lede,.h2 + p,.titular + p{ margin-top:var(--e-md) }

/* Un solo antetítulo en el color de acento. v22: en minúscula de oración, sin versalitas espaciadas.
   El rótulo heredado se ve exactamente igual. */
.antetitulo,.rotulo{
  font-family:var(--sans); font-size:.9rem; font-weight:650; line-height:1.4; letter-spacing:.01em; text-transform:none;
  font-stretch:100%; color:var(--ac); margin:0 0 var(--e-sm) }

/* Acción principal en oro. Texto tinta sobre oscuro; noche sobre claro. */
.boton,.oscuro .boton,.nav__cta,.eco__acciones .boton:not(.boton--vidrio):not(.boton--linea){
  background:var(--sol); border-color:var(--sol); color:var(--noche) }
.oscuro .boton{ color:var(--tinta) }
.boton:hover,.oscuro .boton:hover,.nav__cta:hover,.eco__acciones .boton:not(.boton--vidrio):not(.boton--linea):hover{
  background:var(--sol-2); border-color:var(--sol-2); color:var(--tinta) }
.boton--linea,.oscuro .boton--linea{ background:transparent; color:var(--t1); border-color:currentColor }
.boton--linea:hover{ background:var(--noche); color:var(--papel); border-color:var(--noche) }
.oscuro .boton--linea:hover{ background:var(--papel); color:var(--tinta); border-color:var(--papel) }
.boton--vidrio,.oscuro .boton--vidrio{ background:rgba(244,242,238,.08); color:var(--papel); border-color:rgba(244,242,238,.32) }
.boton--vidrio:hover,.oscuro .boton--vidrio:hover{ background:rgba(244,242,238,.18); border-color:rgba(244,242,238,.55); color:var(--papel) }

/* Cierre: en la tipografía de cartel, sin cursiva */
.cierre__t{ font-family:var(--sans); font-style:normal; font-weight:650; font-size:var(--t-display); line-height:1.08;
  letter-spacing:var(--tr-titular); font-stretch:102%; color:var(--papel); text-wrap:balance }

/* Entradas escalonadas: --i en cada bloque (0, 1, 2…) */
.rv [data-entra]{ transition-delay:calc(var(--i, 0) * 90ms + var(--retardo, 0s)) }
.rv [data-entra]:not(.visto){ transform:translate3d(0, 22px, 0) }
@media (prefers-reduced-motion:reduce){ .rv [data-entra]{ transition-delay:0s } }

/* Foco visible: el mismo anillo en todo el sitio, piedra sobre oscuro y petróleo sobre claro */
:focus-visible{ outline:3px solid var(--foco); outline-offset:3px; border-radius:2px }
.boton:focus-visible,.chip:focus-visible,.eco__tab:focus-visible{ border-radius:999px }
.pie,.nav,.oscuro,.cierre,.portada,.capitulo,.eco,.valor__i,.lugar{ --foco:var(--piedra) }
.lugar a:focus-visible,.valor__i a:focus-visible,.eco__tab:focus-visible{ outline-offset:-4px }

/* Áreas táctiles (WCAG 2.5.8: mínimo 24 px; en pantallas táctiles, 44 px) */
.nav__lista a{ display:inline-flex; align-items:center; min-height:2.75rem; padding-block:0 }
.nav__lista a::after{ bottom:.35rem }
@media (max-width:62rem){ .nav__lista a{ display:flex; min-height:3rem } }
.pie__col a{ display:inline-flex; align-items:center; min-height:1.85rem }
.liga--flecha,.valor__prueba{ position:relative }
.liga--flecha::before,.valor__prueba::before{ content:""; position:absolute; inset:-.6rem -.3rem }
.valor__prueba{ min-height:1.75rem }
.portada__barra{ width:max(1.6rem, 24px); padding-block:1.05rem }
@media (max-width:40rem){ .portada__barra{ width:1.5rem } }
@media (pointer:coarse){
  .pie__col a,.valor__prueba{ min-height:var(--toque) }
  .pie__det-in a{ display:inline-flex; align-items:center; min-height:1.75rem }
}

/* Textos pequeños sobre fotografía: una sombra mínima para que se lean sobre cualquier zona */
.portada__lugar,.portada__lede,.portada__rotulo,.fundido__pie,.valor__n,.valor__d,.valor__prueba,
.lugar__sitio,.lugar__d,.capitulo__n,.capitulo__d,.cierre__lede,.portadilla__lede,.e404__p,
.portada .antetitulo,.portada .rotulo,.portadilla .rotulo,.portadilla .antetitulo,.cierre .antetitulo,.capitulo .antetitulo{
  text-shadow:0 1px 2px rgba(6,17,31,.6) }

/* Formulario: estado con salida por correo y copia del mensaje */
.form__estado a{ color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:.2em }
.form__copiar{ display:inline-flex; align-items:center; min-height:var(--toque); margin-top:.6rem; padding:.45rem 1rem; border-radius:999px;
  border:1px solid currentColor; background:transparent; color:inherit; font-family:var(--sans); font-size:.88rem; font-weight:650; cursor:pointer }
.form__copiar:hover{ background:var(--petroleo); border-color:var(--petroleo); color:var(--papel) }
.form__copiar[data-copiado="true"]{ background:var(--petroleo); border-color:var(--petroleo); color:var(--papel) }
.trampa{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden }

/* Páginas legales (/privacidad/) */
.legal__cab{ padding-block:calc(var(--alto-nav) + clamp(3rem,7vw,5.5rem)) clamp(3rem,6vw,4.5rem) }
.legal__cab .entrada{ color:#DCE3E6; margin-top:var(--e-md) }
.legal{ display:grid; gap:var(--e-xl); padding-block:clamp(3rem,6vw,5rem) var(--banda) }
@media (min-width:62rem){ .legal{ grid-template-columns:minmax(0,16rem) minmax(0,1fr); gap:var(--e-2xl); align-items:start } .legal__indice{ position:sticky; top:calc(var(--alto-nav) + 1.5rem) } }
.legal__indice ol{ list-style:none; padding:0; margin:0; display:grid; gap:0; font-family:var(--sans); font-size:.9rem; counter-reset:l }
.legal__indice li{ counter-increment:l }
.legal__indice a{ display:flex; gap:.6rem; align-items:center; min-height:2.5rem; color:var(--tinta-2); text-decoration:none; border-bottom:1px solid var(--filete) }
.legal__indice a::before{ content:counter(l, decimal-leading-zero); font-size:.75rem; font-weight:650; color:var(--petroleo); letter-spacing:.06em }
.legal__indice a:hover{ color:var(--tinta) }
.legal__texto{ max-width:var(--medida) }
.legal__s + .legal__s{ margin-top:var(--e-xl) }
.legal__h{ font-size:var(--t-h3); line-height:1.22; letter-spacing:-.012em; font-weight:650; margin-bottom:var(--e-sm) }
.legal__s p{ color:var(--tinta-2) }
.legal__s p + p{ margin-top:var(--e-sm) }
.legal__s strong{ color:var(--tinta) }

/* v14 · Sin rayitas decorativas antes o después de los antetítulos y rótulos,
   en todo el sitio (manda sobre las hojas de cada página). */
.antetitulo::before,.antetitulo::after,.rotulo::before,.rotulo::after,
.inicio .antetitulo::before,.inicio .sec-cab--centro .antetitulo::after{ content:none !important; display:none !important }

/* v24: sin el punto delante de Ecosistema; parecía una notificación. */
.nav__lista a.nav__eco::before{ content:none; display:none }
.nav__lista a.nav__eco{ color:inherit }