/* ==========================================================================
   components.css — tarjeta, botones, portada, contenido de las secciones,
   nav lateral, cuenta atrás, galería y visor.
   ========================================================================== */

/* --- Aparición al hacer scroll (scroll-reveal.js añade .is-visible) --- */
/* Solo se oculta si hay JS: sin JS todo el contenido se ve. */

.js .revelar {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.js .revelar.is-visible {
  opacity: 1;
  transform: none;
}

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

/* --- Tarjeta: crema al 92 %, bordes nítidos, filete dorado --- */

.tarjeta {
  width: min(100%, 34rem);
  padding: clamp(1.75rem, 6vw, 2.75rem) clamp(1.25rem, 6vw, 2.5rem);
  background-color: var(--tarjeta);
  border: 1px solid var(--oro);
  color: var(--texto);
  text-align: center;
}

.tarjeta--ancha {
  width: min(100%, 44rem);
}

/* Textos largos: cuerpo alineado a la izquierda, cabecera centrada */
.tarjeta--texto > p,
.tarjeta--texto > ul,
.tarjeta--texto .faq,
.tarjeta--texto details {
  text-align: left;
}

.tarjeta p {
  margin-inline: auto;
}

.tarjeta p + p {
  margin-top: 0.75em;
}

.tarjeta__etiqueta {
  margin-bottom: var(--espacio-xs);
  font-family: var(--fuente-texto);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro-oscuro);
}

.tarjeta__titulo {
  font-family: var(--fuente-titulos);
  font-size: var(--tamano-h2);
  font-weight: 500;
  line-height: var(--interlineado-titulos);
}

.tarjeta__dato {
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--oro-oscuro);
}

.tarjeta__destacado {
  font-family: var(--fuente-titulos);
  font-size: 1.6rem;
  line-height: 1.2;
}

.tarjeta__nota {
  font-size: var(--tamano-pequeno);
  font-style: italic;
}

.tarjeta__direccion {
  margin-top: var(--espacio-s);
  font-style: normal;
}

.tarjeta__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: var(--espacio-m);
}

.filete {
  width: 3rem;
  height: 1px;
  margin: var(--espacio-s) auto 1.25rem;
  background-color: var(--oro);
}

/* Marca visible para textos o datos que aún faltan */
.aviso-provisional {
  display: inline-block;
  margin-block: var(--espacio-xs);
  padding: 0.15em 0.6em;
  border: 1px dashed var(--salmon);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto);
}

.tarjeta--texto > .aviso-provisional {
  display: table;
}

/* --- Botones: fondo --oro con texto --fondo-oscuro (5.13:1) --- */

.boton {
  display: inline-block;
  padding: 0.8em 1.6em;
  border: 1px solid var(--oro);
  background-color: var(--oro);
  color: var(--fondo-oscuro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.boton:hover {
  background-color: var(--oro-oscuro);
  border-color: var(--oro-oscuro);
  color: var(--blanco);
}

.boton--secundario {
  background-color: transparent;
  color: var(--texto);
}

/* --- Tarjeta flotante (sobre las pinturas, sesión 2) --- */
/* Esquinas redondeadas y un fondo que "respira": su opacidad oscila entre el
   92 % y el 97 %. Nunca baja del 92 %, que es lo que garantiza el contraste
   de los enlaces dorados (CLAUDE.md, sección 5). Respira solo el fondo, no el texto. */

.tarjeta--flotante {
  position: relative;
  isolation: isolate;
  border-radius: 1.25rem;
  background-color: transparent;
  box-shadow: 0 1.5rem 3rem -1.5rem color-mix(in srgb, var(--fondo-oscuro) 35%, transparent);
}

.tarjeta--flotante::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: color-mix(in srgb, var(--fondo) 97%, transparent);
  animation: respirar 7s ease-in-out infinite alternate;
}

@keyframes respirar {
  from { opacity: 1; }        /* 97 % */
  to   { opacity: 0.9485; }   /* 92 % */
}

/* --- Portada (Inicio) --- */

.portada {
  width: min(100%, 34rem);
  will-change: transform, opacity;
}

/* Entrada al cargar la página: desplazamiento y un cambio leve de escala */
.portada__tarjeta {
  width: 100%;
  animation: entrar-tarjeta 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
}

@keyframes entrar-tarjeta {
  from { opacity: 0; transform: translate3d(0, 1.75rem, 0) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.portada__titulo {
  font-size: var(--tamano-h1);
}

.portada__y {
  font-style: italic;
}

.portada__fecha {
  font-family: var(--fuente-titulos);
  font-size: var(--tamano-h3);
  font-weight: 600;
  line-height: var(--interlineado-titulos);
}

@media (min-width: 900px) {
  .portada {
    width: min(100%, 42rem); /* "Adri & Toño" en una sola línea */
  }
}

.portada__indicacion {
  margin: var(--espacio-m) auto 0;
  font-size: var(--tamano-pequeno);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.portada__indicacion::after {
  content: "";
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  margin: var(--espacio-xs) auto 0;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  animation: indicar 2.2s ease-in-out infinite;
}

@keyframes indicar {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.6; }
  50% { transform: translateY(0.4rem) rotate(45deg); opacity: 1; }
}

/* --- Títulos palabra a palabra (movimiento.js reparte cada palabra en un .palabra) --- */

.palabra {
  display: inline-block;
}

/* --- Nuestra historia (texto directo sobre el color, sin tarjeta) --- */

.historia__cabecera {
  display: grid;
  justify-items: center;
  padding-block: 6vh 2vh;
  text-align: center;
}

.historia__titulo {
  font-size: var(--tamano-h1);
}

.momento {
  width: min(100%, 34rem);
  padding-block: 9vh;
  text-align: center;
}

.momento p {
  margin-inline: auto;
}

.momento__ano {
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--oro-oscuro);
}

.momento__titulo {
  font-size: var(--tamano-h2);
  font-weight: 500;
}

/* --- Cuándo y dónde --- */

.fotos-lugar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-top: var(--espacio-s);
}

.fotos-lugar img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.fotos-lugar__principal {
  grid-column: 1 / -1;
}

.horario {
  display: grid;
  gap: var(--espacio-s);
  margin-top: var(--espacio-s);
}

.horario__fila dt {
  font-family: var(--fuente-titulos);
  font-size: 2rem;
  line-height: 1;
  color: var(--oro-oscuro);
}

.horario__fila dd {
  margin: 0.25rem 0 0;
}

.mapa {
  margin-top: var(--espacio-s);
  border: 1px solid var(--oro);
}

.mapa__iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
}

@media (min-width: 900px) {
  .mapa__iframe {
    aspect-ratio: 16 / 9;
  }
}

/* --- El día --- */

.cronologia {
  display: grid;
  gap: var(--espacio-s);
  width: fit-content;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
}

.cronologia__punto {
  position: relative;
  padding-left: 1.5rem;
}

/* Línea lila y puntos dorados: solo detalle, sin texto encima */
.cronologia__punto::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.55rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--oro);
}

.cronologia__punto:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0.52rem;
  top: 1.25rem;
  bottom: calc(-1 * var(--espacio-s) + 0.2rem);
  width: 1px;
  background-color: var(--lila);
}

.cronologia__hora {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--oro-oscuro);
}

/* --- Alojamiento --- */

.lista-opciones {
  margin-top: var(--espacio-s);
  padding: 0;
  list-style: none;
}

.lista-opciones__item {
  padding-block: 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--oro) 45%, transparent);
}

.lista-opciones__item strong {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
  font-weight: 600;
}

/* --- FAQ (acordeón nativo con <details>; name="faq" deja uno abierto a la vez) --- */

.faq__item {
  border-top: 1px solid color-mix(in srgb, var(--oro) 45%, transparent);
}

.faq__item:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--oro) 45%, transparent);
}

.faq__pregunta {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-s);
  padding-block: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq__pregunta::-webkit-details-marker {
  display: none;
}

.faq__pregunta::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--oro-oscuro);
  transition: transform 0.2s ease;
}

.faq__item[open] .faq__pregunta::after {
  transform: rotate(45deg);
}

.faq__item p {
  padding-bottom: var(--espacio-s);
}

/* --- Regalo --- */

.datos-bancarios {
  margin-block: var(--espacio-m);
  text-align: center;
}

.datos-bancarios__boton {
  display: inline-block;
  padding: 0.6em 1.4em;
  border: 1px solid var(--oro);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.datos-bancarios__boton::-webkit-details-marker {
  display: none;
}

.datos-bancarios[open] .datos-bancarios__boton {
  margin-bottom: var(--espacio-s);
}

.datos-bancarios__iban {
  font-family: ui-monospace, monospace;
  letter-spacing: 0.04em;
}

/* --- Contactos y pie --- */

.contactos {
  display: grid;
  gap: var(--espacio-s);
  margin-top: var(--espacio-s);
  padding: 0;
  list-style: none;
}

.contactos__item p + p {
  margin-top: 0.15rem;
}

.contactos__nombre strong {
  font-family: var(--fuente-titulos);
  font-size: 1.35rem;
  font-weight: 600;
}

.contactos__rol {
  font-size: var(--tamano-pequeno);
  font-style: italic;
}

.pie .tarjeta {
  padding-block: var(--espacio-m);
}

.pie__firma {
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
}

.pie__creditos {
  font-size: var(--tamano-pequeno);
}

/* --- Nav lateral flotante --- */
/* Necesita JS (abre y cierra en móvil, marca la sección activa). */

.nav-lateral {
  display: none;
}

.js .nav-lateral {
  display: block;
  position: fixed;
  left: var(--espacio-s);
  bottom: var(--espacio-s);
  z-index: 50;
}

.nav-lateral__boton {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 1px solid var(--oro);
  border-radius: 50%;
  background-color: var(--tarjeta);
  backdrop-filter: blur(6px);
}

/* Icono de tres líneas */
.nav-lateral__icono,
.nav-lateral__icono::before,
.nav-lateral__icono::after {
  display: block;
  width: 1.25rem;
  height: 1.5px;
  background-color: var(--texto);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-lateral__icono {
  position: relative;
}

.nav-lateral__icono::before,
.nav-lateral__icono::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-lateral__icono::before { top: -0.4rem; }
.nav-lateral__icono::after { top: 0.4rem; }

.nav-lateral--abierta .nav-lateral__icono { background-color: transparent; }
.nav-lateral--abierta .nav-lateral__icono::before { transform: translateY(0.4rem) rotate(45deg); }
.nav-lateral--abierta .nav-lateral__icono::after { transform: translateY(-0.4rem) rotate(-45deg); }

.nav-lateral__boton-texto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.nav-lateral__lista {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-lateral--abierta .nav-lateral__lista {
  display: block;
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.75rem);
  width: min(80vw, 17rem);
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--espacio-xs) 0;
  border: 1px solid var(--oro);
  background-color: var(--tarjeta);
  backdrop-filter: blur(6px);
}

.nav-lateral__enlace {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem var(--espacio-s);
  color: var(--texto);
  text-decoration: none;
}

.nav-lateral__punto {
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  border: 1.5px solid var(--texto);
  border-radius: 50%;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.nav-lateral__enlace[aria-current="true"] .nav-lateral__punto {
  background-color: var(--texto);
  transform: scale(1.25);
}

.nav-lateral__enlace[aria-current="true"] .nav-lateral__texto {
  font-weight: 700;
}

/* Escritorio: columna de puntos a la izquierda, con el nombre al pasar por encima */
@media (min-width: 900px) {
  .js .nav-lateral {
    top: 50%;
    bottom: auto;
    left: 1.25rem;
    transform: translateY(-50%);
  }

  .nav-lateral__boton {
    display: none;
  }

  .nav-lateral__lista,
  .nav-lateral--abierta .nav-lateral__lista {
    display: flex;
    flex-direction: column;
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 0.6rem 0;
    border: 1px solid var(--oro);
    border-radius: 999px;
    background-color: var(--tarjeta);
    backdrop-filter: blur(6px);
  }

  .nav-lateral__enlace {
    position: relative;
    padding: 0.45rem 0.85rem;
  }

  .nav-lateral__texto {
    position: absolute;
    left: calc(100% + 0.75rem);
    top: 50%;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--oro);
    background-color: var(--fondo);
    white-space: nowrap;
    font-size: var(--tamano-pequeno);
    opacity: 0;
    pointer-events: none;
    transform: translate(-0.25rem, -50%);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .nav-lateral__enlace:hover .nav-lateral__texto,
  .nav-lateral__enlace:focus-visible .nav-lateral__texto {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

/* --- Cuenta atrás flotante (abajo a la derecha) --- */
/* Crema al 85 % con desenfoque: --texto encima da ≥ 7.58:1 sobre cualquier fondo. */

.cuenta {
  position: fixed;
  right: var(--espacio-s);
  bottom: var(--espacio-s);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem 0.35rem 0.35rem;
  border: 1px solid var(--oro);
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--fondo) 85%, transparent);
  backdrop-filter: blur(10px);
  color: var(--texto);
}

.cuenta__alternar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: var(--tamano-pequeno);
  font-weight: 700;
}

.cuenta__icono {
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.cuenta--minimizada .cuenta__icono {
  transform: rotate(135deg);
}

.cuenta__unidades {
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0 0.5rem 0 0;
  list-style: none;
}

.cuenta--minimizada .cuenta__unidades,
.cuenta--terminada .cuenta__unidades {
  display: none;
}

.cuenta__unidades li {
  display: grid;
  justify-items: center;
  line-height: 1.1;
}

.cuenta__numero {
  font-family: var(--fuente-titulos);
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cuenta__nombre {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Galería --- */

.galeria__foto {
  display: block;
  padding: 0;
  border: 6px solid var(--fondo);
  background-color: var(--fondo);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--fondo-oscuro) 35%, transparent);
  cursor: zoom-in;
}

/* Cada foto conserva su forma: misma altura para todas, ancho natural.
   En móvil, las horizontales se recortan un poco por los lados para caber en pantalla. */
.galeria__foto img {
  width: auto;
  height: 58svh;
  max-width: 85vw;
  object-fit: cover;
  aspect-ratio: 4 / 3; /* tamaño provisional hasta que carga (si no, mide 0 y nunca empieza a cargar) */
}

.galeria__foto img.is-cargada {
  aspect-ratio: auto;
}

@media (min-width: 900px) {
  .galeria__foto img {
    height: 62vh;
    max-width: none;
  }
}

/* --- Visor de fotos (<dialog> nativo; Esc cierra) --- */

.visor {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.visor[open] {
  display: grid;
  place-items: center;
}

.visor::backdrop {
  background-color: color-mix(in srgb, var(--fondo-oscuro) 94%, transparent);
}

.visor__imagen {
  max-width: 92vw;
  max-height: 82vh;
  max-height: 82dvh;
  object-fit: contain;
}

.visor__contador {
  position: absolute;
  bottom: var(--espacio-s);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--tamano-pequeno);
  color: var(--blanco);
}

.visor__boton {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--oro);
  border-radius: 50%;
  background-color: var(--fondo);
  color: var(--texto);
  font-size: 1.75rem;
  line-height: 1;
}

.visor__boton--cerrar { top: var(--espacio-s); right: var(--espacio-s); }
.visor__boton--anterior { left: var(--espacio-s); top: 50%; transform: translateY(-50%); }
.visor__boton--siguiente { right: var(--espacio-s); top: 50%; transform: translateY(-50%); }

/* Sin animaciones si la persona lo ha pedido */
@media (prefers-reduced-motion: reduce) {
  .portada__indicacion::after {
    animation: none;
  }
}