/* ============ Sistema común (v5: editorial de moda) ============ */
/* Títulos en serif de alto contraste, texto en sans limpia, fondos blancos y piedra,
   negro y un toque de dorado. Las páginas con más fotos y las de más texto comparten piezas. */
:root {
  --negro: #111111;
  --tinta: #111111;
  --gris: #555555;
  --blanco: #ffffff;
  --fondo: #ffffff;
  --piedra: #f4f0ea;
  --piedra-oscura: #e9e2d7;
  --gris-claro: #f1efec;
  --dorado: #e2c556;
  --dorado-oscuro: #8a7020; /* para texto dorado sobre fondo claro (contraste AA) */
  --borde: rgba(17, 17, 17, 0.1);
  --sombra: 0 0.75rem 2.25rem rgba(17, 17, 17, 0.08);
  --radio: 0.375rem;
  --fuente-titulos: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --fuente-texto: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --ancho: 75rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* En pantallas más anchas que Full HD (QHD, 4K) todo crece en proporción: la página se ve igual que en 1920 px */
  font-size: max(100%, calc(100vw / 120));
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--negro);
  line-height: 1.1;
  text-wrap: balance;
}

h1,
h2 {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  letter-spacing: 0.02em;
}

h3 {
  font-family: var(--fuente-texto);
  font-weight: 500;
  font-size: 1rem;
}

em {
  font-style: italic;
}

:focus-visible {
  outline: 0.125rem solid var(--dorado-oscuro);
  outline-offset: 0.1875rem;
}

.saltar {
  position: absolute;
  left: -624.9375rem;
}

.saltar:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: var(--negro);
  color: var(--blanco);
  padding: 0.5rem 1rem;
}

[data-pendiente] {
  color: #9a3b3b;
  font-style: italic;
}

.contenedor {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 1rem;
}

.antetitulo {
  display: block;
  margin: 0 0 0.875rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dorado-oscuro);
}

.seccion {
  padding: 5.5rem 0;
  overflow-x: clip;
}

.seccion--piedra {
  background: var(--piedra);
}

.seccion--sin-arriba {
  padding-top: 0;
}

/* Cabecera de sección: título a la izquierda, enlace a la derecha */
.cabeza-fila {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.cabeza-fila h2,
.titulo {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
}

.cabeza-centro {
  max-width: 40rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.intro {
  margin: 0.75rem 0 0;
  color: var(--gris);
}

.enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.25rem;
  border-bottom: 0.0625rem solid currentColor;
  white-space: nowrap;
}

.enlace::after {
  content: "→";
  transition: transform 0.3s;
}

.enlace:hover::after {
  transform: translateX(0.25rem);
}

.proximamente {
  margin: 0;
  font-style: italic;
  color: var(--gris);
}

/* Huecos para fotos que aún no tenemos */
.foto-pendiente {
  position: relative;
  min-height: 8.75rem;
  background: linear-gradient(160deg, #efe9e0, #d9cfc0);
  border-radius: var(--radio);
  overflow: hidden;
}

.foto-pendiente:nth-child(3n + 2) {
  background: linear-gradient(160deg, #f1ebe6, #d7c8bd);
}

.foto-pendiente:nth-child(3n + 3) {
  background: linear-gradient(160deg, #ece7df, #cfc3ae);
}

.foto-pendiente::after {
  content: attr(data-etiqueta);
  position: absolute;
  left: 0.875rem;
  bottom: 0.75rem;
  right: 0.875rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
}

.tarjeta {
  background: var(--blanco);
  border: 0.0625rem solid var(--borde);
  border-radius: var(--radio);
}

/* Botones: rectángulo negro con flecha */
.botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  font-family: var(--fuente-texto);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--blanco);
  background: var(--negro);
  border: 0.0625rem solid var(--negro);
  border-radius: 0.1875rem;
  padding: 0.875rem 1.625rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.boton:hover {
  background: #2e2e2e;
}

.boton--flecha::after {
  content: "→";
  font-size: 1rem;
  letter-spacing: 0;
  transition: transform 0.3s;
}

.boton--flecha:hover::after {
  transform: translateX(0.25rem);
}

.boton--claro {
  background: transparent;
  color: var(--negro);
}

.boton--claro:hover {
  background: var(--negro);
  color: var(--blanco);
}

.boton--blanco {
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--negro);
}

.boton--blanco:hover {
  background: var(--piedra);
}

.boton--contorno-claro {
  background: transparent;
  color: var(--blanco);
  border-color: rgba(255, 255, 255, 0.55);
}

.boton--contorno-claro:hover {
  background: var(--blanco);
  color: var(--negro);
}

/* Botón con icono de reproducir, como «ver vídeos» */
.boton-play {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
}

.boton-play span {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 0.0625rem solid var(--borde);
  background: var(--blanco);
  font-size: 0.7rem;
}

/* Botones creados por js/main.js */
.boton--acento {
  align-self: flex-start;
}

/* Sin enlace todavía (p. ej. falta el número de WhatsApp): se ve el diseño, atenuado */
.boton[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.pago {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
}

.pago__nota {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gris);
}

/* Cabecera: enlaces a los lados, logo al centro */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(0.5rem);
  border-bottom: 0.0625rem solid var(--borde);
  transition: box-shadow 0.3s;
}

.cabecera--scroll {
  box-shadow: 0 0.375rem 1.5rem rgba(17, 17, 17, 0.06);
}

.cabecera__interior {
  position: relative;
  max-width: var(--ancho);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1rem;
}

.cabecera__marca {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
}

.cabecera__logotipo {
  width: 7.5rem;
}

.cabecera__menu {
  display: none;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: none;
  color: var(--negro);
  border: 0.0625rem solid var(--negro);
  border-radius: 0.1875rem;
  padding: 0.4375rem 1rem;
  cursor: pointer;
}

.navegacion {
  display: contents;
}

.navegacion__grupo {
  display: flex;
  align-items: center;
  gap: 1.625rem;
}

.navegacion__grupo--izquierda {
  grid-column: 1;
  grid-row: 1;
}

.navegacion__grupo--derecha {
  grid-column: 3;
  grid-row: 1;
  justify-content: flex-end;
}

.navegacion a {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 0.0625rem solid transparent;
}

.navegacion a:hover,
.navegacion a[aria-current="page"] {
  border-bottom-color: var(--negro);
}

.navegacion .boton {
  padding: 0.625rem 1rem;
  border-bottom: 0.0625rem solid var(--negro);
  font-size: 0.7rem;
}

.navegacion .boton:hover {
  border-bottom-color: var(--negro);
}

/* ============ Portada dividida: texto + foto grande ============ */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: min(84vh, 45rem);
  background: var(--piedra);
  overflow: hidden;
}

.hero__texto {
  align-self: center;
  padding: 5.5rem 3.5rem 8rem max(1rem, calc((100vw - var(--ancho)) / 2 + 1rem));
}

.hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 1.02;
}

.hero p {
  margin: 1.375rem 0 1.875rem;
  max-width: 44ch;
}

.hero__imagen {
  position: relative;
  min-height: 26.25rem;
}

.hero__imagen > .foto-pendiente {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

/* Datos breves bajo el texto del hero */
.mini {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.mini li {
  padding: 0 1.25rem;
  font-size: 0.82rem;
  line-height: 1.4;
}

.mini li:first-child {
  padding-left: 0;
}

.mini li + li {
  border-left: 0.0625rem solid var(--borde);
}

.mini b {
  display: block;
  font-weight: 500;
}

.mini span {
  color: var(--gris);
}

/* Portada del sitio: versión en negro */
.hero--negra {
  background: var(--negro);
  color: #ececec;
}

.hero--negra h1 {
  color: var(--blanco);
}

.hero--negra .antetitulo {
  color: var(--dorado);
}

.hero--negra .hero__imagen > .foto-pendiente {
  background:
    radial-gradient(circle at 40% 30%, rgba(226, 197, 86, 0.14), transparent 55%),
    linear-gradient(160deg, #34312c, #1c1b19);
}

.hero--negra .foto-pendiente::after {
  color: rgba(255, 255, 255, 0.45);
}

.hero--negra [data-pendiente] {
  color: #e8a0a0;
}

.texto-dorado {
  background: linear-gradient(115deg, #a8842f 0%, #e2c556 40%, #f3e19a 55%, #c9a646 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brillo 8s linear infinite;
}

@keyframes brillo {
  to { background-position: 200% center; }
}

/* Tarjeta blanca con círculos, superpuesta al hero */
.circulos {
  position: relative;
  z-index: 2;
  margin-top: -4rem;
  display: flex;
  justify-content: space-around;
  gap: 1rem;
  padding: 1.625rem 1.5rem;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow-x: auto;
  scrollbar-width: none;
}

.circulos--plano {
  margin-top: 0;
  box-shadow: none;
  background: transparent;
}

.circulo,
.historia {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.historia:disabled {
  cursor: default;
}

.circulo__imagen,
.historia__aro {
  width: 5.25rem;
  height: 5.25rem;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.3s;
}

.circulo__imagen.foto-pendiente {
  min-height: 0;
}

.circulo:hover .circulo__imagen,
.historia:not(:disabled):hover .historia__aro {
  transform: scale(1.06);
}

.historia__aro {
  padding: 0.1875rem;
  background: linear-gradient(135deg, #d9c27a, #a8842f);
}

.historia__aro > * {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.1875rem solid var(--blanco);
  object-fit: cover;
  display: block;
}

.historia__vacia {
  background: linear-gradient(160deg, #efe9e0, #d9cfc0);
}

.circulo span:last-child,
.historia__titulo {
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.3;
  max-width: 6.875rem;
}

/* Tarjetas altas con foto y «Explorar» */
.tarjetas-img {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.tarjetas-img--tres {
  grid-template-columns: repeat(3, 1fr);
}

.timg {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 4;
  padding: 1.25rem;
  border-radius: var(--radio);
  overflow: hidden;
  isolation: isolate;
  color: var(--blanco);
  text-decoration: none;
}

.timg > .foto-pendiente {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: 0;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.timg:hover > .foto-pendiente {
  transform: scale(1.05);
}

.timg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 45%, rgba(17, 17, 17, 0.65));
}

.timg small {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--dorado);
}

.timg h3 {
  margin: 0.25rem 0 0.375rem;
  color: var(--blanco);
  font-size: 1.05rem;
}

.timg p {
  margin: 0 0 0.625rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}

.timg__explorar {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.timg__explorar::after {
  content: " →";
}

/* Banners promocionales: texto + foto sobre piedra */
.promos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.promo {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: 16.25rem;
  background: var(--piedra);
  border-radius: var(--radio);
  overflow: hidden;
}

.promo__texto {
  align-self: center;
  padding: 2.25rem;
}

.promo h3 {
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
}

.promo p {
  margin: 0.625rem 0 1.25rem;
  font-size: 0.92rem;
}

.promo .foto-pendiente {
  border-radius: 0;
  min-height: 100%;
}

/* Fila deslizable de fotos */
.fila {
  position: relative;
}

.fila__pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 1rem) / 4);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.fila__pista::-webkit-scrollbar {
  display: none;
}

.fila__pista > * {
  aspect-ratio: 3 / 4;
  min-height: 0;
  scroll-snap-align: start;
  border-radius: var(--radio);
}

.fila__boton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 0.0625rem solid var(--borde);
  background: var(--blanco);
  box-shadow: var(--sombra);
  font-size: 1.1rem;
  cursor: pointer;
}

.fila__boton--ant {
  left: -1.25rem;
}

.fila__boton--sig {
  right: -1.25rem;
}

/* Franja de datos con iconos */
.franja {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 1.75rem 0.5rem;
  background: var(--piedra);
  border-radius: var(--radio);
}

.franja--tres {
  grid-template-columns: repeat(3, 1fr);
}

.franja__item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0 1.5rem;
}

.franja__item + .franja__item {
  border-left: 0.0625rem solid var(--borde);
}

.franja__item svg {
  flex: 0 0 auto;
  width: 1.625rem;
  height: 1.625rem;
  stroke: var(--negro);
  stroke-width: 1.4;
  fill: none;
}

.franja__item b {
  display: block;
  font-size: 0.86rem;
  font-weight: 500;
}

.franja__item span {
  display: block;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--gris);
}

/* Bloque editorial: foto a un lado, texto al otro */
.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--gris-claro);
}

.editorial > .foto-pendiente {
  min-height: 32.5rem;
  border-radius: 0;
}

.editorial__texto {
  align-self: center;
  padding: 4rem max(1rem, calc((100vw - var(--ancho)) / 2 + 1rem)) 4rem 4.5rem;
}

.editorial h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
}

.editorial p {
  margin: 1.125rem 0 1.5rem;
  max-width: 46ch;
}

.lista-check {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}

.lista-check li {
  position: relative;
  padding-left: 1.625rem;
}

.lista-check li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0.0625rem;
  color: var(--dorado-oscuro);
  font-size: 0.8rem;
}

/* Banner final con foto (contacto, inscripción) */
.banner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  background: var(--piedra);
  border-radius: var(--radio);
  overflow: hidden;
}

.banner > .foto-pendiente {
  min-height: 22.5rem;
  border-radius: 0;
}

.banner__texto {
  align-self: center;
  padding: 3rem 3.5rem;
}

.banner h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
}

.banner p {
  margin: 0.75rem 0 1.5rem;
}

/* Contacto */
.contacto__lista {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}

.contacto__tipo {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dorado-oscuro);
}

.formulario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}

.formulario label {
  display: grid;
  gap: 0.375rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.formulario__ancho {
  grid-column: 1 / -1;
}

.formulario input,
.formulario select,
.formulario textarea {
  font: inherit;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.75rem 0.875rem;
  border: 0.0625rem solid var(--borde);
  border-radius: 0.1875rem;
  background: var(--blanco);
  color: var(--tinta);
}

.formulario .boton {
  justify-self: start;
}

.formulario__aviso {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.85rem;
  color: var(--gris);
}

/* Preguntas frecuentes */
.faq {
  max-width: 48.75rem;
  margin: 0 auto;
  border-top: 0.0625rem solid var(--borde);
}

.faq details {
  padding: 1.25rem 0.25rem;
  border-bottom: 0.0625rem solid var(--borde);
}

.faq summary {
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-size: 1.2rem;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "–";
}

.faq details p {
  margin: 0.625rem 0 0;
  color: var(--gris);
}

/* Cinta con texto en movimiento */
.cinta {
  overflow: hidden;
  padding: 1rem 0;
  background: var(--negro);
  color: var(--blanco);
}

.cinta__pista {
  display: flex;
  width: max-content;
  animation: cinta 45s linear infinite;
}

.cinta:hover .cinta__pista {
  animation-play-state: paused;
}

.cinta__item {
  display: inline-flex;
  align-items: center;
  gap: 1.75rem;
  padding-right: 1.75rem;
  font-family: var(--fuente-titulos);
  font-style: italic;
  font-size: 1.15rem;
  white-space: nowrap;
}

.cinta__item::after {
  content: "✦";
  font-style: normal;
  font-size: 0.7rem;
  color: var(--dorado);
}

@keyframes cinta {
  to { transform: translateX(-50%); }
}

/* Vídeos */
.videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr));
  gap: 1rem;
}

.video {
  margin: 0;
}

.video__portada,
.video iframe,
.video video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radio);
  background: var(--negro);
  display: block;
  overflow: hidden;
}

.video__portada {
  position: relative;
  padding: 0;
  cursor: pointer;
}

.video__portada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blanco);
  color: var(--negro);
  font-size: 0.85rem;
}

.video figcaption {
  margin-top: 0.625rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.video--pendiente .foto-pendiente {
  aspect-ratio: 16 / 9;
  min-height: 0;
}

/* Álbumes (cuando haya varios) */
.albumes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.albumes:empty {
  display: none;
}

.albumes__boton,
.pestana {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border: 0.0625rem solid var(--borde);
  border-radius: 0.1875rem;
  background: var(--blanco);
  color: var(--negro);
  cursor: pointer;
}

.albumes__boton[aria-selected="true"],
.pestana[aria-pressed="true"] {
  background: var(--negro);
  border-color: var(--negro);
  color: var(--blanco);
}

.galeria__foto {
  padding: 0;
  border: 0;
  background: var(--piedra);
  overflow: hidden;
  cursor: zoom-in;
}

.galeria__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.galeria__foto:hover img {
  transform: scale(1.04);
}

.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.galeria > * {
  aspect-ratio: 4 / 3;
  min-height: 0;
}

/* Visor de fotos */
.visor {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(10, 10, 10, 0.95);
  color: var(--blanco);
  overscroll-behavior: contain;
}

.visor[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.visor figure {
  margin: 0;
  text-align: center;
}

.visor img {
  max-width: 86vw;
  max-height: 82vh;
  margin: 0 auto;
}

.visor figcaption {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: #cfcfcf;
}

.visor button {
  background: none;
  border: 0;
  color: var(--blanco);
  font-size: 2.4rem;
  cursor: pointer;
  padding: 0.5rem 0.875rem;
}

.visor__cerrar {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
}

.visor__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.visor__nav--ant {
  left: 0.25rem;
}

.visor__nav--sig {
  right: 0.25rem;
}

/* Pie */
.pie {
  padding: 4rem 0 2.25rem;
  background: var(--negro);
  color: #d6d6d6;
  font-size: 0.9rem;
}

.pie__interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2rem;
}

.pie__isotipo {
  margin-bottom: 0.875rem;
  filter: invert(1);
}

.pie h2 {
  margin: 0 0 0.875rem;
  font-family: var(--fuente-texto);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blanco);
}

.pie ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.375rem;
}

.pie a {
  text-decoration: none;
}

.pie a:hover {
  color: var(--dorado);
}

.pie__legal {
  max-width: var(--ancho);
  margin: 2.5rem auto 0;
  padding: 1.25rem 1rem 0;
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.12);
  font-size: 0.82rem;
}

.pie [data-pendiente] {
  color: #e8a0a0;
}

/* ============ Escuela: inscripción y calendario ============ */
.inscripcion {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 1.5rem;
  align-items: start;
}

.inscripcion > .tarjeta {
  padding: 2rem;
}

.precios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.precio {
  padding: 1.125rem 1.25rem;
  border-radius: var(--radio);
  background: var(--piedra);
}

.precio span {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
}

.precio strong {
  font-family: var(--fuente-titulos);
  font-size: 1.9rem;
  font-weight: 500;
}

.horarios {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.375rem;
}

.horarios b {
  font-weight: 500;
  margin-right: 0.5rem;
}

.calendario__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.calendario__mes {
  font-family: var(--fuente-titulos);
  font-size: 1.3rem;
  font-weight: 500;
}

.calendario__cabeza button {
  background: var(--blanco);
  border: 0.0625rem solid var(--borde);
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.1rem;
  cursor: pointer;
}

.calendario__semana,
.calendario__dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  text-align: center;
}

.calendario__semana {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--gris);
  margin-bottom: 0.375rem;
}

.calendario__dia {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.9rem;
}

.calendario__dia--presencial {
  background: var(--negro);
  color: var(--blanco);
}

.calendario__dia--online {
  background: var(--dorado);
  color: var(--negro);
}

.calendario__dia--hoy {
  box-shadow: 0 0 0 0.125rem var(--dorado-oscuro);
}

.calendario__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0 0;
  font-size: 0.85rem;
}

.calendario__leyenda span::before {
  content: "";
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.375rem;
  border-radius: 50%;
  background: var(--negro);
}

.calendario__leyenda .online::before {
  background: var(--dorado);
}

.calendario__nota {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
}

/* ============ Comunicación: temas y programas ============ */
.temas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tema {
  padding: 1.5rem 1.25rem 1.75rem;
  border-top: 0.0625rem solid var(--negro);
}

.tema span {
  display: block;
  margin-bottom: 1.125rem;
  font-family: var(--fuente-titulos);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--dorado-oscuro);
}

.tema h3 {
  font-size: 1rem;
}

.programas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 1rem;
}

.programa {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem;
  background: var(--blanco);
  border: 0.0625rem solid var(--borde);
  border-radius: var(--radio);
}

.programa h3 {
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: 1.5rem;
}

.programa p {
  margin: 0;
}

.programa dl,
.evento dl {
  margin: 0.5rem 0 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.375rem 1rem;
  font-size: 0.92rem;
}

.programa dt,
.evento dt {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
  padding-top: 0.1875rem;
}

.programa dd,
.evento dd {
  margin: 0;
}

.programa .boton {
  margin-top: auto;
}

.programa--modelo {
  border-style: dashed;
}

/* ============ Eventos: perfil y collage ============ */
.perfil__avatar {
  width: 5.75rem;
  height: 5.75rem;
  margin-bottom: 1.25rem;
  padding: 0.1875rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #d9c27a, #a8842f);
}

.perfil__avatar span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--blanco);
  border: 0.1875rem solid var(--piedra);
}

.perfil__avatar img {
  width: 2.5rem;
}

.perfil__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: -0.625rem 0 1.75rem;
  padding: 0;
  list-style: none;
}

.perfil__datos li {
  padding: 0.25rem 0.75rem;
  border: 0.0625rem solid var(--borde);
  border-radius: 62.4375rem;
  background: var(--blanco);
  font-size: 0.8rem;
}

.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 4rem;
  grid-auto-flow: dense;
  gap: 1.125rem;
  padding: 0.75rem 0 1.5rem;
}

.collage__pieza {
  position: relative;
  margin: 0;
  padding: 0.4375rem;
  background: var(--blanco);
  border-radius: 0.25rem;
  box-shadow: 0 0.875rem 2.125rem rgba(17, 17, 17, 0.12);
  transform: rotate(var(--giro, 0deg)) translateY(var(--baja, 0));
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s;
}

.collage__pieza:hover {
  z-index: 2;
  transform: rotate(0deg) scale(1.04);
  box-shadow: 0 1.5rem 3.125rem rgba(17, 17, 17, 0.18);
}

.collage__pieza > .foto-pendiente,
.collage__pieza > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0.125rem;
  object-fit: cover;
}

.collage__pieza figcaption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.1875rem 0.625rem;
  background: var(--blanco);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.collage__pieza[hidden] {
  display: none;
}

.collage__pieza:nth-child(12n + 1) { grid-column: span 5; grid-row: span 5; --giro: -2deg; }
.collage__pieza:nth-child(12n + 2) { grid-column: span 4; grid-row: span 4; --giro: 3deg; --baja: 1.5rem; }
.collage__pieza:nth-child(12n + 3) { grid-column: span 3; grid-row: span 3; --giro: -4deg; }
.collage__pieza:nth-child(12n + 4) { grid-column: span 3; grid-row: span 4; --giro: 2deg; --baja: -0.75rem; }
.collage__pieza:nth-child(12n + 5) { grid-column: span 4; grid-row: span 3; --giro: -1.5deg; }
.collage__pieza:nth-child(12n + 6) { grid-column: span 5; grid-row: span 4; --giro: 2.5deg; --baja: 1rem; }
.collage__pieza:nth-child(12n + 7) { grid-column: span 3; grid-row: span 3; --giro: -3deg; }
.collage__pieza:nth-child(12n + 8) { grid-column: span 4; grid-row: span 5; --giro: 1.5deg; --baja: -1.125rem; }
.collage__pieza:nth-child(12n + 9) { grid-column: span 4; grid-row: span 3; --giro: -2.5deg; }
.collage__pieza:nth-child(12n + 10) { grid-column: span 3; grid-row: span 4; --giro: 3deg; --baja: 0.625rem; }
.collage__pieza:nth-child(12n + 11) { grid-column: span 5; grid-row: span 3; --giro: -1deg; }
.collage__pieza:nth-child(12n + 12) { grid-column: span 4; grid-row: span 4; --giro: 2deg; }

.eventos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 1rem;
}

.evento {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 0.0625rem solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}

.evento--destacado {
  grid-column: 1 / -1;
  flex-direction: row;
}

.evento__foto {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  min-height: 0;
}

.evento--destacado .evento__foto {
  flex: 1;
  aspect-ratio: auto;
}

.evento__cuerpo {
  flex: 1;
  padding: 1.5rem 1.75rem;
}

.evento h3 {
  margin: 0 0 0.75rem;
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: 1.5rem;
}

.eventos__vacio {
  grid-column: 1 / -1;
  padding: 2.75rem 1.5rem;
  text-align: center;
}

/* ============ Libros ============ */
.hero__imagen--libro {
  display: grid;
  place-items: center;
  padding: 3.5rem 1rem;
  background: var(--piedra-oscura);
  perspective: 87.5rem;
}

.libro3d__tapa {
  width: min(17.5rem, 64vw);
  aspect-ratio: 2 / 3;
  min-height: 0;
  border-radius: 0.1875rem 0.5rem 0.5rem 0.1875rem;
  transform: rotateY(-16deg);
  box-shadow: 1.75rem 1.75rem 3.125rem rgba(17, 17, 17, 0.22), inset 0.375rem 0 0 rgba(0, 0, 0, 0.08);
}

.lectura {
  max-width: 47.5rem;
  margin: 0 auto;
}

.lectura h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  margin-bottom: 1rem;
}

.lectura p {
  margin: 0 0 1rem;
}

.fragmento {
  margin: 0;
  padding: 2.5rem 2.75rem;
  font-family: var(--fuente-titulos);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.5;
  border-left: 0.125rem solid var(--dorado);
}

.fragmento p {
  margin: 0;
}

/* ============ Movimiento ============ */
.revelar {
  opacity: 0;
  translate: 0 1.5rem;
  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s;
  transition-delay: var(--retraso, 0s), var(--retraso, 0s), 0s, 0s;
}

.revelar--visible {
  opacity: 1;
  translate: 0 0;
}

/* ============ Móvil ============ */
@media (max-width: 960px) {
  .tarjetas-img,
  .temas {
    grid-template-columns: repeat(2, 1fr);
  }

  .fila__pista {
    grid-auto-columns: calc((100% - 1rem) / 2);
  }

  .franja {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.25rem;
  }

  .franja__item:nth-child(3) {
    border-left: 0;
  }

  .promos {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .cabecera__interior {
    grid-template-columns: 1fr auto;
  }

  .cabecera__marca {
    grid-column: 1;
  }

  .cabecera__menu {
    display: block;
    grid-column: 2;
  }

  .navegacion {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--blanco);
    border-bottom: 0.0625rem solid var(--borde);
    padding: 0.5rem 1rem 1.25rem;
  }

  .navegacion--abierta {
    display: flex;
  }

  .navegacion__grupo {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .navegacion__grupo a {
    padding: 0.875rem 0;
    border-bottom: 0.0625rem solid var(--borde);
  }

  .navegacion .boton {
    margin-top: 1rem;
  }

  .seccion {
    padding: 4rem 0;
  }

  .hero,
  .editorial,
  .banner,
  .inscripcion,
  .pie__interior {
    grid-template-columns: 1fr;
  }

  .hero__texto {
    padding: 3rem 1rem 5.5rem;
  }

  .hero__imagen {
    min-height: 23.75rem;
    order: -1;
  }

  .hero__imagen--libro {
    min-height: 0;
  }

  .editorial > .foto-pendiente {
    min-height: 21.25rem;
  }

  .editorial__texto {
    padding: 2.5rem 1rem 3rem;
  }

  .banner__texto {
    padding: 2rem 1.375rem;
  }

  .banner > .foto-pendiente {
    min-height: 15rem;
  }

  .circulos {
    justify-content: flex-start;
    margin-top: -3rem;
    padding: 1.25rem 1rem;
  }

  .circulo__imagen,
  .historia__aro {
    width: 4.25rem;
    height: 4.25rem;
  }

  .cabeza-fila {
    flex-direction: column;
    align-items: flex-start;
  }

  .tarjetas-img--tres {
    grid-template-columns: 1fr;
  }

  .tarjetas-img--tres .timg {
    aspect-ratio: 4 / 3;
  }

  .promo {
    grid-template-columns: 1fr 0.8fr;
  }

  .promo__texto {
    padding: 1.5rem 1.25rem;
  }

  .fila__boton {
    display: none;
  }

  .franja,
  .franja--tres {
    grid-template-columns: 1fr;
    padding: 1.25rem 0.25rem;
  }

  .franja__item + .franja__item {
    border-left: 0;
    border-top: 0.0625rem solid var(--borde);
    padding-top: 1.125rem;
  }

  .formulario {
    grid-template-columns: 1fr;
  }

  .galeria {
    grid-template-columns: 1fr 1fr;
  }

  .collage {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 9.375rem;
    gap: 0.875rem;
  }

  .collage__pieza:nth-child(n) {
    grid-column: span 1;
    grid-row: span 1;
    --baja: 0;
  }

  .collage__pieza:nth-child(5n + 1),
  .collage__pieza:nth-child(5n + 4) {
    grid-row: span 2;
  }

  .collage__pieza:nth-child(4n + 2) {
    --giro: 2deg;
  }

  .collage__pieza:nth-child(4n + 3) {
    --giro: -2deg;
  }

  .evento--destacado {
    flex-direction: column;
  }

  .evento--destacado .evento__foto {
    aspect-ratio: 4 / 3;
  }

  .inscripcion > .tarjeta {
    padding: 1.375rem;
  }

  .fragmento {
    padding: 1.625rem 1.375rem;
  }

  .mini li {
    padding: 0 0.75rem;
  }
}

@media (max-width: 480px) {
  .tarjetas-img {
    grid-template-columns: 1fr;
  }

  .timg {
    aspect-ratio: 4 / 3;
  }

  .temas {
    grid-template-columns: 1fr;
  }

  .tema {
    padding: 1.125rem 0.25rem;
  }

  .tema span {
    margin-bottom: 0.375rem;
  }

  .fila__pista {
    grid-auto-columns: 72%;
  }

  .precios {
    grid-template-columns: 1fr;
  }

  .promo {
    grid-template-columns: 1fr;
  }

  .promo .foto-pendiente {
    min-height: 10rem;
  }

  .mini {
    row-gap: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .texto-dorado,
  .cinta__pista {
    animation: none;
  }

  .revelar {
    opacity: 1;
    translate: none;
    transition: none;
  }

  .timg > .foto-pendiente,
  .collage__pieza,
  .galeria__foto img {
    transition: none;
  }
}

.enlace[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.hero__imagen--libro > .foto-pendiente {
  position: relative;
  inset: auto;
}

/* ============ v6: bandas de clases (Escuela) y banners de eventos ============ */
:root {
  --nude: #efe3d9;
  --champan: #ece4cf;
  --cafe: #7b5d48;
  --cafe-claro: #a88a6f;
}

/* Bandas a todo el ancho que se apilan al hacer scroll */
.bandas {
  position: relative;
}

.banda-clase {
  position: sticky;
  top: 3.875rem;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  min-height: 27.5rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--tono, var(--piedra));
  box-shadow: 0 -1.125rem 2.5rem rgba(17, 17, 17, 0.06);
}

.banda-clase:nth-child(4n + 1) { --tono: var(--piedra); }
.banda-clase:nth-child(4n + 2) { --tono: var(--nude); }
.banda-clase:nth-child(4n + 3) { --tono: var(--champan); }
.banda-clase:nth-child(4n + 4) { --tono: #e9e8e4; }

.banda-clase__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 22%;
  overflow: hidden;
  font-family: var(--fuente-titulos);
  font-size: clamp(5rem, 15vw, 13rem);
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

.banda-clase__texto {
  padding: 3rem 2rem 3rem max(1rem, calc((100vw - var(--ancho)) / 2 + 1rem));
}

.banda-clase__texto small {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dorado-oscuro);
}

.banda-clase h3 {
  margin-bottom: 1.375rem;
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  text-transform: uppercase;
}

.banda-clase__fotos {
  position: relative;
  align-self: stretch;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 1rem;
  padding: 2rem max(1rem, calc((100vw - var(--ancho)) / 2 + 1rem)) 2rem 0;
}

.banda-clase__fotos .foto-pendiente {
  min-height: 0;
  border-radius: 0.125rem;
}

.banda-clase__fotos .foto-pendiente:first-child {
  margin: 3rem 0;
}

/* Banners de eventos: estilo promocional con polaroids */
.banners-ev {
  display: grid;
  gap: 1.25rem;
}

.banner-ev {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
}

/* Versión dividida: texto sobre café + foto */
.banner-ev--split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: 18.75rem;
  background: var(--cafe);
  color: #f5efe8;
}

.banner-ev--split .banner-ev__texto {
  align-self: center;
  padding: 2.5rem 3rem;
}

.banner-ev--split .antetitulo {
  color: #f0dca0;
}

.banner-ev--split h3 {
  margin-bottom: 0.875rem;
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.02;
  color: var(--blanco);
}

.banner-ev--split p,
.banner-ev--split li {
  color: #f5efe8;
}

.banner-ev__datos {
  display: grid;
  gap: 0.25rem;
  margin: 0 0 1.375rem;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
}

.banner-ev__datos b {
  font-weight: 500;
}

.banner-ev__foto {
  position: relative;
  min-height: 15rem;
}

.banner-ev__foto > .foto-pendiente,
.banner-ev__foto > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.banner-ev__franja {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.75rem;
  width: 3.5rem;
  background: var(--cafe-claro);
  transform: skewX(-8deg);
}

/* Versión centrada: título entre polaroids */
.banner-ev--polaroid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  gap: 1rem;
  padding: 2.25rem 2.5rem;
  background:
    radial-gradient(circle at 0% 100%, rgba(168, 138, 111, 0.25), transparent 40%),
    radial-gradient(circle at 100% 0%, rgba(168, 138, 111, 0.2), transparent 40%),
    var(--piedra);
  text-align: center;
}

.banner-ev--polaroid h3 {
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--cafe);
}

.banner-ev--polaroid p {
  margin: 0.5rem 0 1.125rem;
}

.banner-ev__chip {
  display: inline-block;
  margin-top: 0.875rem;
  padding: 0.375rem 1.125rem;
  border-radius: 62.4375rem;
  background: var(--cafe);
  color: var(--blanco);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.banner-ev__chip:disabled {
  opacity: 0.6;
  cursor: default;
}

.polaroid {
  justify-self: center;
  width: min(10.625rem, 100%);
  padding: 0.5rem 0.5rem 1.875rem;
  background: var(--blanco);
  box-shadow: 0 0.75rem 1.75rem rgba(17, 17, 17, 0.16);
  transform: rotate(var(--giro, -6deg));
  transition: transform 0.4s;
}

.polaroid:last-child {
  --giro: 5deg;
}

.banner-ev:hover .polaroid {
  transform: rotate(0deg);
}

.polaroid > .foto-pendiente,
.polaroid > img {
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: 0;
  object-fit: cover;
  border-radius: 0;
}

@media (max-width: 820px) {
  .banda-clase {
    grid-template-columns: 1fr;
    min-height: 0;
    top: 3.5rem;
  }

  .banda-clase__texto {
    padding: 2.25rem 1rem 0.5rem;
  }

  .banda-clase__fotos {
    height: 15rem;
    padding: 1rem;
  }

  .banda-clase__fotos .foto-pendiente:first-child {
    margin: 1.5rem 0;
  }

  .banda-clase__fondo {
    align-items: flex-start;
    padding-top: 1.5rem;
  }

  .banner-ev--split {
    grid-template-columns: 1fr;
  }

  .banner-ev--split .banner-ev__texto {
    padding: 1.75rem 1.375rem;
  }

  .banner-ev__franja {
    display: none;
  }

  .banner-ev--polaroid {
    grid-template-columns: 1fr 1fr;
    padding: 1.75rem 1.125rem;
  }

  .banner-ev--polaroid .banner-ev__centro {
    grid-column: 1 / -1;
    order: -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .polaroid {
    transition: none;
  }
}

/* Banner de oferta (Escuela) */
.oferta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 26.25rem;
  background: #6d6862;
  color: var(--blanco);
  overflow: hidden;
}

.oferta__texto {
  position: relative;
  align-self: center;
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 0.625rem;
  padding: 3.5rem 1.5rem 4.5rem;
  text-align: center;
}

.oferta__plazo {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.oferta__cifra {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: clamp(3rem, 7vw, 5.6rem);
  line-height: 1;
}

.oferta__aplica {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.oferta__codigo {
  margin: 0.875rem 0 0.375rem;
  font-size: 0.85rem;
}

.oferta__codigo b {
  margin-left: 0.375rem;
  padding: 0.25rem 0.75rem;
  background: var(--dorado);
  color: var(--negro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.oferta__condiciones {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.125rem;
  font-size: 0.75rem;
  opacity: 0.85;
}

.oferta [data-pendiente] {
  color: #ffd2d2;
}

.oferta__foto > .foto-pendiente {
  height: 100%;
  border-radius: 0;
}

@media (max-width: 820px) {
  .oferta {
    grid-template-columns: 1fr;
  }

  .oferta__foto {
    height: 16.25rem;
    order: -1;
  }
}

/* ============ v7: escena de la Escuela (letras entre las alumnas) ============ */
.escena {
  padding-top: 3rem;
  background:
    radial-gradient(ellipse at 50% 35%, #e4dbcf 0%, #cfc3b3 60%, #c2b5a3 100%);
  overflow: hidden;
}

.escena__cabeza {
  text-align: center;
}

.escena__cabeza h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
}

.escena__lienzo {
  position: relative;
  max-width: 87.5rem;
  height: clamp(23.75rem, 50vw, 40rem);
  margin: 0 auto;
}

/* Suelo: franja más clara bajo las modelos */
.escena__lienzo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
}

.escena__palabra {
  position: absolute;
  z-index: 2;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--fuente-titulos);
  font-size: clamp(4.6rem, 18vw, 16.5rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--blanco);
  pointer-events: none;
}

.escena__modelos {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 3%;
  padding-bottom: 2%;
}

.modelo {
  position: relative;
  height: 88%;
}

.modelo svg {
  height: 100%;
  width: auto;
  fill: var(--negro);
}

.modelo--atras {
  z-index: 1;
  height: 80%;
}

.modelo--delante {
  z-index: 3;
}

.modelo:nth-child(2) svg { transform: scaleX(-1); }
.modelo:nth-child(4) { height: 92%; }
.modelo:nth-child(5) svg { transform: scaleX(-1); }

.escena__nota {
  position: absolute;
  z-index: 4;
  right: 1rem;
  bottom: 0.625rem;
  max-width: 17.5rem;
  font-size: 0.72rem;
  text-align: right;
}

.escena__pie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
  padding-top: 2.25rem;
  padding-bottom: 6.5rem;
}

.escena__pie p {
  margin: 0;
  max-width: 46ch;
  font-size: 1.05rem;
}

.escena__pie .mini {
  margin-top: 1.5rem;
}

@media (max-width: 820px) {
  .escena__lienzo {
    height: 22.5rem;
  }

  .escena__palabra {
    font-size: 21vw;
    top: 10%;
  }

  .modelo:first-child,
  .modelo:last-child {
    display: none;
  }

  .escena__nota {
    left: 1rem;
    max-width: none;
    text-align: left;
  }

  .escena__pie {
    grid-template-columns: 1fr;
    padding-bottom: 5rem;
  }
}

/* Hueco con su foto ya cargada */
.foto-pendiente--lista {
  background: var(--piedra);
}

.foto-pendiente--lista::after {
  content: none;
}

.foto-pendiente--lista > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-valor] {
  white-space: pre-line;
}

.collage__pieza {
  cursor: zoom-in;
}

/* Títulos en Bebas Neue (solo mayúsculas y sin cursiva): los énfasis de los títulos no se inclinan */
h1 em,
h2 em,
h3 em,
.cinta__item,
.tema span {
  font-style: normal;
}

/* El fragmento del libro es texto corrido: va en la letra del texto */
.fragmento {
  font-family: var(--fuente-texto);
}

/* «Nôvhera» en los títulos con el logotipo oficial */
.marca-titulo {
  display: inline-block;
  width: auto;
  height: 0.62em;
  margin-left: 0.08em;
  vertical-align: baseline;
}

h1 .marca-titulo {
  margin-left: 0;
}

.hero--negra .marca-titulo,
.pie .marca-titulo {
  filter: brightness(0) invert(1);
}

img.escena__palabra {
  width: min(88%, 80rem);
  height: auto;
  filter: brightness(0) invert(1);
}