/* =========================================================
   Baby Shower — variables & paleta
   Rosa (protagonista) + morado y dorado tenues (no opacan)
   ========================================================= */
:root {
  --pink-900: #7A2E55;
  --pink-700: #B23E77;
  --pink-500: #EC4899;
  --pink-400: #F472B6;
  --pink-300: #F9A8D4;
  --pink-100: #FDF2F8;
  --pink-50:  #FFF7FB;

  --purple-muted: #C9B8DE;
  --purple-muted-deep: #A98FC4;

  --gold-muted: #E3C88F;
  --gold-muted-deep: #C9A868;

  --ink: #5B2140;
  --white: #FFFFFF;

  --font-script: 'Beau Rivage', cursive;
  --font-script-alt: 'Great Vibes', cursive;
  --font-body: 'Quicksand', sans-serif;

  --shadow-soft: 0 8px 24px rgba(122, 46, 85, 0.18);
  --ease-soft: cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink);
  background: var(--pink-50);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Fondo con profundidad: blobs pastel difuminados + textura de puntos */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(560px 420px at 8% 6%,  rgba(249, 168, 212, 0.38), transparent 70%),
    radial-gradient(620px 460px at 96% 18%, rgba(201, 184, 222, 0.32), transparent 70%),
    radial-gradient(520px 420px at 14% 78%, rgba(227, 200, 143, 0.28), transparent 70%),
    radial-gradient(600px 480px at 92% 92%, rgba(236, 72, 153, 0.14), transparent 70%),
    linear-gradient(180deg, var(--pink-50) 0%, var(--pink-100) 55%, var(--pink-50) 100%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(rgba(122,46,85,0.09) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
}

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

a { text-decoration: none; color: inherit; }

.hidden { visibility: hidden; opacity: 0; }

/* =========================================================
   Ambient background — nubes flotando por todo el sitio
   ========================================================= */
.ambient-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.cloud {
  position: absolute;
  width: 150px;
  height: 64px;
  background: rgba(255,255,255,0.92);
  border-radius: 100px;
  box-shadow: 0 14px 30px rgba(122, 46, 85, 0.22), 0 2px 6px rgba(122, 46, 85, 0.12);
}
.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  z-index: -1;
  background: inherit;
  border-radius: 50%;
  box-shadow: inherit;
}
.cloud::before { width: 74px; height: 74px; top: -37px; left: 16px; }
.cloud::after  { width: 94px; height: 94px; top: -52px; right: 10px; }

/* Cigüeña — SIEMPRE de izquierda a derecha (nunca al revés), igual mecánica que las nubes */
.stork {
  position: absolute;
  left: -180px;
  width: 130px;
  height: 82px;
  background: var(--purple-muted-deep);
  opacity: 0.55;
  animation: driftRight 74s linear infinite;
}
.stork--1 { top: 16%; }
.stork--2 { top: 56%; animation-duration: 88s; animation-delay: 24s; opacity: 0.4; transform: scale(.8); }

.cloud--1 { top: 8%;  left: -170px; animation: driftRight 42s linear infinite; }
.cloud--2 { top: 30%; right: -170px; animation: driftLeft 55s linear infinite; opacity: .92; transform: scale(.75); }
.cloud--3 { top: 66%; left: -170px; animation: driftRight 65s linear infinite 8s; opacity: .8; transform: scale(.6); }
.cloud--4 { top: 48%; right: -170px; animation: driftLeft 50s linear infinite 14s; opacity: .7; transform: scale(.5); }

@keyframes driftRight { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 320px)); } }
@keyframes driftLeft  { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 320px)); } }

/* Globos cayendo — generados por JS, mecánica de caída + vaivén (distinta de las mariposas) */
.ambient-balloons {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.fall-balloon {
  position: absolute;
  width: 30px;
  opacity: 0.8;
  filter: drop-shadow(0 6px 10px rgba(122,46,85,0.18));
}
.fall-dandelion {
  position: absolute;
  width: 46px;
  opacity: 0.85;
  background: var(--pink-700);
}

/* =========================================================
   Utilidad: assets SVG en negro sólido recoloreados vía mask
   ========================================================= */
.svg-mask {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.mask-stork      { -webkit-mask-image: url('../img/cigueña.svg');        mask-image: url('../img/cigueña.svg'); }
.mask-dandelion   { -webkit-mask-image: url('../img/dienteleon.svg');    mask-image: url('../img/dienteleon.svg'); }
.mask-tree        { -webkit-mask-image: url('../img/arbol.svg');         mask-image: url('../img/arbol.svg'); }
.mask-grass       { -webkit-mask-image: url('../img/pasto.svg');         mask-image: url('../img/pasto.svg'); }
.mask-hearts      { -webkit-mask-image: url('../img/corazonsitos.svg');  mask-image: url('../img/corazonsitos.svg'); }
.mask-butterflies { -webkit-mask-image: url('../img/mariposas.svg');     mask-image: url('../img/mariposas.svg'); }
.mask-butterfly-hero { -webkit-mask-image: url('../img/mariposaprinicpal.svg'); mask-image: url('../img/mariposaprinicpal.svg'); }
.mask-family      { -webkit-mask-image: url('../img/familia.svg');       mask-image: url('../img/familia.svg'); }

/* Mariposas ambientales generadas por JS */
.ambient-butterfly {
  position: fixed;
  width: 34px;
  height: 28px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.85;
}

/* =========================================================
   Mariposas SVG — 3 especies
   ========================================================= */
.wing-l, .wing-r { transform-origin: 50px 40px; }
.wing-top { fill: currentColor; opacity: .95; }
.wing-bottom { fill: currentColor; opacity: .72; }
.body { fill: var(--ink); }
.antenna { stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; fill: none; }
.spot { fill: var(--white); opacity: .85; }

/* Mariposa insignia (asset real, recoloreada con gradiente vía mask) — grande, estática arriba-izquierda del cartel */
.hero-butterfly-img {
  position: absolute;
  width: 132px;
  height: 108px;
  background: linear-gradient(135deg, var(--pink-300), var(--pink-500) 55%, var(--gold-muted) 100%);
}
@media (min-width: 480px) {
  .hero-butterfly-img { width: 182px; height: 148px; }
}

/* =========================================================
   HERO
   ========================================================= */
#hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 3;
  padding: 24px;
}

.hero-sky { position: absolute; inset: 0; z-index: 0; }

.sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--gold-muted);
  border-radius: 50%;
  box-shadow: 0 0 8px 2px rgba(227, 200, 143, 0.6);
  animation: twinkle 2.4s ease-in-out infinite;
}
.sparkle--1 { top: 18%; left: 12%; animation-delay: 0s; }
.sparkle--2 { top: 28%; right: 15%; animation-delay: .6s; }
.sparkle--3 { top: 70%; left: 18%; animation-delay: 1.2s; }
.sparkle--4 { top: 62%; right: 10%; animation-delay: 1.8s; }
@keyframes twinkle { 0%,100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }

#balloon-container {
  position: relative;
  z-index: 2;
  cursor: pointer;
  touch-action: manipulation;
}

#balloon-hint {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold-muted);
  color: var(--ink);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
  animation: bounce 1.4s ease-in-out infinite;
  z-index: 3;
}
@keyframes bounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-10px); } }

#balloon-svg { filter: drop-shadow(0 14px 22px rgba(122,46,85,0.28)); }

#reveal-sign {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--white);
  padding: 30px 36px;
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
  border: 3px solid var(--pink-300);
  text-align: center;
}

.sign-title {
  font-family: var(--font-script);
  font-size: 4.2rem;
  color: var(--pink-500);
  margin: 0;
  line-height: 1;
}

.sign-sub {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--purple-muted-deep);
  margin: 6px 0 0;
}

.sign-flourish { width: 60px; height: 20px; color: var(--gold-muted-deep); margin: 2px 0; }
.sign-flourish--r { transform: scaleX(-1); }

.scroll-cue {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pink-700);
  opacity: .65;
  animation: bounce 1.8s ease-in-out infinite;
  z-index: 2;
}

/* =========================================================
   SECCIONES compartidas
   ========================================================= */
section:not(#hero) {
  position: relative;
  z-index: 3;
  padding: 64px 20px;
  max-width: 640px;
  margin: 0 auto;
}

.reveal-on-scroll { opacity: 0; transform: translateY(28px); }

.section-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 32px;
}
.section-title {
  font-family: var(--font-script-alt);
  font-size: 3rem;
  color: var(--pink-500);
  text-align: center;
  margin: 4px 0 0;
  line-height: 1.15;
}
.title-flourish { width: 64px; height: 22px; color: var(--gold-muted-deep); }

/* Mensaje */
.mensaje-inner { text-align: center; position: relative; }
.deco-butterfly {
  width: 74px;
  height: 60px;
  margin: 0 auto 16px;
  background: var(--purple-muted-deep);
}
.mensaje-text {
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 0 0 10px;
}
.mensaje-text--accent {
  font-family: var(--font-script);
  font-size: 2.2rem;
  color: var(--pink-500);
  margin-top: 16px;
}
.hearts-divider {
  width: 170px;
  height: 34px;
  margin: 14px auto;
  background: var(--pink-500);
}
.mensaje-baby-shower {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 2.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 6px 0 0;
  text-shadow: 2px 2px 0 var(--pink-300), 4px 4px 0 var(--gold-muted);
}

/* Familia */
/* section#... (no solo #...) pa empatar/superar la especificidad de section:not(#hero) */
section#mensaje { padding-bottom: 16px; }
section#familia { text-align: center; padding-top: 0; }
.familia-photo {
  margin: 0 auto 22px;
  max-width: 280px;
}
.familia-photo img {
  width: 100%;
  display: block;
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
}
.familia-caption {
  font-family: var(--font-script);
  font-size: 1.7rem;
  color: var(--pink-700);
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.35;
}
.familia-butterfly {
  width: 60px;
  height: 48px;
  margin: 18px auto 0;
  background: var(--pink-500);
}

/* Historia / zigzag texto + video / imagen */
.zigzag-row {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 36px;
}
.zigzag-row:last-child { margin-bottom: 0; }
.zigzag-text { display: flex; align-items: center; }
.zigzag-symbolic {
  font-size: 1.05rem;
  line-height: 1.75;
  font-style: italic;
  color: var(--ink);
  margin: 0;
  padding: 4px 4px;
  border-left: 3px solid var(--purple-muted);
  padding-left: 16px;
}
.zigzag-media {
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  border: 2.5px dashed var(--purple-muted);
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--purple-muted-deep);
}
.zigzag-media-icon { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.zigzag-media--video .zigzag-media-icon { fill: currentColor; stroke: none; }
.zigzag-media-label { font-size: 0.85rem; font-weight: 700; }

/* Media ya con contenido real: sin el marco punteado de placeholder */
.zigzag-media--filled { border-style: solid; border-color: var(--pink-100); padding: 0; overflow: hidden; }
.zigzag-media--video.zigzag-media--filled video {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;
}

/* Collage tipo "tetris" — grid de 2 columnas, cada foto ocupa su alto real
   según su propia proporción (no recorte forzado). Al agregar una foto más
   se auto-acomoda en la siguiente celda, sin tocar CSS.
   (Nota: se probó column-count para masonry real, pero Chrome no reparte
   el contenido entre columnas sin una altura fija — se ve todo apilado en
   una sola columna. El grid de abajo es la alternativa confiable.) */
.photo-tetris {
  aspect-ratio: auto;
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
  background: var(--pink-100);
  padding: 10px;
}
.tetris-item {
  border: 5px solid var(--pink-50);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(122, 46, 85, 0.25);
  overflow: hidden;
}
.tetris-item:nth-child(odd) { transform: rotate(-2.5deg); }
.tetris-item:nth-child(even) { transform: rotate(2deg); }
.tetris-item img { width: 100%; height: auto; display: block; }

/* Imagen 1 — sola, formato widescreen bajito (mitad de alto), entre el video y el par de fotos */
.photo-wide {
  aspect-ratio: 32 / 9;
  border-radius: 20px;
  overflow: hidden;
  border: 2.5px solid var(--pink-100);
  box-shadow: var(--shadow-soft);
  margin: 0 0 36px;
}
.photo-wide img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 27%; display: block; }

/* Detalles */
.detalle-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--white);
  border: 2px solid var(--pink-100);
  border-radius: 20px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-soft);
  transition: transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.detalle-card:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 14px 30px rgba(122, 46, 85, 0.24);
}
.detalle-icon {
  width: 26px; height: 26px; flex-shrink: 0; margin-top: 2px;
  fill: none; stroke: var(--pink-500); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s var(--ease-soft);
}
.detalle-card:hover .detalle-icon { transform: scale(1.15) rotate(-6deg); }
.detalle-info { display: flex; flex-direction: column; gap: 4px; }
.detalle-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--purple-muted-deep);
}
.detalle-value { font-size: 1.05rem; font-weight: 600; color: var(--ink); }

.maps-btn {
  display: inline-block;
  align-self: flex-start;
  margin-top: 6px;
  background: var(--pink-500);
  color: var(--white);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 16px;
  border-radius: 999px;
  transition: transform .2s var(--ease-soft), background .2s;
}
.maps-btn:hover { background: var(--pink-700); transform: translateY(-2px); }

/* Mapa embebido */
.map-embed {
  margin-top: 20px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 2px solid var(--pink-100);
  aspect-ratio: 16 / 11;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Regalos — número de mesa siempre visible como texto + botón de liga aparte (por si el link falla) */
.regalos-sub { text-align: center; font-size: 1rem; margin: 0 0 28px; color: var(--ink); opacity: .85; }
.regalos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.regalo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  background: var(--white);
  border: 2px solid var(--purple-muted);
  color: var(--pink-700);
  padding: 22px 20px;
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  transition: transform .2s var(--ease-soft), border-color .2s;
}
.regalo-card:hover { transform: translateY(-3px); border-color: var(--gold-muted-deep); }
.regalo-card-icon { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.regalo-card-store { font-weight: 700; font-size: 1.1rem; }
.regalo-card-num { font-size: 0.85rem; font-weight: 600; color: var(--purple-muted-deep); }
.regalo-card-btn {
  display: inline-block;
  margin-top: 8px;
  background: var(--pink-500);
  color: var(--white);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 9px 22px;
  border-radius: 999px;
  transition: transform .2s var(--ease-soft), background .2s;
}
.regalo-card-btn:hover { background: var(--pink-700); transform: translateY(-2px); }

/* Footer — el árbol es el centro, el MISMO pasto continúa a sus dos lados (una sola pieza estirada, sin repetir pa que no se vea con huecos) */
.footer-ground {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  width: 100%;
  margin-top: 32px;
}
.footer-tree {
  flex: 0 0 auto;
  width: min(320px, 62vw);
  aspect-ratio: 1280 / 1059;
  height: auto;
  background: var(--pink-700);
  opacity: 0.92;
}
.footer-grass-flank {
  flex: 1 1 auto;
  min-width: 20px;
  height: 30px;
  position: relative;
  top: 8px;
  background: var(--pink-700);
  opacity: 0.92;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: left bottom;
  mask-position: left bottom;
  /* clave: mantener la proporción real del pasto (2:1) — un tamaño desproporcionado deja huecos al repetir */
  -webkit-mask-size: 60px 30px;
  mask-size: 60px 30px;
}
.footer-grass-flank--r { -webkit-mask-position: right bottom; mask-position: right bottom; }

#footer {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 20px 48px;
}
.footer-inner {
  padding: 8px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.footer-text {
  font-size: 0.85rem;
  color: var(--pink-700);
  font-weight: 700;
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.5;
}
.heart-glue { white-space: nowrap; }

/* familia.svg — debajo de Mesa de Regalos */
.familia-icon-wrap {
  width: 90px;
  height: 74px;
  margin: 8px auto 0;
  background: var(--pink-700);
  opacity: 0.9;
  position: relative;
  z-index: 3;
}

.icon-heart-inline {
  width: 16px; height: 16px;
  fill: var(--pink-500); stroke: none;
  vertical-align: -2px;
}

/* =========================================================
   Mobile-first breakpoints — 480 / 720 / 1024
   ========================================================= */
@media (min-width: 480px) {
  .sign-title { font-size: 4.6rem; }
  .regalos-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 720px) {
  #balloon-svg { width: 260px; }
  .section-title { font-size: 3.4rem; }
  .mensaje-text { font-size: 1.3rem; }
  .stork { width: 160px; height: 100px; }

  .zigzag-row, .zigzag-row--reverse {
    flex-direction: row;
    align-items: stretch;
  }
  .zigzag-row--reverse { flex-direction: row-reverse; }
  .zigzag-text, .zigzag-media { flex: 1 1 50%; min-width: 0; }

  .footer-inner { flex-direction: row; justify-content: center; text-align: left; }
}

@media (min-width: 1024px) {
  section:not(#hero) { max-width: 820px; }
  .sign-title { font-size: 5.2rem; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .cloud, .stork, .sparkle, #balloon-hint, .scroll-cue { animation: none !important; }
  html { scroll-behavior: auto; }
}