/* =============================================================================
   ESTILOS BASE — variables, reset, layout general, intro, sonido, modal, final
   Mobile-first. El recorrido en sí (mapa + sprites) vive en recorrido.css.
   ========================================================================== */

/* ---------- Variables globales ---------- */
:root {
  /* Medida que conserva el formato "carta vertical" también en desktop */
  --ancho-maximo: 480px;

  /* Paleta (tomada de la ilustración del mapa) */
  --color-tierra:   #e8d6a8;
  --color-tierra-2: #d8c089;
  --color-camino:   #c9a86a;
  --color-verde:    #6f8f4e;
  --color-cielo:    #8fb7d4;
  --color-texto:    #3a2f22;
  --color-texto-suave: #6b5b45;
  --color-acento:   #c0392b;   /* rojo de la campera de la Profe */
  --color-panel:    #fffaf0;

  /* Tipografía */
  --tipo-titulo: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --tipo-texto:  system-ui, "Segoe UI", Roboto, sans-serif;

  /* Capas */
  --z-mundo: 1;
  --z-moto: 5;
  --z-mano: 6;
  --z-progreso: 30;
  --z-ui: 40;
  --z-intro: 50;
  --z-modal: 60;

  /* Ritmo de animación (se anula con prefers-reduced-motion) */
  --dur-corta: .25s;
  --dur-media: .6s;
}

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* El atributo [hidden] siempre gana, aunque la clase fije display */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  /* clip (no hidden) recorta el desborde lateral SIN romper position: sticky */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--tipo-texto);
  color: var(--color-texto);
  background: var(--color-tierra);
  overflow-x: clip;
  overscroll-behavior-x: none;        /* nada de rebote / navegación lateral */
  line-height: 1.5;
}

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

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--color-acento);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ---------- Botones ---------- */
.boton {
  display: inline-block;
  padding: .9em 1.8em;
  border: 0;
  border-radius: 999px;
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-corta) ease, box-shadow var(--dur-corta) ease;
}
.boton--principal {
  position: relative;
  background: var(--color-acento);
  color: #fff;
  box-shadow: 0 6px 0 #8f271d, 0 10px 20px rgba(0, 0, 0, .25);
}
.boton--principal:hover { transform: translateY(-2px); }
.boton--principal:active { transform: translateY(3px); box-shadow: 0 3px 0 #8f271d; }

/* Onda que sale del botón (ripple) para invitar a presionar.
   Solo transform + opacity: no repinta, va por compositor. */
.boton--principal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .85);
  animation: anillo-comenzar 1.9s ease-out infinite;
  pointer-events: none;
}
@keyframes anillo-comenzar {
  0%        { transform: scale(1);    opacity: .85; }
  75%, 100% { transform: scale(1.25); opacity: 0; }
}

/* =============================================================================
   PANTALLA DE INICIO
   ========================================================================== */
.intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: grid;
  place-content: center;
  padding: 2rem 1.5rem;
  text-align: center;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--color-cielo) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-tierra) 0%, var(--color-tierra-2) 100%);
}

.intro__contenido { max-width: 22rem; margin-inline: auto; }

.intro__sobretitulo {
  margin: 0;
  font-family: var(--tipo-titulo);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .8rem;
  color: var(--color-texto-suave);
}

.intro__titulo {
  margin: .1em 0 .4em;
  font-family: var(--tipo-titulo);
  font-size: clamp(2.4rem, 12vw, 3.6rem);
  color: var(--color-acento);
  text-shadow: 0 2px 0 #fff, 0 4px 12px rgba(0, 0, 0, .15);
}

.intro__bajada { margin: 0 0 1.8rem; color: var(--color-texto-suave); }

.intro__nota {
  margin: 1.2rem 0 0;
  font-size: .8rem;
  color: var(--color-texto-suave);
}

/* Al tocar "Comenzar recorrido" (recorrido.js agrega .esta-oculta) la
   pantalla de inicio se retira con un fundido. */
.intro {
  transition: opacity var(--dur-media) ease, visibility var(--dur-media) ease;
}
.intro.esta-oculta {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* =============================================================================
   CONTROL DE SONIDO
   ========================================================================== */
.control-sonido {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: var(--z-ui);
}

.control-sonido__boton {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: rgba(58, 47, 34, .78);
  color: #fff;
  cursor: pointer;
  transition: transform var(--dur-corta) ease;
}
.control-sonido__boton:hover { transform: scale(1.08); }
.control-sonido__icono { font-size: 1.1rem; line-height: 1; }

/* Estado "silenciado": rojo + nota tachada */
.control-sonido__boton.esta-silenciado {
  background: rgba(192, 57, 43, .82);
  border-color: rgba(255, 255, 255, .85);
}
.control-sonido__boton.esta-silenciado .control-sonido__icono { opacity: .55; }
.control-sonido__boton.esta-silenciado::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .35);
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Parpadeo al empezar el recorrido, para que sepan que se puede activar/mutear */
.control-sonido__boton.avisar { animation: aviso-sonido .9s ease-in-out 3; }
@keyframes aviso-sonido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
  50%      { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}

/* =============================================================================
   SECCIÓN FINAL
   ========================================================================== */
.final {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: grid;
  place-content: center;
  padding: 4rem 1.5rem 6rem;
  text-align: center;
  background:
    radial-gradient(100% 60% at 50% 100%, var(--color-verde) 0%, transparent 70%),
    linear-gradient(180deg, var(--color-tierra-2) 0%, var(--color-tierra) 100%);
}

.final__contenido {
  position: relative;
  z-index: 1;
  max-width: var(--ancho-maximo);
  margin-inline: auto;
}

.final__particulas {
  position: absolute;
  inset: -14% 0 auto;
  height: 34vh;
  overflow: hidden;
  pointer-events: none;
  opacity: .8;
}
/* Iconos que suben desde abajo del todo (se activan al revelar el festejo) */
.festejo__particulas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
}
.particula {
  position: absolute;
  top: 100%;
  opacity: 0;
  animation: subir-particula 7s ease-in-out infinite;
}
@keyframes subir-particula {
  0%   { transform: translateY(0) rotate(0); opacity: 0; }
  15%  { opacity: .9; }
  85%  { opacity: .9; }
  100% { transform: translateY(-95vh) rotate(40deg); opacity: 0; }
}

.final__titulo {
  font-family: var(--tipo-titulo);
  font-size: clamp(2rem, 9vw, 3rem);
  color: var(--color-acento);
  margin: 0 0 1rem;
  text-shadow: 0 2px 0 #fff;
}

.final__mensaje { color: var(--color-texto-suave); font-size: 1.05rem; }
.final__mensaje p { margin: 0 0 .8rem; }
.final__mensaje strong { color: var(--color-texto); }

/* =============================================================================
   FESTEJO — botón revelar + logo + ubicación + cuenta regresiva + confeti
   ========================================================================== */

/* Botón naranja con efecto 3D (base oscura que asoma por abajo) */
.final__revelar {
  position: relative;
  display: inline-block;
  margin: 2.2rem auto 0;
  padding: .85em 1.7em;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #f0993f 0%, #e07f2a 100%);
  color: #fff;
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 0 #a95a15, 0 12px 22px rgba(0, 0, 0, .22);
  transition: transform .12s ease, box-shadow .12s ease;
  animation: latido-boton 1.5s ease-in-out infinite;
}
.final__revelar:hover { transform: translateY(-2px); }
.final__revelar:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #a95a15, 0 6px 12px rgba(0, 0, 0, .22);
}
.final__revelar.usado { animation: none; }

@keyframes latido-boton {
  0%, 100% { transform: scale(1); }
  45%      { transform: scale(1.06); }
  60%      { transform: scale(.99); }
}

.festejo {
  margin-top: 1.6rem;
  opacity: 0;
  transition: opacity .3s ease;
}
.festejo.visible { opacity: 1; }

/* Cada bloque entra con un "pop" y un pequeño escalonado */
.festejo.visible > * {
  animation: festejo-pop .5s cubic-bezier(.34, 1.6, .55, 1) both;
}
.festejo.visible .festejo__logo   { animation-delay: 0s;    }
.festejo.visible .festejo__lugar  { animation-delay: .1s;   }
.festejo.visible .festejo__hora   { animation-delay: .2s;   }
.festejo.visible .festejo__mapa    { animation-delay: .3s;   }
.festejo.visible .festejo__cuenta  { animation-delay: .42s;  }
.festejo.visible .festejo__agendar { animation-delay: .54s;  }

@keyframes festejo-pop {
  0%   { opacity: 0; transform: scale(.55) translateY(14px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.festejo__logo {
  width: clamp(150px, 46vw, 210px);
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .3));
}
.festejo__lugar {
  margin: .8rem 0 .1rem;
  font-family: var(--tipo-titulo);
  font-weight: 700;
  color: var(--color-texto);
}
.festejo__hora { margin: .1rem 0 0; color: var(--color-texto-suave); }
.festejo__hora strong { color: var(--color-acento); font-size: 1.15em; }

.festejo__mapa {
  margin-top: 1rem;
  font-size: .92rem;
  padding: .7em 1.4em;
  animation: none;
  background: linear-gradient(180deg, #e0655a 0%, var(--color-acento) 100%);
  box-shadow: 0 5px 0 #8f271d, 0 10px 18px rgba(0, 0, 0, .2);
}
.festejo__mapa:active { box-shadow: 0 2px 0 #8f271d, 0 5px 10px rgba(0, 0, 0, .2); }

.festejo__agendar {
  margin-top: .7rem;
  font-size: .92rem;
  padding: .7em 1.4em;
  background: linear-gradient(180deg, #6ec06b 0%, #4a9a52 100%);
  box-shadow: 0 5px 0 #2f6b38, 0 10px 18px rgba(0, 0, 0, .2);
}
.festejo__agendar:active { box-shadow: 0 2px 0 #2f6b38, 0 5px 10px rgba(0, 0, 0, .2); }

/* Cuenta regresiva — cajitas naranjas con el mismo efecto 3D */
.festejo__cuenta {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin: 1.4rem 0 0;
}
.festejo__num {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.4rem;
  padding: .5rem .2rem .4rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #f0993f 0%, #e07f2a 100%);
  color: #fff;
  box-shadow: 0 5px 0 #a95a15, 0 9px 14px rgba(0, 0, 0, .2);
}
.festejo__num span {
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.festejo__num small {
  margin-top: .15rem;
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .9;
}
.festejo__num.tic span { animation: tic-num .35s ease; }
@keyframes tic-num {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-4px) scale(1.12); }
  100% { transform: translateY(0) scale(1); }
}

.festejo__confeti {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}

/* Ventana emergente con el mapa (no saca de la página) */
.mapa-modal {
  width: min(94vw, 34rem);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  overflow: visible;
}
.mapa-modal::backdrop { background: rgba(20, 14, 8, .78); }
.mapa-modal__marco {
  background: var(--color-panel);
  border: 4px solid #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}
.mapa-modal__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.1rem;
  background: var(--color-acento);
  color: #fff;
}
.mapa-modal__titulo { margin: 0; font-family: var(--tipo-titulo); font-size: 1.15rem; }
.mapa-modal__cerrar {
  flex: none;
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  color: #fff; font-size: 1rem; cursor: pointer;
}
.mapa-modal__cerrar:hover { background: rgba(255, 255, 255, .35); }
.mapa-modal__mapa {
  aspect-ratio: 16 / 11;
  background: #e8e2d4;
}
.mapa-modal__mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
.mapa-modal__dir {
  margin: 0;
  padding: .9rem 1.1rem .3rem;
  font-family: var(--tipo-titulo);
  font-weight: 700;
  color: var(--color-texto);
  text-align: center;
}
.mapa-modal__ext {
  display: block;
  padding: .3rem 1.1rem 1rem;
  text-align: center;
  color: var(--color-acento);
  font-size: .9rem;
}

.final__galeria {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  margin: 1.6rem 0;
}
.final__galeria img {
  width: clamp(120px, 40%, 200px);
  border-radius: 10px;
  border: 4px solid #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}

.final__firmas {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  font-family: var(--tipo-titulo);
  color: var(--color-texto);
}
.final__firmas:empty { display: none; margin: 0; }
.final__firmas li { margin: .2em 0; }

/* =============================================================================
   MODAL
   ========================================================================== */
.modal {
  width: min(92vw, 34rem);
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  overflow: visible;
}

/* Scroll del fondo bloqueado mientras el modal está abierto.
   Solo overflow:hidden (NO position:fixed): conserva la posición de scroll,
   así la moto del recorrido no se mueve al abrir/cerrar un cartel. */
body.modal-abierto {
  overflow: hidden;
}
.modal::backdrop { background: rgba(30, 20, 10, .68); }

.modal__marco {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  background: var(--color-panel);
  border-radius: 18px;
  border: 4px solid #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  overflow: hidden;
}

.modal__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: var(--color-acento);
  color: #fff;
}
.modal__titulo {
  margin: 0;
  font-family: var(--tipo-titulo);
  font-size: 1.25rem;
}
.modal__cerrar {
  flex: none;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}
.modal__cerrar:hover { background: rgba(255, 255, 255, .35); }
.modal__cerrar.destacar { animation: pulso-cerrar 1s ease-in-out 2; }
@keyframes pulso-cerrar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
  50%      { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
}

/* Aviso "podés salir con la ✕" al abrir el modal */
.modal__pista-cerrar {
  position: absolute;
  top: 92px;
  right: 12px;
  z-index: 3;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(58, 47, 34, .92);
  color: #fff;
  font: 700 .74rem var(--tipo-texto);
  white-space: nowrap;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .3);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.modal__pista-cerrar.visible { opacity: 1; transform: translateY(0); }
.modal__pista-cerrar::after {
  content: "";
  position: absolute;
  top: -5px;
  right: 16px;
  border: 5px solid transparent;
  border-bottom-color: rgba(58, 47, 34, .92);
}

.modal__cuerpo {
  padding: 1.2rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Contenido de cada ficha dentro del modal */
.ficha__galeria {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.ficha__galeria:empty { display: none; }
.ficha__galeria img {
  width: calc(50% - .25rem);
  border-radius: 10px;
  object-fit: cover;
}
.ficha__texto { color: var(--color-texto); line-height: 1.6; }
.ficha__texto p { margin: 0 0 .9rem; }
.ficha__texto p:last-child { margin-bottom: 0; }
.ficha__firma {
  margin-top: 1.1rem !important;
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: 1.2rem;
  color: var(--color-acento);
}

/* =============================================================================
   RECUERDOS — carrusel de polaroids
   ========================================================================== */
.recuerdos {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 0 4rem;
  text-align: center;
  background: linear-gradient(180deg, var(--color-tierra) 0%, var(--color-tierra-2) 100%);
}
/* Canvas de efectos fijo sobre el viewport: los corazones se ven aunque la
   página baje al mensaje final. Oculto salvo durante el estallido. */
.efecto-fijo {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 80;
}

.recuerdos__titulo {
  margin: 0 0 1.6rem;
  font-family: var(--tipo-titulo);
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  color: var(--color-acento);
  text-shadow: 0 2px 0 #fff;
}

.recuerdos__carrusel {
  position: relative;
  height: clamp(330px, 82vw, 460px);
  margin-inline: auto;
  max-width: 640px;
  overflow: hidden;             /* recorta las polaroids que salen de cuadro */
  touch-action: pan-y;          /* el swipe horizontal lo maneja el carrusel */
  user-select: none;
}

.polaroid {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(210px, 58vw, 300px);
  margin: 0;
  padding: 10px 10px 66px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
  transform: translate(-50%, -50%) scale(.7);
  opacity: 0;
  cursor: pointer;
}
/* La animación de "repartir" y el deslizado */
.recuerdos__carrusel.repartido .polaroid {
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .45s ease;
}
.polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #e8e2d4;
  border-radius: 1px;
}
.polaroid figcaption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 9px;
  max-height: 52px;
  overflow: hidden;
  font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  font-size: clamp(.95rem, 3.6vw, 1.1rem);
  line-height: 1.1;
  color: #3a2f22;
}
.polaroid.es-activo { box-shadow: 0 18px 42px rgba(0, 0, 0, .38); }

.recuerdos__puntos {
  display: flex;
  gap: 7px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.4rem auto 0;
  max-width: 18rem;
}
.recuerdos__punto {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(58, 47, 34, .28);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.recuerdos__punto.es-activo {
  background: var(--color-acento);
  transform: scale(1.35);
}

.recuerdos__ayuda {
  margin: 1rem 0 0;
  font-size: .8rem;
  color: var(--color-texto-suave);
}

/* Invitación a seguir bajando — botón con forma de corazón y efecto 3D
   (una "cara" clara arriba y una base oscura ::before que asoma por abajo).
   El corazón NO puede llevar un anillo propio (el clip-path lo recorta), así
   que la onda blanca vive en el contenedor .recuerdos__seguir-marco. */
.recuerdos__seguir-marco {
  --corazon: path('M125,214 C125,214 22,140 22,76 C22,44 45,24 73,24 C97,24 116,40 125,58 C134,40 153,24 177,24 C205,24 228,44 228,76 C228,140 125,214 125,214 Z');
  position: relative;
  display: inline-block;
  margin: 1.6rem auto .4rem;
  isolation: isolate;   /* el z-index -1 de la onda queda relativo a acá */
}

/* Onda blanca que "sale" del corazón — como el anillo del botón Comenzar.
   Dos ondas desfasadas para que sea continuo. */
.recuerdos__seguir-marco::before,
.recuerdos__seguir-marco::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .9);
  -webkit-clip-path: var(--corazon);
  clip-path: var(--corazon);
  animation: anillo-corazon 2s ease-out infinite;
  pointer-events: none;
}
.recuerdos__seguir-marco::after { animation-delay: 1s; }

@keyframes anillo-corazon {
  0%   { transform: scale(.95);  opacity: .9; }
  60%  { opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

.recuerdos__seguir {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 250px;
  height: 226px;
  margin: 0;
  padding: 30px 40px 62px;   /* empuja el texto lejos de la punta de abajo */
  border: 0;
  background:
    radial-gradient(115% 90% at 50% 22%,
      #e0655a 0%, var(--color-acento) 52%, #b23a2c 100%);
  color: #fff;
  font-family: var(--tipo-titulo);
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.18;
  text-align: center;
  cursor: pointer;
  -webkit-clip-path: var(--corazon);
  clip-path: var(--corazon);
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .3));
  transition: transform .12s ease;
  animation: late-corazon 1.6s ease-in-out infinite;
}

/* Latido suave: solo `scale` (no pelea con los estados :hover/:active). */
@keyframes late-corazon {
  0%, 60%, 100% { scale: 1;    }
  18%           { scale: 1.05; }
  32%           { scale: .985; }
  45%           { scale: 1.025; }
}

/* Al tocarlo se corta todo (latido + onda). */
.recuerdos__seguir.usado { animation: none; }
.recuerdos__seguir-marco:has(.usado)::before,
.recuerdos__seguir-marco:has(.usado)::after { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .recuerdos__seguir { animation: none; }
  .recuerdos__seguir-marco::before,
  .recuerdos__seguir-marco::after { animation: none; opacity: 0; }
}
.recuerdos__seguir::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #8f271d;
  -webkit-clip-path: var(--corazon);
  clip-path: var(--corazon);
  transform: translateY(9px);
  transition: transform .12s ease;
}
.recuerdos__seguir:hover { transform: translateY(-2px); }
.recuerdos__seguir:active { transform: translateY(6px); }
.recuerdos__seguir:active::before { transform: translateY(3px); }
.recuerdos__seguir-texto { display: block; }

.recuerdos__seguir-flecha {
  width: 13px;
  height: 13px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
  animation: pista-rebote 1.4s ease-in-out infinite;
}

/* Lightbox (foto grande al tocar la del centro) */
.recuerdos__lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-content: center;
  gap: .8rem;
  padding: 1.5rem;
  background: rgba(20, 14, 8, .92);
}
.recuerdos__lightbox[hidden] { display: none; }
.recuerdos__lightbox img {
  max-width: min(92vw, 640px);
  max-height: 74vh;
  border: 6px solid #fff;
  border-radius: 3px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
.recuerdos__lb-texto {
  margin: 0;
  text-align: center;
  color: #fff;
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: 1.3rem;
}
.recuerdos__lb-cerrar {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}

/* =============================================================================
   RESPONSIVE — tablet / desktop
   El concepto vertical se mantiene: se limita el ancho, no se rediseña.
   ========================================================================== */
@media (min-width: 700px) {
  .intro__titulo { font-size: 4rem; }
}

/* En pantallas anchas, un fondo lateral enmarca la "columna" del recorrido. */
@media (min-width: 900px) {
  body {
    background:
      linear-gradient(180deg, #cbb98f, #b7a373);
  }
}

/* =============================================================================
   PREFERENCIA DE MOVIMIENTO REDUCIDO
   Se desactivan transiciones/animaciones intensas sin romper la navegación.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}