/* ============================================================
   BREAK BOX INSTANT — Contenido en vivo para bodas, XV años,
   bautizos, aniversarios, fiestas y eventos corporativos.
   Warm/light theme on purpose — Studio & Live are both dark and
   cool; Instant is daylight, paper, instant-film energy. Nav/footer
   shells and buttons/testimonials come from base.css; everything
   here is page-specific.
   ============================================================ */

/* The soft lavender tint started as just the Paquetes section's
   background, but it read so much better than flat cream that it's now
   the whole page's background. A flat tone rather than a gradient down
   the body on purpose — a directional gradient would just fade back to
   plain cream a screen or two down a page this long, and the point was
   for the purple to read on every section, not only near the top. */
body.instant{ background:#f5f0fa; color:var(--instant-ink); }
.instant .bb-nav{ color:var(--instant-ink); }
.instant .bb-nav.is-scrolled{ background:rgba(236,233,252,.86); box-shadow:0 1px 0 rgba(36,26,22,.08); }
.instant .bb-nav__cta{ background:var(--bb-purple-2); color:var(--instant-paper); border-color:var(--bb-purple-2); }
.instant .bb-nav__cta:hover{ background:var(--bb-navy); border-color:var(--bb-navy); color:var(--instant-paper); }
.instant .bb-nav__brand img[alt="Break Box"]{ filter:none; }
/* The shared wordmark image ships white-on-transparent (built for dark
   pages) — invert it back to dark ink for this light-background page. */
.instant .bb-nav__brand img[alt=""]{ filter:invert(1) brightness(.15); }
@media (max-width:860px){
  .instant .bb-nav__links{ background:var(--bb-navy); color:var(--instant-cream); }
}

/* ---------- HERO ---------- */
/* Studio's hero glows purple-on-navy, Live's glows lime/sky-on-violet —
   each page opens on a gradient toward its own contrast color, then
   settles into that page's particular tone of purple underneath. Instant
   does the same thing, but stays inside the brand's actual palette (no
   orange — the guidelines are purple/navy for Studio and purple+blue+lime
   for Live, nothing warm anywhere) by using bb-purple-2 as its glow/accent
   instead: the same family, just the lightest, most elegant end of it —
   Studio somber/professional, Live vivid/alive, Instant light/elegant. */
.in-hero{
  --kicker-accent: var(--bb-purple-2);
  position:relative; overflow:hidden;
  padding:150px var(--gutter) 90px;
  background:
    radial-gradient(circle at 88% 8%, rgba(87,79,244,.22), transparent 48%),
    linear-gradient(165deg, #faf7fc 0%, #ece9fc 55%, #e2dbfa 100%);
}
.in-hero__inner{
  position:relative; max-width:var(--container); margin:0 auto;
  display:flex; flex-direction:column;
}
@media (min-width:980px){
  /* Studio's box/cards and Live's beams are anchored to their whole
     section (.st-hero / .lv-hero), not to the 1240px text container, so
     they keep sliding out toward the real edge of the screen as the
     window grows. The polaroid stack was anchored to .in-hero__inner
     instead — position:relative there made IT the containing block for
     the absolutely-positioned photos, so they stayed pinned to the
     container's edge and just left dead space beyond it on wide
     monitors. Dropping back to static here hands that job up to .in-hero
     (the full-width section, already position:relative), so the photos
     hug the actual viewport edge exactly like the other two pages. */
  .in-hero__inner{ display:block; position:static; }
  /* .in-hero__inner's own max-width:1240px + margin:0 auto (set above,
     for the mobile flex layout) was still centering the text column
     inside that box on wide screens — Studio/Live never fight this
     because their hero text is a direct child of the full-width
     section, not of a centered inner wrapper. Un-setting both here lets
     the text sit at .in-hero's own left padding (the shared gutter) no
     matter how wide the window gets, instead of leaving a growing dead
     margin on the left. */
  .in-hero__inner{ max-width:none; margin:0; }
}
.in-hero__eyebrow{ color:var(--bb-purple-2); }
/* Same "Breaking boxes, building ___." kicker every page opens with —
   Instant's own word list (Moments, Laughs, Memories...) still ends on
   "Impact" like Studio's and Live's, so the family resemblance holds even
   though this branch has its own palette. */
.in-hero h1{
  font-size:clamp(36px,6.2vw,88px); max-width:900px; margin-top:22px;
  color:var(--instant-ink);
}
.in-hero__statement{
  margin-top:22px; max-width:560px; font-family:var(--font-display); font-weight:800;
  font-size:clamp(19px,2.2vw,26px); line-height:1.35; color:var(--instant-ink);
}
@media (min-width:980px){
  /* Hero text shares the row with the polaroid stack on desktop — keep
     the paragraph copy narrow so it never runs into the photos. */
  .in-hero__statement, .in-hero__sub, .in-hero__tags{ max-width:520px; }
  /* The h1 is different: at a 520px cap the longest rotating kicker words
     ("Happiness", "Feelings") don't fit next to "building" at full size
     and wrap onto their own line — the same bug the .bb-kicker__br fix
     was supposed to kill on every page. Rather than shrinking the font
     to squeeze under the polaroids, let the h1 run its full natural
     width and sit over them, same as Live's title running over its
     spotlight beams — a raised z-index keeps the text on top and
     readable instead of the photos painting over it. */
  .in-hero h1{ max-width:900px; position:relative; z-index:2; }
  .in-hero__polaroids{ z-index:1; }
}
.in-hero__statement em{ font-style:italic; color:var(--bb-purple-2); }
.in-hero__sub{
  margin-top:18px; max-width:560px; font-size:17px; line-height:1.6;
  color:rgba(36,26,22,.72);
}
.in-hero__ctas{ margin-top:36px; display:flex; gap:16px; flex-wrap:wrap; }
.in-hero__tags{ margin-top:44px; display:flex; flex-wrap:wrap; gap:10px; }
.in-hero__tags span{
  font-family:var(--font-display); font-weight:700; font-size:12.5px;
  letter-spacing:.03em; padding:8px 16px; border-radius:999px;
  background:var(--instant-paper); border:1px solid rgba(36,26,22,.14);
  color:var(--instant-ink);
}
/* The Bodas/XV/Bautizos… tag row is the least essential part of the
   hero — on phones, where every line of scroll before the CTA counts,
   it just eats space the polaroid backdrop and CTAs need more. */
@media (max-width:640px){ .in-hero__tags{ display:none; } }

/* Polaroid-stack hero decoration — real event photo crops, dealt from a
   stack on load everywhere; on mobile/tablet they also slide back off
   (like being pushed off a table, not faded) once the reader scrolls past
   them — see the small script at the bottom of instant.html. Desktop only
   ever plays the entrance. Both stages only touch the --sx/--sy/--srot/
   --sscale custom properties below, never transform directly, so they can
   never fight each other mid-animation. Below 980px there's no room beside
   the hero text, so the whole group drops into normal flow (order:99 puts
   it after the text/CTAs/tags) and scales down as one unit instead of
   repositioning every child.

   .in-hero__polaroids-shell is what actually reserves layout space on
   mobile, sized to the group's POST-scale footprint (a CSS transform
   never shrinks the space an element reserves in flow, only how it
   paints) — without it, the reserved box stayed the full pre-scale
   560px tall even though the visible photos only filled ~325px of it,
   leaving a dead empty gap below them once they'd slid away on scroll. */
.in-hero__polaroids-shell{
  position:relative; order:99; width:244px; height:326px; margin:40px auto 0;
}
@media (min-width:980px){ .in-hero__polaroids-shell{ display:contents; } }
.in-hero__polaroids{
  position:absolute; top:0; left:0; width:470px; height:620px;
  transform:scale(.58); transform-origin:top left;
}
@media (min-width:980px){
  .in-hero__polaroids{
    top:100px; right:clamp(60px,5vw,120px); left:auto;
    transform:scale(1); transform-origin:top right;
  }
}
/* Studio's box/cards grow with the viewport (min(44vw,620px)) but this
   stayed pinned at a flat 420x560 no matter how wide the screen got —
   at a large monitor, the two pages sat side by side looking like two
   different scales of "big", not siblings. Scaling the whole group up
   past ~1700px keeps it growing in step instead of capping out early.
   transform-origin is pinned to the top-right corner (not the default
   center) so that growth — and the right offset above — reads as
   breathing room instead of the scale itself pushing the right edge
   further out past the viewport and cropping the photos. */
@media (min-width:1700px){ .in-hero__polaroids{ transform:scale(1.2); } }
@media (min-width:2000px){ .in-hero__polaroids{ transform:scale(1.35); } }
/* At these two breakpoints the whole stack scales up around the group's
   own top-right corner, so the bride+dad photo (already pushed well
   down to clear the dog's sign) gets pushed down *again* by the zoom —
   enough to run past .in-hero's own bottom edge and get clipped, as
   seen in production on a wide monitor. A bit more bottom padding here
   only, where there's already plenty of spare room either side of the
   hero, buys back that clearance. */
@media (min-width:1700px){ .in-hero{ padding-bottom:130px; } }
@media (min-width:2000px){ .in-hero{ padding-bottom:220px; } }
.in-polaroid{
  position:absolute; width:245px; aspect-ratio:4/5; background:var(--instant-paper);
  border-radius:6px; padding:14px 14px 42px; box-shadow:0 24px 50px -18px rgba(36,26,22,.35);
  transform:translate(var(--sx,0px),var(--sy,0px)) rotate(calc(var(--rot,0deg) + var(--srot,0deg))) scale(var(--sscale,1));
  transition:transform .9s cubic-bezier(.16,.84,.44,1);
}
/* Once the entrance settles, JS adds this so scroll-driven updates track
   the scroll position 1:1 instead of lagging behind the slow entrance ease. */
.in-hero__polaroids.is-scrolling .in-polaroid{ transition:transform .1s linear; }
.in-polaroid__frame{ width:100%; height:100%; border-radius:2px; object-fit:cover; display:block; }
/* --rot is each card's resting tilt; the rest start it "dealt" from the
   middle card's spot (roughly matching --sx/--sy to --rot's own top/right)
   at scale .9, and JS animates sx/sy/srot/scale back to 0/0/0deg/1. */
.in-polaroid--1{ top:0; right:200px; --rot:-9deg; z-index:1; --sx:200px; --sy:120px; --srot:9deg; --sscale:.9; }
.in-polaroid--2{ top:130px; right:-40px; --rot:7deg; z-index:2; --sx:0px; --sy:0px; --srot:-7deg; --sscale:.9; }
/* The bride+dad shot used to sit almost directly under the getting-ready
   photo (right:150 vs. --1's right:160) — nearly fully hidden, just a
   sliver peeking out. First fix moved it right, tucked under the dog
   instead — but that landed it on the dog's "RESPIRA, aquí viene el
   amor" sign, and pushing it down far enough to clear that (which runs
   edge to edge, so no smaller horizontal nudge dodges it) ran it into
   .in-hero's own bottom clip on wide screens. Tucking it back under
   --1's bottom-left corner instead — empty space there, nothing to
   cover — clears the sign entirely with barely any downward push. */
.in-polaroid--3{ top:300px; right:235px; width:245px; --rot:-4deg; z-index:3; --sx:190px; --sy:-160px; --srot:4deg; --sscale:.9; }

/* ---------- SECTIONS shell ---------- */
.in-section{ padding:90px var(--gutter); }
.in-section--tight{ padding:60px var(--gutter); }
.in-inner{ max-width:var(--container); margin:0 auto; }
.instant .eyebrow{ color:var(--bb-purple-2); }
.in-section h2{ font-size:clamp(28px,4vw,46px); color:var(--instant-ink); max-width:640px; }

/* ---------- COMPARISON ---------- */
.in-compare{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px; }
@media (max-width:760px){ .in-compare{ grid-template-columns:1fr; } }
.in-compare__card{
  border-radius:var(--radius-l); padding:36px 32px;
  background:var(--instant-paper); border:1px solid rgba(36,26,22,.1);
}
.in-compare__card--accent{
  background:linear-gradient(160deg,var(--bb-purple-2),var(--bb-lilac)); color:var(--instant-paper);
  border:none; box-shadow:0 22px 46px -18px rgba(87,79,244,.45);
}
.in-compare__card h3{ font-family:var(--font-display); font-weight:800; font-size:19px; margin-bottom:18px; }
.in-compare__card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:14.5px; line-height:1.5; }
.in-compare__card li{ padding-left:24px; position:relative; }
.in-compare__card li::before{ content:'—'; position:absolute; left:0; opacity:.55; }
.in-compare__card--accent li::before{ content:'✓'; opacity:.9; }

/* ---------- CÓMO FUNCIONA ---------- */
.in-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; counter-reset:step; }
@media (max-width:760px){ .in-steps{ grid-template-columns:1fr; } }
.in-step{ padding:30px 26px; border-radius:var(--radius-m); background:var(--instant-paper); border:1px solid rgba(36,26,22,.1); }
.in-step__n{
  font-family:var(--font-display); font-weight:900; font-size:14px; color:var(--instant-paper);
  background:var(--bb-navy); width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.in-step h3{ font-family:var(--font-display); font-weight:800; font-size:17px; }
.in-step p{ margin-top:8px; font-size:14px; color:rgba(36,26,22,.65); line-height:1.5; }

/* ---------- QUÉ INCLUYE ---------- */
.in-includes{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px; }
@media (max-width:900px){ .in-includes{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .in-includes{ grid-template-columns:1fr; } }
/* Plain light card, same paper/border language as every other card on
   this page (.in-compare__card, .in-step) — a solid dark navy block with
   a chamfered corner was the only dark, oddly-shaped thing on an
   otherwise light page and it fought with everything around it instead
   of sitting in the family. The icon gets a soft lilac badge behind it
   for a little brand color without needing a whole dark card for it. */
.in-include{
  padding:26px 22px; background:var(--instant-paper); border:1px solid rgba(36,26,22,.1);
  border-radius:var(--radius-m); color:var(--instant-ink);
  text-align:center; transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s;
}
.in-include:hover{ transform:translateY(-6px); box-shadow:0 18px 34px -16px rgba(36,26,22,.18); border-color:rgba(87,79,244,.3); }
.in-include span{
  font-size:24px; display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin:0 auto 16px; border-radius:50%;
  background:rgba(87,79,244,.1); transition:transform .3s var(--ease-out), background .3s;
}
.in-include:hover span{ transform:scale(1.1) rotate(-6deg); background:rgba(87,79,244,.16); }
.in-include p{ font-family:var(--font-display); font-weight:700; font-size:14.5px; line-height:1.4; }

/* ---------- PAQUETES ---------- */
/* No background of its own anymore — it now just shows the page's own
   lavender background through (see body.instant above), instead of a
   solid dark panel that read as too harsh a jump right at the
   price/decision moment. */
.in-packages{ color:var(--instant-ink); }
.in-packages .eyebrow{ color:var(--bb-purple-2); }
.in-packages h2{ color:var(--instant-ink); }
.in-pkg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:44px; }
@media (max-width:820px){ .in-pkg-grid{ grid-template-columns:1fr; } }
.in-pkg{
  background:var(--instant-paper); border:1px solid rgba(78,43,205,.14);
  border-radius:var(--radius-l); padding:36px 32px; display:flex; flex-direction:column;
}
.in-pkg--featured{ border-color:var(--bb-purple-2); background:linear-gradient(160deg,#f4f2ff,var(--instant-paper)); }
.in-pkg__icon{ font-size:30px; }
.in-pkg h3{ font-family:var(--font-display); font-weight:800; font-size:21px; margin-top:14px; }
.in-pkg__price{ font-family:var(--font-display); font-weight:900; font-size:28px; color:var(--bb-purple-2); margin-top:10px; }
.in-pkg__desc{ margin-top:10px; font-size:14.5px; color:rgba(36,26,22,.65); line-height:1.5; }
.in-pkg__list{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px; }
.in-pkg__list li{ padding-left:22px; position:relative; }
.in-pkg__list li::before{ content:'✓'; position:absolute; left:0; color:var(--bb-purple-2); }
.in-pkg__reels{ margin-top:18px; padding-top:18px; border-top:1px dashed rgba(36,26,22,.15); }
.in-pkg__reels-label{ font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.5; }
.in-pkg .btn{ margin-top:26px; align-self:flex-start; }

.in-note{
  margin-top:36px; padding:22px 26px; border-radius:var(--radius-m);
  background:rgba(87,79,244,.08); border:1px solid rgba(87,79,244,.25);
  font-size:14px; line-height:1.6; color:rgba(36,26,22,.72);
}
.in-note strong{ color:var(--bb-purple-2); }

/* ---------- ASÍ SE VE (real event clips) ---------- */
.in-proof__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
@media (max-width:860px){ .in-proof__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .in-proof__grid{ grid-template-columns:1fr; } }
.in-proof__card{
  aspect-ratio:4/5; border-radius:var(--radius-m); position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:20px;
  background:var(--bb-navy);
}
.in-proof__card video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.in-proof__card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(33,42,80,.65) 0%, rgba(33,42,80,.05) 45%, transparent 70%);
}
.in-proof__card span{
  position:relative; z-index:1;
  font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--instant-ink);
  background:rgba(255,253,248,.9); padding:8px 16px; border-radius:999px;
}

/* ---------- REELS DESTACADOS (Instagram gallery, horizontal scroll) ---------- */
.in-gal-nav{ display:flex; gap:10px; flex:none; }
.in-gal-nav__btn{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:transparent; border:2px solid rgba(36,26,22,.25); color:var(--instant-ink);
  font-size:16px; cursor:pointer; transition:background .2s, border-color .2s, color .2s, transform .2s;
  display:flex; align-items:center; justify-content:center;
}
.in-gal-nav__btn:hover{ background:var(--bb-purple-2); border-color:var(--bb-purple-2); color:var(--instant-paper); transform:scale(1.06); }
.in-gal-nav__btn:disabled{ opacity:.35; cursor:not-allowed; }
.in-gal-nav__btn:disabled:hover{ background:transparent; border-color:rgba(36,26,22,.25); color:var(--instant-ink); transform:none; }
.in-gal-viewport{
  margin-top:44px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity; scrollbar-width:none;
}
.in-gal-viewport::-webkit-scrollbar{ display:none; }
.in-gal-grid{ display:flex; gap:16px; width:max-content; }
.in-gal-item{
  flex:0 0 min(64vw,260px); aspect-ratio:9/16; scroll-snap-align:start;
  border-radius:var(--radius-m); position:relative; overflow:hidden;
  background:var(--instant-paper); border:1px solid rgba(36,26,22,.1);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:20px;
  font-family:var(--font-display); font-weight:700; font-size:13px; color:rgba(36,26,22,.4);
  transition:transform .3s var(--ease-out);
}
.in-gal-item:hover{ transform:scale(1.03); }
.in-gal-item--reel{ background:var(--bb-navy); padding:0; }
.in-gal-item--reel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.in-gal-item--video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; cursor:pointer; }
.in-gal-item__play{
  position:relative; z-index:1; width:52px; height:52px; border-radius:50%;
  background:rgba(255,253,248,.9); color:var(--instant-ink); font-size:18px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s, background .25s;
}
.in-gal-item--reel:hover .in-gal-item__play{ transform:scale(1.12); background:var(--bb-lilac); color:var(--bb-navy); }
.in-gal-item__ig-link{
  position:absolute; top:12px; right:12px; z-index:1; width:30px; height:30px; border-radius:50%;
  background:rgba(255,253,248,.16); backdrop-filter:blur(2px); color:#fff; font-size:14px;
  display:flex; align-items:center; justify-content:center; transition:background .2s, transform .2s;
}
.in-gal-item__ig-link:hover{ background:var(--bb-lilac); transform:scale(1.1); }

/* ---------- TESTIMONIOS override (base .testi-* is dark-page styled) ---------- */
.instant .testi-card{ background:var(--instant-paper); border-color:rgba(36,26,22,.1); }
.instant .testi-card p{ color:rgba(36,26,22,.8); }
.instant .testi-card__name{ color:var(--instant-ink); }
.instant .testi-card__role{ color:rgba(36,26,22,.5); }

/* ---------- CTA final ---------- */
.in-cta{ text-align:center; padding-bottom:120px; }
.in-cta h2{ max-width:none; margin:0 auto; }
.in-cta p{ max-width:480px; margin:18px auto 0; color:rgba(36,26,22,.65); font-size:16px; }
.in-cta .btn{ margin-top:30px; }

.btn--instant{ background:var(--bb-purple-2); color:var(--instant-paper); }
.btn--instant:hover{ box-shadow:0 14px 30px -10px rgba(87,79,244,.5); }
.btn--instant-outline{ background:transparent; color:var(--instant-ink); border:1.5px solid rgba(36,26,22,.35); }
.btn--instant-outline:hover{ background:var(--bb-navy); color:var(--instant-cream); border-color:var(--bb-navy); }