/* ==========================================================================
   OH MY GOSH BALLOONS — bright, party-forward theme.
   Light is the default here (the 3D site is dark-first); the toggle opts into
   a deep-purple night mode that keeps the neon accents.
   ========================================================================== */
:root {
  --bg: #fff7fb;
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --surface-hover: #fff0f7;
  --text: #1b1030;
  --text-muted: #6b5b7e;
  --border: #f4dcea;
  --border-strong: #e9c4dc;

  --pink: #ff2e88;
  --violet: #7c4dff;
  --blue: #4d8bff;
  --mint: #00c2a8;
  --yellow: #ffc21a;
  --orange: #ff7a29;

  --accent: var(--pink);
  --accent-2: var(--violet);
  --on-accent: #ffffff;

  --grad: linear-gradient(100deg, #ff2e88 0%, #ff7a29 30%, #ffc21a 50%, #00c2a8 70%, #7c4dff 100%);
  --grad-soft: linear-gradient(135deg, #ffe6f2 0%, #f0e9ff 50%, #e4f7f4 100%);
  --string: rgba(90, 40, 90, .28);

  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 18px 40px -18px rgba(123, 40, 100, 0.35);
  --shadow-lg: 0 30px 70px -28px rgba(123, 40, 100, 0.45);
  --header-h: 74px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #150a24;
  --bg-alt: #1c0e2e;
  --surface: #221237;
  --surface-hover: #2b1746;
  --text: #f8effa;
  --text-muted: #b9a4cf;
  --border: #35204f;
  --border-strong: #4a2c6b;
  --grad-soft: linear-gradient(135deg, #2a1140 0%, #1d1136 50%, #10262b 100%);
  /* A dark string vanishes against the night background — lighten it there. */
  --string: rgba(255, 235, 250, .34);
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 30px 70px -28px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 6px; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 6.2vw, 4.3rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: 1.22rem; letter-spacing: -0.01em; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Header ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  min-height: var(--header-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.header-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.05; letter-spacing: -0.01em; }
/* The official logo is a square badge on a white ground. Rounding it and
   keeping that white behind it makes it read as a deliberate badge on the
   light theme and stops it becoming a raw white square on the dark one. */
.brand img { width: 44px; height: 44px; display: block; border-radius: 11px; background: #fff; object-fit: contain; }
.brand small { display: block; font-family: var(--font-body); font-size: .58rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); }

.main-nav { display: flex; align-items: center; gap: 20px; font-size: .93rem; font-weight: 700; }
.main-nav a { color: var(--text-muted); transition: color .2s; }
.main-nav a:hover { color: var(--accent); }

.header-actions { display: flex; align-items: center; gap: 10px; }

.lang-switcher { display: flex; gap: 5px; }
.lang-flag {
  width: 27px; height: 19px; padding: 0; border: 1px solid var(--border-strong);
  border-radius: 4px; overflow: hidden; cursor: pointer; background: none;
  opacity: .5; transition: opacity .2s, transform .2s;
}
.lang-flag svg { width: 100%; height: 100%; display: block; }
.lang-flag:hover { opacity: .85; transform: translateY(-1px); }
.lang-flag.is-active { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }

.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 7px 12px; cursor: pointer; font: inherit; font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; transition: border-color .2s, transform .2s;
}
.theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); }
.icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: inline; }

/* ---------- Buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: 999px; font-weight: 800; font-size: .97rem;
  border: 2px solid transparent; cursor: pointer; transition: transform .18s, box-shadow .18s, background .2s;
  white-space: nowrap;
}
.btn-primary { background: var(--grad); background-size: 220% 100%; color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { transform: translateY(-2px); background-position: 60% 0; box-shadow: var(--shadow-lg); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); }
.btn-whatsapp { background: #25d366; color: #05270f; padding: 10px 16px; font-size: .88rem; }
.btn-whatsapp:hover { transform: translateY(-2px); }
.btn-lg { padding: 17px 34px; font-size: 1.05rem; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2.5px; background: var(--text); border-radius: 2px; }

/* ---------- Hero ------------------------------------------------------ */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 9vw, 104px) 0 clamp(48px, 7vw, 88px); background: var(--grad-soft); }
.hero::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 90px;
  background: linear-gradient(to bottom, transparent, var(--bg));
}
/* Rising balloons.
   No `will-change` on purpose: transform animations are composited anyway, and
   hinting 24 elements forces 24 layers, which is real memory pressure on a phone.
   Two transforms have to run at once — a slow vertical drift and a gentle
   sideways sway — so they live on different elements: .balloon rises, the <i>
   inside it sways. Composing them on one element would mean one animation
   overwriting the other.
   Three depth layers (far / mid / near) differ in size, blur, opacity and
   speed, which is what stops it reading as a flat row of stickers. */
.hero-bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  /* Without this a balloon is chopped off flat against the top of the hero.
     The mask fades it out as it drifts up, and softens the bottom edge where
     balloons slide in, so neither boundary is visible. Timing-independent —
     it works whatever speed a balloon is travelling at. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 94%, transparent 100%);
}

.balloon {
  position: absolute;
  bottom: -30vh;
  left: var(--x);
  /* Longhands, not the `animation:` shorthand. Safari parses var() inside the
     shorthand poorly — two time values from custom properties (duration and a
     negative delay) can make the whole declaration invalid at computed-value
     time, which silently drops the animation. That is why these did not move
     on iPhone while working everywhere else. */
  animation-name: rise;
  animation-duration: var(--dur);
  animation-timing-function: linear;
  animation-delay: var(--delay);
  animation-iteration-count: infinite;
}
.balloon i {
  position: relative;
  display: block;
  width: var(--size);
  height: calc(var(--size) * 1.2);
  border-radius: 50% 50% 48% 52% / 44% 44% 56% 56%;
  background: var(--fill);
  opacity: var(--op, .55);
  /* blur(0) is not a valid length in Safari and voids the whole filter;
     blur(0px) is. */
  filter: blur(var(--blur, 0px));
  animation-name: sway;
  animation-duration: var(--sway, 7s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
/* highlight */
.balloon i::before {
  content: ""; position: absolute;
  left: 20%; top: 14%; width: 28%; height: 22%;
  border-radius: 50%; background: rgba(255,255,255,.55);
  transform: rotate(-20deg);
}
/* knot + string: one curved hairline, drawn with a rounded left border */
.balloon i::after {
  content: ""; position: absolute;
  left: 50%; top: 100%;
  width: calc(var(--size) * .3);
  height: calc(var(--size) * .75);
  border-left: 1.5px solid currentColor;
  border-bottom-left-radius: 100%;
  color: var(--string);
  opacity: var(--op, .55);
}

@keyframes rise { to { transform: translateY(-160vh); } }
@keyframes sway {
  from { transform: translateX(calc(var(--size) * -.22)) rotate(-5deg); }
  to   { transform: translateX(calc(var(--size) * .22)) rotate(5deg); }
}

/* far layer — small, blurred, slow */
.balloon:nth-child(1)  { --x: 4%;  --size: 34px; --dur: 34s; --delay: -2s;  --sway: 9s;  --op: .3; --blur: 1.5px; --fill: linear-gradient(150deg, #ff5fa2, #ffb3d1); }
.balloon:nth-child(2)  { --x: 27%; --size: 28px; --dur: 41s; --delay: -19s; --sway: 11s; --op: .26; --blur: 2px;  --fill: linear-gradient(150deg, #7c4dff, #b79bff); }
.balloon:nth-child(3)  { --x: 63%; --size: 32px; --dur: 37s; --delay: -8s;  --sway: 8s;  --op: .28; --blur: 1.5px; --fill: linear-gradient(150deg, #ffc21a, #ffdd7a); }
.balloon:nth-child(4)  { --x: 88%; --size: 26px; --dur: 44s; --delay: -27s; --sway: 12s; --op: .24; --blur: 2px;  --fill: linear-gradient(150deg, #00c2a8, #7fe3d6); }

/* mid layer */
.balloon:nth-child(5)  { --x: 13%; --size: 56px; --dur: 26s; --delay: -5s;  --sway: 7s;  --op: .45; --fill: linear-gradient(150deg, #ff2e88, #ff7a29); }
.balloon:nth-child(6)  { --x: 40%; --size: 48px; --dur: 30s; --delay: -21s; --sway: 8.5s; --op: .4; --fill: linear-gradient(150deg, #4d8bff, #9dc0ff); }
.balloon:nth-child(7)  { --x: 74%; --size: 60px; --dur: 24s; --delay: -12s; --sway: 6.5s; --op: .42; --fill: linear-gradient(150deg, #7c4dff, #ff5fa2); }
.balloon:nth-child(8)  { --x: 55%; --size: 44px; --dur: 33s; --delay: -29s; --sway: 9.5s; --op: .38; --fill: linear-gradient(150deg, #00c2a8, #4d8bff); }
.balloon:nth-child(9)  { --x: 95%; --size: 52px; --dur: 28s; --delay: -16s; --sway: 7.5s; --op: .4; --fill: linear-gradient(150deg, #ffc21a, #ff7a29); }

/* near layer — big, bright, fastest */
.balloon:nth-child(10) { --x: -2%; --size: 92px; --dur: 19s; --delay: -3s;  --sway: 6s;  --op: .5; --fill: linear-gradient(150deg, #ff2e88, #ff9a3c); }
.balloon:nth-child(11) { --x: 33%; --size: 78px; --dur: 22s; --delay: -14s; --sway: 6.8s; --op: .45; --fill: linear-gradient(150deg, #b79bff, #7c4dff); }
.balloon:nth-child(12) { --x: 82%; --size: 86px; --dur: 20s; --delay: -24s; --sway: 5.6s; --op: .48; --fill: linear-gradient(150deg, #ff7ab6, #ffd3e4); }

/* Frozen mid-flight looks broken, so reduced motion gets a still arrangement
   instead: the same balloons, parked at pleasant heights. */
@media (prefers-reduced-motion: reduce) {
  .balloon, .balloon i { animation: none; }
  .balloon { bottom: auto; top: var(--rest, 20%); }
  .balloon:nth-child(1)  { --rest: 12%; }
  .balloon:nth-child(2)  { --rest: 58%; }
  .balloon:nth-child(3)  { --rest: 8%; }
  .balloon:nth-child(4)  { --rest: 44%; }
  .balloon:nth-child(5)  { --rest: 62%; }
  .balloon:nth-child(6)  { --rest: 6%; }
  .balloon:nth-child(7)  { --rest: 52%; }
  .balloon:nth-child(8)  { --rest: 18%; }
  .balloon:nth-child(9)  { --rest: 66%; }
  .balloon:nth-child(10) { --rest: 34%; }
  .balloon:nth-child(11) { --rest: 70%; }
  .balloon:nth-child(12) { --rest: 26%; }
}

.hero-inner { position: relative; z-index: 1; text-align: center; max-width: 900px; }
.eyebrow {
  display: inline-block; margin: 0 0 18px; padding: 7px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-strong);
  font-size: .76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted);
}
.hero-sub { font-size: clamp(1.02rem, 2vw, 1.2rem); color: var(--text-muted); max-width: 660px; margin: 0 auto 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 34px; }
.hero-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 0; margin: 0; }
.hero-badges li {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 16px; font-size: .85rem; font-weight: 700; box-shadow: 0 6px 18px -12px rgba(123,40,100,.5);
}

/* ---------- Marquee ticker -------------------------------------------- */
.ticker { background: var(--grad); overflow: hidden; padding: 13px 0; }
.ticker-track { display: flex; gap: 34px; width: max-content; animation: slide 34s linear infinite; }
.ticker-track span {
  color: #fff; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
  letter-spacing: .02em; white-space: nowrap; display: flex; align-items: center; gap: 34px;
}
.ticker-track span::after { content: "\25CF"; font-size: .55rem; opacity: .7; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- Sections -------------------------------------------------- */
.section { padding: clamp(58px, 8vw, 96px) 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--border); }
.section-title { text-align: center; margin-bottom: 12px; }
.section-sub { text-align: center; color: var(--text-muted); max-width: 640px; margin: 0 auto 44px; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Service cards --------------------------------------------- */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 22px; }
.card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px 26px 26px; overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--grad); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.card-icon { font-size: 2.1rem; line-height: 1; margin-bottom: 14px; }
.card p { color: var(--text-muted); margin: 0 0 14px; font-size: .97rem; }
.card .price { font-weight: 800; color: var(--accent); font-size: .95rem; margin-bottom: 12px; }
.card-link { font-weight: 800; color: var(--accent-2); font-size: .93rem; }
.card-link:hover { text-decoration: underline; }

/* ---------- Gallery + filters ----------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 30px; }
.filter-btn {
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-muted);
  border-radius: 999px; padding: 9px 18px; font: inherit; font-size: .87rem; font-weight: 800;
  cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.filter-btn:hover { color: var(--accent); border-color: var(--accent); }
.filter-btn.is-active { background: var(--grad); color: #fff; border-color: transparent; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.gallery-item {
  position: relative; padding: 0; border: 0; background: var(--surface); cursor: zoom-in;
  border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3; display: block;
  box-shadow: 0 10px 26px -18px rgba(123,40,100,.6);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item figcaption {
  position: absolute; inset: auto 0 0 0; padding: 26px 14px 12px; text-align: left;
  background: linear-gradient(to top, rgba(20,6,30,.78), transparent);
  color: #fff; font-size: .84rem; font-weight: 700;
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s;
}
.gallery-item:hover figcaption, .gallery-item:focus-visible figcaption { opacity: 1; transform: none; }
.gallery-item[hidden] { display: none; }

/* ---------- Rentals --------------------------------------------------- */
.rental-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.rental {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: transform .25s, box-shadow .25s;
}
.rental:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.rental img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.rental-body { padding: 18px 20px 22px; }
.rental-body h3 { margin-bottom: .35em; font-size: 1.08rem; }
.rental-body p { margin: 0; color: var(--text-muted); font-size: .92rem; }

/* ---------- Process --------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; counter-reset: step; }
.step { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 24px 26px; margin-top: 20px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -20px; left: 24px;
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; background: var(--grad); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  box-shadow: var(--shadow);
}
.step h3 { margin-top: 8px; }
.step p { color: var(--text-muted); margin: 0; font-size: .95rem; }

/* ---------- Areas ----------------------------------------------------- */
.area-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 26px; justify-content: center; }
.area-list li { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; font-size: .88rem; font-weight: 700; }
.area-note { color: var(--text-muted); text-align: center; max-width: 830px; margin: 0 auto; font-size: .95rem; }

/* ---------- FAQ ------------------------------------------------------- */
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 22px; }
.faq-item summary { cursor: pointer; font-weight: 800; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.5rem; color: var(--accent); line-height: 1; transition: transform .25s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--text-muted); margin: 0 0 18px; font-size: .96rem; }

/* ---------- Reviews --------------------------------------------------- */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.review { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; }
.review .stars { color: var(--yellow); letter-spacing: 2px; margin-bottom: 10px; }
.review blockquote { margin: 0 0 14px; font-size: 1rem; }
.review cite { font-style: normal; font-weight: 800; font-size: .9rem; color: var(--text-muted); }

/* ---------- Contact / form -------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 34px; align-items: start; }
.contact-info { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; font-weight: 700; }
.contact-list a:hover { color: var(--accent); }
.contact-list small { display: block; font-weight: 600; color: var(--text-muted); font-size: .82rem; }

.quote-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; display: grid; gap: 16px; }
.form-row { display: grid; gap: 6px; }
.form-row-split { grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-split > div { display: grid; gap: 6px; }
.quote-form label { font-size: .84rem; font-weight: 800; letter-spacing: .02em; }
.quote-form input, .quote-form select, .quote-form textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong); background: var(--bg); color: var(--text);
  font: inherit; font-size: .95rem;
}
.quote-form textarea { min-height: 108px; resize: vertical; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.hidden-field { position: absolute; left: -9999px; }
.form-note { font-size: .82rem; color: var(--text-muted); margin: 0; }
.form-success { background: color-mix(in srgb, var(--mint) 15%, var(--surface)); border: 1.5px solid var(--mint); border-radius: var(--radius-sm); padding: 14px 16px; font-weight: 700; font-size: .93rem; }

/* ---------- CTA band -------------------------------------------------- */
.cta-band { background: var(--grad); color: #fff; text-align: center; padding: clamp(48px, 7vw, 80px) 0; }
.cta-band h2 { color: #fff; }
.cta-band p { max-width: 560px; margin: 0 auto 26px; opacity: .95; }
.cta-band .btn-ghost { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.6); backdrop-filter: blur(4px); }
.cta-band .btn-ghost:hover { background: #fff; color: var(--pink); }
.cta-band .btn-primary { background: #fff; color: var(--pink); }

/* ---------- Footer ---------------------------------------------------- */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding: 52px 0 28px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 30px; margin-bottom: 34px; }
.footer-grid h3 { font-family: var(--font-body); font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: .93rem; }
.footer-grid a:hover { color: var(--accent); }
.footer-tagline { color: var(--text-muted); font-size: .93rem; max-width: 280px; }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; color: var(--text-muted); font-size: .84rem; }

/* ---------- Floating widgets ------------------------------------------ */
.fab-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; background: var(--grad); color: #fff; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s;
}
.fab-top.is-visible { opacity: 1; transform: none; }

.lightbox { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; background: rgba(16, 5, 26, .88); padding: 24px; }
.lightbox.is-open { display: grid; }
.lightbox figure { margin: 0; max-width: 1000px; text-align: center; }
.lightbox img { max-height: 78vh; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.lightbox figcaption { color: #fff; margin-top: 14px; font-weight: 700; font-size: .95rem; }
.lightbox-close { position: absolute; top: 18px; right: 22px; background: none; border: 0; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; }

/* ---------- Breadcrumb (subpages) ------------------------------------- */
.breadcrumb { font-size: .84rem; color: var(--text-muted); padding: 16px 0 0; }
.breadcrumb a:hover { color: var(--accent); }

.prose { max-width: 780px; margin: 0 auto; }
.prose p { color: var(--text-muted); }
.prose ul { color: var(--text-muted); padding-left: 20px; }
.prose li { margin-bottom: 10px; }
.prose strong { color: var(--text); }

/* ---------- Responsive ------------------------------------------------ */
@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-alt); border-bottom: 1px solid var(--border);
    padding: 8px 20px 16px; display: none; box-shadow: var(--shadow);
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .nav-toggle { display: flex; }
  .theme-toggle-label { display: none; }
  .header-actions .btn-whatsapp span { display: none; }
  .header-actions .btn-whatsapp { padding: 10px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .form-row-split { grid-template-columns: 1fr; }
  .btn { padding: 13px 20px; }
  /* Six flags plus the brand and the action buttons will not fit on one line.
     Wrap the header into two rows: brand + burger, then the actions centred
     underneath. The nav drawer hangs off `top: 100%`, so it follows along. */
  .header-inner { flex-wrap: wrap; row-gap: 10px; }
  .site-header { padding: 8px 0; }
  .brand { order: 1; flex: 1; font-size: 1rem; }
  .brand img { width: 38px; height: 38px; border-radius: 9px; }
  .nav-toggle { order: 2; }
  .header-actions { order: 3; width: 100%; justify-content: center; gap: 12px; }
  .lang-switcher { gap: 7px; }
  /* Keeping every balloon and fading them all was the wrong trade: at this
     width it pushed them to 13-27% opacity, which on a phone screen reads as
     nothing at all. Instead keep fewer balloons at full strength and pick the
     ones that hug the left and right edges, so the headline stays clear.
     Dropped: the whole far layer (too small and blurred to register here) plus
     the mid/near balloons that sit under the text. */
  .balloon:nth-child(1), .balloon:nth-child(2),
  .balloon:nth-child(3), .balloon:nth-child(4),
  .balloon:nth-child(6), .balloon:nth-child(8),
  .balloon:nth-child(11) { display: none; }
}