/*
 * Abby Murgio — hoja de estilos del tema
 * Traducción a CSS plano del diseño original (Tailwind v4 + tokens oklch).
 * Sin build step: editar este archivo y recargar.
 *
 * Índice
 *  1. Tokens
 *  2. Reset y base
 *  3. Utilidades y layout
 *  4. Botones
 *  5. Cabecera
 *  6. Pie
 *  7. Tarjeta de obra
 *  8. Portada
 *  9. Portfolio y filtros
 * 10. Ficha de obra (single)
 * 11. Noticias (listado y ficha)
 * 12. Acerca de
 * 13. Contacto
 * 14. Formularios
 * 15. Contenido del editor (prose)
 * 16. Varios
 * 17. Cookies y pie legal
 * 18. Apariciones al hacer scroll
 */

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
  color-scheme: dark;

  /* Base medianoche-índigo con acentos dorados cálidos */
  --background: oklch(0.19 0.045 274);
  --foreground: oklch(0.95 0.015 90);

  --card: oklch(0.24 0.05 274);
  --card-foreground: oklch(0.95 0.015 90);

  --primary: oklch(0.8 0.13 84);
  --primary-foreground: oklch(0.18 0.04 274);

  --secondary: oklch(0.29 0.055 274);
  --muted: oklch(0.29 0.05 274);
  --muted-foreground: oklch(0.72 0.03 88);

  --destructive: oklch(0.62 0.22 25);
  --success: oklch(0.75 0.14 155);

  --border: oklch(0.8 0.13 84 / 18%);
  --input: oklch(0.8 0.13 84 / 22%);
  --ring: oklch(0.8 0.13 84 / 55%);

  --gold: oklch(0.82 0.13 84);
  --gold-soft: oklch(0.88 0.09 88);
  --ember: oklch(0.66 0.2 33);

  /* Variantes con alfa (equivalen a los modificadores /xx del diseño) */
  --bg-80: oklch(0.19 0.045 274 / 80%);
  --bg-95: oklch(0.19 0.045 274 / 95%);
  --card-40: oklch(0.24 0.05 274 / 40%);
  --card-50: oklch(0.24 0.05 274 / 50%);
  --card-95: oklch(0.24 0.05 274 / 95%);
  --fg-90: oklch(0.95 0.015 90 / 90%);
  --border-60: oklch(0.8 0.13 84 / 11%);
  --border-70: oklch(0.8 0.13 84 / 13%);
  --gold-10: oklch(0.82 0.13 84 / 10%);
  --gold-15: oklch(0.82 0.13 84 / 15%);
  --gold-20: oklch(0.82 0.13 84 / 20%);
  --gold-30: oklch(0.82 0.13 84 / 30%);
  --gold-40: oklch(0.82 0.13 84 / 40%);
  --gold-50: oklch(0.82 0.13 84 / 50%);
  --ember-10: oklch(0.66 0.2 33 / 10%);

  /* Tipografía */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-script: 'Great Vibes', 'Brush Script MT', cursive;

  /* Radios (escala del diseño, --radius 0.5rem) */
  --radius: 0.5rem;
  --radius-sm: 0.3rem;
  --radius-md: 0.4rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.7rem;
  --radius-2xl: 0.9rem;

  /* Layout */
  --container: 72rem;
  --container-narrow: 48rem;
  --gutter: 1.5rem;
  --header-height: 5rem;

  --shadow-card: 0 20px 60px -25px rgb(0 0 0 / 0.8);
  --shadow-art: 0 40px 120px -40px rgb(0 0 0 / 0.9);
}

/* ============================================================
   2. Reset y base
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/*
 * El atributo [hidden] del navegador se declara con `display: none` en la hoja
 * del agente de usuario, así que cualquier `display` que pongamos nosotros lo
 * pisa. Lo reforzamos aquí para poder ocultar con `el.hidden = true` cualquier
 * elemento, tenga el display que tenga.
 */
[hidden] {
  display: none !important;
}

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

img { height: auto; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  line-height: 1.15;
}

p { margin: 0; }

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

form { margin: 0; }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--gold-30);
  color: var(--foreground);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   3. Utilidades y layout
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: 4rem; }
.section--tight { padding-block: 3rem; }

/* Separaciones verticales puntuales */
.mt-3 { margin-top: 0.75rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }

.font-serif { font-family: var(--font-serif); }
.font-script { font-family: var(--font-script); }
.text-gold { color: var(--gold); }
.text-muted { color: var(--muted-foreground); }
.text-balance { text-wrap: balance; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--primary-foreground);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-md) 0;
  font-size: 0.875rem;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Antetítulo con filete: "— EL ARTISTA" */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.eyebrow::before {
  content: '';
  display: block;
  height: 1px;
  width: 2.5rem;
  flex: none;
  background: var(--gold);
}
.eyebrow__text {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--muted-foreground);
}

/* Antetítulo simple, dorado */
.kicker {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--gold);
}

/* Cabecera de página interior */
.page-header { max-width: 42rem; }
.page-header__title {
  margin-top: 1.5rem;
  font-family: var(--font-serif);
  font-size: 2.25rem;
  color: var(--foreground);
}
.page-header__lead {
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--muted-foreground);
}
@media (min-width: 640px) {
  .page-header__title { font-size: 3rem; }
}

/* Rejilla de obras */
.grid-obras {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid-obras { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-obras { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   4. Botones
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  padding: 0.875rem 1.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    filter 0.2s ease;
}
.btn svg { flex: none; }

.btn--gold {
  background: var(--gold);
  color: var(--primary-foreground);
}
.btn--gold:hover { filter: brightness(1.05); }

.btn--outline {
  border-color: var(--gold-50);
  color: var(--gold);
  background: transparent;
}
.btn--outline:hover {
  background: var(--gold);
  color: var(--primary-foreground);
}

.btn[disabled],
.btn[aria-busy='true'] {
  opacity: 0.6;
  cursor: progress;
}

.link-quiet {
  font-size: 0.875rem;
  color: var(--fg-90);
  text-underline-offset: 4px;
}
.link-quiet:hover {
  color: var(--gold);
  text-decoration: underline;
}

.link-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.link-gold:hover { color: var(--gold); }

/* Píldora de estado */
.pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--gold-40);
  border-radius: 9999px;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gold);
}
.pill--sold {
  border-color: var(--border);
  color: var(--muted-foreground);
}

/* ============================================================
   5. Cabecera
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border-60);
  background: var(--bg-80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header__inner {
  display: flex;
  height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-right: 0.25rem;
}
.brand__name {
  font-family: var(--font-script);
  font-size: 1.875rem;
  line-height: 1;
  color: var(--foreground);
  white-space: nowrap;
}
@media (min-width: 640px) {
  .brand__name { font-size: 2.25rem; }
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: 2rem;
}
@media (min-width: 768px) {
  .nav-desktop { display: flex; }
}

.nav-desktop .nav-list {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-desktop a {
  font-size: 0.875rem;
  letter-spacing: 0.025em;
  color: var(--muted-foreground);
}
.nav-desktop a:hover { color: var(--gold); }
.nav-desktop .current-menu-item > a,
.nav-desktop .current-menu-parent > a,
.nav-desktop .current-menu-ancestor > a,
.nav-desktop .current_page_item > a,
.nav-desktop .current_page_parent > a,
.nav-desktop .is-current > a { color: var(--gold); }

.nav-cta {
  border: 1px solid var(--gold-40);
  border-radius: 9999px;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gold) !important;
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--gold);
  color: var(--primary-foreground) !important;
}

.nav-toggle {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
}
@media (min-width: 768px) {
  .nav-toggle { display: none; }
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded='true'] .icon-open { display: none; }
.nav-toggle[aria-expanded='true'] .icon-close { display: block; }

.nav-mobile {
  display: none;
  border-top: 1px solid var(--border-60);
  background: var(--bg-95);
  padding: 1rem var(--gutter);
}
.nav-mobile.is-open { display: block; }
@media (min-width: 768px) {
  .nav-mobile.is-open { display: none; }
}
.nav-mobile .nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.nav-mobile a {
  display: block;
  border-radius: var(--radius-md);
  padding: 0.75rem;
  font-size: 1rem;
  color: var(--muted-foreground);
}
.nav-mobile a:hover { background: var(--card-50); }
.nav-mobile .current-menu-item > a,
.nav-mobile .current_page_item > a,
.nav-mobile .current_page_parent > a,
.nav-mobile .is-current > a {
  background: var(--secondary);
  color: var(--gold);
}

/* ============================================================
   6. Pie
   ============================================================ */
.site-footer {
  margin-top: 6rem;
  border-top: 1px solid var(--border-60);
  background: var(--card-40);
}

.site-footer__grid {
  display: grid;
  gap: 2.5rem;
  padding-block: 3.5rem;
}
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
}

.site-footer__brand {
  font-family: var(--font-script);
  font-size: 1.875rem;
  color: var(--foreground);
}
.site-footer__role {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--gold);
}
.site-footer__about {
  margin-top: 1rem;
  max-width: 20rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

/* Redes sociales: círculos dorados, como los botones del tema */
.site-footer__social {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.site-footer__social a {
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold-40);
  border-radius: 9999px;
  color: var(--gold);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--primary-foreground);
}

.site-footer__heading {
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--muted-foreground);
}

.site-footer__links {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
}
/*
 * El gap del contenedor no separaba nada: wp_nav_menu mete un solo <ul>, y
 * los <li> quedaban pegados. A 14 px cada enlace medía unos 22 px de alto,
 * por debajo del mínimo tocable de 24×24 que pide la WCAG 2.2.
 */
.site-footer__links ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.site-footer__links a {
  display: inline-block;
  padding-block: 0.25rem;
  color: var(--fg-90);
}
.site-footer__links a:hover { color: var(--gold); }

.site-footer__contact {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.875rem;
}
.site-footer__contact a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--fg-90);
}
.site-footer__contact a:hover { color: var(--gold); }
.site-footer__contact svg {
  color: var(--gold);
  flex: none;
}

/*
 * El pie inferior va en dos filas: los enlaces legales arriba y, debajo,
 * copyright, lema y autoría. En una sola fila los cuatro bloques quedaban
 * apelotonados y el lema perdía todo el aire.
 */
.site-footer__bottom { border-top: 1px solid var(--border-60); }

.site-footer__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 1.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  text-align: center;
}
@media (min-width: 768px) {
  .site-footer__meta {
    flex-direction: row;
    gap: 1.5rem;
    text-align: left;
  }
}

/* La autoría, discreta: se lee si se busca, no compite con la marca. */
.site-footer__credit a {
  color: var(--muted-foreground);
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
  color: var(--gold);
  text-decoration: underline;
}
.site-footer__tagline { font-style: italic; }

/* ============================================================
   7. Tarjeta de obra
   ============================================================ */
.card-obra {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-60);
  border-radius: var(--radius-xl);
  background: var(--card);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.card-obra:hover,
.card-obra:focus-within {
  transform: translateY(-4px);
  border-color: var(--gold-50);
  box-shadow: var(--shadow-card);
}

.card-obra__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--secondary);
}
.card-obra__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.card-obra:hover .card-obra__media img { transform: scale(1.05); }

.card-obra__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg-80), transparent 50%);
  pointer-events: none;
}

.card-obra__badge {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 1;
  border-radius: 9999px;
  background: var(--bg-80);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
  backdrop-filter: blur(4px);
}

.card-obra__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.25rem;
}
.card-obra__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--foreground);
  transition: color 0.2s ease;
}
.card-obra:hover .card-obra__title { color: var(--gold-soft); }
.card-obra__meta {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* El enlace del título cubre toda la tarjeta */
.card-obra__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ============================================================
   8. Portada
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
}
.hero__glow {
  pointer-events: none;
  position: absolute;
  height: 24rem;
  width: 24rem;
  border-radius: 9999px;
  filter: blur(64px);
}
.hero__glow--ember {
  left: -10rem;
  top: 0;
  background: var(--ember-10);
}
.hero__glow--gold {
  right: -8rem;
  bottom: 0;
  background: var(--gold-10);
}

.hero__inner {
  position: relative;
  display: grid;
  align-items: center;
  gap: 3rem;
  padding-block: 4rem;
}
@media (min-width: 768px) {
  .hero__inner { padding-block: 6rem; }
}
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: repeat(2, 1fr); }
}

.hero__title {
  margin-top: 1.5rem;
  font-family: var(--font-serif);
  font-size: 3rem;
  line-height: 1.05;
  color: var(--foreground);
}
.hero__title em {
  font-style: italic;
  color: var(--ember);
}
@media (min-width: 640px) {
  .hero__title { font-size: 3.75rem; }
}
@media (min-width: 1024px) {
  .hero__title { font-size: 4.5rem; }
}

.hero__lead {
  margin-top: 1.5rem;
  max-width: 28rem;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--muted-foreground);
}

.hero__actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.hero__figure {
  position: relative;
  margin: 0;
}
/* Envoltorio de la obra del hero. El alto lo marca .canvas-mount. */
.hero__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--gold-20);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-art);
  background: var(--card);
  transition: border-color 0.3s ease;
}
.hero__frame:hover { border-color: var(--gold-50); }
.hero__frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------------
   Lienzo montado en bastidor

   Reproduce con CSS el montaje que antes venía «pintado» en la imagen:
   obra en perspectiva, canto del lienzo visible a la izquierda y sombra
   proyectada, sobre el propio fondo oscuro del tema. Así vale cualquier
   foto plana de una obra, sin preparar un montaje por cada una.

   Tres cosas que hay que respetar al tocar esto:
   - `--mount-ratio` lo escribe PHP con las medidas reales de la imagen.
     Sin él, una obra vertical se saldría del marco: un max-height en
     porcentaje no resuelve contra una altura automática.
   - Las pistas del grid van explícitas (ver más abajo). Con `auto` la
     obra tampoco tiene contra qué resolver su alto y se desborda.
   - Nada de `filter` sobre __inner: aplana el 3D y el canto desaparece.
     Por eso la sombra va en box-shadow sobre la propia obra.
   ------------------------------------------------------------------ */
.canvas-mount {
  --mount-tilt: 14deg;
  --mount-depth: 2.6%;
  --mount-ratio: 1;

  position: relative;
  display: grid;
  /*
   * Fila y columna explícitas: con `auto` el grid se dimensiona por su
   * contenido y el `max-height: 100%` de la obra no tiene contra qué
   * resolver, así que se desbordaba por abajo.
   */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  margin: 0;
  aspect-ratio: 4 / 3;
  padding: 6% 8%;
  overflow: hidden;
  background: transparent;
}

.canvas-mount__inner {
  position: relative;
  aspect-ratio: var(--mount-ratio);
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  transform-style: preserve-3d;
  transform: perspective(1700px) rotateY(calc(-1 * var(--mount-tilt)));
}

.canvas-mount__face {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow:
    22px 26px 34px -12px rgb(20 18 30 / 0.38),
    6px 8px 12px -6px rgb(20 18 30 / 0.28);
}

/* El canto: la columna izquierda de la obra, estirada y oscurecida. */
.canvas-mount__edge {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--mount-depth);
  transform-origin: left center;
  transform: rotateY(-90deg);
  background-image: var(--mount-art);
  background-size: cover;
  background-position: left center;
  filter: brightness(0.58) saturate(0.85);
}

@media (max-width: 640px) {
  .canvas-mount {
    --mount-tilt: 9deg;
    padding: 8% 8%;
  }
}

/*
 * Sin montar: la imagen se presenta plana, de frente.
 *
 * Es lo que se usa con la imagen suelta del hero. Una foto elegida a mano
 * puede traer ya su propio montaje —un lienzo fotografiado con su canto, una
 * obra enmarcada, un cartel—, y volver a montarla daría un lienzo dentro de
 * otro. Aquí se quita el giro, el canto y la perspectiva.
 *
 * La sombra pasa a ser vertical: la de la versión montada va desplazada a la
 * derecha para acompañar la inclinación, y sin giro queda descolgada.
 */
.canvas-mount--plana {
  padding: 2% 3%;
}
.canvas-mount--plana .canvas-mount__inner {
  transform: none;
  transform-style: flat;
}
.canvas-mount--plana .canvas-mount__edge {
  display: none;
}
.canvas-mount--plana .canvas-mount__face {
  box-shadow: 0 28px 56px -20px rgb(20 18 30 / 0.55);
}

/* Con movimiento reducido, la obra se presenta de frente. */
@media (prefers-reduced-motion: reduce) {
  .canvas-mount { --mount-tilt: 0deg; }
  .canvas-mount__edge { display: none; }
}
.hero__caption {
  position: absolute;
  bottom: -1.5rem;
  left: 1.5rem;
  border: 1px solid var(--border-60);
  border-radius: var(--radius-xl);
  background: var(--card-95);
  padding: 1rem 1.25rem;
  backdrop-filter: blur(6px);
}
.hero__caption-title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: var(--foreground);
}
.hero__caption-meta {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* Cabecera de sección con enlace "Ver todo" */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.section-head__title {
  margin-top: 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.875rem;
  color: var(--foreground);
}
@media (min-width: 640px) {
  .section-head__title { font-size: 2.25rem; }
}
.section-head__link { display: none; }
@media (min-width: 640px) {
  .section-head__link {
    display: inline-flex;
    flex: none;
  }
}
.section-foot-link { margin-top: 2rem; }
@media (min-width: 640px) {
  .section-foot-link { display: none; }
}

/* Manifiesto */
.manifesto {
  border-block: 1px solid var(--border-60);
  background: var(--card-40);
}
.manifesto__inner {
  padding-block: 5rem;
  text-align: center;
}
.manifesto__quote {
  margin: 1.5rem 0 0;
  font-family: var(--font-serif);
  font-size: 1.875rem;
  line-height: 1.35;
  color: var(--foreground);
  text-wrap: balance;
}
@media (min-width: 640px) {
  .manifesto__quote { font-size: 2.25rem; }
}
.manifesto__author {
  margin-top: 2rem;
  font-family: var(--font-script);
  font-size: 1.875rem;
  color: var(--gold-soft);
}
.manifesto .kicker { letter-spacing: 0.4em; }

/* CTA final */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border: 1px solid var(--gold-20);
  border-radius: var(--radius-2xl);
  background: linear-gradient(to bottom right, var(--card), var(--background));
  padding: 2.5rem;
  text-align: center;
}
@media (min-width: 640px) {
  .cta {
    flex-direction: row;
    text-align: left;
  }
}
.cta__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--foreground);
}
@media (min-width: 640px) {
  .cta__title { font-size: 1.875rem; }
}
.cta__text {
  margin-top: 0.5rem;
  max-width: 28rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.cta .btn { flex: none; }

/* ============================================================
   9. Portfolio y filtros
   ============================================================ */
.filters {
  border: 1px solid var(--border-60);
  border-radius: var(--radius-2xl);
  background: var(--card-50);
  padding: 1.25rem;
}
@media (min-width: 640px) {
  .filters { padding: 1.5rem; }
}

.filters__legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--muted-foreground);
}
.filters__legend svg { color: var(--gold); }

.filters__grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) {
  .filters__grid { grid-template-columns: repeat(3, 1fr); }
}

.filters__search { position: relative; }
.filters__search svg {
  pointer-events: none;
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground);
}
.filters__search .input { padding-left: 2.5rem; }

.filters__foot {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.filters__count {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.filters__reset {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 0.875rem;
  color: var(--gold);
  cursor: pointer;
}
.filters__reset:hover { color: var(--gold-soft); }
.filters__reset[hidden] { display: none; }

/* Botón «Buscar» de reserva: solo visible si no hay JavaScript. */
.js .no-js-only { display: none; }

.filters__submit {
  margin-top: 1rem;
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
}

.portfolio-results { margin-top: 2.5rem; }

/* Mientras llega la respuesta del filtro, atenuamos los resultados. */
.portfolio-body {
  transition: opacity 0.2s ease;
}
.portfolio.is-loading .portfolio-body {
  opacity: 0.45;
  pointer-events: none;
}

/* ---- Paginación ---- */
.pagination {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.pagination__link,
.pagination__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--border-60);
  border-radius: var(--radius-md);
  background: var(--card-50);
  font-size: 0.875rem;
  color: var(--muted-foreground);
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.pagination__link:hover {
  border-color: var(--gold-50);
  color: var(--gold);
}

.pagination__link.is-current {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--primary-foreground);
  font-weight: 600;
}

.pagination__dots {
  border-color: transparent;
  background: transparent;
}

.pagination__link--nav svg { flex: none; }

/* Enlaces de una entrada partida con <!--nextpage--> */
.page-links {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.page-links a { color: var(--gold); }
.page-links a:hover { color: var(--gold-soft); }

.empty-state {
  margin-top: 4rem;
  border: 1px dashed var(--border-70);
  border-radius: var(--radius-xl);
  padding-block: 5rem;
  text-align: center;
}
.empty-state__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--foreground);
}
.empty-state__text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* ============================================================
   10. Ficha de obra (single)
   ============================================================ */
.obra-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.obra-back:hover { color: var(--gold); }

.obra-layout {
  margin-top: 2rem;
  display: grid;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .obra-layout { grid-template-columns: 1.1fr 1fr; }
}

.obra-figure { margin: 0; }
@media (min-width: 1024px) {
  .obra-figure {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
    align-self: start;
  }
}
.obra-figure__frame {
  overflow: hidden;
  border: 1px solid var(--gold-20);
  border-radius: var(--radius-2xl);
  background: var(--card);
  box-shadow: var(--shadow-art);
}
.obra-figure__frame img {
  width: 100%;
  height: auto;
}

.obra-title {
  margin-top: 0.75rem;
  font-family: var(--font-serif);
  font-size: 2.25rem;
  color: var(--foreground);
}
@media (min-width: 640px) {
  .obra-title { font-size: 3rem; }
}

.obra-description {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--muted-foreground);
}
.obra-description p + p { margin-top: 1rem; }

.obra-status { margin-top: 2rem; }

.obra-specs {
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border-60);
  border-radius: var(--radius-xl);
  background: var(--border-60);
}
.obra-specs__item {
  background: var(--card);
  padding: 1.25rem;
}
.obra-specs__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted-foreground);
}
.obra-specs__label svg {
  color: var(--gold);
  flex: none;
}
.obra-specs__value {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  color: var(--foreground);
}

.obra-inquiry { margin-top: 3rem; }
.obra-inquiry__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--foreground);
}
.obra-inquiry__text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* Sección «Otras obras» / «Otras noticias» al pie de una ficha */
.obra-related,
.related { margin-top: 6rem; }
.obra-related__title,
.related__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--foreground);
}
@media (min-width: 640px) {
  .obra-related__title,
  .related__title { font-size: 1.875rem; }
}
.obra-related .grid-obras,
.related .grid-noticias { margin-top: 2rem; }

/* ============================================================
   11. Noticias (listado y ficha)
   ============================================================ */

/* Rejilla de noticias: la misma cadencia que la de obras. */
.grid-noticias {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid-noticias { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-noticias { grid-template-columns: repeat(3, 1fr); }
}

/* Píldoras de categoría y etiqueta */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-60);
  border-radius: 9999px;
  background: var(--card-50);
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.chip:hover {
  border-color: var(--gold-50);
  color: var(--gold);
}
.chip.is-current {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--primary-foreground);
  font-weight: 600;
}

/* ---- Tarjeta de noticia ---- */
.card-noticia {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-60);
  border-radius: var(--radius-xl);
  background: var(--card);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.card-noticia:hover,
.card-noticia:focus-within {
  transform: translateY(-4px);
  border-color: var(--gold-50);
  box-shadow: var(--shadow-card);
}

.card-noticia__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--secondary);
}
.card-noticia__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.card-noticia:hover .card-noticia__media img { transform: scale(1.04); }

.card-noticia__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.25rem;
}

.card-noticia__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted-foreground);
}
.card-noticia__cat { color: var(--gold); }
.card-noticia__sep { color: var(--border); }

.card-noticia__title {
  margin-top: 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--foreground);
  transition: color 0.2s ease;
}
.card-noticia:hover .card-noticia__title { color: var(--gold-soft); }

.card-noticia__excerpt {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}

/* Empuja el reclamo al pie de la tarjeta, midan lo que midan los resúmenes. */
.card-noticia__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--gold);
}
.card-noticia__more svg {
  flex: none;
  transition: transform 0.2s ease;
}
.card-noticia:hover .card-noticia__more svg { transform: translateX(3px); }

/* El enlace del titular cubre toda la tarjeta */
.card-noticia__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Sin imagen la tarjeta respira un poco más */
.card-noticia--sin-imagen .card-noticia__body { padding-top: 1.75rem; }

/* ---- Noticia destacada, a lo ancho ---- */
.card-noticia--wide { margin-bottom: 1.5rem; }

@media (min-width: 768px) {
  .card-noticia--wide {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
  }
  /*
   * La proporción va explícita también aquí. Con `auto`, el alto de la
   * columna lo acabaría marcando la imagen original —una obra vertical
   * estira la tarjeta entera—, y con la rejilla en `stretch` la imagen
   * crece de todos modos si el texto es más alto.
   */
  .card-noticia--wide .card-noticia__media { aspect-ratio: 4 / 3; }
  .card-noticia--wide .card-noticia__body {
    justify-content: center;
    padding: 2.5rem;
  }
  .card-noticia--wide .card-noticia__title { font-size: 1.875rem; }
  .card-noticia--wide .card-noticia__excerpt { font-size: 1rem; }
  .card-noticia--wide .card-noticia__more { padding-top: 1.5rem; }
}
@media (min-width: 1024px) {
  .card-noticia--wide { margin-bottom: 2rem; }
  .card-noticia--wide .card-noticia__title { font-size: 2.25rem; }
}

/* ---- Ficha de la noticia ---- */
.noticia-header {
  max-width: var(--container-narrow);
  margin-top: 2rem;
}
.noticia-kicker {
  display: inline-block;
  transition: color 0.2s ease;
}
.noticia-kicker:hover { color: var(--gold-soft); }

.noticia-title {
  margin-top: 0.75rem;
  font-family: var(--font-serif);
  font-size: 2.25rem;
  color: var(--foreground);
  text-wrap: balance;
}
@media (min-width: 640px) {
  .noticia-title { font-size: 3rem; }
}

.noticia-meta {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.noticia-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.noticia-meta__item svg {
  flex: none;
  color: var(--gold);
}

.noticia-figure {
  margin: 2.5rem 0 0;
}
.noticia-figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--gold-20);
  border-radius: var(--radius-2xl);
  background: var(--card);
  box-shadow: var(--shadow-art);
}
.noticia-figure__caption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.noticia-content {
  max-width: var(--container-narrow);
  margin-top: 2.5rem;
}

.noticia-tags {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-60);
}
.noticia-tags__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted-foreground);
}
.noticia-tags__label svg { color: var(--gold); }

/* ---- Anterior / siguiente ---- */
.post-nav {
  margin-top: 4rem;
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) {
  .post-nav { grid-template-columns: repeat(2, 1fr); }
}

.post-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--border-60);
  border-radius: var(--radius-xl);
  background: var(--card-50);
  padding: 1.25rem 1.5rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.post-nav__link:hover {
  border-color: var(--gold-50);
  background: var(--card);
}

/*
 * Cuando solo hay «siguiente», la rejilla lo dejaría en la primera columna:
 * lo mandamos a la segunda para que quede alineado con su flecha.
 */
@media (min-width: 640px) {
  .post-nav__link--next:first-child { grid-column: 2; }
  .post-nav__link--next {
    text-align: right;
    align-items: flex-end;
  }
}

.post-nav__dir {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted-foreground);
}
.post-nav__dir svg {
  flex: none;
  color: var(--gold);
}
.post-nav__title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: var(--foreground);
  transition: color 0.2s ease;
}
.post-nav__link:hover .post-nav__title { color: var(--gold-soft); }

/* ============================================================
   12. Acerca de
   ============================================================ */
/* La hoja del dosier y, debajo, los botones */
.about-sheets .about-actions--center { margin-top: 3rem; }

/* Separador con etiqueta centrada: ——— ENGLISH ——— */
.rule-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block: 2.5rem;
}
.rule-label::before,
.rule-label::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--border);
}
.rule-label span {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--gold);
}

.about-actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.about-actions--center {
  margin-top: 0;
  justify-content: center;
}

/*
 * Declaración del artista, con la estética del dosier impreso
 * («My World in Color»): hoja de papel crema, tinta azul marino, filetes
 * y adornos dorados, títulos en versalitas y fotos con marco fino.
 * Es la única zona clara de la web: redefine los tokens en su interior,
 * así que .prose y compañía se adaptan solas.
 */
.sheet {
  --paper: #f7efe4;                   /* el papel del dosier, tal cual */
  --ink: oklch(0.27 0.085 266);
  --ink-soft: oklch(0.38 0.06 266);
  --gold-ink: oklch(0.52 0.105 68);   /* dorado para texto: AA sobre crema */
  --gold-line: oklch(0.7 0.12 78);    /* dorado para filetes e iconos */

  --foreground: var(--ink);
  --muted-foreground: var(--ink-soft);
  --gold: var(--gold-ink);
  --border: oklch(0.7 0.12 78 / 55%);

  color-scheme: light;
  overflow: hidden;
  border-top: 4px solid var(--gold-line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-art);
  padding: 3rem 1.25rem;
}
@media (min-width: 640px) {
  .sheet { padding: 3.5rem 2.5rem; }
}
@media (min-width: 1024px) {
  .sheet { padding: 4rem 5rem 3rem; }
}

/* Las dos partes de la hoja, una tras otra */
.sheet-part + .sheet-part { margin-top: 5rem; }

/* Texto del editor, cuando la hoja aún no tiene sus campos */
.sheet-fallback {
  max-width: 42rem;
  margin: 3rem auto 0;
}

/* Adorno: ——— ♡ ——— */
.sheet-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  color: var(--gold-line);
}
.sheet-ornament::before,
.sheet-ornament::after {
  content: '';
  width: 5.5rem;
  height: 1px;
  background: currentColor;
}
.sheet-ornament .icon { flex: none; stroke-width: 1.5; }
.sheet-ornament--small::before,
.sheet-ornament--small::after { width: 3.5rem; }
.sheet-ornament--small .icon { width: 18px; height: 18px; }
.sheet-ornament--bare::before,
.sheet-ornament--bare::after { display: none; }

/* Filete con punto central, bajo los títulos */
.sheet-rule {
  position: relative;
  display: block;
  width: min(18rem, 70%);
  height: 1px;
  margin: 1.25rem auto 0;
  background: var(--gold-line);
}
.sheet-rule::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-line);
  transform: translate(-50%, -50%);
}

.sheet-heading { text-align: center; }
.sheet-heading__title {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-wrap: balance;
}
.sheet-heading__subtitle {
  margin-top: 0.4rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-ink);
}
@media (min-width: 640px) {
  .sheet-heading__title { font-size: 2.75rem; }
  .sheet-heading__subtitle { font-size: 1.625rem; }
}

/* Citas de apertura */
.sheet-quotes {
  max-width: 36rem;
  margin: 2.5rem auto 0;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: balance;
}
.sheet-quotes p { margin: 0; }
.sheet-quotes p[lang='en'] { color: var(--gold-ink); }
.sheet-quotes .sheet-ornament { margin-block: 1rem; }
@media (min-width: 640px) {
  .sheet-quotes { font-size: 1.5rem; }
}

/*
 * Ilustración de la mano pintando el árbol, junto a las citas: como en el
 * dosier, sale por el borde derecho de la hoja y se funde con el papel por
 * los otros tres lados. El margen negativo es el relleno de .sheet.
 */
.sheet-statement-head.has-art { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) {
  .sheet-statement-head.has-art {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    align-items: center;
    gap: 1rem;
  }
}
.sheet-art {
  justify-self: end;
  width: min(100% + 1.25rem, 28rem);
  margin: 0 -1.25rem 0 0;
}
@media (min-width: 640px) {
  .sheet-art { width: min(100% + 2.5rem, 30rem); margin-right: -2.5rem; }
}
@media (min-width: 1024px) {
  .sheet-art { width: calc(100% + 5rem); margin-right: -5rem; }
}
.sheet-art img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 30%),
    linear-gradient(to bottom, transparent, #000 14%, #000 72%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 30%),
    linear-gradient(to bottom, transparent, #000 14%, #000 72%, transparent);
  mask-composite: intersect;
}

/* Texto a dos columnas, separadas por un filete dorado con punto */
.sheet-columns {
  margin-top: 3.5rem;
  display: grid;
  gap: 3rem;
}
@media (min-width: 900px) {
  .sheet-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }
  .sheet-columns--single {
    grid-template-columns: minmax(0, 40rem);
    justify-content: center;
  }
  .sheet-column { padding-inline: 2.5rem; }
  .sheet-column:first-child { padding-left: 0; }
  .sheet-column:last-child { padding-right: 0; }
  .sheet-column + .sheet-column {
    position: relative;
    border-left: 1px solid var(--border);
  }
  .sheet-column + .sheet-column::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -4px;
    width: 7px;
    height: 7px;
    border: 1px solid var(--gold-line);
    border-radius: 50%;
    background: var(--paper);
  }
}
.sheet-column__icon {
  display: block;
  color: var(--gold-line);
}
.sheet-column__icon .icon { stroke-width: 1.5; }
.sheet-column__title {
  margin-top: 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.sheet-column[lang='en'] .sheet-column__title { color: var(--gold-ink); }
.sheet-prose {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.75;
}
.sheet-prose > * + * { margin-top: 1rem; }
.sheet-column[lang='en'] .sheet-prose strong { color: var(--gold-ink); }
.sheet-column .sheet-ornament { margin-top: 2rem; }

/* Recuadro de valores */
.sheet-values {
  margin-top: 3.5rem;
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  border: 1px solid var(--gold-line);
  padding: 2rem 1.25rem;
  text-align: center;
}
@media (min-width: 768px) {
  .sheet-values {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    padding: 2rem 2.5rem;
  }
}
.sheet-values__icon { color: var(--gold-line); }
.sheet-values__icon .icon { stroke-width: 1.25; }
.sheet-values__groups {
  display: grid;
  gap: 2rem;
  width: 100%;
}
@media (min-width: 900px) {
  .sheet-values__groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }
  .sheet-values__group { padding-inline: 1.75rem; }
  .sheet-values__group + .sheet-values__group { border-left: 1px solid var(--border); }
}
.sheet-values__title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.sheet-values__group[lang='en'] .sheet-values__title { color: var(--gold-ink); }
.sheet-values__list {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--ink);
}
.sheet-values__list li + li::before {
  content: '•';
  margin-inline: 0.6rem;
  color: var(--gold-line);
}
.sheet-values__note {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: balance;
}

/* Marco fino dorado de las fotos */
.sheet-frame {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--gold-line);
  background: var(--paper);
  box-shadow: 0 10px 24px -14px rgb(40 30 10 / 0.45);
}
.sheet-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hoja 1: texto a un lado y la foto del estudio al otro */
.sheet-intro {
  margin-top: 3rem;
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .sheet-intro {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 3rem;
  }
  .sheet-intro--no-photo {
    grid-template-columns: minmax(0, 40rem);
    justify-content: center;
  }
}
.sheet-intro .sheet-prose { margin-top: 0; }
.sheet-intro .sheet-rule { margin-block: 2rem; }
.sheet-intro .sheet-prose[lang='en'] strong { color: var(--gold-ink); }
.sheet-intro__photo {
  width: 100%;
  max-width: 36rem;
  justify-self: center;
}
.sheet-callout {
  margin: 3rem 0 0;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border: 1px solid var(--gold-line);
  padding: 1.25rem 1.5rem;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
}
.sheet-callout p { margin: 0; }
.sheet-callout p + p {
  margin-top: 0.4rem;
  font-size: 1rem;
  color: var(--ink-soft);
}
.sheet-callout__icon {
  flex: none;
  color: var(--gold-line);
}
.sheet-callout__icon .icon { stroke-width: 1.25; }

/* Tira de detalles del estudio */
.sheet-thumbs {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 640px) {
  .sheet-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sheet-thumbs li { aspect-ratio: 1; }
.sheet-thumbs img {
  height: 100%;
  object-fit: cover;
}

/* Firma de cierre */
.sheet-signature {
  margin-top: 3.5rem;
  text-align: center;
}
.sheet-signature__name {
  font-family: var(--font-script);
  font-size: 2.75rem;
  line-height: 1.1;
  color: var(--ink);
}
.sheet-signature .sheet-ornament { margin-top: 0.25rem; }
.sheet-signature__motto {
  margin-top: 0.5rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--gold-ink);
}
.sheet-signature__roles {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
}
.sheet-signature__roles li + li::before {
  content: '•';
  margin-inline: 0.75rem;
  color: var(--gold-line);
}

/* ============================================================
   13. Contacto
   ============================================================ */
.contact-layout {
  margin-top: 3rem;
  display: grid;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .contact-layout { grid-template-columns: 0.8fr 1fr; }
}

.contact-channels {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-channel {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--border-60);
  border-radius: var(--radius-xl);
  background: var(--card-50);
  padding: 1.25rem;
  transition: border-color 0.2s ease;
}
.contact-channel:hover { border-color: var(--gold-50); }
.contact-channel__icon {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--gold-15);
  color: var(--gold);
}
.contact-channel__label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted-foreground);
}
.contact-channel__value {
  display: block;
  margin-top: 0.125rem;
  font-size: 1rem;
  color: var(--foreground);
}

.contact-note {
  margin-top: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border: 1px solid var(--gold-20);
  border-radius: var(--radius-xl);
  background: linear-gradient(to bottom right, var(--card), var(--background));
  padding: 1.5rem;
}
.contact-note svg {
  margin-top: 0.125rem;
  flex: none;
  color: var(--gold);
}
.contact-note__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--foreground);
}
.contact-note__text {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

/* Panel que envuelve el formulario */
.panel {
  border: 1px solid var(--border-60);
  border-radius: var(--radius-2xl);
  background: var(--card-50);
  padding: 1.5rem;
}
@media (min-width: 640px) {
  .panel { padding: 2rem; }
}
.panel__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--foreground);
}
.panel__text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.panel__body { margin-top: 1.5rem; }

/* ============================================================
   14. Formularios
   ============================================================ */
.form { display: block; }
.form > * + * { margin-top: 1.25rem; }

.field label,
.field .field__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted-foreground);
}

.input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: oklch(0.19 0.045 274 / 60%);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--foreground);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input::placeholder { color: oklch(0.72 0.03 88 / 70%); }
.input:focus {
  border-color: var(--gold-50);
  box-shadow: 0 0 0 2px var(--gold-20);
}
textarea.input {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.6;
}
select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%),
    linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.85rem) 50%;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
select.input option {
  background: var(--card);
  color: var(--foreground);
}
.input[readonly] {
  color: var(--muted-foreground);
  cursor: default;
}

.field-row {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .field-row { grid-template-columns: repeat(2, 1fr); }
}

.form__submit { width: 100%; }
@media (min-width: 640px) {
  .form__submit {
    width: auto;
    padding-inline: 2.5rem;
  }
}

.form__note {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/*
 * Aviso de reCAPTCHA. Sustituye al distintivo flotante de Google, que
 * ocultamos: sus condiciones lo permiten solo si esta atribución queda
 * visible, así que no se puede quitar mientras el captcha esté activo.
 */
.form__legal {
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.form__legal a {
  color: var(--muted-foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form__legal a:hover { color: var(--gold); }

/*
 * Casilla de consentimiento. La etiqueta no lleva el estilo en versalitas del
 * resto de campos: aquí es una frase que se lee, no el nombre de un campo.
 */
.field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.75rem;
}
.field--check input[type='checkbox'] {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.15rem 0 0;
  flex: none;
  accent-color: var(--gold);
  cursor: pointer;
}
.field--check label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: normal;
  color: var(--muted-foreground);
  cursor: pointer;
}
.field--check label a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.field--check label a:hover { color: var(--gold-soft); }
.field--check .field__error { grid-column: 2; }

/* Trampa antispam: invisible pero no display:none, para no alertar a los bots */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__error {
  border: 1px solid oklch(0.62 0.22 25 / 40%);
  border-radius: var(--radius-md);
  background: oklch(0.62 0.22 25 / 12%);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: oklch(0.8 0.12 25);
}
.field .field__error {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  letter-spacing: normal;
  text-transform: none;
  color: oklch(0.8 0.12 25);
}
.input[aria-invalid='true'] { border-color: oklch(0.62 0.22 25 / 60%); }

/* Pantalla de éxito */
.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--gold-30);
  border-radius: var(--radius-xl);
  background: var(--card);
  padding: 2.5rem;
  text-align: center;
}
.form-success__icon {
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--gold-15);
  color: var(--gold);
}
.form-success__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--foreground);
}
.form-success__text {
  max-width: 24rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}
.form-success__again {
  margin-top: 0.5rem;
  border: 0;
  background: transparent;
  font-size: 0.875rem;
  color: var(--gold);
  text-underline-offset: 4px;
  cursor: pointer;
}
.form-success__again:hover { text-decoration: underline; }

/* ============================================================
   15. Contenido del editor (prose)
   ============================================================ */
.prose {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--muted-foreground);
}
/*
 * El ritmo vertical lo marca `> * + *`. Ojo con reponer aquí un
 * `.prose p { margin: 0 }`: es más específico (0,1,1 frente a 0,1,0), así
 * que gana siempre y deja los párrafos pegados. El margen de agente de
 * usuario ya lo neutraliza el reset base (`p { margin: 0 }`).
 */
.prose > * + * { margin-top: 1.5rem; }
.prose > *:first-child { margin-top: 0; }
.prose a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.prose strong {
  color: var(--foreground);
  font-weight: 600;
}
.prose em { font-style: italic; }
.prose h2,
.prose h3 {
  font-family: var(--font-serif);
  color: var(--foreground);
  margin-top: 2.5rem;
}
.prose h2 { font-size: 1.875rem; }
.prose h3 { font-size: 1.5rem; }
.prose ul,
.prose ol {
  padding-left: 1.25rem;
  list-style: disc;
}
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.5rem; }
.prose blockquote {
  /* Margen de flujo propio: el lateral del agente de usuario sí sobra. */
  margin: 1.5rem 0 0;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--foreground);
}
.prose blockquote p { margin: 0; }
.prose img,
.prose figure {
  border-radius: var(--radius-xl);
  margin-inline: 0;
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin-block: 2.5rem;
}
/* Frase destacada dentro del texto */
.prose .lead-serif {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--foreground);
}

/* ============================================================
   16. Varios
   ============================================================ */
.error-404 {
  padding-block: 6rem;
  text-align: center;
}
.error-404__code {
  font-family: var(--font-serif);
  font-size: 5rem;
  color: var(--gold);
  line-height: 1;
}
.error-404__title {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--foreground);
}
.error-404__text {
  margin-top: 1rem;
  color: var(--muted-foreground);
}
.error-404__actions {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.is-hidden { display: none !important; }

/* ---- Página «en construcción» ----
   Documento aparte, sin cabecera ni pie: los enlaces del menú llevarían a
   páginas que esta misma pantalla está tapando. */
.construccion {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: 2rem var(--gutter);
  text-align: center;
}
.construccion .hero__glow--ember {
  top: -6rem;
  left: -8rem;
}
.construccion .hero__glow--gold {
  right: -8rem;
  bottom: -6rem;
}

.construccion__inner {
  position: relative;
  z-index: 1;
  max-width: 34rem;
}

.construccion__brand {
  font-family: var(--font-script);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--foreground);
}
@media (min-width: 640px) {
  .construccion__brand { font-size: 3.5rem; }
}

/* El antetítulo lleva un filete a cada lado para poder ir centrado. */
.construccion__eyebrow {
  justify-content: center;
  margin-top: 2rem;
}
.construccion__eyebrow::after {
  content: '';
  display: block;
  height: 1px;
  width: 2.5rem;
  flex: none;
  background: var(--gold);
}

.construccion__title {
  margin-top: 1.5rem;
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--foreground);
  text-wrap: balance;
}
@media (min-width: 640px) {
  .construccion__title { font-size: 2.75rem; }
}

.construccion__text {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

.construccion__contact {
  margin-top: 2rem;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}
.construccion__contact a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.construccion__contact a:hover { color: var(--gold-soft); }

.construccion__login { margin-top: 2.5rem; }

/* Barra de administración: que no tape la cabecera fija */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* ============================================================
   17. Cookies y pie legal
   ============================================================ */

/* Barra de enlaces legales, bajo el copyright */
/*
 * Fila propia y centrada, con un filete que la separa del copyright.
 * Los enlaces llevan padding para llegar al mínimo tocable de 24 px.
 */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.75rem;
  padding-top: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-60);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.site-footer__legal a,
.site-footer__legal button { padding-block: 0.25rem; }
.site-footer__legal a { color: var(--muted-foreground); }
.site-footer__legal a:hover { color: var(--gold); }
.site-footer__legal button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--muted-foreground);
  cursor: pointer;
}
.site-footer__legal button:hover { color: var(--gold); }
.site-footer__legal .sep {
  color: var(--border);
  user-select: none;
}

/* Botón sin marco, para la acción secundaria del aviso */
.btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--muted-foreground);
}
.btn--ghost:hover { color: var(--gold); }

/* ---- Aviso inferior ---- */
.cookies__bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  border-top: 1px solid var(--border-60);
  background: var(--bg-95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cookies__bar.is-in { transform: none; }

.cookies__bar-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-block: 1.5rem;
}
@media (min-width: 900px) {
  .cookies__bar-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
  }
}

.cookies__title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: var(--foreground);
}
.cookies__text {
  margin-top: 0.5rem;
  max-width: 46rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}
.cookies__text a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookies__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.cookies__actions .btn {
  flex: 1;
  padding-block: 0.75rem;
}
@media (min-width: 900px) {
  .cookies__actions { flex: none; }
  .cookies__actions .btn { flex: none; }
}

/* ---- Panel de preferencias ---- */
.cookies__modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.cookies__overlay {
  position: absolute;
  inset: 0;
  background: oklch(0.12 0.03 274 / 82%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.cookies__panel {
  position: relative;
  width: 100%;
  max-width: 34rem;
  max-height: 85vh;
  overflow-y: auto;
  border: 1px solid var(--gold-20);
  border-radius: var(--radius-2xl);
  background: var(--card);
  padding: 2rem;
  box-shadow: var(--shadow-art);
}
.cookies__panel-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--foreground);
}

.cookies__group {
  margin-top: 1.5rem;
  border: 1px solid var(--border-60);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
}
.cookies__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.cookies__group-title {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--foreground);
}
.cookies__group-text {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.cookies__always {
  flex: none;
  font-size: 0.75rem;
  color: var(--gold);
}

/* Interruptor: la casilla real queda oculta pero sigue siendo la que
   recibe el foco y el clic, así el teclado funciona sin nada extra. */
.cookies__switch {
  position: relative;
  flex: none;
  display: inline-flex;
  cursor: pointer;
}
.cookies__switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cookies__switch-track {
  display: block;
  width: 2.75rem;
  height: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--secondary);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.cookies__switch-track::after {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 0.185rem;
  border-radius: 9999px;
  background: var(--muted-foreground);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.cookies__switch input:checked + .cookies__switch-track {
  border-color: var(--gold);
  background: var(--gold-30);
}
.cookies__switch input:checked + .cookies__switch-track::after {
  transform: translateX(1.25rem);
  background: var(--gold);
}
.cookies__switch input:focus-visible + .cookies__switch-track {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.cookies__panel-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.cookies__panel-actions .btn { flex: 1; }

.cookies__more {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  text-align: center;
}
.cookies__more a {
  color: var(--muted-foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookies__more a:hover { color: var(--gold); }

/* ============================================================
   18. Apariciones al hacer scroll
   ============================================================ */

/*
 * Las secciones entran subiendo un poco al asomar por la ventana. Tres
 * decisiones que conviene no deshacer:
 *
 * 1. Quien esconde el contenido es la clase `reveal` del <html>, que pone el
 *    script en línea de la cabecera —nunca esta hoja por su cuenta—. Si el
 *    JavaScript no llegara a ejecutarse, no se oculta nada; y si theme.js
 *    tarda o falla, el propio script destapa todo a los 2,5 s.
 *
 * 2. Va con `animation`, no con `transition`. Una transición dejaría fijado
 *    un `transform` de más peso que el `translateY(-4px)` del hover de las
 *    tarjetas, y se quedarían sin elevarse al pasar por encima. Con
 *    `backwards` el estado de llegada no se conserva: acabada la animación,
 *    el elemento vuelve a estar a merced de sus propias reglas.
 *
 * 3. Nada de mover lo que ya se mueve: el hero monta el lienzo en 3D y la
 *    figura de la ficha es `sticky`. Un `transform` en un antepasado aplana
 *    el 3D y rompe el `sticky`, así que esos dos llevan `fade`, que solo
 *    toca la opacidad.
 */
@keyframes abby-rise {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes abby-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.reveal [data-reveal],
.reveal [data-reveal-group] > * {
  opacity: 0;
}

.reveal [data-reveal].is-in,
.reveal [data-reveal-group].is-in > * {
  opacity: 1;
  animation: abby-rise 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

/* Solo opacidad, para lo que no admite que le toquen el transform. */
.reveal [data-reveal='fade'].is-in {
  animation-name: abby-fade;
}

/*
 * Entra sin esperar al JavaScript.
 *
 * Lo que está sobre la línea de flotación no puede quedarse en opacity 0
 * hasta que theme.js —que va en el pie— añada la clase: eso retrasaba el LCP
 * de la portada casi dos segundos, medido con Lighthouse. Aquí la animación
 * arranca con la hoja de estilos, así que se pinta enseguida y el efecto se
 * conserva igual.
 *
 * Por el mismo motivo la obra del hero no lleva ninguna marca: es el elemento
 * más grande de la portada, el que define el LCP, y tiene que pintarse cuanto
 * antes.
 */
.reveal [data-reveal-now] {
  animation: abby-rise 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

/* En grupo, cada hijo entra un pelín después que el anterior. */
.reveal [data-reveal-group].is-in > *:nth-child(2) { animation-delay: 0.09s; }
.reveal [data-reveal-group].is-in > *:nth-child(3) { animation-delay: 0.18s; }
.reveal [data-reveal-group].is-in > *:nth-child(4) { animation-delay: 0.27s; }
.reveal [data-reveal-group].is-in > *:nth-child(5) { animation-delay: 0.36s; }
.reveal [data-reveal-group].is-in > *:nth-child(6) { animation-delay: 0.45s; }

/*
 * A partir de la sexta no se escalona más. La colección puede mostrar hasta
 * 48 obras por página: seguir sumando dejaría a la última esperando cuatro
 * segundos para aparecer.
 */
.reveal [data-reveal-group].is-in > *:nth-child(n + 7) { animation-delay: 0.45s; }

/*
 * Con movimiento reducido el script ni siquiera pone la clase `reveal`. Lo
 * dejamos escrito de todos modos por si la preferencia cambia a media
 * sesión: nada oculto y nada en movimiento.
 */
@media (prefers-reduced-motion: reduce) {
  .reveal [data-reveal],
  .reveal [data-reveal-now],
  .reveal [data-reveal-group] > * {
    opacity: 1;
    animation: none;
  }
}