/* ═══════════════════════════════════════
   BAUTIZO DE ANDRÉ · Estilos principales
   Paleta: #092b51 navy | #c1a37f gold | #faf7f2 cream
═══════════════════════════════════════ */

:root {
  --navy:   #092b51;
  --navy2:  #0d3568;
  --gold:   #c1a37f;
  --gold2:  #d4b896;
  --cream:  #faf7f2;
  --cream2: #f1ebe2;
  --olive:  #303722;
  --gray:   #858489;
  --white:  #ffffff;
  --shadow: 0 8px 40px rgba(9,43,81,.15);
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  font-family:'Lato', sans-serif;
  background:var(--cream);
  color:var(--navy);
  overflow-x:hidden;
}

/* ── HERO ──────────────────────────────── */
.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:
    linear-gradient(165deg, var(--navy) 0%, #0a3666 40%, #1a4a7a 70%, var(--navy) 100%);
  overflow:hidden;
}

.hero-overlay {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(193,163,127,.18) 0%, transparent 65%);
}

/* Pétalos flotantes */
.petalo {
  position:absolute;
  color:var(--gold);
  opacity:.18;
  animation:float 8s ease-in-out infinite;
  user-select:none;
  pointer-events:none;
}
.petalo-1 { font-size:4rem; top:12%; left:8%;  animation-delay:0s;   animation-duration:9s; }
.petalo-2 { font-size:2.5rem; top:20%; right:10%; animation-delay:2s; animation-duration:11s; }
.petalo-3 { font-size:3.5rem; bottom:25%; left:15%; animation-delay:4s; animation-duration:8s; }
.petalo-4 { font-size:2rem; bottom:20%; right:8%; animation-delay:1.5s; animation-duration:12s; }

@keyframes float {
  0%,100% { transform:translateY(0) rotate(0deg); opacity:.18; }
  50%      { transform:translateY(-24px) rotate(10deg); opacity:.28; }
}

.hero-content {
  position:relative;
  z-index:2;
  padding:2rem;
  max-width:620px;
}

.hero-pre {
  font-family:'Cormorant Garamond', serif;
  font-size:1.1rem;
  font-style:italic;
  color:var(--gold2);
  letter-spacing:.25em;
  text-transform:uppercase;
  margin-bottom:.5rem;
  opacity:0;
  animation:fadeUp .8s .3s forwards;
}

.hero-titulo {
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(2.5rem, 7vw, 4.5rem);
  font-weight:300;
  color:var(--white);
  letter-spacing:.1em;
  opacity:0;
  animation:fadeUp .8s .5s forwards;
}

.hero-nombre {
  font-family:'Great Vibes', cursive;
  font-size:clamp(4rem, 14vw, 8rem);
  color:var(--gold);
  line-height:1.1;
  text-shadow:0 4px 30px rgba(193,163,127,.4);
  opacity:0;
  animation:fadeUp .9s .7s forwards;
}

.linea-dorada {
  width:80px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  margin:1.5rem auto;
  opacity:0;
  animation:fadeIn .8s 1s forwards;
}

.hero-fecha {
  font-family:'Cormorant Garamond', serif;
  font-size:1rem;
  color:var(--gray);
  letter-spacing:.15em;
  text-transform:uppercase;
  margin-bottom:2rem;
  opacity:0;
  animation:fadeUp .8s 1.1s forwards;
}

.hero-btn {
  opacity:0;
  animation:fadeUp .8s 1.3s forwards;
}

/* Hero — doble evento */
.hero-titulo {
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(2rem, 6vw, 3.8rem);
  font-weight:300;
  color:var(--white);
  letter-spacing:.08em;
}
.amp {
  font-family:'Great Vibes', cursive;
  color:var(--gold);
  font-size:1.3em;
}
.hero-divider {
  display:flex;
  align-items:center;
  gap:.8rem;
  margin:.8rem auto;
  width:fit-content;
  opacity:0;
  animation:fadeIn .8s .8s forwards;
}
.divider-line {
  width:60px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.divider-icon {
  color:var(--gold);
  font-size:.85rem;
}
.hero-y-bautizo {
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.05rem;
  color:var(--gold2);
  letter-spacing:.1em;
  opacity:0;
  animation:fadeUp .7s .9s forwards;
  margin-bottom:.2rem;
}

.scroll-hint {
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
}
.scroll-hint span {
  display:block;
  width:24px;
  height:24px;
  border-right:2px solid var(--gold);
  border-bottom:2px solid var(--gold);
  transform:rotate(45deg);
  animation:scrollPulse 1.5s infinite;
  opacity:.7;
}
@keyframes scrollPulse {
  0%,100% { transform:rotate(45deg) translateY(0); opacity:.7; }
  50%      { transform:rotate(45deg) translateY(6px); opacity:.3; }
}

/* ── BOTONES ─────────────────────────── */
.btn-gold {
  display:inline-block;
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);
  color:var(--navy);
  font-family:'Lato', sans-serif;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.85rem 2.2rem;
  border-radius:50px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(193,163,127,.4);
  transition:all .3s ease;
}
.btn-gold:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(193,163,127,.5);
  background:linear-gradient(135deg, var(--gold2) 0%, var(--gold) 100%);
}
.btn-gold.btn-lg { font-size:1.05rem; padding:1rem 2.8rem; }

.btn-outline {
  display:inline-block;
  border:1.5px solid var(--gold);
  color:var(--gold);
  font-family:'Lato', sans-serif;
  font-weight:400;
  font-size:.9rem;
  letter-spacing:.06em;
  padding:.75rem 1.8rem;
  border-radius:50px;
  text-decoration:none;
  background:transparent;
  transition:all .3s ease;
}
.btn-outline:hover {
  background:var(--gold);
  color:var(--navy);
}

.btn-back {
  position:fixed;
  top:1rem;
  left:1rem;
  z-index:100;
  color:var(--gold);
  text-decoration:none;
  font-size:.85rem;
  letter-spacing:.05em;
  background:rgba(9,43,81,.7);
  padding:.5rem 1rem;
  border-radius:50px;
  backdrop-filter:blur(8px);
  transition:background .3s;
}
.btn-back:hover { background:var(--navy); }

/* ── DECORACIÓN LINEAS ───────────────── */
.decoracion-lineas {
  display:flex;
  align-items:center;
  gap:1.2rem;
  margin-bottom:2rem;
}
.decoracion-lineas span:not(.linea-txt) {
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.linea-txt {
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1rem;
  color:var(--gold);
  letter-spacing:.15em;
  white-space:nowrap;
}

.section-title {
  font-family:'Great Vibes', cursive;
  font-size:clamp(2.2rem, 6vw, 3.5rem);
  color:var(--navy);
  margin-bottom:1.5rem;
  text-align:center;
}

/* ── QR SECTION ──────────────────────── */
.qr-section {
  background:var(--cream2);
  padding:5rem 2rem;
}
.qr-section .decoracion-lineas { max-width:700px; margin-left:auto; margin-right:auto; }

.qr-contenido {
  max-width:860px;
  margin:0 auto;
  display:flex;
  gap:3rem;
  align-items:center;
  flex-wrap:wrap;
}

.qr-texto {
  flex:1;
  min-width:260px;
}
.qr-texto h3 {
  font-family:'Cormorant Garamond', serif;
  font-size:1.8rem;
  font-weight:400;
  color:var(--navy);
  margin-bottom:1.2rem;
}
.qr-texto ol {
  list-style:none;
  counter-reset:steps;
  margin-bottom:1.8rem;
}
.qr-texto ol li {
  counter-increment:steps;
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  margin-bottom:.85rem;
  font-size:.95rem;
  color:var(--olive);
  line-height:1.5;
}
.qr-texto ol li::before {
  content:counter(steps);
  min-width:28px;
  height:28px;
  background:var(--gold);
  color:var(--navy);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  font-weight:700;
  flex-shrink:0;
}

.qr-imagen { text-align:center; flex-shrink:0; }
.qr-marco {
  width:200px;
  height:200px;
  padding:12px;
  background:var(--cream);
  border-radius:12px;
  border:2px solid var(--gold);
  box-shadow:var(--shadow);
  margin:0 auto;
}
.qr-marco img { width:100%; height:100%; }
.qr-caption {
  margin-top:.75rem;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  color:var(--gold);
  font-size:1rem;
  letter-spacing:.1em;
}

/* ── GALERÍA SECTION ─────────────────── */
.galeria-section {
  padding:5rem 2rem;
  text-align:center;
}

.galeria-grid {
  max-width:1100px;
  margin:0 auto 2rem;
  columns:2 200px;
  gap:1rem;
}
.galeria-grid .galeria-item {
  break-inside:avoid;
  margin-bottom:1rem;
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:var(--shadow);
  position:relative;
}
.galeria-grid .galeria-item img {
  width:100%;
  display:block;
  transition:transform .4s ease;
}
.galeria-grid .galeria-item:hover img { transform:scale(1.04); }

.galeria-vacia {
  text-align:center;
  padding:4rem 2rem;
  color:var(--gray);
  grid-column:1/-1;
}
.vacia-icono { font-size:3rem; margin-bottom:1rem; }

.ver-mas-btn { margin-top:1rem; }

/* ── CTA SECTION ─────────────────────── */
.cta-section {
  background:linear-gradient(135deg, var(--navy) 0%, #0d3568 100%);
  padding:5rem 2rem;
  text-align:center;
}
.cta-inner { max-width:580px; margin:0 auto; }
.petalo-deco { color:var(--gold); font-size:1.5rem; letter-spacing:1rem; margin-bottom:1.5rem; opacity:.6; }
.cta-section h3 {
  font-family:'Great Vibes', cursive;
  font-size:clamp(2.5rem, 8vw, 4rem);
  color:var(--white);
  margin-bottom:1rem;
}
.cta-section p {
  font-family:'Cormorant Garamond', serif;
  font-size:1.1rem;
  color:var(--gray);
  margin-bottom:2rem;
  line-height:1.7;
}

/* ── FOOTER ──────────────────────────── */
.footer {
  background:var(--navy);
  color:var(--gray);
  text-align:center;
  padding:2rem;
}
.footer em {
  font-family:'Great Vibes', cursive;
  color:var(--gold);
  font-size:1.3rem;
}
.footer-sub { font-size:.8rem; margin-top:.5rem; opacity:.6; }

/* ── REVEAL ANIMATIONS ───────────────── */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-section { opacity:0; transform:translateY(40px); transition:opacity .8s ease, transform .8s ease; }
.reveal-section.visible { opacity:1; transform:translateY(0); }

/* ── ANIMATIONS ──────────────────────── */
@keyframes fadeUp {
  to { opacity:1; transform:translateY(0); }
  from { opacity:0; transform:translateY(24px); }
}
@keyframes fadeIn {
  to { opacity:1; }
  from { opacity:0; }
}

/* ── LIGHTBOX ────────────────────────── */
.lightbox {
  position:fixed;
  inset:0;
  background:rgba(9,27,46,.95);
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(6px);
}
.lightbox.active { display:flex; }
.lightbox-close {
  position:absolute;
  top:1.5rem;
  right:1.5rem;
  background:none;
  border:none;
  color:var(--gold);
  font-size:1.5rem;
  cursor:pointer;
  z-index:2;
  line-height:1;
}
.lightbox-prev, .lightbox-next {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(193,163,127,.2);
  border:1px solid var(--gold);
  color:var(--gold);
  font-size:2rem;
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:2;
  transition:background .3s;
}
.lightbox-prev { left:1rem; }
.lightbox-next { right:1rem; }
.lightbox-prev:hover, .lightbox-next:hover { background:rgba(193,163,127,.4); }
.lightbox-content { text-align:center; max-width:90vw; }
.lightbox-content img { max-width:90vw; max-height:70vh; border-radius:8px; object-fit:contain; }
.lightbox-info { margin-top:1rem; }
.lightbox-info strong { color:var(--gold); font-size:1rem; display:block; margin-bottom:.3rem; }
.lightbox-info p { color:var(--gray); font-size:.9rem; max-width:480px; margin:0 auto; }

/* ═══════════════════════════════════════
   PÁGINA SUBIR
═══════════════════════════════════════ */
.page-subir { background:var(--navy); min-height:100vh; }

.subir-wrapper { max-width:640px; margin:0 auto; padding:0 1rem 4rem; }

.subir-header { text-align:center; padding:2rem 0 1.5rem; }
.subir-hero { padding-top:.5rem; }
.subir-hero .hero-pre {
  font-family:'Cormorant Garamond',serif;
  font-size:.9rem;
  font-style:italic;
  color:var(--gold);
  letter-spacing:.2em;
  text-transform:uppercase;
}
.subir-nombre {
  font-family:'Great Vibes', cursive;
  font-size:clamp(3rem, 12vw, 5rem);
  color:var(--white);
  line-height:1.1;
}
.subir-subtitulo {
  font-family:'Cormorant Garamond',serif;
  font-size:1rem;
  color:var(--gray);
  margin-top:.5rem;
}

.subir-card {
  background:rgba(255,255,255,.05);
  border:1px solid rgba(193,163,127,.2);
  border-radius:20px;
  padding:2rem;
  backdrop-filter:blur(10px);
}

/* Drop zone */
.drop-zone {
  border:2px dashed rgba(193,163,127,.4);
  border-radius:14px;
  padding:2.5rem 1rem;
  text-align:center;
  cursor:pointer;
  transition:all .3s ease;
  margin-bottom:1.5rem;
  background:rgba(193,163,127,.04);
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color:var(--gold);
  background:rgba(193,163,127,.1);
}
.drop-icon { font-size:2.5rem; margin-bottom:.5rem; }
.drop-title { color:var(--white); font-size:1rem; font-weight:700; }
.drop-sub { color:var(--gray); font-size:.8rem; margin-top:.25rem; }
.file-input-hidden { display:none; }

/* Preview grid */
.preview-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  gap:.75rem;
  margin-bottom:1.5rem;
}
.preview-item {
  position:relative;
  border-radius:8px;
  overflow:hidden;
  aspect-ratio:1;
  background:rgba(9,43,81,.5);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.preview-item img { width:100%; height:100%; object-fit:cover; }
.preview-item .preview-video-icon { font-size:2rem; }
.preview-item p { font-size:.65rem; color:var(--gray); padding:0 .3rem; text-align:center; }
.preview-remove {
  position:absolute;
  top:.25rem;
  right:.25rem;
  background:rgba(0,0,0,.7);
  color:#fff;
  border:none;
  border-radius:50%;
  width:20px;
  height:20px;
  font-size:.75rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* Form fields */
.form-field { margin-bottom:1.2rem; }
.form-field label {
  display:block;
  color:var(--gold);
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:.5rem;
}
.req { color:#c1637f; }
.form-field input, .form-field textarea {
  width:100%;
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(193,163,127,.25);
  border-radius:10px;
  color:var(--white);
  font-family:'Lato', sans-serif;
  font-size:1rem;
  padding:.85rem 1rem;
  transition:border .3s;
  outline:none;
  -webkit-appearance:none;
}
.form-field input:focus, .form-field textarea:focus { border-color:var(--gold); }
.form-field textarea { resize:vertical; min-height:90px; }
.char-count { display:block; text-align:right; font-size:.75rem; color:var(--gray); margin-top:.25rem; }

.btn-submit { width:100%; margin-top:.5rem; font-size:1.05rem; padding:1rem; }

/* Progress */
.progress-wrap { margin-top:1.5rem; }
.progress-bar {
  height:6px;
  background:linear-gradient(90deg, var(--gold), var(--gold2));
  border-radius:3px;
  width:0%;
  transition:width .3s ease;
}
.progress-txt { color:var(--gray); font-size:.85rem; margin-top:.5rem; text-align:center; }

/* Success */
.success-msg {
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:2rem 0;
  gap:1rem;
}
.success-icon { font-size:4rem; animation:bounce .6s ease; }
@keyframes bounce {
  0%,100% { transform:scale(1); }
  50%      { transform:scale(1.3); }
}
.success-msg h3 {
  font-family:'Great Vibes', cursive;
  font-size:2.5rem;
  color:var(--gold);
}
.success-msg p { color:var(--gray); }
.success-btns { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:.5rem; }
.success-btns button { font-family:'Lato', sans-serif; }

/* ═══════════════════════════════════════
   PÁGINA GALERÍA
═══════════════════════════════════════ */
.page-galeria { background:var(--cream); }

.galeria-page-header {
  background:linear-gradient(135deg, var(--navy) 0%, #0d3568 100%);
  padding:4rem 2rem 3rem;
  text-align:center;
  position:relative;
}
.galeria-page-titulo {
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(1.8rem,6vw,3rem);
  color:var(--white);
  font-weight:300;
  margin-bottom:.5rem;
}
.galeria-page-titulo em {
  font-family:'Great Vibes', cursive;
  font-style:normal;
  color:var(--gold);
  font-size:1.4em;
}
.galeria-page-sub {
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  color:var(--gray);
}

.galeria-page-grid {
  max-width:1200px;
  margin:2.5rem auto;
  padding:0 1.5rem;
  columns:2 200px;
  gap:1rem;
}
.galeria-page-grid .galeria-item {
  break-inside:avoid;
  margin-bottom:1rem;
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--white);
}
.galeria-page-grid .galeria-item img {
  width:100%;
  display:block;
  cursor:pointer;
  transition:transform .4s ease;
}
.galeria-page-grid .galeria-item img:hover { transform:scale(1.03); }
.galeria-video-placeholder {
  height:180px;
  background:var(--navy);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  gap:.5rem;
}
.video-play { font-size:3rem; color:var(--gold); }
.galeria-video-placeholder p { color:var(--white); font-size:.9rem; }
.galeria-item-info {
  padding:.75rem 1rem;
  font-size:.85rem;
  color:var(--olive);
}
.galeria-item-info span { font-weight:700; color:var(--navy); }
.galeria-item-info p { color:var(--gray); margin-top:.25rem; font-style:italic; font-size:.82rem; }
.galeria-loading { text-align:center; padding:4rem; color:var(--gray); grid-column:1/-1; }

.galeria-page-cta { text-align:center; padding:2rem; margin-bottom:3rem; }

/* ── RESPONSIVE ──────────────────────── */
@media (max-width:600px) {
  .qr-contenido { flex-direction:column; text-align:center; }
  .qr-texto ol li { text-align:left; }
  .qr-imagen { width:100%; }
  .galeria-grid { columns:2; }
  .subir-card { padding:1.5rem 1rem; }
  .lightbox-prev { left:.25rem; }
  .lightbox-next { right:.25rem; }
}