/* =========================================================
   TEMA COMPARTIDO — estilo "streaming" oscuro
   Cada página define solo su color en css/<pagina>.css:
     --accent, --accent-2, --accent-rgb
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@600;700;800;900&display=swap');

:root{
  --accent:#FF6A00;
  --accent-2:#FF9A3D;
  --accent-rgb:255,106,0;

  --bg:#07080C;
  --bg-2:#0D0F15;
  --card:#12141B;
  --card-2:#181B24;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --text:#F2F3F7;
  --muted:#9AA0AE;
  --ok:#22C58B;

  --radius:20px;
  --radius-sm:12px;
  --shadow:0 24px 60px rgba(0,0,0,.45);
  --display:"Outfit","Inter",system-ui,sans-serif;
  --header-h:74px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  padding-top:var(--header-h);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:rgba(var(--accent-rgb),.35); }

.container{ width:min(1180px, 92%); margin:0 auto; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:8px;
}

/* =================== HEADER =================== */
.topbar{
  position:fixed; inset:0 0 auto 0;
  z-index:9999;
  background:rgba(7,8,12,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}

.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h); gap:18px;
}

.logo img{ height:40px; width:auto; }

.menu{ display:flex; align-items:center; gap:6px; }

.menu-link{
  position:relative;
  color:var(--muted);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  letter-spacing:.4px;
  padding:10px 16px;
  border-radius:999px;
  transition:color .2s ease, background .2s ease;
}
.menu-link:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.menu-link.active{
  color:#fff;
  background:rgba(var(--accent-rgb),.14);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.35);
}

.menu-btn{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-radius:12px;
  font-size:18px;
  cursor:pointer;
  transition:background .2s ease;
}
.menu-btn:hover{ background:rgba(255,255,255,.09); }

.mobile-menu{
  display:none;
  position:fixed;
  top:var(--header-h); left:0; width:100%;
  max-height:calc(100vh - var(--header-h));
  overflow:auto;
  z-index:9998;
  background:rgba(10,11,16,.98);
  border-bottom:1px solid var(--line);
  padding:10px 0 14px;
}
.mobile-menu .menu-link{ display:block; padding:14px 18px; margin:4px 12px; border-radius:12px; }
.mobile-menu.open::before{
  content:""; position:fixed; inset:var(--header-h) 0 0 0;
  background:rgba(0,0,0,.5); z-index:-1;
}

@media (max-width:860px){
  .menu{ display:none; }
  .menu-btn{ display:inline-flex; }
  .mobile-menu.open{ display:block; }
}

/* =================== HERO =================== */
.hero{
  position:relative;
  min-height:clamp(520px, calc(100vh - var(--header-h)), 760px);
  display:grid;
  background:url("../assets/fondo2.png") center/cover no-repeat;
  overflow:hidden;
  isolation:isolate;
}

.hero-overlay{
  position:relative;
  display:grid; place-items:center;
  text-align:center;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(7,8,12,.55), rgba(7,8,12,.88) 70%),
    linear-gradient(180deg, rgba(7,8,12,.35) 0%, rgba(7,8,12,.6) 55%, var(--bg) 100%);
}
.hero-overlay::after{
  content:""; position:absolute; inset:auto 0 0 0; height:45%;
  background:radial-gradient(50% 80% at 50% 100%, rgba(var(--accent-rgb),.22), transparent 70%);
  pointer-events:none;
}

.hero-content{
  position:relative; z-index:1;
  width:min(920px, 92%);
  display:grid; justify-items:center; gap:clamp(10px, 2.2vh, 18px);
  padding:clamp(28px, 6vh, 64px) 0;
}

.hero-app{
  width:88px; height:88px;
  object-fit:contain;
  padding:12px;
  border-radius:24px;
  background:rgba(255,255,255,.95);
  box-shadow:0 0 0 6px rgba(255,255,255,.06), 0 20px 50px rgba(var(--accent-rgb),.35);
}

.hero-title{
  margin:0;
  font-family:var(--display);
  font-size:clamp(36px, min(6vw, 8.5vh), 72px);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.025em;
  color:#fff;
  text-wrap:balance;
}
.hero-title span{
  display:block;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.hero-subtitle{
  margin:0;
  max-width:680px;
  color:rgba(242,243,247,.78);
  font-size:clamp(16px, 1.6vw, 19px);
  font-weight:500;
}

.hero-actions{
  margin-top:10px;
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
}

.hero-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width:220px;
  padding:16px 26px;
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 14px 34px rgba(var(--accent-rgb),.38);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.hero-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 44px rgba(var(--accent-rgb),.5); }
.hero-btn + .hero-btn{
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px var(--line-2);
  backdrop-filter:blur(8px);
}
.hero-btn + .hero-btn:hover{ background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }

/* =================== SECCIONES =================== */
.section-title{
  margin:0 0 14px;
  text-align:center;
  font-family:var(--display);
  font-size:clamp(28px, 3.4vw, 42px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
  color:#fff;
  text-wrap:balance;
}
.section-title::after{
  content:""; display:block;
  width:56px; height:4px; margin:16px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}

.section-text{
  max-width:760px;
  margin:0 auto 40px;
  text-align:center;
  color:var(--muted);
  font-size:16px;
}
.section-text strong{ color:var(--text); font-weight:600; }

/* Texto informativo */
.seo-intro, .seo-content{ padding:56px 0 8px; }
.seo-intro .container, .seo-content .container{ max-width:900px; }
.seo-content .section-title{ margin-bottom:28px; }
.seo-intro p, .seo-content p{
  margin:0 0 14px;
  color:var(--muted);
  font-size:16.5px;
  line-height:1.8;
}
.seo-intro strong, .seo-content strong{ color:var(--text); font-weight:600; }
.seo-intro a, .seo-content a{
  color:var(--accent);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(var(--accent-rgb),.4);
}
.seo-intro a:hover, .seo-content a:hover{ border-bottom-color:var(--accent); }

/* =================== DISPOSITIVOS =================== */
.devices{ padding:72px 0 24px; }
.devices .section-title{ margin-bottom:40px; }

.devices-row{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:16px;
}

.device{
  display:flex; flex-direction:column; align-items:center;
  padding:24px 16px 20px;
  border-radius:var(--radius);
  background:linear-gradient(180deg, var(--card-2), var(--card));
  border:1px solid var(--line);
  text-align:center;
  transition:transform .25s ease, border-color .25s ease;
}
.device:hover{ transform:translateY(-6px); border-color:rgba(var(--accent-rgb),.45); }

.device h4, .device h3{
  order:2;
  margin:14px 0 14px;
  font-family:var(--display);
  font-size:16px;
  font-weight:700;
  letter-spacing:.2px;
  color:#fff;
}
.device img{
  order:1;
  width:120px; height:90px;
  object-fit:contain;
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.5));
}
.device-btn{
  order:3;
  margin-top:auto;
  padding:9px 18px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  color:var(--text);
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px var(--line-2);
  transition:background .2s ease, color .2s ease;
}
.device-btn:hover{ background:var(--accent); color:#fff; box-shadow:none; }

/* =================== FUNCIONES =================== */
.features{ padding:80px 0 40px; }
.features .section-title{ margin-bottom:44px; }

.features-grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:40px;
  align-items:center;
}

.features-image{
  position:relative;
}
.features-image::before{
  content:""; position:absolute; inset:10% 10%;
  background:radial-gradient(closest-side, rgba(var(--accent-rgb),.35), transparent);
  filter:blur(30px);
  z-index:-1;
}
.features-image img{
  width:100%; max-width:480px; margin:0 auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.5));
}

.features-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
  counter-reset:feat;
}

.feature{
  counter-increment:feat;
  padding:22px 22px 20px;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--line);
  transition:border-color .25s ease, transform .25s ease;
}
.feature:hover{ border-color:rgba(var(--accent-rgb),.4); transform:translateY(-3px); }
.feature::before{
  content:"0" counter(feat);
  display:inline-grid; place-items:center;
  width:36px; height:36px; margin-bottom:14px;
  border-radius:10px;
  font-family:var(--display);
  font-weight:800; font-size:14px;
  color:var(--accent);
  background:rgba(var(--accent-rgb),.12);
}
.feature h3{
  margin:0 0 6px;
  font-family:var(--display);
  font-size:18px; font-weight:700;
  color:#fff;
}
.feature p{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.6; }

/* =================== PLANES =================== */
.planes-block{
  padding:88px 0 40px;
  background:radial-gradient(70% 50% at 50% 0%, rgba(var(--accent-rgb),.10), transparent 70%);
}
.planes-block .section-title{ margin-bottom:18px; }
.planes-block .section-title + .plans-grid{ margin-top:40px; }

.plans-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  align-items:stretch;
}

.plan-card{
  position:relative;
  display:flex; flex-direction:column;
  padding:28px 24px 24px;
  border-radius:var(--radius);
  background:linear-gradient(180deg, var(--card-2), var(--card));
  border:1px solid var(--line);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.plan-card:hover{
  transform:translateY(-6px);
  border-color:var(--line-2);
  box-shadow:var(--shadow);
}

/* Plan destacado: anual */
.plan-card[data-plan="anual"]{
  border-color:rgba(var(--accent-rgb),.6);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb),.12), rgba(var(--accent-rgb),.02) 40%),
    linear-gradient(180deg, var(--card-2), var(--card));
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.25), 0 24px 60px rgba(var(--accent-rgb),.16);
}

.badge{
  position:absolute; top:-12px; left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  padding:6px 14px;
  border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.3px;
  color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 8px 20px rgba(var(--accent-rgb),.4);
}

.plan-name{
  margin:0;
  text-align:center;
  font-family:var(--display);
  font-size:15px; font-weight:700;
  letter-spacing:2px;
  color:var(--muted);
}

.plan-devicons{
  margin:10px 0 0;
  text-align:center;
  font-size:15px;
  letter-spacing:4px;
  opacity:.75;
}

.plan-price{
  display:flex; align-items:flex-start; justify-content:center; gap:4px;
  margin:14px 0 4px;
}
.currency{
  margin-top:10px;
  font-size:16px; font-weight:600;
  color:var(--muted);
}
.amount{
  font-family:var(--display);
  font-size:58px; font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  color:#fff;
}

.plan-divider{
  border:none;
  border-top:1px solid var(--line);
  margin:20px 0;
}

.plan-features, .panel-list{
  list-style:none;
  margin:0; padding:0;
  display:grid; gap:12px;
  font-size:13px; font-weight:500;
  color:rgba(242,243,247,.85);
  text-transform:none;
}
.plan-features li, .panel-list li{
  display:flex; align-items:flex-start; gap:10px;
  line-height:1.45;
}
.plan-features li::before, .panel-list li::before{
  content:"";
  flex:0 0 18px; height:18px; margin-top:1px;
  border-radius:999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322C58B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat,
    rgba(34,197,139,.14);
}

.accent, .orange{ color:var(--accent); font-weight:700; }

.buy-btn, .panel-buy{
  display:block;
  margin-top:auto;
  padding:15px 16px;
  border-radius:14px;
  text-align:center;
  text-decoration:none;
  font-weight:700; font-size:14px; letter-spacing:.6px;
  color:#fff;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px var(--line-2);
  transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.plan-features + .buy-btn{ margin-top:26px; }
.buy-btn:hover, .panel-buy:hover,
.plan-card[data-plan="anual"] .buy-btn,
.panel-card.featured .panel-buy{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 12px 30px rgba(var(--accent-rgb),.35);
}
.buy-btn:hover, .panel-buy:hover{ transform:translateY(-2px); }
.buy-btn:active, .panel-buy:active{ transform:translateY(0); }

/* =================== PANELES =================== */
.paneles-block{ padding:72px 0 40px; }
.paneles-block .section-title{ margin-bottom:18px; }
.paneles-block .section-title + .panel-grid{ margin-top:40px; }

.panel-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  align-items:stretch;
}

.panel-card{
  display:flex; flex-direction:column;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.panel-card:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:var(--shadow); }
.panel-card.featured{
  border-color:rgba(var(--accent-rgb),.6);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.25), 0 24px 60px rgba(var(--accent-rgb),.16);
}

.panel-head{
  padding:12px 16px;
  text-align:center;
  font-size:11px; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--muted);
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--line);
}
.panel-card.featured .panel-head{
  color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  border-bottom-color:transparent;
}

.panel-body{
  flex:1;
  display:flex; flex-direction:column;
  padding:22px 22px 22px;
}

.panel-credits{
  margin:0;
  text-align:center;
  font-family:var(--display);
  font-size:15px; font-weight:700; letter-spacing:1.5px;
  color:#fff;
}

.panel-price{
  margin:10px 0 20px;
  text-align:center;
  font-family:var(--display);
  font-size:50px; font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  color:#fff;
}
.panel-price span{
  font-family:"Inter",sans-serif;
  font-size:16px; font-weight:600;
  letter-spacing:0;
  vertical-align:22px;
  margin-right:4px;
  color:var(--muted);
}

.panel-list{ margin-bottom:24px; }

/* =================== FAQ =================== */
.faqs{ padding:80px 0 40px; }
.faqs .section-title{ margin-bottom:40px; }

.faq{
  max-width:820px;
  margin:0 auto 12px;
  border-radius:16px;
  background:var(--card);
  border:1px solid var(--line);
  overflow:hidden;
  transition:border-color .2s ease;
}
.faq:hover{ border-color:var(--line-2); }
.faq.open{ border-color:rgba(var(--accent-rgb),.4); }

.faq-q{
  width:100%;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:20px 22px;
  border:none; background:transparent;
  color:var(--text);
  font:600 15.5px/1.4 "Inter",sans-serif;
  text-align:left;
  cursor:pointer;
}

.faq-icon{
  flex:0 0 30px; height:30px;
  display:grid; place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--muted);
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
.faq.open .faq-icon{ transform:rotate(180deg); background:var(--accent); color:#fff; }

.faq-a{ display:none; padding:0 22px 20px; color:var(--muted); font-size:15px; }
.faq-a p{ margin:0; }
.faq-a strong{ color:var(--text); font-weight:600; }
.faq-a a{ color:var(--accent); font-weight:600; }
.faq.open .faq-a{ display:block; }

/* =================== FOOTER =================== */
.site-footer{
  margin-top:80px;
  padding:48px 0 40px;
  background:var(--bg-2);
  border-top:1px solid var(--line);
}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr .6fr;
  gap:32px;
  align-items:start;
}

.footer-title{
  margin:0;
  font-family:var(--display);
  font-size:26px; font-weight:800;
  letter-spacing:-.02em;
}
.footer-title span{ color:var(--accent); }

.footer-text{ margin:10px 0 16px; color:var(--muted); max-width:420px; }

.footer-link{
  color:var(--text);
  font-size:14px; font-weight:600;
  text-decoration:none;
  border-bottom:1px solid var(--line-2);
}
.footer-link:hover{ color:var(--accent); border-bottom-color:var(--accent); }

.footer-heading{
  margin:0 0 12px;
  font-family:var(--display);
  font-size:13px; font-weight:700; letter-spacing:1.6px;
  color:var(--muted);
}

.footer-contact{ margin:0 0 8px; }
.footer-contact a{ color:var(--text); text-decoration:none; font-weight:500; }
.footer-contact a:hover{ color:var(--accent); }

/* =================== RESPONSIVE =================== */
@media (max-width:1100px){
  .plans-grid, .panel-grid{ grid-template-columns:repeat(2, 1fr); gap:24px 18px; }
  .devices-row{ grid-template-columns:repeat(3, 1fr); }
}

@media (max-width:900px){
  .features-grid{ grid-template-columns:1fr; }
  .features-image img{ max-width:360px; }
}

@media (max-width:720px){
  .footer-grid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .hero{ min-height:540px; }
  .hero-btn{ width:100%; min-width:0; }
  .hero-actions{ width:100%; max-width:360px; flex-direction:column; }
  .plans-grid, .panel-grid{ grid-template-columns:1fr; gap:26px; }
  .features-list{ grid-template-columns:1fr; }
  .devices-row{ grid-template-columns:repeat(2, 1fr); }
  .seo-intro, .seo-content{ padding-top:40px; }
  .planes-block, .paneles-block, .features, .faqs{ padding-top:60px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}