/* =========================================================
   VISUAL FIX — Invitación Matsuri & Edgard  v1.2
   Cargado después del CSS principal.
   Solo modificar este archivo para ajustes visuales.
   ========================================================= */

/* ---------------------------------------------------------
   DEBUG — marca temporal para confirmar que este CSS carga
   Quitar una vez confirmado visualmente.
   --------------------------------------------------------- */
.invitation-wrapper::before {
  content: "VISUAL FIX ACTIVO";
  position: fixed;
  left: 8px;
  bottom: 8px;
  z-index: 999999;
  background: #31513f;
  color: white;
  font-size: 10px;
  padding: 4px 6px;
  border-radius: 999px;
  pointer-events: none;
}

/* =========================================================
   A. OCULTAR HEADER/FOOTER DE ASTRA
   Selector amplio que cubre ambas variantes de clase body:
   - page-template-page-invitacion-matsuri-edgard
   - page-template-wordpress-invitacion-page-invitacion-matsuri-edgard
   ========================================================= */
body[class*="page-template"][class*="invitacion-matsuri-edgard"] .site-header,
body[class*="page-template"][class*="invitacion-matsuri-edgard"] .ast-primary-header-bar,
body[class*="page-template"][class*="invitacion-matsuri-edgard"] .ast-mobile-header-wrap,
body[class*="page-template"][class*="invitacion-matsuri-edgard"] .main-header-bar,
body[class*="page-template"][class*="invitacion-matsuri-edgard"] .main-header-bar-wrap,
body[class*="page-template"][class*="invitacion-matsuri-edgard"] .ast-above-header-wrap,
body[class*="page-template"][class*="invitacion-matsuri-edgard"] .ast-below-header-wrap,
body[class*="page-template"][class*="invitacion-matsuri-edgard"] .site-footer,
body[class*="page-template"][class*="invitacion-matsuri-edgard"] .ast-footer-copyright,
body[class*="page-template"][class*="invitacion-matsuri-edgard"] footer.site-footer,
body[class*="page-template"][class*="invitacion-matsuri-edgard"] #masthead,
body[class*="page-template"][class*="invitacion-matsuri-edgard"] #colophon {
  display: none !important;
}

/* =========================================================
   B. RESET BODY Y CONTENEDORES ASTRA
   ========================================================= */
body[class*="page-template"][class*="invitacion-matsuri-edgard"],
body[class*="page-template"][class*="invitacion-matsuri-edgard"].custom-background {
  margin: 0 !important;
  padding: 0 !important;
  background: oklch(0.965 0.014 95) !important;
  overflow-x: hidden !important;
  min-height: 100vh !important;
}

body[class*="page-template"][class*="invitacion-matsuri-edgard"] .site-content,
body[class*="page-template"][class*="invitacion-matsuri-edgard"] .ast-container,
body[class*="page-template"][class*="invitacion-matsuri-edgard"] .ast-article-post,
body[class*="page-template"][class*="invitacion-matsuri-edgard"] .entry-content,
body[class*="page-template"][class*="invitacion-matsuri-edgard"] .site-main,
body[class*="page-template"][class*="invitacion-matsuri-edgard"] #primary,
body[class*="page-template"][class*="invitacion-matsuri-edgard"] #content,
body[class*="page-template"][class*="invitacion-matsuri-edgard"] article {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  float: none !important;
}

/* =========================================================
   1. WRAPPER — scope exterior, fondo crema, centra la columna
   ========================================================= */
.invitation-wrapper {
  width: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: oklch(0.965 0.014 95) !important;
  display: flex !important;
  justify-content: center !important;
  overflow-x: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* =========================================================
   2. COLUMNA PRINCIPAL — max-w-xl (576px) igual que Vercel
   Usamos 576px, no 430px — Vercel usa max-w-xl que es 36rem.
   ========================================================= */
.invitation-wrapper .invitation-main {
  width: 100% !important;
  max-width: 576px !important;
  min-height: 100vh !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: oklch(0.965 0.014 95) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* =========================================================
   3. SECCIONES — no romper el ancho del contenedor
   ========================================================= */
.invitation-wrapper section,
.invitation-wrapper header,
.invitation-wrapper footer,
.invitation-wrapper .card-frame,
.invitation-wrapper .gold-rule,
.invitation-wrapper .marquee-track,
.invitation-wrapper .reveal,
.invitation-wrapper > div {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* =========================================================
   4. ESQUINAS BOTÁNICAS
   Posición absoluta relativa a .invitation-main.
   Tamaño: w-28 base, sm:w-40 en pantallas ≥640px
   ========================================================= */
.invitation-wrapper .invitation-main > img[aria-hidden="true"] {
  position: absolute !important;
  z-index: 10 !important;
  width: 7rem !important;
  pointer-events: none !important;
  user-select: none !important;
  opacity: 0.9 !important;
  display: block !important;
}

@media (min-width: 640px) {
  .invitation-wrapper .invitation-main > img[aria-hidden="true"] {
    width: 10rem !important;
  }
}

/* =========================================================
   5. HERO — espaciado superior y tipografía
   ========================================================= */
.invitation-wrapper header#inicio {
  padding-top: 2.5rem !important;
  padding-bottom: 1.5rem !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  text-align: center !important;
  position: relative !important;
}

/* Monograma (círculo con EM) — h-40 w-40 base, sm:h-48 sm:w-48 */
.invitation-wrapper .animate-intro-zoom {
  width: 10rem !important;
  height: 10rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

@media (min-width: 640px) {
  .invitation-wrapper .animate-intro-zoom {
    width: 12rem !important;
    height: 12rem !important;
  }
}

/* Nombres Matsuri & Edgard — text-6xl base, sm:text-7xl */
.invitation-wrapper h1.animate-intro {
  font-size: 3.75rem !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  margin-top: 1.5rem !important;
  font-weight: 600 !important;
}

@media (min-width: 640px) {
  .invitation-wrapper h1.animate-intro {
    font-size: 4.5rem !important;
  }
}

/* =========================================================
   6. COUNTDOWN — grid de 4 col, números grandes
   ========================================================= */
.invitation-wrapper #countdown-widget {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* El grid de 4 columnas que genera Tailwind con grid-cols-4 */
.invitation-wrapper #countdown-widget .grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.5rem !important;
}

@media (min-width: 640px) {
  .invitation-wrapper #countdown-widget .grid {
    gap: 1rem !important;
  }
}

/* Números del countdown */
.invitation-wrapper #countdown-widget span[id^="cd-"] {
  font-size: 1.875rem !important;  /* text-3xl */
  display: block !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

@media (min-width: 640px) {
  .invitation-wrapper #countdown-widget span[id^="cd-"] {
    font-size: 2.25rem !important;  /* text-4xl */
  }
}

/* =========================================================
   7. TARJETAS — card-frame
   Valores exactos del original: radius * 1.8, border gold
   ========================================================= */
.invitation-wrapper .card-frame {
  border-radius: calc(0.75rem * 1.8) !important;  /* = 1.35rem */
  border-width: 1px !important;
  border-style: solid !important;
  border-color: oklch(0.7 0.06 80 / 55%) !important;
  background-color: oklch(0.975 0.012 95 / 70%) !important;
  box-shadow: inset 0 1px 0 oklch(0.7 0.06 80 / 25%) !important;
  backdrop-filter: blur(1px) !important;
  -webkit-backdrop-filter: blur(1px) !important;
  box-sizing: border-box !important;
}

/* =========================================================
   8. GALERÍA MARQUEE — contención y proporciones 3:4
   ========================================================= */
.invitation-wrapper .marquee-track {
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
  margin-top: 1.75rem !important;
}

.invitation-wrapper .animate-marquee {
  display: flex !important;
  width: max-content !important;
  gap: 1rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  flex-wrap: nowrap !important;
}

/* Cada foto — w-44 base, sm:w-52 */
.invitation-wrapper .animate-marquee > li {
  width: 11rem !important;
  flex-shrink: 0 !important;
  list-style: none !important;
}

@media (min-width: 640px) {
  .invitation-wrapper .animate-marquee > li {
    width: 13rem !important;
  }
}

/* Card de la foto */
.invitation-wrapper .animate-marquee .card-frame {
  overflow: hidden !important;
  padding: 0.375rem !important;
}

/* Proporción 3:4 del contenedor de imagen */
.invitation-wrapper .animate-marquee .card-frame > div {
  position: relative !important;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
  border-radius: 0.75rem !important;  /* rounded-xl */
  display: block !important;
}

/* Imagen dentro de la tarjeta */
.invitation-wrapper .animate-marquee img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.7s ease-out !important;
}

.invitation-wrapper .animate-marquee img:hover {
  transform: scale(1.05) !important;
}

/* Degradados laterales del marquee */
.invitation-wrapper .marquee-track > .pointer-events-none {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 10 !important;
  width: 3rem !important;
  pointer-events: none !important;
  display: block !important;
}

/* =========================================================
   9. AFTER CEREMONY — barco: w-48 base, sm:w-56
   ========================================================= */
.invitation-wrapper img[src*="pirate-ship"] {
  width: 12rem !important;
  flex-shrink: 0 !important;
  display: block !important;
}

@media (min-width: 640px) {
  .invitation-wrapper img[src*="pirate-ship"] {
    width: 14rem !important;
  }
}

/* =========================================================
   10. LEGEND — ola decorativa: posición y tamaño
   ========================================================= */
.invitation-wrapper img[src*="ocean-wave"] {
  position: absolute !important;
  right: -1.5rem !important;
  bottom: 0.5rem !important;
  width: 8rem !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
  display: block !important;
}

@media (min-width: 640px) {
  .invitation-wrapper img[src*="ocean-wave"] {
    width: 10rem !important;
  }
}

/* =========================================================
   11. FOOTER — separación y botones
   ========================================================= */
.invitation-wrapper footer#asistencia {
  padding: 1.5rem 1.5rem 2.5rem !important;
  text-align: center !important;
  position: relative !important;
}

.invitation-wrapper footer#asistencia a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  border-radius: 9999px !important;
}

/* =========================================================
   12. LINKS — sin subrayado de Astra
   ========================================================= */
.invitation-wrapper a {
  text-decoration: none !important;
}

/* =========================================================
   13. IMÁGENES — display:block (Astra puede cambiarlo)
   ========================================================= */
.invitation-wrapper img {
  display: block !important;
  max-width: 100% !important;
}

/* =========================================================
   14. GOLD-RULE — divisor dorado
   ========================================================= */
.invitation-wrapper .gold-rule {
  height: 1px !important;
  background: linear-gradient(
    to right,
    transparent,
    oklch(0.66 0.09 78 / 60%),
    transparent
  ) !important;
  border: none !important;
  display: block !important;
}

/* =========================================================
   15. EYEBROW — heading con líneas laterales
   ========================================================= */
.invitation-wrapper .eyebrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  text-align: center !important;
}

.invitation-wrapper .eyebrow::before,
.invitation-wrapper .eyebrow::after {
  content: '' !important;
  height: 1px !important;
  width: 2rem !important;
  flex-shrink: 0 !important;
  background: linear-gradient(
    to right,
    transparent,
    oklch(0.66 0.09 78 / 70%),
    transparent
  ) !important;
}

@media (min-width: 640px) {
  .invitation-wrapper .eyebrow::before,
  .invitation-wrapper .eyebrow::after {
    width: 3rem !important;
  }
}

/* =========================================================
   16. ITINERARY — lista sin bullets, línea vertical
   ========================================================= */
.invitation-wrapper ol.relative {
  list-style: none !important;
  padding: 0 !important;
  margin-left: 1rem !important;
  position: relative !important;
}

/* =========================================================
   17. GRIDS — refuerzo de columnas responsive
   ========================================================= */
@media (min-width: 640px) {
  .invitation-wrapper .grid.sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .invitation-wrapper .grid.sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}



/* =========================================================
   FIX FINAL — TIPOGRAFÍAS, BOTONES Y POSICIONES
   Pegar al final de invitacion-visual-fix.css
========================================================= */

/* Quitar chip de diagnóstico */
.invitation-wrapper::before {
  content: none !important;
  display: none !important;
}

/* Variables visuales base */
.invitation-wrapper {
  --iv-cream: #f7f2e8;
  --iv-sage: #8fa08b;
  --iv-sage-deep: #344b3a;
  --iv-gold: #b88e4f;
  --iv-gold-soft: #d0b783;
  --iv-border-gold: rgba(184, 142, 79, 0.38);

  background: var(--iv-cream) !important;
  color: var(--iv-sage-deep) !important;
  font-family: "EB Garamond", Garamond, Georgia, serif !important;
}

/* Restaurar fuentes */
.invitation-wrapper,
.invitation-wrapper p,
.invitation-wrapper span,
.invitation-wrapper div,
.invitation-wrapper li {
  font-family: "EB Garamond", Garamond, Georgia, serif !important;
}

.invitation-wrapper .font-heading,
.invitation-wrapper h1,
.invitation-wrapper h2,
.invitation-wrapper h3,
.invitation-wrapper .eyebrow,
.invitation-wrapper a,
.invitation-wrapper button {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
}

.invitation-wrapper .font-serif {
  font-family: "EB Garamond", Garamond, Georgia, serif !important;
}

/* Restaurar colores Tailwind personalizados */
.invitation-wrapper .text-gold,
.invitation-wrapper h1 {
  color: var(--iv-gold) !important;
}

.invitation-wrapper .text-gold-soft,
.invitation-wrapper h1 .text-gold-soft {
  color: var(--iv-gold-soft) !important;
}

.invitation-wrapper .text-sage-deep {
  color: var(--iv-sage-deep) !important;
}

.invitation-wrapper .text-cream {
  color: var(--iv-cream) !important;
}

.invitation-wrapper .bg-sage-deep {
  background-color: var(--iv-sage-deep) !important;
}

.invitation-wrapper .bg-background {
  background-color: var(--iv-cream) !important;
}

/* Columna principal */
.invitation-wrapper {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  overflow-x: hidden !important;
}

.invitation-wrapper .invitation-main {
  width: 100% !important;
  max-width: 576px !important; /* max-w-xl = 36rem */
  margin: 0 auto !important;
  padding: 0 !important;
  background: var(--iv-cream) !important;
  overflow: hidden !important;
}

@media (max-width: 640px) {
  .invitation-wrapper .invitation-main {
    max-width: 100% !important;
  }
}

/* Hero */
.invitation-wrapper header#inicio {
  padding-top: 40px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-bottom: 28px !important;
  text-align: center !important;
}

.invitation-wrapper header#inicio .animate-intro-zoom {
  position: relative !important;
  width: 12rem !important;
  height: 12rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.invitation-wrapper header#inicio h1 {
  margin-top: 1.5rem !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 4.55rem !important;
  line-height: 1.02 !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  color: var(--iv-gold) !important;
  white-space: nowrap !important;
}

.invitation-wrapper header#inicio h1 span {
  display: inline !important;
  color: inherit !important;
}

.invitation-wrapper header#inicio h1 span.text-gold-soft {
  color: var(--iv-gold-soft) !important;
}

@media (max-width: 640px) {
  .invitation-wrapper header#inicio h1 {
    font-size: 3.45rem !important;
    white-space: normal !important;
  }

  .invitation-wrapper header#inicio h1 span {
    display: block !important;
  }
}

.invitation-wrapper header#inicio p {
  font-family: "EB Garamond", Garamond, Georgia, serif !important;
}

/* Subtítulos decorativos */
.invitation-wrapper .eyebrow {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 1.45rem !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #253247 !important;
  text-align: center !important;
}

.invitation-wrapper .gold-rule {
  display: block !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(184, 142, 79, 0.65),
    transparent
  ) !important;
}

/* Cards */
.invitation-wrapper .card-frame {
  border: 1px solid var(--iv-border-gold) !important;
  border-radius: 1.35rem !important;
  background: rgba(255, 252, 243, 0.54) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Countdown */
.invitation-wrapper #countdown-widget {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.invitation-wrapper #countdown-widget .grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

.invitation-wrapper #countdown-widget [id^="cd-"] {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 2.25rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  color: var(--iv-gold) !important;
}

/* Botones y links tipo botón */
.invitation-wrapper a.rounded-full,
.invitation-wrapper a.inline-flex,
.invitation-wrapper button.rounded-full {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  min-height: 2.25rem !important;
  padding: 0.62rem 1.35rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(184, 142, 79, 0.62) !important;
  background: transparent !important;
  color: var(--iv-sage-deep) !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.invitation-wrapper a.bg-sage-deep,
.invitation-wrapper footer a.bg-sage-deep,
.invitation-wrapper .card-frame a.bg-sage-deep {
  background: var(--iv-sage-deep) !important;
  border-color: var(--iv-sage-deep) !important;
  color: var(--iv-cream) !important;
}

.invitation-wrapper a.rounded-full svg,
.invitation-wrapper a.inline-flex svg {
  width: 1rem !important;
  height: 1rem !important;
  flex-shrink: 0 !important;
}

/* Íconos redondos */
.invitation-wrapper .rounded-full.bg-sage-deep {
  background-color: var(--iv-sage-deep) !important;
  color: var(--iv-cream) !important;
}

/* Route cards */
.invitation-wrapper #ruta .card-frame {
  padding: 1.75rem 1.25rem !important;
  text-align: center !important;
}

/* After ceremony */
.invitation-wrapper img[alt*="velero"],
.invitation-wrapper img[alt*="pirata"] {
  width: 14rem !important;
  max-width: 45% !important;
  height: auto !important;
}

/* Galería */
.invitation-wrapper .marquee-track {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.invitation-wrapper .marquee-track ul {
  display: flex !important;
  gap: 1rem !important;
}

.invitation-wrapper .marquee-track li {
  width: 13rem !important;
  flex: 0 0 13rem !important;
}

.invitation-wrapper .marquee-track .aspect-\[3\/4\],
.invitation-wrapper .marquee-track [class*="aspect"] {
  position: relative !important;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
  border-radius: 0.75rem !important;
}

.invitation-wrapper .marquee-track img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Footer */
.invitation-wrapper footer h2 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  color: var(--iv-gold) !important;
  font-size: 2.25rem !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
}

/* Responsive desktop */
@media (min-width: 640px) {
  .invitation-wrapper .sm\:inline {
    display: inline !important;
  }

  .invitation-wrapper .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .invitation-wrapper .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .invitation-wrapper .sm\:flex-row {
    flex-direction: row !important;
  }

  .invitation-wrapper .sm\:text-left {
    text-align: left !important;
  }

  .invitation-wrapper .sm\:w-52 {
    width: 13rem !important;
  }

  .invitation-wrapper .sm\:w-56 {
    width: 14rem !important;
  }

  .invitation-wrapper .sm\:h-48 {
    height: 12rem !important;
  }

  .invitation-wrapper .sm\:text-7xl {
    font-size: 4.5rem !important;
  }

  .invitation-wrapper .sm\:text-6xl {
    font-size: 3.75rem !important;
  }

  .invitation-wrapper .sm\:text-4xl {
    font-size: 2.25rem !important;
  }

  .invitation-wrapper .sm\:text-3xl {
    font-size: 1.875rem !important;
  }

  .invitation-wrapper .sm\:text-2xl {
    font-size: 1.5rem !important;
  }
}