/* ============================================================
   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(255,243,228,.86); box-shadow:0 1px 0 rgba(36,26,22,.08); }
.instant .bb-nav__cta{ background:var(--instant-coral); color:var(--instant-paper); border-color:var(--instant-coral); }
.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 ---------- */
.in-hero{
  --kicker-accent: var(--instant-coral);
  position:relative; overflow:hidden;
  padding:150px var(--gutter) 90px;
}
.in-hero__inner{
  position:relative; max-width:var(--container); margin:0 auto;
  display:flex; flex-direction:column;
}
@media (min-width:980px){ .in-hero__inner{ display:block; } }
.in-hero__eyebrow{ color:var(--instant-coral); }
/* 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 it
     narrower than its natural max-width so the two never overlap. */
  .in-hero h1, .in-hero__statement, .in-hero__sub, .in-hero__tags{ max-width:520px; }
}
.in-hero__statement em{ font-style:italic; color:var(--instant-coral); }
.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);
}

/* 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:420px; height:560px;
  transform:scale(.58); transform-origin:top left;
}
@media (min-width:980px){
  .in-hero__polaroids{
    top:100px; right:clamp(-20px,3vw,40px); left:auto;
    transform:scale(1); transform-origin:initial;
  }
}
.in-polaroid{
  position:absolute; width:220px; 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:160px; --rot:-9deg; z-index:1; --sx:200px; --sy:120px; --srot:9deg; --sscale:.9; }
.in-polaroid--2{ top:120px; right:-40px; --rot:7deg; z-index:2; --sx:0px; --sy:0px; --srot:-7deg; --sscale:.9; }
.in-polaroid--3{ top:280px; right:150px; --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(--instant-coral); }
.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(--instant-coral),#ff8266); color:var(--instant-paper);
  border:none; box-shadow:0 22px 46px -18px rgba(255,92,88,.5);
}
.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; } }
/* Corner cut on the diagonal instead of a plain rounded rectangle — pulled
   straight from the brand manual's "Formas y Figuras" page, the same
   chamfered-corner silhouette as the Break Box isotipo itself, so this
   is a real brand shape rather than a generic card. The accent slash in
   the opposite corner echoes the isotipo's own diagonal cut. */
.in-include{
  padding:30px 22px 26px; background:var(--bb-navy); color:var(--instant-cream);
  text-align:center; position:relative; overflow:hidden;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.in-include:hover{ transform:translateY(-6px); box-shadow:0 18px 34px -14px rgba(33,42,80,.45); }
.in-include::after{
  content:''; position:absolute; top:14px; right:16px; width:2px; height:20px;
  background:var(--instant-coral); transform:rotate(35deg); border-radius:2px;
}
.in-include span{
  font-size:28px; display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px; transition:transform .3s var(--ease-out);
}
.in-include:hover span{ transform:scale(1.15) rotate(-6deg); }
.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(--instant-coral); border-color:var(--instant-coral); 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(--instant-coral); color:var(--instant-paper); }
.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(--instant-coral); 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(--instant-coral); color:var(--instant-paper); }
.btn--instant:hover{ box-shadow:0 14px 30px -10px rgba(255,92,88,.55); }
.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); }