/* =========================================
   PlayTV — styles.css (ordenado + mobile fix)
   ========================================= */

/* ------------------
   Variables globales
   ------------------ */
:root{
  --bg:#0b0b0d;        /* base dark */
  --bg-2:#0a0a0d;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.65);
  --brand:#ff3b3b;
  --brand-2:#ff6b6b;
}

/* -----------
   Reset/base
   ----------- */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background: #130000;
  color:var(--text);
  font:12px/1.65 'Inter',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color-scheme: dark;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 20px}

/* =========================================
   THEME — Fondo “Vambe rojo”
   (SE RESPETAN EXACTAMENTE TUS PARÁMETROS)
   ========================================= */
body.theme-vambe-red{
  position:relative;
  isolation:isolate;
}
body.theme-vambe-red::before{
  content:"";
  position:fixed; inset:0;
  z-index:-1; pointer-events:none;
  background: radial-gradient(circle at 0% 0%, #48000645 0, rgba(255, 97, 111, 0) 40%), radial-gradient(circle at 100% 0%, #4f000042 0, rgba(255, 22, 59, 0) 45%), radial-gradient(circle at 50% 100%, #6f000038 0, #000000 48%, #02001c 100%);
}
/* overlay de grano sutil (opcional estilo Vambe) */
body.theme-vambe-red::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter>\
<rect width='100%' height='100%' filter='url(#n)' opacity='.25'/></svg>");
  opacity:.04; mix-blend-mode:overlay;
}
/* Neutraliza restos previos de fondo que estorben */
.backdrop, .backdrop::before, .backdrop::after{display:none !important}

/* ===========================
   Header / Navegación / CTAs
   =========================== */
header{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(180deg, rgb(0 0 0), rgb(0 0 0 / 61%) 60%, transparent);
  backdrop-filter:blur(6px);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0; background: linear-gradient(180deg, #000000, #21050b17);}
.logo img{height:60px}
.nav .cta{display:flex;gap:10px}

/* --- Botones --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:5px 16px;border-radius:50px;
  border:1px solid #2a2a2f;background:#15151a;color:#fff;
  transition:all .2s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #00000070, inset 0 0 0 1px #00000060}
.btn-primary{background:var(--brand);border-color:#ff4e4e;}
.btn-outline{background:#0e0e12;border-color:#2a2a2f}
.btn-pill{border-radius:999px}

/* ===========================
   Hero
   =========================== */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,45,45,.12); color:#fff;
  padding:8px 12px;border:1px solid rgba(255,45,45,.25);border-radius:999px;
  font-weight:600;font-size:12px;letter-spacing:.3px;text-transform:uppercase;
}
.title{font-size:48px;line-height:1.05;margin:14px 0 10px;letter-spacing:-.02em}
.sub{color:var(--muted);max-width:56ch}
.hero-ctas{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.device-note{margin-top:10px;color:#c4c7ce;font-size:14px}

.hero{padding:10px 0 0; position:relative;}
.hero-grid{
  display:grid; gap:32px; align-items:center;
  grid-template-columns:1.2fr .8fr;
}
.hero-grid > div:first-child{position:relative; z-index:1}

/* ===========================
   Secciones genéricas
   =========================== */
.section{padding:64px 0;}
.h2{font-size:28px;margin:0 0 12px}
.muted{color:var(--muted)}

/* --------- Cards (FAQ, etc.) --------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  background:#121217;border:1px solid rgba(255,255,255,.08);
  border-radius:18px;padding:20px;box-shadow:0 6px 26px #00000066;
}
.card h3{margin:4px 0 8px;font-size:20px}
.card p{color:#c4c7ce;margin:0}

/* ===========================
   Dispositivos (grid + slider)
   =========================== */
.devices{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.device-card{
  border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:14px;
  text-align:center;transition:transform .2s ease;
}
.device-card:hover{transform:translateY(-2px)}
.device-card .device-img{aspect-ratio:9/9;display:grid;place-items:center;margin:0 0 10px}
.device-card h4{margin:8px 0 4px; font-size: 23px}

/* ===========================
   Galería (grid + slider)
   =========================== */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery img{border-radius:14px;border:1px solid rgba(255,255,255,.08)}

/* ===========================
   Pricing (botón justificado)
   =========================== */
.pricing{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.plan{
  display:flex;flex-direction:column;height:100%;
  background: linear-gradient(180deg, rgb(0 0 0 / 66%), rgb(0 0 0 / 0%));
  border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:22px;position:relative;overflow:hidden;
}
.plan.popular::after{
  content:"POPULAR";position:absolute;top:14px;right:-36px;transform:rotate(35deg);
  background:var(--brand);color:#fff;font-weight:800;letter-spacing:.8px;padding:6px 46px;font-size:12px;
}
.plan h1{margin:0 0 8px;font-size:22px}
.price{font-size:34px;font-weight:800;margin:6px 0 8px}
.usd{font-size:12px;opacity:.7;margin-left:6px;font-weight:600}
.features{list-style:none;padding:0;margin:0 0 16px}
.features li{color:#cfd2d8;margin:6px 0;display:flex;gap:8px;align-items:center}
.dot{display:inline-block;width:8px;height:8px;background:var(--brand);border-radius:999px;flex:0 0 8px}
.plan .btn{margin-top:auto;width:100%;justify-content:center}

/* Segmentador 4/6 dispositivos */
.segmented{
  display:inline-flex;border:1px solid rgba(255,255,255,.12);
  border-radius:999px;overflow:hidden;background:#101014;
}
.segmented button{
  padding:10px 14px;border:0;background:transparent;color:#cfd2d8;cursor:pointer;font-weight:600;
}
.segmented button.active{background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#fff}
.segmented button:hover{filter:brightness(1.05)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* ===========================
   Modal
   =========================== */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.65);
  display:none;align-items:center;justify-content:center;padding:20px;z-index:50;
}
.modal.open{display:flex}
.modal .box{
  max-width:900px;width:100%;background:#121217;border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:18px;
}
.modal .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ===========================
   CTA bar / Footer
   =========================== */
.cta-bar{
  position:sticky; bottom:0;
  background: linear-gradient(180deg, rgb(33 1 1 / 27%), rgb(0 0 0));
  backdrop-filter:blur(8px);
  border-top:1px solid #1e1e25;
  padding:12px 0;
  z-index:1;
}
.cta-wrap{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-left{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.footer-logo{height:60px;opacity:.9}
footer{padding:28px 0;color:#9aa0a6;font-size:13px;text-align:center; background: black;}

/* Centrado global del bloque (logo+botón) en CTA/footer */
.cta-wrap > div:first-child{
  justify-content: center !important;   /* centra logo + botón */
  gap: 10px;
}
.cta-wrap > div:first-child .btn{
  margin: 0 auto;                       /* asegura el centrado del botón */
}

/* ====================================================
   RESPONSIVE — SOLO AÑADIDOS (no cambian tus valores)
   ==================================================== */

/* <= 1024px: grids principales */
@media (max-width:1024px){
  .devices{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:1fr 1fr}
}

/* <= 900px: galería 2 columnas */
@media (max-width:900px){
  .gallery{grid-template-columns:repeat(2,1fr)}
}

/* <= 640px: hero (TV arriba), header centrado, galería slider,
   cards 1 columna, pricing 1 columna, CTA/footer centrados */
@media (max-width:640px){
  /* HERO: TV ARRIBA, TEXTO ABAJO */
  .hero-grid{grid-template-columns:1fr; gap:20px}
  .hero-art-card{grid-column:1; grid-row:1; z-index:0; margin:-25px 0 -55px 0}
  .hero-grid > div:first-child{grid-column:1; grid-row:2; z-index:1}
  .title{font-size:38px}

  /* HEADER: logo centrado + botones bajo el logo */
  .nav{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:12px 0;
    text-align:center;
  }
  .logo img{height:50px; margin-bottom:10px}
  .nav .cta{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
  }

  /* DISPOSITIVOS: slider horizontal */
  .devices{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
  }
  .devices::-webkit-scrollbar{display:none}
  .device-card{flex:0 0 85%; scroll-snap-align:center}

  /* GALERÍA: slider horizontal */
  .gallery{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .gallery::-webkit-scrollbar{display:none}
  .gallery img{flex:0 0 92%; scroll-snap-align:center}

  /* CARDS / FAQ: 1 columna */
  .cards{grid-template-columns:1fr}

  /* PRICING: 1 columna */
  .pricing{grid-template-columns:1fr}

  /* CTA BAR + FOOTER: logotipo y botón centrados (refuerzo) */
  .cta-wrap{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  .cta-left{
    width:100%;
    justify-content:center;
  }
  .cta-left img,
  .cta-wrap .footer-logo{
    display:block;
    margin:0 auto;
  }
}


/* =========================================
   CAPA DE PARTÍCULAS EN MOVIMIENTO
   (no toca layout, solo background)
   ========================================= */

body.theme-vambe-red::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;

  /* 2 capas de partículas + grano */
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.32) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 2px),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter>\
<rect width='100%' height='100%' filter='url(#n)' opacity='3.25'/></svg>");

  background-size:
    260px 260px,   /* grid de puntos grandes */
    180px 180px,   /* grid de puntos más densos */
    200px 200px;   /* grano */

  background-position:
    0 0,
    80px 40px,
    0 0;

  opacity: 3.12;
  mix-blend-mode: screen;

  /* movimiento suave tipo “espacio” */
  animation: playtvParticles 40s linear infinite;
}

/* Animación de las partículas (loop muy suave) */
@keyframes playtvParticles{
  0%{
    transform: translate3d(0,0,0);
    background-position:
      0 0,
      80px 40px,
      0 0;
  }
  50%{
    transform: translate3d(-40px,-60px,0);
    background-position:
      -60px -40px,
      40px 20px,
      0 0;
  }
  100%{
    transform: translate3d(0,0,0);
    background-position:
      0 0,
      80px 40px,
      0 0;
  }
}

/* Un poco menos intenso en mobile */
@media (max-width:640px){
  body.theme-vambe-red::after{
    opacity:4.08;
    animation-duration: 55s;
  }
}