* { box-sizing: border-box; }
html, body {
  background: #05060A;
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: 100%;
  max-width: 100vw;
}
/* IMPORTANT: overflow-x must only be set on <html>, never on <body> too.
   Setting it on both triggers the browser's overflow "visible -> auto" fixup
   on the Y axis for BOTH elements, so <body> becomes its own tiny scroll
   container (a few px) that swallows wheel/trackpad scroll before it ever
   reaches the real page scroll — this was the "double scroll" / page-gets-stuck bug. */
html {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none;
}
body {
  min-height: 100vh;
  position: relative;
}
::selection { background: #6366f1; color: #fff; }

/* Títulos en Michroma, el resto del texto sigue en Inter (font-sans) */
h1, h2 { font-family: 'Michroma', system-ui, sans-serif; }

/* Iconos de Google (Material Symbols) en vez de emojis */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1; vertical-align: middle;
}

/* Soft cool gradient orbs */
.orb { position: absolute; border-radius: 9999px; filter: blur(90px); opacity: .55; pointer-events: none; }

/* Footer: glow de fondo sin blur (barato, funciona también en móvil donde .orb se apaga) */
.footer-glow {
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(99,102,241,.10), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 100%, rgba(34,211,238,.08), transparent 70%);
}

/* Hero: videos de fondo en rotación, con overlay para que el texto sea legible */
.hero-video { position: absolute; inset: 0; overflow: hidden; }
.hero-video video {
  position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.8s ease;
}
.hero-video video.is-active { opacity: .45; }
.hero-video::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,6,10,.45), rgba(5,6,10,.6) 55%, #05060A 100%);
}

/* Nav underline en el header */
.nav-link { position: relative; padding-bottom: 2px; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, #22d3ee, #818cf8);
  border-radius: 99px; transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.nav-link:hover::after { transform: scaleX(1); }

/* Glass */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.08);
}
.glass-hover { transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s, background .4s; }
.glass-hover:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.025)); }

/* Gradient text */
.grad-text { background: linear-gradient(110deg,#fff 10%, #c7d2fe 45%, #a5f3fc 70%, #fff 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Hairline top accent on cards */
.topline { position: relative; }
.topline::before { content:""; position:absolute; left:18%; right:18%; top:-1px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(165,243,252,.6), transparent); opacity:0; transition:opacity .4s; }
.topline:hover::before { opacity:1; }

/* Scroll reveal */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="scale"].is-in { transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal]{opacity:1;transform:none;transition:none} }

/* Marquee */
.marquee { display:flex; gap:5rem; width:max-content; animation: scroll 42s linear infinite; align-items:center; }
.marquee:hover { animation-play-state: paused; }
@keyframes scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Grid backdrop */
.grid-bg { background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 75%); }

.wa-float { box-shadow: 0 12px 40px -8px rgba(37,211,102,.5); }
.wa-float:hover { transform: translateY(-3px) scale(1.04); }

/* ===== MOSAICO flow ===== */
.mos-track { position: relative; display: flex; flex-direction: column; gap: 1.5rem; }
.mos-rail {
  position: absolute; z-index: 0;
  left: 27px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg,#34d399,#22d3ee,#818cf8,#a78bfa);
  border-radius: 99px; transform-origin: top; transform: scaleY(0);
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.mos-track.is-in .mos-rail { transform: scaleY(1); }
.mos-item {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 1rem;
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.mos-item.is-in { opacity: 1; transform: none; }
.mos-circle {
  flex: 0 0 auto; display: grid; place-items: center;
  height: 56px; width: 56px; border-radius: 9999px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 2px solid var(--ring); box-shadow: 0 0 0 6px rgba(255,255,255,.02), 0 10px 30px -12px var(--ring);
}
.mos-circle svg { height: 26px; width: 26px; }
.mos-label .w { font-weight: 600; letter-spacing: -0.01em; }
.mos-label .w b { color: var(--ring); }
.mos-label .d { font-size: .8rem; color: rgba(255,255,255,.45); margin-top: 2px; }

@media (min-width: 900px) {
  .mos-track { flex-direction: row; align-items: center; justify-content: space-between;
    gap: 0; min-height: 260px; }
  .mos-rail { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 3px;
    transform-origin: left; transform: scaleX(0);
    background: linear-gradient(90deg,#34d399,#2dd4bf,#22d3ee,#38bdf8,#60a5fa,#818cf8,#a78bfa); }
  .mos-track.is-in .mos-rail { transform: scaleX(1); }
  .mos-item { flex: 1; flex-direction: column; align-items: center; gap: .85rem; text-align: center; }
  .mos-item:nth-child(odd)  { transform: translateY(-30px); }
  .mos-item:nth-child(even) { transform: translateY(30px); flex-direction: column-reverse; }
  .mos-item:not(.is-in):nth-child(odd)  { transform: translateY(-12px); opacity: 0; }
  .mos-item:not(.is-in):nth-child(even) { transform: translateY(12px); opacity: 0; }
  .mos-circle { height: 72px; width: 72px; }
  .mos-circle svg { height: 32px; width: 32px; }
  .mos-label .d { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mos-item, .mos-rail { opacity: 1 !important; transform: none !important; }
  .mos-track.is-in .mos-rail { transform: none; }
}

/* ===== Formulario de contacto: honeypot + animación de éxito ===== */
.cf-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cf-fade-out { transition: opacity .28s ease, transform .28s ease; }
.cf-fade-out.is-out { opacity: 0; transform: translateY(-6px); pointer-events: none; }

.cf-success.is-in { display: flex; animation: cf-pop-in .55s cubic-bezier(.2,.8,.2,1) forwards; }
.cf-success.is-in .cf-check-ring { animation: cf-ring-pop .4s cubic-bezier(.2,.8,.2,1) forwards; }
.cf-success.is-in .cf-check-path {
  stroke-dasharray: 20; stroke-dashoffset: 20;
  animation: cf-check-draw .45s .28s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes cf-pop-in {
  0%   { opacity: 0; transform: translateY(10px) scale(.94); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cf-ring-pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes cf-check-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cf-success.is-in, .cf-success.is-in .cf-check-ring, .cf-success.is-in .cf-check-path, .cf-fade-out { animation: none !important; transition: none !important; }
}

/* Animated button (adapted from Uiverse.io by gharsh11032000) */
.animated-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 34px;
  border: 3px solid transparent;
  font-size: 15px;
  background-color: transparent;
  border-radius: 100px;
  font-weight: 600;
  color: #67e8f9;
  box-shadow: 0 0 0 2px #67e8f9;
  cursor: pointer;
  overflow: hidden;
  transition: all .6s cubic-bezier(.23,1,.32,1);
}
.animated-button.size-sm { padding: 10px 24px; font-size: 13px; }
.animated-button svg.arr-1, .animated-button svg.arr-2 {
  position: absolute;
  width: 20px;
  fill: #67e8f9;
  z-index: 9;
  transition: all .8s cubic-bezier(.23,1,.32,1);
}
.animated-button .arr-1 { right: 16px; }
.animated-button .arr-2 { left: -25%; }
.animated-button .circle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 20px; height: 20px;
  background-color: #67e8f9;
  border-radius: 50%;
  opacity: 0;
  transition: all .8s cubic-bezier(.23,1,.32,1);
}
.animated-button .text {
  position: relative; z-index: 1;
  transform: translateX(-10px);
  transition: all .8s cubic-bezier(.23,1,.32,1);
}
.animated-button:hover { box-shadow: 0 0 0 10px transparent; color: #05060A; border-radius: 14px; }
.animated-button:hover .arr-1 { right: -25%; }
.animated-button:hover .arr-2 { left: 16px; }
.animated-button:hover .text { transform: translateX(10px); }
.animated-button:hover svg.arr-1, .animated-button:hover svg.arr-2 { fill: #05060A; }
.animated-button:active { scale: .96; box-shadow: 0 0 0 4px #67e8f9; }
.animated-button:hover .circle { width: 260px; height: 260px; opacity: 1; }
.animated-button:disabled { cursor: not-allowed; opacity: .6; }

.animated-button.is-whatsapp { color: #25D366; box-shadow: 0 0 0 2px #25D366; }
.animated-button.is-whatsapp svg.arr-1, .animated-button.is-whatsapp svg.arr-2 { fill: #25D366; }
.animated-button.is-whatsapp .circle { background-color: #25D366; }
.animated-button.is-whatsapp:active { box-shadow: 0 0 0 4px #25D366; }
.animated-button.is-whatsapp:hover { color: #fff; }
.animated-button.is-whatsapp:hover svg.arr-1, .animated-button.is-whatsapp:hover svg.arr-2 { fill: #fff; }

@media (max-width: 768px) {
  .glass {
    background: rgba(255,255,255,.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255,255,255,.08);
  }
  .glass-hover { transition: transform .25s ease, background .25s ease, border-color .25s ease; }
  .glass-hover:hover { transform: translateY(-2px); }

  .hero-video { display: none; } /* como .orb / .grid-bg: se apaga en móvil por rendimiento/datos */

  .orb { display: none; }
  .grid-bg { background-image: none; }
  .wa-float { box-shadow: none; }

  .marquee,
  .animate-float {
    animation: none !important;
  }

  [data-reveal],
  .mos-item {
    transition: opacity .35s ease, transform .35s ease;
  }

  header,
  [data-headerbar] {
    transition-property: background-color, box-shadow !important;
    transition-duration: .25s !important;
    transition-timing-function: ease !important;
  }

  .mos-item,
  .mos-rail {
    opacity: 1 !important;
    transform: none !important;
  }

  html.scroll-smooth { scroll-behavior: auto; }
}