/* Estilos compartidos entre páginas. Cada HTML pide este archivo + Tailwind CDN + Inter. */

html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; color:#0F172A; overflow-x:hidden; max-width: 100vw; }
* { box-sizing: border-box; }
h1,h2,h3,h4 { font-family: 'Inter Tight', Inter, system-ui, sans-serif; letter-spacing:-0.02em; }

.grain::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.06; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.blob {
  position:absolute; border-radius:9999px; filter:blur(70px); opacity:.45;
  background:radial-gradient(circle at 30% 30%, #FF813D, transparent 70%);
  will-change:transform;
}
.gradient-text {
  background: linear-gradient(135deg, #FF5800 0%, #FF813D 60%, #FFA366 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.glass {
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  background-color: rgba(255,255,255,0.82);
}
.product-card { transition: all .35s cubic-bezier(.16,1,.3,1); will-change: transform; }
.product-card:hover { transform: translateY(-8px) rotateX(2deg); box-shadow: 0 30px 60px -20px rgba(255,88,0,0.30), 0 8px 24px -8px rgba(15,23,42,0.15); }
.check-bullet { display:inline-flex; align-items:center; justify-content:center; width:22px;height:22px;border-radius:9999px;background:#FFE0CC;color:#B53E00;flex-shrink:0; }
.ribbon {
  position:absolute; top:18px; right:-46px; transform:rotate(45deg); background:#FF5800; color:#fff;
  padding:5px 56px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  box-shadow:0 4px 12px rgba(255,88,0,.35); z-index:5;
}

/* Marquees */
.marquee { display:flex; gap:3rem; animation: scroll-x 30s linear infinite; }
.marquee-reverse { display:flex; gap:3rem; animation: scroll-x-rev 35s linear infinite; }
@keyframes scroll-x { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes scroll-x-rev { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }

/* Hero pattern */
.hero-pattern {
  background-image:
    radial-gradient(at 80% 0%, rgba(255,129,61,.18) 0px, transparent 50%),
    radial-gradient(at 0% 50%, rgba(255,88,0,.10) 0px, transparent 50%),
    radial-gradient(at 80% 100%, rgba(30,41,59,.05) 0px, transparent 50%);
}

/* Mesh gradient para sections destacadas */
.mesh-orange {
  background:
    radial-gradient(at 20% 30%, rgba(255,88,0,.20) 0px, transparent 50%),
    radial-gradient(at 80% 70%, rgba(255,163,102,.18) 0px, transparent 50%),
    radial-gradient(at 50% 100%, rgba(245,158,11,.10) 0px, transparent 50%),
    #FFF1E8;
}

/* FAQ accordion */
details[open] summary .chev { transform: rotate(180deg); }
.chev { transition: transform .3s; }

/* Reveal-on-scroll */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .85s ease, transform .85s cubic-bezier(.16,1,.3,1); }
[data-reveal].visible { opacity: 1; transform: none; }
[data-reveal][data-delay="100"] { transition-delay: .1s; }
[data-reveal][data-delay="200"] { transition-delay: .2s; }
[data-reveal][data-delay="300"] { transition-delay: .3s; }

/* WhatsApp pulse */
.wa-pulse { position: relative; }
.wa-pulse::before {
  content:""; position:absolute; inset:-4px; border-radius:9999px; background:#25D366; opacity:.30; animation: pulseSoft 2.4s ease-in-out infinite; z-index:-1;
}
@keyframes pulseSoft { 0%,100%{transform:scale(1);opacity:.30} 50%{transform:scale(1.25);opacity:.12} }

/* Parallax */
.parallax-layer { will-change: transform; transition: transform .15s ease-out; }
.tilt { transform-style: preserve-3d; transition: transform .25s cubic-bezier(.16,1,.3,1); will-change: transform; }

/* Magnetic button */
.magnetic { transition: transform .25s cubic-bezier(.16,1,.3,1); }

/* AI Chat panel */
#chatPanel {
  position: fixed; bottom: 100px; left: 24px; z-index: 50;
  width: 380px; max-width: calc(100vw - 32px); max-height: calc(100vh - 140px); height: 560px;
  background: white; border-radius: 24px;
  box-shadow: 0 30px 60px -15px rgba(15,23,42,.4), 0 10px 20px -8px rgba(15,23,42,.15);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(20px) scale(.95); opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
#chatPanel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.chat-bubble {
  max-width: 85%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.5; word-wrap: break-word;
}
.chat-bubble.bot { background: #F1F5F9; color: #0F172A; border-bottom-left-radius: 4px; }
.chat-bubble.user { background: #FF5800; color: white; border-bottom-right-radius: 4px; margin-left: auto; }
.chat-typing { display: inline-flex; gap: 4px; padding: 12px 16px; background: #F1F5F9; border-radius: 18px; border-bottom-left-radius: 4px; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: #94A3B8; animation: typing 1.4s infinite; }
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5 } 30% { transform: translateY(-6px); opacity: 1 } }

/* Mobile drawer */
#mobileDrawer { transform: translateX(100%); transition: transform .35s cubic-bezier(.16,1,.3,1); }
#mobileDrawer.open { transform: translateX(0); }
#mobileBackdrop { opacity: 0; pointer-events: none; transition: opacity .3s; }
#mobileBackdrop.open { opacity: 1; pointer-events: auto; }

/* Number counter */
.counter { font-variant-numeric: tabular-nums; }

/* Smooth iframe */
#simulatorFrame { transition: height .4s cubic-bezier(.16,1,.3,1); }

/* Hover lift en testimonios */
.testimonial-card { transition: transform .35s ease, box-shadow .35s ease; }
.testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -15px rgba(15,23,42,.15); }

/* Cinematic image overlay */
.img-cinematic { position: relative; overflow: hidden; }
.img-cinematic::after {
  content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 50%, rgba(15,23,42,.6) 100%);
  pointer-events: none;
}

/* Underline anim for links */
.link-underline { position: relative; }
.link-underline::after {
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px;
  background: linear-gradient(90deg, #FF5800, #FF813D); transform: scaleX(0); transform-origin: right;
  transition: transform .35s ease;
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* ============ MOBILE PERFORMANCE FIXES ============ */
/* En mobile / touch devices apagamos todo lo pesado */
@media (max-width: 768px) {
  .blob { animation: none !important; opacity: .2 !important; }
  .parallax-layer { transform: none !important; }
  .tilt:hover { transform: none !important; }
  .marquee { animation-duration: 60s !important; }
  .marquee-reverse { animation-duration: 70s !important; }
  .wa-pulse::before { animation: none !important; opacity: 0 !important; }
  .product-card:hover { transform: none !important; box-shadow: none !important; }
  .testimonial-card:hover { transform: none !important; }
}
/* Touch devices: matar todas las animaciones de hover y parallax */
@media (hover: none) {
  .blob { animation: none !important; }
  .parallax-layer { transform: none !important; }
  .tilt:hover { transform: none !important; }
  .product-card:hover { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* AI button — fix tamaño y centrado */
#chatBtn { line-height: 1; }
#chatBtn .ai-icon-circle { width: 56px; height: 56px; min-width: 56px; min-height: 56px; flex-shrink: 0; aspect-ratio: 1 / 1; }
#chatBtn .ai-icon-circle svg { width: 26px; height: 26px; }
@media (min-width: 640px) {
  #chatBtn .ai-icon-circle { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  #chatBtn .ai-icon-circle svg { width: 20px; height: 20px; }
}