/* ======================================================================
   RAMNET TELECOM — components.css
   Componentes multipáginas: breadcrumb, inner-hero, grids de home, FAQ
   ====================================================================== */

/* ─── BREADCRUMB ──────────────────────────────────────────────────── */
.breadcrumb{background:var(--gray-bg);padding:10px 0;border-bottom:1px solid var(--gray-mid)}
.breadcrumb-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--gray-text)}
.breadcrumb a{color:var(--cyan);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--cyan-h)}
.breadcrumb .atual{color:var(--text);font-weight:600}
.breadcrumb .sep{color:var(--gray-mid)}

/* ─── NAV ATIVO ───────────────────────────────────────────────────── */
.header__nav-link.ativo{color:var(--cyan)!important;border-bottom:2px solid var(--cyan)}

/* ─── INNER HERO ──────────────────────────────────────────────────── */
/* Wifi float animation */
@keyframes wifi-float{0%,100%{transform:translateY(0) rotate(-6deg);opacity:.18}50%{transform:translateY(-18px) rotate(6deg);opacity:.26}}
@keyframes wifi-float-hero{0%,100%{transform:translateY(0) rotate(-4deg) scale(1);opacity:.22}50%{transform:translateY(-22px) rotate(4deg) scale(1.04);opacity:.32}}

.inner-hero{background:linear-gradient(135deg,var(--navy) 0%,var(--dark) 60%,var(--cyan) 100%);padding:clamp(48px,8vw,80px) 0;position:relative;overflow:hidden}
.inner-hero::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;border:80px solid rgba(255,255,255,.04);right:-100px;top:-180px;pointer-events:none}
.inner-hero__wifi{position:absolute;right:-30px;top:50%;transform:translateY(-50%);width:220px;height:220px;border-radius:50%;overflow:hidden;pointer-events:none;animation:wifi-float 5s ease-in-out infinite;filter:drop-shadow(0 0 32px rgba(0,168,212,.35))}
.inner-hero__wifi img{width:100%;height:100%;object-fit:cover}
.hero-float-logo{position:absolute;border-radius:50%;overflow:hidden;background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.12);opacity:0.38;visibility:hidden;z-index:3;pointer-events:none;width:260px;height:260px;top:0;left:0}
.hero-float-logo img,.play-hero-logo img{width:100%;height:100%;object-fit:cover}
.play-hero-logo{position:absolute;border-radius:50%;overflow:hidden;background:rgba(255,255,255,0.06);border:1.5px solid rgba(255,255,255,0.12);opacity:0.38;visibility:hidden;z-index:3;pointer-events:none;width:260px;height:260px;top:0;left:0}


/* Wifi for main hero fiber slide */
.hero__wifi{position:absolute;right:6%;top:50%;transform:translateY(-50%);width:260px;height:260px;border-radius:50%;overflow:hidden;pointer-events:none;animation:wifi-float-hero 5.5s ease-in-out infinite;filter:drop-shadow(0 0 48px rgba(0,168,212,.45));z-index:2}
.hero__wifi img{width:100%;height:100%;object-fit:cover}
/* hero__wifi oculto com banner: ver style.css */
.inner-hero .container{position:relative;z-index:1}
.inner-hero__tag{display:inline-block;background:var(--yellow);color:var(--text);font-family:'Exo 2',sans-serif;font-size:.7rem;font-weight:800;padding:5px 16px;border-radius:20px;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px}
.inner-hero__title{font-family:'Exo 2',sans-serif;font-weight:900;font-size:clamp(2rem,4vw,2.75rem);color:#fff;line-height:1.08;letter-spacing:-.03em;margin-bottom:14px}
.inner-hero__title em{color:var(--yellow);font-style:normal}
.inner-hero__sub{font-size:1rem;color:rgba(255,255,255,.82);max-width:580px;line-height:1.65;margin-bottom:24px}
.inner-hero__actions{display:flex;gap:12px;flex-wrap:wrap}

/* ─── SERVICES GRID (home) ────────────────────────────────────────── */
.services-sec{padding:80px 0;background:var(--gray-bg)}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.service-card{background:#fff;border-radius:var(--r-lg);padding:28px 24px;border:1.5px solid var(--gray-mid);display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--text);transition:transform .3s var(--ease-bounce),box-shadow .3s,border-color .2s;position:relative;overflow:hidden}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--cyan)}
.service-card__icon{font-size:2.25rem}
.service-card__name{font-family:'Exo 2',sans-serif;font-weight:800;font-size:1.15rem;color:var(--text)}
.service-card__desc{font-size:.875rem;color:var(--gray-text);line-height:1.6;flex:1}
.service-card__link{font-family:'Exo 2',sans-serif;font-size:.85rem;font-weight:700;color:var(--cyan);display:inline-flex;align-items:center;gap:4px;margin-top:4px}
.service-card--combo{background:linear-gradient(135deg,var(--dark),var(--cyan));border-color:var(--cyan)}
.service-card--combo .service-card__name,.service-card--combo .service-card__desc,.service-card--combo .service-card__link{color:#fff}

/* ─── WHY RAMNET (home) ───────────────────────────────────────────── */
.why-sec{padding:80px 0;background:#fff}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.why-card{text-align:center;padding:28px 20px;border-radius:var(--r-lg);background:var(--gray-bg);border:1px solid var(--gray-mid);transition:transform .3s var(--ease-bounce),box-shadow .3s}
.why-card:hover{transform:translateY(-4px);box-shadow:var(--sh-sm)}
.why-card__icon{font-size:2.5rem;margin-bottom:14px}
.why-card__num{font-family:'Exo 2',sans-serif;font-size:2rem;font-weight:900;color:var(--cyan);margin-bottom:6px;line-height:1}
.why-card__title{font-family:'Exo 2',sans-serif;font-weight:800;font-size:1rem;color:var(--text);margin-bottom:8px}
.why-card__text{font-size:.85rem;color:var(--gray-text);line-height:1.6}

/* ─── HOME COVERAGE TEASER ────────────────────────────────────────── */
.coverage-teaser{padding:72px 0;background:var(--gray-bg)}
.coverage-teaser__inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.coverage-teaser__chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}

/* ─── FAQ ─────────────────────────────────────────────────────────── */
.faq-sec{padding:72px 0;background:var(--gray-bg)}
.faq-list{max-width:720px}
.faq-item{border:1.5px solid var(--gray-mid);border-radius:var(--r);overflow:hidden;margin-bottom:10px;transition:border-color .2s}
.faq-item.open{border-color:var(--cyan)}
.faq-question{padding:16px 20px;font-family:'Exo 2',sans-serif;font-weight:700;font-size:.95rem;color:var(--text);cursor:pointer;display:flex;justify-content:space-between;align-items:center;background:#fff;gap:12px}
.faq-question:hover{color:var(--cyan)}
.faq-arrow{font-size:.75rem;transition:transform .2s;flex-shrink:0;color:var(--gray-text)}
.faq-item.open .faq-arrow{transform:rotate(180deg);color:var(--cyan)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .2s;background:#fff;padding:0 20px;color:var(--gray-text);font-size:.9rem;line-height:1.7}
.faq-item.open .faq-answer{max-height:300px;padding:0 20px 16px}

/* ─── PAGE TABS (telefonia) ───────────────────────────────────────── */
.page-tabs{display:flex;gap:0;border-bottom:2px solid var(--gray-mid);margin-bottom:48px}
.page-tab{padding:14px 28px;background:none;border:none;border-bottom:3px solid transparent;font-family:'Exo 2',sans-serif;font-weight:700;font-size:1rem;color:var(--gray-text);cursor:pointer;transition:var(--t);margin-bottom:-2px}
.page-tab:hover{color:var(--cyan)}
.page-tab.active{color:var(--cyan);border-bottom-color:var(--cyan)}
.page-panel{display:none}
.page-panel.active{display:block}

/* ─── WHY FIBER (internet) ────────────────────────────────────────── */
.fiber-why{padding:72px 0;background:#fff}
.fiber-why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fiber-why__card{padding:28px;background:var(--gray-bg);border-radius:var(--r-lg);border-left:4px solid var(--cyan)}
.fiber-why__icon{font-size:2rem;margin-bottom:12px}
.fiber-why__title{font-family:'Exo 2',sans-serif;font-weight:800;font-size:1.05rem;color:var(--text);margin-bottom:8px}
.fiber-why__text{font-size:.9rem;color:var(--gray-text);line-height:1.65}

/* ─── PLAY COMPARE (ramnet-play) ──────────────────────────────────── */
.play-compare{padding:72px 0;background:var(--gray-bg)}
.play-compare__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:0 auto}
.play-plan-card{background:#fff;border-radius:var(--r-lg);overflow:hidden;border:2px solid var(--gray-mid);transition:transform .3s var(--ease-bounce),box-shadow .3s;position:relative}
.play-plan-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.play-plan-card--elite{border-color:var(--cyan)}
.play-plan-card__hd{background:linear-gradient(135deg,var(--dark),var(--cyan));padding:24px;text-align:center}
.play-plan-card--elite .play-plan-card__hd{background:linear-gradient(135deg,var(--navy),var(--cyan))}
.play-plan-card__name{font-family:'Exo 2',sans-serif;font-weight:900;font-size:1.5rem;color:#fff;margin-bottom:4px}
.play-plan-card__channels{font-size:.85rem;color:rgba(255,255,255,.75);margin-bottom:12px}
.play-plan-card__price{display:flex;align-items:baseline;gap:3px;justify-content:center;color:#fff}
.play-plan-card__price strong{font-family:'Exo 2',sans-serif;font-size:2rem;font-weight:900;color:var(--yellow)}
.play-plan-card__price small{font-size:.8rem;opacity:.75}
.play-plan-card__pricing-detail{margin-top:10px;display:flex;flex-direction:column;gap:5px;padding:10px 14px;background:rgba(255,255,255,.1);border-radius:8px}
.ppc-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ppc-label{font-family:'Exo 2',sans-serif;font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:4px;flex-shrink:0}
.ppc-label.combo{background:var(--yellow);color:var(--text)}
.ppc-label.avulso{background:rgba(255,255,255,.2);color:#fff}
.ppc-val{font-family:'Exo 2',sans-serif;font-weight:800;font-size:.95rem;color:#fff;flex-shrink:0}
.ppc-val small{font-size:.7rem;font-weight:400;opacity:.8}
.ppc-hint{font-size:.72rem;color:rgba(255,255,255,.65);font-style:italic}
.play-plan-card__body{padding:24px}
.play-plan-card__body ul{display:flex;flex-direction:column;gap:8px}
.play-plan-card__body li{font-size:.875rem;color:var(--text);display:flex;align-items:center;gap:8px}
.play-plan-card__body .btn{margin-top:20px;width:100%}

/* ─── APP CATEGORIES (ramnet-mais) ───────────────────────────────── */
.app-category{margin-bottom:48px}
.app-category__title{font-family:'Exo 2',sans-serif;font-weight:800;font-size:1rem;color:var(--text);margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid var(--gray-mid);display:flex;align-items:center;gap:8px}
.categoria-header{display:flex;align-items:center;gap:16px;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid var(--cyan);flex-wrap:wrap}
.categoria-titulo{font-family:'Exo 2',sans-serif;font-size:20px;font-weight:800;color:#003d5c}
.categoria-preco{background:#003d5c;color:#fdd835;font-size:13px;font-weight:700;padding:4px 12px;border-radius:50px}
.categoria-preco-avulso{background:#e8f0fe;color:#003d5c;font-size:12px;font-weight:600;padding:3px 10px;border-radius:50px;margin-left:4px}
.categoria-desc{font-size:13px;color:#777;width:100%;margin-top:-8px}

/* ─── COMBO INCLUSO (Play TOP auto) ──────────────────────────────── */
.combo-opt.incluso .combo-opt__card{border-color:#43a047;background:linear-gradient(135deg,#f1f8e9,#e8f5e9);opacity:.9;cursor:not-allowed}
.combo-opt.incluso .coc-note{background:#43a047;color:#fff;border-radius:4px;padding:2px 6px;font-size:.7rem;font-weight:700}

/* ─── COBERTURA MAP ───────────────────────────────────────────────── */
.map-placeholder{background:linear-gradient(135deg,var(--navy) 0%,var(--dark) 100%);border-radius:var(--r-lg);height:340px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;text-align:center;padding:32px}
.map-placeholder__icon{font-size:3rem}
.map-placeholder__title{font-family:'Exo 2',sans-serif;font-weight:800;font-size:1.25rem;color:#fff}
.map-placeholder__text{color:rgba(255,255,255,.72);font-size:.9rem;line-height:1.6}

/* ─── EMPRESAS CONTACT FORM ───────────────────────────────────────── */
.empresas-contact{padding:72px 0;background:var(--gray-bg)}
.empresas-contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}

/* ─── HEADER COMBO BTN HIDE ON SMALL ─────────────────────────────── */
@media(max-width:1024px){.header-combo-btn{display:none}}
@media(max-width:768px){
  .header__actions .btn--cyan,.header__actions .btn--primary{display:none}
  .services-grid{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:1fr 1fr}
  .play-compare__grid,.fiber-why__grid,.empresas-contact__grid,.coverage-teaser__inner{grid-template-columns:1fr}
  .inner-hero__actions .btn{width:100%}
  .page-tabs{flex-wrap:wrap}
  .page-tab{flex:1;min-width:120px;text-align:center}
}
@media(max-width:480px){
  .services-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr 1fr}
}

/* ─── SERVIÇOS INCLUSOS NOS PLANOS ────────────────────────────────── */
.plano-servicos-inclusos{display:flex;flex-direction:column;gap:8px;padding:14px 0 4px;border-top:1px solid var(--gray-mid);margin-top:12px}
.servico-incluso{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text);font-weight:500}
.servico-incluso img{width:22px;height:22px;object-fit:contain;flex-shrink:0}
.servico-incluso .servico-icon{font-size:16px;width:22px;text-align:center;flex-shrink:0}

/* ─── APP MODAL ────────────────────────────────────────────────────── */
.app-modal{display:none;position:fixed;inset:0;z-index:9999}
.app-modal.aberto{display:flex;align-items:center;justify-content:center}
.app-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px)}
.app-modal-content{position:relative;z-index:1;background:#fff;border-radius:20px;padding:32px;max-width:480px;width:90%;box-shadow:0 24px 64px rgba(0,0,0,.3);animation:modalSlideIn .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes modalSlideIn{from{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-fechar{position:absolute;top:16px;right:16px;background:#f5f5f5;border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:16px;transition:background .2s}
.modal-fechar:hover{background:#e0e0e0}
.modal-header{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.modal-icon{width:64px;height:64px;border-radius:14px;object-fit:contain;background:var(--gray-bg)}
.modal-nome{font-size:22px;font-weight:800;color:var(--dark)}
.modal-categoria{font-size:12px;color:var(--cyan);font-weight:600;text-transform:uppercase}
.modal-descricao{font-size:15px;color:#555;line-height:1.6;margin-bottom:20px}
.modal-preco{background:#f0fbff;border-radius:10px;padding:12px 16px;margin-bottom:20px}
.preco-label{font-size:12px;color:#777;display:block;margin-bottom:4px}
.preco-valor{font-size:24px;font-weight:900;color:var(--dark)}
.modal-acoes{display:flex;gap:12px}
.btn-acessar{flex:1;text-align:center;padding:12px;border:2px solid var(--cyan);color:var(--cyan);border-radius:8px;font-weight:700;text-decoration:none;transition:all .2s}
.btn-acessar:hover{background:var(--cyan);color:#fff}
.btn-adicionar{flex:1;text-align:center;padding:12px;background:var(--yellow);color:var(--dark);border-radius:8px;font-weight:800;text-decoration:none;transition:all .2s}
.btn-adicionar:hover{background:var(--yellow-h)}
.app-card{cursor:pointer;transition:transform .2s,box-shadow .2s}
.app-card:hover{transform:translateY(-3px);box-shadow:var(--sh-sm)}

/* ─── COMBO MAIS+ EXPAND/COLLAPSE ────────────────────────────────── */
.combo-mais__content{display:none;margin-top:16px}
.combo-mais__content.aberto{display:block}
.cmais-arr{display:inline-block;transition:transform .25s}
.combo-mais__toggle.aberto .cmais-arr{transform:rotate(180deg)}

/* ─── COMBO MAIS+ APP CARDS ──────────────────────────────────────── */
.combo-apps-cat{margin-bottom:24px}
.combo-apps-cat__header{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--cyan);flex-wrap:wrap}
.combo-apps-cat__name{font-family:'Exo 2',sans-serif;font-size:.95rem;font-weight:800;color:#003d5c}
.combo-apps-cat__preco{background:#003d5c;color:#fdd835;font-size:11px;font-weight:700;padding:3px 10px;border-radius:50px}
.combo-apps-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.combo-app-card{position:relative;cursor:pointer;background:#fff;border-radius:var(--r);padding:12px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;border:2px solid var(--gray-mid);transition:transform .18s,border-color .18s,box-shadow .18s,background .18s;user-select:none}
.combo-app-card input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}
.combo-app-card .app-card__icon{width:44px;height:44px;border-radius:10px;font-size:1.2rem}
.combo-app-card span{font-family:'Exo 2',sans-serif;font-size:.7rem;font-weight:700;color:var(--text);line-height:1.25}
.combo-app-card:hover{border-color:var(--cyan);transform:translateY(-2px)}
.combo-app-card:has(input:checked),.combo-app-card.selecionado{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,168,212,.2);background:var(--cyan-lt)}
.cab-check{display:none;position:absolute;top:5px;right:5px;width:16px;height:16px;background:var(--cyan);border-radius:50%;color:#fff;font-size:9px;font-weight:900;align-items:center;justify-content:center}
.combo-app-card:has(input:checked) .cab-check,.combo-app-card.selecionado .cab-check{display:flex}
@media(max-width:900px){.combo-apps-grid{grid-template-columns:repeat(4,1fr)}}

/* ─── ÍCONES OPÇÃO 2 — círculo + acento ─────────────────────────────────────────── */
.ic2{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ic2-clr,#00a8d4);display:flex;align-items:center;justify-content:center;margin:0 auto}
.ic2 i{font-size:22px;color:var(--ic2-clr,#00a8d4)}
.ic2-cyan{--ic2-clr:#00a8d4}
.ic2-navy{--ic2-clr:#003d5c}
.ic2-yellow{--ic2-clr:#f9cf00}
.ic2-green{--ic2-clr:#1D9E75}