/* -------------------------------------------------- COLOR PALETTE */
:root {
  --main-pink:  #e8b5bf;   /* 15 % más oscuro que original */
  --accent-pink:#f7ccd0;   /* original para highlights */
  --card-pink:  #ffe6f0;
  --text:       #444;
  --white:      #fff;
}

/* ------------------------------------------------------- GLOBALS */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Nunito", sans-serif;
  background-color: var(--main-pink);
  color: var(--text);
}

h1, h2 { font-family: "Baloo 2", sans-serif; }

/* --------------------------------------------------------- HERO */
.hero { position: relative; height: 68vh; overflow: hidden; }

.banner-container { position: absolute; inset: 0; overflow: hidden; z-index: -1; }

.banner-video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.1);
  animation: zoomOut 10s ease-out forwards;
}
@keyframes zoomOut { from {transform: scale(1.1);} to {transform: scale(1);} }

.hero-content {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; color: var(--white);
}
.hero-content h1 
{ font-size: 6.75rem; margin: 0; }
.tagline-cursive {
  font-family: "Great Vibes", cursive;
  font-size: 7.5rem;
  display: inline-block;
  margin-top: .5rem;
}

/* --------------------------------------------------------- FOOTER */
.site-footer {
  background: var(--accent-pink);
  color: var(--white);
  text-align: center;
  font-size: 0.9rem;
  padding: 1rem 0;
  margin-top: 3rem;
}

/* --------------------------------------------------------- INTRO */
.intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem;
  background: var(--card-pink);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
.intro-media { flex: 0 0 320px; max-width: 320px; }
.video-preview { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; }
.intro-text { flex: 1 1 220px; text-align: center; }
.intro-text h2 { margin: 0 0 .5rem; color: var(--accent-pink); font-size: 2rem; }
.intro-text p  { margin: 0 0 1rem; font-weight: 600; }

/* CTA buttons */
.about-button {
  display: inline-block;
  margin-top: .75rem;
  background: var(--accent-pink);
  color: var(--white);
  padding: .5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: background .25s ease;
}
.about-button:hover { background: var(--main-pink); }

/* --------------------------------------------------- SOCIAL ICONS */
.socials { display: flex; gap: .75rem; justify-content: center; margin-top: 1rem; }
.socials a {
  display: inline-flex;
  width: 40px; height: 40px;
  background: var(--white);
  border-radius: 50%;
  align-items: center; justify-content: center;
  color: var(--accent-pink);
  text-decoration: none;
  transition: transform .25s;
}
.socials a:hover { transform: scale(1.05); }
.socials svg { width: 22px; height: 22px; fill: currentColor; }

/* ------------------------------------------------ CATEGORY GRID */
.section-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding: 2rem;
}
.container {
  background: var(--card-pink);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  text-align: center;
}
.container h2 { margin: 0 0 .75rem; font-size: 1.6rem; }
.container a img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 10px;
  transition: transform .3s ease;
}
.container a img:hover { transform: scale(1.03); }

/* ----------------------------------------------- RESPONSIVE */
@media (max-width: 600px) {
  .hero-content h1 { font-size: 4.8rem; }
  .tagline-cursive   { font-size: 3.6rem; }
  .section-grid      { grid-template-columns: 1fr; }
}

/* ---------- INSTAGRAM LIVE GRID (LightWidget) ---------- */
.instagram-feed {
  margin: 3rem auto;
  max-width: 1000px;
}
.instagram-feed h2 {
  text-align: center;
  font-family: "Baloo 2", sans-serif;
  margin-bottom: 1rem;
  color: var(--white);
}
.lightwidget-widget {
  width: 100%;
  height: 600px;        /* 3 × 3 grid */
  border: 0;
  overflow: hidden;
}