:root {
  color-scheme: light;
  --font-body: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg-100: #f8f6f2;
  --bg-900: #1f1a14;
  --text-900: #1d1b16;
  --text-200: #fdfcfb;
  --primary-500: #c47b59;
  --primary-600: #a35f3a;
  --accent-500: #406977;
  --accent-600: #2f4f5b;
  --focus: #1b7bc7;
  --border-radius: 1.2rem;
  --transition-speed: 400ms;
  font-size: clamp(16px, 1.1vw + 0.5rem, 18px);
}

* {
  box-sizing: border-box;
}

html {
  overflow: hidden;
  touch-action: none; /* Prevent touch gestures at document level */
  -webkit-overflow-scrolling: auto;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg-100);
  color: var(--text-900);
  min-height: 100vh;
  overflow: hidden;
  position: fixed; /* Critical for Safari iOS to prevent bounce scroll */
  width: 100%;
  height: 100vh;
  touch-action: none; /* Prevent all touch gestures */
  -webkit-overflow-scrolling: auto; /* Disable momentum scrolling */
}

body.allow-scroll {
  overflow-y: auto;
  position: static;
  touch-action: auto;
}

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

a {
  color: inherit;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--bg-900);
  color: var(--text-200);
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  transition: transform 0.3s;
  z-index: 999;
}

.skip-link:focus {
  top: 1rem;
  transform: translateY(0);
}


.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem);
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}

.header-inner {
  display: inline-flex;
  width: auto;
  max-width: min(1200px, 100%);
  justify-content: flex-start;
  gap: clamp(0.5rem, 1vw, 1rem);
  align-items: center;
  align-self: flex-start;
  pointer-events: auto;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg-100) 80%, transparent);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.header-date {
  font-family: var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.lang-toggle {
  font: inherit;
  border: none;
  background: var(--accent-500);
  color: var(--text-200);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
}

.lang-toggle:focus-visible,
.nav-arrow:focus-visible,
.carousel-control:focus-visible,
.cta:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.modal-close:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.main {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  touch-action: none; /* Prevent all touch gestures for Safari */
  -webkit-overflow-scrolling: touch; /* Enable momentum scrolling for Safari */
}

.panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100svh;
  display: grid;
  place-items: center;
  transition: transform var(--transition-speed) ease-in-out;
  padding: clamp(1rem, 4vw, 2rem) 0;
}

/* FOUC Fix: Hide all panels except the first one until JS is ready */
body:not(.is-ready) .panel {
  opacity: 0;
  pointer-events: none;
  transition: none !important;
}
body:not(.is-ready) .panel:first-child {
  opacity: 1;
  pointer-events: auto;
  z-index: 10;
}

.panel-inner {
  width: min(1100px, 90%);
  margin: 0 auto;
  text-align: center;
  display: grid;
  gap: clamp(1rem, 2vw, 2.5rem);
  padding-block: clamp(1.5rem, 4vw, 3.5rem);
  padding-inline: clamp(1rem, 3vw, 2rem);
  max-height: calc(100svh - clamp(2rem, 8vh, 4rem));
  overflow-y: auto;
  scrollbar-width: thin;
  touch-action: auto; /* Allow scrolling within panels on Safari */

}

.panel--section {
  color: var(--text-200);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.panel--section .panel-inner {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.panel--section1 {
  background-image: url('assets/optimized/section1.webp');
}

.panel--section2 {
  color: var(--text-900);
}

.panel--section2.load-bg {
  background-image: url('assets/optimized/section2.webp');
}

.panel--section2 .panel-inner {
  justify-items: flex-start; /* Left align */
  align-content: center;
  padding-block: 0; /* Remove padding to let card fit */
  text-shadow: none;
  max-height: none; /* Disable generic panel scroll */
  overflow-y: visible; /* Disable generic panel scroll */
  height: 100%; /* Ensure full height */
}

.panel--section3.load-bg {
  background-image: url('assets/optimized/section3.webp');
}

.panel--section4.load-bg {
  background-image: url('assets/optimized/section4.webp');
}

.panel--section5.load-bg {
  background-image: url('assets/optimized/section5.webp');
}

.panel--section6.load-bg {
  background-image: url('assets/optimized/section6.webp');
}

.panel--section7.load-bg {
  background-image: url('assets/optimized/section7.webp');
}

.panel--intro .panel-inner {
  text-align: left;
  justify-items: flex-start;
  align-content: center;
  gap: 1rem;
  max-width: 640px;
}

.intro-eyebrow,
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.85rem;
}

.intro-copy {
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  line-height: 1.5;
}

.intro-scroll {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.6);
  background: transparent;
  color: inherit;
  padding: 0.6rem 1.5rem;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.rsvp-card {
  width: min(640px, 95vw);
  margin-right: clamp(1rem, 6vw, 4rem);
  background: #f4db8a; /* New background color */
  border-radius: 1.5rem;
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: 0 25px 60px -35px rgba(0, 0, 0, 0.45);
  font-family: 'Questrial', sans-serif; /* Apply font to card */
  max-height: 80vh; /* Restore max-height */
  overflow-y: auto; /* Restore inner scroll */
  touch-action: auto; /* Allow scrolling within RSVP card on Safari */
}

.panel--section3 .panel-inner {
  gap: clamp(1rem, 2vw, 2rem);
}

.info-content {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.info-overlays {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  align-items: center;
  justify-items: center;
}

.info-overlay {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: transform 250ms ease;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  opacity: 0; /* Hidden by default for animation */
  text-decoration: none;
  color: inherit;
}

.panel--section3.is-active .info-overlay {
  animation: fadeInUp 1000ms ease forwards;
}

.panel--section3.is-active .info-overlay:nth-child(2) {
  animation-delay: 300ms;
}

.panel--section3.is-active .info-overlay:nth-child(3) {
  animation-delay: 600ms;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.info-overlay img {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-width: 450px; /* Increased size */
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
  transition: filter 250ms ease;
}

.info-overlay:hover,
.info-overlay:focus-visible {
  /* We use !important or specific selector to ensure hover transform overrides animation final state if needed, 
     but usually transform from animation fills. 
     Actually, filling mode might conflict with hover transform. 
     Let's use a wrapper or ensure hover works after animation.
     The simple way: apply animation to the button, but hover transform also applies to button.
     If animation ends at translateY(0), hover can do translateY(-6px).
  */
  transform: translateY(-6px);
}

.info-overlay:hover img,
.info-overlay:focus-visible img {
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.3));
}



.visual-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

.visual-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Animation triggers for all sections with visual layers */
.panel.is-active .visual-layer {
  animation: fadeInUp 1000ms ease forwards;
}

/* Staggered delays and slower speeds for specific sections */

/* Section 1 */
.panel--section1.is-active .visual-layer {
  animation-duration: 2000ms;
}
.panel--section1.is-active .visual-layer:nth-child(2) { animation-delay: 800ms; }
.panel--section1.is-active .visual-layer:nth-child(3) { animation-delay: 1600ms; }
.panel--section1.is-active .visual-layer:nth-child(4) { animation-delay: 2400ms; }

/* Section 4 */
.panel--section4.is-active .visual-layer {
  animation-duration: 2000ms;
}
.panel--section4.is-active .visual-layer:nth-child(2) { animation-delay: 800ms; }
.panel--section4.is-active .visual-layer:nth-child(3) { animation-delay: 1600ms; }
.panel--section4.is-active .visual-layer:nth-child(4) { animation-delay: 2400ms; }

/* Section 5 */
.panel--section5.is-active .visual-layer {
  animation-duration: 2000ms;
}

/* Section 6 */
.panel--section6.is-active .visual-layer {
  animation-duration: 2000ms;
}

/* Section 7 - Ensure countdown is visible/animated too if needed */
.countdown-wrapper {
  position: relative;
  z-index: 2;
}

.panel--celebration .panel-inner {
  text-align: center;
  gap: 1rem;
}

@media (max-width: 900px) {
  .panel--section2 .panel-inner {
    justify-items: center;
  }

  .rsvp-card {
    margin-right: 0;
  }

  .info-overlays {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .mobile-only {
    display: block !important;
  }
}

.mobile-only {
  display: none;
}

@media (max-width: 1024px) {
  .panel-inner {
    width: 94%;
    text-align: left;
    align-content: flex-start;
    justify-items: flex-start;
  }

  .panel--section .panel-inner {
    text-align: left;
  }

  .panel--section2 .panel-inner {
    align-content: flex-start;
  }

  .panel--section2.load-bg {
    background-image: url('assets/Mobile_Section2_RSVP Fondo.png');
  }

  .panel--section3 .panel-inner {
    justify-items: stretch;
  }

  .panel--celebration .panel-inner {
    text-align: left;
    justify-items: flex-start;
  }

  /* Section 3 Mobile Updates */
  /* Section 3 Mobile Updates */
  .panel--section3.load-bg {
    background-image: url('assets/Mobile_Section3_Detalles Fondo.png');
    padding-inline: 0 !important; /* Override global panel padding */
  }

  .panel--section3 .panel-inner {
    max-height: 100%;
    overflow-y: hidden; /* Prevent scroll */
    height: 100%;
    min-height: 100%;
    width: 100%;
    max-width: 100%;
    padding: 0;
    display: block;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
  }
  
  .panel--section3 .panel-inner::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .panel--section3 .info-overlays {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    height: 100% !important; /* Fill parent, not viewport */
    min-height: auto;
    justify-content: center !important; /* Center content vertically */
    align-items: flex-start !important;
    gap: 0.5rem !important; /* Minimal gap */
    padding-top: 10vh; /* Reduced top padding */
    padding-bottom: 2rem; /* Reduced bottom padding */
    box-sizing: border-box; /* Ensure padding is included in height */
  }

  .panel--section3 .info-overlay {
    flex: 0 0 auto;
    height: auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
    padding: 0;
    position: relative;
    animation: none !important;
    transform: none !important;
  }

  /* Alternating Alignment */
  .panel--section3 .info-overlay:nth-child(1) {
    align-self: flex-end; /* Right */
    margin-right: 0;
  }

  .panel--section3 .info-overlay:nth-child(2) {
    align-self: flex-start; /* Left */
    margin-left: 0;
  }

  .panel--section3 .info-overlay:nth-child(3) {
    align-self: flex-end; /* Right */
    margin-right: 0;
  }

  .panel--section3 .info-overlay img {
    height: auto;
    max-height: 20vh; /* Restored to reasonable size */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: none; 
  }

  /* Section 5 Mobile Updates */
  .panel--section5.load-bg {
    background-image: url('assets/Mobile_Section5_Regalo Fondo.png');
  }

  /* Section 6 Mobile Updates */
  .panel--section6.load-bg {
    background-image: url('assets/Mobile_Section6_Cierre Fondo.png');
  }

  /* Section 7 Mobile Updates */
  .panel--section7 {
    place-items: start center;
  }

  .panel--section7.load-bg {
    background-image: url('assets/Mobile_Section7_Timer Fondo.png');
  }

  .panel--section7 .visual-layer {
    display: none;
  }

  .panel--section7 .panel-inner {
    align-content: flex-start;
    padding-top: 5rem;
  }

  .panel--section7 .countdown-grid {
    flex-direction: column;
    gap: 1rem;
  }

  .panel--section7 .countdown-divider {
    display: none;
  }
  .rsvp-card {
    width: 100%;
    padding: 0.5rem;
    margin: 0;
    margin-top: 9vh; /* Aligned with red line below RSVP title */
    max-height: 60vh; /* Limited height prevents extending to bottom */
    overflow-y: auto; /* Allow scroll if content is too tall */
  }

  .rsvp-form {
    gap: 0.3rem !important;
  }

  .form-group, fieldset {
    gap: 0.25rem;
  }

  .rsvp-card h2 {
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 0.15rem;
  }

  .rsvp-card .panel-description {
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
  }

  input, textarea, select, .btn-primary {
    padding: 0.4rem 0.6rem;
    font-size: 1rem;
  }

  .form-group--songs {
    display: grid;
  }
  
  /* Additional spacing reduction for labels and hints */
  .rsvp-form label,
  .rsvp-form legend {
    margin-bottom: 0.1rem;
  }
  
  .field-hint {
    margin-top: 0.1rem;
    font-size: 0.8rem;
  }
  
  .privacy-copy {
    margin-top: 0.3rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 600px) {
  .panel {
    padding-inline: clamp(0.5rem, 4vw, 1rem);
  }

  .panel-inner {
    width: 100%;
    max-height: calc(100svh - clamp(2rem, 12vh, 4rem));
  }

  .countdown-grid {
    justify-content: center;
    flex-wrap: wrap;
  }
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 3vw, 1.8rem);
}

.carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  width: 100%;
  height: 100%;
  display: grid;
  min-height: clamp(240px, 60svh, 100%);

}

.panel--hero .carousel {
  width: 80%;
  height: 80%;
  justify-self: center;
  align-self: stretch;
  max-width: 1000px;
}

.carousel-viewport {
  overflow: hidden;
  height: 100%;

}

.carousel-track {
  display: flex;
  transition: transform 500ms ease;
  will-change: transform;
  height: 100%;

}

.carousel-slide {
  min-width: 100%;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}

.carousel-slide > img,
.carousel-slide > video,
.carousel-slide > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  border: none;
  color: #fff;
  font-size: 2rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.carousel-control--prev {
  left: 1rem;
}

.carousel-control--next {
  right: 1rem;
}

.carousel-dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.carousel-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
}

.carousel-dot[aria-current="true"] {
  background: var(--primary-500);
}

.cta-grid {
  display: grid;
  gap: clamp(1rem, 4vw, 2rem);
}

@media (min-width: 640px) {
  .cta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cta {
  font: inherit;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 2px solid var(--primary-500);
  border-radius: var(--border-radius);
  background: transparent;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms;
}

.cta:hover,
.cta:focus-visible {
  transform: translateY(-4px);
  background: var(--primary-500);
  color: var(--text-200);
}

.rsvp-form {
  display: grid;
  text-align: left;
  font-family: 'Questrial', sans-serif;
}

/* Desktop: larger gap */
@media (min-width: 1025px) {
  .rsvp-form {
    gap: 1.5rem;
  }
}

.rsvp-form input,
.rsvp-form textarea,
.rsvp-form button,
.rsvp-form select,
.rsvp-form label,
.rsvp-form legend {
  font-family: 'Questrial', sans-serif;
}

.form-group,
fieldset {
  display: grid;
}

/* Desktop: larger gap for form groups */
@media (min-width: 1025px) {
  .form-group,
  fieldset {
    gap: 0.75rem;
  }
}

.typeahead-wrapper {
  position: relative;
}

.typeahead-results {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.4);
  max-height: 14rem;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 20;
}

.typeahead-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
}

.typeahead-item[aria-selected="true"],
.typeahead-item:hover {
  background: rgba(196, 123, 89, 0.15);
}

input,
textarea,
select {
  font: inherit;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.85);
}

.tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.85);
}

.tag-input:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.tag-input__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-input__entry {
  flex: 1;
  min-width: 160px;
  border: none;
  background: transparent;
  padding: 0.5rem;
}

.tag-input__entry:focus {
  outline: none;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--accent-500);
  color: var(--text-200);
  border: none;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.tag-chip:hover,
.tag-chip:focus-visible {
  background: var(--accent-600);
}

.tag-chip span:last-child {
  font-size: 1rem;
}

input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.radio-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
  font: inherit;
  border-radius: 999px;
  padding: 0.9rem 2rem;
  border: none;
  cursor: pointer;
  transition: transform 200ms ease;
}

.btn-primary {
  background: var(--accent-500);
  color: var(--text-200);
}

.btn-secondary {
  background: transparent;
  border: 2px solid var(--accent-500);
  color: var(--accent-500);
}

.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-2px);
}

.field-error {
  color: #c0392b;
  font-size: 0.85rem;
}

.field-hint {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.6);
}

.field-meta {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.6);
}

.privacy-copy {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.65);
}

.nav-arrow {
  position: fixed;
  right: 1rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 2rem; /* Smaller like mobile */
  height: 2rem; /* Smaller like mobile */
  font-size: 0.75rem; /* Smaller icon */
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.nav-arrow--up {
  bottom: 7rem; /* Bottom-right like mobile */
}

.nav-arrow--down {
  bottom: 4.5rem; /* Bottom-right like mobile */
}

.nav-progress {
  display: none; /* Hidden on all devices */
}

.progress-dots {
  display: none;
}

.progress-dot {
  display: none;
}

.progress-dot.is-active {
  display: none;
}

.toast-region {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: 0.5rem;
  width: min(90%, 360px);
  z-index: 9999;
}

.toast {
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.toast button {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 100;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.modal-content {
  position: relative;
  background: #fff;
  max-width: min(680px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 1rem;
  padding: clamp(1rem, 4vw, 2rem);
  display: grid;
  gap: 1rem;
  z-index: 1;
  font-family: 'Questrial', sans-serif;
}

.modal-content strong,
.modal-content b {
  font-weight: 700;
  text-shadow: 0 0 1px currentColor;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-close {
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

.modal-body {
  text-align: left;
  font-size: 0.95rem;
  display: grid;
  gap: 1rem;
}

.modal-body ul {
  padding-left: 1.2rem;
}

.modal-body li {
  margin-bottom: 1rem;
}

.modal-body iframe {
  width: 100%;
  border: none;
  border-radius: 0.75rem;
  aspect-ratio: 16 / 9;
}


.countdown {
  display: grid;
  gap: 0.75rem;
  text-align: center;
  justify-items: center;
  color: var(--text-200);
}

.countdown-label,
.countdown-caption {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: 0.9rem;
}

.countdown-grid {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.75rem;
  font-family: var(--font-body);
}

.countdown-segment {
  display: grid;
  gap: 0.2rem;
  justify-items: center;
}

.countdown-number {
  font-size: clamp(2rem, 10vw, 4rem);
  letter-spacing: 0.08em;
  min-width: 3ch;
}

.countdown-unit {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.countdown-divider {
  font-size: clamp(1.5rem, 8vw, 3rem);
  font-family: var(--font-body);
  letter-spacing: 0.1em;
  align-self: flex-end;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (min-width: 1024px) {
  .panel-inner {
    text-align: center;
  }
  .rsvp-form {
    width: min(560px, 100%);
    margin: 0 auto;
  }
}

.unlock-scroll-toggle {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  cursor: pointer;
  z-index: 9;
}

.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;
}

/* Mobile Backgrounds */
@media (max-width: 1024px) {
  .panel--section1 {
    background-image: url('assets/optimized/Mobile_Section1_Inicio Fondo.webp');
  }
  .panel--section2.load-bg {
    background-image: url('assets/optimized/Mobile_Section2_RSVP Fondo.webp');
  }
  .panel--section3.load-bg {
    background-image: url('assets/optimized/Mobile_Section3_Detalles Fondo.webp');
  }
  .panel--section4.load-bg {
    background-image: url('assets/optimized/Mobile_Section4_Crono fondo.webp');
  }
  .panel--section5.load-bg {
    background-image: url('assets/optimized/Mobile_Section5_Regalo Fondo.webp');
  }
  .panel--section6.load-bg {
    background-image: url('assets/optimized/Mobile_Section6_Cierre Fondo.webp');
  }
  .panel--section7.load-bg {
    background-image: url('assets/optimized/Mobile_Section7_Timer Fondo.webp');
  }



/* Mobile Backgrounds and Overrides */
@media (max-width: 1024px) {
  .panel-inner {
    width: 94%;
    text-align: left;
    align-content: flex-start;
    justify-items: flex-start;
  }

  .panel--section .panel-inner {
    text-align: left;
  }

  .panel--section2 .panel-inner {
    align-content: flex-start;
  }

  .panel--section2.load-bg {
    background-image: url('assets/optimized/Mobile_Section2_RSVP Fondo.webp');
  }

  .panel--section3 .panel-inner {
    justify-items: stretch;
  }

  .panel--celebration .panel-inner {
    text-align: left;
    justify-items: flex-start;
  }



  /* Section 5 Mobile Updates */
  .panel--section5.load-bg {
    background-image: url('assets/optimized/Mobile_Section5_Regalo Fondo.webp');
  }

  /* Section 6 Mobile Updates */
  .panel--section6.load-bg {
    background-image: url('assets/optimized/Mobile_Section6_Cierre Fondo.webp');
  }

  /* Section 7 Mobile Updates */
  .panel--section7 {
    place-items: start center;
  }
  .panel--section7.load-bg {
    background-image: url('assets/optimized/Mobile_Section7_Timer Fondo.webp');
  }

  .panel--section7 .visual-layer {
    display: none;
  }

  .panel--section7 .panel-inner {
    align-content: flex-start;
    padding-top: 1.2rem;
    text-align: center;
    justify-items: center;
  }

  .panel--section7 .countdown-divider {
    display: none;
  }

  .panel--section7 .countdown-grid {
    flex-direction: column;
    gap: 1rem;
    align-items: center; /* Ensure items are centered */
  }



  /* Position header bottom-left on mobile */
  .site-header {
    top: auto;
    bottom: 0;
    padding: 1rem;
  }

  .lang-toggle {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }

  /* Reduce header container padding on mobile */
  .header-inner {
    padding: 0.25rem 0.5rem;
  }

  /* Hide header date on mobile */
  .header-date {
    display: none;
  }

  /* Mobile-specific adjustments (if needed in future) */
}

@media (max-width: 600px) {
  .panel {
    padding-inline: clamp(0.5rem, 4vw, 1rem);
  }

  .panel-inner {
    width: 100%;
    max-height: calc(100svh - clamp(2rem, 12vh, 4rem));
  }

  .countdown-grid {
    justify-content: center;
    flex-wrap: wrap;
  }
}