/* ============================================================
   THE JESUS WAY — «El Gráfico del Silencio» (contexto.html)
   Extiende Lacuna Aurea. Sin paleta ni tipografía propias —
   todo via var(--oro)/var(--azul)/var(--terracota)/etc.
   ============================================================ */

/* --- hero --- */
.gs-hero{padding:104px 48px 16px}
.gs-hero .kicker{display:block;margin-bottom:14px}
.gs-hero .kicker::before{content:'▪ ';color:var(--oro)}
.gs-hero h1{
  margin:0 0 12px;font-family:var(--serif);font-weight:500;
  font-size:clamp(22px,3vw,38px);line-height:1.15;letter-spacing:-.01em;color:var(--display);
  white-space:nowrap;
}
.gs-hero h1 em{font-style:italic;font-weight:500;color:var(--oro)}
.gs-lede{max-width:none;white-space:nowrap;font-size:14px;line-height:1.55;color:var(--secundario);margin:0}
.gs-lede b{color:var(--texto);font-weight:600}

/* --- gráfico --- */
.gs-chart{margin:40px auto 0;max-width:1320px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.gs-row{cursor:help}
.gs-row-hit{outline:none}
.gs-row:hover .gs-row-line,.gs-row:focus-visible .gs-row-line{stroke:var(--oro);stroke-width:1.6}
.gs-row:hover .gs-row-label,.gs-row:focus-visible .gs-row-label{fill:var(--oro)!important}
.gs-row:hover .gs-row-ic,.gs-row:focus-visible .gs-row-ic{stroke:var(--oro)}
.gs-row:hover .gs-row-dot,.gs-row:focus-visible .gs-row-dot{r:5}
.gs-row:focus-visible{outline:1px solid var(--oro)}
.gs-chart svg{min-width:720px;width:100%;height:auto;display:block}
.gs-chart-cap{font-family:var(--sans);font-size:11px;color:var(--secundario);letter-spacing:.05em;margin:14px 0 0}

/* --- cifras --- */
.gs-bands{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline-neutra);border-block:1px solid var(--hairline-neutra);margin:70px 0 0}
.gs-band{background:var(--fondo);padding:28px 22px;text-align:center}
.gs-band .ic{color:var(--oro);margin:0 auto 12px;width:46px;height:46px}
.gs-band .n{font-family:var(--serif);font-weight:500;font-size:54px;line-height:.9;color:var(--display)}
.gs-band .l{font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--secundario);margin-top:10px}
.gs-band.hi .n{color:var(--oro)}

/* --- encabezados de sub-sección --- */
.gs-h{font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--secundario);margin:70px 0 6px}
.gs-h span{color:var(--oro)}
.gs-s{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4.2vw,42px);line-height:1.08;margin:0 0 30px;color:var(--display)}

/* --- filtros --- */
.gs-filtros{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px}
.gs-chip{
  font-family:var(--sans);font-size:11px;letter-spacing:.06em;background:none;color:var(--secundario);
  border:1px solid var(--pildora-borde);padding:8px 14px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;min-height:36px;
}
.gs-chip svg{width:15px;height:15px}
.gs-chip:hover{color:var(--texto);border-color:var(--oro)}
.gs-chip[aria-pressed="true"]{background:var(--oro);color:var(--cta-texto);border-color:var(--oro)}
.gs-chip:focus-visible{outline:2px solid var(--oro);outline-offset:2px}

/* --- tarjetas --- */
.gs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline-neutra);border:1px solid var(--hairline-neutra)}
.gs-card{
  background:var(--fondo);padding:24px 20px 40px;position:relative;cursor:pointer;
  opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),background .2s;
}
.gs-card p{margin:0}
.gs-card.in{opacity:1;transform:none}
.gs-card:hover{background:var(--banda)}
.gs-card:focus-visible{outline:2px solid var(--oro);outline-offset:-2px}
.gs-card[hidden]{display:none}
.gs-card.star{background:rgba(var(--oro-rgb),.06)}
.gs-card.star:hover{background:rgba(var(--oro-rgb),.1)}

.gs-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.gs-card-ic{width:50px;height:50px;color:var(--oro)}
.gs-como{width:18px;height:18px;color:var(--secundario);flex:none;margin-top:4px}
.gs-card-y{font-family:var(--serif);font-weight:500;font-size:38px;line-height:.9;letter-spacing:-.01em;color:var(--display)}
.gs-card-y small{font-family:var(--sans);font-size:9px;letter-spacing:.16em;color:var(--secundario);display:block;margin-top:7px}
.gs-card-n{font-family:var(--sans);font-weight:500;font-size:15.5px;line-height:1.3;margin:13px 0 6px;color:var(--texto)}
.gs-card.star .gs-card-n{color:var(--oro)}
.gs-card-o{font-size:14px;color:var(--secundario);line-height:1.5;margin:0}

.gs-gap{margin-top:16px}
.gs-gap-track{height:5px;background:rgba(var(--oro-rgb),.1);position:relative}
.gs-gap-fill{height:5px;background:linear-gradient(90deg,rgba(var(--oro-rgb),.5),var(--oro));width:100%;transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.gs-card.in .gs-gap-fill{transform:scaleX(var(--n,1))}
.gs-gap-l{display:flex;justify-content:space-between;font-family:var(--sans);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--secundario);margin-top:7px}
.gs-gap-l b{color:var(--oro);font-weight:500}

/* el detalle flota sobre las tarjetas de abajo: no mueve la rejilla (solo opacity/transform) */
.gs-mas{
  position:absolute;left:-1px;right:-1px;top:100%;z-index:30;
  background:var(--banda);border:1px solid rgba(var(--oro-rgb),.45);box-shadow:0 18px 40px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);
  transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1),visibility 0s .3s;
}
.gs-card[aria-expanded="true"]{z-index:20}
.gs-card[aria-expanded="true"] .gs-mas{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
.gs-mas-in{padding:18px 20px 20px}
.gs-mas-in p{font-size:14px;line-height:1.55;margin:0 0 12px;color:var(--texto)}
.gs-tags{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.gs-tags li{font-family:var(--sans);font-size:9.5px;letter-spacing:.04em;border:1px solid var(--hairline-neutra);padding:4px 8px;color:var(--secundario)}
.gs-tags li.c{border-color:rgba(var(--oro-rgb),.0);color:var(--azul);border-color:rgba(147,169,207,.45)}
.gs-tags li.e{border-color:rgba(180,85,45,.4);color:var(--terracota)}
.gs-tags li.s{border-color:var(--oro);color:var(--oro)}
.gs-plus{position:absolute;right:18px;bottom:16px;font-family:var(--sans);font-size:15px;color:var(--secundario);line-height:1;transition:transform .3s,color .2s}
.gs-card:hover .gs-plus{color:var(--oro)}
.gs-card[aria-expanded="true"] .gs-plus{transform:rotate(45deg);color:var(--oro)}

/* --- coda --- */
.gs-coda{
  margin:64px 0 0;border:1px solid var(--hairline-neutra);border-left:3px solid var(--terracota);
  padding:28px 24px;display:flex;gap:24px;align-items:flex-start;
}
.gs-coda .ic{width:52px;height:52px;color:var(--terracota);flex:none}
.gs-coda h3{font-family:var(--serif);font-weight:500;font-size:24px;color:var(--terracota);margin:0 0 8px}
.gs-coda p{margin:0 0 14px;color:var(--secundario);max-width:56ch;font-size:14px;line-height:1.6}
.gs-nota{
  font-family:var(--sans);font-size:10.5px;line-height:1.9;color:var(--secundario);
  border-top:1px solid var(--hairline-neutra);margin-top:56px;padding:20px 0 8px;max-width:56ch;
}
.gs-enlaces{display:flex;gap:28px;flex-wrap:wrap;margin-top:16px;font-size:11.5px;letter-spacing:.14em}

@media(max-width:900px){.gs-grid{grid-template-columns:repeat(2,1fr)}.gs-bands{grid-template-columns:1fr}}
@media(max-width:1020px){
  .gs-hero h1{white-space:normal;font-size:clamp(20px,6vw,28px)}
  .gs-lede{white-space:normal}
}
@media(max-width:760px){
  .gs-hero{padding:96px 24px 12px}
  .gs-grid{grid-template-columns:1fr}
  .gs-coda{flex-direction:column;gap:16px}
  .gs-band .n{font-size:44px}
  .gs-card-y{font-size:32px}
}
@media(prefers-reduced-motion:reduce){
  .gs-card{opacity:1;transform:none;transition:none}
  .gs-gap-fill{transition:none}.gs-mas{transition:none}
}