/* Falla En Plom - Guillem de Castro — estilos base, mobile-first
   Sistema de diseño editorial/monocromo (ref. verostudio.com): ver
   aidlc-docs/construction/falla-en-plom-web/code/design-system.md
   Fuentes (Playfair Display + DM Sans) autoalojadas en /assets/fonts — ver CSP en vercel.json
   (style-src/font-src 'self', sin dependencias de fonts.googleapis.com) */

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/playfair-display-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-bg: #f3efe8;
  --color-bg-alt: #ece5da;
  --color-text: #17140f;
  --color-text-muted: #756e63;
  --color-surface: #f8f5f0;
  --color-border: #ddd3c4;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max-width: 72rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 3.5rem;
  --space-5: 6rem;
  --radius: 3px;
  --header-h: 6rem;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
}

body.nav-open {
  overflow: hidden;
}

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

a {
  color: var(--color-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Header / navegacion */

.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 30px var(--space-3);
  box-sizing: border-box;
  max-width: 1728px;
  margin-left: auto;
  margin-right: auto;
}

.site-header__brand {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--color-text);
  white-space: nowrap;
}

.site-header__brand-icon {
  display: none;
  height: 34px;
  width: auto;
}

.site-header__cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 45px;
  min-height: 45px;
  background: var(--color-surface);
  padding: 10px 32px;
  border: none;
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  color: var(--color-text);
}

.site-header__cta-icon {
  display: none;
  flex-shrink: 0;
}

/* Envoltorio del efecto de cambio de texto al hover: solo el texto se
   desliza/recorta (overflow/position viven aqui, no en el boton). Usa dos
   copias reales del texto (no attr()/::after) para conservar el <em>
   en cursiva en ambas. */

.text-swap {
  position: relative;
  display: block;
  overflow: hidden;
}

.text-swap__original,
.text-swap__copy {
  display: block;
  transition: transform 0.35s ease;
}

.text-swap__copy {
  position: absolute;
  left: 0;
  top: 100%;
}

.site-header__cta:hover .text-swap__original,
.site-header__cta:hover .text-swap__copy,
.nav-toggle:hover .text-swap__original,
.nav-toggle:hover .text-swap__copy,
.btn-pill:hover .text-swap__original,
.btn-pill:hover .text-swap__copy {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .text-swap__original,
  .text-swap__copy {
    transition: none;
  }
}

.nav-toggle {
  justify-self: start;
  position: relative;
  z-index: 21;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  min-height: 45px;
  background: var(--color-surface);
  border: none;
  padding: 10px 32px;
  font-family: var(--font-serif);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text);
  gap: 10px;
  transition: background-color 0.15s ease, color 0.2s ease;
}

.nav-toggle__icon {
  display: none;
  flex-shrink: 0;
}

/* En movil el header se simplifica a iconos: hamburguesa/aspa (.nav-toggle)
   + icono de contacto + escudo en vez del nombre completo de la falla - el
   texto sigue en el DOM (accesible por aria-label/alt), solo se oculta
   visualmente. Este bloque va DESPUES de las reglas base de cada icono
   (arriba) para ganarles en cascada con la misma especificidad. */

@media (max-width: 640px) {
  .site-header__brand-text {
    display: none;
  }

  .site-header__brand-icon {
    display: block;
  }

  .site-header__cta-label {
    display: none;
  }

  .site-header__cta-icon {
    display: block;
  }

  .nav-toggle__label {
    display: none;
  }

  .nav-toggle__icon {
    display: block;
  }

  .nav-toggle,
  .site-header__cta {
    padding: 10px 14px;
  }
}

/* Con el menu abierto el toggle ("Cerrar") siempre queda blanco opaco +
   texto oscuro, con independencia del estado transparente/solido del
   header, para tener contraste garantizado sobre el fondo claro del menu */

body.nav-open .nav-toggle {
  background: #ffffff;
  color: var(--color-text);
}

/* Header transparente sobre el hero en video, solido tras hacer scroll (patron real de verostudio.com) */

.site-header--transparent .site-header__brand {
  color: #ffffff;
  transition: color 0.2s ease;
}

.site-header--transparent .nav-toggle {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.site-header--transparent .nav-toggle:hover {
  background: rgba(255, 255, 255, 0.32);
}

.site-header--transparent .site-header__cta {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.site-header--transparent .site-header__cta:hover {
  background: rgba(255, 255, 255, 0.32);
  color: #ffffff;
}

/* Scrim oscuro detras del panel de menu (independiente del ::before claro
   de .nav-menu). Vive siempre en el DOM (no display:none) para poder
   transicionar su opacidad; body.nav-open lo activa. */

.nav-scrim::after {
  content: "";
  z-index: -1;
  background-color: #181615;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease-in-out;
  position: fixed;
  top: 0;
  left: 0;
}

body.nav-open .nav-scrim::after {
  opacity: 0.5;
  pointer-events: auto;
}

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

.nav-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 19;
  max-height: 100svh;
  height: fit-content;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: calc(var(--header-h) + var(--space-3)) var(--space-3) var(--space-4);
  overflow-y: auto;
}

.nav-menu::before {
  content: "";
  z-index: -1;
  background-color: #f3f0ed;
  transform-origin: top;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

@keyframes nav-reveal {
  0% {
    clip-path: inset(0 0 100% 0);
  }
  100% {
    clip-path: inset(0 0 0% 0);
  }
}

@keyframes nav-conceal {
  0% {
    clip-path: inset(0 0 0% 0);
  }
  100% {
    clip-path: inset(0 0 100% 0);
  }
}

.nav-menu--open,
.nav-menu--closing {
  display: flex;
}

.nav-menu--open {
  animation: nav-reveal 0.5s ease forwards;
}

.nav-menu--open::before {
  animation: nav-reveal 0.5s ease forwards;
}

.nav-menu--closing {
  animation: nav-conceal 0.5s ease forwards;
}

.nav-menu--closing::before {
  animation: nav-conceal 0.5s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu--open,
  .nav-menu--open::before,
  .nav-menu--closing,
  .nav-menu--closing::before {
    animation: none;
  }
}

.nav-menu {
  counter-reset: navitem;
}

.nav-menu > a {
  counter-increment: navitem;
  display: block;
  text-decoration: none;
  padding: 0.15em 0;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 8vw, 3.75rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--color-text);
  border-bottom: none;
}

.nav-menu > a::before {
  content: counter(navitem, upper-roman) '.';
  display: inline-block;
  width: 2.25rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  vertical-align: super;
  color: var(--color-text-muted);
}

.nav-menu a:hover,
.nav-menu a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.lang-switcher {
  font-size: 0.8rem;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.lang-switcher a {
  font-family: var(--font-serif);
  font-style: italic;
  text-decoration: none;
  color: var(--color-text-muted);
}

.lang-switcher a:hover {
  color: var(--color-text);
}

/* Layout general */

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: calc(var(--header-h) + var(--space-4)) var(--space-3) var(--space-4);
}

section {
  margin-bottom: var(--space-5);
}

main section + section {
  padding-top: var(--space-5);
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2rem, 5vw, 3rem);
}

h2 {
  font-size: clamp(1.85rem, 4.5vw, 2.75rem);
  letter-spacing: -0.05em;
}

h3 {
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  font-weight: 500;
}

em {
  font-style: italic;
  font-weight: 400;
}

.kicker {
  display: block;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.kicker em {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text);
}

/* Home */

.hero {
  text-align: center;
  padding: var(--space-5) var(--space-2) var(--space-4);
}

.hero h1 {
  font-size: clamp(2.5rem, 8vw, 4.75rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.hero__content h1 {
  margin: 0;
}

.hero p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

.hero__subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  max-width: 32rem;
  margin: 18px auto 0;
  color: var(--color-text-muted);
}

.hero__subtitle-caps {
  font-style: normal;
  text-transform: uppercase;
}

.hero--video .hero__subtitle {
  color: rgba(255, 255, 255, 0.85);
}

.hero__social-links {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.hero__social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  min-height: 45px;
  padding: 10px 1.5rem;
  background: var(--color-surface);
  border: none;
  box-shadow: 0 1px 3px rgba(23, 20, 15, 0.08), 0 1px 2px rgba(23, 20, 15, 0.06);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.hero__social-links a:hover {
  box-shadow: 0 3px 10px rgba(23, 20, 15, 0.14), 0 1px 3px rgba(23, 20, 15, 0.1);
  transform: translateY(-1px);
}

/* Hero en video (patron MainHero de verostudio.com) */

.hero--video {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: calc(-1 * (var(--header-h) + var(--space-4)));
  margin-bottom: 0;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  color: #ffffff;

  /* Mascara que va cerrando el video (y su overlay) al hacer scroll:
     --mask-progress (0 a 1) lo actualiza assets/js/hero-video.js segun el
     scroll; se declara aqui, en el ancestro comun, porque las custom
     properties heredan y tanto .hero__video como .hero__video-overlay la
     necesitan para mantener el mismo recorte sincronizado */
  --mask-progress: 0;
}

.hero__video,
.hero__video-overlay {
  --mask-scale-h: calc(1 - .3 * max(0, calc(var(--mask-progress) - .1)));
  --mask-scale-v: calc(1 - .3 * var(--mask-progress));
  clip-path: polygon(
    calc(50% - 50% * var(--mask-scale-h)) calc(50% - 50% * var(--mask-scale-v)),
    calc(50% + 50% * var(--mask-scale-h)) calc(50% - 50% * var(--mask-scale-v)),
    calc(50% + 50% * var(--mask-scale-h)) calc(50% + 50% * var(--mask-scale-v)),
    calc(50% - 50% * var(--mask-scale-h)) calc(50% + 50% * var(--mask-scale-v))
  );
  transition: clip-path 0.2s var(--ease-out-quart);
  will-change: clip-path;
}

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

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100svh;
  object-fit: cover;
}

.hero__video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55));
}

.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-5) var(--space-2);
}

.hero--video .kicker {
  color: rgba(255, 255, 255, 0.75);
}

.hero--video h1,
.hero--video p {
  color: #ffffff;
}

.hero--video .hero__social-links a {
  border-color: #ffffff;
  color: #ffffff;
}

.hero--video .hero__social-links a:hover {
  background: #ffffff;
  color: var(--color-text);
}

.hero__video-toggle {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  min-height: 45px;
  padding: 10px 0;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.3);
  color: #ffffff;
  font-size: 0.8rem;
  cursor: pointer;
}

.hero__video-toggle:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* Pantalla de carga (patron RootLayoutLoader de verostudio.com): el fondo
   solido no es un background propio del overlay, es el box-shadow de
   .loader-overlay__mask (spread enorme que cubre toda la pantalla
   alrededor de su propio cuadrado, que empieza pequeno y centrado). Como
   el cuadrado en si no pinta nada, se ve a traves de el el .hero--video
   real que ya esta reproduciendose detras - es una ventana/mascara real,
   no una imagen duplicada. Al terminar la carga, --opening anima el
   cuadrado hasta cubrir toda la pantalla: el box-shadow que hacia de
   fondo se queda sin sitio donde pintarse y el hero queda revelado a
   pantalla completa. Esa expansion sustituye al fade de salida anterior. */

.loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
}

/* Bloquea el scroll de la pagina mientras el loader esta presente
   (assets/js/loader.js anade/quita esta clase en <html>) - sin esto, el
   fixed inset:0 del overlay no impide desplazar el contenido real detras. */

.loader-locked {
  overflow: hidden;
  height: 100%;
}

.loader-overlay__mask {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 9999px var(--color-bg);
  transition: width 1.9s var(--ease-out-quart), height 1.9s var(--ease-out-quart);
}

/* Arranca en 1px y crece hasta su tamano real nada mas iniciar la carga
   (--ready, activado por loader.js con un frame de margen para que la
   transicion se dispare) durante 1.9s. --opening (mismo selector,
   declarado despues para ganar cuando ambas clases coexisten al
   terminar) la hace crecer de nuevo hasta pantalla completa, con su
   propia duracion (0.9s, sin cambios) en vez de heredar la de --ready. */

.loader-overlay--ready .loader-overlay__mask {
  width: 220px;
  height: 220px;
}

.loader-overlay--opening .loader-overlay__mask {
  width: 100vw;
  height: 100vh;
  transition: width 0.9s var(--ease-out-quart), height 0.9s var(--ease-out-quart);
}

.loader-overlay__text {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease;
}

/* Hueco del mismo tamano que .loader-overlay__mask: al ser un hijo flex
   mas entre las dos lineas, empuja "FALLA EN PLOM" hacia arriba y
   "GUILLEM DE CASTRO" hacia abajo, dejando el cuadrado justo en medio. */

.loader-overlay__mask-spacer {
  width: 220px;
  height: 220px;
  flex-shrink: 0;
}

.loader-overlay--opening .loader-overlay__text,
.loader-overlay--opening .loader-overlay__counter {
  opacity: 0;
}

.loader-overlay__word {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, calc((100vw - 56px) / 10.3), 120px);
  line-height: 1.05;
  color: var(--color-text);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.loader-overlay__word--visible {
  opacity: 1;
  transform: none;
}

.loader-overlay__counter {
  position: fixed;
  left: 50%;
  bottom: var(--space-3);
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--color-text);
  transition: opacity 0.4s ease;
}

/* Aparicion al hacer scroll (IntersectionObserver, assets/js/reveal.js) */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal--visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .loader-overlay__word {
    transition: none;
  }
}

/* Palabra a palabra en todos los h2 y .kicker (IntersectionObserver,
   assets/js/word-reveal.js) */

.word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.word-mask .word {
  display: inline-block;
  transform: translateY(calc(100% + 0.75em));
  transition: transform 1.4s calc(var(--word-index, 0) * 0.1s) cubic-bezier(0.19, 1, 0.22, 1);
}

.word-reveal--visible .word {
  transform: translateY(0);
}

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

/* Medallon 3D del escudo, pineado por scroll (patron DressDiscover de
   verostudio.com: visor del "producto" en WebGL + texto). El scroller da
   la distancia de scroll; el pin queda fijo a pantalla completa mientras
   el titulo desaparece / el escudo sube girando / el caption aparece y
   desaparece. Ver assets/js/escudo-medallion.js. */

main .section-dress-discover {
  border-top: none;
  padding-top: 0;
}

.section-dress-discover.is-3d-ready {
  margin-bottom: 0;
}

.section-dress-discover.is-3d-ready .section-dress-discover__pin {
  overflow: visible;
}

.section-dress-discover__scroller {
  position: relative;
  height: 300vh;
}

.section-dress-discover__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.section-dress-discover__pin::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--color-surface) 0%, transparent 55%);
  z-index: 0;
}

.section-dress-discover__title,
.section-dress-discover__caption {
  position: absolute;
  left: 50%;
  width: min(90vw, 40rem);
  transform: translateX(-50%);
  text-align: center;
  margin: 0;
  z-index: 2;
}

.section-dress-discover__title {
  top: 25%;
  z-index: 0;
  width: min(94vw, 54rem);
  transform: translate(-50%, -50%);
  font-size: clamp(2.5rem, 8vw, 7.5rem);
}

.section-dress-discover__caption {
  bottom: 8%;
  z-index: 3;
  width: 100%;
  font-size: 120px;
}

@media (max-width: 640px) {
  .section-dress-discover__caption {
    font-size: 46px;
  }
}

.section-dress-discover__stage {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 100vw;
  height: 200vh;
  transform: translate(-50%, calc(-50% + var(--escudo-y, 0px)));
  z-index: 1;
}

.section-dress-discover__fallback,
.section-dress-discover__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.6s var(--ease-out-quart);
}

.section-dress-discover__canvas {
  opacity: 0;
}

.section-dress-discover.is-3d-ready .section-dress-discover__canvas {
  opacity: 1;
}

/* Cierre de la secuencia: titulo h3 (DM Sans, no Playfair - a proposito
   distinto del resto de titulares del sitio) + parrafo + CTA, igual que
   el bloque de texto real de dress-discover en verostudio.com. Aparece
   justo cuando el caption desaparece (progreso >= HIDE_CAPTION_AT) y se
   queda visible hasta que el pin suelta hacia la seccion de
   representantes. Mismo efecto opacidad+translateY que .reveal, no
   palabra a palabra (no es un titular h2/kicker). */

.section-dress-discover__outro {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  gap: var(--space-2);
  padding: var(--space-3);
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-out-quart), transform 0.6s var(--ease-out-quart);
  pointer-events: none;
}

.section-dress-discover__outro.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.section-dress-discover__outro-title {
  max-width: 34rem;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.3;
  color: var(--color-text);
}

.section-dress-discover__outro-text {
  max-width: 34rem;
  margin: 0;
  color: var(--color-text-muted);
}

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

.section-dress-discover.is-3d-ready .section-dress-discover__fallback {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .section-dress-discover__scroller {
    height: auto;
  }

  .section-dress-discover__pin {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-2);
  }

  .section-dress-discover__title,
  .section-dress-discover__caption,
  .section-dress-discover__stage,
  .section-dress-discover__outro {
    position: static;
    inset: auto;
    transform: none;
    width: 100%;
    max-width: 30rem;
    opacity: 1;
    pointer-events: auto;
  }

  .section-dress-discover__stage {
    aspect-ratio: 1 / 1;
  }
}

/* Imagen con mascara que crece del ancho del contenedor (--max-width) al
   ancho completo de pantalla segun el scroll: mismo patron de
   --mask-progress (0 a 1) que .hero--video, pero animando el ancho en vez
   de un clip-path, y generalizado a cualquier .section-image-reveal en
   vez de fijado al hero. Ver assets/js/image-mask-reveal.js. */

.section-image-reveal {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  justify-content: center;
  --mask-progress: 0;
}

.section-image-reveal__media {
  width: calc(var(--max-width) + (100vw - var(--max-width)) * var(--mask-progress));
  aspect-ratio: 1280 / 600;
  overflow: hidden;
  border-radius: calc(var(--radius) * (1 - var(--mask-progress)));
  transition: width 0.2s var(--ease-out-quart), border-radius 0.2s var(--ease-out-quart);
  will-change: width;
}

.section-image-reveal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

@media (max-width: 640px) {
  .section-image-reveal {
    padding-top: 0px;
  }

  .section-image-reveal__media {
    aspect-ratio: 2 / 3;
  }
}

.btn-link {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin-top: var(--space-2);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 2px;
}

.btn-link span {
  display: block;
  transition: transform 0.35s ease;
}

.btn-link::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 100%;
  transition: transform 0.35s ease;
}

.btn-link:hover {
  color: var(--color-text-muted);
  border-bottom-color: var(--color-text-muted);
}

.btn-link:hover span,
.btn-link:hover::after {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .btn-link span,
  .btn-link::after {
    transition: none;
  }
}

/* Secciones "teaser" de la home (el escudo queda en .section-dress-discover;
   representantes/monumento/album reutilizan esta misma base centrada) */

.section-teaser {
  text-align: center;
}

.section-teaser h2 {
  margin-bottom: var(--space-1);
}

/* Titulo de la galeria a 120px, mismo patron fluido que los h2 de
   representantes/monumento (ver .section-representantes__header h2) pero
   con su propio divisor (medido contra "para SIEMPRE"/"ser FALLA", mas
   cortos) y contra el ancho real de .section-gallery-teaser via
   container query, ya que esta seccion vive en flujo normal dentro de
   `main` (max-width) y no es full-bleed como el header de representantes
   - 100vw sobreestimaria el ancho disponible en pantallas muy anchas. */

.section-gallery-teaser {
  container-type: inline-size;
}

.section-gallery-teaser h2 {
  font-size: clamp(2.5rem, calc((100cqw - 56px) / 8.4), 120px);
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .section-gallery-teaser h2 {
    white-space: normal;
  }
}

.section-teaser > p:not(.kicker) {
  color: var(--color-text-muted);
}

.section-teaser .btn-link {
  margin-top: var(--space-3);
}

/* Boton "pastilla" solida, mismo aspecto que los CTA de cabecera
   (.site-header__cta / .nav-toggle), reutilizado para CTAs de contenido
   que deben destacar mas que un .btn-link de subrayado */

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  min-height: 45px;
  background: var(--color-surface);
  padding: 10px 32px;
  border: none;
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  color: var(--color-text);
}

.section-teaser .btn-pill {
  margin-top: var(--space-3);
}

.section-teaser .representantes-list {
  margin-top: var(--space-3);
}

.section-gallery-teaser__grid-wrap {
  --gutter: 0px;
  position: relative;
  box-sizing: border-box;
  width: calc(100vw - (2 * var(--gutter)));
  max-width: 1728px;
  margin-left: max(calc(50% - 50vw + var(--gutter)), calc(50% - 864px));
  margin-right: max(calc(50% - 50vw + var(--gutter)), calc(50% - 864px));
  margin-top: 220px;
  margin-bottom: var(--space-3);
}

@media screen and (min-width: 930px) {
  .section-gallery-teaser__grid-wrap {
    --gutter: 30px;
  }
}

.home-gallery-teaser {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: clamp(14px, 6.65509vw, 115px) clamp(16px, 10.4167vw, 180px);
}

/* CTA "explorar GALERIA", insertado por render-data.js como hermano del
   grid (no como celda dentro de el, para no dejar huecos ni romper filas
   de fotos): el envoltorio cubre absolute todo el alto del grid, y el
   boton en si es sticky dentro de ese envoltorio, quedandose centrado en
   pantalla - y por tanto realmente encima de las fotos - mientras se hace
   scroll por todo el grid. pointer-events:none en el envoltorio para no
   bloquear el hover a color de las fotos que queden debajo. */

.home-gallery-teaser__cta-wrap {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.home-gallery-teaser__cta {
  position: sticky;
  top: 50%;
  transform: translateY(-400%);
  height: 45px;
  pointer-events: auto;
}

/* Grid de fotos (compartido por la home y album-historico.html):
   overflow:hidden en la figura recorta al marco de cada foto el
   parallax que aplica .album-item img (ver mas abajo) segun el --y
   que le active assets/js/gallery-parallax.js. El --multiplier por
   columna (mas bajo en el centro, mas alto en los extremos) hace que
   las columnas se desplacen a velocidades distintas y formen una V. */

.album-item {
  padding: 0px;
  margin: 0px;
}

.album-item:nth-child(5n+1) img,
.album-item:nth-child(5n) img {
  --multiplier: 2.4;
}

.album-item:nth-child(5n+2) img,
.album-item:nth-child(5n+4) img {
  --multiplier: 1.2;
}

.album-item:nth-child(5n+3) img {
  --multiplier: 0;
}

/* En responsive el efecto de scroll no hace falta (assets/js/gallery-parallax.js
   ya deja de correr por debajo de este mismo corte). Misma especificidad
   que las reglas :nth-child de arriba (0,2,1) para poder ganarlas -
   .album-item img a secas (0,1,1) perdería el empate igualmente. */

@media (max-width: 640px) {
  .album-item:nth-child(5n+1) img,
  .album-item:nth-child(5n) img,
  .album-item:nth-child(5n+2) img,
  .album-item:nth-child(5n+4) img,
  .album-item:nth-child(5n+3) img {
    --multiplier: 0;
  }
}

/* Escaparate de representantes con revelado por scroll
   (patron FullSizeScrollerStepper de verostudio.com, analizado en su CSS/DOM
   real). Ver assets/js/full-scroller.js */

main .section-representantes {
  border-top: none;
  padding-top: 0;
  position: relative;
  container-type: inline-size;
}

.section-representantes__header {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  text-align: center;
  margin-bottom: 64px;
}

.section-representantes .section-representantes__header {
  position: absolute;
  padding-top: 220px;
  /* Al pasar a position:absolute, el truco de ancho completo por vw +
     margenes negativos (pensado para flujo normal) desborda
     horizontalmente la pagina en vez de encajar en el contenedor
     posicionado (.section-representantes). Aqui se sustituye por
     width:100% del contenedor, sin margenes. El header del monumento
     (misma clase, pero en flujo normal dentro de .section-teaser) no
     tiene este problema y conserva el truco de vw. */
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.section-representantes__header h2 {
  /* La formula (no solo font-size) mantiene la linea mas larga de este
     patron de titulo (reutilizado por representantes y monumento, es/val)
     siempre dentro del ancho del viewport sin desbordar, con nowrap
     forzando el salto de linea manual; ver medida real con
     canvas.measureText en Playfair Display 120px - "que ES CONVERTEIX EN
     ART" (val monumento) es la mas ancha, ~13.05px de texto por px de
     font-size. */
  font-size: clamp(2.5rem, calc((100vw - 56px) / 13.3), 120px);
  margin: 0;
  white-space: nowrap;
}

.section-representantes .section-representantes__header h2 {
  /* Ahora que este header es position:absolute con width:100% de
     .section-representantes (ver arriba), la formula debe medirse
     contra el ancho real de ese contenedor (100cqw, via container-type
     en .section-representantes) y no contra el viewport completo
     (100vw) - si no, el texto puede seguir desbordando su propia caja
     aunque el header ya no desborde la pagina.
     Divisor propio (no el 13.3 compartido con el monumento, calibrado
     para "que ES CONVERTEIX EN ART"): "cuando TRADICIÓN"/"conoce
     VALEDORES" es mucho mas corto, medido en el navegador a
     ~8.11px de texto por px de font-size, con el mismo margen de
     seguridad relativo (~2%) que el divisor original. Esto deja que
     este titulo alcance el maximo real de 120px en la mayoria de
     anchos de escritorio, en vez de quedarse limitado por el texto
     (mas largo) del monumento. */
  font-size: clamp(2.5rem, calc((100cqw - 56px) / 8.3), 120px);
}

@media (max-width: 640px) {
  .section-representantes__header h2 {
    white-space: normal;
  }
}

/* Cabecera centrada de las paginas internas (sobre la falla, ejercicio
   actual, album historico, contacto): mismo patron visual que
   .section-representantes__header, pero sobre el h1 real de cada pagina
   en vez de un h2 nuevo, para no duplicar el titulo de cara a SEO/a11y. */

.page-header {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  text-align: center;
  margin-bottom: 64px;
}

.page-header h1 {
  font-size: clamp(2.5rem, calc((100vw - 56px) / 8.3), 120px);
  margin: 0;
  white-space: nowrap;
}

.page-header__intro {
  max-width: 34rem;
  margin: var(--space-2) auto 0;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .page-header h1 {
    white-space: normal;
  }
}

.full-scroller {
  --scroller-steps: 1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Recorrido total: 100lvh para la 1a foto + 200lvh por cada foto
     siguiente (100lvh para que se fije a pantalla completa en silencio +
     100lvh para su barrido lateral) + 100lvh extra al final para que
     .full-scroller__masks (sticky) no empiece a desengancharse justo
     cuando la ultima foto termina de revelarse - si no, se corta antes
     de poder verla completa. Ver full-scroller.js. */
  height: calc((2 * var(--scroller-steps) + 1) * 100lvh);
}

.full-scroller__masks {
  width: 100%;
  height: 100lvh;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.full-scroller__item {
  --viewport-ratio: calc(100vw / 100lvh);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(calc((1 - var(--mask-progress, 1)) * 100%) 0, 100% 0, 100% 100%, calc((1 - var(--mask-progress, 1)) * 100%) 100%);
  will-change: clip-path;
  overflow: hidden;
}

.full-scroller__frame {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.full-scroller__media {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 640px) {
  .full-scroller__media {
    object-fit: cover;
  }
}

/* Solo la primera foto nace como tarjeta pequenya centrada y crece hacia
   pantalla completa (patron real de verostudio.com, aplicado solo a
   :nth-child(2) de .masks en el sitio original); el resto entran ya a
   pantalla completa, con el barrido lateral de .full-scroller__item como
   unico efecto. La 1a foto desactiva ese barrido exterior (si no, el
   recorte lateral se suma al recorte centrado y el cuadrado sale
   desplazado hacia la derecha en vez de centrado). */

.full-scroller__item--first {
  clip-path: none;
}

.full-scroller__item--first .full-scroller__frame {
  --offset: 25%;
  --scale: 0.5;
  clip-path: polygon(
    calc(30% * (1 - var(--mask-progress, 1))) calc((30% + var(--offset)) * (1 - var(--mask-progress, 1))),
    calc(70% + 30% * var(--mask-progress, 1)) calc((30% + var(--offset)) * (1 - var(--mask-progress, 1))),
    calc(70% + 30% * var(--mask-progress, 1)) calc(70% + var(--offset) + (100% - (70% + var(--offset))) * var(--mask-progress, 1)),
    calc(30% * (1 - var(--mask-progress, 1))) calc(70% + var(--offset) + (100% - (70% + var(--offset))) * var(--mask-progress, 1))
  );
}

.full-scroller__item--first .full-scroller__media {
  transform: scale(max(var(--scale), min(var(--scale) + (1 - var(--scale)) * var(--mask-progress, 1), 1)));
  transform-origin: 50% 100%;
}

.full-scroller__points {
  position: sticky;
  top: 50vh;
  left: var(--space-3);
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: fit-content;
  pointer-events: none;
}

.full-scroller__points span {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.full-scroller__points span.is-active {
  background: #ffffff;
  border-color: #ffffff;
}

.full-scroller__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-3);
  margin: 0;
  text-align: center;
  color: #ffffff;
  text-shadow: 0px 0px 4px #333333;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 3vw, 1.6rem);
}

.full-scroller__caption span {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ffffff;
  margin-top: 0.35em;
}

@media (prefers-reduced-motion: reduce) {
  .full-scroller {
    height: auto;
  }

  .full-scroller__masks {
    height: auto;
    position: static;
  }

  .full-scroller__item,
  .full-scroller__frame,
  .full-scroller__media,
  .full-scroller__item--first .full-scroller__frame,
  .full-scroller__item--first .full-scroller__media {
    clip-path: none;
    transform: none;
  }

  .full-scroller__item {
    position: relative;
    height: 100lvh;
  }

  .full-scroller__points {
    display: none;
  }
}

/* Fotos del monumento en la home: ambas visibles juntas en la misma fila */

.monumento-teaser-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.monumento-teaser-grid__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.monumento-teaser-grid__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%);
  transition: clip-path 1.6s var(--ease-out-quint);
}

.reveal--visible .monumento-teaser-grid__frame img {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.monumento-teaser-grid h3 {
  margin: var(--space-2) 0 0;
}

.monumento-teaser-grid__seccion,
.monumento-teaser-grid__autor {
  margin: 0.2em 0 0;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .monumento-teaser-grid__frame img {
    clip-path: none;
    transition: none;
  }
}

/* Ancla real para "volver arriba" (footer): .site-header es position:fixed,
   y un fragmento (#top) cuyo destino es un elemento fixed no hace scroll de
   verdad en la mayoria de navegadores (su posicion "en flujo" no varia, el
   navegador no tiene donde desplazarse) - por eso el boton no funcionaba.
   Este elemento vive fuera del flujo fijo, justo antes de <header>, y es el
   destino real de #top; visualmente invisible pero focuseable/alcanzable. */

.visually-hidden-anchor {
  position: absolute;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Volver arriba (footer) */

.back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  min-height: 45px;
  padding: 10px 0;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  font-size: 1rem;
}

.back-to-top:hover {
  border-color: var(--color-text);
}

/* Representantes */

.representantes-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4) var(--space-3);
}

.representante-card {
  background: transparent;
  border-radius: 0;
  overflow: hidden;
  border: none;
  text-align: left;
}

.representante-card img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  filter: grayscale(1);
  transition: filter 0.4s ease;
}

.representante-card:hover img {
  filter: grayscale(0);
}

.representante-card h3 {
  margin: var(--space-2) 0 var(--space-1);
  font-size: 1.15rem;
}

.representante-card p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* Valores: 3 columnas centradas (numeral + titulo + descripcion) */

.valores-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  text-align: center;
  margin-top: var(--space-3);
}

.valor-card__media {
  margin-bottom: var(--space-2);
}

.valor-card__media.monumento-teaser-grid__frame {
  aspect-ratio: 549 / 637;
}

.valor-card__media img {
  filter: grayscale(1);
}

.valor-card__numeral {
  margin: 0 0 var(--space-1);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.valor-card h3 {
  margin: 0 0 var(--space-2);
}

.valor-card p {
  max-width: 22rem;
  margin: 0 auto;
  color: var(--color-text-muted);
}

@media (min-width: 48rem) {
  .valores-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Seccion "media + texto" (foto a un lado, texto+CTA al otro) reutilizada
   por la nueva narrativa de historia en la-falla.html */

.section-media-text {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: center;
}

.section-media-text__media {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.section-media-text__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-media-text__content h3 {
  font-family: var(--font-sans);
}

@media (min-width: 48rem) {
  .section-media-text {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
}

/* Vision: el h2 es la frase completa (no un titulo corto), asi que no
   reutiliza la escala/nowrap de 120px del resto de h2 de la pagina - eso
   desbordaria con un parrafo largo. Tamano propio, mas moderado, que
   permite salto de linea normal. */

#vision .section-representantes__header h2 {
  font-size: 64px;
  max-width: 80%;
  margin: 0 auto;
  line-height: 1.3;
  white-space: normal;
}

@media (max-width: 640px) {
  #vision .section-representantes__header h2 {
    font-size: 46px;
  }
}

/* Datos de contacto centrados */

.contacto-info {
  text-align: center;
}

/* Fotos intercaladas en el texto narrativo de "LA HISTORIA detrás de EN
   PLOM" (seccion #archivo-historia, panels historia-siglo-xx/xxi/
   galardones/hemeroteca): una imagen suelta entre parrafos cuando corresponde
   a un momento concreto del texto, o una tira de 2-6 cuando varias fotos
   comparten decada/tema sin un parrafo exacto al que asociarse. Fotos
   catalogadas en data/album-historico.json (categoria "historia"), aun
   pendientes de subir a Vercel Blob Storage - ver aidlc-docs/audit.md. */

.historia-foto {
  margin: var(--space-3) 0;
}

.historia-foto img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: var(--radius);
  cursor: pointer;
}

.historia-foto figcaption {
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.historia-foto-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.historia-foto-strip .historia-foto {
  margin: 0;
  flex: 1 1 160px;
  max-width: 220px;
}

/* Album historico */

.album-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.album-filter-pills {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

/* En album-historico.html (a diferencia de la-falla.html, que solo tiene
   un grupo de pildoras) el grupo de categorias es el que mas espacio ocupa
   por numero de pildoras: se deja crecer para llenar el ancho disponible
   del contenedor, en vez de quedar apretado a la izquierda con hueco vacio
   a la derecha. El boton de orden por año, ultimo elemento del marcado,
   queda asi pegado al borde derecho gracias al justify-content de arriba. */

[data-testid="album-filtro-categoria-pills"] {
  flex: 1 1 auto;
}

/* Filtros de la seccion de archivo/historia de la-falla.html: centrados
   (a diferencia de album-historico.html, que los deja alineados a la
   izquierda junto al selector de anyo) */

[data-testid="section-archivo-historia"] .album-controls,
[data-testid="section-archivo-historia"] .album-filter-pills {
  justify-content: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  min-height: 45px;
  padding: 10px var(--space-2);
  border: 1px solid var(--color-border);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pill:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}

.pill--active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

/* .pill:hover (arriba) tiene mas especificidad que .pill--active a secas
   (dos selectores de clase - .pill + :hover - contra uno), asi que sin esto
   ganaba su color oscuro sobre el fondo ya oscuro de la pildora activa,
   dejando el texto ilegible al pasar el raton por una chip ya seleccionada.
   Mismo nivel de especificidad que .pill:hover (dos selectores), gana por
   venir despues en el CSS. */

.pill--active:hover {
  color: var(--color-bg);
}

.album-controls select {
  display: block;
  margin-top: var(--space-1);
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  padding: var(--space-1) 0;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text);
}

.album-controls select:focus {
  outline: none;
  border-bottom-color: var(--color-text);
}

.album-historico-grid-wrap {
  --gutter: 0px;
  box-sizing: border-box;
  width: calc(100vw - (2 * var(--gutter)));
  max-width: 1728px;
  margin-left: max(calc(50% - 50vw + var(--gutter)), calc(50% - 864px));
  margin-right: max(calc(50% - 50vw + var(--gutter)), calc(50% - 864px));
}

@media screen and (min-width: 930px) {
  .album-historico-grid-wrap {
    --gutter: 30px;
  }
}

.album-historico-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: clamp(14px, 6.65509vw, 115px) clamp(16px, 10.4167vw, 180px);
}

.album-item img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: 0;
  filter: grayscale(1);
  transition: filter 0.4s ease, transform 0.6s ease-out;
  transform: translate3d(0, calc(var(--y, 0px) * var(--multiplier, 1)), 0);
}

.album-item img:hover {
  filter: grayscale(0);
}

/* En movil, la galeria de la home se muestra siempre a color (sin el
   filtro grayscale-al-hover que si mantiene el resto de casos) */

@media (max-width: 640px) {
  .home-gallery-teaser .album-item img,
  .home-gallery-teaser .album-item img:hover {
    filter: none;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.album-item {
  animation: fade-in-up 0.5s ease backwards;
}

.album-item:nth-child(5n+1) { animation-delay: 0s; }
.album-item:nth-child(5n+2) { animation-delay: 0.05s; }
.album-item:nth-child(5n+3) { animation-delay: 0.1s; }
.album-item:nth-child(5n+4) { animation-delay: 0.15s; }

/* Lightbox — visor a pantalla completa fondo crema (ref. GalleryMediaGridPreview de verostudio.com) */

.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-bg-alt);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}

.lightbox-overlay--open {
  display: flex;
}

.lightbox-overlay img {
  max-height: 80vh;
  max-width: 85vw;
  border-radius: 0;
}

.lightbox-caption {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  margin: 0;
  font-size: 0.8rem;
  text-align: center;
  color: var(--color-text-muted);
}

.lightbox-close {
  position: absolute;
  top: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  min-height: 45px;
  padding: 10px 0;
  letter-spacing: 0.02em;
  background: transparent;
  border: 1px solid var(--color-text);
  color: var(--color-text);
  font-size: 1.25rem;
  cursor: pointer;
}

.lightbox-close:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  min-height: 45px;
  padding: 10px 0;
  letter-spacing: 0.02em;
  background: transparent;
  border: 1px solid var(--color-border);
  font-size: 1.1rem;
  color: var(--color-text);
  cursor: pointer;
}

.lightbox-nav:hover {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.lightbox-prev {
  left: var(--space-3);
}

.lightbox-next {
  right: var(--space-3);
}

/* Footer */

.site-footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-2);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.site-footer a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.site-footer a[hidden] {
  display: none;
}

/* Skeleton de carga de imagenes (todo el sitio): fondo con shimmer mientras
   una <img> no ha terminado de cargar. assets/js/img-skeleton.js marca cada
   <img> con data-skel-loaded (al disparar "load"/"error", o de inmediato si
   ya estaba en cache) y ese atributo retira el shimmer. Aplica globalmente
   a toda <img> del sitio - no requiere marcado extra por pagina/componente. */

img:not([data-skel-loaded]) {
  background-color: var(--color-border);
  background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: img-skeleton-shimmer 1.4s ease-in-out infinite;
}

img[data-skel-loaded] {
  animation: none;
}

@keyframes img-skeleton-shimmer {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -50% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  img:not([data-skel-loaded]) {
    animation: none;
    background-image: none;
  }
}

/* Responsive: escritorio */

@media (min-width: 48rem) {
  .representantes-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .album-historico-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .home-gallery-teaser {
    grid-template-columns: repeat(5, 1fr);
  }

  .nav-menu {
    padding-left: max(var(--space-5), 8vw);
  }

  .nav-menu > a::before {
    width: 3rem;
  }
}

/* Nota: el menu hamburguesa se mantiene incluso en escritorio (decision Q6 de Functional Design) */