/* =========================================================
   Cotillón Tricolor — landing page styles
   Palette: coral / gold / teal ("tricolor") on dark ink + cream
   ========================================================= */

:root {
  --coral: #ff5a5f;
  --coral-dark: #e6484d;
  --gold: #ffb703;
  --gold-dark: #e0a103;
  --teal: #2ec4b6;
  --teal-dark: #28ada0;
  --ink: #1a1a1a;
  --cream: #fff8f0;
  --whatsapp: #25d366;
  --whatsapp-dark: #1ea952;
  --arg-blue: #75aadb; /* Argentina flag light blue, used only for the Fiestas Patrias collection */
  --pink: #ff8fa3; /* candy/dessert pink accent, used only in the cumpleaños & repostería floaters */
  --orange: #ff7518; /* Halloween accent color */
  --green: #2f9e44; /* Navidad pine tree accent color */

  --font-display: 'Baloo 2', 'Poppins', sans-serif;
  --font-body: 'Poppins', sans-serif;
}

* { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: #ffffff;
  overflow-x: hidden;
}

h1, h2, h3, .navbar-brand {
  font-family: var(--font-display);
}

a { text-decoration: none; }

.py-lg-6 { padding-top: 5rem; padding-bottom: 5rem; }

.bg-soft { background: var(--cream); }

.badge-eyebrow {
  display: inline-block;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--coral);
  background: rgba(255, 90, 95, .12);
  padding: .35rem .9rem;
  border-radius: 999px;
  margin-bottom: .75rem;
}

/* -- Per-collection badge colors, matching each section's band -- */
.badge-patrias { color: var(--arg-blue); background: rgba(117, 170, 219, .16); }
.badge-cumple { color: var(--coral); background: rgba(255, 90, 95, .12); }
.badge-reposteria { color: #b8860b; background: rgba(255, 183, 3, .18); }
.badge-navidad { color: var(--coral); background: rgba(255, 90, 95, .12); }
.badge-halloween { color: var(--ink); background: rgba(255, 117, 24, .20); }
.badge-pascuas { color: var(--pink); background: rgba(255, 143, 163, .16); }
.badge-otras { color: var(--teal); background: rgba(46, 196, 182, .14); }

/* -- Hero badge colors, matching each slide's primary button -- */
.badge-hero-gold { color: #b8860b; background: rgba(255, 183, 3, .18); }
.badge-hero-teal { color: var(--teal); background: rgba(46, 196, 182, .14); }

.section-title {
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: 1rem;
}

.lead-text {
  color: #555;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ---------- Buttons ---------- */
.btn-tricolor {
  background: var(--coral);
  border: none;
  color: #fff;
  font-weight: 600;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-tricolor:hover {
  background: var(--coral-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(255, 90, 95, .3);
}

/* Per-hero-slide primary button colors: slide 1 (Cumpleaños) stays the
   default coral above, slide 2 (Pastelería) is gold, slide 3 (Fiestas
   temáticas) is teal. */
.btn-hero-gold {
  background: var(--gold);
  color: #fff;
}
.btn-hero-gold:hover {
  background: var(--gold-dark);
  color: #fff;
  box-shadow: 0 10px 20px rgba(255, 183, 3, .35);
}
.btn-hero-teal {
  background: var(--teal);
}
.btn-hero-teal:hover {
  background: var(--teal-dark);
  box-shadow: 0 10px 20px rgba(46, 196, 182, .35);
}

/* Instagram's own brand gradient, for the dedicated "go to our Instagram"
   CTA — distinct from the tricolor brand buttons so it reads as Instagram. */
.btn-instagram {
  background: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-instagram:hover {
  filter: brightness(.92);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(150, 47, 191, .35);
}

.btn-whatsapp {
  background: var(--whatsapp);
  border: none;
  color: #fff;
  font-weight: 600;
  transition: background .2s ease, transform .2s ease;
}
.btn-whatsapp:hover {
  background: var(--whatsapp-dark);
  color: #fff;
  transform: translateY(-2px);
}

/* Hero "Consultar" buttons: outline by default, turn WhatsApp-green on hover
   (scoped to this class only — the Contacto section's "Llamar" buttons also
   use btn-outline-dark and should keep their normal hover behavior). */
.btn-consultar-hero:hover {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- Navbar ---------- */
#mainNav {
  background: rgba(255, 255, 255, .97);
  transition: box-shadow .3s ease, padding .3s ease;
  padding-top: .75rem;
  padding-bottom: .75rem;
}
#mainNav.scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.navbar-brand {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--ink) !important;
  display: flex;
  align-items: center;
  gap: .25rem;
}
.navbar-logo {
  height: 46px;
  width: auto;
  display: block;
}

/* Tricolor wordmark accent — one brand colour per syllable */
.tricolor-tri { color: var(--coral); }
.tricolor-co { color: var(--gold-dark); }
.tricolor-lor { color: var(--teal); }

#mainNav .navbar-nav {
  align-items: flex-end;
  text-align: right;
}
#mainNav .nav-link {
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
  padding: .5rem .6rem !important;
  transition: color .3s ease;
}
#mainNav .nav-link:hover { color: var(--coral); }
/* Custom hamburger toggle: three tricolor bars in a cream circle that
   morph into an ink-colored X when the menu is open — a callback to the
   brand's coral/gold/teal accents instead of a generic gray icon. */
.navbar-toggler.custom-toggler {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.navbar-toggler.custom-toggler:hover {
  background: #ffe7d6;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
.navbar-toggler.custom-toggler:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 90, 95, .25);
}
.toggler-bar {
  display: block;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease, background .2s ease;
}
.bar-1 { background: var(--coral); }
.bar-2 { background: var(--gold); }
.bar-3 { background: var(--teal); }
.navbar-toggler.custom-toggler[aria-expanded="true"] .bar-1 {
  transform: translateY(8px) rotate(45deg);
  background: var(--ink);
}
.navbar-toggler.custom-toggler[aria-expanded="true"] .bar-2 {
  opacity: 0;
}
.navbar-toggler.custom-toggler[aria-expanded="true"] .bar-3 {
  transform: translateY(-8px) rotate(-45deg);
  background: var(--ink);
}
/* Our custom-toggler rule above matches Bootstrap's own hide-at-desktop
   selector in specificity, and since our stylesheet loads after Bootstrap's,
   it was winning at every width — including desktop, where the collapsed
   nav is never used. Restore navbar-expand-xxl's intended behavior. */
@media (min-width: 1400px) {
  .navbar-toggler.custom-toggler { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  margin-top: 0;
  padding-top: 7.5rem;
  padding-bottom: 3.5rem;
  background: linear-gradient(180deg, var(--cream), #fff);
  overflow: hidden;
}
.hero-img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}
.hero-title {
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-carousel .carousel-indicators {
  position: static;
  margin: 2.5rem 0 0;
}
.hero-carousel .carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--coral);
  opacity: .3;
  border: 0;
  margin: 0 5px;
  padding: 0;
}
.hero-carousel .carousel-indicators button:nth-child(2) {
  background-color: var(--gold);
}
.hero-carousel .carousel-indicators button:nth-child(3) {
  background-color: var(--teal);
}
.hero-carousel .carousel-indicators button.active {
  opacity: 1;
}

/* floating decorations: balloons, confetti, stars, cockades, pennants, cupcakes.
   Used inside .row-floaters (a section-row-scoped container) rather than the
   hero, so the travel distance is tuned in px to the row's own height instead
   of vh units. */
.row-floaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* -- balloons: rounded body + knot + wavy string, drawn as inline SVG so the
      taper (narrow bottom, round top) stays crisp at any size -- */
.balloon {
  position: absolute;
  bottom: -160px;
  width: 46px;
  aspect-ratio: 40 / 90;
  opacity: .9;
  animation: floatUpRow linear infinite;
}
.balloon-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.balloon-svg .balloon-body,
.balloon-svg .balloon-knot { fill: currentColor; }
.balloon-svg .balloon-string { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.5; }
.balloon-svg .balloon-shine { fill: #fff; opacity: .35; }

.bln-1 { left: 6%;  color: var(--coral); animation-duration: 12s; animation-delay: 0s; }
.bln-2 { left: 20%; color: var(--gold);  animation-duration: 15s; animation-delay: 2s; width: 34px; }
.bln-3 { left: 82%; color: var(--teal);  animation-duration: 13s; animation-delay: 4s; }
.bln-4 { left: 92%; color: var(--coral); animation-duration: 17s; animation-delay: 1s; width: 36px; }

@keyframes floatUpRow {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  8%   { opacity: .9; }
  50%  { transform: translateY(-260px) translateX(14px) rotate(6deg); }
  92%  { opacity: .9; }
  100% { transform: translateY(-540px) translateX(-8px) rotate(-4deg); opacity: 0; }
}

/* -- confetti: small squares/ribbons/dots that tumble upward -- */
.confetti {
  position: absolute;
  bottom: -40px;
  opacity: 0;
  animation: confettiUpRow linear infinite;
}
.confetti.square { width: 10px; height: 10px; border-radius: 2px; }
.confetti.circle { width: 9px; height: 9px; border-radius: 50%; }
.confetti.ribbon { width: 5px; height: 16px; border-radius: 2px; }

.cf-1 { left: 12%; background: var(--gold);  animation-duration: 10s; animation-delay: 0.5s; }
.cf-2 { left: 30%; background: var(--teal);  animation-duration: 12s; animation-delay: 3s; }
.cf-3 { left: 46%; background: var(--coral); animation-duration: 9s;  animation-delay: 5s; }
.cf-4 { left: 64%; background: var(--gold);  animation-duration: 13s; animation-delay: 1.5s; }
.cf-5 { left: 82%; background: var(--teal);  animation-duration: 11s; animation-delay: 4s; }
.cf-5 { left: 78%; background: var(--pink);  animation-duration: 10s; animation-delay: 6s; }
.cf-6 { left: 38%; background: var(--coral); animation-duration: 14s; animation-delay: 7s; }
.cf-7 { left: 95%; background: var(--gold);  animation-duration: 8s;  animation-delay: 2.5s; }

/* sprinkle confetti reused for the repostería row, dessert-toned */
.sp-1 { left: 10%; background: var(--coral); animation-duration: 9s;  animation-delay: 0.5s; }
.sp-2 { left: 32%; background: var(--gold);  animation-duration: 11s; animation-delay: 3.5s; }
.sp-3 { left: 68%; background: var(--teal);  animation-duration: 10s; animation-delay: 1.5s; }
.sp-4 { left: 90%; background: var(--gold);  animation-duration: 12s; animation-delay: 5s; }

@keyframes confettiUpRow {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: .9; }
  50%  { transform: translateY(-240px) rotate(180deg); }
  90%  { opacity: .9; }
  100% { transform: translateY(-500px) rotate(360deg); opacity: 0; }
}

/* -- stars: little twinkling sparkles drifting up -- */
.star {
  position: absolute;
  bottom: -30px;
  width: 20px;
  height: 20px;
  color: var(--gold);
  opacity: 0;
  animation: starUpRow linear infinite;
}
.star svg { width: 100%; height: 100%; }

.st-1 { left: 35%; animation-duration: 15s; animation-delay: 2s; }
.st-2 { left: 68%; color: var(--coral); width: 16px; height: 16px; animation-duration: 17s; animation-delay: 6s; }

@keyframes starUpRow {
  0%   { transform: translateY(0) rotate(0deg) scale(.6); opacity: 0; }
  10%  { opacity: .85; }
  50%  { transform: translateY(-280px) rotate(90deg) scale(1); opacity: .85; }
  90%  { opacity: .85; }
  100% { transform: translateY(-560px) rotate(180deg) scale(.6); opacity: 0; }
}

/* -- cockades (escarapelas) + flags: Fiestas Patrias, light-blue-and-white -- */
.cockade {
  position: absolute;
  bottom: -70px;
  width: 30px;
  aspect-ratio: 40 / 60;
  opacity: .9;
  animation: floatUpRow linear infinite;
}
.cockade svg { width: 100%; height: 100%; overflow: visible; display: block; }
.cockade-ring { fill: #fff; stroke: var(--arg-blue); stroke-width: 4; }
.cockade-center { fill: var(--arg-blue); }
.cockade-tail-a { fill: var(--arg-blue); }
.cockade-tail-b { fill: #fff; stroke: var(--arg-blue); stroke-width: 1; }

.ck-1 { left: 8%;  animation-duration: 13s; animation-delay: 0s; }
.ck-2 { left: 46%; animation-duration: 16s; animation-delay: 3s; width: 26px; }
.ck-3 { left: 90%; animation-duration: 14s; animation-delay: 5s; width: 24px; }

.flag {
  position: absolute;
  bottom: -60px;
  width: 34px;
  aspect-ratio: 40 / 30;
  opacity: .9;
  animation: floatUpRow linear infinite;
}
.flag svg { width: 100%; height: 100%; overflow: visible; display: block; }
.flag-pole { stroke: #9a9a9a; stroke-width: 2; }
.flag-blue { fill: var(--arg-blue); }
.flag-white { fill: #fff; }

.fl-1 { left: 26%; animation-duration: 12s; animation-delay: 1.5s; }
.fl-2 { left: 64%; animation-duration: 15s; animation-delay: 4.5s; width: 30px; }
.fl-3 { left: 78%; animation-duration: 11s; animation-delay: 7s;  width: 30px; }

.pcf-1 { left: 15%; background: var(--arg-blue); animation-duration: 10s; animation-delay: 0.5s; }
.pcf-2 { left: 58%; background: var(--gold);     animation-duration: 12s; animation-delay: 3s; }
.pcf-3 { left: 36%; background: #fff; border: 1px solid var(--arg-blue); animation-duration: 9s;  animation-delay: 5s; }
.pcf-4 { left: 95%; background: var(--arg-blue); animation-duration: 13s; animation-delay: 2s; }
.pcf-5 { left: 24%; background: var(--gold);     animation-duration: 11s; animation-delay: 6.5s; }
.pcf-6 { left: 72%; background: #fff; border: 1px solid var(--arg-blue); animation-duration: 14s; animation-delay: 4s; }

/* -- candies: Fiestas de cumpleaños -- */
.candy {
  position: absolute;
  bottom: -50px;
  width: 32px;
  aspect-ratio: 40 / 24;
  opacity: .9;
  animation: confettiUpRow linear infinite;
}
.candy svg { width: 100%; height: 100%; overflow: visible; display: block; }
.candy-wrap { fill: currentColor; opacity: .85; }
.candy-body { fill: currentColor; }
.candy-stripe { stroke: #fff; stroke-width: 2; opacity: .6; }

.cd-1 { left: 40%; color: var(--pink);  animation-duration: 11s; animation-delay: 1s; }
.cd-2 { left: 58%; color: var(--teal);  animation-duration: 13s; animation-delay: 4s; width: 28px; }
.cd-3 { left: 12%; color: var(--gold);  animation-duration: 12s; animation-delay: 6.5s; width: 30px; }

/* -- puddings ("cupcakes"): the original dome + drizzle + shine shape -- */
.pudding {
  position: absolute;
  bottom: -90px;
  width: 56px;
  aspect-ratio: 60 / 50;
  opacity: .92;
  animation: floatUpRow linear infinite;
}
.pudding svg { width: 100%; height: 100%; overflow: visible; display: block; }
.pudding-body { fill: currentColor; }
.pudding-shine { fill: #fff; opacity: .25; }
.pudding-caramel { stroke: var(--ink); stroke-width: 1.5; fill: none; opacity: .35; }

.pd-1 { left: 8%;  color: var(--gold);  animation-duration: 16s; animation-delay: 0s; }
.pd-2 { left: 46%; color: var(--coral); animation-duration: 19s; animation-delay: 4s; width: 48px; }
.pd-3 { left: 86%; color: var(--teal);  animation-duration: 17s; animation-delay: 7s; width: 50px; }

/* -- budines: the large two-part shape — a flatter "cake" loaf on top of a
      lighter, flared "mold" (foil tray) — viewed from the side like a long
      loaf. Drizzle marks reuse the same short-squiggle style as the
      cupcakes' caramel drips, just rotated horizontal, and sit inside the
      cake body (below the crust line) rather than poking above it. -- */
.budin {
  position: absolute;
  bottom: -90px;
  width: 92px;
  aspect-ratio: 110 / 50;
  opacity: .95;
  animation: floatUpRow linear infinite;
}
.budin svg { width: 100%; height: 100%; overflow: visible; display: block; }
.budin-mold { fill: currentColor; opacity: .5; }
.budin-cake { fill: currentColor; }
.budin-drizzle { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: .4; }

.bd-1 { left: 20%; color: var(--coral); animation-duration: 18s; animation-delay: 2.5s; }
.bd-2 { left: 58%; color: var(--gold);  animation-duration: 20s; animation-delay: 6s; width: 100px; }

/* -- sprinkles: small multicolor rods instead of confetti squares/dots -- */
.sprinkle {
  position: absolute;
  bottom: -30px;
  width: 15px;
  height: 5px;
  border-radius: 3px;
  opacity: 0;
  animation: confettiUpRow linear infinite;
}
.sp-1 { left: 14%; background: var(--coral); transform: rotate(15deg);  animation-duration: 9s;  animation-delay: 0.5s; }
.sp-2 { left: 34%; background: var(--gold);  transform: rotate(-25deg); animation-duration: 11s; animation-delay: 3s; }
.sp-3 { left: 55%; background: var(--teal);  transform: rotate(40deg);  animation-duration: 10s; animation-delay: 1.5s; }
.sp-4 { left: 74%; background: var(--pink);  transform: rotate(-10deg); animation-duration: 12s; animation-delay: 5s; }
.sp-5 { left: 92%; background: var(--gold);  transform: rotate(30deg);  animation-duration: 8s;  animation-delay: 2.5s; }
.sp-6 { left: 5%;  background: var(--teal);  transform: rotate(-45deg); animation-duration: 13s; animation-delay: 7.5s; }

/* -- Festividades floaters: pine (Navidad), pumpkin (Halloween), egg (Pascuas) -- */
.pine {
  position: absolute;
  bottom: -40px;
  width: 28px;
  opacity: 0;
  animation: floatUpRow linear infinite;
}
.pine svg { width: 100%; display: block; overflow: visible; }
.pine-body { fill: currentColor; }
.pn-1 { left: 10%; color: var(--green); animation-duration: 14s; animation-delay: 1s; }
.pn-2 { left: 45%; color: var(--green); animation-duration: 17s; animation-delay: 4s; width: 24px; }
.pn-3 { left: 80%; color: var(--green); animation-duration: 15s; animation-delay: 7s; }

.pumpkin {
  position: absolute;
  bottom: -50px;
  width: 44px;
  opacity: 0;
  animation: floatUpRow linear infinite;
}
.pumpkin svg { width: 100%; display: block; overflow: visible; }
.pumpkin-body { fill: currentColor; }
.pumpkin-rib { stroke: var(--ink); stroke-width: 1.3; opacity: .25; fill: none; }
.pumpkin-stem { fill: var(--ink); opacity: .55; }
.pumpkin-face { fill: var(--ink); opacity: .85; }
.pk-1 { left: 25%; color: var(--orange); animation-duration: 16s; animation-delay: 2.5s; }
.pk-2 { left: 60%; color: var(--orange); animation-duration: 18s; animation-delay: 0.5s; width: 40px; }
.pk-3 { left: 90%; color: var(--orange); animation-duration: 14s; animation-delay: 5.5s; }

.egg {
  position: absolute;
  bottom: -40px;
  width: 30px;
  opacity: 0;
  animation: floatUpRow linear infinite;
}
.egg svg { width: 100%; display: block; overflow: visible; }
.egg-body { fill: currentColor; }
.egg-band { stroke: #fff; stroke-width: 2.5; fill: none; opacity: .85; }
.egg-dot { fill: #fff; opacity: .85; }
.eg-1 { left: 5%;  color: var(--pink); animation-duration: 13s; animation-delay: 3s; }
.eg-2 { left: 38%; color: var(--teal); animation-duration: 15s; animation-delay: 6s; width: 26px; }
.eg-3 { left: 70%; color: var(--gold); animation-duration: 17s; animation-delay: 1.5s; }

/* -- "¡Y otras!" stars, reusing the .star component with festividades-specific colors -- */
.fst-1 { left: 18%; color: var(--teal); animation-duration: 12s; animation-delay: 0s; }
.fst-2 { left: 52%; color: var(--pink); animation-duration: 14s; animation-delay: 4.5s; width: 16px; height: 16px; }
.fst-3 { left: 85%; color: var(--gold); animation-duration: 11s; animation-delay: 2s; }

/* -- Navidad confetti -- */
.ncf-1 { left: 12%; background: var(--coral); animation-duration: 10s; animation-delay: 0.5s; }
.ncf-2 { left: 30%; background: #fff; border: 1px solid var(--coral); animation-duration: 12s; animation-delay: 3s; }
.ncf-3 { left: 46%; background: var(--coral); animation-duration: 9s;  animation-delay: 5s; }
.ncf-4 { left: 64%; background: #fff; border: 1px solid var(--coral); animation-duration: 13s; animation-delay: 1.5s; }
.ncf-5 { left: 82%; background: var(--coral); animation-duration: 11s; animation-delay: 4s; }
.ncf-6 { left: 96%; background: #fff; border: 1px solid var(--coral); animation-duration: 10s; animation-delay: 6.5s; }

/* -- Ornament (Christmas ball) -- */
.ornament {
  position: absolute;
  bottom: -40px;
  width: 30px;
  opacity: 0;
  animation: floatUpRow linear infinite;
}
.ornament svg { width: 100%; display: block; overflow: visible; }
.ornament-cap { fill: var(--ink); opacity: .55; }
.ornament-loop { stroke: var(--ink); stroke-width: 1.5; fill: none; opacity: .55; }
.ornament-body { fill: currentColor; stroke: rgba(0,0,0,.15); stroke-width: 1; }
.ornament-shine { fill: #fff; opacity: .25; }
.orn-1 { left: 8%;  color: var(--coral);    animation-duration: 15s; animation-delay: 2s; }
.orn-2 { left: 42%; color: var(--gold);     animation-duration: 17s; animation-delay: 5s; width: 26px; }
.orn-3 { left: 75%; color: var(--arg-blue); animation-duration: 14s; animation-delay: 0.5s; }

/* -- Halloween confetti -- */
.hcf-1 { left: 14%; background: var(--ink);   animation-duration: 10s; animation-delay: 1s; }
.hcf-2 { left: 32%; background: var(--orange); animation-duration: 12s; animation-delay: 4s; }
.hcf-3 { left: 48%; background: var(--ink);   animation-duration: 9s;  animation-delay: 2s; }
.hcf-4 { left: 66%; background: var(--orange); animation-duration: 13s; animation-delay: 5.5s; }
.hcf-5 { left: 84%; background: var(--ink);   animation-duration: 11s; animation-delay: 0.5s; }
.hcf-6 { left: 5%;  background: var(--orange); animation-duration: 10s; animation-delay: 7s; }

/* -- Ghost (Halloween) -- */
.ghost {
  position: absolute;
  bottom: -40px;
  width: 32px;
  opacity: 0;
  animation: floatUpRow linear infinite;
}
.ghost svg { width: 100%; display: block; overflow: visible; }
.ghost-body { fill: currentColor; }
.ghost-eye { fill: #fff; opacity: .9; }
.gst-1 { left: 15%; color: var(--ink);    animation-duration: 16s; animation-delay: 3s; }
.gst-2 { left: 55%; color: var(--orange); animation-duration: 18s; animation-delay: 0.5s; width: 28px; }
.gst-3 { left: 88%; color: var(--ink);    animation-duration: 15s; animation-delay: 5.5s; }

/* -- Pascuas confetti -- */
.ecf-1 { left: 10%; background: var(--pink); animation-duration: 10s; animation-delay: 2.5s; }
.ecf-2 { left: 28%; background: var(--teal); animation-duration: 12s; animation-delay: 0.5s; }
.ecf-3 { left: 44%; background: var(--gold); animation-duration: 9s;  animation-delay: 4s; }
.ecf-4 { left: 62%; background: var(--pink); animation-duration: 13s; animation-delay: 1.5s; }
.ecf-5 { left: 80%; background: var(--teal); animation-duration: 11s; animation-delay: 6s; }
.ecf-6 { left: 94%; background: var(--gold); animation-duration: 10s; animation-delay: 3.5s; }

/* -- Flower (Pascuas) -- */
.flower {
  position: absolute;
  bottom: -40px;
  width: 28px;
  opacity: 0;
  animation: floatUpRow linear infinite;
}
.flower svg { width: 100%; display: block; overflow: visible; }
.flower-petal { fill: currentColor; }
.flower-center { fill: var(--gold); }
.flr-1 { left: 6%;  color: var(--pink); animation-duration: 14s; animation-delay: 1s; }
.flr-2 { left: 40%; color: var(--teal); animation-duration: 16s; animation-delay: 4.5s; width: 24px; }
.flr-3 { left: 72%; color: var(--pink); animation-duration: 13s; animation-delay: 6s; }

/* -- Otras confetti -- */
.ocf-1 { left: 16%; background: var(--coral); animation-duration: 10s; animation-delay: 0.5s; }
.ocf-2 { left: 34%; background: var(--gold);  animation-duration: 12s; animation-delay: 3s; }
.ocf-3 { left: 50%; background: var(--teal);  animation-duration: 9s;  animation-delay: 5s; }
.ocf-4 { left: 68%; background: var(--coral); animation-duration: 13s; animation-delay: 1.5s; }
.ocf-5 { left: 86%; background: var(--gold);  animation-duration: 11s; animation-delay: 4s; }
.ocf-6 { left: 3%;  background: var(--teal);  animation-duration: 10s; animation-delay: 6.5s; }

/* -- Heart ("¡Y otras!") -- */
.heart {
  position: absolute;
  bottom: -40px;
  width: 26px;
  opacity: 0;
  animation: floatUpRow linear infinite;
}
.heart svg { width: 100%; display: block; overflow: visible; }
.heart-body { fill: currentColor; }
.hrt-1 { left: 20%; color: var(--coral); animation-duration: 15s; animation-delay: 2s; }
.hrt-2 { left: 58%; color: var(--pink);  animation-duration: 17s; animation-delay: 5s; width: 22px; }
.hrt-3 { left: 92%; color: var(--coral); animation-duration: 14s; animation-delay: 0.5s; }

/* ---------- Feature pills ---------- */
.feature-pill {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  height: 100%;
  background: var(--cream);
  border-radius: 14px;
  padding: .85rem 1rem;
  font-weight: 600;
  font-size: .92rem;
}
.feature-pill i { color: var(--coral); font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem; line-height: 1; }
.feature-pill span { line-height: 1.3; }

/* ---------- Category cards ---------- */
.category-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
}
.category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,.12);
}
.category-card img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
}
.category-body { padding: 1.1rem 1.25rem 1.4rem; }
.category-body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .35rem;
}
.category-body p {
  font-size: .9rem;
  color: #666;
  margin-bottom: 0;
}

/* ---------- Collection rows (Fiestas Patrias / Cumpleaños / Repostería) ---------- */
.collection-row {
  position: relative;
  overflow: hidden;
  padding: 4rem 0;
}
.patrias-band {
  background: linear-gradient(180deg, rgba(117, 170, 219, .10), rgba(117, 170, 219, .03));
}
.reposteria-band {
  background: linear-gradient(180deg, rgba(255, 183, 3, .12), rgba(255, 183, 3, .03));
}
.cumpleanos-band {
  background: linear-gradient(180deg, rgba(255, 90, 95, .10), rgba(255, 90, 95, .03));
}
.navidad-band {
  background: linear-gradient(180deg, rgba(255, 90, 95, .10), rgba(255, 90, 95, .03));
}
.halloween-band {
  background: linear-gradient(180deg, rgba(255, 117, 24, .12), rgba(255, 117, 24, .03));
}
.pascuas-band {
  background: linear-gradient(180deg, rgba(255, 143, 163, .12), rgba(255, 143, 163, .03));
}
.otras-band {
  background: linear-gradient(180deg, rgba(46, 196, 182, .10), rgba(46, 196, 182, .03));
}
.collection-row .container.position-relative { z-index: 2; }
.collection-row img.img-fluid {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* -- Todo para tu fiesta: groups Repostería / Cumpleaños / Fiestas Patrias into one visual "collection" -- */
.fiesta-wrap {
  position: relative;
  background: var(--cream);
}

/* -- Festividades: groups Navidad / Halloween / Pascuas / ¡Y otras! into one visual "collection" -- */
.festividades-wrap {
  position: relative;
  background: var(--cream);
}

@media (max-width: 991.98px) {
  .collection-row { padding: 3rem 0; }
}

/* ---------- Check list (product highlights inside each collection) ---------- */
.check-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem 1.5rem;
}
.check-list li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
}
.check-list li i {
  flex-shrink: 0;
  line-height: 1;
}
.check-list.list-patrias li i { color: var(--arg-blue); }
.check-list.list-cumple li i { color: var(--coral); }
.check-list.list-reposteria li i { color: var(--gold); }
.check-list.list-navidad li i { color: var(--coral); }
.check-list.list-halloween li i { color: var(--orange); }
.check-list.list-pascuas li i { color: var(--pink); }
.check-list.list-otras li i { color: var(--teal); }

@media (max-width: 575.98px) {
  .check-list { grid-template-columns: 1fr; }
}

/* ---------- Branch cards ---------- */
.branch-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  height: 100%;
}
.branch-map { width: 100%; height: 260px; }
.branch-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.branch-body { padding: 1.5rem; }
.branch-body h3 {
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.branch-body h3 i { color: var(--teal); }
.branch-list { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.branch-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: .6rem;
  font-size: .95rem;
}
.branch-list li i { color: var(--coral); margin-top: .2rem; }

/* ---------- Instagram grid ---------- */
.ig-item {
  display: block;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.ig-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ig-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,26,26,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.6rem;
  opacity: 0;
  transition: opacity .25s ease;
}
.ig-item:hover .ig-overlay { opacity: 1; }
.ig-item:hover img { transform: scale(1.08); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); }
.footer-links li { margin-bottom: .5rem; }
.footer-links a { color: rgba(255,255,255,.65); font-size: .95rem; }
.footer-links a:hover { color: var(--gold); }

/* ---------- Floating WhatsApp button ---------- */
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  background: var(--whatsapp);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  box-shadow: 0 8px 20px rgba(37, 211, 102, .45);
  z-index: 1000;
  animation: pulse 2.4s infinite;
}
.whatsapp-float:hover { color: #fff; background: var(--whatsapp-dark); }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
  70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 1399.98px) {
  #mainNav .navbar-collapse { padding-top: .75rem; }
}

@media (max-width: 991.98px) {
  .hero { padding-top: 6.5rem; padding-bottom: 2.5rem; }
}

@media (max-width: 575.98px) {
  .branch-map { height: 220px; }
}