/* =========================================================
   TUKI TUKI - ESTILOS
   - Cambia colores aquí en :root
   - Todo está organizado por secciones
========================================================= */

:root{
  /* Colores base */
  --bg: #0B0F1A;
  --panel: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.12);
  --text: #EAF0FF;
  --muted: #B8C0CC;

  /* Colores del logo */
  --orange: #FF7A00;
  --yellow: #FFC400;

  /* Ajustes UI */
  --radius: 18px;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --header-offset: 112px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0; height:100%}
/* Oculta scrollbar lateral sin bloquear scroll */
body{
  scrollbar-width: none; /* Firefox */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}
body{
  font-family:"Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow-x:hidden;
  padding-top: var(--header-offset);
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none; /* Firefox */
}
body::-webkit-scrollbar{
  width: 0;
  height: 0;
}

a{color:inherit;text-decoration:none}
.container{width:min(1120px, 92%); margin:auto}

/* =========================
   HEADER
========================= */
.header{
  position: fixed;
  top:0;
  left: 0;
  right: 0;
  width: 100%;
  z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(11,15,26,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
}

.brand{display:flex; gap:12px; align-items:center;}
.brand__logo{
  width:80px; height:80px; object-fit:contain;
  transform: scale(5.0);
  transform-origin: left center;
  filter: drop-shadow(0 10px 18px rgba(255,122,0,.25));
  animation: brandLogoZoom 2.8s ease-in-out infinite, brandLogoGlow 2.4s ease-in-out infinite;
}
.brand__title{font-weight:800}
.brand__subtitle{color:var(--muted); font-size:.9rem}

@keyframes brandLogoZoom{
  0%, 100%{ transform: scale(5.0); }
  50%{ transform: scale(5.22); }
}
@keyframes brandLogoGlow{
  0%, 100%{ filter: drop-shadow(0 10px 18px rgba(255,122,0,.25)); }
  50%{ filter: drop-shadow(0 14px 24px rgba(255,160,60,.42)); }
}
@media (prefers-reduced-motion: reduce){
  .brand__logo{
    animation: none !important;
  }
}

.nav{display:flex; gap:18px; align-items:center;}
.nav a{
  position: relative;
  color: rgba(255,255,255,.92);
  text-shadow:
    0 0 10px rgba(255,255,255,.35),
    0 0 20px rgba(255,255,255,.18);
  animation: navLinkPulse 2.8s ease-in-out infinite;
}
.nav a::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #67eeff, #ff95d9, #7aa8ff);
  background-size: 220% 100%;
  opacity: .75;
  animation: navLinkLine 2.4s linear infinite;
}
.nav a:hover{
  color:#fff;
  text-shadow:
    0 0 12px rgba(255,255,255,.6),
    0 0 26px rgba(255,255,255,.35);
}
@keyframes navLinkPulse{
  0%, 100%{
    color: #9af7ff;
    text-shadow:
      0 0 12px rgba(96, 243, 255, .55),
      0 0 28px rgba(255, 146, 209, .32);
  }
  50%{
    color: #ffd89a;
    text-shadow:
      0 0 14px rgba(255, 214, 138, .65),
      0 0 30px rgba(255, 146, 209, .4);
  }
}
@keyframes navLinkLine{
  from{ background-position: 0% 50%; opacity: .72; }
  50%{ opacity: 1; }
  to{ background-position: 220% 50%; opacity: .72; }
}

.navbtn{
  display:none;
  width:44px; height:44px;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:10px;
  position: relative;
  z-index: 70;
  touch-action: manipulation;
}
.navbtn span{
  display:block;
  height:2px;
  margin:6px 0;
  background: rgba(255,255,255,.85);
  border-radius:999px;
}

/* Menú móvil */
.nav--mobile{
  display:none;
  padding: 10px 0 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.nav--mobile a{display:block; padding:10px 0;}

/* =========================
   BOTONES
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.btn:hover{transform: translateY(-2px)}
.btn--full{width:100%}

.btn--primary{
  border:0;
  color:#12141b;
  font-weight:800;
  background: linear-gradient(135deg, var(--orange), var(--yellow));
  box-shadow: 0 18px 55px rgba(255,122,0,.22);
}
.btn--ghost{background: transparent}
.btn--wa{
  border:0;
  color:#11141b;
  font-weight:800;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
}

/* =========================
   SECCIONES
========================= */
.section{padding: 56px 0}
.section--soft{
  background: rgba(255,255,255,.02);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.section--how{
  background:
    radial-gradient(560px 340px at 8% 18%, rgba(120,180,255,.18), transparent 62%),
    radial-gradient(520px 320px at 24% 84%, rgba(80,255,195,.16), transparent 62%),
    radial-gradient(560px 340px at 92% 24%, rgba(255,120,40,.18), transparent 62%),
    radial-gradient(480px 300px at 78% 78%, rgba(188,120,255,.16), transparent 60%),
    radial-gradient(420px 260px at 52% 52%, rgba(255,88,176,.1), transparent 66%),
    rgba(255,255,255,.02);
}
.section--how .section__head{
  text-align: center;
}
.section--how .section__head h2{
  display: inline-block;
  margin: 0 auto 10px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #63f7ff 0%, #8dd8ff 45%, #ff7bcf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(99,247,255,.28);
}
.section__head h2{margin:0 0 8px; font-size: clamp(1.7rem, 2.6vw, 2.2rem)}
.section__head p{margin:0; color:var(--muted)}
.section__head--center{ text-align:center; }

/* Título con animación escritura */
/* Título con animación (brillo + leve flotación) */
/* Transicion entre secciones */
.sectionTransition{
  position: relative;
  height: 54px;
  margin-top: -8px;
  margin-bottom: -8px;
  pointer-events: none;
  z-index: 2;
}
.sectionTransition--howFaq{
  background:
    linear-gradient(180deg, rgba(11,15,26,0) 0%, rgba(18,28,50,.68) 50%, rgba(11,15,26,0) 100%);
}
.sectionTransition--howFaq::before,
.sectionTransition--howFaq::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
}
.sectionTransition--howFaq::before{
  top: 10px;
  height: 32px;
  background:
    radial-gradient(60% 80% at 20% 50%, rgba(97, 239, 255, .14), transparent 70%),
    radial-gradient(60% 80% at 80% 50%, rgba(255, 138, 210, .12), transparent 72%);
  filter: blur(10px);
}
.sectionTransition--howFaq::after{
  top: 18px;
  height: 16px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='16' viewBox='0 0 160 16'%3E%3Cpath d='M0 8 C10 1 30 1 40 8 C50 15 70 15 80 8 C90 1 110 1 120 8 C130 15 150 15 160 8' fill='none' stroke='%2379efff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='16' viewBox='0 0 160 16'%3E%3Cpath d='M0 8 C10 1 30 1 40 8 C50 15 70 15 80 8 C90 1 110 1 120 8 C130 15 150 15 160 8' fill='none' stroke='%23ff8ad2' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='16' viewBox='0 0 160 16'%3E%3Cpath d='M0 8 C10 1 30 1 40 8 C50 15 70 15 80 8 C90 1 110 1 120 8 C130 15 150 15 160 8' fill='none' stroke='%2397a7ff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 160px 16px, 200px 16px, 240px 16px;
  background-position: 0 0, 0 0, 0 0;
  filter: drop-shadow(0 0 10px rgba(121,239,255,.42)) drop-shadow(0 0 10px rgba(255,138,210,.28));
  opacity: .95;
  animation: waveLineMove 4.8s linear infinite, transitionGlow 2.6s ease-in-out infinite;
}

@keyframes transitionGlow{
  0%, 100%{ opacity: .45; }
  50%{ opacity: .9; }
}

@keyframes waveLineMove{
  from{ background-position: 0 0, 0 0, 0 0; }
  to{ background-position: -160px 0, 200px 0, -240px 0; }
}

.typingTitle{
  display: inline-block;
  color: #59E38E;
  text-shadow:
    0 0 10px rgba(89,227,142,.6),
    0 0 24px rgba(89,227,142,.35);
  animation: catGlow 2.8s ease-in-out infinite;
}

@keyframes catGlow{
  0%,100%{ transform: translateY(0); opacity: .9; }
  50%{ transform: translateY(-2px); opacity: 1; }
}

/* =========================
   HERO estilo SkyDrop (Tuki)
========================= */
.hero--stream{
  position: relative;
  min-height: 90vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  perspective: 1000px;
}

/* Nieve */
.hero--stream::before,
.hero--stream::after{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  z-index: 3;
  background:
    radial-gradient(2px 2px at 10% 10%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(2px 2px at 20% 40%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(3px 3px at 35% 25%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(2px 2px at 50% 15%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(3px 3px at 65% 35%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(2px 2px at 80% 20%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(3px 3px at 92% 45%, rgba(255,255,255,.9), transparent 60%);
  filter: blur(.2px);
  opacity: .8;
  animation: snowFall 12s linear infinite;
}
.hero--stream::after{
  opacity:.6;
  animation: snowFall 18s linear infinite reverse;
}

@keyframes snowFall{
  from { transform: translateY(-6%); }
  to   { transform: translateY(6%); }
}

.hero__media{position:absolute; inset:0;}
.hero__media{
  background: none;
}
.hero__media::before,
.hero__media::after{
  content: none;
}
.hero__media img,
.hero__media video{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: none;
}

/* Overlay para legibilidad */
.hero__overlay{
  position:absolute; inset:0;
  background: none;
  z-index: 1;
}

/* Transición hero -> productos */
.heroDivider{
  height: 220px;
  margin-top: -160px;
  background: rgba(11,15,26,1);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 55%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 55%, #000 100%);
  filter: blur(0.2px);
  pointer-events: none;
  position: relative;
  overflow: hidden;
}
.heroDivider::before{
  content:"";
  position:absolute;
  inset:-40% -10%;
  background:
    radial-gradient(120px 40px at 10% 60%, rgba(255,120,40,.25), transparent 70%),
    radial-gradient(140px 50px at 40% 55%, rgba(120,80,255,.25), transparent 70%),
    radial-gradient(160px 60px at 70% 50%, rgba(90,180,255,.25), transparent 70%),
    radial-gradient(120px 40px at 90% 45%, rgba(255,120,200,.22), transparent 70%);
  animation: dividerGlow 6s ease-in-out infinite;
  opacity:.7;
}

@keyframes dividerGlow{
  0%{ transform: translateX(-6%) translateY(0); opacity:.5; }
  50%{ transform: translateX(6%) translateY(-4%); opacity:.9; }
  100%{ transform: translateX(-6%) translateY(0); opacity:.5; }
}

/* ✅ Remolino animado (se mueve sin cambiar tu imagen)
   - Es un overlay con conic-gradients + blur + rotación.
*/
.hero__swirl{
  position:absolute; inset:-20%;
  z-index: 2;
  pointer-events:none;

  /* Capas tipo energía naranja */
  background:
    radial-gradient(800px 520px at 55% 40%, rgba(255,196,0,.20), transparent 60%),
    radial-gradient(900px 600px at 70% 25%, rgba(255,122,0,.16), transparent 62%),
    repeating-conic-gradient(
      from 190deg at 62% 40%,
      rgba(255,122,0,.24) 0 10deg,
      rgba(255,196,0,.12) 10deg 18deg,
      rgba(0,0,0,0) 18deg 30deg
    );

  filter: blur(1.2px) saturate(1.1);
  opacity: .55;
  mix-blend-mode: screen;

  /* Movimiento */
  animation: swirlSpin 18s linear infinite;
}

@keyframes swirlSpin{
  0%   { transform: rotate(0deg) scale(1.02); }
  100% { transform: rotate(360deg) scale(1.02); }
}

/* Contenido del hero */
.hero__content{
  position:relative;
  z-index: 5; /* arriba del remolino */
  width:min(1200px, 96%);
  display:grid;
  grid-template-columns: 1.2fr .85fr;
  gap: 22px;
  align-items:center;
  padding: 140px 0 80px;
}
.hero__left{
  position: relative;
  justify-self: start;
  margin-left: -40px;
}
.hero__content,
.hero__content .hero__left{
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  z-index: 10;
}

.heroKickerCarousel{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  padding: 8px 12px;
  border-radius: 999px;
  margin: 0 0 14px;
  overflow: hidden !important;
  width: min(720px, 100%);
  max-width: none;
  height: 44px !important;
  justify-content: center;
}
.heroKickerCarousel__track{
  display:block;
  height: 44px;
  animation: heroKickerSlide 10s ease-in-out infinite;
  width: 100%;
}
.heroKickerCarousel__item{
  white-space: nowrap;
  font-weight: 700;
  height: 44px;
  line-height: 44px;
  font-size: 1.05rem;
  overflow: hidden;
  width: 100%;
  text-align: center;
}
.heroKickerCarousel__item span{
  display: block;
  overflow: hidden;
  border-right: 2px solid rgba(255,255,255,.8);
  white-space: nowrap;
  animation: kickerTyping 2.2s steps(28) infinite;
  width: 100%;
}
.heroKickerCarousel__item:nth-child(1){ color: #ffffff; }
.heroKickerCarousel__item:nth-child(2){ color: #59E38E; }
.heroKickerCarousel__item:nth-child(3){ color: #FFC24A; }
.heroKickerCarousel__item:nth-child(4){ color: #7EB7FF; }
.heroCarousel{
  display: block;
  margin: 14px 0 16px;
  width: 100%;
  max-width: 580px;
  height: 320px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.25);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  position: relative;
  z-index: 6;
  opacity: 1;
}
.heroCarousel__track{
  display:flex;
  width: 600%;
  height: 100%;
  animation: heroCarouselSlide 12s ease-in-out infinite;
}
.heroCarousel__item{
  width: 100%;
  height: 100%;
  position: relative;
}
.heroCarousel__item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.heroCarousel__caption{
  position: absolute;
  left: 12px;
  top: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  backdrop-filter: blur(6px);
}
@keyframes heroCarouselSlide{
  0%,12%{ transform: translateX(0); }
  16%,28%{ transform: translateX(-16.666%); }
  32%,44%{ transform: translateX(-33.333%); }
  48%,60%{ transform: translateX(-50%); }
  64%,76%{ transform: translateX(-66.666%); }
  80%,92%{ transform: translateX(-83.333%); }
  100%{ transform: translateX(0); }
}
.heroKickerCarousel .dot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--orange), var(--yellow));
  box-shadow: 0 0 18px rgba(255,122,0,.45);
}

@keyframes heroKickerSlide{
  0%,20%{ transform: translateY(0); }
  25%,45%{ transform: translateY(-44px); }
  50%,70%{ transform: translateY(-88px); }
  75%,95%{ transform: translateY(-132px); }
  100%{ transform: translateY(0); }
}

@keyframes kickerTyping{
  0%{ width: 0; }
  100%{ width: 100%; }
}

.hero__title{
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1.05;
  margin: 0 0 12px;
}
.heroTitlePro{
  color: #EAF0FF;
  text-shadow:
    0 0 18px rgba(88,160,255,.35),
    0 0 36px rgba(255,120,40,.25);
  animation: heroTitleFloat 4.2s ease-in-out infinite;
}
.heroTitlePro__accent{
  color: #FFC24A;
  text-shadow:
    0 0 18px rgba(255,194,74,.6),
    0 0 40px rgba(255,120,40,.45);
  animation: heroAccentGlow 2.6s ease-in-out infinite;
}

@keyframes heroTitleFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}
@keyframes heroAccentGlow{
  0%,100%{ filter: brightness(1); }
  50%{ filter: brightness(1.2); }
}
.grad{
  background: linear-gradient(135deg, var(--orange), var(--yellow));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__subtitle{
  margin: 0 0 18px;
  color: rgba(255,255,255,.80);
  line-height: 1.6;
  max-width: 60ch;
}

.hero__actions{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-bottom: 18px;
}

.hero__trust{display:flex; gap:10px; flex-wrap:wrap;}
.trustItem{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.78);
}

/* Card derecha */
.heroCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,12,16,.55);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  padding: 18px;
}
.heroCard h3{margin:0 0 8px}
.heroCard p{margin:0 0 14px; color: rgba(255,255,255,.78); line-height:1.5}
.heroCard__chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 12px}
.chipMini{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.78);
  font-weight: 700;
  font-size: .9rem;
}
.heroCard__note{display:block; margin-top:10px; color: rgba(255,255,255,.65)}

/* FX (anillos tipo streaming) */
.hero__fx{position:absolute; inset:0; pointer-events:none; z-index:4}
.ring{
  position:absolute;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 40px rgba(255,122,0,.10);
  opacity:.55;
  animation: float2 8s ease-in-out infinite;
}
.ring--a{width: 440px; height: 440px; right:-140px; top: 10%}
.ring--b{width: 320px; height: 320px; right: 6%; bottom: -120px; animation-delay:-2.2s}
.spark{
  position:absolute;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--yellow), var(--orange));
  box-shadow: 0 0 28px rgba(255,122,0,.45);
  left: 12%;
  bottom: 22%;
  animation: spark 5s ease-in-out infinite;
}
@keyframes float2{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(16px)}
}
@keyframes spark{
  0%,100%{transform: translate(0,0); opacity:.7}
  50%{transform: translate(20px,-10px); opacity:1}
}

/* =========================================================
   PRODUCTOS (cards con imagen)
========================================================= */
.products{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Productos home (categorías + plataformas) */
.catGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
}
.catCard{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 180px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.catCard--cine{ background: url("../assets/general/pelis.jfif") center/cover no-repeat; }
.catCard--tv{ background: url("../assets/general/tv.jfif") center/cover no-repeat; }
.catCard--music{ background: url("../assets/general/musica.jfif") center/cover no-repeat; }
.catCard__overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 100%);
}
.catCard__content{
  position: relative;
  padding: 16px;
  z-index:1;
}
.catCard__content h3{margin:0 0 6px;}
.catCard__content span{color: rgba(255,255,255,.8); text-decoration: underline;}

.platformsHead{
  margin-top: 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.platformsGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.platformCard{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: #ffffff;
  display:grid;
  place-items:center;
  padding: 16px;
  min-height: 120px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  gap: 8px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.platformCard img{
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}
.platformCard:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.25);
}
.platformCard::after{
  content:"";
  position:absolute;
  inset: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  pointer-events:none;
}
.platformMeta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 2px;
  font-size: .9rem;
  color: #202636;
}
.platformMeta strong{
  color: #111;
  font-weight: 800;
}
.stars{
  color: #f3c544;
  letter-spacing: 1px;
  font-size: .85rem;
  line-height: 1;
}

/* Galería de películas */
#peliculas .section__head{
  text-align: center;
}
.moviesTitleFx{
  display: inline-block;
  position: relative;
  font-weight: 900;
  letter-spacing: .5px;
  background: linear-gradient(90deg, #7cf0ff, #9bb2ff, #ff99d8, #7cf0ff);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 16px rgba(124, 240, 255, .28);
  animation: moviesTitleShift 3.2s linear infinite, moviesTitleFloat 2.8s ease-in-out infinite;
}
.moviesTitleFx::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6fe7ff, #ffa2df, #89a9ff);
  background-size: 240% 100%;
  box-shadow: 0 0 12px rgba(111, 231, 255, .42);
  animation: moviesLineFlow 2.2s linear infinite;
}
@keyframes moviesTitleShift{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 220% 50%; }
}
@keyframes moviesTitleFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); }
}
@keyframes moviesLineFlow{
  0%{ background-position: 0% 50%; opacity: .72; }
  50%{ opacity: 1; }
  100%{ background-position: 240% 50%; opacity: .72; }
}
.movieShowcase{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 140px);
  grid-template-areas:
    "a a b c"
    "a a b c"
    "d e f f"
    "d e f f";
  gap: 8px;
  margin-top: 18px;
}
.movieCard{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  min-height: 0;
  height: 100%;
}
.movieCard--wide{ grid-area: a; }
.movieCard--tall{ grid-area: b; }
.movieCard--mid{ grid-area: c; }
.movieCard--small{ grid-area: d; }
.movieCard--mid2{ grid-area: e; }
.movieCard--large{ grid-area: f; }
.movieCard img,
.movieCard video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  margin: 0;
}
.movieCard:hover{
  transform: translateY(-3px);
  transition: transform .2s ease;
}

/* Productos page: fondo blanco en seccion productos */
.page-productos #productos{
  background: #ffffff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-productos #productos::before{
  content: "";
  position: absolute;
  inset: -140px -120px auto;
  height: 360px;
  background:
    radial-gradient(420px 220px at 16% 30%, rgba(94, 185, 255, .2), rgba(94, 185, 255, 0) 70%),
    radial-gradient(460px 240px at 84% 40%, rgba(255, 170, 68, .18), rgba(255, 170, 68, 0) 72%);
  filter: blur(18px);
  z-index: 0;
  pointer-events: none;
  animation: productosAmbientDrift 11s ease-in-out infinite;
}
.page-productos #productos::after{
  content: "";
  position: absolute;
  inset: auto -140px -180px;
  height: 360px;
  background:
    radial-gradient(460px 240px at 24% 68%, rgba(87, 226, 200, .18), rgba(87, 226, 200, 0) 72%),
    radial-gradient(420px 210px at 76% 62%, rgba(150, 138, 255, .16), rgba(150, 138, 255, 0) 74%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
  animation: productosAmbientDrift 14s ease-in-out infinite reverse;
}
.page-productos #productos .container{
  position: relative;
  z-index: 1;
}
.page-productos #productos .section__head h2{
  position: relative;
  display: inline-block;
  color: #12213a;
  animation: productosTitleFloat 3.8s ease-in-out infinite;
}
.page-productos #productos .section__head h2::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff8a00, #ffc400, #5fb8ff, #ff8a00);
  background-size: 220% 100%;
  animation: productosLineFlow 3s linear infinite;
}
.page-productos #productos .section__head p{
  color: #4a5d7a;
  animation: productosSubtitleBreath 3.2s ease-in-out infinite;
}
.page-productos #productos .chip{
  border-color: rgba(17, 40, 77, .2);
  background: #f4f8ff;
  color: #314a70;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
  animation: productosChipIntro .55s ease both;
}
.page-productos #productos .filters .chip:nth-child(1){ animation-delay: .05s; }
.page-productos #productos .filters .chip:nth-child(2){ animation-delay: .11s; }
.page-productos #productos .filters .chip:nth-child(3){ animation-delay: .17s; }
.page-productos #productos .filters .chip:nth-child(4){ animation-delay: .23s; }
.page-productos #productos .filters .chip:nth-child(5){ animation-delay: .29s; }
.page-productos #productos .filters .chip:nth-child(6){ animation-delay: .35s; }
.page-productos #productos .filters .chip:nth-child(7){ animation-delay: .41s; }
.page-productos #productos .chip.is-active{
  animation: productosChipIntro .55s ease both, productosActivePulse 2.4s ease-in-out infinite;
}
.page-productos #productos .chip:hover{
  transform: translateY(-3px) scale(1.02);
  color: #162946;
  box-shadow: 0 10px 22px rgba(33, 56, 94, .18);
}

.page-productos #productos .product{
  background: linear-gradient(165deg, #151d2b 0%, #0f1724 58%, #0b101a 100%);
  border-color: rgba(170, 194, 230, .22);
  box-shadow: 0 16px 40px rgba(4, 8, 16, .52);
  position: relative;
  overflow: hidden;
  transform-origin: center;
  transition: transform .35s cubic-bezier(.2,.72,.2,1), box-shadow .35s ease, border-color .3s ease, filter .3s ease;
  animation: productosCardIdle 4.6s ease-in-out infinite;
}
.page-productos #productos .product::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 14%, rgba(255,255,255,.1), transparent 34%),
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.1) 48%, transparent 64%);
  transform: translateX(-130%);
  opacity: .7;
  pointer-events: none;
  animation: productosCardSweep 4.8s linear infinite;
}
.page-productos #productos .product:nth-child(2n){
  animation-delay: .45s;
}
.page-productos #productos .product:nth-child(3n){
  animation-delay: .9s;
}
.page-productos #productos .product:hover{
  transform: translateY(-10px) rotateX(3deg) rotateY(-2deg) scale(1.015);
  border-color: rgba(255, 190, 94, .72);
  box-shadow: 0 30px 68px rgba(0,0,0,.62), 0 0 24px rgba(255, 162, 52, .22);
  filter: saturate(1.08);
}
.page-productos #productos .product:hover::before{
  animation-duration: 1.4s;
}

.page-productos #productos .product__name{
  color: var(--text);
}
.page-productos #productos .product__desc{
  color: var(--muted);
}

.page-productos #productos .product__img{
  background: linear-gradient(180deg, rgba(18, 28, 44, .78), rgba(10, 16, 28, .86));
}
.page-productos #productos .product__body{
  background: linear-gradient(180deg, rgba(8, 12, 20, .86), rgba(6, 9, 16, .94));
}
.page-productos #productos .product__img img{
  animation: productosLogoFloat 3.8s ease-in-out infinite;
}
.page-productos #productos .product:nth-child(2n) .product__img img{
  animation-duration: 4.4s;
}
.page-productos #productos .product:nth-child(3n) .product__img img{
  animation-duration: 5s;
}

.page-productos #productos .product__top .tag{
  color: rgba(234,240,255,.82);
}
.page-productos #productos .product__top .grad{
  animation: productosPricePulse 2.1s ease-in-out infinite;
}
.page-productos #productos .product .btn:not(.btn--primary){
  background: rgba(176, 201, 236, .08);
  border-color: rgba(176, 201, 236, .18);
  color: #c7d6ee;
}
.page-productos #productos .product .btn:not(.btn--primary):hover{
  color: #edf4ff;
  background: rgba(176, 201, 236, .14);
}

@keyframes productosTitleFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}
@keyframes productosLineFlow{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 220% 50%; }
}
@keyframes productosSubtitleBreath{
  0%, 100%{ opacity: .82; }
  50%{ opacity: 1; }
}
@keyframes productosChipIntro{
  from{
    opacity: 0;
    transform: translateY(8px) scale(.97);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes productosActivePulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(255, 164, 0, .32); }
  60%{ box-shadow: 0 0 0 8px rgba(255, 164, 0, 0); }
}
@keyframes productosAmbientDrift{
  0%, 100%{ transform: translate3d(0,0,0) scale(1); opacity: .9; }
  50%{ transform: translate3d(0,14px,0) scale(1.04); opacity: 1; }
}
@keyframes productosCardIdle{
  0%, 100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-3px) scale(1.003); }
}
@keyframes productosCardSweep{
  0%{ transform: translateX(-130%); }
  100%{ transform: translateX(130%); }
}
@keyframes productosLogoFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}
@keyframes productosPricePulse{
  0%, 100%{ filter: brightness(1); transform: scale(1); }
  50%{ filter: brightness(1.16); transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce){
  .page-productos #productos::before,
  .page-productos #productos::after,
  .page-productos #productos .product,
  .page-productos #productos .product::before,
  .page-productos #productos .product__img img,
  .page-productos #productos .product__top .grad,
  .page-productos #productos .chip,
  .page-productos #productos .chip.is-active,
  .page-productos #productos .section__head h2,
  .page-productos #productos .section__head h2::after,
  .page-productos #productos .section__head p{
    animation: none !important;
    transition: none !important;
  }
}
.product{
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 40px rgba(0,0,0,.22);
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.product:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.product__img{
  height: 170px;
  background: rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  justify-content:center;
}
.product__img img{
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.35));
}

.product__body{padding: 14px 14px 16px}
.product__top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}
.product__name{margin: 8px 0 8px}
.product__desc{margin:0 0 14px; color:var(--muted); line-height:1.5}
.product__actions{display:flex; gap:10px; flex-wrap:wrap}

/* Filtros */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin: 18px 0 18px}
.chip{
  cursor:pointer;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  transition: transform .2s ease;
}
.chip:hover{transform: translateY(-1px); color:var(--text)}
.chip.is-active{
  border:0;
  color:#11141b;
  font-weight:800;
  background: linear-gradient(135deg, var(--orange), var(--yellow));
}

/* CÓMO FUNCIONA */
.how{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.howCard{
  padding: 18px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid rgba(120, 227, 255, .45);
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.3), rgba(255,255,255,0) 42%),
    linear-gradient(145deg, rgba(0, 197, 255, .42), rgba(36, 69, 255, .2));
  box-shadow: 0 14px 48px rgba(8, 14, 34, .52), 0 0 28px rgba(0, 200, 255, .28);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
  display:grid;
  align-content:center;
  justify-items:center;
  text-align:center;
  animation: howFloat 1.8s ease-in-out infinite;
}
.howCard:hover{
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 24px 58px rgba(4, 10, 32, .62), 0 0 36px rgba(75, 236, 255, .4);
  border-color: rgba(170, 246, 255, .85);
  filter: saturate(1.24);
}
.howIcon{
  width: 44px;
  height: 44px;
  display:grid;
  place-items:center;
  border-radius: 50%;
  font-weight: 900;
  font-size: 1.05rem;
  color:#04162d;
  background: linear-gradient(135deg, #a9fbff, #5be8ff);
  box-shadow: 0 0 0 0 rgba(91,232,255,.55);
  animation: howPulse .95s ease-out infinite;
}
.howCard:nth-child(2){
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.3), rgba(255,255,255,0) 42%),
    linear-gradient(145deg, rgba(160, 109, 255, .4), rgba(76, 26, 203, .22));
}
.howCard:nth-child(3){
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.3), rgba(255,255,255,0) 42%),
    linear-gradient(145deg, rgba(255, 95, 184, .4), rgba(168, 44, 255, .2));
}
.howCard h3{
  margin: 10px 0 6px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 1.08rem;
  color: #f5fbff;
  text-shadow: 0 0 12px rgba(131, 237, 255, .5);
}
.howCard p{
  margin:0;
  color: rgba(240, 248, 255, .9);
  line-height:1.55;
  font-weight: 600;
  font-size: .93rem;
}

@keyframes howFloat{
  0%, 100%{ transform: translateY(0) scale(1); }
  35%{ transform: translateY(-10px) scale(1.02); }
  70%{ transform: translateY(-4px) scale(.99); }
}

@keyframes howPulse{
  0%{ box-shadow: 0 0 0 0 rgba(91,232,255,.65); }
  70%{ box-shadow: 0 0 0 18px rgba(91,232,255,0); }
  100%{ box-shadow: 0 0 0 0 rgba(91,232,255,0); }
}

.cta{
  margin-top: 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: linear-gradient(135deg, rgba(255,122,0,.14), rgba(255,196,0,.08));
}

/* FAQ */
#faq{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(620px 340px at 8% 12%, rgba(80, 240, 255, .14), transparent 62%),
    radial-gradient(540px 320px at 92% 18%, rgba(255, 122, 189, .16), transparent 60%),
    radial-gradient(520px 300px at 50% 86%, rgba(113, 149, 255, .16), transparent 60%),
    linear-gradient(180deg, rgba(11,15,26,.65), rgba(16,21,40,.78));
}
#faq .section__head h2{
  display: inline-block;
  background: linear-gradient(90deg, #74f3ff, #ff8fd2, #9aa9ff, #74f3ff);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 20px rgba(116, 243, 255, .24);
  animation: faqTitleShift 3.2s linear infinite;
}
#faq .section__head p{
  color: #d5e5ff;
}
.faq{
  display:grid;
  gap:14px;
  margin-top:18px;
}
.faqItem{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(140, 225, 255, .26);
  background:
    radial-gradient(circle at 15% 20%, rgba(120, 247, 255, .12), transparent 45%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  padding: 14px 16px;
  box-shadow: 0 10px 34px rgba(0,0,0,.24);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  animation: faqBreath 3.8s ease-in-out infinite;
}
.faqItem::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #5be8ff, #ff89cf, #8ba6ff);
  opacity: .9;
}
.faqItem:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 42px rgba(0,0,0,.3);
  border-color: rgba(183, 240, 255, .5);
}
.faqItem summary{
  cursor:pointer;
  font-weight:800;
  list-style: none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.faqItem summary::-webkit-details-marker{display:none}
.faqItem summary::after{
  content:"+";
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:1.1rem;
  color:#0b1329;
  background: linear-gradient(135deg, #78edff, #ffc2e8);
  box-shadow: 0 0 18px rgba(120, 237, 255, .35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.faqItem[open] summary::after{
  content:"-";
  transform: rotate(180deg);
  box-shadow: 0 0 24px rgba(255, 140, 210, .42);
}
.faqItem p{
  color:#d8e7f7;
  margin: 12px 0 2px;
  line-height:1.62;
  text-align:center;
}
.faqItem[open] p{
  animation: faqAnswerIn .34s ease both;
}

@keyframes faqAnswerIn{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}

@keyframes faqBreath{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); }
}

@keyframes faqTitleShift{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 220% 50%; }
}

/* REFERENCIAS */
#referencias{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(560px 320px at 12% 18%, rgba(88, 235, 255, .16), transparent 62%),
    radial-gradient(520px 320px at 88% 16%, rgba(128, 150, 255, .16), transparent 60%),
    radial-gradient(500px 280px at 50% 88%, rgba(255, 132, 210, .12), transparent 62%),
    rgba(255,255,255,.02);
}
#referencias .section__head h2{
  display:inline-block;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #79efff, #9db4ff, #ff98d8, #79efff);
  background-size: 220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 0 18px rgba(121, 239, 255, .24);
  animation: refTitleShift 3.6s linear infinite;
}
#referencias .section__head p{
  color:#dbe9ff;
  font-weight: 600;
  letter-spacing: .2px;
}
.refs{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}
.refCard{
  position: relative;
  overflow: hidden;
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(150, 224, 255, .38);
  background:
    radial-gradient(circle at 10% 15%, rgba(121,239,255,.2), transparent 42%),
    radial-gradient(circle at 88% 20%, rgba(157,180,255,.15), transparent 44%),
    linear-gradient(140deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  box-shadow: 0 14px 40px rgba(0,0,0,.3);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  opacity: 0;
  transform: translateY(22px) scale(.97);
  animation: refCardIn .72s cubic-bezier(.2,.7,.2,1) forwards;
}
.refCard::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #79efff, #9db4ff, #ff98d8);
  opacity: .9;
}
.refCard:hover{
  transform: translateY(-6px);
  border-color: rgba(184, 231, 255, .66);
  box-shadow: 0 18px 48px rgba(0,0,0,.34);
}
.refCard:nth-child(1){ animation-delay: .1s; }
.refCard:nth-child(2){ animation-delay: .45s; }
.refCard:nth-child(3){ animation-delay: .8s; }
.refAvatar{
  width:46px; height:46px;
  border-radius: 999px;
  display:grid; place-items:center;
  font-weight:800;
  color:#071225;
  background: linear-gradient(135deg, #8cf5ff, #ffd0ea);
  box-shadow: 0 0 20px rgba(121,239,255,.32);
  flex-shrink: 0;
}
.refCard h3{
  margin:0 0 6px;
  font-weight: 900;
  font-size: 1.04rem;
  letter-spacing: .45px;
  color:#9fe8ff;
  text-shadow: 0 0 12px rgba(121,239,255,.24);
  text-transform: capitalize;
}
.refCard p{
  margin:0;
  color:#f1f7ff;
  line-height:1.6;
  font-weight: 600;
  font-size: .95rem;
}
.refTag{
  display:inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .4px;
  color:#07182c;
  background: linear-gradient(135deg, #8ef4ff, #b8c6ff, #ffb2e2);
}

@keyframes refCardIn{
  0%{
    opacity: 0;
    transform: translateY(22px) scale(.97);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes refTitleShift{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 220% 50%; }
}

/* SOPORTE */
.section--support{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(620px 360px at 10% 14%, rgba(67, 220, 172, .2), transparent 62%),
    radial-gradient(560px 340px at 88% 18%, rgba(75, 170, 255, .18), transparent 60%),
    radial-gradient(500px 300px at 50% 88%, rgba(54, 198, 248, .14), transparent 62%),
    rgba(255,255,255,.02);
  animation: supportBgFlow 9s ease-in-out infinite alternate;
}
.section--support::before,
.section--support::after{
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;
  z-index:0;
}
.section--support::before{
  background-image:
    radial-gradient(2px 2px at 8% 14%, rgba(205,244,255,.8), transparent 60%),
    radial-gradient(2px 2px at 18% 28%, rgba(172,231,255,.7), transparent 60%),
    radial-gradient(1.8px 1.8px at 32% 10%, rgba(170,255,234,.72), transparent 60%),
    radial-gradient(2px 2px at 44% 24%, rgba(186,238,255,.78), transparent 60%),
    radial-gradient(2px 2px at 58% 16%, rgba(164,226,255,.72), transparent 60%),
    radial-gradient(1.8px 1.8px at 70% 30%, rgba(160,255,232,.7), transparent 60%),
    radial-gradient(2px 2px at 84% 12%, rgba(190,242,255,.78), transparent 60%),
    radial-gradient(2px 2px at 92% 34%, rgba(170,231,255,.72), transparent 60%),
    radial-gradient(1.8px 1.8px at 12% 52%, rgba(184,239,255,.72), transparent 60%),
    radial-gradient(2px 2px at 24% 44%, rgba(158,223,255,.7), transparent 60%),
    radial-gradient(2px 2px at 36% 56%, rgba(167,255,233,.72), transparent 60%),
    radial-gradient(1.8px 1.8px at 48% 46%, rgba(194,244,255,.78), transparent 60%),
    radial-gradient(2px 2px at 60% 58%, rgba(169,232,255,.72), transparent 60%),
    radial-gradient(2px 2px at 72% 48%, rgba(156,251,225,.7), transparent 60%),
    radial-gradient(1.8px 1.8px at 86% 54%, rgba(185,240,255,.76), transparent 60%),
    radial-gradient(2px 2px at 95% 62%, rgba(163,228,255,.7), transparent 60%),
    radial-gradient(1.8px 1.8px at 10% 78%, rgba(175,236,255,.72), transparent 60%),
    radial-gradient(2px 2px at 22% 88%, rgba(160,250,227,.7), transparent 60%),
    radial-gradient(2px 2px at 34% 74%, rgba(192,245,255,.76), transparent 60%),
    radial-gradient(1.8px 1.8px at 46% 86%, rgba(170,232,255,.72), transparent 60%),
    radial-gradient(2px 2px at 58% 76%, rgba(162,251,226,.7), transparent 60%),
    radial-gradient(2px 2px at 70% 90%, rgba(188,242,255,.76), transparent 60%),
    radial-gradient(1.8px 1.8px at 82% 80%, rgba(165,229,255,.72), transparent 60%),
    radial-gradient(2px 2px at 92% 92%, rgba(158,247,222,.7), transparent 60%);
  background-repeat: no-repeat;
  opacity:.9;
}
.section--support::after{
  background-image:
    linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(180,235,255,.85) 50%, rgba(255,255,255,0) 65%),
    linear-gradient(120deg, rgba(255,255,255,0) 38%, rgba(130,220,255,.7) 50%, rgba(255,255,255,0) 62%),
    linear-gradient(120deg, rgba(255,255,255,0) 40%, rgba(110,255,220,.6) 50%, rgba(255,255,255,0) 60%);
  background-size: 260px 2px, 320px 2px, 240px 2px;
  background-position: -360px 12%, -520px 48%, -420px 78%;
  background-repeat: no-repeat;
  opacity:.75;
  filter: blur(.2px);
  animation: supportShootingStars 6.8s linear infinite;
}
.section--support > .container{
  position: relative;
  z-index:1;
}
.section--support .section__head h2{
  display: inline-block;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: linear-gradient(90deg, #43dcae, #38b8ff, #80f2cf, #43dcae);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(56, 184, 255, .3);
  animation: supportTitleShift 3.8s linear infinite, supportWordPulse 1.8s ease-in-out infinite;
}
.section--support .section__head p{
  color: #e8fff2;
  font-weight: 600;
}
.supportGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}
.supportCard{
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(77, 192, 255, .42);
  background:
    radial-gradient(circle at 12% 14%, rgba(67,220,172,.18), transparent 40%),
    radial-gradient(circle at 86% 18%, rgba(74,170,255,.14), transparent 42%),
    linear-gradient(140deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: 0 12px 38px rgba(0,0,0,.25);
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
  opacity: 1;
  transform: translateY(0);
}
.supportCard::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #43dcae, #38b8ff, #80f2cf);
}
.supportCard:hover{
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(151, 223, 255, .82);
  box-shadow: 0 18px 48px rgba(0,0,0,.32), 0 0 24px rgba(56, 184, 255, .25);
}
.supportCard h3{
  margin:0 0 7px;
  color:#7ed6ff;
  font-size: 1.06rem;
  letter-spacing: .4px;
  text-shadow: 0 0 10px rgba(126, 214, 255, .3);
}
.supportCard p{
  margin:0;
  color:#f3fffa;
  line-height:1.58;
  font-weight: 600;
}
.supportMeta{
  display:inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .35px;
  color:#092116;
  background: linear-gradient(135deg, #5ee4b5, #5abfff, #92f0d4);
}

/* Formulario Soporte */
.supportForm{
  margin-top: 22px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(86, 169, 255, .25);
  background:
    radial-gradient(circle at 12% 14%, rgba(80, 170, 255, .22), transparent 44%),
    radial-gradient(circle at 88% 20%, rgba(83, 220, 245, .2), transparent 44%),
    linear-gradient(135deg, rgba(10,24,56,.84), rgba(14,32,68,.78));
  box-shadow: 0 14px 40px rgba(0,0,0,.24);
}
.supportForm label{
  display:grid;
  gap:6px;
  color: #dff0ff;
  font-weight: 700;
}
.supportForm select, .supportForm textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(92, 174, 255, .38);
  background: rgba(7, 20, 48, .82);
  color: #e6f4ff;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.supportForm select:focus, .supportForm textarea:focus{
  border-color: rgba(63, 164, 255, .82);
  box-shadow: 0 0 0 3px rgba(87, 188, 255, .24);
  background: rgba(9, 24, 56, .9);
}
.supportForm .full{grid-column: 1 / -1}
.supportForm small{color:#bcd8f8}
#btnWaSupport{
  justify-self: start;
  animation: supportBtnPulse 2.2s ease-in-out infinite;
}

.supportGrid.reveal.is-visible .supportCard{
  opacity: 0;
  transform: translateY(20px);
  animation: supportCardIn .7s ease forwards;
}
.supportGrid.reveal.is-visible .supportCard:nth-child(1){ animation-delay: .12s; }
.supportGrid.reveal.is-visible .supportCard:nth-child(2){ animation-delay: .4s; }
.supportGrid.reveal.is-visible .supportCard:nth-child(3){ animation-delay: .68s; }

@keyframes supportCardIn{
  from{
    opacity: 0;
    transform: translateY(20px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes supportTitleShift{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 220% 50%; }
}

@keyframes supportWordPulse{
  0%, 100%{ transform: translateY(0) scale(1); filter: brightness(1); }
  50%{ transform: translateY(-2px) scale(1.04); filter: brightness(1.12); }
}

@keyframes supportBgFlow{
  0%{ filter: saturate(1) brightness(1); }
  100%{ filter: saturate(1.15) brightness(1.06); }
}

@keyframes supportShootingStars{
  0%{
    background-position: -360px 12%, -520px 48%, -420px 78%;
    opacity: .2;
  }
  10%, 22%{
    opacity: .9;
  }
  35%{
    background-position: 560px 30%, 620px 64%, 520px 90%;
    opacity: .4;
  }
  100%{
    background-position: 560px 30%, 620px 64%, 520px 90%;
    opacity: .15;
  }
}

@keyframes supportBtnPulse{
  0%,100%{ box-shadow: 0 18px 55px rgba(255,122,0,.22); }
  50%{ box-shadow: 0 20px 65px rgba(255,184,88,.35); }
}

/* FOOTER */
.footer{
  padding: 36px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  background:
    /* “vectorial” con formas y bloques suaves */
    linear-gradient(135deg, rgba(15,32,64,.9) 0%, rgba(10,30,24,.95) 100%),
    radial-gradient(240px 180px at 10% 20%, rgba(0,220,255,.18), transparent 60%),
    radial-gradient(280px 200px at 85% 30%, rgba(89,227,142,.18), transparent 62%),
    linear-gradient(120deg, rgba(255,122,0,.10) 0 18%, transparent 18% 40%, rgba(255,196,0,.10) 40% 58%, transparent 58% 100%),
    linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  background-blend-mode: normal, screen, screen, normal, normal;
}
.footer__inner{
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
}
.footer__left{display:flex; gap:10px; align-items:center; flex-direction:row}
.footer__logo{
  width:190px;height:190px;
  object-fit:contain;
  filter: drop-shadow(0 16px 30px rgba(255,122,0,.25));
  animation: footerLogoZoom 6s ease-in-out infinite;
  transition: transform .25s ease, filter .25s ease;
}
.footer__logo:hover{
  transform: translateY(-4px) scale(1.01);
  filter: drop-shadow(0 22px 40px rgba(255,122,0,.35));
}

@keyframes footerLogoZoom{
  0%,100%{ transform: scale(1) }
  50%{ transform: scale(1.12) }
}
.footer__title{
  font-weight:900;
  letter-spacing:.2px;
  font-size: 1.1rem;
}
.footer__links{
  display:flex;
  gap:16px;
  flex-wrap:nowrap;
  color: rgba(255,255,255,.82);
}
@media (min-width: 981px){
  .footer__links{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    column-gap: 22px;
    row-gap: 10px;
    align-items:start;
  }
  .footer__links a{
    padding: 4px 0;
  }
}
.footer__links a{
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight:700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  color: #59E38E;
}
.footer__links a:hover{
  color:#8CF2B3;
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
}
.footer__right{display:flex; flex-direction:column; align-items:flex-end; gap:8px; margin-left:auto}
.copy{
  color:#fff;
  font-size:.95rem;
  text-align:left;
  text-shadow:
    0 0 8px rgba(255,255,255,.55),
    0 0 18px rgba(255,255,255,.35);
}
.copy--left{max-width: 260px; line-height:1.35; margin-top:0}
.payMethods{display:flex; flex-direction:column; gap:8px; align-items:flex-end}
.payMethods__title{font-weight:800; color: rgba(255,255,255,.92)}
.payMethods__title.typing{
  position: relative;
  display: inline-block;
  color: transparent; /* texto real mantiene el ancho, el visible va en ::before */
}
.payMethods__title.typing::before{
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid rgba(255,255,255,.85);
  width: 0;
  animation:
    typing 3.2s steps(var(--chars, 15)) infinite,
    caretBlink .7s step-end infinite;
}
.payMethods__list{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.payLogo{
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: payFloat 4.8s ease-in-out infinite;
}
.payLogo:nth-child(2){ animation-delay: .6s; }
.payLogo:hover{
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 16px 36px rgba(0,0,0,.4);
}

@keyframes payFloat{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-6px) }
}

@keyframes typing{
  0%{ width: 0; }
  100%{ width: calc(var(--chars, 15) * 1ch); }
}
@keyframes caretBlink{
  0%,100%{ border-color: transparent; }
  50%{ border-color: rgba(255,255,255,.85); }
}

@media (prefers-reduced-motion: reduce){
  .payLogo{ animation: none !important; transition: none; }
  .footer__logo{ animation: none !important; transition: none; }
  .payMethods__title.typing{ color: rgba(255,255,255,.92); }
  .payMethods__title.typing::before{ content: none; animation: none !important; border-right: 0; }
  .moviesTitleFx,
  .moviesTitleFx::after{
    animation: none !important;
  }
}

/* WhatsApp flotante */
.waFloat{
  position:fixed;
  right: 16px;
  bottom: 16px;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 999px;
  border:0;
  color:#0e1a12;
  font-weight:900;
  background: linear-gradient(135deg, #25D366, #8bf0b0);
  box-shadow: 0 18px 55px rgba(37,211,102,.35);
  z-index:60;
  animation: waFloatPulse 2.2s ease-in-out infinite, waFloatLift 3.6s ease-in-out infinite;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.waFloat:hover{
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 22px 65px rgba(37,211,102,.45);
  filter: saturate(1.08);
}
.waFloat::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 65%);
  transform: translateX(-120%);
  animation: waFloatShine 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes waFloatPulse{
  0%,100%{ box-shadow: 0 18px 55px rgba(37,211,102,.35); }
  50%{ box-shadow: 0 22px 70px rgba(37,211,102,.5); }
}
@keyframes waFloatLift{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}
@keyframes waFloatShine{
  0%{ transform: translateX(-120%); opacity: 0; }
  30%{ opacity: .9; }
  70%{ opacity: .9; }
  100%{ transform: translateX(120%); opacity: 0; }
}

/* Reveal */
.reveal{opacity: 1; transform: none;}
.js .reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.is-visible{opacity: 1; transform: translateY(0);}

.js .hero__left, .js .hero__right{
  opacity:0; transform: translateY(10px);
  transition: .6s ease;
}
.js .is-visible{
  opacity:1; transform: translateY(0);
}

/* CONTACTO */
.section--contact{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(620px 360px at 12% 14%, rgba(64, 224, 197, .18), transparent 62%),
    radial-gradient(560px 340px at 88% 18%, rgba(74, 168, 255, .16), transparent 60%),
    radial-gradient(500px 300px at 52% 86%, rgba(120, 232, 255, .12), transparent 62%),
    rgba(255,255,255,.02);
}
.section--contact::before,
.section--contact::after{
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;
  z-index:0;
}
.section--contact::before{
  background-image:
    radial-gradient(circle, rgba(175,245,255,.36) 1px, transparent 1.8px),
    radial-gradient(circle, rgba(120,235,214,.3) 1px, transparent 1.8px);
  background-size: 26px 26px, 34px 34px;
  background-position: 0 0, 12px 16px;
  animation: contactAntsMove 18s linear infinite;
}
.section--contact::after{
  background-image:
    radial-gradient(circle, rgba(110,210,255,.24) .9px, transparent 1.7px);
  background-size: 22px 22px;
  background-position: 8px 10px;
  opacity:.8;
  animation: contactAntsMoveB 13s linear infinite reverse;
}
.section--contact > .container{
  position: relative;
  z-index:1;
}
.section--contact .section__head h2{
  display:inline-block;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #49e0c3, #5bc0ff, #9ff1ff, #49e0c3);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(91, 192, 255, .25);
  animation: contactTitleShift 4s linear infinite, contactTitlePulse 2s ease-in-out infinite;
}
.section--contact .section__head p{
  color:#d9ebff;
  font-weight: 600;
}
.leadForm{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(86, 207, 255, .48);
  background:
    radial-gradient(circle at 15% 15%, rgba(69, 244, 214, .22), transparent 42%),
    radial-gradient(circle at 84% 18%, rgba(96, 164, 255, .2), transparent 42%),
    linear-gradient(135deg, rgba(8,20,44,.82), rgba(13,26,56,.72));
  box-shadow: 0 16px 42px rgba(0,0,0,.2);
  animation: contactFormFloat 5s ease-in-out infinite;
}
.leadForm label{
  display:grid;
  gap:6px;
  color: #f1fff8;
  font-weight: 700;
  letter-spacing: .2px;
}
.leadForm input, .leadForm select, .leadForm textarea{
  width:100%;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(122, 217, 255, .38);
  background: rgba(9, 22, 48, .72);
  color: #ecf7ff;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.leadForm input:focus, .leadForm select:focus, .leadForm textarea:focus{
  border-color: rgba(143, 239, 255, .82);
  box-shadow: 0 0 0 3px rgba(95, 211, 255, .22);
  transform: translateY(-1px);
}
.leadForm button{
  animation: contactBtnPulse 2.4s ease-in-out infinite;
}
.leadForm small{
  color:#d3e5ff;
  align-self:center;
}
.leadForm .full{grid-column: 1 / -1}

@keyframes contactTitleShift{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 220% 50%; }
}

@keyframes contactTitlePulse{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); }
}

@keyframes contactFormFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); }
}

@keyframes contactBtnPulse{
  0%,100%{ box-shadow: 0 18px 55px rgba(255,122,0,.22); }
  50%{ box-shadow: 0 20px 65px rgba(91,192,255,.35); }
}

@keyframes contactAntsMove{
  from{ background-position: 0 0, 12px 16px; }
  to{ background-position: 220px 120px, -180px 90px; }
}

@keyframes contactAntsMoveB{
  from{ background-position: 8px 10px; }
  to{ background-position: -160px 140px; }
}

/* Responsive */
@media (max-width: 980px){
  :root{
    --header-offset: 92px;
  }
  .products{grid-template-columns: repeat(2,1fr)}
  .catGrid{grid-template-columns: 1fr; }
  .platformsGrid{grid-template-columns: repeat(2,1fr)}
  .movieShowcase{grid-template-columns: repeat(2,1fr)}
  .how{
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .refs{grid-template-columns: 1fr}
  .supportGrid{grid-template-columns: 1fr}
  .supportForm{grid-template-columns: 1fr}
  .nav--desktop{display:none}
  .navbtn{display:block}
  .nav--mobile.is-open{display:flex; flex-direction:column; gap:0}
  .nav--mobile{
    position: relative;
    z-index: 65;
  }

  .brand__logo{width:80px; height:80px; transform: scale(1.5);}
  .hero--stream{
    min-height: auto;
    padding-bottom: 28px;
  }
  .hero__content{
    grid-template-columns: 1fr;
    padding: 96px 0 54px;
    gap: 14px;
  }
  .hero__left{
    margin-left: 0;
    width: 100%;
  }
  .hero__title{
    font-size: clamp(1.85rem, 7.4vw, 2.5rem);
    line-height: 1.08;
  }
  .hero__subtitle{
    font-size: .98rem;
    line-height: 1.5;
    margin-bottom: 14px;
  }
  .heroKickerCarousel{
    height: 40px !important;
    margin-bottom: 10px;
  }
  .heroKickerCarousel__track{height: 40px;}
  .heroKickerCarousel__item{
    height: 40px;
    line-height: 40px;
    font-size: .95rem;
  }
  .heroCarousel{
    max-width: 100%;
    height: 220px;
    margin: 10px 0 14px;
  }
  .hero__actions{
    width: 100%;
    margin-bottom: 14px;
  }
  .hero__actions .btn{
    width: 100%;
  }
  .hero__trust{
    gap: 8px;
  }
  .trustItem{
    padding: 8px 10px;
    font-size: .86rem;
  }
  .heroDivider{
    height: 140px;
    margin-top: -92px;
  }
  .ring--a{right:-220px}

  /* Orbits más abajo en móvil */
  .heroOrbits{right: 2%; top: 62%; width: 340px; height: 340px; opacity:.95}
  .orbitPlanet{width: 180px; height: 180px}
  .orbit--b{inset: 15%}

  .footer{
    padding: 28px 0;
  }
  .footer__inner{
    justify-content:center;
    text-align:center;
    flex-wrap:wrap;
    flex-direction: column;
    gap: 14px;
  }
  .footer__left{
    flex-direction:column;
    gap: 6px;
  }
  .footer__logo{
    width: 126px;
    height: 126px;
  }
  .copy,
  .copy--left{
    text-align: center;
    max-width: 100%;
  }
  .footer__links{
    width: 100%;
    justify-content: center;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .footer__links a{
    text-align: center;
    padding: 8px 6px;
  }
  .footer__right{
    align-items:center;
    margin-left:0;
  }
  .payMethods{align-items:center}
  .payMethods__list{justify-content:center}
}

@media (max-width: 820px){
  .leadForm{grid-template-columns: 1fr}
}
@media (max-width: 560px){
  :root{
    --header-offset: 84px;
  }
  .hero--stream{
    padding-bottom: 20px;
  }
  .hero__content{
    padding: 84px 0 38px;
    width: min(1120px, 94%);
    gap: 10px;
  }
  .hero__title{
    font-size: clamp(1.55rem, 8.2vw, 2rem);
    margin-bottom: 10px;
  }
  .hero__subtitle{
    font-size: .92rem;
    margin-bottom: 12px;
  }
  .heroKickerCarousel{
    padding: 6px 10px;
    height: 36px !important;
  }
  .heroKickerCarousel__track{height: 36px;}
  .heroKickerCarousel__item{
    height: 36px;
    line-height: 36px;
    font-size: .82rem;
  }
  .heroCarousel{
    height: 172px;
    border-radius: 12px;
  }
  .heroCarousel__caption{
    font-size: .78rem;
    padding: 5px 8px;
  }
  .hero__actions .btn{
    padding: 10px 12px;
    font-size: .93rem;
  }
  .hero__trust{
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .heroRing{
    display: block;
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    --ringW: min(340px, 90vw);
    --ringH: min(230px, 58vw);
    --ringZ: 120px;
    margin: 14px auto 0;
    z-index: 3;
    filter: drop-shadow(0 20px 50px rgba(0,0,0,.5));
  }
  .heroDivider{
    height: 110px;
    margin-top: -74px;
  }

  .products{grid-template-columns: 1fr}
  .platformsHead{
    flex-direction:column;
    align-items:flex-start;
    gap: 10px;
    margin-top: 18px;
  }
  .platformsHead h3{
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.2;
  }
  .platformsHead .btn{
    padding: 10px 14px;
    font-size: .95rem;
  }
  .platformsGrid{grid-template-columns: 1fr}
  .platformCard{
    padding: 14px 12px;
    min-height: 0;
    gap: 6px;
  }
  .platformCard img{
    width: min(160px, 58vw);
    height: 74px;
    max-width: none;
    max-height: none;
    object-fit: contain;
  }
  .platformMeta{
    font-size: .84rem;
    gap: 1px;
  }
  .platformMeta strong{
    font-size: 1.05rem;
  }
  .stars{
    font-size: .78rem;
    letter-spacing: .8px;
  }
  .movieShowcase{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: none;
    gap: 10px;
  }
  .movieCard,
  .movieCard--wide,
  .movieCard--tall,
  .movieCard--mid,
  .movieCard--small,
  .movieCard--mid2,
  .movieCard--large{
    grid-area: auto;
    min-height: 180px;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  #como .how{
    justify-items: center;
  }
  #como .howCard{
    margin-inline: auto;
  }
  #como .cta{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Orbits más discretos en pantallas muy pequeñas */
  .heroOrbits{right: 0; top: 66%; width: 280px; height: 280px}
  .orbitPlanet{width: 150px; height: 150px}
  .orbit__item{width: 78px; height: 52px}

  .footer{
    padding: 24px 0 28px;
  }
  .footer__inner{
    gap: 12px;
  }
  .footer__logo{
    width: 102px;
    height: 102px;
  }
  .footer__links{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .footer__links a{
    width: 100%;
    text-decoration-thickness: 1.5px;
  }
  .payMethods__title{
    font-size: .95rem;
  }
  .payLogo{
    width: 32px;
    height: 32px;
  }
}



/* =============================
   ORBITAS 3D (logos girando)
============================= */

.heroOrbits{
  position:absolute;
  right: 5%;
  top: 50%;
  width: 420px;
  height: 420px;
  transform: translateY(-50%);
  perspective: 1200px;
  z-index: 4;
  pointer-events:none;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));
}

/* Planeta central */
.orbitPlanet{
  position:absolute;
  left: 50%;
  top: 50%;
  width: 210px;
  height: 210px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background:
    radial-gradient(closest-side at 35% 30%, rgba(120,220,255,.35), transparent 60%),
    radial-gradient(closest-side at 70% 60%, rgba(0,140,255,.25), transparent 62%),
    radial-gradient(closest-side, rgba(0,40,70,.9), rgba(0,18,30,1));
  box-shadow:
    inset 0 0 24px rgba(0,0,0,.55),
    0 0 40px rgba(0,150,255,.25);
}
.orbitPlanet__glow{
  position:absolute;
  inset:-8%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0,200,255,.35), rgba(0,200,255,0) 70%);
  filter: blur(2px);
}
.orbitPlanet__grid{
  position:absolute;
  inset:8%;
  border-radius: 999px;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,220,255,.35) 0 1px,
      rgba(0,0,0,0) 1px 14px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,220,255,.25) 0 1px,
      rgba(0,0,0,0) 1px 14px
    );
  opacity:.65;
  mask-image: radial-gradient(circle, #000 60%, transparent 75%);
}

/* Cada órbita */
.orbit{
  position:absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: orbitSpin 26s linear infinite;
}
.orbit--b{
  inset: 12%;
  animation-duration: 34s;
  animation-direction: reverse;
  transform: rotateX(65deg) rotateZ(8deg);
  opacity: .95;
}

/* Giro principal */
@keyframes orbitSpin{
  from{ transform: rotateY(0deg) rotateZ(0deg); }
  to{ transform: rotateY(360deg) rotateZ(360deg); }
}

/* Items */
.orbit__item{
  position:absolute;
  left: 50%;
  top: 50%;
  width: 90px;
  height: 60px;
  border-radius: 14px;
  background: rgba(10,12,16,.35);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  transform-style: preserve-3d;
  box-shadow:
    0 16px 40px rgba(0,0,0,.35),
    0 0 24px rgba(255,122,0,.12);
  animation: floatLogo 6s ease-in-out infinite;
}
.orbit__item img{
  max-width: 78%;
  max-height: 70%;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

/* Flotación */
@keyframes floatLogo{
  0%,100%{ transform: translate(-50%,-50%) translateZ(140px); }
  50%{ transform: translate(-50%,-54%) translateZ(170px); }
}

/* Posiciones círculo (5 items) */
.orbit__item--1{ transform: translate(-50%,-50%) rotateY(0deg) translateZ(150px); }
.orbit__item--2{ transform: translate(-50%,-50%) rotateY(72deg) translateZ(150px); }
.orbit__item--3{ transform: translate(-50%,-50%) rotateY(144deg) translateZ(150px); }
.orbit__item--4{ transform: translate(-50%,-50%) rotateY(216deg) translateZ(150px); }
.orbit__item--5{ transform: translate(-50%,-50%) rotateY(288deg) translateZ(150px); }

/* Órbita B: 4 items */
.orbit--b .orbit__item--1{ transform: translate(-50%,-50%) rotateY(0deg) translateZ(130px); }
.orbit--b .orbit__item--2{ transform: translate(-50%,-50%) rotateY(90deg) translateZ(130px); }
.orbit--b .orbit__item--3{ transform: translate(-50%,-50%) rotateY(180deg) translateZ(130px); }
.orbit--b .orbit__item--4{ transform: translate(-50%,-50%) rotateY(270deg) translateZ(130px); }


.hero__media { z-index: 0; }
.hero__overlay { z-index: 1; }
.hero__swirl { z-index: 2; }
.heroOrbits { z-index: 4; }
.hero__content { z-index: 5; }


/* =========================================
   RAYAS ENERGÍA TIPO JUEGO (CULEBRA)
   - No gira
   - Avanza en diagonal como onda
========================================= */

.hero--stream{
  position: relative;
  overflow: hidden;
  background: #070A12;
  min-height: 90vh;
}

/* Overlay para legibilidad */
.hero__overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25) 60%, rgba(0,0,0,.55));
  z-index: 1;
}

/* Capa de energía */
.hero__swirl{
  position:absolute;
  inset:-20%;
  z-index: 2;
  pointer-events:none;

  /* Rayas base + brillo */
  background:
    /* brillo suave */
    radial-gradient(900px 500px at 40% 45%, rgba(255,170,0,.22), transparent 60%),
    radial-gradient(700px 400px at 75% 35%, rgba(0,170,255,.10), transparent 60%),

    /* RAYAS NEON */
    repeating-linear-gradient(
      115deg,
      rgba(255,160,0,.00) 0 22px,
      rgba(255,160,0,.28) 22px 30px,
      rgba(255,220,140,.10) 30px 38px,
      rgba(255,160,0,.00) 38px 70px
    );

  filter: blur(.6px) saturate(1.25);
  opacity: .9;
  mix-blend-mode: screen;

  /* Animaciones: desplazamiento + onda */
  animation:
    stripesShift 10s linear infinite,
    stripesWave  3.2s ease-in-out infinite;
}

/* 1) Las rayas “caminan” (se desplazan) */
@keyframes stripesShift{
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 0 0, 0 0, 900px 0; }
}

/* 2) Efecto “culebra” (onda) */
@keyframes stripesWave{
  0%,100% { transform: translateY(0px) skewX(-6deg); }
  50%     { transform: translateY(-18px) skewX(6deg); }
}

/* Deja contenido arriba */
.hero__content{ position:relative; z-index:5; }
.heroOrbits{ position:absolute; z-index:4; }


/* =========================================================
   HERO ORBITS - mejoras PRO (movimiento + accesibilidad)
   - Hover pausa
   - Prefer-reduced-motion
   - Mejor brillo/hover
========================================================= */
.heroOrbits { perspective: 900px; transform-style: preserve-3d; }
.heroOrbits .orbit,
.heroOrbits .orbitItem { will-change: transform; }

.heroOrbits:hover .orbit { animation-play-state: paused; }
.heroOrbits:hover .orbitItem { animation-play-state: paused; }

.orbitItem{
  animation: orbitFloat 6.5s ease-in-out infinite;
}
.orbitItem:nth-child(2n){ animation-duration: 7.2s; }
.orbitItem:nth-child(3n){ animation-duration: 8.1s; }
.orbitItem:nth-child(4n){ animation-duration: 6.1s; }

.orbitItem:hover{
  transform: translate(-50%, -50%) scale(1.10) rotateZ(0.01deg);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

@keyframes orbitFloat{
  0%,100%{ transform: translate(-50%, -50%) translateZ(0) }
  50%{ transform: translate(-50%, -50%) translateZ(14px) }
}

@media (prefers-reduced-motion: reduce){
  .orbit, .orbitItem { animation: none !important; }
}



/* =========================================================
   HERO - ANILLO 3D DE PLATAFORMAS (ESTILO PRO)
   Cambia tamaño rápido: --ringW / --ringH / --ringZ
========================================================= */
.heroRing{
  --ringW: min(620px, 48vw);
  --ringH: min(460px, 36vw);
  --ringZ: 260px;                /* profundidad (radio del anillo) */
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: var(--ringW);
  height: var(--ringH);
  margin-left: 0;
  margin-top: 0;
  pointer-events: none;
  z-index: 2;          /* arriba del planeta */
  filter: drop-shadow(0 40px 90px rgba(0,0,0,.55));
}
/* Aros de energía (estilo galaxia) */
.ringGlow{
  position:absolute;
  inset:-8% -10%;
  border-radius: 999px;
  border: 0;
  outline: 2px solid rgba(255,255,255,.28);
  outline-offset: -2px;
  background:
    conic-gradient(from 120deg,
      rgba(255,110,220,.9),
      rgba(120,80,255,.8),
      rgba(90,180,255,.8),
      rgba(255,120,40,.75),
      rgba(255,110,220,.9)
    );
  -webkit-mask: radial-gradient(closest-side, transparent 94%, #000 96%);
  mask: radial-gradient(closest-side, transparent 94%, #000 96%);
  box-shadow:
    0 0 50px rgba(255,110,220,.75),
    0 0 90px rgba(90,180,255,.75),
    0 0 140px rgba(255,120,40,.6);
  filter: blur(0);
  opacity:1;
  transform: rotate(-6deg);
  animation: ringGlowSpin 16s linear infinite;
}
.ringGlow--b{
  inset: -2% -4%;
  outline: 2px solid rgba(255,255,255,.22);
  background:
    conic-gradient(from 220deg,
      rgba(120,200,255,.85),
      rgba(255,120,220,.8),
      rgba(120,80,255,.75),
      rgba(120,200,255,.85)
    );
  -webkit-mask: radial-gradient(closest-side, transparent 94%, #000 96%);
  mask: radial-gradient(closest-side, transparent 94%, #000 96%);
  box-shadow:
    0 0 40px rgba(120,200,255,.65),
    0 0 80px rgba(255,120,220,.55);
  opacity:.9;
  transform: rotate(8deg);
  animation: ringGlowSpin 22s linear infinite reverse;
}

@keyframes ringGlowSpin{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}


/* Cilindro 3D decorativo */
.heroCylinder{
  position:absolute;
  left: 10%;
  right: auto;
  top: 62%;
  width: 140px;
  height: 220px;
  transform: translateY(-50%);
  border-radius: 999px;
  box-shadow:
    inset 0 0 24px rgba(255,255,255,.12),
    inset 0 -18px 26px rgba(0,0,0,.55),
    0 30px 70px rgba(0,0,0,.55);
  z-index: 1;
  opacity: .9;
  animation: cylinderSpin 10s linear infinite;
  transform-style: preserve-3d;
}

/* cilindro en header (reemplaza botón WhatsApp) */
.headerCylinder{
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  transform: translateY(10px);
  width: 80px;
  height: 80px;
  margin-left: 6px;
  margin-top: 0;
  margin-bottom: 0;
  animation-duration: 8s;
  align-self: center;
}
.headerCylinder::before,
.headerCylinder::after{
  height: 14px;
}

/* ajustar caras para el tamaño mini del header */
.headerCylinder .heroCylinder__face{
  width: 58px;
  height: 70px;
  border-radius: 10px;
  border-width: 1px;
  background-size: 24px 24px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(26px);
}
.headerCylinder .heroCylinder__face--1{ transform: translate(-50%, -50%) rotateY(0deg) translateZ(26px); }
.headerCylinder .heroCylinder__face--2{ transform: translate(-50%, -50%) rotateY(45deg) translateZ(26px); }
.headerCylinder .heroCylinder__face--3{ transform: translate(-50%, -50%) rotateY(90deg) translateZ(26px); }
.headerCylinder .heroCylinder__face--4{ transform: translate(-50%, -50%) rotateY(135deg) translateZ(26px); }
.headerCylinder .heroCylinder__face--5{ transform: translate(-50%, -50%) rotateY(180deg) translateZ(26px); }
.headerCylinder .heroCylinder__face--6{ transform: translate(-50%, -50%) rotateY(225deg) translateZ(26px); }
.headerCylinder .heroCylinder__face--7{ transform: translate(-50%, -50%) rotateY(270deg) translateZ(26px); }
.headerCylinder .heroCylinder__face--8{ transform: translate(-50%, -50%) rotateY(315deg) translateZ(26px); }
.heroCylinder::before,
.heroCylinder::after{
  content:"";
  position:absolute;
  left: 8%;
  width: 84%;
  height: 28px;
  border-radius: 999px;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.35), rgba(255,255,255,.08) 60%, rgba(0,0,0,.45) 100%);
  box-shadow:
    inset 0 0 10px rgba(255,255,255,.2),
    0 10px 20px rgba(0,0,0,.4);
}
.heroCylinder::before{ top: -6px; }
.heroCylinder::after{ bottom: -6px; opacity:.8; }

@keyframes cylinderSpin{
  0%{ transform: translateY(-50%) rotateY(0deg); }
  100%{ transform: translateY(-50%) rotateY(360deg); }
}

/* Caras del cilindro (8) */
.heroCylinder__face{
  position:absolute;
  top: 50%;
  left: 50%;
  width: 110px;
  height: 180px;
  transform-style: preserve-3d;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 35%),
    linear-gradient(180deg, rgba(18,18,20,.98), rgba(6,6,8,.95));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 16px 40px rgba(0,0,0,.55),
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 -12px 18px rgba(0,0,0,.65);
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(70px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 64px 64px;
}

.heroCylinder__face--1{ transform: translate(-50%, -50%) rotateY(0deg) translateZ(70px); background-image: url("../assets/products/netflix.png"); }
.heroCylinder__face--2{ transform: translate(-50%, -50%) rotateY(45deg) translateZ(70px); background-image: url("../assets/products/disney.png"); }
.heroCylinder__face--3{ transform: translate(-50%, -50%) rotateY(90deg) translateZ(70px); background-image: url("../assets/products/prime.png"); }
.heroCylinder__face--4{ transform: translate(-50%, -50%) rotateY(135deg) translateZ(70px); background-image: url("../assets/products/max.svg"); }
.heroCylinder__face--5{ transform: translate(-50%, -50%) rotateY(180deg) translateZ(70px); background-image: url("../assets/products/crunchyroll.png"); }
.heroCylinder__face--6{ transform: translate(-50%, -50%) rotateY(225deg) translateZ(70px); background-image: url("../assets/products/vix.png"); }
.heroCylinder__face--7{ transform: translate(-50%, -50%) rotateY(270deg) translateZ(70px); background-image: url("../assets/products/canva.png"); }
.heroCylinder__face--8{ transform: translate(-50%, -50%) rotateY(315deg) translateZ(70px); background-image: url("../assets/products/netflix.png"); }

/* halo luminoso tipo “anillo” */
.ringGlow{
  position:absolute;
  inset: -10% -14%;
  border-radius: 999px;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.08), transparent 60%),
    conic-gradient(from 120deg,
      rgba(255,122,0,.0),
      rgba(255,122,0,.32),
      rgba(0,204,35,.24),
      rgba(130,80,255,.22),
      rgba(255,122,0,.34),
      rgba(255,122,0,.0)
    );
  filter: blur(26px);
  opacity: .95;
  transform: rotate(-14deg);
}

/* escena 3D */
.ringScene{
  position:absolute;
  inset: 0;
  display:grid;
  place-items:center;
  perspective: 1100px;
  perspective-origin: 50% 45%;
}

/* carrusel */
.ringCarousel{
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: ringSpin 16s linear infinite;
}

/* leve “inclinación” para que se vea 3D */
.ringCarousel{
  transform: rotateX(18deg) rotateZ(-16deg);
}

/* cada item en el anillo */
.ringItem{
  position:absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform:
    rotateY(calc(var(--i) * (360deg / 7)))
    translateZ(var(--ringZ))
    rotateY(calc(var(--i) * (-360deg / 7)))
    translate(-50%, -50%);
}

/* pill/cápsula */
.ringPill{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 16px 20px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 35%),
    linear-gradient(180deg, rgba(36,42,64,.98), rgba(10,14,24,.9));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 26px 70px rgba(0,0,0,.68),
    inset 0 4px 0 rgba(255,255,255,.26),
    inset 0 -18px 26px rgba(0,0,0,.7),
    0 0 16px rgba(255,160,80,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(1px);
  position: relative;
}

/* colores distintos por cápsula */
/* Paleta “fina” por marca (brillante) */
.ringItem:nth-child(1) .ringPill{ /* Netflix: negro con brillo rojo */
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 35%),
    linear-gradient(180deg, rgba(18,18,20,.98), rgba(6,6,8,.95));
  box-shadow:
    0 22px 60px rgba(0,0,0,.65),
    inset 0 3px 0 rgba(255,255,255,.18),
    inset 0 -16px 26px rgba(0,0,0,.75),
    0 0 22px rgba(255,40,40,.35);
}
.ringItem:nth-child(2) .ringPill{ /* Disney+: azul/violeta */
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 35%),
    linear-gradient(180deg, rgba(70,120,255,.98), rgba(25,40,140,.92));
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 20px rgba(80,140,255,.45);
}
.ringItem:nth-child(3) .ringPill{ /* Prime: azul eléctrico */
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 35%),
    linear-gradient(180deg, rgba(70,200,255,.98), rgba(15,90,150,.92));
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 20px rgba(70,200,255,.5);
}
.ringItem:nth-child(4) .ringPill{ /* MAX: morado */
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 35%),
    linear-gradient(180deg, rgba(160,90,255,.98), rgba(80,30,170,.92));
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 22px rgba(170,100,255,.5);
}
.ringItem:nth-child(5) .ringPill{ /* Crunchy: naranja */
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 35%),
    linear-gradient(180deg, rgba(255,170,70,.98), rgba(170,80,20,.92));
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 18px rgba(255,170,70,.45);
}
.ringItem:nth-child(6) .ringPill{ /* Vix: verde transparente */
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 35%),
    linear-gradient(180deg, rgba(90,255,170,.85), rgba(20,140,90,.75));
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 18px rgba(90,255,170,.45);
}
.ringItem:nth-child(7) .ringPill{ /* Canva: blanco rosado */
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 35%),
    linear-gradient(180deg, rgba(255,220,245,.96), rgba(210,160,220,.9));
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 20px rgba(255,200,235,.55);
}
.ringPill::after{
  content:"";
  position:absolute;
  inset: 7px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 14px rgba(255,255,255,.08);
  pointer-events:none;
}
/* efecto “cubo 3D” */
.ringPill::before{
  content:"";
  position:absolute;
  left: -10px;
  right: -10px;
  top: -12px;
  bottom: -12px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0) 30%),
    linear-gradient(225deg, rgba(0,0,0,.45), rgba(0,0,0,0) 50%);
  transform: translateZ(-1px);
  filter: blur(.4px);
  opacity: .98;
  pointer-events:none;
}

.ringPill img{
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}

.ringPill span{
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
  opacity: .95;
}

/* “respirar” suave para que no se vea plano */
.ringScene{
  animation: ringFloat 6s ease-in-out infinite;
}

@keyframes ringSpin{
  0%   { transform: rotateX(14deg) rotateZ(-8deg) rotateY(0deg); }
  100% { transform: rotateX(14deg) rotateZ(-8deg) rotateY(360deg); }
}
@keyframes ringFloat{
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-10px); }
}

/* responsive: en móvil baja el anillo y reduce */
@media (max-width: 920px){
  .heroRing{
    position: relative;
    --ringW: min(520px, 86vw);
    --ringH: min(380px, 62vw);
    --ringZ: 190px;
    margin: 26px auto 0;
  }
}

/* si el usuario prefiere menos animación */
@media (prefers-reduced-motion: reduce){
  .ringCarousel, .ringScene{ animation: none !important; }
}

/* Productos: ajuste rapido para celular */
@media (max-width: 768px){
  .page-productos .header__inner{
    padding: 10px 0;
  }

  .page-productos .brand__logo{
    width: 64px;
    height: 64px;
    transform: scale(1.15);
  }

  .page-productos #productos{
    padding-top: 30px;
    padding-bottom: 42px;
  }

  .page-productos #productos .section__head h2{
    font-size: clamp(1.45rem, 7vw, 1.8rem);
  }

  .page-productos #productos .filters{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .page-productos #productos .chip{
    width: 100%;
    text-align: center;
    padding: 10px 8px;
    font-size: .92rem;
  }

  .page-productos #productos .products{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .page-productos #productos .product__img{
    min-height: 150px;
  }

  .page-productos #productos .product__actions{
    flex-direction: column;
  }

  .page-productos #productos .product__actions .btn{
    width: 100%;
  }
}

@media (max-width: 420px){
  .page-productos #productos .filters{
    grid-template-columns: 1fr;
  }

  .page-productos #productos .product__img{
    min-height: 132px;
  }
}