/* ============================================================================
   BRUTALISMO × CONSTRUCTIVISMO  ·  gramática de figuras
   El Despertar de Minerva
   ----------------------------------------------------------------------------
   Se carga DESPUÉS de styles.css.

   LA GEOMETRÍA SIGNIFICA. No es adorno.
   Kandinsky, en "Punto y línea sobre plano" y en sus cursos de la Bauhaus,
   asignó a cada forma elemental un color y una energía:
       triángulo → amarillo → agudo, activo, va hacia arriba
       cuadrado  → rojo     → estable, se apoya, terrenal
       círculo   → azul     → profundo, sin ángulos donde detenerse
   Aquí cada bloque temático hereda una figura y ese sentido se explica al
   abrir la tarjeta. La decoración se puede leer.
   ============================================================================ */

:root {
  --k-yellow: #E2A32B;   /* triángulo: el argumento que entra */
  --k-red:    #BE3729;   /* cuadrado: el dato que sostiene */
  --k-cobalt: #1B4C8C;   /* círculo: la pregunta abierta */
  --ease-k: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.4, 0.44, 1);
}

/* ---------------------------------------------------------------------------
   1. CABECERAS DE SECCIÓN
   El numeral pasa de micro-etiqueta a elemento gráfico constructivista.
   --------------------------------------------------------------------------- */
.section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  border-top: 5px solid var(--ink);
  padding-top: 1.1rem;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.section-num {
  font-family: var(--display);
  font-size: clamp(2.6rem, 7.5vw, 5.6rem);
  line-height: 0.78;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  transform: rotate(-4deg);
  transform-origin: left bottom;
  user-select: none;
}
.section-head::after {
  content: "";
  grid-column: 2;
  height: 5px;
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(var(--rule, 1));
  transition: transform 1.1s var(--ease-k);
}
.section-kicker { display: none; }

.section-title {
  grid-column: 1 / -1;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4.6vw, 3.4rem);
  line-height: 1;
  text-transform: uppercase;
  margin-top: 1.2rem;
  max-width: 26ch;
}
.section-note {
  grid-column: 1 / -1;
  font-size: .98rem;
  color: var(--ink-soft);
  max-width: 52ch;
  margin-top: .7rem;
}

/* ---------------------------------------------------------------------------
   2. GLIFOS: las figuras elementales
   Formas puras en CSS. Cada una lleva su color kandinskiano.
   --------------------------------------------------------------------------- */
.glyph { display: block; width: 62px; height: 62px; position: relative; flex: 0 0 auto; }
.glyph::before { content: ""; position: absolute; inset: 0; }

/* círculo: la pregunta que no se cierra */
.glyph-circle::before { border-radius: 50%; border: 7px solid var(--k-cobalt); }
/* triángulo: el argumento agudo */
.glyph-tri::before {
  inset: auto 0 4px 0; height: 0;
  border-left: 31px solid transparent;
  border-right: 31px solid transparent;
  border-bottom: 54px solid var(--k-yellow);
}
/* cuadrado: el dato que se apoya */
.glyph-square::before { background: var(--k-red); inset: 6px; }
/* diagonal: la tensión entre dos fuerzas */
.glyph-diag::before {
  top: 50%; left: -2px; right: -2px; height: 7px;
  background: var(--ink); transform: rotate(-38deg);
}
.glyph-diag::after {
  content: ""; position: absolute;
  top: 50%; left: -2px; right: -2px; height: 7px;
  background: var(--k-red); transform: rotate(38deg);
}
/* arco: el vuelo del búho, la mirada desde arriba */
.glyph-arc::before {
  border: 7px solid var(--k-cobalt);
  border-radius: 50%;
  clip-path: polygon(0 0, 100% 0, 100% 52%, 0 52%);
}
/* retícula: lo que se mide */
.glyph-grid::before {
  background:
    linear-gradient(var(--ink) 0 0) 0 22% / 100% 6px no-repeat,
    linear-gradient(var(--ink) 0 0) 0 72% / 100% 6px no-repeat,
    linear-gradient(var(--k-yellow) 0 0) 24% 0 / 6px 100% no-repeat,
    linear-gradient(var(--k-yellow) 0 0) 74% 0 / 6px 100% no-repeat;
}

/* ---------------------------------------------------------------------------
   3. TARJETAS QUE SE SEGMENTAN EN 3D
   Al pulsar, la cara frontal se abre como una compuerta y tres losas de color
   barren el hueco mientras aparece el reverso: qué significa la figura,
   cuántas piezas hay y el enlace al bloque.
   --------------------------------------------------------------------------- */
.temas-grid { perspective: 1400px; }

.tema {
  position: relative;
  transform-style: preserve-3d;
  min-height: 268px;
  padding: 0;                       /* el padding vive en las caras */
  overflow: hidden;
}
.tema:hover { background: var(--paper); color: inherit; }   /* el hover ya no invierte: manda el clic */

.card-face {
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  width: 100%; height: 100%; min-height: 268px;
  padding: 1.6rem 1.5rem 1.8rem;
  background: var(--paper);
  border: 0; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  transform-origin: top center;
  transition: transform .62s var(--ease-k), opacity .34s linear;
  backface-visibility: hidden;
  position: relative; z-index: 3;
}
.card-face .tema-n { font-family: var(--display); font-size: 1.5rem; color: var(--ink-mute); transform: rotate(-5deg); }
.card-face h3 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: 1.9rem; line-height: 1; margin: .2rem 0 0;
}
.card-face p { font-size: .95rem; color: var(--ink-soft); max-width: 28ch; }
.card-face .glyph { margin-bottom: .3rem; }
.card-hint {
  margin-top: auto;
  font-family: var(--display); font-size: .95rem; letter-spacing: .04em;
  color: var(--c, var(--k-red));
  display: inline-flex; align-items: center; gap: .4rem;
}
.card-hint::after {
  content: ""; width: 22px; height: 6px; background: var(--c, var(--k-red));
  transition: transform .3s var(--ease-k);
}
.card-face:hover .card-hint::after { transform: translateX(5px); }
.card-face:focus-visible { outline: 4px solid var(--k-cobalt); outline-offset: -4px; }

/* compuerta abierta */
.tema.is-open .card-face {
  transform: rotateX(-96deg);
  opacity: 0;
  pointer-events: none;
}

/* losas de color que barren el hueco: el "corte" de la tarjeta */
.slab {
  position: absolute; left: 0; right: 0; height: 33.4%;
  background: var(--c, var(--k-red));
  transform: scaleX(0); transform-origin: left;
  z-index: 2; pointer-events: none;
}
.slab.s1 { top: 0; }
.slab.s2 { top: 33.3%; transform-origin: right; background: var(--ink); }
.slab.s3 { top: 66.6%; }
.tema.is-open .slab { animation: slabSweep .58s var(--ease-k) forwards; }
.tema.is-open .slab.s2 { animation-delay: .07s; }
.tema.is-open .slab.s3 { animation-delay: .14s; }
@keyframes slabSweep {
  0%   { transform: scaleX(0); }
  46%  { transform: scaleX(1); }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* reverso */
.card-back {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: .7rem;
  padding: 1.6rem 1.5rem 1.7rem;
  background: var(--ink); color: var(--bone);
  z-index: 1;
  opacity: 0; transform: rotateX(70deg) translateZ(0);
  transform-origin: bottom center;
  transition: transform .6s var(--ease-back) .12s, opacity .3s linear .12s;
}
.tema.is-open .card-back { opacity: 1; transform: none; }
.card-back .cb-figure {
  font-family: var(--display); font-size: .82rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c, var(--k-yellow));
}
.card-back .cb-meaning {
  font-size: 1.02rem; line-height: 1.42; color: var(--bone);
}
.card-back .cb-count {
  font-family: var(--display); font-size: 2.4rem; line-height: .9; color: var(--c, var(--k-yellow));
  margin-top: auto;
}
.card-back .cb-count span { font-family: var(--body); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(241,233,214,.7); display: block; margin-top: .3rem; }
.card-back .cb-go {
  font-family: var(--display); font-size: 1.05rem; color: var(--bone);
  border-bottom: 4px solid var(--c, var(--k-yellow)); padding-bottom: .1rem;
  align-self: flex-start;
}
.card-back .cb-go:hover { color: var(--c, var(--k-yellow)); }
.card-back .cb-close {
  position: absolute; top: .9rem; right: 1rem;
  background: none; border: 0; cursor: pointer; padding: .3rem;
  font-family: var(--display); font-size: 1.1rem; color: rgba(241,233,214,.72);
}
.card-back .cb-close:hover { color: var(--bone); }

/* ---------------------------------------------------------------------------
   4. DIAGONALES Y FIGURAS DEL HERO
   Cada una está ahí por algo, y la clave se lee en las tarjetas.
   --------------------------------------------------------------------------- */
/* `translate` es una propiedad aparte de `transform`: así el desplazamiento
   por cursor se suma al parallax de scroll sin sobrescribirlo. */
.hero .deco span { translate: var(--dx, 0) var(--dy, 0); transition: translate .18s linear; }

.deco-wedge {
  position: absolute; width: 0; height: 0;
  border-left: 62px solid transparent; border-right: 62px solid transparent;
  border-bottom: 108px solid var(--k-cobalt); opacity: .92;
}
.deco-diag { position: absolute; height: 3px; background: var(--ink); transform-origin: left center; }
.deco-conc { position: absolute; border-radius: 50%; border: 3px solid var(--ink); }
.deco-conc::before, .deco-conc::after {
  content: ""; position: absolute; border-radius: 50%; inset: 18%;
  border: 3px solid var(--k-red);
}
.deco-conc::after { inset: 40%; background: var(--k-yellow); border-color: transparent; }

/* El hero cabe en la primera pantalla: se limita la figura, no se empuja el CTA */
.hero-grid { grid-template-columns: 1fr 0.66fr; }
.hero-figure img { max-height: 40vh; object-fit: cover; aspect-ratio: auto; }

/* Geometría visible pero SIEMPRE fuera de los glifos del texto */
.hero .deco-wedge { top: 18%; right: 7%; transform: rotate(19deg) scale(.82); }
.hero .deco-conc  { width: 108px; height: 108px; top: 29%; right: 26%; }
.hero .deco-diag  { width: 26%; top: 96%; left: 26%; transform: rotate(-7deg); }
.hero .deco-circle--terra { top: 85%; left: 3%; width: 112px; height: 112px; }
.hero .deco-ring          { top: 84%; left: 0%; width: 140px; height: 140px; }
.hero .deco-rect--ochre   { bottom: 4%; left: 40%; }
/* El arco cruzaba el rótulo de la figura. Se lleva al borde derecho, donde
   sangra fuera del plano: sigue viéndose y ya no toca ningún glifo. */
.hero .deco-arc           { bottom: -13%; right: -4%; }

/* ---------------------------------------------------------------------------
   5. DINAMISMO EN LAS DEMÁS REJILLAS
   --------------------------------------------------------------------------- */
.principio, .refl { position: relative; }
.principio::after {
  content: ""; position: absolute; left: 0; bottom: 0; right: 0;
  height: 5px; background: var(--c, var(--ink));
  transform: scaleX(0); transform-origin: left;
  transition: transform .42s var(--ease-k);
}
.principio:hover::after { transform: scaleX(1); }
.principio-n { font-size: 1.6rem; transform: rotate(-5deg); display: inline-block; }

.refl-img { position: relative; overflow: hidden; }
.refl-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(27,76,140,.34), transparent 52%);
  opacity: 0; transition: opacity .4s var(--ease-k);
}
.refl:hover .refl-img::after { opacity: 1; }

/* fichas del archivo: leve inclinación 3D siguiendo el cursor */
.archive-grid { perspective: 1600px; }
.refl { transition: transform .4s var(--ease-k); transform-style: preserve-3d; }

.apoyar-btns { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-top: .8rem; }
.apoyar-btns .btn { white-space: nowrap; }
.contra figcaption span { display: block; margin-top: .35rem; }

/* ---------------------------------------------------------------------------
   6. MOVIMIENTO REDUCIDO
   Se conserva toda la información: las tarjetas abren sin girar.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .card-face, .card-back { transition: opacity .2s linear; }
  .tema.is-open .card-face { transform: none; }
  .card-back { transform: none; }
  .tema.is-open .slab { animation: none; }
  .section-head::after { transform: scaleX(1) !important; transition: none; }
  .refl { transition: none; }
}

/* ---------------------------------------------------------------------------
   7. RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero .deco-wedge, .hero .deco-diag, .hero .deco-conc { display: none; }
  .section-num { -webkit-text-stroke-width: 1.6px; }
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "eyebrow" "title" "sub" "actions" "figure";
  }
  .hero-figure { max-width: 260px; margin-top: 2rem; }
  .hero-figure img { max-height: 34vh; }
  .tema, .card-face { min-height: 244px; }
}
@media (max-width: 540px) {
  .apoyar-btns { width: 100%; }
  .apoyar-btns .btn { width: 100%; justify-content: center; }
  .glyph { width: 52px; height: 52px; }
}

/* ============================================================================
   8. ENTRADA DEL HERO
   El titular no aparece: se levanta. Cada palabra sube desde su propia
   ranura, como un cartel que se compone delante de ti.
   ========================================================================== */
.w  { display: inline-block; overflow: hidden; vertical-align: bottom; }
.wi { display: inline-block; will-change: transform; }
/* Estado inicial SOLO si el JS va a animar (lo marca la clase en <html>),
   así sin JS el titular se lee desde el primer milisegundo. */
.js-anim .hero-title .wi { transform: translateY(105%); }
.js-anim .hero .deco span { opacity: 0; }

/* ============================================================================
   9. CURSOR QUE MUTA
   Sobre cada bloque, el cursor adopta SU figura. La gramática se toca.
   ========================================================================== */
.cursor-ring {
  transition: width .28s var(--ease-back), height .28s var(--ease-back),
              margin .28s var(--ease-back), border-color .28s linear,
              border-radius .3s var(--ease-k), transform .3s var(--ease-k),
              background .28s linear, clip-path .3s var(--ease-k);
}
.cursor.is-fig .cursor-ring {
  width: 62px; height: 62px; margin: -31px 0 0 -31px;
  border-color: var(--cur, var(--k-red));
  border-width: 3px;
}
.cursor.fig-square .cursor-ring { border-radius: 0; }
.cursor.fig-tri .cursor-ring {
  border-radius: 0; border: 0;
  background: var(--cur, var(--k-yellow));
  clip-path: polygon(50% 6%, 96% 94%, 4% 94%);
}
.cursor.fig-diag .cursor-ring {
  border-radius: 0; border: 0;
  background: var(--cur, var(--k-red));
  clip-path: polygon(0 40%, 100% 0, 100% 60%, 0 100%);
}
.cursor.fig-arc .cursor-ring { border-bottom-color: transparent; border-left-color: transparent; }
.cursor.fig-grid .cursor-ring { border-radius: 0; border-style: dashed; }

/* ============================================================================
   10. ESCAPARATE HORIZONTAL
   Lo más visto no se apila en otra rejilla: se recorre de lado, como una
   cinta de montaje constructivista.
   ========================================================================== */
.escaparate { position: relative; overflow: hidden; background: var(--ink); color: var(--bone); }
.esc-head {
  position: absolute; top: clamp(1.6rem, 5vh, 3rem); left: var(--pad); z-index: 4;
  max-width: 30ch; pointer-events: none;
}
.esc-head h2 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.7rem, 4vw, 3rem); line-height: .98; color: var(--bone);
}
.esc-head p { font-size: .92rem; color: rgba(241,233,214,.62); margin-top: .5rem; }
.esc-track {
  display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.6rem);
  height: 100vh; height: 100svh;
  padding-inline: var(--pad) 22vw;
  will-change: transform;
}
.esc-card {
  flex: 0 0 auto; width: clamp(230px, 25vw, 340px);
  display: flex; flex-direction: column; gap: .7rem;
  color: var(--bone);
}
.esc-card .esc-img {
  border: 3px solid var(--bone); overflow: hidden; aspect-ratio: 4/5; background: var(--void-2, #151824);
}
.esc-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.05); transition: transform .55s var(--ease-k), filter .45s linear; }
.esc-card:hover img { transform: scale(1.06); filter: saturate(1.12) contrast(1.02); }
.esc-rank {
  font-family: var(--display); font-size: 2.6rem; line-height: .8;
  color: transparent; -webkit-text-stroke: 2px var(--c, var(--k-yellow));
}
.esc-card h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.16rem; line-height: 1.04; }
.esc-views { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(241,233,214,.55); }
.esc-card:hover h3 { color: var(--c, var(--k-yellow)); }
.esc-end {
  flex: 0 0 auto; width: clamp(220px, 22vw, 300px);
  display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;
}
.esc-end p { color: rgba(241,233,214,.72); font-size: 1rem; }

/* Sin JS o en móvil: la cinta se convierte en un carrusel táctil normal */
.no-pan .esc-track {
  height: auto; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-block: clamp(7rem, 16vh, 9rem) clamp(2.5rem, 6vh, 4rem);
  padding-inline: var(--pad);
}
.no-pan .esc-card { scroll-snap-align: start; }
.no-pan .esc-head { position: static; padding: 0 0 1.4rem; max-width: 46ch; }
.no-pan .escaparate { padding-top: clamp(3rem, 8vh, 5rem); }

/* ============================================================================
   11. FILTROS DEL ARCHIVO: recolocación animada (FLIP)
   ========================================================================== */
.refl.is-moving { transition: transform .52s var(--ease-k); will-change: transform; }
.refl.is-entering { animation: reflIn .5s var(--ease-k) both; }
@keyframes reflIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js-anim .hero-title .wi { transform: none; }
  .js-anim .hero .deco span { opacity: 1; }
  .cursor-ring { transition: none; }
  .refl.is-moving, .refl.is-entering { transition: none; animation: none; }
}
@media (max-width: 900px) {
  .esc-track { padding-inline: var(--pad); }
  .esc-card { width: min(74vw, 300px); }
}

/* numeral de sección sobre el fondo oscuro del escaparate */
.esc-num {
  display: block; -webkit-text-stroke-color: rgba(241,233,214,.6);
  font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: .4rem;
}

/* La nav se oscurece mientras el escaparate ocupa la pantalla */
.nav.is-void {
  background: rgba(20,20,20,.88);
  backdrop-filter: blur(9px) saturate(140%);
  -webkit-backdrop-filter: blur(9px) saturate(140%);
  border-bottom-color: rgba(241,233,214,.16);
}
.nav.is-void .nav-name, .nav.is-void .nav-links a { color: var(--bone); }
.nav.is-void .nav-links a::after { background: var(--k-yellow); }
.nav.is-void .nav-cta { background: var(--k-red); color: var(--bone); }
.nav.is-void .nav-burger span { background: var(--bone); }
.nav.is-void .nav-owl { border-color: rgba(241,233,214,.3); }

/* el rótulo presenta y se aparta: no compite con las fichas que pasan */
.esc-head { transition: opacity .3s linear; }

/* ============================================================================
   12. BANDA-INTERLUDIO
   Composición-marco generada: la geometría se agolpa en los bordes y la cita
   vive en el hueco central. Un solo respiro por página, no un recurso repetido.
   ========================================================================== */
.banda {
  position: relative;
  min-height: min(66vh, 580px);
  display: grid; place-items: center;
  border-block: 5px solid var(--ink);
  background: var(--paper) url("assets/img/gen/banda-01.webp") center / cover no-repeat;
}
.banda-cita { max-width: min(44rem, 82vw); text-align: center; padding: var(--pad); }
.banda-cita p {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.3rem, 3.2vw, 2.7rem); line-height: 1.05; color: var(--ink);
}
.banda-cita cite {
  display: block; margin-top: 1.1rem; font-style: normal;
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--terracotta);
}

/* cabecera de artículo sobre la misma composición */
.art-conbanda {
  background: var(--paper) url("assets/img/gen/banda-articulo.webp") top center / 100% auto no-repeat;
}
.art-conbanda .art-back, .art-conbanda .art-tag,
.art-conbanda .art-title, .art-conbanda .art-meta { position: relative; z-index: 2; }

@media (max-width: 700px) {
  .banda { min-height: 54vh; background-size: 180% auto, cover; background-position: center; }
  .art-conbanda { background-size: 190% auto; }
}


/* ============================================================================
   13. CORRECCIONES DE CONTRASTE (WCAG AA) Y ACCESO POR TECLADO
   ========================================================================== */
/* El texto pequeño en terracota usa el tono de texto, no el de relleno */
.refl-tag,
.banda-cita cite,
.section-num { color: var(--terracotta-txt); }
.section-num { -webkit-text-stroke-color: var(--ink); }

/* Enlace de salto: invisible hasta que se tabula */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--bone);
  font-family: var(--display); font-size: 1rem;
  padding: .8rem 1.2rem; text-decoration: none;
}
.skip:focus { left: .6rem; top: .6rem; }

/* Foco visible y consistente en todo lo interactivo */
a:focus-visible, button:focus-visible, .filtro:focus-visible {
  outline: 4px solid var(--k-cobalt);
  outline-offset: 3px;
}