/* DOM-TOM IPTV — redesign components (dt-*). Brand: black/zinc, crimson #e50914. */
:root{--dt-red:#e50914;--dt-red-d:#7f1d1d;--dt-zinc:#18181b;--dt-line:#27272a;--dt-muted:#a1a1aa}
html{scroll-behavior:smooth}
#plans,#faq,#chaines,#guides{scroll-margin-top:96px}

/* Navigation */
.dt-nav-links{display:none;align-items:center;gap:1.4rem;font-size:.875rem;font-weight:600;color:#d4d4d8}
.dt-nav-links a{color:inherit;text-decoration:none;transition:color .15s}
.dt-nav-links a:hover{color:#fff}
.dt-nav-links a.dt-nav-guides{color:#fff;padding:.4rem .85rem;border:1px solid rgba(229,9,20,.55);border-radius:9999px;background:rgba(229,9,20,.12)}
.dt-nav-links a.dt-nav-guides:hover{background:var(--dt-red);border-color:var(--dt-red)}
.dt-nav-guides-m{font-size:.75rem;font-weight:700;color:#fff;text-decoration:none;padding:.4rem .7rem;border:1px solid rgba(229,9,20,.55);border-radius:9999px;background:rgba(229,9,20,.12)}
.dt-nav-wa{display:inline-flex;align-items:center;gap:.4rem;background:var(--dt-red);color:#fff;text-decoration:none;font-weight:700;font-size:.75rem;padding:.45rem .8rem;border-radius:.375rem;transition:background .15s,transform .15s}
.dt-nav-wa:hover{background:#b91c1c}
.dt-nav-wa:active{transform:scale(.96)}
@media(min-width:768px){.dt-nav-links{display:flex}.dt-nav-guides-m{display:none}.dt-nav-wa{font-size:.875rem;padding:.5rem 1.1rem}}
@media(max-width:380px){.dt-nav-wa span{display:none}.dt-nav-wa{padding:.5rem}}

/* Hero */
.dt-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 18%,rgba(229,9,20,.32),transparent 60%),radial-gradient(ellipse 60% 50% at 85% 85%,rgba(127,29,29,.35),transparent 65%),linear-gradient(180deg,#0a0a0a 0%,#000 100%)}
.dt-hero-bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%)}
.dt-hero-ctas{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:36rem;margin:0 auto}
@media(min-width:640px){.dt-hero-ctas{flex-direction:row}}
.dt-cta-wa,.dt-cta-plans{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.85rem 1.5rem;border-radius:.6rem;font-weight:800;font-size:1rem;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s}
.dt-cta-wa{background:var(--dt-red);color:#fff;box-shadow:0 0 22px rgba(229,9,20,.45)}
.dt-cta-wa:hover{background:#b91c1c;transform:translateY(-2px);box-shadow:0 0 32px rgba(229,9,20,.6)}
.dt-cta-plans{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.22)}
.dt-cta-plans:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
@media(min-width:768px){.dt-cta-wa,.dt-cta-plans{font-size:1.05rem;min-height:58px}}
.dt-video{position:relative;width:100%;max-width:46rem;margin:2rem auto 0;aspect-ratio:16/9;border-radius:1rem;overflow:hidden;border:1px solid rgba(229,9,20,.35);background:#0a0a0a;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(229,9,20,.18)}
.dt-video wistia-player{display:block;width:100%;height:100%}
.dt-video-sm{margin:0;max-width:none;border-color:var(--dt-line)}
.dt-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;width:100%;max-width:46rem;margin:1.75rem auto 0}
@media(min-width:768px){.dt-stats{grid-template-columns:repeat(4,1fr)}}
.dt-stat{background:rgba(24,24,27,.85);border:1px solid var(--dt-line);border-radius:.75rem;padding:.9rem .5rem;text-align:center;backdrop-filter:blur(6px)}
.dt-stat strong{display:block;font-size:1.35rem;font-weight:900;color:#fff;letter-spacing:-.02em;line-height:1.1}
.dt-stat span{display:block;margin-top:.3rem;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dt-muted)}
@media(min-width:768px){.dt-stat strong{font-size:1.6rem}}

/* Sections */
.dt-section{padding:3rem 1rem}
@media(min-width:768px){.dt-section{padding:4.5rem 3rem}}
.dt-section.pt-0{padding-top:0}
.dt-wrap{max-width:80rem;margin:0 auto}
.dt-head{text-align:center;max-width:48rem;margin:0 auto 2.5rem}
.dt-head h2{font-size:1.9rem;line-height:1.1;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:#fff}
@media(min-width:768px){.dt-head h2{font-size:2.6rem}}
.dt-head p{margin-top:1rem;color:var(--dt-muted);font-size:1.05rem;line-height:1.6}
.dt-red{color:var(--dt-red)}
.dt-kicker{display:inline-block;margin-bottom:.9rem;font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--dt-red);border:1px solid rgba(229,9,20,.45);border-radius:9999px;padding:.3rem .8rem}
.dt-center{text-align:center;margin-top:2.25rem}
.dt-center .dt-cta-plans{flex:none;padding:.85rem 1.75rem}

/* Channel categories */
.dt-cats{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:768px){.dt-cats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.dt-cats{grid-template-columns:repeat(4,1fr)}}
.dt-cat{position:relative;background:linear-gradient(180deg,#18181b 0%,#0a0a0a 100%);border:1px solid var(--dt-line);border-radius:1rem;padding:1.6rem;transition:border-color .2s,transform .2s}
.dt-cat:hover{border-color:rgba(229,9,20,.6);transform:translateY(-4px)}
.dt-cat-ico{width:52px;height:52px;border-radius:.85rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#dc2626 0%,#7f1d1d 100%);box-shadow:0 0 18px rgba(229,9,20,.4);color:#fff;margin-bottom:1.1rem}
.dt-cat-ico svg{width:26px;height:26px}
.dt-cat h3{font-size:1.2rem;font-weight:800;color:#fff;margin-bottom:.5rem}
.dt-cat p{color:var(--dt-muted);font-size:.92rem;line-height:1.55;margin-bottom:1rem}
.dt-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.dt-chip{font-size:.75rem;font-weight:700;color:#e4e4e7;background:rgba(255,255,255,.05);border:1px solid var(--dt-line);border-radius:9999px;padding:.3rem .7rem;text-decoration:none}
a.dt-chip-link:hover{border-color:var(--dt-red);color:#fff;background:rgba(229,9,20,.15)}

/* Genre tiles */
.dt-genres{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.dt-genres{grid-template-columns:repeat(4,1fr)}}
.dt-genre{position:relative;aspect-ratio:16/10;border-radius:1rem;overflow:hidden;display:flex;align-items:flex-end;gap:.5rem;padding:1.1rem;color:#fff;font-weight:900;font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--dt-line);transition:transform .25s}
.dt-genre:hover{transform:scale(1.03)}
.dt-genre::before{content:"";position:absolute;inset:0;z-index:0}
.dt-genre>*{position:relative;z-index:1}
.dt-genre svg{color:var(--dt-red)}
.dt-g0::before{background:radial-gradient(circle at 80% 20%,rgba(229,9,20,.55),transparent 55%),linear-gradient(135deg,#27272a,#09090b)}
.dt-g1::before{background:radial-gradient(circle at 20% 15%,rgba(127,29,29,.8),transparent 60%),linear-gradient(160deg,#18181b,#000)}
.dt-g2::before{background:radial-gradient(circle at 70% 80%,rgba(229,9,20,.4),transparent 55%),linear-gradient(200deg,#3f3f46,#0a0a0a)}
.dt-g3::before{background:radial-gradient(circle at 30% 70%,rgba(185,28,28,.55),transparent 60%),linear-gradient(120deg,#0a0a0a,#27272a)}

/* Guides hub (home) */
.dt-guides{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:768px){.dt-guides{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.dt-guides{grid-template-columns:repeat(3,1fr)}}
.dt-guide{display:flex;flex-direction:column;background:#0a0a0a;border:1px solid var(--dt-line);border-radius:1rem;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,border-color .2s,box-shadow .2s}
.dt-guide:hover{transform:translateY(-4px);border-color:rgba(229,9,20,.6);box-shadow:0 14px 40px rgba(229,9,20,.12)}
.dt-guide img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;background:#18181b}
.dt-guide-body{padding:1.25rem 1.35rem 1.4rem;display:flex;flex-direction:column;flex:1}
.dt-guide-meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.75rem;color:#71717a;margin-bottom:.7rem}
.dt-guide-tag{color:#fca5a5;background:rgba(229,9,20,.14);border:1px solid rgba(229,9,20,.35);border-radius:9999px;padding:.2rem .6rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.65rem}
.dt-guide h3{font-size:1.08rem;line-height:1.35;font-weight:800;color:#fff;margin-bottom:.55rem}
.dt-guide p{font-size:.9rem;line-height:1.55;color:var(--dt-muted);flex:1}
.dt-guide-more{margin-top:1rem;font-size:.85rem;font-weight:800;color:var(--dt-red)}

/* Plans */
.dt-plans{display:grid;gap:1.5rem;grid-template-columns:1fr;max-width:80rem;margin:0 auto}
@media(min-width:768px){.dt-plans{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.dt-plans{grid-template-columns:repeat(4,1fr)}}
.dt-plan{position:relative;display:flex;flex-direction:column;padding:2rem 1.6rem;border-radius:1rem;border:1px solid #27272a;background:rgba(24,24,27,.6)}
.dt-plan-best{border-color:#dc2626;background:#18181b;box-shadow:0 0 40px rgba(229,9,20,.18)}
.dt-plan-flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:#dc2626;color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .95rem;border-radius:9999px;white-space:nowrap}
.dt-plan-top{margin-bottom:1.6rem}
.dt-plan-top h3{font-size:1.45rem;font-weight:800;color:#fff;margin-bottom:.4rem}
.dt-plan-price{display:flex;align-items:flex-start;gap:.2rem;color:#fff}
.dt-plan-price strong{font-size:2.8rem;font-weight:900;line-height:1;letter-spacing:-.03em}
.dt-plan-price span{font-size:1.4rem;font-weight:800;margin-top:.2rem}
.dt-plan-sub{margin-top:.6rem;font-size:.85rem;color:var(--dt-muted);display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.dt-plan-sub s{color:#71717a}
.dt-plan-save{background:rgba(34,197,94,.14);color:#4ade80;font-weight:800;border-radius:.3rem;padding:.05rem .4rem;font-size:.75rem}
.dt-plan ul{list-style:none;display:flex;flex-direction:column;gap:.85rem;margin:0 0 1.8rem;padding:0;flex:1}
.dt-plan li{display:flex;align-items:center;gap:.7rem;color:#d4d4d8;font-size:.95rem}
.dt-plan-btn{width:100%;padding:1rem;border-radius:.6rem;font-weight:800;background:#fff;color:#000;border:0;cursor:pointer;transition:background .15s}
.dt-plan-btn:hover{background:#e5e7eb}
.dt-plan-btn-red{background:#dc2626;color:#fff}
.dt-plan-btn-red:hover{background:#b91c1c}

/* Reviews */
.dt-shots{display:grid;gap:1rem;grid-template-columns:1fr;max-width:64rem;margin:2.5rem auto 0}
@media(min-width:768px){.dt-shots{grid-template-columns:repeat(2,1fr)}}
.dt-shots img{display:block;width:100%;height:auto;border-radius:.75rem;border:1px solid var(--dt-line);background:#fff}

/* FAQ: one plus icon that turns into × */
.dt-faq-ico{flex-shrink:0;width:26px;height:26px;color:var(--dt-red);transition:transform .25s ease}
.dt-faq-ico.dt-open{transform:rotate(45deg)}

/* Footer */
.dt-footer-grid{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media(min-width:640px){.dt-footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.dt-footer-grid{grid-template-columns:1.3fr 1fr 1.1fr 1fr}}
.dt-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.65rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#dc2626,#7f1d1d);border-radius:9999px;padding:.35rem .8rem;margin-bottom:1rem}
.dt-footer-wa{display:inline-flex;align-items:center;gap:.5rem;background:#0dbb59;color:#fff;font-weight:800;text-decoration:none;font-size:.85rem;padding:.65rem 1rem;border-radius:.5rem;transition:filter .15s}
.dt-footer-wa:hover{filter:brightness(1.08)}
.dt-footer-all{color:var(--dt-red);font-weight:800;text-decoration:none}

/* Floating WhatsApp: keep clear of content on phones */
@media(max-width:480px){.whatsapp-text-bubble{font-size:13px;padding:10px 14px}}


/* ---- Movies & VOD Poster Carousel (DOM-TOM) ---- */
.custom-carousel-wrapper { width: 100%; margin: 1.5rem 0 0; position: relative; }
.custom-movies-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 4px 18px;
  align-items: flex-start;
}
.custom-movies-track::-webkit-scrollbar { display: none; }
.custom-movie-slide {
  flex: 0 0 160px;
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
  background: #18181b;
  border: 1px solid #27272a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  user-select: none;
}
@media (min-width: 640px) {
  .custom-movie-slide { flex: 0 0 180px; }
}
@media (min-width: 1024px) {
  .custom-movie-slide { flex: 0 0 calc(16.666% - 14px); min-width: 175px; }
}
.custom-movie-slide:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(229, 9, 20, 0.7);
  box-shadow: 0 12px 30px rgba(229, 9, 20, 0.25);
}
.custom-movie-slide img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  border-radius: 13px;
  transition: transform 0.3s ease;
}
.custom-movie-slide:hover img {
  transform: scale(1.03);
}

.custom-features-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 1.5rem auto 0;
  max-width: 1100px;
}
.custom-feature-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  min-height: 48px;
  background: rgba(24, 24, 27, 0.85);
  border: 1px solid #27272a;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}
.custom-feature-pill:hover {
  border-color: rgba(229, 9, 20, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(229, 9, 20, 0.25);
}
.custom-feature-icon { font-size: 18px; line-height: 1; }
.custom-feature-text { display: flex; flex-direction: column; line-height: 1.25; }
.custom-feature-title { font-size: 13px; font-weight: 700; color: #ffffff; }
.custom-feature-desc { font-size: 11.5px; font-weight: 600; color: #e50914; }

@media (max-width: 480px) {
  .custom-movie-slide { flex: 0 0 135px !important; }
  .custom-movie-slide img { height: 195px !important; }
}

@media (min-width: 681px) and (max-width: 1024px) {
  .custom-features-badges {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin: 1.25rem auto 0 !important;
  }
  .custom-feature-pill {
    padding: 10px 14px !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 680px) {
  .custom-features-badges {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin: 1.2rem auto 0 !important;
    padding: 0 2px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .custom-feature-pill {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 12px 10px !important;
    min-height: 82px !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #18181b 0%, #111113 100%) !important;
    border: 1px solid #27272a !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .custom-feature-pill:hover,
  .custom-feature-pill:active {
    border-color: rgba(229, 9, 20, 0.7) !important;
    box-shadow: 0 4px 16px rgba(229, 9, 20, 0.25) !important;
    transform: translateY(-2px) !important;
  }
  .custom-feature-icon {
    font-size: 20px !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
  }
  .custom-feature-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    width: 100% !important;
  }
  .custom-feature-title {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
  }
  .custom-feature-desc {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #e50914 !important;
    line-height: 1.2 !important;
  }
}