/* v25 · Nosotros, «Qué es Conecta».
   Tres capas (territorio, confianza, escuela) dibujadas como anillos que se
   recorren con pestañas; luego los cuatro frentes en el orden comercial y
   cómo se financia. Solo afecta a .nq dentro de /nosotros/. */

.nq{ --nq-fin:#DCE6E4; --nq-con:#ECE4D4; --nq-gap:clamp(3.5rem, 7vw, 6rem) }

/* Cabecera: la fórmula como enunciado */
.nq__cab{ display:grid; gap:var(--e-md); max-width:72rem; margin:0 auto var(--nq-gap) }
.nq__cab .rotulo{ font-size:1rem; font-weight:650; letter-spacing:0; color:var(--petroleo) }
.nq__t{ font-family:var(--lee); font-weight:500; font-size:clamp(1.75rem, 1.1rem + 2.2vw, 3.05rem); line-height:1.14; letter-spacing:-.012em; color:var(--tinta); max-width:24ch; text-wrap:balance }
.nq__t span{ display:block; margin-top:.2em }
.nq__d{ font-family:var(--lee); font-size:var(--t-lede); line-height:1.6; color:var(--tinta-2); max-width:40ch }
@media (min-width:62rem){
  .nq__cab{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); column-gap:clamp(3rem,6vw,6rem); align-items:end }
  .nq__cab .rotulo{ grid-column:1 / -1 }
  .nq__d{ padding-bottom:.4rem }
}

/* Tres capas */
.nq-capas{ display:grid; gap:var(--e-xl); max-width:72rem; margin:0 auto var(--nq-gap); align-items:center }
@media (min-width:60rem){ .nq-capas{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(3rem,6vw,6rem) } }

.nq-capas__fig{ margin:0; display:grid; justify-items:center; gap:var(--e-sm) }
.nq-capas__svg{ width:min(100%, 19rem); height:auto; display:block; overflow:visible }
.nq-capas__pie{ font-family:var(--sans); font-size:var(--t-nota); color:var(--mudo); text-align:center; max-width:30ch }

.nq-anillo{ transition:fill .35s var(--curva), stroke .35s var(--curva), filter .35s var(--curva) }
.nq-anillo--fin{ fill:var(--nq-fin); stroke:rgba(20,80,79,.28); stroke-width:1.5 }
.nq-anillo--con{ fill:var(--nq-con); stroke:rgba(14,23,38,.16); stroke-width:1.5 }
.nq-anillo--esc image{ filter:saturate(.35) contrast(.95); transition:filter .35s var(--curva) }
.nq-anillo__borde{ fill:none; stroke:var(--sol); stroke-width:3; transition:stroke-width .35s var(--curva) }
.nq-rot{ font-family:var(--sans); font-size:15px; font-weight:650; letter-spacing:.01em; fill:var(--tinta); transition:fill .35s var(--curva); pointer-events:none }
.nq-rot--esc{ fill:var(--tinta) }
[data-capas-js] .nq-anillo{ cursor:pointer }

.nq-capas[data-activa="0"] .nq-anillo--fin{ fill:var(--petroleo); stroke:var(--petroleo) }
.nq-capas[data-activa="0"] .nq-rot:nth-of-type(1){ fill:var(--papel) }
.nq-capas[data-activa="1"] .nq-anillo--con{ fill:var(--piedra); stroke:#B9A983 }
.nq-capas[data-activa="2"] .nq-anillo--esc image{ filter:none }
.nq-capas[data-activa="2"] .nq-anillo__borde{ stroke-width:7 }
.nq-capas:not([data-activa]) .nq-anillo--esc image{ filter:none }

/* Pestañas */
.nq-capas__lado{ display:grid; gap:var(--e-md); min-width:0 }
.nq-capas__tabs{ display:grid; grid-template-columns:1fr; gap:.5rem }
@media (min-width:36rem){ .nq-capas__svg{ width:min(100%, 30rem) } .nq-capas__tabs{ grid-template-columns:repeat(3, minmax(0,1fr)) } }
.nq-capas__tabs[hidden]{ display:none }
.nq-tab{ display:grid; grid-template-columns:auto 1fr; column-gap:.6rem; align-items:start; text-align:left; font:inherit; color:var(--tinta-2);
  padding:.8rem .85rem; border-radius:10px; border:1px solid var(--filete); background:transparent; cursor:pointer;
  transition:background-color .25s var(--curva), border-color .25s var(--curva), color .25s var(--curva) }
.nq-tab::before{ content:""; grid-row:1 / span 2; width:.8rem; height:.8rem; margin-top:.2rem; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(14,23,38,.18) }
.nq-tab__k{ font-family:var(--sans); font-size:.82rem; font-weight:600; color:var(--mudo) }
.nq-tab b{ font-family:var(--sans); font-size:.98rem; font-weight:650; line-height:1.25; color:var(--tinta) }
.nq-tab:hover{ border-color:var(--filete-firme) }
.nq-tab[aria-selected="true"]{ background:var(--blanco); border-color:var(--filete-firme); box-shadow:0 1px 0 rgba(14,23,38,.04), 0 8px 22px -14px rgba(14,23,38,.35) }
.nq-tab[aria-selected="true"]::before{ box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 32%, transparent) }
.nq-tab:focus-visible{ outline:2px solid var(--petroleo); outline-offset:3px }

/* Paneles */
.nq-panel{ display:grid; gap:.55rem; align-content:start }
.nq-panel[hidden]{ display:none }
.nq-panel:focus-visible{ outline:2px solid var(--petroleo); outline-offset:6px; border-radius:12px }
.nq-panel + .nq-panel{ margin-top:var(--e-lg) }
[data-capas-js] .nq-panel + .nq-panel{ margin-top:0 }
.nq-panel__foto{ display:block; margin-bottom:.6rem; border-radius:12px; overflow:hidden; aspect-ratio:16 / 9; background:var(--niebla) }
.nq-panel__foto img{ width:100%; height:100%; object-fit:cover; display:block }
.nq-panel__k{ font-family:var(--sans); font-size:.92rem; font-weight:650; color:var(--petroleo) }
.nq-panel__t{ font-family:var(--sans); font-size:var(--t-seccion); font-weight:650; line-height:1.15; letter-spacing:-.015em; color:var(--tinta) }
.nq-panel__d{ font-family:var(--lee); font-size:var(--t-cuerpo); line-height:1.65; color:var(--tinta-2); max-width:46ch }
.nq-panel .liga{ justify-self:start; margin-top:.3rem; font-family:var(--sans); font-size:.95rem }
@media (prefers-reduced-motion:no-preference){
  [data-capas-js] .nq-panel:not([hidden]){ animation:nq-entra .4s var(--curva) both }
  @keyframes nq-entra{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
}

/* Cuatro frentes, en orden */
.nq-frentes{ max-width:72rem; margin:0 auto var(--nq-gap); padding-top:var(--e-xl); border-top:1px solid var(--filete) }
.nq-frentes__cab{ display:grid; gap:.5rem; margin-bottom:var(--e-xl) }
.nq-frentes__t{ font-family:var(--sans); font-size:var(--t-seccion); font-weight:650; line-height:1.15; letter-spacing:-.015em; color:var(--tinta) }
.nq-frentes__d{ font-family:var(--lee); font-size:var(--t-cuerpo); color:var(--tinta-2) }
@media (min-width:62rem){ .nq-frentes__cab{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); column-gap:clamp(3rem,6vw,6rem); align-items:end } }

.nq-ruta{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e-lg); counter-reset:none }
.nq-ruta li{ position:relative; display:grid; grid-template-columns:2.4rem 1fr; column-gap:1rem; row-gap:.2rem; align-content:start }
.nq-ruta__n{ grid-row:1 / span 3; width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center; font-family:var(--sans); font-weight:650; font-size:.95rem;
  color:var(--papel); background:var(--petroleo); position:relative; z-index:1 }
.nq-ruta li:first-child .nq-ruta__n{ background:var(--sol); color:var(--tinta) }
.nq-ruta__v{ font-family:var(--sans); font-size:1.22rem; font-weight:650; line-height:1.2; color:var(--tinta); letter-spacing:-.01em }
.nq-ruta__f{ font-family:var(--sans); font-size:.92rem; font-weight:600; color:var(--petroleo) }
.nq-ruta__d{ font-family:var(--lee); font-size:.98rem; line-height:1.55; color:var(--tinta-2); margin-top:.2rem }
/* hilo que une los pasos (vertical en móvil) */
.nq-ruta li:not(:last-child)::after{ content:""; position:absolute; left:calc(1.2rem - 1px); top:2.4rem; bottom:calc(-1 * var(--e-lg)); width:2px; background:linear-gradient(var(--petroleo), rgba(20,80,79,.25)) }
@media (min-width:56rem){
  .nq-ruta{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--e-md) }
  .nq-ruta li{ grid-template-columns:1fr; row-gap:.35rem }
  .nq-ruta__n{ grid-row:auto; margin-bottom:.6rem }
  .nq-ruta li:not(:last-child)::after{ left:2.9rem; right:calc(-1 * var(--e-md) + .5rem); top:calc(1.2rem - 1px); bottom:auto; width:auto; height:2px; background:linear-gradient(90deg, var(--petroleo), rgba(20,80,79,.25)) }
}

/* Cómo se financia: primero, al final */
.nq-fin{ margin-top:var(--e-xl) }
.nq-fin__k{ font-family:var(--sans); font-size:1rem; font-weight:650; color:var(--tinta); margin-bottom:.75rem }
.nq-fin__barra{ display:grid; gap:4px }
.nq-fin__barra p{ margin:0; padding:1.05rem 1.25rem; font-family:var(--sans); font-size:.95rem; line-height:1.5 }
.nq-fin__barra b{ display:block; font-size:1.02rem; font-weight:650; margin-bottom:.2rem }
.nq-fin__a{ background:var(--petroleo); color:#E4ECEB; border-radius:10px 10px 4px 4px }
.nq-fin__a b{ color:var(--papel) }
.nq-fin__b{ background:var(--nq-con); color:var(--tinta-2); border-radius:4px 4px 10px 10px }
.nq-fin__b b{ color:var(--tinta) }
.nq-fin__nota{ margin-top:.75rem; font-family:var(--sans); font-size:var(--t-nota); color:var(--mudo) }
@media (min-width:56rem){
  .nq-fin__barra{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:0 }
  .nq-fin__a{ border-radius:10px 0 0 10px; padding-right:2.4rem; clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%) }
  .nq-fin__b{ border-radius:0 10px 10px 0; margin-left:-14px; padding-left:2.2rem }
}

/* Base: equipo, momentos, ficha */
.nq-base{ max-width:72rem; margin-inline:auto }
.nq-base__t{ font-family:var(--sans); font-size:var(--t-seccion); font-weight:650; line-height:1.15; letter-spacing:-.015em; color:var(--tinta); margin-bottom:var(--e-sm) }
.nq-base .cuerpo + .nq-momentos{ margin-top:var(--e-sm) }
.nq-momentos{ list-style:none; margin:0 0 var(--e-md); padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem .5rem }
.nq-momentos li{ font-family:var(--sans); font-size:.92rem; font-weight:600; color:var(--tinta); padding-top:.6rem; position:relative }
.nq-momentos li::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; border-radius:2px; background:var(--petroleo); opacity:calc(.3 + var(--k, 0) * .14) }
.nq-momentos li:nth-child(1){ --k:0 } .nq-momentos li:nth-child(2){ --k:1 } .nq-momentos li:nth-child(3){ --k:2 }
.nq-momentos li:nth-child(4){ --k:3 } .nq-momentos li:nth-child(5){ --k:4 } .nq-momentos li:nth-child(6){ --k:5 }
@media (min-width:40rem){ .nq-momentos{ grid-template-columns:repeat(6, minmax(0,1fr)) } }

@media (prefers-reduced-motion:reduce){
  .nq-anillo,.nq-anillo--esc image,.nq-anillo__borde,.nq-rot,.nq-tab{ transition:none }
}