/* SAYNNI brand overrides — loaded after app.css, no rebuild needed.
   Tailwind v4 utilities in app.css reference these as CSS custom properties
   (e.g. .bg-primary-1{background-color:var(--color-primary-1)}), so redefining
   the variables here reskins every utility class across the whole page. */
:root {
  --color-black: #2b2233;
  --color-body-bg: #f7f4f1;

  --color-primary: #ff5a36;
  --color-primary-1: #ff5a36;
  --color-primary-2: #2b2233;
  --color-primary-3: #e8b84b;
  --color-primary-4: #ff5a36;
  --color-primary-5: #2b2233;
  --color-primary-6: #e8b84b;
  --color-primary-7: #ff5a36;
  --color-primary-8: #2b2233;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
}

/* Portfolio section: the animated logo/post marquee now runs at every size,
   including mobile, so the tiles stay in motion instead of sitting in a
   static grid. (app.css is a purged Tailwind build scoped to the original
   template's pages, so this ad-hoc "flex" toggle isn't in it — plain CSS.) */
.portfolio-marquee {
  display: flex;
}

/* Dark sections finish with a soft centered shape instead of a hard horizontal
   cut. The section color stays solid around the content and only opens into a
   localized halo at the lower edge. */
.section-purple-gradient {
  position: relative;
  background: var(--color-body-bg);
  isolation: isolate;
  overflow: visible;
  z-index: 2;
}

.section-purple-gradient::before,
.section-purple-gradient::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.section-purple-gradient::before {
  inset: 0;
  background: var(--color-black);
  border-radius: 50% / 26px;
}

.section-purple-gradient::after {
  left: 50%;
  bottom: -6.5rem;
  z-index: 2;
  width: clamp(18rem, 38vw, 30rem);
  height: clamp(10rem, 18vw, 15rem);
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgb(43 34 51 / 0.58) 0%,
    rgb(43 34 51 / 0.28) 38%,
    transparent 73%
  );
  filter: blur(14px);
}

.section-purple-gradient > * {
  position: relative;
  z-index: 3;
}

#historias h2 {
  color: #fff;
  text-shadow: 0 2px 18px rgba(43, 34, 51, 0.72);
}

#historias .text-default-300 {
  text-shadow: 0 1px 12px rgba(43, 34, 51, 0.72);
}

/* Keep the light sections clean. The circular halo belongs to the dark
   section above so it remains anchored to the transition it explains. */
#industrias,
#resenas {
  background: var(--color-body-bg);
  position: relative;
  isolation: isolate;
  overflow: visible;
  z-index: 1;
}

/* Anchor targets (#portafolio, #servicios, etc.) sit right under the fixed
   pill navbar — without this the nav overlaps the first ~100px of content
   whenever a nav link jumps straight to a section. */
section[id] {
  scroll-margin-top: 100px;
}
@media (min-width: 1024px) {
  section[id] {
    scroll-margin-top: 130px;
  }
}

/* Subtle depth pass — the page read as very flat, so a few soft,
   brand-tinted shadows (never pure black) on otherwise shadow-less
   surfaces. Kept light on purpose: barely-there lift, not drama. */
#industrias .rounded-2xl.overflow-hidden.flex.flex-col.justify-end {
  box-shadow: 0 1px 2px rgba(43, 34, 51, 0.05), 0 14px 28px -12px rgba(43, 34, 51, 0.22);
}
.storySwiper .swiper-slide > .group.relative.overflow-hidden.rounded-2xl {
  box-shadow: 0 1px 2px rgba(43, 34, 51, 0.05), 0 16px 32px -10px rgba(43, 34, 51, 0.28);
}
.rounded-3xl.bg-black.text-center {
  box-shadow: 0 1px 2px rgba(43, 34, 51, 0.05), 0 20px 40px -16px rgba(43, 34, 51, 0.3);
}
/* The "phone over the wall of work" treatment, floating centered on top of
   the animated logo marquee, at every screen size. */
.portfolio-marquee-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 15rem;
  z-index: 30;
  filter: drop-shadow(0 25px 45px rgba(43, 34, 51, 0.4));
  pointer-events: none;
}
@media (min-width: 480px) {
  .portfolio-marquee-phone {
    width: 18rem;
  }
}
@media (min-width: 768px) {
  .portfolio-marquee-phone {
    width: 28.5rem;
  }
}
@media (min-width: 1024px) {
  .portfolio-marquee-phone {
    width: 33rem;
  }
}
#servicios nav[aria-label="Tabs"] button {
  box-shadow: 0 1px 2px rgba(43, 34, 51, 0.05);
}
footer a[href^="mailto"] {
  box-shadow: 0 1px 2px rgba(43, 34, 51, 0.06), 0 10px 20px -10px rgba(43, 34, 51, 0.25);
}
.navbar .bg-white.rounded-\[20px\] {
  box-shadow: 0 1px 2px rgba(43, 34, 51, 0.04), 0 8px 20px -12px rgba(43, 34, 51, 0.18);
  /* Same flex min-content collapse as .nav-logo — these pills are flex
     items in the navbar row and were shrinking below their content. */
  flex-shrink: 0;
}

/* Story badge logos (ETC, Konexion, Xigo, Ziel…): Swiper ships a base
   ".swiper-slide img{object-fit:cover}" rule that outranks the plain
   ".object-contain" class (class+type beats class alone), so wide/tall
   logos were getting cropped instead of letterboxed. Force contain here
   with matching specificity. */
.storySwiper .swiper-slide img {
  object-fit: contain;
}

/* Nav logo: app.css is a purged Tailwind build, so only the exact utility
   classes the original template used got compiled — "h-8" and "md:h-9"
   don't exist in it and silently do nothing (image falls back to its
   natural 629x170 size). Plain CSS avoids that trap entirely. */
/* Explicit width (not "auto") on purpose: inside this nav's flex layout,
   an auto-width replaced element collapses to a tiny min-content size
   instead of resolving from its intrinsic aspect ratio (629x170). */
.nav-logo-link {
  display: block;
  flex-shrink: 0;
}
.nav-logo {
  height: 32px;
  width: 118px;
  display: block;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .nav-logo {
    height: 36px;
    width: 133px;
  }
}

/* "Ver" hint badge on each story card — same purge trap as above, so this
   is plain CSS rather than a pile of bg-white/90 / group-hover:* utilities
   that don't exist in the compiled bundle. */
.story-ver-hint {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  padding: 0.375rem 0.75rem;
  color: #2b2233;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.35);
  opacity: 0.85;
  transform: scale(1);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.group:hover .story-ver-hint {
  opacity: 1;
  transform: scale(1.05);
}

/* Hero: the background video isn't always calm (dashboards, bright UI), so
   the title needs its own contrast — a soft vignette behind the text block
   plus a text-shadow that holds up over any frame. */
.hero-dim {
  background: rgba(0, 0, 0, 0.5);
}
.hero-scrim {
  background:
    linear-gradient(
      to bottom,
      transparent 34%,
      rgba(20, 15, 24, 0.18) 54%,
      rgba(20, 15, 24, 0.55) 74%,
      rgba(20, 15, 24, 0.22) 100%
    ),
    radial-gradient(ellipse 65% 55% at 50% 42%, rgba(15, 10, 18, 0.55), transparent 72%);
}
.hero-title {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.62);
}

/* "Ver portafolio" hero button: used to be a barely-there bg-white/5 pill,
   readable only over the darkest part of the video. On short viewports the
   button sits lower, over the hero's own lighter bottom fade, and the
   backdrop-blur let that light color bleed through — white text on a
   near-white blur. A fixed dark backdrop keeps it legible no matter what's
   behind it. */
.hero-btn-secondary {
  background: rgba(20, 15, 24, 0.55);
}
.hero-btn-secondary:hover {
  background: rgba(20, 15, 24, 0.72);
}

/* Testimonial star ratings — plain SVGs (not the iconify class system, which
   only has icon names the original template already used compiled into
   app.css) colored with the brand gold. */
.testimonial-stars svg {
  color: var(--color-primary-3);
}

/* WhatsApp floating widget — fixed bottom-right, above everything else
   (including the video modal's z-index:1000), classic WhatsApp green. */
.whatsapp-widget {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: #25d366;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 10px 30px -8px rgba(37, 211, 102, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-widget:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22), 0 14px 34px -8px rgba(37, 211, 102, 0.7);
}
.whatsapp-widget-icon {
  width: 60%;
  height: 60%;
  object-fit: contain;
}
@media (min-width: 768px) {
  .whatsapp-widget {
    right: 2rem;
    bottom: 2rem;
    width: 4rem;
    height: 4rem;
  }
}

/* Video lightbox — sized to the clip's own 9:16 aspect ratio, not full-bleed. */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-modal[hidden] {
  display: none;
}
.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 15, 24, 0.86);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.video-modal.is-open .video-modal-backdrop {
  opacity: 1;
}
.video-modal-body {
  position: relative;
  z-index: 1;
  width: min(88vh * 9 / 16, 92vw);
  height: min(88vh, 92vw * 16 / 9);
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.video-modal.is-open .video-modal-body {
  transform: scale(1);
  opacity: 1;
}
.video-modal-player {
  width: 100%;
  height: 100%;
  border-radius: 1.25rem;
  background: #000;
  object-fit: contain;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.video-modal-pause-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  padding-left: 4px;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.video-modal.is-paused .video-modal-pause-hint {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Shown when the browser blocked autoplay-with-sound (common on mobile) —
   the video keeps playing muted until the visitor taps it to unmute. */
.video-modal-sound-hint {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%) translateY(6px);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.video-modal.needs-sound-tap .video-modal-sound-hint {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.video-modal-close {
  position: absolute;
  top: -3rem;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: background 0.2s ease;
}
.video-modal-close:hover {
  background: rgba(255, 255, 255, 0.22);
}
@media (max-width: 640px) {
  .video-modal-close {
    top: -2.75rem;
    right: -0.25rem;
  }
}

/* Cursor light — one soft glow that tracks the pointer, sitting behind every
   normal-flow page element (negative-ish z-index trick below) so it only
   shows through the gaps where nothing opaque covers it. Purple over the
   white sections, soft white over the purple ones — color and position are
   both driven by assets/saynni-ambient-glow.js via CSS custom properties,
   transform/background only, so it stays GPU-cheap. */
.cursor-light {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Hidden until the first real mousemove (see saynni-ambient-glow.js) — at
     rest it has no real cursor position yet, just a guessed default, and
     showing it there looked like a random smudge sitting in the page. */
  opacity: 0;
  transition: opacity 0.5s ease;
}
.cursor-light.is-active {
  opacity: 1;
}
.cursor-light::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40rem;
  height: 40rem;
  margin: -20rem 0 0 -20rem;
  border-radius: 9999px;
  /* Both stops share the same rgb (set as --cursor-light-rgb by JS) and only
     differ in alpha — fading to a "transparent" of a DIFFERENT hue is what
     causes a muddy ring artifact partway through the gradient. */
  background: radial-gradient(circle,
    rgba(var(--cursor-light-rgb, 43, 34, 51), 0.16) 0%,
    rgba(var(--cursor-light-rgb, 43, 34, 51), 0) 70%);
  transform: translate3d(var(--cursor-x, 50vw), var(--cursor-y, 40vh), 0);
  will-change: transform;
}
@media (max-width: 767px) {
  .cursor-light {
    display: none;
  }
}
/* Wraps the entire rest of the page in its own stacking context at z-index:1,
   above the light (z-index:0) — needed because the browser paints body's own
   background at the canvas level, even further back than a negative
   z-index child, so the light would otherwise never show through it. */
.page-content {
  position: relative;
  z-index: 1;
}

/* CTA buttons (Contáctanos / Escríbenos, now all wa.me links): the template's
   hover:scale-95 "press" effect read as flat with nothing behind it, so this
   adds a soft dark-purple lift shadow on hover/focus to match the brand's
   --color-black. transition-all (already on every one of these buttons)
   covers animating this smoothly, so no extra transition rule needed here. */
.cta-shadow:hover,
.cta-shadow:focus-visible {
  box-shadow: 0 14px 30px -8px rgba(43, 34, 51, 0.55), 0 6px 14px -4px rgba(43, 34, 51, 0.35);
}

/* Portfolio marquee tiles and industry cards are now WhatsApp links (people
   tap curiously on mobile where there's no hover) — a small hover/focus
   "pop" makes that interactivity readable on desktop too. Kept lightweight:
   scale only, no layout shift, elevated above neighbors while active so the
   enlarged tile doesn't render underneath the one next to it. */
.portfolio-tile,
.industry-tile {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.portfolio-tile:hover,
.portfolio-tile:focus-visible,
.industry-tile:hover,
.industry-tile:focus-visible {
  transform: scale(1.07);
  z-index: 5;
}
.industry-tile:hover,
.industry-tile:focus-visible {
  box-shadow: 0 20px 40px -14px rgba(43, 34, 51, 0.45);
}