@charset "UTF-8";
/* ============================================================================
   CONECTA COMUNIDAD · v24 · Qué hacemos: desarrollo territorial de raíz (/que-hacemos/)
   v24: subíndice fijo (.subnav), brújula de los cuatro frentes (#encaje), puentes entre piezas;
   se retiran las píldoras de índice de la apertura y «Por qué empezamos en la escuela».
   Prefijo dt-. Campos de sistema.css (noche, petróleo, piedra, papel) y acentos del
   ecosistema (v11.css). El acento cálido --dt-manda nombra una sola cosa: lo que limita.
   v21: el árbol, el instrumento, el 3D, la especialidad y el financiamiento viven en dt-*.css propios.
   v22: «Cómo encaja todo» (dt-enc), enlace dt-ir, rótulos sin mayúsculas; sin compromisos ni reglas muertas.
   v24b: #porque con cifra grande y lista; #regiones propia; #encaje vive en v24-frentes.css; la reflexión abre el cierre;
   el subíndice se retira mientras la barra de los frentes está fija.
   v20: sin filetes gruesos; las agrupaciones se hacen con fondos suaves y aire.
   La fuerza visual vive en dos piezas: el árbol con fotos y el territorio en 3D.
   ========================================================================== */
.dt{ --dt-manda:#F4A261; --dt-r:14px; --dt-r-s:10px }
.dt-sube{ animation:sube .9s var(--salida) both; animation-delay:calc(var(--n,0) * 100ms + 120ms) }
@media (prefers-reduced-motion:reduce){ .dt-sube{ animation:none } }
.dt-ico{ display:block }

/* ---------------------------------------------------------------- 1 · Apertura con carrusel */
.dt-ap .qap__t{ max-width:16ch }
.dt-carr{ position:absolute; inset:0; z-index:-2; background:var(--noche) }
.dt-carr__d{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease }
.dt-carr__d.es-on{ opacity:1 }
.dt-carr__d img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); transform:scale(1.06); transition:transform 9s linear }
.dt-carr__d.es-on img{ transform:scale(1) }
@media (prefers-reduced-motion:reduce){ .dt-carr__d,.dt-carr__d img{ transition:none; transform:none } }
.dt-carr__ctrl{ position:absolute; left:0; right:0; bottom:1rem; display:flex; align-items:center; gap:var(--e-sm); justify-content:space-between }
.dt-carr__pie{ font-family:var(--sans); font-size:.8rem; line-height:1.4; color:rgba(244,242,238,.78); min-width:12rem; max-width:24rem; flex:1 1 0; text-align:left }
.dt-carr__ps{ list-style:none; margin:0; padding:0; display:flex; gap:.35rem }
.dt-carr__p{ min-height:var(--toque); padding:0 .35rem; background:none; border:0; cursor:pointer; display:flex; align-items:center }
.dt-carr__p span{ font-family:var(--sans); font-size:.78rem; font-weight:600; color:rgba(244,242,238,.7); padding:.3rem .7rem; border-radius:999px; transition:background .25s ease,color .25s ease }
.dt-carr__p[aria-pressed="true"] span{ background:rgba(244,242,238,.92); color:var(--tinta) }
.dt-carr__p:hover span{ color:var(--papel) }
.dt-carr__p[aria-pressed="true"]:hover span{ color:var(--tinta) }
.dt-carr__pausa{ width:var(--toque); height:var(--toque); border-radius:50%; border:1px solid rgba(244,242,238,.4); background:rgba(10,26,47,.35); color:var(--papel); cursor:pointer; display:grid; place-items:center }
.dt-carr__pausa svg{ width:.8rem; height:.8rem }
.dt-carr__pausa .ic-play,.dt-carr__pausa[aria-pressed="true"] .ic-pausa{ display:none }
.dt-carr__pausa[aria-pressed="true"] .ic-play{ display:block }

/* ---------------------------------------------------------------- 2 · Por qué se puede (v24b)
   Una cifra grande (cuánto hay) y tres en lista con filete (dónde hace más falta). Sin rellenos ni iconos. */
.dt-porque{ padding-block:5.5rem }
.dt-porque__g{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--e-xl) clamp(2.5rem,6vw,6rem); align-items:end }
.dt-porque__cab{ grid-column:1 / -1; margin-bottom:0 }
.dt-porque__t{ max-width:24ch !important }
.dt-mayor{ margin:0; align-self:start }
.dt-mayor__n{ margin:0; font-family:var(--sans); color:var(--petroleo); line-height:.9; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.3em }
.dt-mayor__n b{ font-size:clamp(4rem,2.4rem + 6vw,8.25rem); font-weight:650; letter-spacing:-.045em; font-variant-numeric:tabular-nums; white-space:nowrap }
.dt-mayor__n span{ font-size:clamp(1.3rem,1rem + 1vw,2rem); font-weight:600; letter-spacing:-.02em }
.dt-mayor figcaption{ margin-top:var(--e-md); max-width:44ch; font-family:var(--lee); font-size:1.08rem; line-height:1.6; color:var(--tinta-2) }
.dt-mayor figcaption .dt-dato__f{ display:flex; width:fit-content; margin-top:.6rem }
.dt-datos{ list-style:none; margin:0; padding:0; align-self:start; border-bottom:1px solid var(--filete-firme) }
.dt-dato{ display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:var(--e-md); align-items:baseline; padding:var(--e-md) 0; border-top:1px solid var(--filete-firme) }
.dt-dato__n{ font-family:var(--sans); font-size:2.1rem; font-weight:650; letter-spacing:-.03em; line-height:1; color:var(--tinta); font-variant-numeric:tabular-nums; white-space:nowrap }
.dt-dato__n small{ display:block; margin-top:.3rem; font-size:.86rem; font-weight:600; letter-spacing:0; color:var(--tinta-2) }
.dt-dato__t{ margin:0; font-size:1rem; line-height:1.55; color:var(--tinta-2) }
.dt-dato__f{ display:inline-flex; align-items:center; gap:.3rem; font-family:var(--sans); font-size:.8rem; color:var(--mudo); text-decoration:underline; text-decoration-color:rgba(10,26,47,.25); text-underline-offset:.2em }
.dt-dato__f:hover{ color:var(--tinta); text-decoration-color:currentColor }
.dt-dato__f svg{ width:.65rem; height:.65rem }
@media (max-width:63.99rem){
  .dt-porque{ padding-block:4rem }
  .dt-porque__g{ grid-template-columns:1fr; gap:var(--e-lg) }
  .dt-dato{ grid-template-columns:6.5rem minmax(0,1fr); gap:var(--e-sm) }
  .dt-dato__n{ font-size:1.7rem }
}
@media (max-width:30rem){
  .dt-dato{ grid-template-columns:1fr; gap:.45rem }
  .dt-dato__n small{ display:inline; margin-left:.3rem }
}

/* ---------------------------------------------------------------- Costa, sierra y selva (#regiones, v24b) */
.dt-reg .ce3{ margin-top:0; padding-top:0; border-top:0 }

/* ---------------------------------------------------------------- Compromisos (v24b: lista con filete) */
.dt-comp__in{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,5rem); align-items:center }
.dt-comp__foto{ margin:0 }
.dt-comp__foto img{ width:100%; aspect-ratio:4/4.4; object-fit:cover; object-position:50% 40%; border-radius:var(--dt-r) }
.dt-comp__foto figcaption{ margin-top:.6rem; font-family:var(--sans); font-size:.86rem; color:var(--mudo) }
.dt-comp .entrada{ margin-top:var(--e-sm) }
.dt-comp__l{ list-style:none; margin:var(--e-lg) 0 0; padding:0; border-bottom:1px solid var(--filete-firme) }
.dt-comp__l li{ display:flex; gap:var(--e-sm); align-items:flex-start; padding:var(--e-sm) 0; border-top:1px solid var(--filete-firme) }
.dt-comp__l .dt-ico{ flex:0 0 auto; width:1.6rem; height:1.6rem; margin-top:.1rem; color:var(--petroleo) }
.dt-comp__l b{ display:block; font-family:var(--sans); font-size:1.06rem; color:var(--tinta); line-height:1.3 }
.dt-comp__l span{ display:block; margin-top:.2rem; color:var(--tinta-2); line-height:1.5 }
.dt-sigue{ margin:var(--e-lg) 0 0; color:var(--tinta-2); line-height:1.6; font-family:var(--sans) }
.dt-sigue .dt-ir{ margin-left:.25rem }

/* ---------------------------------------------------------------- 7 · Seis momentos */
.dt-mom__etapas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--e-sm); margin-bottom:.5rem }
.dt-mom__etapas span{ font-family:var(--sans); font-weight:650; font-size:.95rem; color:var(--piedra); text-align:center; padding:.45rem; border-radius:999px; background:rgba(216,203,179,.1) }
.dt-mom__tabs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--e-sm) }
.dt-mom__tabs button{ width:100%; height:100%; display:grid; justify-items:center; align-content:start; gap:.25rem; padding:var(--e-sm) .5rem; border:0; border-radius:var(--dt-r-s); background:rgba(244,242,238,.05); color:var(--suave-claro); cursor:pointer; font-family:var(--sans); text-align:center; transition:background .25s ease, color .25s ease }
.dt-mom__tabs button:hover{ background:rgba(244,242,238,.1) }
.dt-mom__ic .dt-ico{ width:2.6rem; height:2.6rem; padding:.6rem; border-radius:50%; background:rgba(216,203,179,.18); color:var(--piedra); transition:background .25s ease,color .25s ease }
.dt-mom__n{ font-size:.78rem; font-weight:700; color:var(--suave-claro) }
.dt-mom__tabs b{ font-size:1rem; color:var(--papel) }
.dt-mom__tabs small{ font-size:.8rem; color:var(--suave-claro) }
.dt-mom__tabs button[aria-selected="true"]{ background:var(--papel); color:var(--tinta) }
.dt-mom__tabs button[aria-selected="true"] b{ color:var(--tinta) }
.dt-mom__tabs button[aria-selected="true"] small,.dt-mom__tabs button[aria-selected="true"] .dt-mom__n{ color:var(--mudo) }
.dt-mom__tabs button[aria-selected="true"] .dt-ico{ background:var(--petroleo); color:var(--papel) }
.dt-mom__p{ margin-top:var(--e-md); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); border-radius:var(--dt-r); overflow:hidden; background:var(--petroleo-hondo) }
.dt-mom__p[hidden]{ display:none }
.dt-mom__foto{ position:relative; min-height:22rem }
.dt-mom__foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.dt-mom__et{ position:absolute; left:1rem; top:1rem; font-family:var(--sans); font-size:.82rem; font-weight:650; color:var(--tinta); background:var(--piedra); padding:.3rem .8rem; border-radius:999px }
.dt-mom__txt{ padding:clamp(1.25rem,3vw,2.5rem); display:grid; gap:var(--e-sm); align-content:start }
.dt-mom__h{ font-family:var(--sans); font-size:.9rem; font-weight:600; color:var(--piedra) }
.dt-mom__txt h3{ font-size:clamp(1.35rem,1.1rem + .8vw,1.8rem); color:var(--papel); line-height:1.2 }
.dt-mom__txt ul{ margin:0; padding:0; list-style:none; display:grid; gap:.5rem }
.dt-mom__txt li{ position:relative; padding-left:1.6rem; color:#DCE3E6; line-height:1.5 }
.dt-mom__txt li::before{ content:""; position:absolute; left:0; top:.35em; width:1rem; height:1rem; border-radius:50%; background:var(--piedra); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/70% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/70% no-repeat }
.dt-mom__dl{ display:grid; grid-template-columns:1fr 1fr; gap:var(--e-sm); margin-top:.3rem }
.dt-mom__dl > div{ padding:var(--e-sm); border-radius:var(--dt-r-s); background:rgba(244,242,238,.06) }
.dt-mom__dl b{ font-family:var(--sans); font-size:.82rem; font-weight:650; color:var(--piedra) }
.dt-mom__dl p{ margin-top:.25rem; font-family:var(--sans); font-size:.92rem; line-height:1.45; color:var(--papel) }
.dt-mom__chips{ display:flex; flex-wrap:wrap; gap:.3rem }
.dt-mom__chips span{ font-size:.78rem; font-weight:600; padding:.2rem .6rem; border-radius:999px; background:rgba(216,203,179,.16); color:var(--piedra) }
.dt-mom__nav{ display:flex; justify-content:space-between; gap:var(--e-sm); margin-top:.3rem }
.dt-mom__mv{ font-family:var(--sans); font-weight:650; font-size:.88rem; color:var(--papel); background:none; border:1px solid rgba(244,242,238,.3); border-radius:999px; padding:.5rem 1rem; min-height:var(--toque); cursor:pointer }
.dt-mom__mv:hover{ background:var(--papel); color:var(--tinta) }
.dt-mom__mv--sig{ margin-left:auto }
.dt-mom__mv[hidden]{ display:none }
.dt-ciclo__regla{ margin:var(--e-xl) auto 0; max-width:52ch; text-align:center; font-size:var(--t-lede); line-height:1.55; color:var(--piedra); font-style:italic }

/* ---------------------------------------------------------------- 11 · Cierre (v24b: abre con la reflexión) */
.dt-cta__q{ margin:0 0 var(--e-lg); max-width:46ch }
.dt-cta__q p{ font-family:var(--lee); font-style:italic; font-size:clamp(1.1rem,1rem + .45vw,1.35rem); line-height:1.5; color:var(--piedra); text-wrap:pretty }
.dt-cta{ position:relative; isolation:isolate; overflow:hidden; background:var(--noche); padding-block:var(--banda) }
.dt-cta__foto{ position:absolute; inset:0; z-index:-2 }
.dt-cta__foto img{ width:100%; height:100%; object-fit:cover; object-position:50% 45% }
.dt-cta::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, rgba(10,26,47,.94) 0%, rgba(10,26,47,.82) 45%, rgba(20,80,79,.55) 100%) }
.dt-cta__in{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:center }
.dt-cta__t{ font-family:var(--sans); font-size:var(--t-display); line-height:1.06; font-weight:650; letter-spacing:-.03em; color:var(--papel); max-width:16ch }
.dt-cta__lede{ margin-top:var(--e-md); font-size:var(--t-lede); line-height:1.55; color:#E3EAEA; max-width:44ch }
.dt-cta__chips{ list-style:none; margin:var(--e-lg) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.55rem }
.dt-cta__chip{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; font-family:var(--sans); font-weight:650; font-size:.94rem; min-height:var(--toque); padding:.7rem 1.15rem; border-radius:999px; color:var(--tinta); background:var(--piedra); transition:background .2s ease }
.dt-cta__chip:hover{ background:var(--papel) }
.dt-cta__chips li:not(:first-child) .dt-cta__chip{ background:rgba(244,242,238,.1); color:var(--papel); box-shadow:inset 0 0 0 1px var(--filete-piedra) }
.dt-cta__chips li:not(:first-child) .dt-cta__chip:hover{ background:var(--piedra); color:var(--tinta) }
.dt-cta__pasos{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e-xs) }
.dt-cta__pasos li{ display:grid; grid-template-columns:2.6rem minmax(0,1fr); gap:.1rem .9rem; padding:var(--e-md); border-radius:var(--dt-r-s); background:rgba(10,26,47,.6); font-family:var(--sans) }
.dt-cta__pasos span{ grid-row:span 2; width:2.4rem; height:2.4rem; display:grid; place-items:center; border-radius:50%; background:var(--piedra); color:var(--tinta); font-weight:700 }
.dt-cta__pasos b{ color:var(--papel); font-size:1.08rem }
.dt-cta__pasos p{ color:var(--suave-claro); font-size:.92rem; line-height:1.45 }
.dt-cta__pie{ position:absolute; left:0; right:0; bottom:.9rem; margin:0 auto; text-align:right; font-family:var(--sans); font-size:.76rem; color:rgba(244,242,238,.65) }

/* ---------------------------------------------------------------- v22 · Rótulos sin mayúsculas espaciadas (brief v22) */
.dt .antetitulo{ text-transform:none; letter-spacing:.01em; font-size:.95rem }

/* ---------------------------------------------------------------- Enlace de paso (dt-ir) */
.dt-ir{ display:inline-flex; align-items:center; gap:.5rem; min-height:var(--toque); font-family:var(--sans); font-weight:650; font-size:.94rem; color:var(--petroleo);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.25em; text-decoration-color:rgba(20,80,79,.35); transition:color .2s ease, text-decoration-color .2s ease }
.dt-ir:hover{ text-decoration-color:currentColor }
.dt-ir svg{ flex:0 0 auto; transition:transform .25s var(--salida) }
.dt-ir:hover svg{ transform:translateX(3px) }
@media (prefers-reduced-motion:reduce){ .dt-ir svg{ transition:none } }

/* ---------------------------------------------------------------- v24 · Apertura, subíndice, puentes y anclas */
.dt-ap__ir{ margin:var(--e-xs) 0 0 }
.dt-ancla{ height:0 }
.dt-puente{ padding-top:clamp(3rem,6vw,4.5rem) }
.dt-puente p{ font-family:var(--lee); font-size:var(--t-lede); line-height:1.5; color:var(--tinta-2); text-align:center; max-width:40ch }
.dt-puente + .banda{ padding-top:clamp(2rem,4vw,3rem) }
/* El subíndice solo se fija en escritorio; en el teléfono queda bajo la apertura y no roba pantalla. */
.dt-sub .subnav__in{ justify-content:safe center }
@media (min-width:64rem){
  .dt{ --dt-sub:3.45rem }
  .dt .ar-panel{ top:calc(var(--alto-nav) + var(--dt-sub) + 1rem); max-height:calc(100vh - var(--alto-nav) - var(--dt-sub) - 2rem) }
  .dt .ce3__izq{ top:calc(var(--alto-nav) + var(--dt-sub) + 1.25rem) }
  .dt .t3-fig{ top:calc(var(--alto-nav) + var(--dt-sub) + 1rem) }
  /* v24b: mientras la barra de los cuatro frentes está fija, el subíndice se retira y ella sube a su lugar */
  .dt-sub{ transition:transform .3s var(--salida), opacity .2s ease, visibility 0s linear 0s }
  .dt-fr-fijo .dt{ --dt-sub:0px }
  .dt-fr-fijo .dt-sub{ transform:translateY(-100%); opacity:0; visibility:hidden; pointer-events:none; transition:transform .3s var(--salida), opacity .2s ease, visibility 0s linear .3s }
}
@media (min-width:64rem) and (prefers-reduced-motion:reduce){ .dt-sub,.dt-fr-fijo .dt-sub{ transition:none } }
@media (max-width:63.99rem){
  .dt-sub{ position:relative; top:auto }
  html:has(.dt-sub){ scroll-padding-top:calc(var(--alto-nav) + 1rem) }
}

/* ---------------------------------------------------------------- Responsive */
@media (max-width:63.99rem){
  .dt-cta__in,.dt-comp__in{ grid-template-columns:1fr }
  .dt-comp__foto img{ aspect-ratio:16/10 }
  .dt-mom__tabs{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .dt-mom__etapas{ display:none }
  .dt-mom__p{ grid-template-columns:1fr }
  .dt-mom__foto{ min-height:15rem }
  .dt-carr__pie{ display:none }
}
@media (max-width:47.99rem){
  .dt-mom__tabs{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .dt-mom__dl{ grid-template-columns:1fr }
  .dt-carr__ps{ display:none }
  .dt-carr__ctrl{ justify-content:flex-end }
  .dt-cta__pie{ text-align:center }
}