/* ═══════════════════════════════════════════════════════════════════
   ATTESO — Hoja de estilos única
   ───────────────────────────────────────────────────────────────────
   El bloque "Portada" se conserva LITERALMENTE como estaba en el
   index.html original: recoge los ajustes de móvil de varias
   iteraciones y no debe tocarse sin volver a comprobarlo en el móvil.

   Los bloques siguientes (catálogo, ficha, selección, raíl, pie) son
   nuevos y sí usan los tokens de :root.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Marca */
  --fondo:        #f5f0eb;
  --tinta:        #8a7060;  /* títulos */
  --tinta-suave:  #9a8270;  /* texto corrido */
  --tinta-tenue:  #a08870;  /* epígrafes y pies */
  --linea:        #b9a090;
  --superficie:   rgba(255, 255, 255, 0.88);
  --superficie-2: rgba(255, 255, 255, 0.96);
  --borde:        rgba(158, 133, 110, 0.35);
  --borde-fuerte: rgba(158, 133, 110, 0.55);

  /* El dorado de marca tiene un único significado en todo el sitio:
     señala lo que la novia ha elegido. No se usa para nada más. */
  --oro:          #ddca7c;
  --oro-sombra:   rgba(201, 174, 85, 0.35);

  /* Medidas */
  --ancho:        1180px;
  --margen:       3rem;
  --radio:        999px;
}

/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: #f5f0eb;
  color: #927a65;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;

  /* El pie, siempre abajo del todo.
     Sin esto, una página corta —"Sobre Atteso", un 404, una selección
     vacía— deja el pie a media pantalla y por debajo asoma el fondo, que
     en las páginas con vídeo se nota mucho. Con la columna flexible, el
     contenido central se estira hasta empujarlo al borde inferior; en las
     páginas largas no cambia nada. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Es quien crece. El pie y la barra conservan su tamaño. */
body > main {
  flex: 1 0 auto;
}

/* Accesibilidad: nadie debería quedar atrapado navegando con teclado */
.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--superficie-2);
  color: var(--tinta);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.9rem 1.4rem;
  border-radius: 0 0 6px 0;
  text-decoration: none;
}
.salto-contenido:focus { left: 0; }

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

/* ═══════════════════════════════════════════════════════════════════
   PORTADA — no modificar sin volver a probar en móvil
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Video Background (Fixed) ─────────────────────────────── */
/*
 * TÉCNICA DE VÍDEO FIJO:
 * El wrapper se posiciona fixed en el viewport (z-index: 0).
 * La sección hero tiene position: relative y z-index: 10,
 * lo que permite que el texto se desplace con el scroll mientras
 * el vídeo permanece inmóvil detrás. Más robusto que
 * background-attachment: fixed (no funciona en iOS para vídeos).
 *
 * Para añadir secciones después del hero, dales background sólido
 * y position: relative con z-index mayor que 0.
 */
.hero-video-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
}

.hero-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Overlay muy sutil — solo para garantizar legibilidad, sin oscurecer el vídeo */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(245, 240, 235, 0.18);
  pointer-events: none;
}

/* ─── Hero Section ─────────────────────────────────────────── */
.hero-section {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}

/* ─── Hero Content Block ───────────────────────────────────── */
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;

  /* Entrada suave: fade + upward motion */
  animation: heroFadeUp 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s both;
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── ATTESO (logo principal) ──────────────────────────────── */
.hero-logo {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(3.8rem, 10vw, 7.5rem);
  letter-spacing: 0.03em;
  color: #8a7060;
  text-transform: uppercase;
  line-height: 1;
  /* Compensar tracking en el último carácter */
  padding-right: 0.03em;
  margin-bottom: 0.6rem;
}

/* ─── ATELIER (subtítulo bajo el logo) ─────────────────────── */
.hero-atelier {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.52em;
  color: #a08870;
  text-transform: uppercase;
  margin-bottom: 2.4rem;
  /* Compensar el tracking en el último carácter */
  padding-right: 0.52em;
}

/* ─── Divisor decorativo sutil ─────────────────────────────── */
.hero-divider {
  width: 36px;
  height: 1px;
  background-color: #b9a090;
  margin: 0 auto 2.6rem;
  opacity: 0.6;
}

/* ─── Claim ────────────────────────────────────────────────── */
.hero-claim {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(0.8rem, 1.5vw, 0.92rem);
  line-height: 1.85;
  letter-spacing: 0.06em;
  color: #9a8270;
  margin-bottom: 3rem;
  max-width: 440px;
}

/* ─── CTA Button ───────────────────────────────────────────── */
.hero-cta {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #8a7060;
  background-color: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(158, 133, 110, 0.35);
  border-radius: 999px;
  padding: 0.95rem 2.8rem;
  min-width: 270px;
  cursor: pointer;
  /* Compensar tracking en el último carácter */
  padding-right: calc(2.8rem + 0.26em);

  /* Transición muy suave */
  transition:
    background-color 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;

  /* Accesibilidad: outline solo en keyboard focus */
  outline: none;

  /* Es un enlace con aspecto de botón */
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

.hero-cta:hover {
  background-color: rgba(255, 255, 255, 0.96);
  border-color: rgba(158, 133, 110, 0.55);
  box-shadow: 0 3px 18px rgba(138, 112, 96, 0.1);
}

.hero-cta:focus-visible {
  outline: 2px solid #927a65;
  outline-offset: 4px;
}

.hero-cta:active {
  background-color: rgba(245, 240, 235, 0.95);
}

/* ─── Scroll Reveal ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.95s ease, transform 0.95s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Preview Section ──────────────────────────────────────── */
/* El aire de abajo es mayor que el de arriba a propósito: es lo único que
   separa la galería del pie, y con la misma medida arriba y abajo el pie
   parecía pegado al botón del catálogo. El degradado de detrás se apaga en
   ese tramo, así que el vídeo vuelve a verse antes de cerrar la página. */
.preview-section {
  position: relative;
  z-index: 10;
  background-color: transparent;
  padding: 5rem 3rem 9rem;
}

.preview-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(245, 240, 235, 0)    0%,
    rgba(245, 240, 235, 0.55) 18%,
    rgba(245, 240, 235, 0.55) 82%,
    rgba(245, 240, 235, 0)   100%
  );
  pointer-events: none;
  z-index: 1;
}

.preview-header {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto 3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.preview-eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: #a08870;
  padding-right: 0.5em;
  margin-bottom: 0.9rem;
}

.preview-title {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  letter-spacing: 0.02em;
  color: #8a7060;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.preview-rule {
  width: 36px;
  height: 1px;
  background-color: #b9a090;
  opacity: 0.6;
  margin-bottom: 1.2rem;
}

.preview-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(0.8rem, 1.4vw, 0.9rem);
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: #9a8270;
}

.preview-gallery {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.preview-item {
  overflow: hidden;
}

.preview-img {
  width: 100%;
  height: auto;   /* ver la nota en .pieza-img */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.preview-item:hover .preview-img {
  transform: scale(1.025);
}

.preview-caption {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: #a08870;
  padding-right: 0.45em;
  margin-top: 0.8rem;
}

.preview-footer {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 3rem;
}

.preview-cta {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #8a7060;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(158, 133, 110, 0.35);
  border-radius: 999px;
  padding: 0.95rem 2.8rem;
  padding-right: calc(2.8rem + 0.26em);
  min-width: 270px;
  text-align: center;
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.preview-cta:hover {
  background-color: rgba(255, 255, 255, 0.96);
  border-color: rgba(158, 133, 110, 0.55);
  box-shadow: 0 3px 18px rgba(138, 112, 96, 0.1);
}

.preview-cta:active {
  background-color: rgba(245, 240, 235, 0.95);
}

.preview-cta:focus-visible {
  outline: 2px solid #927a65;
  outline-offset: 4px;
}

.preview-item:nth-child(1) { transition-delay: 0s; }
.preview-item:nth-child(2) { transition-delay: 0.08s; }
.preview-item:nth-child(3) { transition-delay: 0.14s; }
.preview-item:nth-child(4) { transition-delay: 0.2s; }

/* ─── Responsive ───────────────────────────────────────────── */

/* Preview — Tablet */
@media (max-width: 900px) {
  .preview-section { padding: 4rem 2rem 4rem; }
  .preview-gallery { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}

/* Preview — Mobile */
@media (max-width: 600px) {
  .preview-section { padding: 3.5rem 0 6rem; }
  .preview-header { padding: 0 1.5rem; margin-bottom: 3.5rem; }
  .preview-footer { padding: 0 1.5rem; }

  .preview-title { font-size: clamp(1.8rem, 5.5vw, 2.1rem); }

  .preview-gallery {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1.5rem;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(158, 133, 110, 0.25) transparent;
  }

  .preview-item {
    flex: 0 0 72vw;
    scroll-snap-align: start;
  }
}

/* Hero — Tablet */
@media (max-width: 768px) {
  .hero-logo {
    margin-bottom: 0.5rem;
  }

  .hero-atelier {
    font-size: 0.68rem;
    letter-spacing: 0.45em;
    margin-bottom: 2rem;
  }

  .hero-divider {
    margin-bottom: 2rem;
  }

  .hero-claim {
    max-width: 360px;
  }

  .hero-cta {
    min-width: 240px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .hero-section {
    padding: 2rem 1.25rem;
  }

  .hero-logo {
    font-size: clamp(3.8rem, 16vw, 5rem);
    letter-spacing: 0.02em;
    padding-right: 0.02em;
    margin-bottom: 0.4rem;
  }

  .hero-atelier {
    font-size: 0.64rem;
    letter-spacing: 0.38em;
    margin-bottom: 1.6rem;
  }

  .hero-divider {
    width: 28px;
    margin-bottom: 1.8rem;
  }

  .hero-claim {
    font-size: 1rem;
    line-height: 1.65;
    max-width: 300px;
    margin-bottom: 2.5rem;
  }

  .hero-cta {
    min-width: 0;
    width: 82%;
    max-width: 320px;
    padding: 1rem 1.5rem;
    font-size: 0.66rem;
  }
}

/* ─── Sobre Atteso ───────────────────────────────────────────────
   La sección no tapa el vídeo fijo: se ve pasar por detrás y por los
   lados del panel. Quien cierra la portada es el pie, que sí lleva
   fondo sólido. Misma columna estrecha que el resto del texto. */
.sobre {
  position: relative;
  z-index: 10;
  padding: 6rem 3rem 6.5rem;
}

/* Dos columnas: el texto se recuesta a la izquierda y el carrusel ocupa la
   derecha. El conjunto sigue centrado en la página, así que el panel queda
   desplazado a la izquierda sin dejar la composición coja. */
.sobre-columnas {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}

/* El panel que sostiene el texto sobre el vídeo.
   Aquí se negocian dos cosas que tiran en direcciones opuestas: que el
   vídeo se siga viendo y que el texto se lea. La opacidad sola no lo
   resuelve —bajarla deja el texto sobre imágenes en movimiento—, así que
   el trabajo lo hace el desenfoque: borra el detalle fino del fondo y
   conserva su color y su movimiento. Eso permite quedarse en 0,62 en vez
   de la opacidad casi ciega que haría falta sin él.
   Es el mismo recurso de la barra superior, con bastante menos cuerpo.
   Esquinas rectas y filete de un píxel, como las fichas del catálogo. */
.sobre-interior {
  max-width: 680px;
  margin: 0 auto;
  padding: 3.2rem 3rem 3.4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;

  background-color: rgba(245, 240, 235, 0.62);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border: 1px solid rgba(185, 160, 144, 0.28);
}

/* Sin desenfoque no hay red: el texto solo se sostiene subiendo la
   opacidad. Le pasa a quien tenga la aceleración por hardware desactivada. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sobre-interior { background-color: rgba(245, 240, 235, 0.9); }
}

/* Quien ha pedido menos transparencia en su sistema no quiere leer encima
   de un vídeo en marcha. */
@media (prefers-reduced-transparency: reduce) {
  .sobre-interior {
    background-color: var(--fondo);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ─── La cabecera sobre el vídeo ─────────────────────────────────
   En las páginas con vídeo de fondo la barra flota encima en vez de
   empujar el contenido hacia abajo. Si ocupara sitio en el flujo, el hero
   dejaría de medir la pantalla exacta y la portada arrancaría con un
   trocito de scroll — justo lo que costó varios intentos arreglar.
   Va más translúcida que en las páginas interiores porque aquí tiene el
   vídeo detrás y conviene que se le vea. */
.pagina-video .barra {
  position: fixed;
  left: 0;
  right: 0;
  background-color: rgba(245, 240, 235, 0.55);
}

/* ─── Carrusel de "Sobre Atteso" ─────────────────────────────────
   Las fotos van apiladas una encima de otra en la misma caja 3:4, la
   misma proporción de las fichas del catálogo. El mismo filete que el
   panel, para que se lean como dos piezas del mismo juego. */
.sobre-carrusel {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(185, 160, 144, 0.28);
}

.sobre-carrusel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Lento a propósito: el cambio tiene que pasar casi desapercibido, no
     reclamar la atención que le toca al texto de al lado. */
  transition: opacity 1.6s ease;
}

.sobre-carrusel-img.es-visible { opacity: 1; }

/* Sin animación, el carrusel se queda en una sola foto y deja de cambiar
   (el guion no arranca el temporizador). */
@media (prefers-reduced-motion: reduce) {
  .sobre-carrusel-img { transition: none; }
}

.sobre-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  padding-right: 0.5em;
  margin-bottom: 1rem;
}

.sobre-titulo {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--tinta);
  margin-bottom: 1.2rem;
}

.sobre-rule {
  width: 36px;
  height: 1px;
  background-color: var(--linea);
  opacity: 0.6;
  margin-bottom: 2rem;
}

.sobre-texto p {
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--tinta-suave);
  margin-bottom: 1.4rem;
}
.sobre-texto p:last-child { margin-bottom: 0; }

.sobre-cta {
  margin-top: 2.6rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
  padding: 0 0 0.5rem;
  padding-right: 0.26em;
  border-bottom: 1px solid var(--linea);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.sobre-cta:hover { color: #755c4d; border-bottom-color: var(--tinta); }
.sobre-cta:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; }

/* Por debajo de esto las dos columnas dejan de caber: el carrusel pasa a
   cerrar la sección por abajo, contenido para que no se coma la pantalla. */
@media (max-width: 900px) {
  .sobre-columnas {
    grid-template-columns: 1fr;
    gap: 2.75rem;
    justify-items: center;
  }
  .sobre-carrusel { width: min(300px, 78%); }
}

@media (max-width: 600px) {
  .sobre { padding: 4rem 1.5rem 4.5rem; }
  /* El panel se estrecha en vez de comerse el ancho de lectura. */
  .sobre-interior { padding: 2.4rem 1.5rem 2.6rem; }
  .sobre-titulo { font-size: 1.6rem; }
  .sobre-texto p { font-size: 0.88rem; line-height: 1.9; }
  .sobre-carrusel { width: min(260px, 82%); }
}

/* ─── Los pasos de la página de Citas ────────────────────────────
   Numerados porque es un recorrido de verdad: cada paso depende del
   anterior, y el orden es información, no decoración. */
.pasos {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--margen);
  list-style: none;
}

.paso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.6rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(185, 160, 144, 0.25);
}
.paso:first-child { border-top: none; padding-top: 0; }

/* El número en la misma familia que los titulares y en tono tenue: marca
   el sitio sin competir con lo que dice el paso. */
.paso-numero {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--linea);
  padding-top: 0.1em;
}

.paso-titulo {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--tinta);
  margin-bottom: 0.5rem;
}

.paso-texto {
  font-size: 0.9rem;
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--tinta-suave);
}

.citas-cierre {
  max-width: 680px;
  margin: 0 auto;
  padding: 3rem var(--margen) 6rem;
  text-align: center;
}

.citas-acciones {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}

@media (max-width: 600px) {
  .paso { gap: 1.1rem; padding: 1.6rem 0; }
  .paso-numero { font-size: 1.25rem; }
  /* En vertical los botones se apilan en vez de partirse por la mitad. */
  .citas-acciones { flex-direction: column; align-items: stretch; }
}

/* ═══════════════════════════════════════════════════════════════════
   PÁGINAS INTERIORES
   ═══════════════════════════════════════════════════════════════════ */

.pagina-interior {
  background-color: var(--fondo);
}

/* ─── Barra superior ────────────────────────────────────────── */
.barra {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.4rem var(--margen);
  background-color: rgba(245, 240, 235, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(185, 160, 144, 0.22);
}

.barra-marca {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
  padding-right: 0.22em;
}

.barra-nav {
  display: flex;
  gap: 1.8rem;
}

.barra-nav a {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  text-decoration: none;
  padding-right: 0.3em;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.barra-nav a:hover,
.barra-nav a[aria-current="page"] {
  color: var(--tinta);
  border-bottom-color: var(--linea);
}

/* ─── Encabezado de sección ─────────────────────────────────── */
.cabecera-seccion {
  max-width: 680px;
  margin: 0 auto;
  padding: 3.5rem var(--margen) 2.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  padding-right: 0.5em;
  margin-bottom: 1rem;
}

.titulo-seccion {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--tinta);
  margin-bottom: 1.2rem;
}

.regla {
  width: 36px;
  height: 1px;
  background-color: var(--linea);
  opacity: 0.6;
  margin-bottom: 1.4rem;
}

.texto-seccion {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--tinta-suave);
  max-width: 46ch;
}

/* Hasta la página de Citas nunca hubo dos párrafos seguidos aquí, y se
   pegaban el uno al otro. Solo actúa entre hermanos, así que no toca el
   espaciado de ninguna de las páginas que ya existían. */
.texto-seccion + .texto-seccion { margin-top: 1.1rem; }

/* ─── Rejilla del catálogo ──────────────────────────────────── */
.rejilla {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--margen) 6rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 1.6rem;
  list-style: none;
}

.pieza {
  position: relative;
  display: flex;
  flex-direction: column;
}

.pieza-marco {
  position: relative;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.4);
}

.pieza-enlace {
  display: block;
  text-decoration: none;
}

/* 3:4, la misma proporción con la que ingest.mjs recorta las fotos. Si se
   cambia aquí hay que cambiarla allí (y en media.php) y regenerar, o las
   imágenes se deformarán al no coincidir el marco con el recorte. */
.pieza-img {
  width: 100%;
  /* height:auto es imprescindible. Los atributos width/height del <img> —que
     están ahí para reservar el hueco y evitar el salto de layout— actúan como
     altura fija, y con la altura ya definida el navegador ignora aspect-ratio:
     el marco se estiraba a 1067px de alto y object-fit recortaba la foto para
     rellenarlo. Con height:auto manda la proporción. */
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pieza:hover .pieza-img { transform: scale(1.03); }

/* Nombre del vestido. Estos nombres son pueblos italianos y merecen
   presencia tipográfica: son lo único que acompaña a la foto. */
.pieza-nombre {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta);
  padding-right: 0.14em;
  margin-top: 1rem;
  text-decoration: none;
  display: block;
}

.pieza-enlace:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

/* ─── Botón de guardar ──────────────────────────────────────────
   Dos formas para el mismo gesto:
     .guardar-marca — círculo sobre la foto, en la rejilla
     .guardar-ficha — botón con texto, en la ficha del vestido
   Lo común (estado, dorado al elegir, pulso) vive en .guardar, que además
   es el enganche que busca el JavaScript. */
.guardar {
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease,
    transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.guardar:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

.guardar.pulso { transform: scale(1.12); }

/* Estado elegido: el dorado de marca, y solo aquí en todo el sitio */
.guardar[aria-pressed="true"] {
  background-color: var(--oro);
  border-color: var(--oro);
  color: #6d5a3c;
  box-shadow: 0 3px 14px var(--oro-sombra);
}

/* ── Variante rejilla: círculo sobre la foto ──
   Siempre visible: en móvil no hay hover y la novia tiene que ver desde el
   primer vistazo que un vestido se puede guardar. */
.guardar-marca {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background-color: var(--superficie);
  color: var(--tinta);
}

.guardar-marca svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guardar-marca:hover {
  background-color: var(--superficie-2);
  border-color: var(--borde-fuerte);
}

.guardar-marca .icono-quitar { display: none; }
.guardar-marca[aria-pressed="true"] .icono-guardar { display: none; }
.guardar-marca[aria-pressed="true"] .icono-quitar  { display: block; }

/* ── Variante ficha: botón con texto ── */
.guardar-ficha { min-width: 260px; }

/* ─── Ficha de vestido ──────────────────────────────────────── */
.ficha {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 3rem var(--margen) 5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 3.5rem;
  align-items: start;
}

.ficha-galeria {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.ficha-img {
  width: 100%;
  height: auto;
  display: block;
  background-color: rgba(255, 255, 255, 0.4);
}

.ficha-info { position: sticky; top: 6rem; }

.ficha-volver {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  text-decoration: none;
  padding-right: 0.28em;
  margin-bottom: 1.6rem;
  transition: color 0.3s ease;
}
.ficha-volver:hover { color: var(--tinta); }

.ficha-nombre {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--tinta);
  padding-right: 0.06em;
  margin-bottom: 1.4rem;
}

.ficha-texto {
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0.02em;
  color: var(--tinta-suave);
  margin-bottom: 2.2rem;
  max-width: 42ch;
}

/* ─── Botones ───────────────────────────────────────────────── */
.boton {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
  text-align: center;
  background-color: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem 2.6rem;
  padding-right: calc(2.6rem + 0.26em);
  cursor: pointer;
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.boton:hover {
  background-color: var(--superficie-2);
  border-color: var(--borde-fuerte);
  box-shadow: 0 3px 18px rgba(138, 112, 96, 0.1);
}

.boton:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 4px;
}

.boton-elegido {
  background-color: var(--oro);
  border-color: var(--oro);
  color: #6d5a3c;
}
.boton-elegido:hover {
  background-color: var(--oro);
  border-color: var(--oro);
}

.boton-principal {
  background-color: var(--tinta);
  border-color: var(--tinta);
  color: var(--fondo);
}
.boton-principal:hover {
  background-color: #755c4d;
  border-color: #755c4d;
  color: var(--fondo);
}

/* ─── Navegación entre fichas ─────────────────────────────────────
   Dos flechas pequeñas alineadas con el enlace de vuelta. En móvil el gesto
   principal es deslizar; las flechas se quedan porque son lo único operable
   con teclado o lector de pantalla. */
.ficha-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.6rem;
}

/* El enlace de vuelta ya no lleva su propio margen: lo pone la fila */
.ficha-cabeza .ficha-volver { margin-bottom: 0; }

.ficha-flechas {
  display: flex;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.flecha {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radio);
  color: var(--tinta-tenue);
  text-decoration: none;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.flecha:hover { color: var(--tinta); border-color: var(--borde); }
.flecha:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

.flecha svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pista del gesto: solo tiene sentido donde se puede deslizar */
.ficha-pista {
  display: none;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  padding: 0 var(--margen) 3.5rem;
  padding-right: calc(var(--margen) + 0.24em);
}

/* Salida breve al deslizar, para que el cambio de vestido no sea un corte seco */
.sale-izquierda main,
.sale-derecha  main {
  transition: transform 0.14s ease-out, opacity 0.14s ease-out;
  opacity: 0.5;
}
.sale-izquierda main { transform: translateX(-3%); }
.sale-derecha  main { transform: translateX(3%); }

/* ─── Raíl de selección ─────────────────────────────────────────
   La percha: las miniaturas de lo que la novia ha ido eligiendo,
   siempre a la vista. Es el elemento con el que se recuerda el sitio. */
.rail {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background-color: rgba(245, 240, 235, 0.93);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-top: 1px solid rgba(185, 160, 144, 0.3);
  box-shadow: 0 -6px 28px rgba(138, 112, 96, 0.08);
  transition:
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.3s ease,
    visibility 0.5s;
}

/* Replegado: fuera de la vista y sin poder recibir foco ni clics */
.rail[data-estado="cerrado"] {
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
}

.rail[data-estado="abierto"] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.rail-interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0.85rem var(--margen);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.rail-etiqueta {
  flex: 0 0 auto;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  padding-right: 0.36em;
}

.rail-lista {
  flex: 1 1 auto;
  display: flex;
  gap: 0.5rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(158, 133, 110, 0.25) transparent;
  padding: 0.15rem 0;
}

.rail-item {
  flex: 0 0 auto;
  animation: railItem 0.42s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes railItem {
  from { opacity: 0; transform: scale(0.5) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.rail-item img {
  display: block;
  /* 3:4, la misma proporción del recorte de las tarjetas */
  width: 38px;
  height: 51px;
  object-fit: cover;
  border: 1px solid var(--oro);
  box-shadow: 0 2px 8px var(--oro-sombra);
}

.rail-cta {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fondo);
  background-color: var(--tinta);
  text-decoration: none;
  padding: 0.75rem 1.6rem;
  padding-right: calc(1.6rem + 0.24em);
  border-radius: var(--radio);
  transition: background-color 0.3s ease;
}
.rail-cta:hover { background-color: #755c4d; }
.rail-cta:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* ── Replegar ── */
.rail-plegar {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: none;
  color: var(--tinta-tenue);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.rail-plegar:hover { color: var(--tinta); border-color: var(--borde); }
.rail-plegar:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.rail-plegar svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Botón redondo: la selección replegada ──
   Lo que queda a la vista el 95% del tiempo, así que es deliberadamente
   pequeño: un círculo con la cuenta. En pantallas con ratón, al pasar por
   encima se despliega la etiqueta; en móvil el número habla solo. */
.rail-abrir {
  flex-direction: row-reverse;
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 49;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--tinta);
  cursor: pointer;
  animation: railAbrirEntra 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
.rail-abrir[hidden] { display: none; }
.rail-abrir:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; border-radius: var(--radio); }

@keyframes railAbrirEntra {
  from { opacity: 0; transform: scale(0.6) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.rail-abrir-cuenta {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radio);
  background-color: var(--oro);
  border: 1px solid var(--oro);
  color: #6d5a3c;
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  line-height: 1;
  /* Playfair trae cifras de estilo antiguo: el 3, el 4, el 7 y el 9 cuelgan
     por debajo de la línea base y el número se ve caído dentro del círculo
     aunque su caja esté centrada. lining-nums las alinea todas a la altura
     de las mayúsculas; tabular-nums evita que el círculo baile al pasar de
     9 a 10. */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  box-shadow: 0 4px 18px var(--oro-sombra);
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.rail-abrir:hover .rail-abrir-cuenta { transform: scale(1.06); }

/* La etiqueta solo aparece con ratón, y no ocupa sitio mientras está plegada */
.rail-abrir-texto {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta);
  opacity: 0;
  transition: max-width 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .rail-abrir:hover .rail-abrir-texto,
  .rail-abrir:focus-visible .rail-abrir-texto {
    max-width: 12rem;
    opacity: 1;
    padding: 0 0.9rem 0 0.7rem;
  }
}

/* Texto solo para lectores de pantalla */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Deja hueco para que el raíl no tape el final de la página */
body.con-rail { padding-bottom: 5.5rem; }

/* ─── Página de selección ───────────────────────────────────── */
.seleccion-vacia {
  max-width: 42ch;
  margin: 0 auto;
  padding: 1rem var(--margen) 7rem;
  text-align: center;
}

.seleccion-vacia p {
  font-size: 0.92rem;
  line-height: 1.9;
  color: var(--tinta-suave);
  margin-bottom: 2rem;
}

.seleccion-acciones {
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem var(--margen) 7rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.seleccion-nota {
  font-size: 0.82rem;
  line-height: 1.85;
  color: var(--tinta-suave);
  max-width: 44ch;
}

.copiado {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.copiado.visible { opacity: 1; }

/* ─── Pie ───────────────────────────────────────────────────── */
.pie {
  position: relative;
  z-index: 10;
  background-color: var(--fondo);
  border-top: 1px solid rgba(185, 160, 144, 0.25);
}

.pie-interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 3.5rem var(--margen);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.pie-marca {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tinta);
  padding-right: 0.24em;
}

.pie-texto {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  padding-right: 0.22em;
}

.pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 0.6rem;
}

.pie-enlaces a {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--tinta-suave);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.pie-enlaces a:hover {
  color: var(--tinta);
  border-bottom-color: var(--linea);
}

.pie-copy {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--tinta-tenue);
  margin-top: 0.4rem;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — páginas interiores
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  :root { --margen: 2rem; }

  .ficha {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .ficha-info { position: static; }
}

/* Tablet: dos columnas */
@media (max-width: 1024px) {
  .rejilla {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem 1.2rem;
  }
}

/* Móvil: una sola columna. Dos vestidos por fila en una pantalla estrecha
   dejan cada foto tan pequeña que no se aprecia ni el corte ni el tejido,
   que es justo lo que la novia está mirando. */
@media (max-width: 600px) {
  .rejilla {
    grid-template-columns: 1fr;
    gap: 2.6rem;
    padding-bottom: 4rem;
  }
}

/* Con tres secciones la cabecera deja de caber en una línea en cuanto la
   pantalla se estrecha: «Sobre Atteso» es largo y acababa partido en dos y
   «Citas» cortada por el borde. En vez de encogerla hasta lo ilegible o
   esconderla tras un icono —tres enlaces no justifican un menú desplegable—,
   la barra pasa a dos filas centradas. */
@media (max-width: 720px) {
  .barra {
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
  }
  .barra-nav { gap: 1.4rem; }
  .barra-nav a {
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    padding-right: 0.2em;
  }
}

@media (max-width: 600px) {
  :root { --margen: 1.25rem; }

  .barra { padding: 1.1rem var(--margen); }
  .barra-marca { font-size: 1.15rem; }

  /* Cabecera comedida: en móvil cada línea de intro es una fila menos de
     vestido a la vista, y lo que la novia viene a ver son los vestidos. */
  .cabecera-seccion { padding: 2.25rem var(--margen) 1.75rem; }
  .titulo-seccion   { font-size: 1.75rem; margin-bottom: 1rem; }
  .regla            { margin-bottom: 1.1rem; }
  .texto-seccion    { font-size: 0.85rem; line-height: 1.75; }

  /* A una sola columna la tarjeta ocupa todo el ancho, así que el nombre
     puede tener la misma presencia que en escritorio. */
  .pieza-nombre {
    font-size: 1rem;
    letter-spacing: 0.13em;
    margin-top: 0.85rem;
  }

  .guardar-marca {
    width: 2.75rem;
    height: 2.75rem;
    top: 0.75rem;
    right: 0.75rem;
  }

  .ficha { padding-top: 1.5rem; }
  .ficha-nombre { font-size: clamp(2rem, 9vw, 2.6rem); }

  /* El botón de guardar pasa a ocupar el ancho y quedar centrado: es la
     acción principal de la pantalla y con el pulgar se llega mejor al centro
     que a una esquina. */
  .guardar-ficha {
    display: block;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
  }

  .ficha-pista { display: block; }

  .rail-interior {
    padding: 0.7rem var(--margen);
    gap: 0.9rem;
  }
  /* En móvil el espacio manda: la etiqueta se va, las miniaturas hablan solas */
  .rail-etiqueta { display: none; }
  .rail-item img { width: 32px; height: 43px; }
  .rail-cta {
    font-size: 0.58rem;
    padding: 0.7rem 1.1rem;
    padding-right: calc(1.1rem + 0.24em);
  }

  body.con-rail { padding-bottom: 4.75rem; }

}

/* ─── Páginas de texto (legales) ────────────────────────────────── */
.texto-legal {
  max-width: 62ch;
  margin: 0 auto;
  padding: 0 var(--margen) 6rem;
}

.texto-legal h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  color: var(--tinta);
  margin: 2.4rem 0 0.8rem;
}
.texto-legal h2:first-child { margin-top: 0; }

.texto-legal p {
  font-size: 0.92rem;
  line-height: 1.95;
  color: var(--tinta-suave);
}

.texto-legal a {
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
}
.texto-legal a:hover { border-bottom-color: var(--tinta); }

.texto-legal strong { font-weight: 600; color: var(--tinta); }