/* ==========================================================================
   TALAVERA POBLANA WEDDING INVITATION - DESIGN SYSTEM & STYLES
   ========================================================================== */

/* --- Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Great+Vibes&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  /* Color Palette */
  --c-cobalt-dark: #1B2559;
  --c-cobalt: #232B63;
  --c-blue-mid: #3A4A8C;
  --c-terracotta: #9E5B3C;
  --c-terracotta-hover: #82452B;
  --c-papel-pink: #E4007C;
  --c-marigold-orange: #FF8200;
  --c-talavera-blue: #071BA9;
  --c-agave-green: #00563B;
  --c-bg-white: #FFFFFF;
  --c-bg-smoke: #F7F6F3;
  --c-text-graphite: #4A4A4A;
  --c-text-muted: #6B7280;
  
  /* Fonts */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-script: 'Great Vibes', cursive;
  --font-sans: 'Montserrat', sans-serif;
  
  /* Transitions & Shadows */
  --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-card: 0 10px 30px rgba(27, 37, 89, 0.08);
  --shadow-talavera: 0 15px 40px rgba(35, 43, 99, 0.14);
  --shadow-terracotta: 0 6px 20px rgba(158, 91, 60, 0.25);

  /* Verde para todo lo accionable, azul talavera para la música.
     Las variables de terracota se conservan por si algún día se retoma. */
  --c-accion: #00563B;
  --c-accion-hover: #003D2A;
  --shadow-accion: 0 6px 20px rgba(0, 86, 59, 0.28);
  --c-player: #071BA9;
  --c-player-hover: #050F73;
  --shadow-player: 0 6px 20px rgba(7, 27, 169, 0.26);

  /* Margen lateral compartido por las secciones y tarjetas. */
  --section-gutter: 16px;
}

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

/* El atributo hidden lo pone el navegador con display:none, pero cualquier
   regla de display del autor le gana: .btn-terracotta es inline-flex y se
   veía aunque estuviera oculto. Esto lo deja valer siempre. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: #F1F0ED;
  font-family: var(--font-sans);
  color: var(--c-cobalt-dark);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background:
    radial-gradient(circle at top center, #FFFFFF 0%, #F7F6F3 46%, #ECEEF3 100%);
  overflow-x: hidden;
}

body.invitation-locked {
  height: 100vh;
  overflow: hidden;
}

/* Initial interactive envelope */
.opening-cover {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 94px 22px 84px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.98) 0%, rgba(248, 245, 238, 0.98) 48%, rgba(235, 232, 225, 0.99) 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.72s ease, visibility 0.72s ease, filter 0.72s ease, transform 0.72s ease;
}

.opening-cover::before,
.opening-cover::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(480px, 100%);
  height: 76px;
  transform: translateX(-50%);
  background: url("assets/anillos.png") center / 100% auto no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.opening-cover::before {
  top: 14px;
}

.opening-cover::after {
  bottom: 14px;
  transform: translateX(-50%) rotate(180deg);
}

.opening-cover-inner {
  position: relative;
  z-index: 2;
  width: min(100%, 420px);
  text-align: center;
}

.opening-kicker {
  margin-bottom: 28px;
  font-family: var(--font-serif);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--c-talavera-blue);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.opening-envelope-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  perspective: 1100px;
  -webkit-tap-highlight-color: transparent;
}

.opening-envelope-button:focus-visible {
  outline: 3px solid rgba(7, 27, 169, 0.38);
  outline-offset: 12px;
  border-radius: 18px;
}

.opening-envelope {
  position: relative;
  display: block;
  width: min(330px, 82vw);
  height: 220px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 18px 18px rgba(27, 37, 89, 0.18));
  transition: transform 0.4s ease;
}

.opening-envelope-button:hover .opening-envelope {
  transform: translateY(-4px);
}

.envelope-back {
  position: absolute;
  inset: 16px 0 0;
  z-index: 0;
  border: 1px solid rgba(7, 27, 169, 0.18);
  border-radius: 7px;
  background: #EAE1D5;
}

.envelope-card {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 23px;
  z-index: 1;
  height: 162px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(7, 27, 169, 0.16);
  border-radius: 5px;
  background:
    linear-gradient(rgba(255, 254, 251, 0.94), rgba(255, 254, 251, 0.94)),
    url("assets/images/talavera-source-flower.png") center / 115px 115px no-repeat;
  box-shadow: 0 8px 18px rgba(27, 37, 89, 0.12);
  transform: translateY(18px);
  transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.38s;
}

.envelope-card-monogram {
  font-family: var(--font-script);
  font-size: 3.25rem;
  line-height: 1;
  color: var(--c-talavera-blue);
}

.envelope-card-monogram b {
  padding: 0 4px;
  font-size: 0.72em;
  font-weight: 400;
}

.envelope-card-date {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--c-cobalt-dark);
}

.envelope-pocket {
  position: absolute;
  inset: 16px 0 0;
  z-index: 3;
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(252, 248, 241, 0.98), rgba(228, 216, 201, 0.98));
  clip-path: polygon(0 0, 50% 45%, 100% 0, 100% 100%, 0 100%);
}

.envelope-flap {
  position: absolute;
  top: 16px;
  left: 0;
  z-index: 4;
  width: 100%;
  height: 130px;
  border-radius: 7px 7px 0 0;
  background:
    linear-gradient(165deg, rgba(251, 247, 240, 0.99), rgba(229, 219, 206, 0.99));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  backface-visibility: hidden;
  transition: transform 0.68s cubic-bezier(0.65, 0, 0.35, 1), z-index 0s linear 0.34s;
}

.envelope-seal {
  position: absolute;
  top: 105px;
  left: 50%;
  z-index: 5;
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 3px double rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: var(--c-papel-pink);
  box-shadow: 0 5px 12px rgba(228, 0, 124, 0.24);
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: #FFFFFF;
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.envelope-seal span {
  font-family: var(--font-script);
  font-size: 1rem;
  font-weight: 400;
}

.opening-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--c-talavera-blue);
  box-shadow: 0 7px 18px rgba(7, 27, 169, 0.22);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #FFFFFF;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.25s ease;
}

.opening-envelope-button:hover .opening-cta,
.opening-envelope-button:active .opening-cta {
  background: #15376D;
  transform: scale(1.02);
}

.opening-cover.is-opening .envelope-flap {
  z-index: 0;
  transform: rotateX(180deg);
}

.opening-cover.is-opening .envelope-card {
  transform: translateY(-96px);
}

.opening-cover.is-opening .envelope-seal {
  opacity: 0;
  transform: translateX(-50%) scale(0.72);
}

.opening-cover.is-opening .opening-envelope {
  animation: envelope-open-lift 1.1s ease both;
}

.opening-cover.is-opening .opening-kicker,
.opening-cover.is-opening .opening-cta {
  opacity: 0;
  transform: translateY(7px);
}

.opening-cover.is-open {
  opacity: 0;
  visibility: hidden;
  filter: blur(3px);
  transform: scale(1.025);
  pointer-events: none;
}

body.invitation-revealed .app-viewport {
  animation: invitation-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes envelope-open-lift {
  0%, 35% { transform: translateY(0) scale(1); }
  72% { transform: translateY(18px) scale(1.035); }
  100% { transform: translateY(8px) scale(1.02); }
}

@keyframes invitation-reveal {
  from { opacity: 0.75; transform: scale(0.985); filter: blur(2px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* Outer Desktop Frame */
.app-viewport {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  background-color: var(--c-bg-white);
  box-shadow: 0 0 42px rgba(27, 37, 89, 0.13), 0 16px 70px rgba(27, 37, 89, 0.09);
  position: relative;
  overflow: hidden;
}

/* Utility Classes */
.serif-smallcaps {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
}

.script-text {
  font-family: var(--font-script);
  color: var(--c-text-graphite);
  font-weight: 400;
  line-height: 1.3;
}

.btn-terracotta {
  background-color: var(--c-accion);
  color: #FFFFFF;
  border: none;
  border-radius: 9999px;
  padding: 12px 28px;
  font-family: var(--font-serif);
  font-variant: small-caps;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-accion);
  transition: var(--transition-smooth);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.btn-terracotta:hover, .btn-terracotta:active {
  background-color: var(--c-accion-hover);
  transform: scale(0.98);
  box-shadow: 0 4px 14px rgba(0, 86, 59, 0.38);
}

/* ==========================================================================
   1. HERO SECTION
   ========================================================================== */
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 580px;
  max-height: 720px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.hero-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 1;
  filter: brightness(0.97) contrast(1.03);
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(27, 37, 89, 0.06) 0%, rgba(27, 37, 89, 0.2) 65%, rgba(27, 37, 89, 0.58) 100%);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 20px 82px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Monogram */
.hero-monogram {
  width: min(88vw, 350px);
  min-height: 112px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  padding: 2px 22px 10px;
  background: radial-gradient(ellipse at center, rgba(10, 18, 40, 0.3) 0%, rgba(10, 18, 40, 0) 72%);
}

.hero-monogram::before,
.hero-monogram::after {
  content: "";
  width: 38px;
  height: 1px;
  flex: 0 1 38px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.92));
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.hero-monogram::after {
  transform: rotate(180deg);
}

.monogram-letter {
  position: static;
  font-family: var(--font-script);
  font-size: clamp(4.7rem, 18vw, 5.8rem);
  font-weight: 400;
  color: #FFFFFF;
  line-height: 0.9;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
}

.monogram-ampersand {
  position: static;
  font-family: var(--font-script);
  font-size: 3.1rem;
  color: #FFFFFF;
  line-height: 1;
  transform: translateY(4px);
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.55);
}

.hero-names {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: 0.22em;
  font-size: clamp(1.4rem, 4vw, 1.7rem);
  color: #FFFFFF;
  margin-top: 6px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.hero-date-subtitle {
  font-family: var(--font-serif);
  letter-spacing: 0.25em;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 4px;
}

/* Organic Curve Divider */
.hero-organic-curve {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 48px;
  z-index: 4;
  pointer-events: none;
}

/* ==========================================================================
   TALAVERA TILE FRAME CONTAINER
   ========================================================================== */
.talavera-card-wrapper {
  padding: 38px var(--section-gutter) 46px;
  position: relative;
  overflow: hidden;
  background-color: var(--c-bg-smoke);
  background-image:
    linear-gradient(rgba(247, 246, 243, 0.94), rgba(247, 246, 243, 0.94)),
    url("assets/images/talavera-source-corner-branch.png"),
    url("assets/images/talavera-source-flower.png");
  background-repeat: no-repeat;
  background-size: auto, 260px auto, 210px 210px;
  background-position: center, -105px 150px, calc(100% + 80px) calc(100% - 180px);
}

.talavera-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: rgba(255, 254, 251, 0.98);
  border: 1px solid rgba(27, 37, 89, 0.14);
  border-radius: 22px 22px 12px 12px;
  padding: 102px 28px 88px;
  box-shadow: 0 22px 55px rgba(27, 37, 89, 0.15), 0 2px 10px rgba(27, 37, 89, 0.08);
}

.talavera-frame::before,
.talavera-frame::after {
  content: "";
  position: absolute;
  left: 0;
  z-index: 0;
  width: 100%;
  pointer-events: none;
}

.talavera-frame::before {
  top: 0;
  height: 82px;
  background: #fffefb url("assets/anillos.png") center / 100% auto no-repeat;
}

.talavera-frame::after {
  bottom: 0;
  height: 82px;
  background: #fffefb url("assets/anillos.png") center / 100% auto no-repeat;
  transform: rotate(180deg);
}

.talavera-frame > * {
  position: relative;
  z-index: 2;
}

.talavera-frame-header {
  display: none;
}

.talavera-frame-header svg {
  display: none;
}

.talavera-frame-header::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 136px;
  height: 1px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(27, 37, 89, 0.75) 18%, rgba(27, 37, 89, 0.75) 82%, transparent);
}

.talavera-frame-header::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fffefb url("assets/images/talavera-source-heart-cross.png") center / 48px 48px no-repeat;
}

/* Horizontal Talavera ribbons that travel with vertical scroll */
.talavera-scroll-ribbon {
  position: relative;
  z-index: 8;
  width: 100%;
  height: 86px;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid rgba(27, 95, 174, 0.1);
  border-bottom: 1px solid rgba(27, 95, 174, 0.1);
  box-shadow: 0 8px 24px rgba(27, 37, 89, 0.04);
  contain: paint;
}

.talavera-scroll-ribbon::before,
.talavera-scroll-ribbon::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 34px;
  pointer-events: none;
}

.talavera-scroll-ribbon::before {
  left: 0;
  background: linear-gradient(90deg, #fff 10%, transparent);
}

.talavera-scroll-ribbon::after {
  right: 0;
  background: linear-gradient(-90deg, #fff 10%, transparent);
}

.talavera-scroll-ribbon-track {
  position: absolute;
  top: 9px;
  left: -190px;
  width: calc(100% + 380px);
  height: 68px;
  background-image: url("assets/images/talavera-source-ribbon.png");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 746px 68px;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* ==========================================================================
   2. MAIN WEDDING CARD SECTION
   ========================================================================== */
.card-content-center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.couple-title-name {
  font-family: 'Great Vibes', cursive;
  font-variant: normal;
  font-size: clamp(3.7rem, 10.8vw, 4.55rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--c-cobalt-dark);
  line-height: 1.1;
  position: relative;
}

.card-content-center > [data-groom-name] {
  align-self: flex-start;
  margin-left: clamp(20px, 8vw, 38px);
}

.card-content-center > [data-bride-name] {
  align-self: flex-end;
  margin-right: clamp(20px, 8vw, 38px);
}

.card-content-center > [data-groom-name]::after,
.card-content-center > [data-bride-name]::before {
  content: "";
  position: absolute;
  width: clamp(44px, 12vw, 56px);
  aspect-ratio: 163 / 170;
  background: url("assets/images/bugambilia-esquina-3-frente.svg") center / contain no-repeat;
  filter: drop-shadow(0 4px 7px rgba(228, 0, 124, 0.16));
  pointer-events: none;
}

.card-content-center > [data-groom-name]::after {
  right: -42px;
  top: -8px;
  transform: rotate(16deg);
}

.card-content-center > [data-bride-name]::before {
  left: -46px;
  bottom: -8px;
  transform: rotate(-18deg) scale(0.92);
}

.and-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 6px 0;
  width: 80%;
}

.and-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-blue-mid), transparent);
}

.and-script {
  font-family: var(--font-script);
  font-size: 2.2rem;
  color: var(--c-text-graphite);
}

.wedding-date-highlight {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: 0.22em;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--c-cobalt-dark);
  margin-top: 14px;
  margin-bottom: 22px;
}

/* Music Player */
.music-player-box {
  background: #F4F3F0;
  border-radius: 16px;
  padding: 16px 14px;
  width: 100%;
  margin: 18px 0 24px 0;
  border: 1px solid #E6E4DE;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

.music-title-label {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--c-cobalt-dark);
  margin-bottom: 12px;
  display: block;
}

.music-title-label strong {
  color: var(--c-player);
  font-weight: 700;
}

.player-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}

.player-btn {
  background: none;
  border: none;
  color: var(--c-player);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.player-btn:hover {
  transform: scale(1.1);
  color: var(--c-player-hover);
}

.player-btn-play {
  width: 48px;
  height: 48px;
  background-color: var(--c-player);
  color: #FFFFFF;
  border-radius: 50%;
  box-shadow: var(--shadow-player);
}

.player-btn-play:hover {
  background-color: var(--c-player-hover);
  color: #FFFFFF;
  transform: scale(1.06);
}

.audio-progress-bar {
  width: 100%;
  height: 3px;
  background-color: #DDDBC0;
  border-radius: 2px;
  margin-top: 14px;
  overflow: hidden;
  position: relative;
}

.audio-progress-fill {
  width: 0%;
  height: 100%;
  background-color: var(--c-player);
  transition: width 0.2s linear;
}

.autoplay-hint {
  display: block;
  min-height: 1.2em;
  margin-top: 9px;
  font-family: var(--font-sans);
  font-size: 0.67rem;
  line-height: 1.2;
  color: var(--c-player);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.music-player-box.awaiting-interaction .autoplay-hint {
  opacity: 1;
}

/* Countdown */
.countdown-container {
  margin: 24px 0;
  width: 100%;
  position: relative;
  isolation: isolate;
}

.countdown-container::before,
.countdown-container::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 33px;
  width: 48px;
  height: 116px;
  background: url("assets/images/talavera-source-slender-branch.png") center / contain no-repeat;
  opacity: 0.72;
  pointer-events: none;
}

.countdown-container::before {
  left: -9px;
  transform: scaleX(-1);
}

.countdown-container::after {
  right: -9px;
}

.countdown-container > * {
  position: relative;
  z-index: 1;
}

.countdown-label {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: 0.2em;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-cobalt-dark);
  margin-bottom: 10px;
  display: block;
}

.countdown-digits {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  font-weight: 700;
  color: var(--c-cobalt-dark);
  line-height: 1;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
}

.countdown-number {
  background: var(--c-bg-smoke);
  padding: 8px 10px;
  border-radius: 8px;
  width: 100%;
  text-align: center;
  border: 1px solid #E2DFD7;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.countdown-sublabels {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  color: var(--c-blue-mid);
  font-weight: 600;
}

.countdown-sublabels span {
  width: 52px;
  text-align: center;
}

.invitation-quote {
  font-size: 1.4rem;
  margin: 20px 0;
  line-height: 1.4;
  color: var(--c-text-graphite);
  padding: 0 10px;
}

.blessing-header {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: 0.16em;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-cobalt-dark);
  margin-top: 14px;
  margin-bottom: 16px;
}

.family-block {
  margin-bottom: 18px;
}

.family-title {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: 0.15em;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--c-talavera-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 7px;
  padding: 5px 13px 4px;
  border: 1px solid rgba(7, 27, 169, 0.16);
  border-radius: 999px;
  background: rgba(7, 27, 169, 0.055);
}

.family-title::before,
.family-title::after {
  content: "✦";
  color: var(--c-talavera-blue);
  font-size: 0.55rem;
  line-height: 1;
  opacity: 0.72;
}

.family-names {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: var(--c-cobalt-dark);
  line-height: 1.45;
}

.honor-invite-text {
  margin-top: 18px;
}

.honor-line-1 {
  font-size: 1.35rem;
  color: var(--c-text-graphite);
}

.honor-line-2 {
  font-size: 2.3rem;
  color: var(--c-cobalt-dark);
  margin-top: -4px;
}

/* ==========================================================================
   3 & 4. CEREMONIA & RECEPCIÓN SECTIONS (Torn Paper Edges)
   ========================================================================== */
.event-section {
  position: relative;
  background-color: var(--c-bg-smoke);
  padding: 50px 0;
  margin: 10px 0;
}

.torn-paper-wrapper {
  position: relative;
  width: 100%;
  overflow: visible;
  padding: 8px 0;
}

.event-photo {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 9px rgba(27, 37, 89, 0.14));
}

.event-card-body {
  text-align: center;
  padding: 30px var(--section-gutter) 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.combined-event-section {
  padding-top: 0;
  padding-bottom: 38px;
  isolation: isolate;
  overflow: hidden;
}

/* Bugambilias de fondo: quedan detrás del contenido y nunca sobre la foto. */
.combined-event-section::before,
.combined-event-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: clamp(150px, 42vw, 205px);
  aspect-ratio: 163 / 170;
  background-image:
    url("assets/images/bugambilia-esquina-3-atras.svg"),
    url("assets/images/bugambilia-esquina-3-frente.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.34;
  filter: saturate(0.88) drop-shadow(0 4px 10px rgba(209, 121, 156, 0.08));
  pointer-events: none;
}

.combined-event-section::before {
  top: 39%;
  left: -94px;
  transform: rotate(-10deg);
}

.combined-event-section::after {
  right: -96px;
  bottom: -8px;
  transform: scaleX(-1) rotate(-10deg);
}

.combined-event-section .event-card-body {
  max-width: 430px;
  margin-right: auto;
  margin-left: auto;
}

.event-card-reception {
  position: relative;
  padding-top: 25px;
}

.event-card-reception::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 74px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(7, 27, 169, 0.34), transparent);
}

.event-icon {
  margin-bottom: 12px;
  color: var(--c-blue-mid);
}

.event-heading {
  color: var(--c-blue-mid);
  font-size: 0.92rem;
  margin-bottom: 13px;
}

.event-description {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--c-cobalt-dark);
  margin-bottom: 12px;
}

.event-description strong {
  font-weight: 700;
}

.event-time {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--c-cobalt-dark);
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}

.adults-only-note {
  width: min(100%, 350px);
  margin: 2px auto 8px;
  padding: 15px 20px 16px;
  border: 1px solid rgba(228, 0, 124, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 22px rgba(27, 37, 89, 0.06);
  color: var(--c-cobalt-dark);
  font-family: var(--font-serif);
  font-size: 0.9rem;
  line-height: 1.55;
}

.adults-only-title {
  margin-bottom: 7px;
  color: var(--c-pink-text);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* ========================================================================== 
   5. ITINERARIO SECTION
   ========================================================================== */
.itinerary-section {
  padding: 50px var(--section-gutter);
  background-color: var(--c-bg-white);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.965), rgba(255, 255, 255, 0.965)),
    url("assets/images/talavera-source-flower.png"),
    url("assets/images/talavera-source-cluster.png");
  background-repeat: no-repeat;
  background-size: auto, 260px 260px, 210px 210px;
  background-position: center, -115px 72px, calc(100% + 95px) calc(100% - 55px);
  text-align: center;
}

.section-title-swash {
  font-family: var(--font-serif);
  font-variant: small-caps;
  font-size: 1.9rem;
  letter-spacing: 0.25em;
  font-weight: 700;
  color: var(--c-cobalt-dark);
  margin-bottom: 40px;
  position: relative;
  display: inline-block;
}

.section-title-swash::first-letter {
  font-family: var(--font-script);
  font-size: 2.8rem;
  font-weight: normal;
  text-transform: none;
  color: var(--c-blue-mid);
  margin-right: -4px;
}

.section-title-swash::after {
  content: "";
  display: block;
  width: 74px;
  height: 7px;
  margin: 12px auto 0;
  background:
    radial-gradient(circle at 50% 50%, var(--c-accion) 0 2px, transparent 2.5px),
    linear-gradient(90deg, transparent, var(--c-blue-mid), transparent) center / 100% 1px no-repeat;
}

.timeline-container {
  position: relative;
  max-width: 400px;
  margin: 0 auto;
  padding: 10px 0;
}

.timeline-center-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--c-talavera-blue) 10%, var(--c-papel-pink) 38%, var(--c-marigold-orange) 64%, var(--c-agave-green) 90%, transparent 100%);
  transform: translateX(-50%);
}

.timeline-item {
  --timeline-accent: var(--c-talavera-blue);
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 34px;
  width: 100%;
}

.timeline-accent-blue { --timeline-accent: var(--c-talavera-blue); }
.timeline-accent-pink { --timeline-accent: var(--c-papel-pink); }
.timeline-accent-orange { --timeline-accent: var(--c-marigold-orange); }
.timeline-accent-green { --timeline-accent: var(--c-agave-green); }

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background-color: var(--timeline-accent);
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--timeline-accent);
  z-index: 3;
}

.timeline-box {
  width: 44%;
  padding: 6px 12px;
}

.timeline-item.left .timeline-time {
  text-align: right;
}

.timeline-item.left .timeline-content {
  text-align: left;
  margin-left: auto;
}

.timeline-item.right .timeline-time {
  text-align: left;
  margin-left: auto;
}

.timeline-item.right .timeline-content {
  text-align: right;
}

.timeline-time-text {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--timeline-accent);
}

.timeline-content {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--timeline-accent);
}

.timeline-content svg [stroke] {
  stroke: currentColor;
}

.timeline-content svg [fill]:not([fill="none"]) {
  fill: currentColor;
}

.timeline-item.left .timeline-content {
  flex-direction: row;
}

.timeline-item.right .timeline-content {
  flex-direction: row-reverse;
}

.timeline-label {
  font-family: var(--font-serif);
  font-variant: small-caps;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--timeline-accent);
}

.itinerary-location {
  margin-top: 38px;
  background-color: var(--c-agave-green);
  box-shadow: 0 7px 22px rgba(0, 86, 59, 0.24);
}

.itinerary-location:hover,
.itinerary-location:active {
  background-color: #003F2C;
  box-shadow: 0 5px 16px rgba(0, 86, 59, 0.3);
}

/* ==========================================================================
   6 & 7. INTERACTIVE TALAVERA PLATES (DRESS CODE & GIFT)
   ========================================================================== */
.plate-section {
  padding: 40px var(--section-gutter);
  background-color: var(--c-bg-smoke);
  background-image:
    linear-gradient(rgba(247, 246, 243, 0.95), rgba(247, 246, 243, 0.95)),
    url("assets/images/talavera-source-corner-branch.png"),
    url("assets/images/talavera-source-flower.png");
  background-repeat: no-repeat;
  background-size: auto, 215px auto, 175px 175px;
  background-position: center, calc(100% + 96px) -35px, -78px calc(100% + 42px);
  text-align: center;
}

.dress-code-section {
  padding-bottom: 54px;
}

.dress-code-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 448px;
  margin: 24px auto 0;
  padding: 18px var(--section-gutter) 25px;
  border: 1px solid rgba(7, 27, 169, 0.14);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 34px rgba(27, 37, 89, 0.09);
}

.dress-code-card::before,
.dress-code-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 132px;
  height: 132px;
  background: url("assets/images/talavera-source-flower.png") center / contain no-repeat;
  opacity: 0.055;
  pointer-events: none;
}

.dress-code-card::before {
  top: -52px;
  left: -48px;
}

.dress-code-card::after {
  right: -48px;
  bottom: -52px;
  transform: rotate(180deg);
}

.dress-code-formality {
  font-family: var(--font-serif);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-talavera-blue);
}

.dress-code-daytime {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--c-papel-pink);
}

.dress-code-daytime span {
  color: var(--c-marigold-orange);
}

/* ── Las dos vestimentas ──
   En el teléfono van una debajo de otra, con la ilustración al lado del
   texto: así la figura conserva un ancho aprovechable. A partir de 560 px
   se ponen lado a lado, con la ilustración arriba. */
.dress-code-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 24px;
}

.dress-code-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 14px 16px;
  border-radius: 15px;
  border-top: 3px solid currentColor;
  text-align: left;
}

/* La ilustración manda por ALTURA, no por ancho: las dos figuras no tienen
   la misma proporción y así quedan paradas sobre la misma línea de piso. */
.dress-figura {
  display: block;
  align-self: end;
  width: auto;
  height: clamp(196px, 54vw, 268px);
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(27, 37, 89, 0.13));
}

.dress-code-option h3 {
  margin-bottom: 9px;
  font-family: var(--font-script);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
}

.dress-code-option p {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--c-text-graphite);
}

@media (min-width: 560px) {
  .dress-code-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dress-code-option {
    grid-template-columns: 1fr;
    justify-items: center;
    /* start, no center: las dos tarjetas miden lo mismo pero sus textos no,
       y al repartir el sobrante las figuras quedaban a distinta altura. */
    align-content: start;
    text-align: center;
    gap: 10px;
  }
  .dress-code-texto { width: 100%; }
  .dress-list li { text-align: left; }
}

.dress-code-him {
  color: var(--c-talavera-blue);
  background: rgba(7, 27, 169, 0.045);
}

.dress-code-her {
  color: var(--c-papel-pink);
  background: rgba(228, 0, 124, 0.04);
}

.dress-code-note {
  margin-top: 20px;
  padding: 16px 12px 0;
  border-top: 1px dashed rgba(7, 27, 169, 0.25);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--c-pink-text);
}

.dress-code-note span {
  color: var(--c-marigold-orange);
}

.plate-interactive-container {
  perspective: 1000px;
  width: 240px;
  height: 240px;
  margin: 25px auto 15px auto;
  cursor: pointer;
  position: relative;
}

.plate-rotator {
  display: block;
  width: 100%;
  height: 100%;
  animation: slowPlateSpin 45s linear infinite;
  transition: animation-play-state 0.3s;
}

.plate-interactive-container:hover .plate-rotator {
  animation-play-state: paused;
}

.plate-flipper {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.plate-interactive-container.flipped .plate-flipper {
  transform: rotateY(180deg);
}

.plate-face {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  backface-visibility: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.88), rgba(247, 246, 243, 0.9)),
    url("assets/images/talavera-source-tile.png") center / cover no-repeat;
  box-shadow: inset 0 0 15px rgba(27, 37, 89, 0.12), 0 10px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid #E5E2D8;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.plate-interactive-container {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.plate-interactive-container:focus-visible {
  outline: 3px solid rgba(0, 86, 59, 0.55);
  outline-offset: 7px;
  border-radius: 50%;
}

.gift-section {
  background-color: var(--c-bg-white);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.96)),
    url("assets/images/talavera-source-flower.png"),
    url("assets/images/talavera-source-slender-branch.png");
  background-size: auto, 190px 190px, 210px auto;
  background-position: center, calc(100% + 75px) 50px, -92px calc(100% + 65px);
  padding-top: 50px;
}

.plate-face.plate-back {
  transform: rotateY(180deg);
  background:
    linear-gradient(rgba(253, 252, 250, 0.9), rgba(239, 236, 228, 0.9)),
    url("assets/images/talavera-source-tile.png") center / cover no-repeat;
}

.plate-svg-garland {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.plate-center-icon {
  z-index: 2;
  margin-bottom: 4px;
}

.plate-caption {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-cobalt-dark);
  z-index: 2;
  margin-top: 4px;
}

.plate-back-details {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: var(--c-cobalt-dark);
  z-index: 2;
  line-height: 1.4;
  padding: 0 10px;
}

.plate-hint-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--c-accion);
  font-weight: 500;
  margin-top: 6px;
  animation: pulseHint 2s infinite;
}

@keyframes slowPlateSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulseHint {
  0%, 100% { opacity: 0.7; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

/* ==========================================================================
   8. CARTA DE LOS NOVIOS SECTION
   ========================================================================== */
.letter-section {
  padding: 54px var(--section-gutter);
  background-color: var(--c-bg-smoke);
  background-image:
    linear-gradient(rgba(247, 246, 243, 0.94), rgba(247, 246, 243, 0.94)),
    url("assets/images/talavera-source-bird.png");
  background-repeat: no-repeat;
  background-size: auto, 250px auto;
  background-position: center, calc(100% + 105px) center;
}

.letter-section .talavera-frame {
  padding: 46px 28px;
  border-color: rgba(27, 37, 89, 0.09);
  border-radius: 20px;
  box-shadow: 0 13px 34px rgba(27, 37, 89, 0.08);
}

.letter-section .talavera-frame::before,
.letter-section .talavera-frame::after {
  display: none;
}

.letter-text {
  font-size: 1.45rem;
  line-height: 1.55;
  color: var(--c-text-graphite);
  padding: 10px 14px;
  text-align: center;
}

/* ==========================================================================
   9. RSVP & CLOSING SECTION
   ========================================================================== */
.rsvp-section {
  padding: 55px var(--section-gutter) 40px;
  background-color: var(--c-bg-white);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.955), rgba(255, 255, 255, 0.955)),
    url("assets/images/talavera-source-flower.png"),
    url("assets/images/talavera-source-slender-branch.png");
  background-repeat: no-repeat;
  background-size: auto, 230px 230px, 230px auto;
  background-position: center, -105px -85px, calc(100% + 110px) calc(100% + 50px);
  text-align: center;
}

.rsvp-text-block {
  font-family: var(--font-serif);
  font-variant: small-caps;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  line-height: 1.7;
  color: var(--c-cobalt-dark);
  font-weight: 600;
  margin-bottom: 26px;
}

.rsvp-closing-script {
  font-size: 2.4rem;
  color: var(--c-cobalt-dark);
  margin-top: 30px;
  margin-bottom: 40px;
}

.footer-brand {
  font-family: 'Great Vibes', cursive;
  font-variant: normal;
  font-size: 1.55rem;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
  border-top: 1px solid #EEEEEE;
  padding-top: 20px;
}

/* ==========================================================================
   RSVP MODAL INTERACTION
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 20, 40, 0.75);
  backdrop-filter: blur(5px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-smooth);
  padding: 20px;
}

.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  background-color: #FFFFFF;
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  padding: 28px 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  transform: translateY(20px) scale(0.95);
  transition: var(--transition-smooth);
  position: relative;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.modal-backdrop.active .modal-card {
  transform: translateY(0) scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--c-text-muted);
  cursor: pointer;
}

.modal-title {
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: 0.15em;
  font-size: 1.3rem;
  color: var(--c-cobalt-dark);
  text-align: center;
  margin-bottom: 18px;
}

.form-group {
  margin-bottom: 16px;
  text-align: left;
}

.form-label {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  color: var(--c-cobalt-dark);
  margin-bottom: 6px;
  font-weight: 600;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--c-cobalt-dark);
  outline: none;
  transition: var(--transition-smooth);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--c-accion);
  box-shadow: 0 0 0 3px rgba(0, 86, 59, 0.15);
}

.modal-submit {
  width: 100%;
  margin-top: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(0, 86, 59, 0.45);
  outline-offset: 3px;
}

/* ==========================================================================
   SCROLL STAGGER ANIMATIONS
   ========================================================================== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (max-width: 380px) {
  .talavera-card-wrapper,
  .letter-section {
    padding-left: var(--section-gutter);
    padding-right: var(--section-gutter);
  }

  .talavera-frame {
    padding-left: 12px;
    padding-right: 12px;
  }

  .countdown-digits {
    gap: 5px;
    font-size: 1.55rem;
  }

  .countdown-container::before,
  .countdown-container::after {
    width: 32px;
    height: 88px;
    top: 43px;
    opacity: 0.48;
  }

  .countdown-unit,
  .countdown-sublabels span {
    min-width: 45px;
    width: 45px;
  }

  .countdown-number {
    padding-left: 5px;
    padding-right: 5px;
  }

  .countdown-sublabels {
    gap: 8px;
    font-size: 0.58rem;
  }

  .timeline-box {
    padding-left: 6px;
    padding-right: 6px;
  }

  .timeline-label {
    font-size: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }

  .talavera-scroll-ribbon-track {
    transform: none !important;
    will-change: auto;
  }
}

/* ==========================================================================
   AJUSTES 2026-09 · ruta, regalos y dress code
   La paleta del dress code es también la fuente de color del resto de la
   invitación: son los tonos que los novios pidieron ver a sus invitados.
   ========================================================================== */
:root {
  --c-turquesa:   #2EB8A6;
  --c-azul-rey:   #1E5FC8;
  --c-esmeralda:  #0E7A52;
  --c-amarillo:   #F2C230;
  --c-terracota:  #E2743B;
  --c-coral:      #F4736A;
  --c-orquidea:   #B07FC7;
  --c-fucsia:     #D9317A;
  --c-verde-hoja: #8FBF3F;
}

/* ── Cómo llegar ── */
.route-section {
  padding: 46px var(--section-gutter) 54px;
  background-color: var(--c-bg-white);
  text-align: center;
}
.route-intro {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--c-text-graphite);
  max-width: 46ch;
  margin: 0 auto 22px;
}
.route-intro strong { color: var(--c-cobalt-dark); font-weight: 600; }
/* Mapa interactivo de la ubicación. */
.location-map {
  margin: 0 auto 22px;
  width: 100%;
  max-width: 448px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(7, 27, 169, 0.12);
  border-radius: 16px;
  background: var(--c-bg-smoke);
  box-shadow: var(--shadow-card);
}
.location-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Los dos botones: uno abre Maps, el otro el mapa de la ruta en grande. */
.route-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 11px;
  margin-bottom: 18px;
}
.route-btn { font-size: 0.86rem; padding: 12px 22px; }

/* Variante de contorno: el segundo botón no debe competir con el primero. */
.btn-contorno {
  background-color: transparent;
  color: var(--c-accion);
  border: 1.5px solid var(--c-accion);
  box-shadow: none;
}
.btn-contorno:hover,
.btn-contorno:active {
  background-color: var(--c-accion);
  color: #FFFFFF;
  box-shadow: var(--shadow-accion);
}

/* ── Mapa a pantalla completa ── */
/* dvh además de vh: en iOS la barra del navegador se come parte del 100vh
   y el botón de Maps quedaba fuera de la pantalla. */
.route-backdrop { padding: 16px; height: 100vh; height: 100dvh; }
.route-modal-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  padding: 26px 18px 20px;
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  transform: translateY(20px) scale(0.96);
  transition: var(--transition-smooth);
  text-align: center;
}
.modal-backdrop.active .route-modal-card { transform: none; }
.route-modal-title {
  flex: 0 0 auto;
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-variant: small-caps;
  font-size: 1.32rem;
  letter-spacing: 0.12em;
  color: var(--c-cobalt-dark);
}
/* El cuerpo es lo único que se desplaza: el título y el botón se quedan
   fijos aunque el mapa sea muy alto. */
.route-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  background: var(--c-bg-smoke);
}
.route-modal-body img { display: block; width: 100%; height: auto; border-radius: 12px; cursor: zoom-in; }
.route-modal-pie {
  flex: 0 0 auto;
  margin: 11px 0 14px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: var(--c-text-muted);
}
.route-modal-maps { flex: 0 0 auto; align-self: center; font-size: 0.84rem; padding: 11px 24px; }

/* ── Sugerencia de regalo ── */
.gift-section {
  padding: 46px var(--section-gutter) 54px;
  background-color: var(--c-bg-smoke);
  text-align: center;
}
.gift-intro {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--c-text-graphite);
  max-width: 36ch;
  margin: 0 auto 26px;
}
.gift-grid {
  display: grid;
  gap: 16px;
  max-width: 448px;
  margin: 0 auto;
}
.gift-card {
  background: var(--c-bg-white);
  border-radius: 16px;
  padding: 26px 20px 24px;
  box-shadow: var(--shadow-card);
  border-top: 4px solid var(--gift-accent, var(--c-talavera-blue));
}
.gift-card-mesa   { --gift-accent: var(--c-fucsia); }
.gift-card-cuenta { --gift-accent: var(--c-talavera-blue); }
.gift-icon { display: block; margin: 0 auto 12px; color: var(--gift-accent); }
.gift-card-title {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--c-cobalt-dark);
  margin: 0 0 12px;
}
.gift-store, .gift-bank {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--c-cobalt-dark);
  margin: 0 0 2px;
}
.gift-event, .gift-holder {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--c-text-muted);
  margin: 0 0 16px;
}
.gift-clabe {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--c-cobalt-dark);
  background: var(--c-bg-smoke);
  border-radius: 9px;
  padding: 11px 10px;
  margin: 0 0 16px;
  word-break: break-all;
}
.gift-btn { padding: 11px 24px; font-size: 0.82rem; }
.gift-copied {
  display: block;
  min-height: 1.2em;
  margin-top: 9px;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  color: var(--c-accion);
  font-weight: 600;
}

/* ── Dress code: listas y paleta ── */
.dress-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.dress-list li {
  position: relative;
  padding-left: 17px;
  font-family: var(--font-serif);
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--c-text-graphite);
}
.dress-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dress-dot, var(--c-talavera-blue));
}
.dress-code-him { --dress-dot: var(--c-azul-rey); }
.dress-code-her { --dress-dot: var(--c-coral); }

.dress-palette-title {
  font-family: var(--font-script);
  font-size: 1.5rem;
  color: var(--c-cobalt-dark);
  margin: 26px 0 14px;
}
.dress-palette {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 6px;
  max-width: 340px;
}
.dress-palette li {
  font-family: var(--font-sans);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
  line-height: 1.35;
}
/* Son manchas de acuarela recortadas, no chips de color: nada de borde,
   sombra ni border-radius, que delatarían el rectángulo. */
.dress-swatch {
  display: block;
  width: clamp(46px, 13vw, 58px);
  height: auto;
  margin: 0 auto 5px;
}
.dress-inspo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 4px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--c-fucsia);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.dress-inspo:hover { color: var(--c-orquidea); }

@media (max-width: 380px) {
  .dress-palette { grid-template-columns: repeat(2, 1fr); }
}

/* ── Bugambilias ──
   Van DETRÁS del contenido, nunca encima: la tarjeta y sus ornamentos son
   el protagonista y las flores sólo la enmarcan. Al quedar tapadas por la
   tarjeta, lo que asoma es un arco de flores por la orilla — que además
   esconde los tallos, que es lo que se veía feo cuando iban al frente.     */
.talavera-card-wrapper,
.combined-event-section,
.dress-code-section,
.gift-section,
.letter-section { position: relative; }

/* El contenido siempre gana la capa */
.talavera-frame,
.combined-event-section > *:not(.bloom),
.dress-code-card,
.gift-section > *:not(.bloom) { position: relative; z-index: 2; }
.letter-section > .talavera-frame { z-index: 2; }

.bloom {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

/* ── Profundidad ──
   Cada ramillete se dibuja en dos archivos que comparten el mismo viewBox,
   así que al superponerlos encajan al píxel. Entre uno y otro se cuela la
   tarjeta: tallos y hojas quedan detrás, unas flores pasan delante, y la
   rama parece rodear el borde en lugar de estar pegada a un solo plano.

   La capa de atrás va además un punto más apagada y con un desenfoque
   mínimo — es perspectiva atmosférica: lo lejano pierde nitidez y color. */
.capa-atras {
  z-index: 1;
  opacity: 0.88;
  /* la acuarela ya es difusa: basta un punto menos de color, sin desenfoque */
  filter: saturate(0.92) drop-shadow(0 3px 6px rgba(27, 37, 89, 0.08));
}
.capa-frente {
  z-index: 3;
  opacity: 1;
  /* sombra suave: estas flores caen SOBRE la tarjeta */
  filter: drop-shadow(0 6px 12px rgba(27, 37, 89, 0.16));
}
.bloom img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: var(--ancla, 23% 19%);
  animation: rama-mece var(--vaiven, 15s) cubic-bezier(.45, 0, .55, 1) infinite alternate;
  animation-delay: var(--retraso, 0s);
}
@keyframes rama-mece {
  from { transform: rotate(-1.1deg); }
  to   { transform: rotate(1.1deg); }
}

.dress-code-section > .section-title-swash {
  z-index: 2;
}

.bloom-dress-tl,
.bloom-dress-tr {
  width: clamp(70px, 18vw, 92px);
}

.bloom-dress-tl {
  top: 32px;
  left: -8px;
  transform: rotate(9deg);
  --ancla: 24% 22%;
  --vaiven: 15s;
  --retraso: -7s;
}

.bloom-dress-tr {
  top: 24px;
  right: -7px;
  transform: scaleX(-1) rotate(7deg);
  --ancla: 20% 22%;
  --vaiven: 17s;
  --retraso: -3s;
}
.bloom-gift-bl {
  bottom: 6px; left: -16px; width: clamp(76px, 21vw, 104px);
  transform: scaleY(-1);
  --ancla: 25% 25%; --vaiven: 13s; --retraso: -9s;
}

/* En las tarjetas de regalo, el arreglo completo pasa por delante de la card. */
.gift-section .bloom-gift-bl {
  z-index: 4;
  opacity: 1;
  filter: drop-shadow(0 6px 12px rgba(27, 37, 89, 0.16));
}

/* Guirnalda: va bajo la carta, montada sobre el borde inferior de la
   tarjeta, como si el ramo la sostuviera. El margen negativo es lo que
   la mete sobre la card en vez de dejarla flotando aparte. */
.bloom-garland {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(86%, 400px);
  pointer-events: none;
}
.bloom-garland.capa-atras,
.bloom-garland.capa-frente {
  z-index: 4;
  opacity: 1;
  filter: drop-shadow(0 6px 12px rgba(27, 37, 89, 0.16));
}
.bloom-garland img {
  display: block; width: 100%; height: auto;
  transform-origin: 50% 30%;
  animation: rama-mece 19s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

@media (max-width: 360px) {
  .bloom-gift-bl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bloom img, .bloom-garland img { animation: none; }
}

/* ==========================================================================
   PALETA MEXICANA · sistema de acentos
   --------------------------------------------------------------------------
   El azul talavera es la base, como en la loza real: azul sobre blanco.
   Los otros tres puntúan, no compiten. Cada color tiene un oficio:
     azul    · estructura (cenefas, íconos, marcos)
     verde   · acción     (botones)
     rosa    · afecto     (el "&", corazones, la carta)
     naranja · tiempo     (contador, fecha, hora)
   Y cada sección lleva su --acento, de modo que el color avanza al bajar.
   ========================================================================== */
:root {
  /* El cempasúchil y el rosa mexicano son preciosos de relleno pero no
     alcanzan contraste como texto. Éstas son sus versiones tipográficas:
     mismo tono, suficiente profundidad para leerse. */
  --c-marigold-text: #A85000;
  --c-pink-text: #C2006A;
  --c-orquidea-text: #7C4595;
}

/* REGLA DE COLOR: el verde agave está reservado para lo que se puede
   tocar —botones, enlaces de acción, confirmaciones—. En los adornos no
   aparece, y de los tres que quedan el rosa es el que lleva más peso.
   Por eso ya no existe .acento-verde. */
.acento-azul    { --acento: var(--c-talavera-blue);   --acento-texto: var(--c-talavera-blue); }
.acento-rosa    { --acento: var(--c-papel-pink);      --acento-texto: var(--c-pink-text); }
.acento-naranja { --acento: var(--c-marigold-orange); --acento-texto: var(--c-marigold-text); }

/* ── Cenefas multicolor ──
   Cada motivo del cintillo va coloreado por separado, como en la talavera
   real: el color entra en las flores grandes, que son las que se leen de
   lejos, y las ramitas se quedan azules sosteniendo el ritmo.
   Son copias del PNG ya pintadas, NO máscaras CSS: la máscara dependía del
   soporte del navegador y dejaba la cenefa invisible. Así el parallax y el
   dibujo quedan exactamente como siempre. */
.ribbon-mix1 .talavera-scroll-ribbon-track { background-image: url("assets/images/talavera-ribbon-mix1.png"); }
.ribbon-mix2 .talavera-scroll-ribbon-track { background-image: url("assets/images/talavera-ribbon-mix2.png"); }
.ribbon-mix3 .talavera-scroll-ribbon-track { background-image: url("assets/images/talavera-ribbon-mix3.png"); }

/* ── El punto del divisor toma el acento de su sección ── */
.section-title-swash::after {
  background:
    radial-gradient(circle at 50% 50%, var(--acento, var(--c-accion)) 0 2.4px, transparent 2.9px),
    linear-gradient(90deg, transparent,
      color-mix(in srgb, var(--acento, var(--c-blue-mid)) 55%, transparent),
      transparent) center / 100% 1px no-repeat;
}

/* ── Contador: los cuatro colores en fila, como banderines ── */
.countdown-unit:nth-of-type(1) { --u: var(--c-talavera-blue);   --ut: var(--c-talavera-blue); }
.countdown-unit:nth-of-type(2) { --u: var(--c-papel-pink);      --ut: var(--c-pink-text); }
.countdown-unit:nth-of-type(3) { --u: var(--c-marigold-orange); --ut: var(--c-marigold-text); }
.countdown-unit:nth-of-type(4) { --u: var(--c-orquidea);        --ut: var(--c-orquidea-text); }
.countdown-unit .countdown-number {
  background: color-mix(in srgb, var(--u, var(--c-cobalt)) 12%, #FFFFFF);
  color: var(--ut, var(--c-cobalt-dark));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--u, var(--c-cobalt)) 26%, transparent);
}
.countdown-sublabels span:nth-of-type(1) { color: var(--c-talavera-blue); }
.countdown-sublabels span:nth-of-type(2) { color: var(--c-pink-text); }
.countdown-sublabels span:nth-of-type(3) { color: var(--c-marigold-text); }
.countdown-sublabels span:nth-of-type(4) { color: var(--c-orquidea-text); }

/* ── El "&" es el corazón de la tarjeta: va en rosa mexicano ── */
.and-script { color: var(--c-papel-pink); }
.and-line {
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--c-papel-pink) 45%, transparent));
}
.and-divider > .and-line:last-of-type {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--c-papel-pink) 45%, transparent), transparent);
}

/* ── Íconos de sección con el acento ── */
.event-section .event-icon { color: var(--acento, var(--c-talavera-blue)); }
.dress-code-formality { color: var(--acento-texto, var(--c-cobalt-dark)); }