:root {
  --c-teal-oscuro: #122c43;
  --c-teal-medio:  #6fa4ac;
  --c-menta:       #d9f0df;
  --c-crema:       #f7f4e7;
  --c-oliva:       #8b9b62;

  --c-texto:       #122c43;
  --c-texto-suave: #5c7485;

  --shadow-soft: 0 18px 30px rgba(0, 0, 0, 0.08);

   /* ⬇️ offset vertical del bloque ramita + frase + salto */
  --hero-block-offset: -10rem;
}

/* Reset básico */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: #122c43;                        /* color base por si la imagen tarda */
  background-image: url("images/fondo-dorado.jpg"); /* 👈 ruta a tu imagen */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;                           /* que cubra toda la pantalla */
  color: var(--c-texto);
}

/* Contenedor general (pensado primero para móvil) */
.page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 1.5rem 0;
}

/* Tarjeta principal */
.card {
  width: 100%;
  max-width: 460px;
  margin: 0 1.25rem;
  padding: 1.8rem 1.6rem 2.2rem;
  background: var(--c-crema);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 0;             /* 👈 para que el marco pueda ir por encima */
}

/* Ajuste fino: menos espacio solo abajo de la tarjeta */
.card {
  padding-bottom: 0rem;  /* prueba 1.4; si quieres menos, 1.2rem */
}

/* Borde interior suave */
.card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  pointer-events: none;
  z-index: 2;             /* 👈 el marco se dibuja por encima de la foto y el texto */
}

/* ---- FRASE INICIAL (VERSIÓN ÚNICA) ---- */
.card__quote {
  font-family: "Ms Madi", cursive;
  font-size: 1.5rem;      /* 🔹 antes 1rem */
  line-height: 1.2;       /* un poco más de aire entre renglones */
  text-align: center;
  color: var(--c-texto-suave);

  /* 🔹 ARRIBA / IZQ-DCHA / ABAJO */
  margin: -2.5rem 1.2rem 0.6rem;

  position: static;
}

/* Efecto de escritura: cada letra como span */
.quote-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.quote-letter.quote-letter--show {
  opacity: 1;
  transform: translateY(0);
}

/* Cada palabra es un bloque que no se parte */
.quote-word {
  white-space: nowrap;   /* 🔹 no rompe dentro de la palabra */
}

/* ---- BLOQUE: MIS XV ALMA ---- */
.card__title-block {
  text-align: center;
  margin: 1rem 0 1.4rem;
}

.card__subtitle {
  font-family: "Playfair Display", serif;
  font-size: 0.85rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #122c43;

  margin: 0 0 0.25rem;
  white-space: nowrap;           /* 👈 que no se parta en 2 líneas */
  display: inline-block;
  transform: translateY(-8.4rem); /* 🔹 súbelo/bájalo: - sube, + baja */
}

.card__name {
  font-family: "Playfair Display", serif;
  font-size: 2.6rem;
  margin: 0;
  color: var(--c-teal-oscuro);
}

/* NOMBRE "Alma" escrito letra a letra */
.card__name {
  font-family: "Ms Madi", cursive;
  font-size: 4rem;   /* sube/baja a gusto */
  line-height: 1;
  color: #071d30;
  margin: 0;
  white-space: nowrap;   /* 👈 no se parte en dos renglones */
}

/* Cada letra del nombre */
.name-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.name-letter--show {
  opacity: 1;
  transform: translateY(0);
}

/* ---- FECHA ESTILO CALENDARIO ---- */
.card__date {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* izquierda | centro | derecha */
  justify-items: center;               /* centra el contenido en cada columna */
  align-items: center;                 /* centra verticalmente */
  column-gap: 1.2rem;                  /* separación entre Sábado, 13/Junio y 2026 */
  margin: 0.4rem auto 0.1rem;
  text-align: center;
}

.card__date-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card__date-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}

.card__date-col--main .card__date-number {
  font-family: "Playfair Display", serif;
  font-size: 2.7rem;
  line-height: 1;
  color: var(--c-teal-oscuro);
}

.card__date-month {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
  margin-top: 0.2rem;
}

.card__date-intro {
  font-family: "Playfair Display", serif;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-texto-suave);

  /* margen normal, sin trucos raros */
  margin: 0.2rem 0 0.6rem;
}

/* Columna central de la fecha: necesario para posicionar el círculo */
.card__date-col--main {
  position: relative;
}

/* Contenedor del círculo, centrado detrás del 13 */
.card__date-circle {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;          /* ajusta tamaño del círculo */
  height: auto;
  pointer-events: none;
  z-index: 0;
}

/* Imagen del círculo con efecto "Brillo" */
.card__date-circle-img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  filter: blur(4px);
}

/* cuando el círculo es visible en pantalla → aplicamos "Brillo" */
.card__date-circle-img.is-visible {
  animation: branch-fade-in 1.2s ease-out forwards;
}

/* Aseguramos que el 13 y "Junio" vayan por encima del círculo */
.card__date-number,
.card__date-month {
  position: relative;
  z-index: 1;
}

/* ---- SECCIONES (ceremonia, fiesta, etc.) ---- */
.card__section {
  padding: 1.2rem 0 0.4rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 0.8rem;
}

.card__section-title {
  font-family: "Playfair Display", serif;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-teal-oscuro);
  margin: 0 0 0.5rem;
  text-align: center;
}

/* Título específico de la sección de fecha */
.card__section-title--date {
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
}

/* Sección específica de la FECHA */
.card__section--date {
  margin-top: -11rem;  /* valor NEGATIVO = sube toda la sección */
  padding-top: 1.2rem;       /* sin padding raro */
}

.card__text {
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: center;
  margin: 0.3rem 0 0.3rem;
  color: var(--c-texto);
}

/* ---- BLOQUES DE EVENTO (ceremonia / fiesta) ---- */

/* Contenedor general del evento (centra todo) */
.card__event {
  text-align: center;
  margin-top: 0.4rem;
}

/* HORA: 20:30 hs (con puntos arriba y abajo) */
.card__event-time {
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-teal-oscuro);
  text-align: center;

  /* aire arriba y abajo */
  margin: 0.10rem 0 0.5rem;
}

/* Puntitos decorativos arriba y abajo de la hora */
.card__event-time::before,
.card__event-time::after {
  content: "·";
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  color: var(--c-texto-suave);
}

.card__event-time::before {
  margin-bottom: 0.15rem;
}

.card__event-time::after {
  margin-top: 0.15rem;
}

/* Texto bajo la hora (dirección genérica) */
.card__event-text {
  font-size: 0.85rem;
  margin: 0 0 0.8rem;
  color: var(--c-texto-suave);
  text-align: center;
}

/* Sección ITINERARIO: aire bajo el título */
.card__section--timeline .card__section-title {
  margin-bottom: 10rem;   /* espacio entre título y línea de tiempo */
}

/* Contenedor de la sección */
.card__section--timeline {
  margin-top: 0.8rem;
}

/* más espacio entre el título y la línea de tiempo */
.card__section--timeline .timeline {
  margin: 0 0 0.4rem;   /* sin margen arriba */
  padding-top: 0.9rem;  /* 🔹 aquí creas el “saltito” visible */
}

/* Cada evento */
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;  /* col 1: línea+flor | col 2: hora+texto */
  column-gap: 0.8rem;
  padding-bottom: 1.3rem;           /* espacio entre eventos */
}

.timeline__item:last-child {
  padding-bottom: 0;
}

/* Línea vertical */
.timeline__item::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0.6rem;
  bottom: -0.6rem;
  width: 2px;
  background: rgba(0, 0, 0, 0.07);
}

.timeline__item:last-child::before {
  bottom: 0.4rem;
}

/* Contenedor de la flor */
.timeline__dot {
  position: absolute;
  left: 3px;
  top: 0.1rem;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Flor apagada */
.timeline__flower {
  width: 34px;
  height: auto;
  display: block;
  opacity: 0;
  filter: blur(4px);
}

/* Flor con Brillo */
.timeline__flower.is-visible {
  animation: branch-fade-in 1.2s ease-out forwards;
}

/* Rotaciones distintas (las exagero para que se note bien) */
.timeline__item:nth-child(1) .timeline__flower {
  transform: rotate(-18deg);
}
.timeline__item:nth-child(2) .timeline__flower {
  transform: rotate(4deg);
}
.timeline__item:nth-child(3) .timeline__flower {
  transform: rotate(-49deg);
}
.timeline__item:nth-child(4) .timeline__flower {
  transform: rotate(12deg);
}

/* Hora (regular, al lado de la flor) */
.timeline__time {
  grid-column: 2;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-teal-oscuro);
  text-align: left;
}

/* Texto del momento (debajo, cursiva Alma) */
.timeline__text {
  grid-column: 2;
  margin-top: 0.18rem;
  font-family: "Ms Madi", cursive;
  font-size: 1.6rem;   /* 🔹 antes 1.15rem */
  line-height: 1.35;   /* un pelín más de aire */
  color: var(--c-texto-suave);
  text-align: left;
}

/* ---- BOTONES ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--c-teal-oscuro);
  background: var(--c-teal-oscuro);
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out,
              background 0.15s.ease-out, color 0.15s ease-out;
}

.btn--full {
  width: 100%;
}

.btn--outline {
  background: transparent;
  color: var(--c-teal-oscuro);
}

.btn--whatsapp {
  background: #1ebc5a;
  border-color: #1ebc5a;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
}

/* BOTÓN DE UBICACIÓN CON PNG */
.evento-map-link {
  display: flex;
  justify-content: center;
  margin-top: 0.6rem;
}

/* === ICONO UBICACIÓN (PNG) === */
.evento-map-img {
  width: 100px;          /* ajusta el tamaño a gusto (80, 90, 100…) */
  height: auto;
  display: block;
  margin: 0 auto;

  /* estado inicial para BRILLO */
  opacity: 0;
  filter: blur(4px);
  transform: translateX(0);
}

/* BRILLO (una sola vez, cuando le pongamos .is-visible) */
.evento-map-img.is-visible {
  animation: branch-fade-in 1.2s ease-out forwards;
}

/* TEMBLOR suave */
@keyframes map-shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-2px); }
  40%  { transform: translateX(2px); }
  60%  { transform: translateX(-2px); }
  80%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

.evento-map-link.is-shaking {
  animation: map-shake 0.35s ease-out;
}

/* ==== ITINERARIO DE LA NOCHE (LÍNEA DE TIEMPO VERTICAL) ==== */

.card__section--timeline {
  margin-top: 0.8rem;
}

.timeline {
  margin: 0.4rem 0 0.4rem;
}

/* Cada evento */
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;  /* col 1: línea + flor  | col 2: hora + texto */
  column-gap: 0.8rem;
  padding-bottom: 1.3rem;
}

.timeline__item:last-child {
  padding-bottom: 0;
}

/* Línea vertical */
.timeline__item::before {
  content: "";
  position: absolute;
  left: 20px;                     /* centro de la columna de 40px */
  top: 0.6rem;
  bottom: -0.6rem;
  width: 2px;
  background: rgba(0, 0, 0, 0.07);
}

.timeline__item:last-child::before {
  bottom: 0.4rem;
}

/* Contenedor de la flor sobre la línea */
.timeline__dot {
  position: absolute;
  left: 3px;                      /* ajusta si la ves muy corrida */
  top: 0.1rem;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Flor apagada (antes del Brillo) */
.timeline__flower {
  width: 34px;
  height: auto;
  display: block;
  opacity: 0;
  filter: blur(4px);
}

/* Flor con Brillo cuando entra en pantalla */
.timeline__flower.is-visible {
  animation: branch-fade-in 1.2s ease-out forwards;
}

/* Rotaciones distintas para que no se vean todas iguales */
.timeline__item:nth-child(1) .timeline__flower {
  transform: rotate(-6deg);
}

.timeline__item:nth-child(2) .timeline__flower {
  transform: rotate(10deg);
}

.timeline__item:nth-child(3) .timeline__flower {
  transform: rotate(-14deg);
}

.timeline__item:nth-child(4) .timeline__flower {
  transform: rotate(7deg);
}

/* si tienes más eventos, seguimos el patrón… */
.timeline__item:nth-child(5) .timeline__flower {
  transform: rotate(-10deg);
}

/* HORA – al lado de la flor, regular (sin negrita) */
.timeline__time {
  grid-column: 2;                 /* columna derecha */
  font-size: 0.8rem;
  font-weight: 400;               /* 👉 regular, no bold */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-teal-oscuro);
  text-align: left;
}

/* TEXTO DEL MOMENTO – debajo de la hora y en cursiva “Alma” */
.timeline__text {
  grid-column: 2;                 /* misma columna que la hora */
  margin-top: 0.18rem;            /* un pelín de aire debajo de la hora */
  font-family: "Ms Madi", cursive;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--c-texto-suave);
  text-align: left;
}

/* Sección ITINERARIO */
.card__section--timeline .card__section-title {
  margin-bottom: 1.5rem;   /* un pelín más de aire antes de la línea */
}

/* ---- FIRMA FINAL ---- */
.card__signature {
  margin-top: 1.6rem;
  text-align: center;
  color: var(--c-texto-suave);
  font-size: 0.85rem;
}

.card__signature-name {
  font-family: "Ms Madi", cursive;  /* misma que el Alma del principio */
  font-size: 1.5rem;
  margin: 0.25rem 0 0;
  color: var(--c-teal-oscuro);
}

.card__name--hidden {
  position: absolute;
  left: -9999px;
  top: 0;
}

/* FOTO FINAL DE DESPEDIDA, BAJO LA FIRMA */
.card__signature-photo {
  margin-top: -8rem;           /* aire entre el texto "Alma y familia" y la foto */
  display: flex;
  justify-content: center;
}

.card__signature-photo img {
  max-width: 160%;               /* ajusta 70–90% según la veas */
  height: auto;
  display: block;
}

/* ---- AJUSTES ESCRITORIO ---- */
@media (min-width: 768px) {
  .page {
    padding: 3rem 0;
  }

  .card {
    max-width: 520px;
    padding: 2.2rem 2.2rem 2.6rem;
  }

  .card__name {
    font-size: 3rem;
  }

  .card__date-col--main .card__date-number {
    font-size: 3.1rem;
  }

  .card__section-title {
    font-size: 1.1rem;
  }

  /* 2. PRIMERA IMAGEN DE ALMA (la de portada) */
  .card__hero-photo:not(.card__hero-photo--salto) img {
    transform: scale(1.15);      /* 👈 sube/baja este número: 1.03, 1.08, etc. */
    transform-origin: center;
  }

  /* 3. SEGUNDA IMAGEN (Alma saltando) */
  .card__hero-photo--salto img {
    transform: scale(1.15);      /* mismo factor o uno distinto si quieres */
    transform-origin: center;
  }
}

/* CONTENEDOR GENERAL: ILUSTRACIÓN + TEXTO "MIS XV / ALMA" */
.card__hero {
  position: relative;
  margin-bottom: 1.4rem;   /* espacio debajo del hero */
}

/* ILUSTRACIÓN A TODO EL ANCHO DEL RECUADRO AMARILLO (tal como ya la tenías) */
.card__hero-photo {
  max-width: none;
  width: calc(100% + 3.2rem);
  position: relative;
  left: -1.6rem;
  margin: -1.8rem 0 1.3rem;   /* ya lo teníamos para que llegue arriba */
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.card__hero-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.card__hero-photo--salto {
  max-width: 260px;         /* ancho de la ilustración */
  margin: -5rem auto 10rem;  /* poquito espacio encima, más aire debajo */
}

/* BLOQUE "Mis XV / Alma" SOBRE LA ILUSTRACIÓN */
.card__title-block {
  text-align: center;
  margin: 0;             /* ya no necesitamos margen normal */
}

/* Versión que va encima del hero (la que hemos puesto con la clase extra) */
.card__title-block--over-hero {
  position: absolute;
  top: 72%;              /* 🔹 súbela o bájala cambiando este valor (10%, 20%, etc.) */
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;            /* por encima de la ilustración y del marco */
}

.card__subtitle {
  font-family: "Playfair Display", serif;
  font-size: 3.0rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #0b6473;          /* azul verdoso de tu paleta */
  margin: 0 0 0.25rem;
}

.card__name {
  font-family: "Ms Madi", cursive;   /* manuscrita */
  font-size: 2rem;
  line-height: 1;
  color: #254d78;
  margin: 0;
}

/* Un poco de ajuste en pantallas más grandes */
@media (min-width: 768px) {
  .card__hero-photo {
    max-width: 280px;
    margin-bottom: 1.5rem;
  }

  .card__name {
    font-size: 3rem;
  }
}

/* SÓLO el nombre "Alma" */
.card__name {
  position: relative;
  top: -0.8rem;    /* valor NEGATIVO = sube el nombre */
}

/* Animación: la rama "se enciende" poco a poco, sin moverse de sitio */
@keyframes branch-fade-in {
  0% {
    opacity: 0;
    filter: blur(4px);
  }
  40% {
    opacity: 0.4;
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

/* Ajuste fino: ilustración de Alma saltando más pegada al texto */
.card__hero-photo--salto {
  max-width: 260px;          /* o el ancho que ya estabas usando */
  margin: -5rem auto 5rem;  /* 🔹 margen TOP NEGATIVO = sube la imagen */
}

/* ===== AJUSTE RÁPIDO: FRASE + ILUSTRACIÓN SALTANDO ===== */

/* 2. Ilustración de Alma saltando debajo del texto  */
.card__hero-photo--salto {
  position: relative;
  max-width: 360px;      /* 🔹 tamaño de la ilustración */
  width: 380px;          /* aseguro que NO hereda el width gigante */
  margin: -3.5rem auto 2.2rem;  /* 🔹 AQUÍ LA SUBES / BAJAS */
  left: 0.5;               /* anula el left:-1.6rem de .card__hero-photo */
  transform: none;       /* por si había transforms anteriores */
}


/* AJUSTE FINAL: posición de la frase inicial */
.intro-quote {
  display: block;
  /* 🔹 MUEVES LA FRASE SOLO TOCANDO ESTOS DOS VALORES */
  margin-top: -5.0rem !important;   /* más NEGATIVO = más arriba */
  margin-bottom: 0.6rem !important; /* más grande = más aire abajo */
}
/* 🌿 RAMITA DEBAJO DE "ALMA" — VERSIÓN LIMPIA */

/* Contenedor de la ramita */
.card__name-ornament {
  position: relative;
  margin-top: 4rem;
  display: flex;
  justify-content: center;
  /* aquí la giras y la mueves un pelín */
  transform: translateX(29px) rotate(0deg);  /* cambia -32 y -55 a gusto */
  transform-origin: center center;
  overflow: visible;
}

/* Imagen de la ramita */
.card__name-ornament-img {
  width: 200px;      /* 👈 AQUÍ controlas el tamaño de la ramita */
  height: auto;
  display: block;

  /* estado inicial para el efecto "Brillo" */
  opacity: 0;
  filter: blur(4px);
}

/* Cuando activamos la clase desde JS (.is-visible) */
.card__name-ornament.is-visible .card__name-ornament-img {
  animation: branch-fade-in 1.2s ease-out forwards;
}

/* Animación "Brillo": la rama aparece poco a poco sin moverse */
@keyframes branch-fade-in {
  0% {
    opacity: 0;
    filter: blur(4px);
  }
  40% {
    opacity: 0.4;
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }

}
/* MOVER RAMITA + FRASE + ALMA SALTANDO EN BLOQUE */
.card__name-ornament,
.card__quote,
.card__hero-photo--salto {
  position: relative;              /* por si alguna estaba en static */
  top: var(--hero-block-offset);   /* todas se desplazan lo mismo */
}

/* ===== RESETEO DEL BLOQUE "LOS ESPERO EN..." (#fiesta) ===== */

/* Título "Los espero en..." (dejamos la separación que ya tenías) */
#fiesta .card__section-title {
  font-family: "Playfair Display", serif;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-teal-oscuro);
  margin-bottom: 0.9rem;
  text-align: center;
}

/* "Salón Jardines del Lago" – manuscrita, fina, elegante */
#fiesta .card__event-title {
  font-family: "Ms Madi", cursive;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.1;
  color: #0b6473;
  margin: 0 0 0.15rem;
  text-align: center;
}

/* 👇 DEJAMOS SOLO ESTO PARA LA DIRECCIÓN */
#fiesta .card__event-text {
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.8rem;
  margin: 0 0 0.8rem;
  color: var(--c-texto-suave);
  text-align: center;
}

/* ==== CÓDIGO DE VESTIMENTA ==== */

#dresscode .card__section-title {
  /* dejamos el estilo general de los títulos, solo afinamos un poco el aire */
  margin-bottom: 0.7rem;
}

.dresscode__style {
  font-family: "Ms Madi", cursive;   /* la cursiva que venimos usando */
  font-size: 1.6rem;                 /* tamaño protagonista */
  line-height: 1.1;
  text-align: center;
  color: #0b6473;
  margin: 0.1rem 0 0.3rem;
}

.dresscode__note {
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.8rem;                 /* un pelín más pequeña que .card__text (0.9rem) */
  line-height: 1.5;
  text-align: center;
  color: var(--c-texto);
  margin: 0 0 1rem;
}

.dresscode__illustration {
  display: flex;
  justify-content: center;
  margin: 0.9rem 0 0.2rem;         /* 🔹 menos aire arriba y abajo */
}

.dresscode__img {
  max-width: 90%;   /* si la ves muy grande, baja a 80%; si muy pequeña, sube a 95% */
  height: auto;
  display: block;
}

/* ==== FOTO INTERMEDIA: ALMA EN LA PISCINA ==== */

.card__section--photo-agua {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  border-top: none;              /* para que no aparezca una línea nueva aquí */
}

.photo-agua {
  display: flex;
  justify-content: center;
}

.photo-agua__img {
  max-width: 420px;              /* ajusta 300–340px según la veas en pantalla */
  width: 100%;
  height: auto;
  display: block;
}

/* Ajuste de espacio alrededor de la foto de Alma en la piscina */

/* 👉 menos aire encima y debajo de la foto */
.card__section--photo-agua {
  margin-top: -3.0rem;      /* antes heredaba 0.8rem */
  padding-top: 0.3rem;     
  padding-bottom: 0.3rem;
}

/* 👉 acercar el bloque "Código de vestimenta" a la foto */
#dresscode.card__section {
  margin-top: 0.2rem;      /* en vez de 0.8rem */
}

/* === AJUSTE ESPACIO ALREDEDOR DEL ICONO DE BAILE === */

/* Bloque "Código de vestimenta": un pelín menos de aire abajo */
#dresscode.card__section {
  margin-top: -2rem;    /* ya lo tenías bajito */
  padding-bottom: 0.2rem;
}

/* Icono de baile: centrado y con poco margen inferior */
#dresscode img {
  display: block;
  max-width: 260px;      /* o el ancho que estés usando */
  height: auto;
  margin: -3rem auto 0.1rem;  /* ⬆ arriba / laterales / ⬇ abajo (muy poquito) */
}

/* Bloque siguiente "Sugerencia de regalo": lo acercamos al baile */
#regalo.card__section {
  margin-top: -2rem;   /* en vez de los 0.8rem generales */
}

/* === BLOQUE REGALITOS (misma tipografía que "hay que estar cómodo para bailar") === */
#regalo .card__gift-text {
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.75rem;          /* igual que .card__text */
  line-height: 1.6;
  color: var(--c-texto-suave);
  text-align: center;
  margin: 0.3rem 0 0.6rem;    /* similar separación al resto de textos */
}

#regalo .btn {
  margin-top: 0.4rem;                /* un poco de aire entre la frase y el botón */
}

/* === BLOQUE REGALITOS === */

/* texto del bloque (misma tipografía que “hay que estar cómodo para bailar…”) */
#regalo .card__gift-text {
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.85rem;      /* un pelín más pequeño que el texto normal */
  line-height: 1.6;
  color: var(--c-texto-suave);
  text-align: center;
  margin: 0.3rem 0 0.4rem;
}

/* enlace que envuelve el sobre */
.regalo-link {
  display: flex;
  justify-content: center;
  margin: 0.2rem 0 0.4rem;  /* aire arriba y abajo del sobre */
}

/* imagen del sobre (estado inicial: apagado para BRILLO) */
.regalo-img {
  width: 90px;             /* ajusta a gusto (150–190px) */
  max-width: 80%;
  height: auto;
  display: block;
  opacity: 0;
  filter: blur(4px);
  transform: translateX(0);
}

/* cuando hace BRILLO por primera vez */
.regalo-img.is-visible {
  animation: branch-fade-in 1.2s ease-out forwards;
}

/* temblor del enlace (igual que el botón de ubicación) */
.regalo-link.is-shaking {
  animation: map-shake 0.35s ease-out;
}

/* === BLOQUE "TE ESPERO?" (RSVP) === */

/* texto, misma onda que "Tu cariño y compañía..." */
#rsvp .card__rsvp-text {
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--c-texto-suave);
  text-align: center;
  margin: 0.3rem 0 0.4rem;
}

/* enlace que envuelve el icono de WhatsApp */
.rsvp-link {
  display: flex;
  justify-content: center;
  margin: 0.2rem 0 0.4rem;
}

/* icono WhatsApp (estado inicial: apagado para BRILLO) */
.rsvp-img {
  width: 105px;              /* ajusta el tamaño si lo quieres más grande/pequeño */
  max-width: 70%;
  height: auto;
  display: block;
  opacity: 0;
  filter: blur(4px);
  transform: translateX(0);
}

/* cuando hace BRILLO por primera vez */
.rsvp-img.is-visible {
  animation: branch-fade-in 1.2s ease-out forwards;
}

/* temblor del icono (mismo efecto que mapa y sobre) */
.rsvp-link.is-shaking {
  animation: map-shake 0.35s ease-out;
}

/* AJUSTE FINAL DEL TAMAÑO EN EL ITINERARIO */
.card__section--timeline .timeline__text {
  font-size: 1.7rem;   /* 🔹 más grande */
  line-height: 1.35;   /* un pelín más de aire */
}

/* === AJUSTES SOLO PARA VISTA PC (≥ 768px) === */
@media (min-width: 768px) {

  /* 1. Recuadro amarillo: un poquito menos alto por abajo en PC */
  .card {
    padding-bottom: 0.0rem;   /* antes era ~2.2rem / 2.6rem en escritorio */
  }

  /* 2. PRIMERA IMAGEN DE ALMA (la de arriba del todo) */
  .card__hero-photo {
    width: auto;              /* anulamos el width calc(100% + 3.2rem) en PC */
    max-width: 590px;         /* ⇦ agranda/achica la imagen desde aquí */
    left: 0;                  /* centramos con margin auto, no con left */
    margin: -1.8rem auto 1.4rem;
  }

  /* 3. SEGUNDA IMAGEN DE ALMA (la que está saltando) */
  .card__hero-photo--salto {
    max-width: 490px;         /* ⇦ y aquí controlas el tamaño de la de salto */
    width: 100%;
    margin: -1.2rem auto 2rem;
    left: 0;                  /* por si heredaba algún left raro */
  }
}