/* Streaming public redesign. Loaded after style.css and scoped to the public configurator. */

body[data-page="configurator"]{
  --layout-bg:#05080c;
  --layout-bg-2:#071419;
  --layout-surface:rgba(8,18,24,.86);
  --layout-card:#0b141a;
  --layout-card-2:#101b22;
  --layout-line:rgba(166,226,232,.14);
  --layout-line-strong:rgba(99,209,230,.46);
  --layout-text:#f4f8fb;
  --layout-muted:#b8cad3;
  --layout-soft:#7c929d;
  --layout-primary:#22d3ee;
  --layout-secondary:#4f7cff;
  --layout-accent:#9b8cff;
  --layout-contrast:#041015;
  --layout-button-text:#f8fdff;
  --layout-glow:rgba(34,211,238,.14);
  --layout-hero:
    linear-gradient(180deg,rgba(5,8,12,.08),rgba(5,8,12,.9) 82%),
    radial-gradient(circle at 18% 10%,rgba(34,211,238,.16),transparent 34%),
    radial-gradient(circle at 86% 24%,rgba(155,140,255,.12),transparent 38%),
    linear-gradient(155deg,#0b2027 0%,#071016 48%,#04070b 100%);
  --layout-card-gradient:linear-gradient(145deg,rgba(255,255,255,.066),rgba(255,255,255,.018));
  --success:#22c55e;
  --success-text:#bbf7d0;
  --success-bg:rgba(6,28,16,.92);
  --warning:#f59e0b;
  --danger:#ef4444;
  --whatsapp-1:#128c4a;
  --whatsapp-2:#25d366;
  --primary:var(--layout-primary);
  --primary2:var(--layout-secondary);
  --action-primary:var(--layout-primary);
  --action-secondary:var(--layout-secondary);
  margin:0;
  color:var(--layout-text);
  background:
    radial-gradient(circle at 18% -8%,rgba(34,211,238,.1),transparent 28%),
    radial-gradient(circle at 92% 8%,rgba(155,140,255,.08),transparent 30%),
    linear-gradient(180deg,var(--layout-bg-2),var(--layout-bg) 34%,#020306 100%);
}

body[data-page="configurator"][data-theme="fire-premium"]{
  --layout-bg:#05080c;
  --layout-bg-2:#08151a;
  --layout-surface:rgba(8,18,24,.88);
  --layout-card:#0b141a;
  --layout-card-2:#101b22;
  --layout-line:rgba(166,226,232,.14);
  --layout-line-strong:rgba(99,209,230,.46);
  --layout-text:#f4f8fb;
  --layout-muted:#b8cad3;
  --layout-soft:#7c929d;
  --layout-primary:#22d3ee;
  --layout-secondary:#4f7cff;
  --layout-accent:#8fb7ff;
  --layout-contrast:#041015;
  --layout-button-text:#f8fdff;
  --layout-glow:rgba(34,211,238,.14);
  --layout-hero:
    linear-gradient(180deg,rgba(5,8,12,.08),rgba(5,8,12,.9) 82%),
    radial-gradient(circle at 16% 8%,rgba(34,211,238,.16),transparent 35%),
    radial-gradient(circle at 88% 20%,rgba(79,124,255,.12),transparent 40%),
    linear-gradient(155deg,#0b2027 0%,#071016 48%,#04070b 100%);
  --layout-card-gradient:linear-gradient(145deg,rgba(255,255,255,.066),rgba(255,255,255,.018));
}

body[data-page="configurator"][data-theme="neon-tech"]{
  --layout-bg:#04080f;
  --layout-bg-2:#071520;
  --layout-surface:rgba(7,18,28,.88);
  --layout-card:#09141e;
  --layout-card-2:#0e1d2a;
  --layout-line:rgba(129,218,238,.14);
  --layout-line-strong:rgba(34,211,238,.44);
  --layout-text:#f5fbff;
  --layout-muted:#bbd2df;
  --layout-soft:#7f9baa;
  --layout-primary:#06b6d4;
  --layout-secondary:#4f7cff;
  --layout-accent:#9b8cff;
  --layout-contrast:#04111b;
  --layout-button-text:#f8fdff;
  --layout-glow:rgba(34,211,238,.13);
  --layout-hero:
    linear-gradient(180deg,rgba(4,8,15,.08),rgba(4,8,15,.9) 82%),
    radial-gradient(circle at 18% 12%,rgba(34,211,238,.18),transparent 34%),
    radial-gradient(circle at 86% 28%,rgba(155,140,255,.12),transparent 38%),
    linear-gradient(160deg,#0a1c27 0%,#051018 58%,#020409 100%);
  --layout-card-gradient:linear-gradient(145deg,rgba(34,211,238,.08),rgba(155,140,255,.035));
}

body[data-page="configurator"][data-theme="royal-dark"]{
  --layout-bg:#06070d;
  --layout-bg-2:#10101b;
  --layout-surface:rgba(14,15,28,.88);
  --layout-card:#10131f;
  --layout-card-2:#171a29;
  --layout-line:rgba(185,176,255,.14);
  --layout-line-strong:rgba(155,140,255,.44);
  --layout-text:#f8f7ff;
  --layout-muted:#c9c5df;
  --layout-soft:#928ea9;
  --layout-primary:#8b8cff;
  --layout-secondary:#3fb7d3;
  --layout-accent:#b8a7ff;
  --layout-contrast:#090b16;
  --layout-button-text:#fbfbff;
  --layout-glow:rgba(139,140,255,.13);
  --layout-hero:
    linear-gradient(180deg,rgba(6,7,13,.08),rgba(6,7,13,.9) 82%),
    radial-gradient(circle at 18% 12%,rgba(139,140,255,.16),transparent 35%),
    radial-gradient(circle at 88% 24%,rgba(63,183,211,.1),transparent 40%),
    linear-gradient(160deg,#121424 0%,#080a12 58%,#020306 100%);
  --layout-card-gradient:linear-gradient(145deg,rgba(139,140,255,.08),rgba(63,183,211,.035));
}

body[data-page="configurator"] .bg-orb{
  display:none;
}

body[data-page="configurator"] .grid-bg{
  opacity:.12;
  background-image:
    linear-gradient(rgba(178,226,232,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(178,226,232,.03) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:linear-gradient(to bottom,black 0,black 70%,transparent);
}

body[data-page="configurator"] .streaming-public-shell{
  width:100%;
  max-width:none;
  padding:0 0 34px;
}

body[data-page="configurator"] .stream-colorbar{
  height:2px;
  margin:0;
  border-radius:0;
  background:linear-gradient(90deg,rgba(34,211,238,.72),rgba(155,140,255,.58),rgba(63,183,211,.42));
}

body[data-page="configurator"] .stream-colorbar span{
  display:none;
}

body[data-page="configurator"] .public-header{
  position:sticky;
  top:0;
  z-index:50;
  width:min(1180px,calc(100% - 24px));
  min-height:70px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin:0 auto;
  border:1px solid var(--layout-line);
  border-top:0;
  border-radius:0 0 8px 8px;
  background:color-mix(in srgb,var(--layout-surface) 94%,#020306);
  box-shadow:0 16px 44px rgba(0,0,0,.32);
  padding:10px;
  backdrop-filter:blur(18px);
}

body[data-page="configurator"] .public-brand{
  min-width:0;
  max-width:calc(100vw - 92px);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:10px;
  color:var(--layout-text);
  text-decoration:none;
}

body[data-page="configurator"]:not(.public-logo-html) .brand-fallback-icon{
  display:none;
}

body[data-page="configurator"] .brand-fallback-icon,
body[data-page="configurator"] .public-brand .brand-logo{
  width:46px;
  height:46px;
  min-width:46px;
  max-width:46px;
  max-height:46px;
  object-fit:contain;
  border:1px solid color-mix(in srgb,var(--layout-primary) 24%,var(--layout-line));
  border-radius:8px;
  background:rgba(0,0,0,.24);
  padding:5px;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.28));
}

body[data-page="configurator"] .brand-fallback-icon{
  display:grid;
  place-items:center;
  padding:0;
}

body[data-page="configurator"] .brand-fallback-icon:before{
  content:"";
  width:18px;
  height:18px;
  border:4px solid transparent;
  border-left-color:var(--layout-primary);
  transform:translateX(3px);
}

body[data-page="configurator"] .public-brand-copy{
  min-width:0;
  display:grid;
  gap:2px;
}

body[data-page="configurator"] .public-brand strong{
  max-width:min(56vw,260px);
  overflow:hidden;
  color:var(--layout-text);
  font-size:1.18rem;
  line-height:1;
  letter-spacing:0;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body[data-page="configurator"].has-brand-name-color .public-brand strong,
body[data-page="configurator"].has-brand-name-color .footer-brand strong{
  color:var(--layout-text)!important;
  -webkit-text-fill-color:var(--layout-text)!important;
}

body[data-page="configurator"] .public-brand small{
  max-width:min(56vw,260px);
  overflow:hidden;
  color:var(--layout-muted);
  font-size:.72rem;
  line-height:1.2;
  letter-spacing:0;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body[data-page="configurator"] .mobile-menu-toggle{
  width:42px;
  height:42px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:1px solid var(--layout-line);
  border-radius:8px;
  background:rgba(255,255,255,.045);
  color:var(--layout-text);
}

body[data-page="configurator"] .mobile-menu-toggle span{
  width:18px;
  height:2px;
  border-radius:99px;
  background:var(--layout-muted);
}

body[data-page="configurator"] .public-nav-links{
  display:none;
}

body[data-page="configurator"].public-menu-open .public-nav-links{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  width:100%;
}

body[data-page="configurator"] a,
body[data-page="configurator"] button{
  letter-spacing:0;
}

body[data-page="configurator"] .public-nav-links a,
body[data-page="configurator"] .hero-primary,
body[data-page="configurator"] .hero-whatsapp,
body[data-page="configurator"] .plan-choose,
body[data-page="configurator"] .primary-btn,
body[data-page="configurator"] .result-action-btn,
body[data-page="configurator"] .whatsapp-btn,
body[data-page="configurator"] .public-footer a{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  padding:12px 15px;
  text-align:center;
  text-decoration:none;
  font-size:.95rem;
  font-weight:850;
  line-height:1.15;
  white-space:normal;
}

body[data-page="configurator"] .public-nav-links a,
body[data-page="configurator"] .public-footer a{
  border:1px solid var(--layout-line);
  background:rgba(255,255,255,.04);
  color:var(--layout-text);
}

body[data-page="configurator"] .header-config-btn,
body[data-page="configurator"] .hero-primary,
body[data-page="configurator"] .plan-choose,
body[data-page="configurator"] .primary-btn,
body[data-page="configurator"] .result-action-btn{
  border:1px solid color-mix(in srgb,var(--layout-accent) 34%,transparent);
  background:linear-gradient(135deg,var(--layout-primary),var(--layout-secondary));
  color:var(--layout-button-text);
  box-shadow:0 14px 34px var(--layout-glow);
}

body[data-page="configurator"] .header-wa-btn,
body[data-page="configurator"] .whatsapp-btn,
body[data-page="configurator"] .whatsapp-inline{
  border:1px solid rgba(37,211,102,.34);
  background:linear-gradient(135deg,var(--whatsapp-1),var(--whatsapp-2));
  color:#fff;
  box-shadow:0 14px 32px rgba(34,197,94,.16);
}

body[data-page="configurator"] .hero-whatsapp{
  border:1px solid rgba(37,211,102,.34);
  background:rgba(37,211,102,.09);
  color:#d9ffe6;
  box-shadow:none;
}

body[data-page="configurator"] .public-hero{
  position:relative;
  overflow:hidden;
  margin:-1px 0 0;
  border:0;
  border-radius:0;
  background:var(--layout-hero);
  box-shadow:none;
  padding:28px 12px 32px;
}

body[data-page="configurator"] .public-hero:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(176,228,235,.04) 1px,transparent 1px),
    linear-gradient(rgba(176,228,235,.032) 1px,transparent 1px);
  background-size:84px 84px;
  mask-image:linear-gradient(to bottom,black,transparent 78%);
  opacity:.28;
}

body[data-page="configurator"] .hero-grid{
  position:relative;
  z-index:1;
  width:min(1180px,100%);
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  margin:0 auto;
}

body[data-page="configurator"] .hero-copy{
  max-width:760px;
}

body[data-page="configurator"] .hero-eyebrow,
body[data-page="configurator"] .section-heading span{
  width:max-content;
  max-width:100%;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  border:1px solid color-mix(in srgb,var(--layout-accent) 34%,var(--layout-line));
  border-radius:999px;
  background:color-mix(in srgb,var(--layout-primary) 9%,rgba(0,0,0,.18));
  color:var(--layout-text);
  padding:7px 11px;
  font-size:.76rem;
  font-weight:850;
  letter-spacing:0;
}

body[data-page="configurator"] .hero-copy h1{
  max-width:760px;
  margin:13px 0 12px;
  color:#fff;
  font-size:2.35rem;
  line-height:1;
  letter-spacing:0;
  text-align:left;
  text-shadow:0 20px 56px rgba(0,0,0,.44);
}

body[data-page="configurator"] .hero-copy p{
  max-width:620px;
  margin:0;
  color:var(--layout-muted);
  font-size:1rem;
  line-height:1.5;
}

body[data-page="configurator"] .hero-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:20px;
}

body[data-page="configurator"] .hero-signals{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

body[data-page="configurator"] .hero-signals span{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--layout-line);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:var(--layout-muted);
  padding:7px 10px;
  font-size:.8rem;
  font-weight:800;
}

body[data-page="configurator"] .hero-signals b{
  width:8px;
  height:8px;
  border-radius:99px;
  background:var(--success);
  box-shadow:0 0 0 5px rgba(34,197,94,.1),0 0 14px rgba(34,197,94,.36);
}

body[data-page="configurator"] .hero-showcase{
  min-width:0;
}

body[data-page="configurator"] .stream-mockup{
  min-height:292px;
  display:grid;
  gap:12px;
  border:1px solid color-mix(in srgb,var(--layout-primary) 22%,var(--layout-line));
  border-radius:8px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 46%),
    radial-gradient(circle at 16% 0%,color-mix(in srgb,var(--layout-primary) 10%,transparent),transparent 36%),
    var(--layout-card-gradient),
    var(--layout-card);
  box-shadow:0 24px 70px rgba(0,0,0,.4),0 0 24px var(--layout-glow);
  padding:13px;
  transform:none;
}

body[data-page="configurator"] .mockup-topline,
body[data-page="configurator"] .mockup-status,
body[data-page="configurator"] .mockup-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--layout-muted);
  font-size:.84rem;
  font-weight:850;
}

body[data-page="configurator"] .mockup-topline span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body[data-page="configurator"] .mockup-topline strong{
  min-height:28px;
  display:inline-flex;
  align-items:center;
  border:1px solid color-mix(in srgb,var(--success-text) 48%,transparent);
  border-radius:999px;
  background:var(--success-bg);
  color:var(--success-text);
  padding:6px 10px;
  font-size:.74rem;
  box-shadow:0 0 18px rgba(34,197,94,.12);
}

body[data-page="configurator"] .mockup-status{
  justify-content:flex-start;
  border:1px solid color-mix(in srgb,var(--success-text) 42%,transparent);
  border-radius:8px;
  background:var(--success-bg);
  color:var(--success-text);
  padding:10px;
}

body[data-page="configurator"] .mockup-status time{
  margin-left:auto;
  color:#e9fff0;
}

body[data-page="configurator"] .mockup-status[data-status="unstable"]{
  border-color:rgba(245,158,11,.48);
  background:rgba(36,20,4,.92);
  color:#fcd34d;
}

body[data-page="configurator"] .mockup-status[data-status="offline"]{
  border-color:rgba(239,68,68,.48);
  background:rgba(37,7,7,.92);
  color:#fca5a5;
}

body[data-page="configurator"] .pulse-dot{
  width:10px;
  height:10px;
  flex:0 0 10px;
  border:2px solid rgba(255,255,255,.2);
  border-radius:99px;
  background:var(--success);
  box-shadow:0 0 0 5px rgba(34,197,94,.12),0 0 16px rgba(34,197,94,.36);
}

body[data-page="configurator"] .channel-mockup-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}

body[data-page="configurator"] .channel-tile{
  min-height:82px;
  display:grid;
  align-content:space-between;
  gap:8px;
  overflow:hidden;
  border:1px solid var(--layout-line);
  border-radius:8px;
  background:linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.018)),var(--layout-card-2);
  color:var(--layout-text);
  padding:10px;
}

body[data-page="configurator"] .channel-tile span{
  color:var(--layout-muted);
  font-size:.72rem;
  font-weight:800;
}

body[data-page="configurator"] .channel-tile strong{
  overflow:hidden;
  font-size:.98rem;
  line-height:1.1;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body[data-page="configurator"] .channel-tile i{
  width:72%;
  height:6px;
  border-radius:99px;
  background:color-mix(in srgb,var(--layout-muted) 24%,transparent);
}

body[data-page="configurator"] .channel-tile.active{
  border-color:var(--layout-line-strong);
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--layout-primary) 12%,transparent),color-mix(in srgb,var(--layout-accent) 8%,transparent)),
    var(--layout-card-2);
  box-shadow:0 16px 42px rgba(0,0,0,.28),0 0 18px var(--layout-glow);
}

body[data-page="configurator"] .mockup-footer{
  flex-wrap:wrap;
  justify-content:flex-start;
}

body[data-page="configurator"] .mockup-footer span{
  min-height:28px;
  border:1px solid var(--layout-line);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  padding:6px 9px;
}

body[data-page="configurator"] .landing-section{
  width:min(1180px,calc(100% - 24px));
  margin:30px auto 0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  padding:0;
}

body[data-page="configurator"] .section-heading{
  display:grid;
  gap:8px;
  margin-bottom:14px;
}

body[data-page="configurator"] .section-heading h2,
body[data-page="configurator"] .panel h2{
  max-width:700px;
  margin:0;
  color:#fff;
  font-size:1.82rem;
  line-height:1.08;
  letter-spacing:0;
  text-align:left;
}

body[data-page="configurator"] .section-heading p,
body[data-page="configurator"] .lead{
  max-width:620px;
  margin:0;
  color:var(--layout-muted);
  font-size:.98rem;
  line-height:1.48;
  text-align:left;
}

body[data-page="configurator"] .carousel-shell{
  position:relative;
}

body[data-page="configurator"] .premium-carousel{
  display:flex;
  align-items:stretch;
  gap:12px;
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:18px;
  scroll-behavior:smooth;
  scrollbar-width:none;
  margin:0 -12px;
  padding:10px 18px 22px;
}

body[data-page="configurator"] .premium-carousel::-webkit-scrollbar{
  display:none;
}

body[data-page="configurator"] .carousel-arrow{
  position:absolute;
  top:50%;
  z-index:4;
  width:40px;
  height:40px;
  min-height:40px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--layout-accent) 30%,var(--layout-line));
  border-radius:999px;
  background:color-mix(in srgb,var(--layout-surface) 94%,#020203);
  color:var(--layout-text);
  box-shadow:0 14px 34px rgba(0,0,0,.35);
  padding:0;
  transform:translateY(-50%);
}

body[data-page="configurator"] .carousel-arrow.prev{
  left:-2px;
}

body[data-page="configurator"] .carousel-arrow.next{
  right:-2px;
}

body[data-page="configurator"] .carousel-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:32px;
}

body[data-page="configurator"] .drag-hint{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  border:1px solid var(--layout-line);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:var(--layout-muted);
  padding:6px 10px;
  font-size:.78rem;
  font-weight:850;
}

body[data-page="configurator"] .dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin:0;
}

body[data-page="configurator"] .dot{
  width:9px;
  height:9px;
  min-height:0;
  border:0;
  border-radius:99px;
  background:rgba(255,255,255,.26);
  padding:0;
}

body[data-page="configurator"] .dot.active,
body[data-page="configurator"] .dot.viewing{
  width:30px;
  background:linear-gradient(90deg,var(--layout-primary),var(--layout-secondary));
}

body[data-page="configurator"] .plan-card,
body[data-page="configurator"] .device-card,
body[data-page="configurator"] .result-card,
body[data-page="configurator"] .configurator-card{
  border:1px solid var(--layout-line);
  border-radius:8px;
  background:var(--layout-card-gradient),var(--layout-card);
  box-shadow:0 18px 48px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.055);
}

body[data-page="configurator"] .plan-card{
  position:relative;
  flex:0 0 min(82vw,318px);
  min-height:292px;
  scroll-snap-align:center;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden;
  padding:16px;
  text-align:left;
  opacity:.96;
  transform:none;
  transition:border-color .2s ease,box-shadow .2s ease,opacity .2s ease,translate .2s ease;
}

body[data-page="configurator"] .plan-card:after{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:2px;
  background:linear-gradient(90deg,var(--layout-primary),var(--layout-secondary),var(--layout-accent));
  pointer-events:none;
}

body[data-page="configurator"] .plan-card.featured{
  border-color:color-mix(in srgb,var(--layout-accent) 36%,var(--layout-line));
}

body[data-page="configurator"] .plan-card.selected,
body[data-page="configurator"] .plan-card:hover{
  opacity:1;
  translate:0 -2px;
  border-color:var(--layout-line-strong);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--layout-primary) 24%,transparent),0 22px 58px rgba(0,0,0,.34),0 0 22px var(--layout-glow);
}

body[data-page="configurator"] .plan-top{
  min-height:32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

body[data-page="configurator"] .plan-kicker,
body[data-page="configurator"] .badge,
body[data-page="configurator"] .tag{
  min-height:28px;
  display:inline-flex;
  align-items:center;
  border:1px solid color-mix(in srgb,var(--layout-accent) 32%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--layout-primary) 8%,var(--layout-surface));
  color:var(--layout-text);
  padding:6px 9px;
  font-size:.72rem;
  font-weight:850;
}

body[data-page="configurator"] .badge{
  border-color:color-mix(in srgb,var(--layout-primary) 38%,transparent);
  background:color-mix(in srgb,var(--layout-primary) 12%,var(--layout-surface));
  color:#dffbff;
}

body[data-page="configurator"] .plan-number{
  color:#fff;
  font-size:2.55rem;
  line-height:.95;
}

body[data-page="configurator"] .plan-card h3{
  margin:0;
  color:#fff;
  font-size:1.2rem;
  line-height:1.12;
}

body[data-page="configurator"] .plan-card p{
  margin:0;
  color:var(--layout-muted);
  font-size:.95rem;
  line-height:1.42;
}

body[data-page="configurator"] .features{
  display:none!important;
}

body[data-page="configurator"] .price{
  margin-top:auto;
  color:#fff;
  font-size:1.78rem;
  font-weight:950;
}

body[data-page="configurator"] .price small{
  color:var(--layout-muted);
  font-size:.88rem;
}

body[data-page="configurator"] .plan-choose{
  width:100%;
  margin-top:2px;
}

body[data-page="configurator"] .configurator-section{
  width:min(1180px,calc(100% - 24px));
  padding:0;
  scroll-margin-top:86px;
}

body[data-page="configurator"]:not(.plan-selected):not(.configurator-requested) .configurator-section{
  display:none;
}

body[data-page="configurator"] .configurator-card{
  position:relative;
  padding:16px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 44%),
    var(--layout-card-gradient),
    var(--layout-card);
}

body[data-page="configurator"] .configurator-card .back-btn{
  left:12px;
  top:12px;
  width:42px;
  height:42px;
  border:1px solid var(--layout-line);
  border-radius:8px;
  background:rgba(255,255,255,.045);
  color:var(--layout-text);
  font-size:1.7rem;
}

body[data-page="configurator"] .steps{
  width:100%;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin:0 0 18px;
}

body[data-page="configurator"] .steps:before{
  display:none;
}

body[data-page="configurator"] .step{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--layout-soft);
  text-align:left;
}

body[data-page="configurator"] .step b{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  margin:0;
  border:1px solid var(--layout-line);
  border-radius:999px;
  background:var(--layout-card-2);
  color:var(--layout-text);
}

body[data-page="configurator"] .step.active{
  color:var(--layout-text);
}

body[data-page="configurator"] .step.active b{
  border-color:color-mix(in srgb,var(--layout-accent) 48%,transparent);
  background:linear-gradient(135deg,var(--layout-primary),var(--layout-secondary));
  color:#f8fdff;
}

body[data-page="configurator"] .step.done b{
  border-color:rgba(34,197,94,.44);
  background:linear-gradient(135deg,#16a34a,#4ade80);
  color:#06210f;
  font-size:0;
}

body[data-page="configurator"] .step.done b:after{
  content:"✓";
  font-size:1rem;
}

body[data-page="configurator"] .panel{
  display:none;
}

body[data-page="configurator"] .panel.active{
  display:block;
}

body[data-page="configurator"] .panel .lead{
  margin:8px 0 12px;
}

body[data-page="configurator"] .device-card{
  position:relative;
  flex:0 0 min(80vw,300px);
  min-height:196px;
  scroll-snap-align:center;
  display:grid;
  place-items:center;
  align-content:center;
  gap:13px;
  padding:18px;
  color:var(--layout-text);
  text-align:center;
  cursor:pointer;
  opacity:.96;
  transform:none;
  transition:border-color .2s ease,box-shadow .2s ease,opacity .2s ease,translate .2s ease;
}

body[data-page="configurator"] .device-card.selected,
body[data-page="configurator"] .device-card:hover{
  opacity:1;
  translate:0 -2px;
  border-color:var(--layout-line-strong);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--layout-primary) 24%,transparent),0 20px 54px rgba(0,0,0,.32),0 0 18px var(--layout-glow);
}

body[data-page="configurator"] .device-card .icon{
  margin:0;
  color:var(--layout-primary);
}

body[data-page="configurator"] .device-card .icon svg{
  width:68px;
  height:68px;
}

body[data-page="configurator"] .device-card h3{
  margin:0;
  color:#fff!important;
  font-size:1.18rem;
  line-height:1.12;
}

body[data-page="configurator"] .device-card p{
  display:none;
}

body[data-page="configurator"] .check{
  position:absolute;
  right:13px;
  top:13px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:2px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:transparent;
}

body[data-page="configurator"] .device-card.selected .check{
  border-color:color-mix(in srgb,var(--layout-primary) 65%,transparent);
  background:linear-gradient(135deg,var(--layout-primary),var(--layout-secondary));
  color:#f8fdff;
}

body[data-page="configurator"] .device-card.selected .check:after{
  content:"✓";
  font-weight:950;
}

body[data-page="configurator"] .qty{
  position:absolute;
  left:13px;
  top:13px;
  min-height:28px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:color-mix(in srgb,var(--layout-primary) 18%,var(--layout-surface));
  color:#dffbff;
  padding:5px 9px;
  font-size:.78rem;
  font-weight:950;
  z-index:2;
}

body[data-page="configurator"] .primary-btn{
  width:100%;
  margin:12px 0 0;
}

body[data-page="configurator"] .primary-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  box-shadow:none;
}

body[data-page="configurator"] .primary-btn.ready{
  opacity:1;
}

body[data-page="configurator"] .android-notice{
  border:1px solid rgba(34,197,94,.42);
  border-radius:8px;
  background:rgba(34,197,94,.11);
  color:var(--success-text);
  padding:12px;
  margin:12px 0;
  text-align:left;
}

body[data-page="configurator"] .result-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin:0 0 14px;
}

body[data-page="configurator"] .result-card{
  min-height:auto;
  display:grid;
  gap:14px;
  padding:16px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.054),rgba(255,255,255,.016)),
    var(--layout-card);
}

body[data-page="configurator"] .result-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
}

body[data-page="configurator"] .result-head .icon{
  width:52px;
  height:52px;
  flex:0 0 52px;
  display:grid;
  place-items:center;
  border:1px solid var(--layout-line);
  border-radius:8px;
  background:color-mix(in srgb,var(--layout-primary) 8%,rgba(255,255,255,.035));
  color:var(--layout-primary);
}

body[data-page="configurator"] .result-head .icon svg{
  width:32px;
  height:32px;
}

body[data-page="configurator"] .result-head h3{
  margin:0;
  color:#fff;
  font-size:1.08rem;
  line-height:1.18;
}

body[data-page="configurator"] .result-head p{
  margin:4px 0 0;
  color:var(--layout-muted);
  line-height:1.35;
}

body[data-page="configurator"] .result-card > b,
body[data-page="configurator"] .apps,
body[data-page="configurator"] .code-box,
body[data-page="configurator"] .download-link,
body[data-page="configurator"] .link-missing{
  display:none!important;
}

body[data-page="configurator"] .result-action-btn{
  width:100%;
}

body[data-page="configurator"] .wa-ready-note,
body[data-page="configurator"] .safe-note,
body[data-page="configurator"] .info-box{
  display:none!important;
}

body[data-page="configurator"] .whatsapp-btn{
  width:100%;
  max-width:none;
  min-height:50px;
  flex-direction:row;
  font-size:1rem;
}

body[data-page="configurator"] .whatsapp-btn small{
  display:none;
}

body[data-page="configurator"] .public-footer{
  width:min(1180px,calc(100% - 24px));
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin:30px auto 0;
  border:0;
  border-top:1px solid var(--layout-line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  padding:18px 0 0;
}

body[data-page="configurator"] .footer-brand{
  display:grid;
  gap:4px;
}

body[data-page="configurator"] .public-footer strong{
  color:#fff;
  font-size:1.08rem;
}

body[data-page="configurator"] .public-footer span,
body[data-page="configurator"] .public-footer small{
  color:var(--layout-soft);
}

body[data-page="configurator"] .public-footer nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:8px;
  margin:0;
}

@media(max-width:430px){
  body[data-page="configurator"] .public-header{
    width:calc(100% - 18px);
    min-height:66px;
    padding:9px;
  }

  body[data-page="configurator"] .brand-fallback-icon,
  body[data-page="configurator"] .public-brand .brand-logo{
    width:44px;
    height:44px;
    min-width:44px;
    max-width:44px;
    max-height:44px;
  }

  body[data-page="configurator"] .public-brand strong{
    max-width:44vw;
    font-size:1.08rem;
  }

  body[data-page="configurator"] .public-brand small{
    max-width:44vw;
    font-size:.68rem;
  }

  body[data-page="configurator"] .hero-copy h1{
    font-size:1.96rem;
  }

  body[data-page="configurator"] .carousel-meta{
    align-items:flex-start;
  }

  body[data-page="configurator"] .drag-hint{
    max-width:58%;
  }
}

@media(max-width:370px){
  body[data-page="configurator"] .public-brand small{
    display:none;
  }

  body[data-page="configurator"] .public-brand strong{
    max-width:46vw;
  }
}

@media(min-width:760px){
  body[data-page="configurator"] .public-hero{
    padding:40px 24px 44px;
  }

  body[data-page="configurator"] .hero-copy h1{
    font-size:3.15rem;
  }

  body[data-page="configurator"] .hero-copy p{
    font-size:1.1rem;
  }

  body[data-page="configurator"] .hero-actions{
    width:max-content;
    max-width:100%;
    display:flex;
    flex-wrap:wrap;
  }

  body[data-page="configurator"] .hero-primary,
  body[data-page="configurator"] .hero-whatsapp{
    width:auto;
    min-width:178px;
  }

  body[data-page="configurator"] .stream-mockup{
    min-height:360px;
    padding:16px;
  }

  body[data-page="configurator"] .channel-mockup-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
  }

  body[data-page="configurator"] .channel-tile{
    min-height:104px;
  }

  body[data-page="configurator"] .landing-section{
    margin-top:42px;
  }

  body[data-page="configurator"] .section-heading h2,
  body[data-page="configurator"] .panel h2{
    font-size:2.35rem;
  }
}

@media(min-width:900px){
  body[data-page="configurator"] .public-header{
    grid-template-columns:1fr auto 1fr;
    min-height:84px;
    gap:18px;
    padding:13px 14px;
  }

  body[data-page="configurator"] .public-brand{
    grid-column:2;
    justify-self:center;
    max-width:460px;
  }

  body[data-page="configurator"] .brand-fallback-icon,
  body[data-page="configurator"] .public-brand .brand-logo{
    width:54px;
    height:54px;
    min-width:54px;
    max-width:54px;
    max-height:54px;
  }

  body[data-page="configurator"] .public-brand strong{
    max-width:320px;
    font-size:1.56rem;
  }

  body[data-page="configurator"] .public-brand small{
    max-width:320px;
    font-size:.8rem;
  }

  body[data-page="configurator"] .mobile-menu-toggle{
    display:none;
  }

  body[data-page="configurator"] .public-nav-links{
    grid-column:3;
    display:flex;
    justify-content:flex-end;
    gap:8px;
  }

  body[data-page="configurator"] .public-nav-links a,
  body[data-page="configurator"] .public-footer a{
    width:auto;
    min-height:42px;
    padding:10px 13px;
  }

  body[data-page="configurator"] .hero-grid{
    gap:30px;
  }

  body[data-page="configurator"] .hero-copy{
    max-width:860px;
  }

  body[data-page="configurator"] .hero-copy h1{
    max-width:840px;
    font-size:4.1rem;
  }

  body[data-page="configurator"] .hero-showcase{
    width:min(980px,100%);
  }

  body[data-page="configurator"] .commercial-plans .carousel-shell{
    overflow:visible;
  }

  body[data-page="configurator"] .landing-plan-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    overflow:visible;
    margin:0;
    padding:0;
    scroll-snap-type:none;
  }

  body[data-page="configurator"] .landing-plan-grid .plan-card{
    min-width:0;
    flex:none;
    scroll-snap-align:none;
  }

  body[data-page="configurator"] .plan-carousel-shell .carousel-arrow,
  body[data-page="configurator"] .plan-carousel-shell + .carousel-meta{
    display:none;
  }

  body[data-page="configurator"] .configurator-card{
    padding:24px;
  }

  body[data-page="configurator"] .steps{
    width:min(720px,100%);
    grid-template-columns:repeat(3,1fr);
    margin:0 auto 26px;
    position:relative;
  }

  body[data-page="configurator"] .steps:before{
    content:"";
    position:absolute;
    left:15%;
    right:15%;
    top:21px;
    height:2px;
    display:block;
    border-radius:99px;
    background:var(--layout-line);
  }

  body[data-page="configurator"] .step{
    display:block;
    text-align:center;
    position:relative;
    z-index:1;
  }

  body[data-page="configurator"] .step b{
    width:42px;
    height:42px;
    margin:0 auto 9px;
  }

  body[data-page="configurator"] .panel h2,
  body[data-page="configurator"] .panel .lead{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }

  body[data-page="configurator"] .device-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    overflow:visible;
    margin:0;
    padding:0;
    scroll-snap-type:none;
  }

  body[data-page="configurator"] .device-card{
    min-width:0;
    min-height:210px;
    flex:none;
    scroll-snap-align:none;
  }

  body[data-page="configurator"] .device-carousel-shell .carousel-arrow,
  body[data-page="configurator"] .device-carousel-shell + .carousel-meta{
    display:none;
  }

  body[data-page="configurator"] .primary-btn{
    width:min(420px,100%);
    margin:18px auto 0;
  }

  body[data-page="configurator"] .result-grid{
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:14px;
  }

  body[data-page="configurator"] .whatsapp-btn{
    width:min(440px,100%);
    margin:0 auto;
  }

  body[data-page="configurator"] .public-footer{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
  }
}

@media(min-width:1180px){
  body[data-page="configurator"] .public-hero{
    padding-top:48px;
  }

  body[data-page="configurator"] .hero-copy h1{
    font-size:4.35rem;
  }
}

/* QA visual final do Streaming publico: leitura, carousel e mobile. */
body[data-page="configurator"] :focus-visible{
  outline:3px solid color-mix(in srgb,var(--layout-accent) 78%,#fff);
  outline-offset:3px;
}

body[data-page="configurator"] .public-header,
body[data-page="configurator"] .public-brand,
body[data-page="configurator"] .hero-copy,
body[data-page="configurator"] .stream-mockup,
body[data-page="configurator"] .plan-card,
body[data-page="configurator"] .device-card,
body[data-page="configurator"] .result-card{
  min-width:0;
}

body[data-page="configurator"] .brand-logo{
  object-fit:contain;
}

body[data-page="configurator"] .hero-copy h1{
  text-wrap:balance;
}

body[data-page="configurator"] .hero-copy p,
body[data-page="configurator"] .section-heading p,
body[data-page="configurator"] .lead,
body[data-page="configurator"] .result-head p{
  overflow-wrap:anywhere;
}

body[data-page="configurator"] .mockup-status,
body[data-page="configurator"] .mockup-topline strong{
  color:#eafff1;
}

body[data-page="configurator"] .hero-signals span:first-child{
  color:#eafff1;
}

body[data-page="configurator"] .mockup-status{
  min-height:44px;
  flex-wrap:wrap;
}

body[data-page="configurator"] .mockup-status time{
  margin-left:auto;
  white-space:nowrap;
}

body[data-page="configurator"] .premium-carousel{
  overscroll-behavior-inline:contain;
}

body[data-page="configurator"] .carousel-arrow{
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}

body[data-page="configurator"] .carousel-arrow:hover{
  border-color:var(--layout-line-strong);
  transform:translateY(-50%) scale(1.04);
}

body[data-page="configurator"] .plan-card,
body[data-page="configurator"] .device-card{
  will-change:auto;
}

body[data-page="configurator"] .plan-card h3,
body[data-page="configurator"] .device-card h3,
body[data-page="configurator"] .result-head h3{
  overflow-wrap:anywhere;
}

body[data-page="configurator"] .plan-card p{
  min-height:2.7em;
}

body[data-page="configurator"] .plan-choose,
body[data-page="configurator"] .primary-btn,
body[data-page="configurator"] .result-action-btn,
body[data-page="configurator"] .whatsapp-btn{
  cursor:pointer;
}

body[data-page="configurator"] .primary-btn:disabled,
body[data-page="configurator"] button:disabled{
  border:1px solid var(--layout-line);
  background:rgba(255,255,255,.08);
  color:var(--layout-soft);
}

body[data-page="configurator"] .result-card{
  align-content:start;
}

body[data-page="configurator"] .result-action-btn.whatsapp-inline{
  background:linear-gradient(135deg,var(--whatsapp-1),var(--whatsapp-2));
}

@media(max-width:759px){
  body[data-page="configurator"] .carousel-arrow{
    display:none;
  }

  body[data-page="configurator"] .premium-carousel{
    scroll-padding-inline:14px;
    margin:0 -10px;
    padding:10px 14px 20px;
  }
}

@media(max-width:430px){
  body[data-page="configurator"] .public-header,
  body[data-page="configurator"] .landing-section,
  body[data-page="configurator"] .configurator-section,
  body[data-page="configurator"] .public-footer{
    width:calc(100% - 16px);
  }

  body[data-page="configurator"] .public-brand{
    gap:8px;
  }

  body[data-page="configurator"] .public-brand strong{
    max-width:42vw;
    font-size:1.02rem;
  }

  body[data-page="configurator"] .public-brand small{
    max-width:42vw;
  }

  body[data-page="configurator"] .public-hero{
    padding:20px 8px 26px;
  }

  body[data-page="configurator"] .hero-grid{
    gap:18px;
  }

  body[data-page="configurator"] .hero-copy h1{
    font-size:1.82rem;
    line-height:1.04;
  }

  body[data-page="configurator"] .hero-copy p{
    font-size:.95rem;
  }

  body[data-page="configurator"] .hero-signals{
    gap:7px;
  }

  body[data-page="configurator"] .hero-signals span{
    flex:1 1 150px;
    justify-content:center;
    min-height:36px;
    padding:7px 9px;
  }

  body[data-page="configurator"] .stream-mockup{
    min-height:250px;
    gap:10px;
    padding:11px;
    box-shadow:0 20px 54px rgba(0,0,0,.38);
  }

  body[data-page="configurator"] .mockup-topline,
  body[data-page="configurator"] .mockup-status,
  body[data-page="configurator"] .mockup-footer{
    font-size:.78rem;
  }

  body[data-page="configurator"] .channel-tile{
    min-height:72px;
    padding:9px;
  }

  body[data-page="configurator"] .channel-tile strong{
    font-size:.88rem;
  }

  body[data-page="configurator"] .section-heading h2,
  body[data-page="configurator"] .panel h2{
    font-size:1.55rem;
  }

  body[data-page="configurator"] .carousel-meta{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  body[data-page="configurator"] .drag-hint{
    max-width:none;
    justify-content:center;
  }

  body[data-page="configurator"] .dots{
    justify-content:flex-start;
  }

  body[data-page="configurator"] .plan-card{
    flex-basis:min(86vw,310px);
    min-height:282px;
    padding:15px;
  }

  body[data-page="configurator"] .plan-number{
    font-size:2.3rem;
  }

  body[data-page="configurator"] .configurator-card{
    padding:14px;
  }

  body[data-page="configurator"] .steps{
    margin-bottom:14px;
  }

  body[data-page="configurator"] .device-card{
    flex-basis:min(84vw,292px);
    min-height:184px;
  }

  body[data-page="configurator"] .device-card .icon svg{
    width:58px;
    height:58px;
  }

  body[data-page="configurator"] .result-head{
    align-items:flex-start;
  }

  body[data-page="configurator"] .result-head .icon{
    width:46px;
    height:46px;
    flex-basis:46px;
  }

  body[data-page="configurator"] .public-footer nav,
  body[data-page="configurator"] .public-footer a{
    width:100%;
  }
}

@media(min-width:900px) and (max-width:1100px){
  body[data-page="configurator"] .landing-plan-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body[data-page="configurator"] .landing-plan-grid .plan-card{
    min-height:292px;
  }

  body[data-page="configurator"] .device-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(min-width:1101px){
  body[data-page="configurator"] .landing-plan-grid .plan-card{
    min-height:292px;
  }

  body[data-page="configurator"] .device-card{
    min-height:196px;
  }
}