/* Fatec IPTV — folha de estilo v2, escrita do zero. Tema claro com índigo. */
:root{
 --ix:#4f46e5;--ix-deep:#3730a3;--ix-soft:#eef0ff;--ix-line:#c7cbff;--vio:#7c3aed;
 --txt:#161a3a;--txt-2:#4a5075;--txt-3:#7d82a6;
 --paper:#ffffff;--paper-2:#f5f6fb;--paper-3:#eceef7;--rule:#e2e5f2;
 --warn:#dc2626;--radius:18px;--max:1140px;
 --shadow:0 1px 2px rgba(22,26,58,.06),0 12px 32px -12px rgba(22,26,58,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper-2);color:var(--txt-2);font:16px/1.65 Sora,ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif}
h1,h2,h3,h4{margin:0 0 .45em;color:var(--txt);font-weight:700;line-height:1.15;letter-spacing:-.025em}
h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800}
h2{font-size:clamp(1.55rem,3.3vw,2.25rem)}
h3{font-size:1.12rem}
p{margin:0 0 1em}
a{color:var(--ix);text-decoration:none}
a:hover{color:var(--ix-deep);text-decoration:underline}
img,svg{display:block;max-width:100%}
.shell{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:72px 0}
section.tint{background:var(--paper)}
section.snug{padding-top:16px}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}
.lede{font-size:1.1rem;max-width:700px;margin-bottom:1.1em}
.mark{color:var(--ix);position:relative;white-space:nowrap;isolation:isolate}
.mark::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.32em;background:var(--ix-soft);z-index:-1;border-radius:4px}
.dated{display:inline-block;font-size:.78rem;color:var(--txt-3);background:var(--paper-3);padding:4px 12px;border-radius:999px;margin:0 0 22px}

/* linha do topo */
.topline{background:var(--txt);color:#dfe2f5;font-size:.84rem;padding:8px 0;text-align:center}
.topline strong{color:#fff}
.topline a{color:#a5b4fc;font-weight:600}

/* cabeçalho */
.hdr{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:50}
.hdr-in{display:flex;align-items:center;gap:20px;min-height:74px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;color:var(--txt);letter-spacing:-.03em;margin-right:auto}
.logo:hover{text-decoration:none}
.logo img{width:38px;height:38px;border-radius:10px}
.logo em{font-style:normal;color:var(--ix)}
.menu{display:flex;gap:2px;margin:0;padding:0;list-style:none;align-items:center}
.menu a{display:block;padding:8px 11px;border-radius:999px;font-size:.88rem;font-weight:500;color:var(--txt-2)}
.menu a:hover{background:var(--paper-3);color:var(--txt);text-decoration:none}
.menu a.on{color:var(--ix);font-weight:600}
.menu-cta{background:var(--ix)!important;color:#fff!important;font-weight:600!important;margin-left:8px;padding:10px 18px!important}
.menu-cta:hover{background:var(--ix-deep)!important}
.burger{display:none;width:44px;height:42px;border:1px solid var(--rule);border-radius:10px;background:var(--paper);cursor:pointer;position:relative}
.burger i{position:absolute;left:12px;right:12px;height:2px;background:var(--txt);border-radius:2px;transition:.25s}
.burger i:nth-child(1){top:13px}.burger i:nth-child(2){top:20px}.burger i:nth-child(3){top:27px}
.burger.x i:nth-child(1){top:20px;transform:rotate(45deg)}.burger.x i:nth-child(2){opacity:0}.burger.x i:nth-child(3){top:20px;transform:rotate(-45deg)}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:600;font-size:.96rem;border:1.5px solid transparent;cursor:pointer;transition:.18s;text-decoration:none!important;line-height:1.2}
.btn-primary{background:var(--ix);color:#fff;box-shadow:0 6px 18px -6px rgba(79,70,229,.6)}
.btn-primary:hover{background:var(--ix-deep);color:#fff;transform:translateY(-1px)}
.btn-ghost{background:var(--paper);border-color:var(--rule);color:var(--txt)}
.btn-ghost:hover{border-color:var(--ix);color:var(--ix)}
.btn-lg{padding:15px 28px;font-size:1.03rem}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.center .cta,.cta.center{justify-content:center}

/* abertura */
.hero{padding:76px 0 68px;background:var(--paper);border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:auto -10% -60% auto;width:60%;height:120%;background:radial-gradient(closest-side,var(--ix-soft),transparent);pointer-events:none}
.hero-sm{padding:46px 0 50px}
.hero .shell{position:relative}
.hero-in{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border-radius:999px;background:var(--ix-soft);color:var(--ix-deep);font-size:.8rem;font-weight:600;margin-bottom:20px}
.tag-dot{width:8px;height:8px;border-radius:50%;background:var(--ix);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(79,70,229,.5)}100%{box-shadow:0 0 0 9px rgba(79,70,229,0)}}
.list-check{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.list-check li{position:relative;padding-left:32px}
.list-check li::before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--ix);color:#fff;font-size:.8rem;font-weight:800;display:grid;place-items:center;margin-top:2px}

/* passe de teste */
.ticket{background:var(--paper);border:1.5px dashed var(--ix-line);border-radius:22px;padding:26px 26px 22px;box-shadow:var(--shadow);position:relative}
.ticket::before,.ticket::after{content:"";position:absolute;width:26px;height:26px;border-radius:50%;background:var(--paper);border:1.5px dashed var(--ix-line);top:96px}
.ticket::before{left:-14px;clip-path:inset(0 0 0 50%)}.ticket::after{right:-14px;clip-path:inset(0 50% 0 0)}
.ticket-top{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:16px;border-bottom:1.5px dashed var(--ix-line);margin-bottom:18px}
.ticket-top span{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--txt-3);font-weight:600}
.ticket-top strong{font-size:2rem;color:var(--ix);letter-spacing:-.04em;font-weight:800}
.ticket-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:0 0 18px}
.ticket-bar i{height:10px;border-radius:5px;background:var(--paper-3);overflow:hidden;position:relative}
.ticket-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ix),var(--vio));transform:scaleX(0);transform-origin:left;animation:fillbar .5s ease-out forwards}
.ticket-bar i:nth-child(2)::after{animation-delay:.45s}.ticket-bar i:nth-child(3)::after{animation-delay:.9s}.ticket-bar i:nth-child(4)::after{animation-delay:1.35s}.ticket-bar i:nth-child(5)::after{animation-delay:1.8s}.ticket-bar i:nth-child(6)::after{animation-delay:2.25s}
@keyframes fillbar{to{transform:scaleX(1)}}
.ticket-plan{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0 0 20px;font-size:.92rem}
.ticket-plan dt{font-weight:700;color:var(--ix-deep);white-space:nowrap}
.ticket-plan dd{margin:0;color:var(--txt-2)}
.ticket .btn{width:100%}
.ticket-foot{margin:12px 0 0;font-size:.8rem;color:var(--txt-3);text-align:center}

/* recursos */
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.perk{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);padding:24px;transition:.2s}
.perk:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.perk-ico{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border-radius:12px;background:var(--ix-soft);color:var(--ix-deep);font-weight:800;font-size:.95rem;margin-bottom:14px}
.perk h3{margin-bottom:6px}
.perk p{margin:0;font-size:.94rem;color:var(--txt-2)}

/* rota (passos) */
.route{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:38px;counter-reset:rt;position:relative}
.route::before{content:"";position:absolute;left:12%;right:12%;top:26px;height:2px;background:var(--ix-line)}
.route-step{position:relative;padding:0 22px;text-align:center}
.route-step::before{counter-increment:rt;content:counter(rt);position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;margin:0 auto 18px;border-radius:50%;background:var(--ix);color:#fff;font-weight:800;font-size:1.2rem;box-shadow:0 0 0 8px var(--paper-2)}
section.tint .route-step::before{box-shadow:0 0 0 8px var(--paper)}
.route-step h3{margin-bottom:6px}
.route-step p{margin:0;font-size:.94rem}

/* blocos de horas (página 6 horas) */
.hours{display:grid;gap:12px;margin:0 0 24px}
.hour{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:start;background:var(--paper);border:1px solid var(--rule);border-left:5px solid var(--ix);border-radius:14px;padding:18px 20px}
.hour span{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ix-deep);padding-top:4px}
.hour h3{margin-bottom:4px;font-size:1.05rem}
.hour p{margin:0;font-size:.93rem}

/* tabela de planos em linhas */
.rates{margin-top:38px;display:grid;gap:12px}
.rate{display:grid;grid-template-columns:1.1fr 1fr 1.6fr auto;gap:20px;align-items:center;background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);padding:20px 24px}
.rate-best{border-color:var(--ix);box-shadow:0 0 0 4px var(--ix-soft)}
.rate-name h3{margin:0;font-size:1.15rem}
.rate-name span{font-size:.82rem;color:var(--txt-3)}
.rate-name em{display:inline-block;font-style:normal;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:var(--ix);padding:3px 9px;border-radius:999px;margin-left:8px;vertical-align:middle}
.rate-price b{display:block;font-size:1.9rem;color:var(--txt);letter-spacing:-.04em;line-height:1}
.rate-price small{display:block;font-size:.82rem;color:var(--ix-deep);font-weight:600;margin-top:4px}
.rate-info p{margin:0;font-size:.92rem}
.rate-info span{font-size:.8rem;color:var(--txt-3)}
.rate .btn{white-space:nowrap}
.rate-note{font-size:.85rem;color:var(--txt-3);text-align:center;margin:8px 0 0}

/* tabela comparativa */
.table{width:100%;border-collapse:collapse;margin-top:30px;font-size:.93rem;background:var(--paper);border-radius:var(--radius);overflow:hidden;box-shadow:0 0 0 1px var(--rule)}
.table th,.table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
.table th{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-3);background:var(--paper-2)}
.table tr:last-child td{border-bottom:0}
.table td:first-child{font-weight:600;color:var(--txt)}
.table th:nth-child(2),.table td:nth-child(2){background:var(--ix-soft)}
.ok{color:var(--ix-deep);font-weight:600}
.nope{color:var(--warn)}
.prose .table{margin-bottom:24px}

/* texto corrido */
.prose{max-width:800px;margin:0 auto}
.prose h2{margin-top:44px;font-size:1.6rem}
.prose h2::before{content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--ix);margin-bottom:14px}
.prose h2:first-of-type{margin-top:0}
.prose h3{margin-top:28px}
.prose ul,.prose ol{padding-left:24px;margin:0 0 20px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--txt)}
.note{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);padding:22px 26px;margin:0 0 26px;box-shadow:var(--shadow)}
.note strong{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ix);margin-bottom:10px}
.note ul{margin:0;padding-left:20px;color:var(--txt)}
.note li{margin-bottom:6px}
.howto{list-style:none;padding:0;margin:0 0 24px;counter-reset:hw}
.howto li{position:relative;counter-increment:hw;padding:16px 18px 16px 64px;margin-bottom:10px;background:var(--paper);border:1px solid var(--rule);border-radius:14px}
.howto li::before{content:counter(hw,decimal-leading-zero);position:absolute;left:18px;top:16px;font-weight:800;color:var(--ix);font-size:1.15rem;letter-spacing:-.02em}
.howto strong{color:var(--txt)}

/* perguntas */
.faq{max-width:1000px;margin:34px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.faq details{background:var(--paper);border:1px solid var(--rule);border-radius:14px}
.faq details[open]{border-color:var(--ix-line);box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;padding:16px 48px 16px 20px;font-weight:600;color:var(--txt);position:relative;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:22px;width:8px;height:8px;border-right:2px solid var(--ix);border-bottom:2px solid var(--ix);transform:rotate(45deg);transition:.2s}
.faq details[open] summary::after{transform:rotate(225deg);top:26px}
.faq details p{margin:0;padding:0 20px 18px;font-size:.95rem}

/* faixa de chamada */
.band{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:40px 44px;border-radius:24px;background:linear-gradient(115deg,var(--ix-deep),var(--ix) 55%,var(--vio));color:#dfe2f5}
.band h2{color:#fff;margin-bottom:6px}
.band .lede{margin:0;color:#e0e7ff}
.band .cta{margin:0;flex:0 0 auto}
.band .btn-primary{background:#fff;color:var(--ix-deep);box-shadow:none}
.band .btn-primary:hover{background:var(--ix-soft);color:var(--ix-deep)}

/* migalhas */
.crumbs{font-size:.82rem;color:var(--txt-3);padding:14px 24px 0}
.crumbs a{color:var(--txt-2)}
.crumbs span{margin:0 8px}

/* rodapé */
.ftr{background:var(--paper);border-top:1px solid var(--rule);padding:56px 0 28px}
.ftr-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px}
.ftr-grid h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;color:var(--txt-3);margin-bottom:14px}
.ftr-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr-grid a{color:var(--txt-2);font-size:.92rem}
.ftr-grid p{font-size:.92rem;margin-top:14px}
.ftr-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:1px solid var(--rule);margin-top:36px;padding-top:18px;font-size:.8rem;color:var(--txt-3)}
.ftr-legal{font-size:.75rem;color:var(--txt-3);margin:14px 0 0;line-height:1.5}

/* botão flutuante */
.fab{position:fixed;right:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;border-radius:14px;background:var(--txt);color:#fff;font-weight:600;font-size:.9rem;box-shadow:0 14px 30px -8px rgba(22,26,58,.5);transition:.2s;text-decoration:none!important}
.fab:hover{background:var(--ix);color:#fff;transform:translateY(-2px)}
.fab svg{width:22px;height:22px}
.fab-label{white-space:nowrap}

/* responsivo */
@media(max-width:1000px){
 .hero-in{grid-template-columns:1fr;gap:40px}
 .perks{grid-template-columns:1fr 1fr}
 .route{grid-template-columns:1fr;gap:26px}
 .route::before{display:none}
 .route-step{display:grid;grid-template-columns:52px 1fr;gap:0 18px;text-align:left;padding:0}
 .route-step::before{margin:0;grid-row:1/3}
 .rate{grid-template-columns:1fr 1fr;gap:14px}
 .rate .btn{grid-column:1/-1}
 .faq{grid-template-columns:1fr}
 .ftr-grid{grid-template-columns:1fr 1fr}
 .burger{display:block}
 .menu{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--paper);flex-direction:column;align-items:stretch;padding:92px 20px 30px;transform:translateX(100%);transition:.28s;box-shadow:-20px 0 40px rgba(22,26,58,.15);overflow-y:auto;z-index:45}
 .menu.open{transform:none}
 .menu a{padding:14px 12px;border-radius:10px;font-size:1rem}
 .menu-cta{margin:12px 0 0;text-align:center}
}
@media(max-width:600px){
 section{padding:52px 0}
 .shell{padding:0 18px}
 .perks{grid-template-columns:1fr}
 .rate{grid-template-columns:1fr;padding:18px}
 .hour{grid-template-columns:1fr;gap:6px}
 .band{flex-direction:column;align-items:flex-start;padding:30px 24px}
 .cta .btn{width:100%}
 .table{display:block;overflow-x:auto}
 .table th,.table td{white-space:nowrap}
 .ticket::before,.ticket::after{display:none}
 .fab{left:18px;right:18px;bottom:14px;justify-content:center;border-radius:999px}
 body{padding-bottom:72px}
}