/* ============ VARIABLES ============
   Paleta e íconos inspirados en el video de invitación (videos/invitacion
   matrimonio Caro & Zoli.mp4): papel acuarela crema, hojas de palma gris-oliva,
   franja beige/taupe con serif en mayúsculas, y acentos en vino tinto. */
:root {
  --color-bg: #fdfaf6;
  --color-cream: #f2e9dd;
  --color-taupe: #c9b8a0;
  --color-blush: #e0c3b8;
  --color-sage: #9aa08d;
  --color-sage-dark: #5c6353;
  --color-burgundy: #6d2a3a;
  --color-gold: #b98d4f;
  --color-text: #33302c;
  --color-text-light: #756b63;
  --color-white: #ffffff;
  --font-display: 'Playfair Display', serif;
  --font-script: 'Parisienne', cursive;
  --font-body: 'Cormorant Garamond', serif;
  --max-width: 1140px;
  --radius: 6px;
  --shadow: 0 10px 30px rgba(58, 51, 46, 0.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 18px; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section-kicker {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.85rem;
  color: var(--color-gold);
  font-weight: 600;
  margin: 0 0 10px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 500;
  margin: 0 0 20px;
  color: var(--color-text);
}

.center { text-align: center; }
section .container > .section-title.center,
section .container > .section-kicker.center { margin-left: auto; margin-right: auto; }

.timeline-icon {
  width: 20px;
  height: 20px;
  color: var(--color-burgundy);
  vertical-align: -3px;
  margin-right: 8px;
}

.gift-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 36px;
  color: var(--color-text-light);
  font-style: italic;
  font-size: 0.92rem;
}
.gift-note-icon { width: 16px; height: 16px; color: var(--color-burgundy); flex: 0 0 auto; }

.section-note {
  max-width: 560px;
  margin: 0 auto 30px;
  color: var(--color-text-light);
  font-style: italic;
  font-size: 0.95rem;
}

.gallery-story {
  max-width: 680px;
  margin: 0 auto 40px;
  color: var(--color-text-light);
  font-size: 1.05rem;
  line-height: 1.75;
}

/* Textura sutil de "manchas de acuarela" en las esquinas de algunas secciones,
   como en el video de invitación. */
.venue, .dresscode, .gallery, .rsvp {
  position: relative;
  overflow: hidden;
}
.venue::before, .dresscode::before, .gallery::before, .rsvp::before,
.venue::after, .dresscode::after, .gallery::after, .rsvp::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  background-image:
    radial-gradient(circle, var(--color-taupe) 0 5px, transparent 6px),
    radial-gradient(circle, var(--color-taupe) 0 9px, transparent 10px),
    radial-gradient(circle, var(--color-taupe) 0 3px, transparent 4px),
    radial-gradient(circle, var(--color-taupe) 0 3px, transparent 4px),
    radial-gradient(circle, var(--color-taupe) 0 13px, transparent 14px);
  background-position: 15% 25%, 45% 55%, 65% 15%, 30% 75%, 75% 65%;
  background-repeat: no-repeat;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}
.venue::before, .dresscode::before, .gallery::before, .rsvp::before { top: -60px; left: -60px; }
.venue::after, .dresscode::after, .gallery::after, .rsvp::after { bottom: -60px; right: -60px; transform: rotate(180deg); }
.venue .container, .dresscode .container, .gallery .container, .rsvp .container { position: relative; z-index: 1; }

/* ============ BUTTONS ============ */
.btn[hidden] { display: none; }
.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.25s ease;
}

.btn-primary {
  background: var(--color-sage-dark);
  color: var(--color-white);
}
.btn-primary:hover { background: var(--color-sage); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(92, 99, 83, 0.25); }
.btn-primary:active { transform: translateY(0); box-shadow: none; }

.btn-outline {
  background: transparent;
  border-color: var(--color-sage-dark);
  color: var(--color-sage-dark);
}
.btn-outline:hover { background: var(--color-sage-dark); color: var(--color-white); }

.btn-small {
  padding: 8px 18px;
  font-size: 0.82rem;
  background: var(--color-cream);
  color: var(--color-text);
  border-color: var(--color-blush);
}
.btn-small:hover { background: var(--color-blush); }

.btn-submit { width: 100%; padding: 16px; font-size: 0.9rem; }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ============ HEADER / NAV ============ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-header.scrolled {
  background: rgba(253, 250, 246, 0.95);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 24px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 2.1rem;
  color: var(--color-white);
  text-decoration: none;
  transition: color 0.3s ease;
}
.site-header.scrolled .nav-brand { color: var(--color-sage-dark); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-links a {
  color: var(--color-white);
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.3s ease, opacity 0.2s ease;
}
.nav-links a:hover { opacity: 0.75; }
.site-header.scrolled .nav-links a { color: var(--color-text); }

.nav-cta {
  border: 1.5px solid currentColor;
  padding: 8px 16px;
  border-radius: var(--radius);
}

/* "Confirmar asistencia" es el único texto de menú de dos palabras que no
   cabe en una línea junto a los demás enlaces. En vez de forzar una sola
   línea ancha (nowrap, como el resto del menú) o dejar que se estire a lo
   ancho al envolver, se deja envolver en dos líneas cortas y se angosta
   la propia pastilla para que quede ajustada al texto envuelto. */
html[lang="es-CO"] .nav-cta {
  white-space: normal;
  max-width: 170px;
  text-align: center;
  line-height: 1.3;
}

/* ============ SELECTOR DE IDIOMA ============ */
/* Los 3 botones en pirámide (el idioma activo arriba, centrado; los otros
   dos abajo) en vez de en fila: ocupa menos ancho junto al menú, permite
   banderas un poco más grandes, y cabe en la misma altura que tenía la
   fila original, sin agrandar la cabecera. i18n.js mueve el botón activo
   para que sea siempre el primer hijo del selector — así :first-child
   coloca el correcto arriba pase lo que pase, sin depender del orden de
   colocación automática de CSS Grid con selectores de atributo (que no
   se comporta de forma fiable cuando el elemento marcado no es el primero
   en el DOM). */
.lang-switcher {
  display: grid;
  grid-template-columns: repeat(2, 22px);
  justify-content: center;
  align-content: center;
  gap: 5px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.3s ease;
}
.site-header.scrolled .lang-switcher {
  background: rgba(58, 51, 46, 0.06);
}

.lang-btn:first-child {
  grid-column: 1 / span 2;
  justify-self: center;
}

.lang-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.65);
  cursor: pointer;
  background: none;
  line-height: 0;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.site-header.scrolled .lang-btn {
  border-color: rgba(58, 51, 46, 0.2);
}
.lang-btn svg {
  width: 100%;
  height: 100%;
  display: block;
}
.lang-btn:hover { transform: scale(1.1); }
.lang-btn[aria-pressed="true"] {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 2px rgba(185, 141, 79, 0.35);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-white);
  transition: background 0.3s ease;
}
.site-header.scrolled .nav-toggle span { background: var(--color-text); }

/* ============ HERO ============ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-white);
  text-align: center;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(58,51,46,0.45) 0%, rgba(58,51,46,0.35) 50%, rgba(58,51,46,0.6) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 24px;
}

.hero-kicker {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 0.85rem;
  margin: 0 0 12px;
  font-weight: 500;
}

.hero-names {
  font-family: var(--font-script);
  font-size: clamp(3.6rem, 11vw, 7.5rem);
  margin: 0;
  font-weight: 400;
  line-height: 1.15;
}
.hero-names .amp { color: var(--color-blush); }

.hero-date {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  margin: 12px 0 32px;
}

.hero-flags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 28px;
}
.hero-flag {
  width: 34px;
  height: 23px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 0 0 1.5px rgba(255,255,255,0.6);
}
.hero-flag-heart {
  width: 15px;
  height: 14px;
  color: var(--color-white);
  opacity: 0.85;
}

.countdown {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
}
.countdown-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
}
.countdown-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.85;
}

.scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--color-white);
  font-size: 1.6rem;
  text-decoration: none;
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* ============ INTRO ============ */
.intro { padding: 90px 0 70px; }
.intro-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.intro-text { color: var(--color-text-light); font-size: 1.05rem; }

/* ============ VENUE ============ */
.venue { padding: 56px 0; background: var(--color-cream); }
.venue-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.venue-image img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  aspect-ratio: 4/5;
  object-fit: cover;
  width: 100%;
}
.venue-address {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-gold);
  margin: 0 0 16px;
}
.venue-desc { color: var(--color-text-light); margin-bottom: 20px; }
.venue-facts {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}
.venue-facts li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size: 0.92rem;
}

/* ============ PROGRAM / TIMELINE ============ */
.program { padding: 64px 0; }
/* El engranaje girando deja claro que el itinerario todavía se está
   armando (ver program_note debajo del título). */
.program-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.program-progress-icon {
  width: 26px;
  height: 26px;
  color: var(--color-gold);
  flex: 0 0 auto;
  animation: programGearSpin 6s linear infinite;
}
@keyframes programGearSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .program-progress-icon { animation: none; }
}
.timeline {
  list-style: none;
  margin: 50px auto 0;
  padding: 0;
  max-width: 720px;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 88px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--color-blush);
}
.timeline-item {
  display: flex;
  gap: 28px;
  position: relative;
  padding-bottom: 40px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-time {
  flex: 0 0 60px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-sage-dark);
  text-align: right;
  padding-top: 2px;
  position: relative;
}
.timeline-time::after {
  content: '';
  position: absolute;
  right: -32px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-gold);
  border: 3px solid var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-blush);
}
.timeline-body { padding-left: 24px; }
.timeline-body h3 {
  font-family: var(--font-display);
  margin: 0 0 6px;
  font-size: 1.15rem;
}
.timeline-body p { margin: 0; color: var(--color-text-light); font-size: 0.92rem; }

/* ============ GALLERY ============ */
.gallery { padding: 90px 0; }
.gallery-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.gallery-item {
  overflow: hidden;
  border-radius: var(--radius);
  cursor: pointer;
  aspect-ratio: 1/1;
  position: relative;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery-item:hover img { transform: scale(1.08); }

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 17, 15, 0.92);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-img {
  max-width: 88vw;
  max-height: 82vh;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 2.2rem;
  cursor: pointer;
  padding: 10px;
  line-height: 1;
  opacity: 0.85;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { opacity: 1; }
.lightbox-close { top: 18px; right: 24px; }
.lightbox-prev { left: 12px; top: 50%; transform: translateY(-50%); font-size: 3rem; }
.lightbox-next { right: 12px; top: 50%; transform: translateY(-50%); font-size: 3rem; }

/* ============ TRAVEL ============ */
.travel { padding: 90px 0; background: var(--color-cream); }
.travel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.travel-desc { color: var(--color-text-light); margin-bottom: 30px; }
.travel-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.travel-card {
  background: var(--color-cream);
  padding: 22px;
  border-radius: var(--radius);
  border-left: 3px solid var(--color-sage-dark);
}
.travel-card h3 {
  font-family: var(--font-display);
  margin: 0 0 10px;
  font-size: 1.05rem;
}
.travel-card p { margin: 4px 0; font-size: 0.88rem; color: var(--color-text-light); }

.travel-highlight { display: flex; align-items: center; justify-content: center; }
.travel-highlight-card {
  background: linear-gradient(165deg, var(--color-white) 0%, var(--color-cream) 100%);
  border-radius: calc(var(--radius) * 3);
  box-shadow: var(--shadow);
  padding: 44px 32px;
  max-width: 320px;
  text-align: center;
  animation: travelCardFloat 5s ease-in-out infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.travel-highlight-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 22px 40px rgba(58, 51, 46, 0.18);
}
.travel-highlight-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-cream) 0%, var(--color-blush) 100%);
  animation: travelBadgeGlow 3s ease-in-out infinite;
}
.travel-highlight-icon {
  width: 42px;
  height: 26px;
  color: var(--color-sage-dark);
}
.travel-highlight-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-burgundy);
  margin: 0 0 10px;
}
.travel-highlight-text {
  color: var(--color-text-light);
  font-size: 0.95rem;
  margin: 0;
}
@keyframes travelCardFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(-1.5deg); }
}
@keyframes travelBadgeGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(185, 141, 79, 0.28); }
  50% { box-shadow: 0 0 0 8px rgba(185, 141, 79, 0.1); }
}
@media (prefers-reduced-motion: reduce) {
  .travel-highlight-card { animation: none; }
  .travel-highlight-icon-wrap { animation: none; box-shadow: 0 0 0 3px rgba(185, 141, 79, 0.28); }
}

/* ============ DRESSCODE ============ */
.dresscode { padding: 64px 0; background: var(--color-cream); }
.dresscode-lead {
  max-width: 640px;
  margin: 0 auto 36px;
  color: var(--color-text-light);
}
.dresscode-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 780px;
  margin: 0 auto 40px;
}
.dresscode-card {
  background: var(--color-white);
  padding: 26px;
  border-radius: var(--radius);
  border-left: 3px solid var(--color-sage-dark);
}
.dresscode-card h3 {
  font-family: var(--font-display);
  margin: 0 0 12px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dresscode-gender-icon { width: 26px; height: 26px; color: var(--color-burgundy); flex: 0 0 auto; }
.dresscode-card ul { margin: 0; padding-left: 20px; color: var(--color-text-light); font-size: 0.88rem; }
.dresscode-card li { margin-bottom: 8px; }
.dresscode-card li:last-child { margin-bottom: 0; }

/* Collage de fotos "desordenado a propósito": cada una con una rotación
   fija (variable --rot, asignada por índice desde JS) y un pequeño
   desfase vertical según su posición, como una pared de polaroids. */
.dresscode-collage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  margin-top: 20px;
  padding: 8px 4px;
}
.dresscode-photo {
  position: relative;
  width: 84px;
  height: 84px;
  padding: 5px 5px 12px;
  background: var(--color-white);
  border: none;
  box-shadow: var(--shadow);
  cursor: pointer;
  z-index: 1;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dresscode-photo:nth-child(3n) { margin-top: 10px; }
.dresscode-photo:nth-child(4n) { margin-top: -8px; }
.dresscode-photo:nth-child(5n) { margin-top: 6px; }
.dresscode-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dresscode-photo:hover,
.dresscode-photo:focus-visible {
  transform: rotate(0deg) scale(1.25);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
  z-index: 5;
}
.dresscode-img-caption {
  margin: 8px 0 0;
  font-size: 0.78rem;
  text-align: center;
  color: var(--color-text-light);
  font-style: italic;
}

/* Vista previa flotante al pasar el cursor por una foto del collage.
   pointer-events queda en "none" siempre (también abierta): si no, esta
   capa —que cubre toda la pantalla— tapa el botón justo debajo del
   cursor en cuanto aparece, generando un mouseleave inmediato en el
   botón y un parpadeo (aparece y se cierra solo). Al ser puramente
   visual no necesita recibir clics; el clic abre el lightbox fijo. */
.dresscode-preview {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(30, 26, 22, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  z-index: 300;
  pointer-events: none;
}
.dresscode-preview.open { opacity: 1; visibility: visible; }
.dresscode-preview img {
  max-width: min(85vw, 460px);
  max-height: 82vh;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transform: scale(0.9);
  transition: transform 0.25s ease;
}
.dresscode-preview.open img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .dresscode-preview, .dresscode-preview img, .dresscode-photo { transition: none; }
}

/* Miniaturas extra cuando una carpeta (pictures/dresscode/... o pictures/venue)
   tiene más de una foto — la primera se muestra grande arriba, el resto aquí. */
.media-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.media-thumbs:empty { margin-top: 0; }
.media-thumbs img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease;
}
.media-thumbs a:hover img { transform: scale(1.08); }

.dresscode-palette {
  display: flex;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
}
.palette-group-label {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 12px;
}
.palette-swatches { display: flex; gap: 10px; justify-content: center; }
.palette-swatch {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: var(--shadow);
  border: 2px solid var(--color-white);
}
.palette-swatch-avoid { position: relative; border: 2px solid #e3dcd3; }
.palette-swatch-avoid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(to top right, transparent 46%, #b3453f 48%, #b3453f 52%, transparent 54%);
}

/* ============ RSVP ============ */
.rsvp { padding: 64px 0; }
.rsvp-inner { max-width: 720px; margin: 0 auto; }
.rsvp-lead {
  text-align: center;
  color: var(--color-text-light);
  margin-bottom: 40px;
}
.rsvp-lead strong {
  color: var(--color-burgundy);
  font-weight: 700;
}

.rsvp-form {
  background: var(--color-white);
  padding: 40px;
  border-radius: calc(var(--radius) * 2);
  box-shadow: var(--shadow);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group { margin-bottom: 22px; }
.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--color-text);
}

/* Cada bloque del formulario (teléfono, nombre, acompañantes, bus, mensaje)
   se agrupa visualmente con un número, para que se pueda escanear de un vistazo. */
.form-group.rsvp-step { margin-bottom: 0; }
.rsvp-step {
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.rsvp-step:last-of-type { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.rsvp-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.rsvp-step-head label { margin-bottom: 0; }
.rsvp-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-sage-dark);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
}

#registrationDetails:not([hidden]),
#busAddressGroup:not([hidden]) {
  animation: rsvpReveal 0.35s ease;
}
@keyframes rsvpReveal {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #registrationDetails:not([hidden]),
  #busAddressGroup:not([hidden]) { animation: none; }
}
.field-hint {
  font-size: 0.8rem;
  color: var(--color-text-light);
  margin: -4px 0 10px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e3dcd3;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.92rem;
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-sage-dark);
  box-shadow: 0 0 0 3px rgba(92, 99, 83, 0.15);
}
.form-group textarea { resize: vertical; }

.radio-group { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 520px) { .radio-group { flex-direction: row; } }
.radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  padding: 14px 16px;
  border: 1.5px solid #e3dcd3;
  border-radius: var(--radius);
  background: var(--color-bg);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.radio-option:hover { border-color: var(--color-sage); }
.radio-option:has(input:checked) { border-color: var(--color-sage-dark); background: var(--color-cream); }
.radio-option input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--color-sage-dark); }

.phone-row { display: flex; gap: 10px; flex-wrap: wrap; }
.phone-row select {
  flex: 0 0 auto;
  width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone-row input { flex: 1; min-width: 160px; }
.phone-row select:disabled,
.phone-row input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.phone-row .btn-go {
  flex: 0 0 auto;
  padding: 0 22px;
  font-size: 0.8rem;
}

.member-list-head {
  display: grid;
  grid-template-columns: 1fr 1fr auto 28px;
  gap: 10px;
  padding: 0 10px;
  margin-bottom: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-light);
}
.member-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.member-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto 28px;
  gap: 10px;
  align-items: center;
  background: var(--color-bg);
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid #e3dcd3;
}
.member-child-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--color-text-light);
  white-space: nowrap;
  cursor: pointer;
}
.member-row input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #e3dcd3;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--color-white);
}
.member-child-toggle input { width: auto; padding: 0; border: none; background: none; margin: 0; accent-color: var(--color-sage-dark); }
/* La fila principal se distingue con un fondo cálido en vez de un borde
   (antes era un simple borde delgado, poco visible / se veía casi negro). */
.member-row-primary {
  position: relative;
  padding-top: 26px;
  background: linear-gradient(135deg, rgba(185, 141, 79, 0.18), rgba(185, 141, 79, 0.05));
}
.member-primary-badge {
  position: absolute;
  top: 6px;
  left: 11px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-gold);
}
/* Nombre del principal: de solo lectura, con una textura a rayas que se lee
   claramente como "campo inactivo" (en vez del sutil cambio de color de antes). */
.member-row-primary .member-name {
  background: repeating-linear-gradient(135deg, #ece9e3, #ece9e3 6px, #e2ded3 6px, #e2ded3 12px);
  border-color: #d6d1c3;
  color: var(--color-text-light);
  cursor: not-allowed;
}
.guest-remove {
  background: none;
  border: none;
  color: var(--color-text-light);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
}
.guest-remove:hover { color: #b3453f; }

.field-status {
  font-size: 0.8rem;
  color: var(--color-text-light);
  margin: 8px 0 0;
  min-height: 1.1em;
}
.field-status.success { color: var(--color-sage-dark); font-weight: 600; }
.field-status.error { color: #b3453f; font-weight: 600; }

.form-status {
  margin-top: 16px;
  text-align: center;
  font-size: 0.9rem;
  min-height: 1.2em;
}
.form-status.success { color: var(--color-sage-dark); font-weight: 600; }
.form-status.error { color: #b3453f; font-weight: 600; }

/* ============ FOOTER ============ */
.site-footer {
  background: #2f2925;
  color: rgba(255,255,255,0.75);
  padding: 38px 0;
  text-align: center;
}
.footer-names {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 2.6rem;
  color: var(--color-white);
  margin: 0 0 6px;
}
.footer-date { margin: 0 0 14px; font-size: 0.9rem; }
.footer-contact { font-size: 0.85rem; margin: 0; }
.footer-contact a { color: var(--color-blush); text-decoration: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .venue-grid, .travel-grid { grid-template-columns: 1fr; gap: 36px; }
  .travel-highlight { order: -1; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(253, 250, 246, 0.98);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  }
  .nav-links.open { max-height: 400px; }
  .nav-links a { color: var(--color-text); padding: 14px 24px; width: 100%; }
  .nav-cta { margin: 10px 24px; border-radius: var(--radius); }

  .form-row { grid-template-columns: 1fr; }
  .phone-row { flex-direction: column; }
  .phone-row select { width: 100%; }
  .phone-row .btn-go, .phone-row #changeNumberBtn { width: 100%; }
  .member-row { grid-template-columns: 1fr; }
  .member-list-head { display: none; }
  .travel-cards { grid-template-columns: 1fr; }
  .dresscode-cards { grid-template-columns: 1fr; }
  .dresscode-palette { gap: 30px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .rsvp-form { padding: 26px; }
  .timeline::before { left: 58px; }
  .timeline-time { flex-basis: 40px; font-size: 0.85rem; }
  .timeline-time::after { right: -22px; }
}