/* ============================================================
   BODA WENDY & ISRAEL — CSS
   Paleta Pastel: Baby Sky · Cloud Waltz · Blue Tulle
============================================================ */
:root {
  --blue:       #5B9BD5;
  --blue-deep:  #1A3A5C;
  --blue-mid:   #4A8AB5;
  --blue-pale:  #D4EAF7;
  --blue-glass: rgba(91,155,213,0.15);
  --gold:       #C9A84C;
  --gold-lt:    #E8D5A3;
  --gold-dk:    #8B6914;
  --cream:      #FAF7F2;
  --white:      #FFFFFF;
  --rose:       #C2697A;
  --green-ok:   #27AE60;
  --red-no:     #E74C3C;
  --text-dark:  #0D1B35;
  --text-mid:   #3D4A6B;
  --shadow:     0 8px 32px rgba(0,17,51,0.4);

  --f-serif:    'Playfair Display', serif;
  --f-elegant:  'Cormorant Garamond', serif;
  --f-sans:     'Jost', sans-serif;

  --baby-sky:   #D4EAF7;
  --cloud-waltz:#C6DFF0;
  --blue-tulle: #A9CBE9;
  --misty:      #BBD9F3;
  --bluebell:   #D1E4F8;
  --soft-denim: #9FC4E5;

  --ease:       cubic-bezier(0.77,0,0.175,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; }
body { font-family:var(--f-sans); background:var(--blue-deep); color:var(--white); overflow:hidden; height:100vh; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--gold); border-radius:2px; }

/* ══════════════════════════════════
   SECCIONES — SISTEMA FADE
══════════════════════════════════ */
.sections-wrapper { position:relative; width:100%; height:100vh; }

.section {
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
  transition:opacity 0.75s var(--ease);
  overflow-y:auto; overflow-x:hidden;
  display:flex; align-items:flex-start; justify-content:center;
  -webkit-overflow-scrolling:touch;
}
.section.active  { opacity:1; pointer-events:all; z-index:2; }
.section.fade-out{ opacity:0; z-index:1; }

/* Fondos de sección */
.section-bg {
  position:fixed; inset:0; z-index:0;
  transition:opacity 0.75s var(--ease);
}
.bg-countdown {
  /* ── IMAGEN DE FONDO: reemplaza 'TU_IMAGEN.jpg' con la ruta de tu archivo ── */
  /* Ejemplo: background-image: url('../img/countdown-bg.jpg');                 */
  background-image: url('../img/cuenta.png');  /* ← cambia aquí */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Overlay encima de la imagen para que los textos sean legibles */
  /* Ajusta la opacidad del rgba (0.55) más alto = más oscuro                  */
  background-blend-mode: normal; /* se mezcla con el color de abajo */
  background-color: rgba(26, 58, 92, 0.05); /* overlay azul semitransparente  */
}
.bg-versiculo  { background:linear-gradient(135deg, #1A3A5C 0%, #2A5F8F 50%, #BBD9F3 100%); }
.bg-familia    { background:linear-gradient(135deg, #1A3A5C 0%, #4A8AB5 50%, #9FC4E5 100%); }
.bg-cuando     { background:linear-gradient(150deg, #1A3A5C 0%, #5B9BD5 55%, #C6DFF0 100%); }
.bg-ruta       { background:linear-gradient(120deg, #1A3A5C 0%, #4A8AB5 50%, #A9CBE9 100%); }

.bg-programa   { background:linear-gradient(160deg, #1A3A5C 0%, #2A5F8F 45%, #9FC4E5 100%); }
.bg-vestimenta { background:linear-gradient(135deg, #1A3A5C 0%, #4A8AB5 55%, #BBD9F3 100%); }
.bg-final      { background:linear-gradient(150deg, #1A3A5C 0%, #4A8AB5 55%, #BBD9F3 100%); }

.section-bg::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(201,168,76,0.07) 0%, transparent 50%),
             radial-gradient(circle at 20% 80%, rgba(212,234,247,0.12) 0%, transparent 50%);
}

/* ══════════════════════════════════
   HERO BG
══════════════════════════════════ */
.hero-bg {
  position:fixed; inset:0; z-index:0;
  background:radial-gradient(ellipse at 50% 35%, #D4EAF7 0%, #BBD9F3 30%, #9FC4E5 60%, #5B9BD5 100%);
}
.hero-img-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(212,234,247,0.1) 0%, rgba(91,155,213,0.2) 100%);
}
.hero-img-placeholder { position:absolute; inset:0; }
.hero-particles { position:absolute; inset:0; overflow:hidden; }
.particle {
  position:absolute; border-radius:50%;
  animation:floatUp linear infinite;
}
@keyframes floatUp {
  0%  { transform:translateY(110vh) scale(0); opacity:0; }
  10% { opacity:1; }
  90% { opacity:0.5; }
  100%{ transform:translateY(-50px) scale(1.2); opacity:0; }
}

/* ══════════════════════════════════
   MARCA DE AGUA
══════════════════════════════════ */
.hero-watermark {
  position: absolute;
  top: 55%; left: 50%;
  transform: translate(-50%, -50%);
  width: 120%; height: 100%;
  z-index: 1; pointer-events: none;
  background-image: url('../img/Inicio.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.99;
}

/* ══════════════════════════════════
   HERO CONTENT
   CAMBIO: padding y margin fluidos con clamp()
   para que escale bien en S21 (390px) y S23 Ultra
══════════════════════════════════ */
.hero-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding: clamp(1rem, 5vw, 4rem) clamp(0.5rem, 3vw, 2rem) clamp(2rem, 8vw, 8rem);
  max-width: min(550px, 90vw);
  width: 100%;
  margin: auto clamp(28rem, 6%, 5%) auto auto;
  animation: fadeUp 1.2s ease both;
}

.monogram { margin-bottom:1.5rem; }
.monogram-svg {
  width:clamp(80px,14vw,130px);
  height:clamp(80px,14vw,130px);
  filter:drop-shadow(0 0 20px rgba(201,168,76,0.5));
  animation:rotateSlow 60s linear infinite;
}
@keyframes rotateSlow { to{ transform:rotate(360deg); } }

.hero-pre {
  font-family:var(--f-elegant); font-style:italic;
  font-size:clamp(0.8rem,2vw,1rem); color:var(--gold-dk);
  letter-spacing:0.12em; margin-bottom:0.8rem;
  animation:fadeUp 0.8s ease 0.3s both;
}
.hero-names {
  font-family:var(--f-serif); font-size:clamp(2.2rem,10vw,5.5rem);
  font-weight:700; color:var(--blue-deep); line-height:1.05;
  text-shadow:0 2px 16px rgba(91,155,213,0.25);
  animation:fadeUp 0.8s ease 0.6s both;
}
/* CAMBIO: margin fijo 95px → clamp fluido */
.hero-amp {
  font-family:var(--f-serif); font-style:italic;
  font-size:clamp(1.2rem,6vw,3rem); color:var(--cream);
  align-items: center;
  margin: 0.2rem clamp(0.5rem,6vw,95px);
  animation:fadeUp 0.8s ease 0.75s both;
}
/* CAMBIO: margin fijo 60px → clamp fluido */
.divider-gold {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.8rem clamp(0.3rem,4vw,60px);
  animation: fadeUp 0.8s ease 0.9s both;
  align-self: flex-end;
}
.dline { flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); max-width:140px; }
.dsym  { color:var(--gold); font-size:0.65rem; }

/* CAMBIO: clamp estaba invertido (3.1rem min > 1.6rem max) → corregido */
.hero-date-big {
  font-family:var(--f-elegant);
  font-size:clamp(1.4rem,5vw,3rem);
  color:var(--cream);
  font-weight:600;
  letter-spacing:0.05em;
  animation:fadeUp 0.8s ease 1s both;
}
.hero-sub {
  font-size:clamp(0.75rem,1.8vw,0.9rem); font-weight:400;
  color:var(--blue-deep); letter-spacing:0.06em; margin-top:0.4rem;
  animation:fadeUp 0.8s ease 1.1s both;
}

.scroll-hint {
  position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%);
  z-index:5; color:rgba(26,58,92,0.5); font-size:0.72rem;
  letter-spacing:0.12em; font-weight:300;
  animation:bob 2.5s ease-in-out infinite, fadeUp 1s ease 2s both;
  pointer-events:none;
}
@keyframes bob { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(7px)} }

/* ══════════════════════════════════
   BOTONES
══════════════════════════════════ */
.btn-cta {
  display:inline-flex; align-items:center; gap:0.5rem;
  margin-top:2rem;
  background:linear-gradient(135deg, var(--gold-dk), var(--gold), var(--gold-dk));
  background-size:200% 100%;
  color:var(--blue-deep); font-family:var(--f-sans);
  font-size:0.82rem; font-weight:500; letter-spacing:0.18em;
  text-transform:uppercase; text-decoration:none;
  padding:0.85rem 2.5rem; border:none; border-radius:50px;
  cursor:pointer; transition:all 0.4s ease;
  box-shadow:0 4px 20px rgba(201,168,76,0.3);
  animation:fadeUp 0.8s ease 1.9s both;
}
.btn-cta:hover { background-position:100% 0; transform:translateY(-2px); box-shadow:0 8px 30px rgba(201,168,76,0.5); }

/* ══════════════════════════════════
   LAYOUT COMPARTIDO
══════════════════════════════════ */
.section-content {
  position:relative; z-index:2;
  width:100%; max-width:960px;
  padding:4.5rem 2rem 3rem;
  margin:0 auto;
}
.section-content.centered { text-align:center; }

.sec-header { margin-bottom:2.5rem; }
.sec-pre {
  font-family:var(--f-elegant); font-style:italic;
  font-size:0.9rem; color:var(--gold); letter-spacing:0.2em;
  margin-bottom:0.4rem;
}
.sec-title {
  font-family:var(--f-serif); font-size:clamp(1.8rem,4.5vw,3rem);
  color:var(--white); font-weight:400; line-height:1.1;
}
.ornament-line { color:var(--gold); font-size:1.4rem; margin-top:0.6rem; opacity:0.7; }

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

/* ══════════════════════════════════
   S1 · VERSÍCULO — SPLIT LAYOUT
══════════════════════════════════ */
.split-layout {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr;
  width:100%; max-width:960px;
   min-height:100vh; height:auto;
   margin:0 auto;
}
/* Asegura que la imagen cargada llene el contenedor sin deformarse */
.split-img-v {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Recorta la imagen para llenar el espacio manteniendo proporciones */
  object-position: center; /* Centra la foto si hay recorte */
  display: block;
}

/* Opcional: Si quieres quitar el fondo rosa suave que tenía el placeholder */
.split-photo {
  background: none !important;
}
.split-img { width:100%; height:100%; object-fit:cover; }
.photo-placeholder {
  width:100%; height:100%; min-height:400px;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:0.7rem;
  font-size:3rem; color:rgba(255,255,255,0.2);
}
.photo-placeholder.romantic { background:linear-gradient(135deg, rgba(194,105,122,0.15), rgba(91,155,213,0.2)); }
.photo-placeholder small { font-size:0.8rem; font-family:var(--f-sans); font-weight:300; letter-spacing:0.1em; }
.photo-frame-deco {
  position:absolute; inset:20px;
  border:1px solid rgba(201,168,76,0.25); pointer-events:none;
}

.split-text {
  padding:3.5rem 2.5rem;
  display:flex; flex-direction:column; justify-content:center;
}
.versiculo-card {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(201,168,76,0.25);
  border-radius:20px; padding:2rem;
  position:relative; margin:1.5rem 0;
  backdrop-filter:blur(10px);
}
.quote-mark {
  font-family:var(--f-serif); font-size:5rem; color:var(--gold);
  opacity:0.3; line-height:1; position:absolute; top:-0.5rem; left:1.2rem;
}
.versiculo-texto {
  font-family:var(--f-elegant); font-size:clamp(1rem,2.2vw,1.25rem);
  font-style:italic; font-weight:300; color:var(--white); line-height:1.8;
  position:relative; z-index:1; padding-top:1rem;
}
.versiculo-ref {
  font-family:var(--f-sans); font-size:0.8rem; color:var(--blue-deep);
  letter-spacing:0.15em; margin-top:1rem; text-align:right;
}
.versiculo-nota {
  font-size:0.85rem; color:var(--blue-pale); font-weight:300; line-height:1.7;
}

/* ══════════════════════════════════
   S2 · PAPÁS & PADRINOS
══════════════════════════════════ */
.papas-grid {
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:1.5rem; align-items:center;
  margin-bottom:2.5rem;
}
.papas-card {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(201,168,76,0.2);
  border-radius:20px; padding:1.8rem;
  text-align:center; backdrop-filter:blur(10px);
  transition:all 0.3s;
}
.papas-card:hover { border-color:var(--gold); transform:translateY(-3px); }
.papas-icon { font-size:2.2rem; margin-bottom:0.8rem; display:block; }
.papas-card h3 { font-family:var(--f-serif); font-size:1.1rem; color:var(--gold-lt); font-weight:400; margin-bottom:1rem; }
.papa-nombre { font-family:var(--f-elegant); font-size:0.95rem; color:var(--white); line-height:1.6; }
.papa-sep { color:var(--gold); margin:0.5rem 0; opacity:0.6; }
.papas-heart { display:flex; align-items:center; justify-content:center; }
.padrinos-section { margin-top:1rem; }
.padrinos-titulo {
  font-family:var(--f-serif); font-size:1.5rem; font-weight:400;
  color:var(--gold-lt); text-align:center; margin-bottom:1.2rem;
}
.padrinos-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:0.8rem;
}
.padrino-card {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px; padding:0.8rem 1.2rem;
  display:flex; align-items:center; gap:1rem;
  transition:all 0.3s;
}
.padrino-card:hover { background:rgba(255,255,255,0.08); border-color:rgba(201,168,76,0.4); }
.padrino-tipo {
  font-size:0.68rem; font-weight:500; letter-spacing:0.12em; text-align:center;
  text-transform:uppercase; color:var(--blue-deep);
  background:rgba(26,58,92,0.12); border:1px solid rgba(201,168,76,0.3);
  border-radius:20px; padding:0.25rem 0.7rem;
  white-space:nowrap; flex-shrink:0;
}
.padrino-nombre { font-family:var(--f-elegant); font-size:0.9rem; color:var(--white); line-height:1.4; }

/* ══════════════════════════════════
   S3 · CUÁNDO & DÓNDE
══════════════════════════════════ */
.fecha-banner {
  display:flex; align-items:center; justify-content:center;
  gap:1.5rem; margin-bottom:3rem;
}
.fb-item { text-align:center; }
.fb-num {
  display:block; font-family:var(--f-serif); font-size:clamp(3rem,8vw,5rem);
  font-weight:700; color:var(--gold-dk); line-height:1;
}
.fb-label {
  display:block; font-size:0.65rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--blue-pale); margin-top:0.2rem;
}
.fb-sep { font-family:var(--f-serif); font-size:clamp(2rem,5vw,3.5rem); color:rgba(201,168,76,0.4); margin-top:-1rem; }
.lugares-grid {
  display:flex; align-items:center; justify-content:center;
  gap:1.5rem; flex-wrap:wrap; margin-bottom:2rem;
}
.lugar-card {
  flex:1; min-width:220px; max-width:340px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:22px; padding:2rem 1.5rem;
  text-align:center; backdrop-filter:blur(15px);
  transition:all 0.3s;
}
.lugar-card:hover { border-color:var(--gold); transform:translateY(-4px); }
.lugar-badge {
  display:inline-block; font-size:0.7rem; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--blue-deep);
  background:var(--gold); border-radius:20px;
  padding:0.3rem 1rem; margin-bottom:1.2rem; font-weight:500;
}
.lugar-badge.recepcion { background:var(--blue-pale); color:var(--blue-deep); }
.lugar-icon { font-size:2.5rem; margin-bottom:1rem; display:block; }
.lugar-card h3 { font-family:var(--f-serif); font-size:1.5rem; color:var(--white); font-weight:400; margin-bottom:0.5rem; }
.lugar-card p { font-size:1.2rem; color:var(--blue-pale); font-weight:300; line-height:1.6; margin-bottom:1rem; }
.lugar-hora { font-family:var(--f-elegant); font-style:italic; color:var(--blue-deep); font-size:1.6rem; margin-bottom:1.2rem; }
.btn-mapa {
  display:inline-flex; align-items:center; gap:0.4rem;
  background:var(--blue); color:var(--white); text-decoration:none;
  font-size:0.98rem; letter-spacing:0.08em; padding:0.6rem 1.2rem;
  border-radius:10px; transition:all 0.3s;
}
.btn-mapa:hover { background:var(--blue-mid); transform:translateY(-1px); }
.lugares-flecha { font-size:2rem; color:var(--gold); opacity:0.5; }

/* ══════════════════════════════════
   S4 · RUTA & VIDEO
══════════════════════════════════ */

.vest-card-header h4 { font-family:var(--f-serif); font-size:1.1rem; color:var(--white); font-weight:400; margin-bottom:0; }
.vest-card-header {
  display:flex; align-items:center; gap:0.6rem; margin-bottom:0.8rem;
}
.ruta-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1.5rem; margin-bottom:1.5rem;
}
.mapa-card,.video-card {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:18px; overflow:hidden;
}
.mapa-label,.video-label {
  padding:0.7rem 1.2rem;
  font-size:0.78rem; letter-spacing:0.1em;
  color:var(--gold-lt); border-bottom:1px solid rgba(255,255,255,0.07);
  background:rgba(0,0,0,0.2);
}
.mapa-embed,.video-embed {
  position:relative; width:100%; padding-bottom:56%;
}
.mapa-embed iframe,.video-embed iframe {
  position:absolute; inset:0; width:100%; height:100%;
}
.btn-ruta {
  display:block; text-align:center;
  padding:0.7rem; background:var(--blue);
  color:var(--white); text-decoration:none; font-size:0.8rem;
  letter-spacing:0.08em; transition:background 0.3s;
}
.btn-ruta:hover { background:var(--blue-mid); }
.video-note {
  padding:0.7rem 1.2rem; font-size:0.78rem;
  color:var(--blue-pale); font-style:italic; font-weight:300;
}
.indicaciones {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px; padding:1.5rem;
}
.indicaciones h4 { font-family:var(--f-serif); font-size:1rem; color:var(--gold-lt); font-weight:400; margin-bottom:1rem; }
.indicaciones ul { list-style:none; }
.indicaciones li {
  font-size:0.84rem; color:var(--blue-pale); padding:0.45rem 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
  font-weight:300; padding-left:1rem; position:relative;
}
.indicaciones li:last-child { border-bottom:none; }
.indicaciones li::before { content:'→'; position:absolute; left:0; color:var(--gold); }

/* ══════════════════════════════════
   S5 · CUENTA REGRESIVA
══════════════════════════════════ */
.countdown-big {
  display:flex; align-items:center; justify-content:center;
  gap:0.8rem; flex-wrap:wrap; margin:2rem 0;
}
.cdb-item {
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(201,168,76,0.35);
  border-radius:20px; padding:1.5rem 2rem;
  min-width:clamp(80px,15vw,130px);
  backdrop-filter:blur(12px);
  box-shadow:0 8px 24px rgba(91,155,213,0.2);
  transition:transform 0.3s;
}
.cdb-item:hover { transform:translateY(-3px); }
.cdb-num {
  display:block; font-family:var(--f-serif);
  font-size:clamp(2.5rem,6vw,4.5rem);
  font-weight:700; color:var(--gold-dk); line-height:1;
}
.cdb-label {
  display:block; font-size:0.65rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--blue-deep); margin-top:0.4rem;
}
.cdb-colon {
  font-family:var(--f-serif); font-size:clamp(2rem,4vw,3rem);
  color:var(--gold-dk); opacity:0.5; margin-bottom:1.5rem;
  animation:blink 1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:0.5} 50%{opacity:0.1} }
.cd-fecha-txt {
  font-family:var(--f-elegant); font-style:italic;
  font-size:clamp(1.8rem,4.5vw,3rem); color:var(--cream); letter-spacing:0.08em;
  margin-bottom:22rem;
}
.cd-progress-wrap {
  width:100%; max-width:500px; margin:0 auto 0.5rem;
  background:rgba(255,255,255,0.08); border-radius:10px; height:8px; overflow:hidden;
}
.cd-progress-bar {
  height:100%; background:linear-gradient(90deg,var(--gold-dk),var(--gold));
  border-radius:10px; transition:width 1s ease;
}
.cd-progress-labels {
  display:flex; justify-content:space-between;
  font-size:0.68rem; color:var(--blue-pale); margin-top:0.4rem;
  max-width:500px; margin:0.4rem auto 0;
}

 white-space:nowrap;
}


.prog-bar { display:flex; flex-direction:column; align-items:center; }
.prog-dot {
  width:14px; height:14px; border-radius:50%;
  background:var(--gold); border:2px solid var(--blue-deep);
  box-shadow:0 0 10px rgba(201,168,76,0.5);
  flex-shrink:0; margin-top:6px;
}
.first-dot { width:18px; height:18px; background:var(--white); box-shadow:0 0 16px rgba(255,255,255,0.6); }
.prog-line { flex:1; width:1px; background:linear-gradient(to bottom,var(--gold),rgba(201,168,76,0.15)); min-height:38px; margin:4px 0; }
.prog-card {
  display:flex; align-items:flex-start; gap:0.8rem;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07);
  border-radius:14px; padding:0.9rem 1.1rem; margin-bottom:0;
  transition:all 0.3s;
}
.prog-card:hover { background:rgba(255,255,255,0.08); border-color:rgba(201,168,76,0.3); }
.prog-icon { font-size:1.3rem; flex-shrink:0; margin-top:0.1rem; }
.prog-info h4 { font-family:var(--f-serif); font-size:0.95rem; color:var(--white); font-weight:400; margin-bottom:0.25rem; }
.prog-info p  { font-size:0.78rem; color:var(--blue-pale); font-weight:300; line-height:1.5; }


/* ══════════════════════════════════
   S6 · PROGRAMA
══════════════════════════════════ */
.programa-timeline { max-width:640px; margin:0 auto; }
.prog-item {
  display:grid; grid-template-columns:70px 28px 1fr;
  gap:0 1.2rem; align-items:flex-start;
}
.prog-time {
  font-family:var(--f-elegant); font-size:1rem; font-style:italic;
  color:var(--gold); text-align:right; padding-top:0.5rem;
  white-space:nowrap;
}
.prog-bar { display:flex; flex-direction:column; align-items:center; }
.prog-dot {
  width:14px; height:14px; border-radius:50%;
  background:var(--gold); border:2px solid var(--blue-deep);
  box-shadow:0 0 10px rgba(201,168,76,0.5);
  flex-shrink:0; margin-top:6px;
}
.first-dot { width:18px; height:18px; background:var(--white); box-shadow:0 0 16px rgba(255,255,255,0.6); }
.prog-line { flex:1; width:1px; background:linear-gradient(to bottom,var(--gold),rgba(201,168,76,0.15)); min-height:38px; margin:4px 0; }
.prog-card {
  display:flex; align-items:flex-start; gap:0.8rem;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07);
  border-radius:14px; padding:0.9rem 1.1rem; margin-bottom:0;
  transition:all 0.3s;
}
.prog-card:hover { background:rgba(255,255,255,0.08); border-color:rgba(201,168,76,0.3); }progr
.prog-icon { font-size:1.3rem; flex-shrink:0; margin-top:0.1rem; }
.prog-info h4 { font-family:var(--f-serif); font-size:0.95rem; color:var(--white); font-weight:400; margin-bottom:0.25rem; }
.prog-info p  { font-size:0.78rem; color:var(--blue-pale); font-weight:300; line-height:1.5; }

/* ══════════════════════════════════
   S7 · CÓDIGO DE VESTIMENTA
══════════════════════════════════ */
.vestimenta-main { margin-bottom:2rem; }
.vest-badge-big {
  display:inline-block; font-family:var(--f-serif);
  font-size:clamp(1.3rem,3.5vw,2rem); color:var(--white);
  border:1px solid rgba(201,168,76,0.4); padding:0.7rem 2.5rem;
  border-radius:50px; letter-spacing:0.08em; margin-bottom:1rem;
  background:rgba(201,168,76,0.08);
}
.vest-desc { font-size:0.9rem; color:var(--blue-pale); font-weight:300; line-height:1.7; }
.vest-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1.5rem; margin-bottom:2rem; text-align:left;
}
.vest-card { border-radius:18px; padding:1.8rem; backdrop-filter:blur(10px); }
.vest-card.allow { background:rgba(39,174,96,0.08); border:1px solid rgba(39,174,96,0.25); }
.vest-card.deny  { background:rgba(231,76,60,0.08);  border:1px solid rgba(231,76,60,0.25); }
.vest-card-icon { font-size:1.8rem; margin-bottom:0.7rem; display:block; }
.vest-card h4 { font-family:var(--f-serif); font-size:1.1rem; color:var(--white); font-weight:400; margin-bottom:0.8rem; }
.vest-card ul { list-style:none; }
.vest-card li { font-size:0.82rem; color:var(--blue-pale); padding:0.35rem 0; font-weight:300; border-bottom:1px solid rgba(255,255,255,0.05); }
.vest-card li:last-child { border-bottom:none; }
.vest-card.allow li::before { content:'✓ '; color:var(--green-ok); font-weight:600; }
.vest-card.deny  li::before { content:'✗ '; color:var(--red-no);  font-weight:600; }
.colores-section { margin-bottom:1.5rem; }
.colores-titulo { font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-bottom:0.8rem; }
.colores-row { display:flex; gap:0.7rem; justify-content:center; flex-wrap:wrap; }
.color-swatch {
  width:36px; height:36px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.2);
  cursor:default; transition:transform 0.2s;
}
.color-swatch:hover { transform:scale(1.2); }

/* ══════════════════════════════════
   S8 · CARRUSEL
══════════════════════════════════ */
.carousel-wrap {
  display:flex; align-items:center; gap:0.8rem;
  margin-bottom:1rem; position:relative;
}
.carousel-track-wrap { flex:1; overflow:hidden; border-radius:16px; }
.carousel-track {
  display:flex; gap:1rem;
  transition:transform 0.5s cubic-bezier(0.77,0,0.175,1);
}
/* Imagen real de galería */
.car-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
.car-slide { flex:0 0 calc((100% - 2rem) / 3); aspect-ratio:4/3; }
.car-ph {
  width:100%; height:100%;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(201,168,76,0.18);
  border-radius:14px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:0.5rem; transition:all 0.3s; overflow:hidden;
}
.car-ph img { width:100%; height:100%; object-fit:cover; }
.car-ph:hover { border-color:var(--gold); }
.car-emoji { font-size:2.5rem; }
.car-label { font-size:0.72rem; color:rgba(255,255,255,0.4); letter-spacing:0.08em; }
.car-btn {
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(201,168,76,0.3);
  color:var(--gold); font-size:2rem; line-height:1;
  width:44px; height:44px; border-radius:50%;
  cursor:pointer; flex-shrink:0; transition:all 0.3s;
  display:flex; align-items:center; justify-content:center;
}
.car-btn:hover { background:var(--gold); color:var(--blue-deep); }
.carousel-dots { display:flex; justify-content:center; gap:0.5rem; margin-top:0.8rem; }
.car-dot {
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,0.25); cursor:pointer; transition:all 0.3s;
}
.car-dot.active { background:var(--gold); transform:scale(1.3); }
.final-sep { margin:2rem 0 1.5rem; }
.final-rsvp { text-align:center; padding:2rem; background:rgba(201,168,76,0.07); border:1px solid rgba(201,168,76,0.2); border-radius:20px; }
.final-msg { font-family:var(--f-elegant); font-size:1.5rem; color:var(--white); line-height:1.8; margin-bottom:0; }
.final-msg strong { color:var(--gold-dk); }
.final-hashtag { font-size:1.8rem; color:var(--gold-dk); letter-spacing:0.12em; margin-top:1rem; font-family: var(--f-serif);}

/* ══════════════════════════════════
   NAV DOTS (DESKTOP)
══════════════════════════════════ */
.nav-dots {
  position:fixed; right:1.5rem; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:0.6rem; z-index:100;
}
.dot {
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,0.2); border:none; cursor:pointer;
  transition:all 0.3s; position:relative;
}
.dot::after {
  content:attr(title); position:absolute;
  right:1.6rem; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.75); color:var(--white);
  font-size:0.68rem; padding:0.25rem 0.6rem; border-radius:6px;
  white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity 0.3s; font-family:var(--f-sans);
}
.dot:hover::after { opacity:1; }
.dot.active,.dot:hover { background:var(--gold); box-shadow:0 0 10px rgba(201,168,76,0.6); transform:scale(1.4); }

/* ══════════════════════════════════
   MOBILE MENU
══════════════════════════════════ */
.mobile-menu-btn {
  display:none; position:fixed; top:0.5rem; right:0.5rem; z-index:300;
  flex-direction:column; gap:5px; cursor:pointer;
  background:rgba(0,17,51,0.85); padding:0.55rem;
  border-radius:8px; backdrop-filter:blur(12px);
  border:1px solid rgba(201,168,76,0.2);
}
.mobile-menu-btn span { display:block; width:22px; height:2px; background:var(--white); border-radius:2px; transition:all 0.3s; }
.mobile-menu-btn.open span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.mobile-menu-btn.open span:nth-child(2){ opacity:0; }
.mobile-menu-btn.open span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); }
.mobile-nav {
  display:none; position:fixed; top:0; right:0;
  width:230px; height:100vh; z-index:200;
  background:rgba(0,8,30,0.97); backdrop-filter:blur(20px);
  flex-direction:column; align-items:flex-start;
  padding:2.5rem 1.5rem 2rem;
  transform:translateX(100%); transition:transform 0.4s ease;
  border-left:1px solid rgba(201,168,76,0.2);
  overflow-y:auto;
}
.mobile-nav.open { transform:translateX(0); }
.mnav-logo {
  font-family:var(--f-serif); font-size:0.9rem; color:var(--gold);
  margin-bottom:2rem; padding-bottom:1rem;
  border-bottom:1px solid rgba(255,255,255,0.1); width:100%;
}
.mobile-nav-item {
  background:none; border:none; color:rgba(255,255,255,0.5);
  font-family:var(--f-sans); font-size:0.9rem; font-weight:300;
  cursor:pointer; padding:0.6rem 0; transition:color 0.3s;
  width:100%; text-align:left; letter-spacing:0.04em;
}
.mobile-nav-item:hover,.mobile-nav-item.active { color:var(--gold); }

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media(max-width:900px) {
    
    .cd-fecha-txt {
  font-family:var(--f-elegant); font-style:italic;
  font-size:clamp(2.2rem,4.5vw,3rem); color:var(--cream); letter-spacing:0.08em;
  margin-bottom:18rem;
}
.countdown-big {
  display:flex; align-items:center; justify-content:center;
  gap:0.8rem; flex-wrap:wrap; margin:2.8rem 0;
}
  .split-layout {
    grid-template-columns:1fr;
    min-height:unset;      /* quita el 100vh forzado en móvil */
    height:auto;
  }
  .split-photo { min-height:200px; height:28vh; } /* foto más compacta */
  .split-text  { padding:2rem 1.5rem 3rem; justify-content:flex-start; }
  .ruta-grid { grid-template-columns:1fr; }
}

@media(max-width:768px) {
  .nav-dots { display:none; }
  .mobile-menu-btn { display:flex; }
  .mobile-nav { display:flex; }

  .section-content { padding:3.5rem 1.2rem 5rem; }
  .padrinos-section { padding-bottom:3rem; }

  /* CAMBIO: padding fijo 13rem → clamp fluido */
  .hero-content {
    align-items: flex-end;
    text-align: right;
    margin-right: 5%;
    margin-left: auto;
    padding: clamp(0.8rem,3vw,2rem) clamp(0.5rem,2vw,1.5rem) clamp(3.5rem,5vw,4rem);
    max-width: min(480px, 88vw);
  }
  .divider-gold {
    align-self: flex-end;
    margin: 0.6rem clamp(0.2rem,2vw,30px);
  }
  .hero-names    { font-size:clamp(2rem,8vw,3.5rem); color:var(--baby-sky);}
  .hero-amp      { font-size:clamp(1rem,5vw,2rem); margin:0.1rem clamp(0.3rem,3vw,50px); }
  .hero-date-big { font-size:clamp(1.2rem,4.5vw,2rem); font-weight:600; }

  .monogram-svg { width:80px; height:80px; }
  .split-text { padding:0.5rem 1.5rem; }
  .papas-grid { grid-template-columns:1fr; gap:1rem; }
  .papas-heart { display:none; }
  .vest-grid { grid-template-columns:1fr; }
  .lugares-flecha { display:none; }
  .lugares-grid { flex-direction:column; }
  .lugar-card { max-width:100%; }
  .fecha-banner { gap:0.8rem; }
  .fb-sep { font-size:2rem; }
  .car-slide { flex:0 0 100%; }
  .countdown-big { gap:0.4rem; }
  .cdb-item { padding:1rem 1.2rem; min-width:70px; }
  .cdb-num { font-size:2.2rem; }
  .cdb-colon { font-size:1.5rem; }
}

/* NUEVO: breakpoint específico para pantallas pequeñas tipo S21 (390px) */
@media(max-width:390px) {
  .hero-content {
    margin: auto 3% auto auto;
   
    max-width: 92vw;
  }
  .padrinos-section { padding-bottom:3rem; }
  .hero-names    { font-size:clamp(1.8rem,7vw,2.8rem); color:var(--baby-sky);}
  .hero-amp      { font-size:clamp(0.9rem,4.5vw,1.6rem); margin:0 clamp(0.2rem,2vw,30px); color:var(--cream); }
  .hero-date-big { font-size:clamp(1rem,4vw,1.6rem); font-weight:600; }
  .divider-gold  { margin:0.4rem clamp(0.1rem,1.5vw,20px); gap:0.5rem; }
  .dline         { max-width:80px; }
}

@media(max-width:480px) {
  .hero-amp {
    font-family:var(--f-serif); font-style:italic;
    font-size:clamp(1.5rem,4vw,3rem); color:var(--cream);
    align-items: center;
    margin:0.2rem 60px; animation:fadeUp 0.8s ease 0.75s both;
  }
  .hero-date-big {
    font-family:var(--f-elegant); font-size:clamp(2rem,3vw,1.6rem);
    color:var(--cream); letter-spacing:0.08em; font-weight: bold;
    animation:fadeUp 0.8s ease 1s both;
  }
  .hero-watermark {
    position:absolute; top:52%; left:40%;
    transform:translate(-50%, -50%);
    width:120%; height:100%;
    z-index:1; pointer-events:none;
    background-image:url('../img/Inicio.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    opacity:0.99;
  }
  .hero-names { font-size:3rem; text-shadow: 0 0 15px rgba(26, 58, 92, 0.25); }
  .padrinos-grid { grid-template-columns:1fr; }
  .prog-item { grid-template-columns:55px 22px 1fr; gap:0 0.8rem; }
  .prog-time { font-size:1.6rem; }
  .colores-row { gap:0.5rem; }
  .color-swatch { width:30px; height:30px; }

    

}