/* ==========================================================
   MOBILE FIRST FIX - Natalia & Iván
   Esta hoja se carga DESPUÉS de styles.css para corregir
   definitivamente la visualización en celulares.
   ========================================================== */

* {
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

body {
  min-width: 320px;
}

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

.mobile-bottom-bar {
  display: none;
}

/* ------------------------------
   CELULARES Y TABLETS PEQUEÑAS
   ------------------------------ */
@media (max-width: 900px) {
  body {
    padding-bottom: calc(74px + env(safe-area-inset-bottom)) !important;
  }

  /* Se elimina la barra superior en móvil. Es la causa del problema visual. */
  .topbar,
  nav.topbar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  /* Barra inferior móvil, pequeña y estable */
  .mobile-bottom-bar {
    position: fixed;
    left: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 9999;
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    align-items: center;
    gap: 7px;
    width: min(94vw, 390px);
    min-height: 52px;
    padding: 7px;
    border: 1px solid rgba(25, 58, 90, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 34px rgba(36, 54, 74, 0.20);
    backdrop-filter: blur(16px);
  }

  .mobile-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 0;
    border-radius: 999px;
    padding: 8px 10px;
    background: #eef8fd;
    color: #193a5a;
    font-family: "Montserrat", system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
  }

  .mobile-pill-primary {
    background: #2f6690;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(47, 102, 144, 0.24);
  }

  /* Portada */
  .hero {
    min-height: 100svh !important;
    height: auto !important;
    padding: 26px 14px 34px !important;
    display: grid !important;
    place-items: center !important;
    background-position: center top !important;
    background-size: cover !important;
  }

  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 12px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  h1,
  .hero-content h1 {
    font-size: clamp(3rem, 17vw, 4.7rem) !important;
    line-height: 0.86 !important;
    letter-spacing: 0.01em !important;
    margin: 16px 0 8px !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
  }

  h1 span,
  .hero-content h1 span {
    font-size: 0.58em !important;
  }

  .hero-date {
    font-size: 1.05rem !important;
    letter-spacing: 0.10em !important;
    margin-bottom: 22px !important;
  }

  .overline,
  .section-label {
    font-size: 0.68rem !important;
    letter-spacing: 0.13em !important;
  }

  .ornament span {
    width: 52px !important;
  }

  .primary-btn,
  .secondary-btn {
    min-height: 42px !important;
    padding: 11px 18px !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.035em !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  /* Ventana inicial */
  #celebrationGate,
  .celebration-gate {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden auto !important;
    padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)) !important;
    display: grid !important;
    place-items: center !important;
  }

  #celebrationGate.hidden,
  .celebration-gate.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .gate-card {
    width: min(92vw, 430px) !important;
    max-width: 92vw !important;
    padding: 28px 18px !important;
    margin: 0 auto !important;
    border-radius: 26px !important;
  }

  .gate-card h2 {
    font-size: clamp(3rem, 16vw, 4.6rem) !important;
    line-height: 0.82 !important;
  }

  .gate-card p {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
  }

  .balloon {
    transform: scale(0.72);
  }

  /* Rejilla de secciones */
  main,
  section,
  .section,
  .invite-strip,
  .story-countdown,
  .event-section,
  .dress-section,
  .gallery-section,
  .videos-section,
  .photo-upload-section,
  .rsvp-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .invite-strip,
  .story-countdown,
  .event-section,
  .dress-section,
  .rsvp-section,
  .photo-upload-section,
  .event-cards,
  .timeline,
  .dress-columns,
  .form-row,
  .guest-counts,
  .countdown,
  .video-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .invite-message,
  .story-panel,
  .countdown-card,
  .event-center,
  .dress-section,
  .gallery-section,
  .videos-section,
  .photo-upload-section,
  .rsvp-form,
  .guest-card {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .invite-message {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .invite-photo,
  .invite-sketch,
  .event-image {
    min-height: 230px !important;
    max-height: 330px !important;
    overflow: hidden !important;
  }

  .invite-photo img,
  .invite-sketch img,
  .event-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .event-image.right {
    display: none !important;
  }

  h2,
  .invite-message h2,
  .story-panel h2,
  .event-center h2,
  .dress-info h2,
  .gallery-section h2,
  .videos-section h2,
  .photo-upload-section h2 {
    font-size: clamp(1.75rem, 8vw, 2.55rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0.04em !important;
    max-width: 100% !important;
  }

  .script {
    font-size: clamp(2.25rem, 11vw, 3.6rem) !important;
  }

  .script-small {
    font-size: clamp(1.65rem, 9vw, 2.45rem) !important;
  }

  .timeline article,
  .event-card,
  .guest-card,
  .rsvp-form,
  .countdown-card,
  .story-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  .story-countdown {
    padding: 46px 14px !important;
  }

  .countdown {
    width: min(100%, 360px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .countdown div {
    padding: 12px 8px !important;
  }

  .countdown strong {
    font-size: 2.1rem !important;
  }

  /* Galería principal */
  .auto-gallery {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 12px !important;
    overflow: hidden !important;
  }

  .auto-gallery .gallery-arrow {
    display: none !important;
  }

  .main-slide {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .main-slide img,
  #mainGalleryImage {
    width: 100% !important;
    height: min(62svh, 460px) !important;
    min-height: 280px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 20px !important;
  }

  .thumb-row {
    display: flex !important;
    overflow-x: auto !important;
    gap: 10px !important;
    padding: 10px 0 6px !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .thumb-row button {
    flex: 0 0 auto !important;
  }

  .thumb-row img {
    width: 68px !important;
    height: 68px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  /* Videos */
  .video-grid {
    width: 100% !important;
  }

  .video-card,
  .videos-section article {
    width: 100% !important;
    max-width: 100% !important;
  }

  .video-card video,
  .videos-section video,
  video {
    width: 100% !important;
    height: auto !important;
    max-height: 70svh !important;
    border-radius: 18px !important;
    object-fit: contain !important;
    background: #000 !important;
  }

  /* QR fotos */
  .photo-upload-section {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  .qr-card {
    width: min(100%, 320px) !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    padding: 20px 16px !important;
  }

  .qr-card img,
  img[alt*="QR"],
  img[src*="qr"] {
    width: min(230px, 72vw) !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* RSVP */
  .rsvp-section {
    margin: 0 auto 38px !important;
  }

  .guest-card {
    min-height: auto !important;
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  .rsvp-form {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  label {
    font-size: 0.72rem !important;
  }

  input,
  select,
  textarea {
    min-height: 44px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }

  textarea {
    min-height: 96px !important;
  }

  .wide {
    width: 100% !important;
  }

  footer {
    padding: 28px 16px !important;
    font-size: 0.85rem !important;
  }
}

@media (max-width: 420px) {
  .mobile-bottom-bar {
    width: calc(100vw - 16px);
    min-height: 50px;
    padding: 6px;
    gap: 5px;
  }

  .mobile-pill {
    min-height: 36px;
    padding: 7px 8px;
    font-size: 0.66rem;
  }

  .hero {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  h1,
  .hero-content h1 {
    font-size: clamp(2.65rem, 16vw, 4rem) !important;
  }

  .main-slide img,
  #mainGalleryImage {
    height: min(58svh, 390px) !important;
    min-height: 260px !important;
  }

  .invite-photo,
  .invite-sketch,
  .event-image {
    min-height: 210px !important;
  }
}


/* ==========================================================
   FIX VIDEOS MÓVIL - Natalia & Iván
   Los videos se muestran como tarjetas estáticas y responsivas.
   ========================================================== */

.video-fallback-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #eef8fd;
  color: #193a5a;
  font-size: 0.72rem;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.video-error,
.video-empty {
  margin-top: 8px;
  color: #6f7580;
  font-size: 0.85rem;
}

@media (max-width: 900px) {
  .mobile-bottom-bar {
    grid-template-columns: 0.85fr 0.85fr 1.1fr 0.9fr !important;
    width: min(96vw, 420px) !important;
  }

  .mobile-pill {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 0.64rem !important;
  }

  .videos-section {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    padding: 42px 16px 50px !important;
    background: rgba(255,250,245,.86) !important;
  }

  .videos-section.reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .video-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
    margin-top: 22px !important;
  }

  .video-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    border: 1px solid rgba(216, 146, 132, 0.28) !important;
    box-shadow: 0 16px 42px rgba(36, 54, 74, 0.12) !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  .video-card video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 68svh !important;
    min-height: 210px !important;
    object-fit: contain !important;
    background: #000000 !important;
    border-radius: 16px !important;
  }

  .video-card p {
    margin-top: 10px !important;
    color: #24364a !important;
    font-weight: 800 !important;
    text-align: center !important;
  }
}

@media (max-width: 420px) {
  .mobile-bottom-bar {
    grid-template-columns: 0.8fr 0.8fr 1.05fr 0.82fr !important;
    gap: 4px !important;
  }

  .mobile-pill {
    font-size: 0.58rem !important;
    min-height: 34px !important;
  }

  .video-card video {
    min-height: 190px !important;
    max-height: 64svh !important;
  }
}


/* ==========================================================
   AJUSTES EVENTO, DRESS CODE Y RECUERDOS
   ========================================================== */

.event-clean {
  grid-template-columns: 1fr !important;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.68), rgba(255,250,245,.76)),
    url("assets/paris-hero-real.jpg") center/cover no-repeat !important;
}

.event-clean::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.20);
  backdrop-filter: blur(1px);
  pointer-events: none;
}

.event-clean .event-center {
  position: relative;
  z-index: 1;
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 32px;
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 70px rgba(36,54,74,.13);
}

.event-clean .event-card {
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 26px;
  padding: 26px 18px;
}

.event-clean .event-image {
  display: none !important;
}

.palette-varied span:nth-child(1) { background: #fffaf5 !important; }
.palette-varied span:nth-child(2) { background: #d6c9b8 !important; }
.palette-varied span:nth-child(3) { background: #f2d6cf !important; }
.palette-varied span:nth-child(4) { background: #b7c7ad !important; }
.palette-varied span:nth-child(5) { background: #8b8f97 !important; }

.memories-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 62px 28px 72px;
  text-align: center;
  background: #ffffff;
}

.memories-section h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 4vw, 3.3rem);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-top: 8px;
}

.memories-intro {
  max-width: 720px;
  margin: 12px auto 28px;
  color: var(--muted);
  line-height: 1.65;
}

.memory-stage {
  width: min(980px, 100%);
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(36,54,74,.16);
  background: #eef8fd;
}

.memory-stage img {
  width: 100%;
  height: min(70vh, 620px);
  min-height: 420px;
  object-fit: cover;
  object-position: center;
  transition: opacity .22s ease;
}

.memory-thumbs {
  width: min(980px, 100%);
  margin: 18px auto 0;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  justify-content: center;
  -webkit-overflow-scrolling: touch;
}

.memory-thumbs img {
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  border-radius: 16px;
  object-fit: cover;
  cursor: pointer;
  border: 3px solid transparent;
  opacity: .72;
  transition: .25s ease;
}

.memory-thumbs img.active,
.memory-thumbs img:hover {
  opacity: 1;
  border-color: var(--rose);
  transform: translateY(-2px);
}

.memory-videos {
  width: min(980px, 100%);
  margin: 34px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.memory-videos .video-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--ivory);
  box-shadow: 0 14px 40px rgba(36,54,74,.10);
}

.memory-videos video {
  width: 100%;
  height: 260px;
  object-fit: cover;
  background: #000;
  border-radius: 16px;
}

.memory-videos p {
  margin-top: 10px;
  color: var(--ink);
  font-weight: 700;
  text-align: center;
}

@media (max-width: 900px) {
  .event-clean {
    padding: 44px 14px !important;
  }

  .event-clean .event-center {
    width: 100% !important;
    padding: 34px 18px !important;
    border-radius: 24px !important;
  }

  .memories-section {
    padding: 42px 16px 54px !important;
  }

  .memory-stage {
    border-radius: 20px !important;
  }

  .memory-stage img {
    height: min(60svh, 440px) !important;
    min-height: 280px !important;
  }

  .memory-thumbs {
    justify-content: flex-start !important;
  }

  .memory-thumbs img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 12px !important;
  }

  .memory-videos {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 26px !important;
  }

  .memory-videos video {
    height: auto !important;
    max-height: 66svh !important;
    object-fit: contain !important;
  }
}


/* ==========================================================
   AJUSTES EVENTO, DRESS CODE, RECUERDOS Y FECHA LÍMITE RSVP
   ========================================================== */
.event-clean{grid-template-columns:1fr!important;position:relative;overflow:hidden;background:linear-gradient(rgba(255,255,255,.68),rgba(255,250,245,.76)),url("assets/paris-hero-real.jpg") center/cover no-repeat!important;}
.event-clean::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.20);backdrop-filter:blur(1px);pointer-events:none;}
.event-clean .event-center{position:relative;z-index:1;width:min(980px,calc(100% - 32px));margin:0 auto;background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.52);border-radius:32px;backdrop-filter:blur(10px);box-shadow:0 24px 70px rgba(36,54,74,.13);}
.event-clean .event-card{background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.55);border-radius:26px;padding:26px 18px;}
.event-clean .event-image{display:none!important;}
.palette-varied span:nth-child(1){background:#fffaf5!important}.palette-varied span:nth-child(2){background:#d6c9b8!important}.palette-varied span:nth-child(3){background:#f2d6cf!important}.palette-varied span:nth-child(4){background:#b7c7ad!important}.palette-varied span:nth-child(5){background:#8b8f97!important}
.memories-section{max-width:1280px;margin:0 auto;padding:62px 28px 72px;text-align:center;background:#fff;}
.memories-section h2{font-family:"Cormorant Garamond",serif;font-size:clamp(2rem,4vw,3.3rem);color:var(--ink);font-weight:500;letter-spacing:.09em;text-transform:uppercase;margin-top:8px;}
.memories-intro{max-width:720px;margin:12px auto 28px;color:var(--muted);line-height:1.65;}
.memory-stage{width:min(980px,100%);margin:0 auto;border-radius:28px;overflow:hidden;box-shadow:0 24px 70px rgba(36,54,74,.16);background:#eef8fd;}
.memory-stage img{width:100%;height:min(70vh,620px);min-height:420px;object-fit:cover;object-position:center;transition:opacity .22s ease;}
.memory-thumbs{width:min(980px,100%);margin:18px auto 0;display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;justify-content:center;-webkit-overflow-scrolling:touch;}
.memory-thumbs img{flex:0 0 auto;width:78px;height:78px;border-radius:16px;object-fit:cover;cursor:pointer;border:3px solid transparent;opacity:.72;transition:.25s ease;}
.memory-thumbs img.active,.memory-thumbs img:hover{opacity:1;border-color:var(--rose);transform:translateY(-2px);}
.memory-videos{width:min(980px,100%);margin:34px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.memory-videos .video-card{padding:12px;border:1px solid var(--line);border-radius:22px;background:var(--ivory);box-shadow:0 14px 40px rgba(36,54,74,.10);}
.memory-videos video{width:100%;height:260px;object-fit:cover;background:#000;border-radius:16px;}
.memory-videos p{margin-top:10px;color:var(--ink);font-weight:700;text-align:center;}
.deadline-box{display:grid;gap:6px;margin:12px 0 18px;padding:16px 18px;border-radius:18px;background:rgba(47,102,144,.09);border:1px solid rgba(47,102,144,.20);color:var(--ink);line-height:1.5;}
.deadline-box strong{font-family:"Cormorant Garamond",serif;font-size:1.22rem;color:var(--navy);font-weight:700;}
.deadline-box span{font-size:.9rem;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:500;}
.deadline-note{margin-top:8px;padding:10px 12px;border-radius:14px;background:rgba(216,146,132,.13);color:var(--ink)!important;font-weight:700;}
.deadline-expired{background:rgba(216,146,132,.18);border-color:rgba(216,146,132,.45);}
.rsvp-closed{position:relative;}
.rsvp-closed input,.rsvp-closed select,.rsvp-closed textarea,.rsvp-closed button[type="submit"]{opacity:.55;cursor:not-allowed;}
.rsvp-closed .form-status{color:#9a4b41!important;font-weight:800;}
@media(max-width:900px){.event-clean{padding:44px 14px!important}.event-clean .event-center{width:100%!important;padding:34px 18px!important;border-radius:24px!important}.memories-section{padding:42px 16px 54px!important}.memory-stage{border-radius:20px!important}.memory-stage img{height:min(60svh,440px)!important;min-height:280px!important}.memory-thumbs{justify-content:flex-start!important}.memory-thumbs img{width:64px!important;height:64px!important;border-radius:12px!important}.memory-videos{grid-template-columns:1fr!important;gap:16px!important;margin-top:26px!important}.memory-videos video{height:auto!important;max-height:66svh!important;object-fit:contain!important}.deadline-box{padding:14px 15px;border-radius:16px}.deadline-box strong{font-size:1.08rem}.deadline-box span{font-size:.86rem}}

/* Nota de videos sin sonido */
.video-silent-note {
  max-width: 720px;
  margin: 22px auto 0;
  color: var(--muted, #6f7580);
  font-size: 0.92rem;
  line-height: 1.6;
  text-align: center;
}


/* Estados visibles del RSVP */
.form-status.status-ok {
  color: #1f6b45 !important;
  background: rgba(31, 107, 69, 0.10) !important;
  border: 1px solid rgba(31, 107, 69, 0.18) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-weight: 700 !important;
}

.form-status.status-error {
  color: #8a2f2f !important;
  background: rgba(138, 47, 47, 0.10) !important;
  border: 1px solid rgba(138, 47, 47, 0.18) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-weight: 700 !important;
}

.form-status.status-info {
  color: #2f6690 !important;
  background: rgba(47, 102, 144, 0.10) !important;
  border: 1px solid rgba(47, 102, 144, 0.18) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-weight: 700 !important;
}