/* =============================================================================
   UN FONDO, LÁMINAS ENCIMA
   -----------------------------------------------------------------------------
   Carlitos, sobre la referencia que él mismo había mandado: "esa referencia es
   un mal ejemplo, porque tiene un fondo bonito, otro fondo blanco, y luego
   láminas blancas... era más bonito dejar el fondo limpio con los degradados
   y las láminas encima".

   Antes esto alternaba tramos claros y oscuros por sección -blanco para leer,
   oscuro para mirar-. Ahora es más simple y es lo que él pidió: el fondo con
   el resplandor (`.fondo-vivo`) se ve SIEMPRE, de punta a punta de la página.
   El texto suelto -títulos, párrafos, rótulos- se lee en tinta clara porque el
   fondo detrás siempre es oscuro. Lo que necesita mucho contraste para leerse
   -precios, pasos, avisos, la tabla de atrasos- vive en una LÁMINA: una
   tarjeta de blanco sólido que flota encima, no un tramo que cambia el fondo
   de toda la sección.

   La única superficie que sigue en blanco de fondo es el encabezado de «Los
   trajes», por el penacho fotografiado sobre blanco -eso vive en
   `syt-sitio.css`, junto a `.hero-trajes`-.
   ========================================================================== */

/* El texto directo sobre el fondo. Va en `main` para no tocar el header (ya es
   negro con texto blanco por su cuenta) ni el pie (mismo caso). */
main :is(h1, h2, h3, h4, b, strong, li, td, th){ color: var(--sitio-claro); }
main :is(p, small, figcaption, .nota, .sub){
  color: color-mix(in oklab, var(--sitio-claro) 76%, transparent);
}
/* El rótulo se califica con `body` y `.seccion` para ganarle a
   `body[data-tono] .seccion .eyebrow`, que fija el tono oscuro pensado para
   fondo blanco: sobre este negro daba 3,22:1. El paso 300 de cualquiera de las
   cuatro escalas pasa de 12:1. */
body .seccion .eyebrow,
body main .eyebrow{ color: var(--acento-300); }

/* `.grupo-titulo` (Mujer/Hombre en trajes.html) fija su propia tinta oscura
   con la especificidad de una clase (0,1,0), que le gana a `main h4` (0,0,2).
   Se califica igual, con `main` delante, para ganar por orden de hoja sin
   subir de peso. */
main .grupo-titulo{ color: var(--sitio-claro); }
main .grupo-titulo small{ color: color-mix(in oklab, var(--sitio-claro) 70%, transparent); }

/* -----------------------------------------------------------------------------
   LAS LÁMINAS: VIDRIO OSCURO DE ALTA GAMA (GLASSMORPHISM)
   -----------------------------------------------------------------------------
   Láminas pulidas que pertenecen orgánicamente a la atmósfera nocturna
   del sitio: vidrio translúcido con desenfoque, bordes de luz tenue y
   sombra volumétrica. Cero rectángulos blancos crudos.
--------------------------------------------------------------------------- */
main :is(.cifra, .paso, .bloque, .descarga, .aviso, .descarga-icono){
  background: rgba(13, 20, 36, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}
main :is(.cifra, .paso, .bloque, .descarga, .aviso):hover{
  border-color: rgba(245, 158, 11, 0.3);
  box-shadow: 0 24px 50px -15px rgba(0, 0, 0, 0.75), 0 0 20px -5px rgba(245, 158, 11, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}
main :is(.cifra, .paso, .bloque, .descarga, .aviso) :is(h2, h3, h4, b, strong, li, td, th){
  color: #ffffff;
}
main :is(.cifra, .paso, .bloque, .descarga, .aviso) :is(p, small, .nota){
  color: rgba(240, 244, 255, 0.82);
}
main .tabla-atraso{
  background: rgba(13, 20, 36, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.65);
}
main .tabla-atraso :is(td, th){
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.1);
}
main .tabla-atraso small{
  color: rgba(240, 244, 255, 0.75);
}

/* Las piezas del carrusel: tarjetas de vidrio elegante con bordes suaves */
main .carrusel .pieza{
  background: rgba(13, 20, 36, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 14px 14px 16px;
  box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
main .carrusel .pieza:hover{
  border-color: rgba(245, 158, 11, 0.35);
  transform: translateY(-3px);
}
main .carrusel .pieza figcaption b{
  color: #ffffff;
}
main .carrusel .pieza figcaption small{
  color: rgba(240, 244, 255, 0.75);
}

/* Interactividad de zoom en fotografías */
main .carrusel img,
main .pieza img,
main .puesto img,
main figure img{
  cursor: zoom-in;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
main .pieza:hover img{
  transform: scale(1.03);
}