@charset "UTF-8";
/* ============================================================================
   CONECTA COMUNIDAD · NOSOTROS v27 (BRIEF_v27)
   Se carga después de v26-nosotros.css. Dos piezas con más vida, ambas una
   sola vez, la primera vez que entran en pantalla:
   · La definición de comunidad (.def26) se lee: el lema aparece sílaba por
     sílaba, luego la definición de siempre y, palabra por palabra, la nuestra.
     Cada parte subrayada se marca cuando se termina de leer, y su glosa
     (quiénes, dónde, para qué) aparece al mismo tiempo.
   · Los anillos (.nq-capas) nacen desde la escuela hacia afuera: la escuela,
     la confianza y el territorio, como en el pie del dibujo. Al elegir una
     capa, su anillo late una vez.
   Los estados iniciales solo existen cuando JS los pide (data-lee,
   data-anillos) y el movimiento está permitido: sin JS o con movimiento
   reducido, todo se ve completo y quieto.
   ========================================================================== */

/* ---------- La definición, leída ---------- */
.def26__m{ background-size:100% 100%; background-repeat:no-repeat }

.def26[data-lee] .def27-s,
.def26[data-lee] .def26__cat,
.def26[data-lee] .def26__foto,
.def26[data-lee] .def26__antes,
.def26[data-lee] .def26__ahora .def26__k,
.def26[data-lee] .def27-p,
.def26[data-lee] .def26__g,
.def26[data-lee] .def26__puente{ opacity:0 }
.def26[data-lee] .def26__g,
.def26[data-lee] .def26__puente,
.def26[data-lee] .def26__antes{ transform:translateY(8px) }
.def26[data-lee] .def26__foto{ transform:scale(.97) }
.def26[data-lee] .def26__m{ background-size:0% 100% }
.def26[data-lee] .def26__g dt::before{ transform:scaleX(0); transform-origin:left center }

.def26[data-lee][data-leido] .def27-s,
.def26[data-lee][data-leido] .def26__cat,
.def26[data-lee][data-leido] .def26__foto,
.def26[data-lee][data-leido] .def26__antes,
.def26[data-lee][data-leido] .def26__ahora .def26__k,
.def26[data-lee][data-leido] .def27-p,
.def26[data-lee][data-leido] .def26__g,
.def26[data-lee][data-leido] .def26__puente{ opacity:1; transform:none;
  transition:opacity .35s var(--curva) var(--d,0s), transform .45s var(--curva) var(--d,0s) }
.def26[data-lee][data-leido] .def27-p{ transition:opacity .28s var(--curva) var(--d,0s) }
.def26[data-lee][data-leido] .def26__foto{ transition:opacity .7s var(--curva) var(--d,0s), transform 1.1s var(--curva) var(--d,0s) }
.def26[data-lee][data-leido] .def26__m{ background-size:100% 100%; transition:background-size .55s var(--curva) var(--d,0s) }
.def26[data-lee][data-leido] .def26__g dt::before{ transform:none; transition:transform .5s var(--curva) var(--d,0s) }

/* el lema, sílaba por sílaba: el punto medio queda más tenue */
.def27-punto{ color:var(--mudo); font-weight:400 }

/* ---------- Los anillos, desde la escuela hacia afuera ---------- */
.nq-capas__svg .nq-anillo,
.nq-capas__svg .nq-rot{ transform-box:view-box; transform-origin:200px 200px }

.nq-capas[data-anillos] .nq-anillo,
.nq-capas[data-anillos] .nq-rot{ opacity:0 }
.nq-capas[data-anillos] .nq-anillo{ transform:scale(.6) }
.nq-capas[data-anillos][data-anillos-ver] .nq-anillo,
.nq-capas[data-anillos][data-anillos-ver] .nq-rot{ opacity:1; transform:none;
  transition:opacity .5s var(--curva) var(--d,0s), transform .9s cubic-bezier(.2,.9,.25,1.05) var(--d,0s), fill .35s var(--curva), stroke .35s var(--curva) }
.nq-capas[data-anillos] .nq-anillo--esc{ --d:.05s }
.nq-capas[data-anillos] .nq-rot--esc{ --d:.45s }
.nq-capas[data-anillos] .nq-anillo--con{ --d:.4s }
.nq-capas[data-anillos] .nq-rot:nth-of-type(2){ --d:.8s }
.nq-capas[data-anillos] .nq-anillo--fin{ --d:.75s }
.nq-capas[data-anillos] .nq-rot:nth-of-type(1){ --d:1.15s }

/* al elegir una capa, su anillo late una vez */
@keyframes nq27-late{ 0%{ transform:scale(1) } 40%{ transform:scale(1.035) } 100%{ transform:scale(1) } }
.nq-capas[data-late="0"] .nq-anillo--fin,
.nq-capas[data-late="1"] .nq-anillo--con,
.nq-capas[data-late="2"] .nq-anillo--esc{ animation:nq27-late .55s var(--curva) }
[data-capas-js] .nq-anillo:hover{ filter:brightness(1.06) }

@media (prefers-reduced-motion:reduce){
  .def26[data-lee] *{ opacity:1 !important; transform:none !important; transition:none !important }
  .def26[data-lee] .def26__m{ background-size:100% 100% !important }
  .nq-capas .nq-anillo,.nq-capas .nq-rot{ opacity:1 !important; transform:none !important; animation:none !important }
}

/* ============================================================================
   v28 (BRIEF_v28, lista negra anti-IA). Sin barras ni rayas de color junto al
   texto, sin píldoras con punto y sin cajas que solo decoran. El énfasis queda
   en la tipografía, el espacio, las fotos y los dibujos propios (anillos).
   ========================================================================== */

/* Apertura: el rótulo y la firma, como texto (antes: píldora con punto y píldora con borde) */
.pg-nos-ap__k{ font-family:var(--sans); font-size:1rem; font-weight:600; color:var(--sol-2); letter-spacing:0 }
.pg-nos-ap .pg-firma{ padding:0; border-radius:0; box-shadow:none }

/* La cita de prensa: sin la caja oscura con brillo. Una frase grande, con su fuente debajo. */
.pg-historia .pg-cita{ background:none; color:var(--tinta); border-radius:0; overflow:visible; padding:0; max-width:46rem }
.pg-historia .pg-cita::before{ content:none }
.pg-historia .pg-cita p{ font-family:var(--lee); font-weight:500; font-style:italic; font-size:clamp(1.6rem,1.1rem + 1.8vw,2.6rem); line-height:1.2; letter-spacing:-.015em; color:var(--tinta) }
.pg-historia .pg-cita figcaption{ color:var(--mudo) }
.pg-historia .pg-cita cite{ color:var(--tinta) }
.pg-historia .pg-cita__a{ color:var(--petroleo) }
.pg-historia .pg-cita__a:hover{ color:var(--tinta) }
.pg-historia .pg-cita__a:focus-visible{ outline-color:var(--petroleo) }

/* La definición: las glosas sin la rayita de color encima. Cada término lleva el mismo
   subrayado de marcador que su parte en la definición, así se ve qué explica cada una. */
.def26__g dt::before{ content:none }
.def26__g dt{ width:fit-content; height:fit-content; align-self:start; padding:0 .08em; border-radius:2px;
  background:linear-gradient(transparent 62%, var(--m) 62%, var(--m) 94%, transparent 94%) }
.def26__g--quien dt{ --m:color-mix(in srgb, var(--c-quien) 72%, transparent) }
.def26__g--donde dt{ --m:color-mix(in srgb, var(--c-donde) 32%, transparent) }
.def26__g--para  dt{ --m:var(--piedra) }

/* Las tres capas: pestañas de texto con un subrayado, sin cajas ni puntos de color */
.nq-capas__tabs{ gap:0 1.5rem; border-bottom:1px solid var(--filete) }
.nq-tab{ grid-template-columns:1fr; padding:.75rem 0 .8rem; border:0; border-radius:0; background:none; box-shadow:none;
  margin-bottom:-1px; border-bottom:2px solid transparent }
.nq-tab::before{ content:none }
.nq-tab:hover{ border-bottom-color:var(--filete-firme) }
.nq-tab[aria-selected="true"]{ background:none; box-shadow:none; border-bottom-color:var(--tinta) }
.nq-tab[aria-selected="true"] .nq-tab__k{ color:var(--petroleo) }
@media (max-width:35.99rem){
  .nq-capas__tabs{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 .9rem }
  .nq-tab b{ font-size:.92rem }
}

/* Los cuatro frentes: en celular, sin el hilo vertical junto al texto (el número basta) */
@media (max-width:55.99rem){ .nq-ruta li:not(:last-child)::after{ content:none } }

/* Los seis momentos: una secuencia con número, sin las barritas de color encima */
.nq-momentos{ border-top:1px solid var(--filete); padding-top:.9rem }
.nq-momentos li{ padding-top:0; display:flex; align-items:baseline; gap:.4rem }
.nq-momentos li::before{ content:none }
.nq-momentos li span{ font-family:var(--lee); font-size:1.05rem; font-weight:500; color:var(--petroleo) }

/* La ficha de la empresa: sin tarjeta con sombra, filetes finos */
.nq-base .ficha{ background:none; border:0; border-top:1px solid var(--filete-firme); border-radius:0; box-shadow:none; padding:0 }
.nq-base .ficha .liga{ font-weight:600 }
.nq-momentos{ display:flex; flex-wrap:wrap; gap:.7rem 1.6rem }