@charset "UTF-8";
/* ============================================================================
   CONECTA COMUNIDAD · PORTADA v25 (BRIEF_v25)
   Se carga después de v24-portada.css. Dos piezas:
   · «Qué somos» (.qs25): la frase y un recorrido con tres pestañas (fin,
     condición, punto de partida). Cada una trae su foto real de Ticumpinía,
     su texto, dónde se ve y el enlace a su página. Sin la raíz de puntitos.
   · «Un fin, cuatro frentes» (.frentes25): las barras paralelas de la v12 que
     se abren, ahora con cuatro frentes. Fila desde 72rem, dos columnas entre
     40 y 72rem, apiladas en celular.
   Mismos tokens y tipografías del sitio.
   ========================================================================== */

/* ---------- Qué somos ---------- */
.qs25{ background:var(--papel) }
.qs25__cab{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); column-gap:clamp(2rem,6vw,6rem);
  align-items:end; margin-bottom:clamp(2.25rem,4.5vw,3.75rem) }
.qs25__cab .antetitulo{ grid-column:1 / -1 }
.qs25__t{ font-family:var(--lee); font-weight:400; font-size:clamp(1.8rem,1.1rem + 2.1vw,3.1rem);
  line-height:1.14; letter-spacing:-.014em; color:var(--tinta); max-width:22ch; text-wrap:balance; margin:0 }
.qs25__lado{ display:grid; gap:var(--e-sm); padding-bottom:.35rem }
.qs25__lado p{ margin:0; font-size:1.0625rem; line-height:1.65; color:var(--tinta-2, #2A3443); max-width:44ch }
.qs25__lado p:first-child{ color:var(--tinta); font-family:var(--sans); font-weight:550; font-size:1.08rem; line-height:1.5 }

.qs{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(1.75rem,4vw,4rem); align-items:start }

/* Fotos: apiladas en la misma celda; solo se ve la activa */
.qs__fotos{ display:grid }
.qs__foto{ grid-area:1 / 1; margin:0; opacity:0; visibility:hidden;
  transition:opacity .6s var(--curva), visibility 0s linear .6s }
.qs__foto[data-on]{ opacity:1; visibility:visible; transition:opacity .6s var(--curva), visibility 0s }
.qs__foto picture{ display:block; aspect-ratio:4 / 3; overflow:hidden; border-radius:10px; background:var(--piedra) }
.qs__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%);
  transform:scale(1.045); transition:transform 1.6s var(--salida, var(--curva)) }
.qs__foto[data-on] img{ transform:scale(1) }
.qs__foto figcaption{ margin-top:.7rem; font-family:var(--sans); font-size:.92rem; line-height:1.45; color:var(--mudo) }

/* Pestañas */
.qs__tabs{ display:grid; gap:.3rem }
.qs__tabs[hidden]{ display:none }
.qs__tab{ display:grid; grid-template-columns:3.4rem minmax(0,1fr); align-items:center; column-gap:1rem;
  width:100%; min-height:var(--toque,44px); padding:.65rem .9rem .65rem .65rem; margin:0; border:0; border-radius:14px;
  background:transparent; color:var(--tinta); font:inherit; text-align:left; cursor:pointer;
  transition:background-color .3s ease }
.qs__tab:hover{ background:rgba(216,203,179,.24) }
.qs__tab[aria-selected="true"]{ background:rgba(216,203,179,.5); cursor:default }
.qs__tab:focus-visible{ outline:2px solid var(--petroleo); outline-offset:2px }
.qs__mini{ width:3.4rem; height:3.4rem; border-radius:50%; background:var(--piedra) var(--mini) center / cover no-repeat;
  filter:saturate(.35); opacity:.82; transition:filter .4s ease, opacity .4s ease, box-shadow .4s ease }
.qs__tab:hover .qs__mini{ filter:saturate(.8); opacity:1 }
.qs__tab[aria-selected="true"] .qs__mini{ filter:none; opacity:1; box-shadow:0 0 0 2px var(--papel), 0 0 0 4px var(--petroleo) }
.qs__tt{ display:grid; gap:.1rem }
.qs__nivel{ font-family:var(--sans); font-size:.9rem; font-weight:600; line-height:1.3; color:var(--mudo) }
.qs__tab[aria-selected="true"] .qs__nivel{ color:var(--petroleo) }
.qs__nombre{ font-family:var(--sans); font-size:clamp(1.08rem,.98rem + .35vw,1.3rem); font-weight:550; line-height:1.2; letter-spacing:-.012em }

/* Paneles */
.qs__paneles{ display:grid; gap:var(--e-lg) }
.qs--js .qs__paneles{ margin-top:1.1rem; padding-top:1.35rem; border-top:1px solid var(--filete) }
.qs__panel{ display:grid; gap:var(--e-sm); align-content:start }
.qs__panel[hidden]{ display:none }
.qs--js .qs__panel:not([hidden]){ animation:qs-entra .45s var(--curva) both }
@keyframes qs-entra{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.qs__pt{ margin:0; font-family:var(--sans); font-size:1.3rem; font-weight:600; line-height:1.2; color:var(--tinta) }
.qs__pt span{ display:block; font-size:.9rem; color:var(--petroleo) }
.qs--js .qs__pt{ position:absolute !important; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap }
.qs__d{ margin:0; font-family:var(--lee); font-size:1.1rem; line-height:1.62; color:var(--tinta); max-width:42ch }
.qs__lugar{ margin:0; font-family:var(--sans); font-size:1rem; line-height:1.55; color:var(--tinta-2, #2A3443); max-width:44ch }
.qs__lugar span{ display:block; margin-bottom:.15rem; font-size:.9rem; font-weight:600; color:var(--petroleo) }
.qs__ir{ margin:.35rem 0 0 }

@media (max-width:63.99rem){
  .qs25__cab{ grid-template-columns:1fr; row-gap:var(--e-md) }
  .qs{ grid-template-columns:1fr; row-gap:var(--e-md) }
  .qs__foto picture{ aspect-ratio:3 / 2 }
  .qs__mini{ width:2.75rem; height:2.75rem }
  .qs__tab{ grid-template-columns:2.75rem minmax(0,1fr); column-gap:.85rem; padding:.5rem .75rem .5rem .5rem }
}
@media (max-width:39.99rem){
  .qs__foto picture{ aspect-ratio:4 / 3 }
  .qs__d{ font-size:1.05rem }
}
@media (prefers-reduced-motion:reduce){
  .qs__foto,.qs__foto[data-on],.qs__foto img,.qs__mini,.qs__tab{ transition:none }
  .qs__foto img{ transform:none }
  .qs--js .qs__panel:not([hidden]){ animation:none }
}

/* ---------- Un fin, cuatro frentes: barras paralelas ---------- */
.frentes25{ background:var(--papel) }
.frentes25__cab{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(2rem,6vw,6rem); align-items:start;
  margin-bottom:clamp(2rem,4vw,3rem) }
.frentes25__cab .antetitulo{ grid-column:1 / -1 }
.frentes25__cab .h2{ margin:0 }
.frentes25__lede p{ margin:0; font-family:var(--lee); font-size:1.12rem; line-height:1.58; color:var(--tinta-2, #2A3443); max-width:44ch; padding-bottom:.3rem }

.barras25{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem }
.barra25{ position:relative; min-width:0; min-height:clamp(18rem,74vw,24rem); border-radius:10px; overflow:hidden; background:var(--noche) }
.barra25 a{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  color:var(--papel); text-decoration:none; isolation:isolate; border-radius:inherit }
.barra25 a::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(10,26,47,.95) 0, rgba(10,26,47,.72) 38%, rgba(10,26,47,.18) 72%, rgba(10,26,47,.04) 100%) }
.barra25 a:focus-visible{ outline:3px solid var(--sol, #D9A441); outline-offset:-3px }
.barra25__foto{ position:absolute; inset:0; z-index:-2 }
.barra25__foto picture{ display:block; height:100% }
.barra25__foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%);
  transform:scale(1.02); transition:transform 1.4s var(--curva) }
.barra25:is(:hover,:focus-within) .barra25__foto img{ transform:scale(1.06) }
.barra25__in{ display:grid; gap:.35rem; padding:clamp(1.15rem,2vw,1.75rem) }
.barra25__n{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; font-family:var(--sans); font-weight:600;
  font-size:.95rem; letter-spacing:.04em; color:var(--piedra) }
.barra25__etq{ letter-spacing:.02em }
.barra25__t{ font-family:var(--sans); font-weight:500; font-size:clamp(1.25rem,1.05rem + .55vw,1.6rem); line-height:1.15;
  letter-spacing:-.02em; color:var(--papel); max-width:18ch; overflow-wrap:break-word; hyphens:auto }
.barra25__s{ font-family:var(--sans); font-size:1rem; line-height:1.4; color:var(--suave-claro) }
.barra25__d{ font-family:var(--lee); font-size:1.04rem; line-height:1.55; color:#E3EAEA; max-width:40ch; margin-top:.3rem }
.barra25__ir{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--sans); font-weight:600; font-size:.96rem;
  color:var(--piedra); margin-top:.45rem }
.barra25__ir svg{ transition:transform .25s var(--curva) }
.barra25 a:hover .barra25__ir svg{ transform:translateX(4px) }
.frentes25__mas{ margin-top:clamp(1.75rem,3.5vw,2.75rem) }

@media (max-width:71.99rem){
  /* todo el texto a la vista: velo más alto para que se lea sobre cualquier foto */
  .barra25 a::before{ background:linear-gradient(to top, rgba(10,26,47,.96) 0, rgba(10,26,47,.86) 48%, rgba(10,26,47,.4) 78%, rgba(10,26,47,.08) 100%) }
}
@media (min-width:40rem) and (max-width:71.99rem){
  .barras25{ grid-template-columns:1fr 1fr }
  .barra25{ min-height:clamp(22rem,44vw,27rem) }
}
@media (min-width:72rem){
  .barras25{ display:flex; height:clamp(28rem,66vh,35rem) }
  .barra25{ flex:1 1 0; min-height:0; transition:flex-grow .75s var(--curva) }
  .barra25:is(:hover,:focus-within),
  .barras25:not(:hover):not(:focus-within) .barra25[data-abierto]{ flex-grow:2.4 }
  .barra25__d,.barra25__ir{ max-height:0; opacity:0; overflow:hidden; margin-top:0;
    transition:max-height .6s var(--curva), opacity .35s ease, margin .4s var(--curva) }
  .barra25:is(:hover,:focus-within) :is(.barra25__d,.barra25__ir),
  .barras25:not(:hover):not(:focus-within) .barra25[data-abierto] :is(.barra25__d,.barra25__ir){ max-height:10rem; opacity:1; transition-delay:.18s }
  .barra25:is(:hover,:focus-within) .barra25__d,
  .barras25:not(:hover):not(:focus-within) .barra25[data-abierto] .barra25__d{ margin-top:.3rem }
  .barra25:is(:hover,:focus-within) .barra25__ir,
  .barras25:not(:hover):not(:focus-within) .barra25[data-abierto] .barra25__ir{ margin-top:.45rem }
}
@media (max-width:63.99rem){
  .frentes25__cab{ grid-template-columns:1fr; row-gap:var(--e-sm) }
}
@media (prefers-reduced-motion:reduce){
  .barra25,.barra25__foto img,.barra25__d,.barra25__ir,.barra25__ir svg{ transition:none }
  .barra25:is(:hover,:focus-within) .barra25__foto img{ transform:scale(1.02) }
}