/* Extramed — Protótipo v2 · Paleta do Manual da Marca (azul 56,55,128 / verde 157,211,175) */
:root { --navy: #383780; --navy-esc: #282760; --navy-claro: #4E4DA8; --navy-10: #EDEDF7; --mint: #9DD3AF; --mint-10: #F0F8F3; --mint-30: #D9EFE2; --verde-vivo: #2FA875; --verde-esc: #1F8259; --cinza: #5E6C77; --borda: #DFE4EC; --fundo: #F6F8FA; --branco: #FFF; --grad: linear-gradient(135deg, #383780 0%, #4E4DA8 55%, #2FA875 130%); }
* { margin: 0; padding: 0; box-sizing: border-box }
body { font-family: 'Nunito Sans', -apple-system, 'Segoe UI', Arial, sans-serif; background: var(--fundo); color: #243038; line-height: 1.65 }
h1,h2,h3,h4 { font-family: 'Quicksand', 'Nunito Sans', Arial, sans-serif; font-weight: 700 }
a { color: var(--verde-esc); text-decoration: none }
img { max-width: 100% }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px }
.fs-11 {font-size: 11px !important;}
.fs-12 {font-size: 12px !important;}
.fs-14 {font-size: 14px !important;}

/* Header */
header { position: sticky; top: 0; z-index: 40; background: #fff; box-shadow: 0 2px 14px rgba(40, 39, 96, .08) }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 26px; padding: 10px 20px 15px 20px; max-width: 1180px; margin: 0 auto; position: relative }
.brandLogo { height: 68px }
nav { display: flex; gap: 6px; flex: 1; justify-content: center; }
nav a { color: var(--navy); font-weight: 700; font-size: .9rem; padding: 10px 16px; border-radius: 24px; display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; line-height: 1; }
nav a:hover { background: var(--mint-10); color: var(--verde-esc) }
nav a.ativo { background: var(--navy); color: #fff }
.areas { display: flex; gap: 10px; align-items: center;}
.btn { display: inline-block; padding: 11px 22px; border-radius: 24px; font-weight: 800; font-size: .9rem; border: none; cursor: pointer; text-align: center; transition: .18s }
.btn-sm {padding: 6px 20px;}
.btnPri { background: var(--verde-vivo); color: #fff; box-shadow: 0 4px 14px rgba(47, 168, 117, .35); border: 2px solid rgba(47, 168, 117, .35); }.btnPri:hover { background: var(--verde-esc); transform: translateY(-2px) }
.btnSec { background: #fff; color: var(--navy); border: 2px solid var(--navy-10) }.btnSec:hover { border-color: var(--mint); color: var(--verde-esc) }
.btnAzul { background: var(--navy); color: #fff; border: 2px solid var(--navy) }.btnAzul:hover { background: var(--navy-claro); color:#fff; }
.btnVerde { background: var(--verde-vivo); color: #fff; border: 2px solid var(--verde-vivo) }.btnVerde:hover { background: var(--verde-esc); color:#fff; }
.btnBranco { background: #fff; color: var(--navy) }
.btnOutline { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .55) }.btnOutline:hover { border-color: var(--mint); color: var(--mint) }
.menuBtn { display: none; background: none; border: none; font-size: 1.7rem; color: var(--navy); cursor: pointer }

.table {width: 100%;}
/*.table td,.table th {white-space: wrap;}*/


/* Hero vibrante */
.hero{background:var(--grad);color:#fff;padding:38px 0 86px;position:relative;overflow:hidden}
.hero h1{font-size:2.05rem;line-height:1.2;max-width:660px}
.hero h1 em{font-style:normal;color:var(--mint)}
.hero p{font-size:1.05rem;opacity:.92;margin:12px 0 22px;max-width:560px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.heroDeco{position:absolute;right:-40px;top:20px;width:340px;opacity:.16;pointer-events:none}
.heroWaves{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:70px}
.chip{display:inline-block;background:rgba(157,211,175,.18);border:1px solid rgba(157,211,175,.5);color:var(--mint);font-weight:800;font-size:.78rem;border-radius:20px;padding:5px 14px;margin-bottom:16px;letter-spacing:.05em;text-transform:uppercase}

/* Sections */
section{padding:40px 0}
.secTag{color:var(--verde-vivo);font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em}
h2{color:var(--navy);font-size:1.75rem;line-height:1.28;margin:8px 0 14px}
.sub{color:var(--cinza);max-width:660px;font-size:1.02rem}
.secMint{background:var(--mint-10)}
.secNavy{background:var(--navy);color:#fff}
.secNavy h2{color:#fff}

/* Acesso rápido — cards com ícone */
.acesso { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-top: 28px }
.acesso a { background: #fff; border: 2px solid transparent; border-radius: 16px; padding: 22px 14px; text-align: center; font-weight: 800; color: var(--navy); font-size: .9rem; box-shadow: 0 3px 12px rgba(40, 39, 96, .07); transition: .18s }
.acesso a:hover { transform: translateY(-4px); border-color: var(--mint); color: var(--verde-esc) }
.ico { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px }
.icoNavy { background: var(--navy-10) }
.icoMint { background: var(--mint-30) }

/* Cards de soluções */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 32px }
.card { background: #fff; border-radius: 18px; padding: 28px 24px; box-shadow: 0 4px 16px rgba(40, 39, 96, .08); border: 2px solid transparent; transition: .18s; position: relative }
.card:hover { transform: translateY(-5px); border-color: var(--mint); box-shadow: 0 12px 28px rgba(40, 39, 96, .14) }
.card h3 { color: var(--navy); font-size: 1.15rem; margin-bottom: 8px }
.card p { font-size: .93rem; color: var(--cinza) }
.card .seta { position: absolute; right: 20px; bottom: 14px; color: var(--verde-vivo); font-weight: 800; font-size: 1.2rem; opacity: 0; transition: .18s }
.card:hover .seta { opacity: 1 }

.opcoes {display: flex; gap: 2rem;}
.opcoes .card {flex: 1 1 0;  min-width: 0;}

/* Faixa de números */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; text-align: center }
.stats b { display: block; font-family: 'Quicksand', sans-serif; font-size: 2.1rem; color: var(--mint) }
.stats span { font-size: .9rem; opacity: .85 }

/* Split */
.split { display: grid; grid-template-columns: 1.40fr .95fr; gap: 48px; align-items: center }
.split img { border-radius: 20px; box-shadow: 0 14px 36px rgba(40, 39, 96, .16) }
.split .txt p { margin-bottom: 12px; color: #37444D }
.selo { display: inline-block; background: var(--mint-30); color: var(--verde-esc); font-weight: 800; font-size: .8rem; border-radius: 20px; padding: 6px 16px; margin-bottom: 14px }

/* Atuação */
.bloco {scroll-margin-top: 100px;}
.bloco { display: grid; grid-template-columns: .85fr 1.15fr; gap: 38px; align-items: center; background: #fff; border-radius: 20px; padding: 34px; margin-top: 28px; box-shadow: 0 4px 16px rgba(40, 39, 96, .07); border-left: 6px solid var(--mint) }
.bloco:nth-of-type(even) { border-left-color: var(--navy) }
.bloco img { border-radius: 14px }
.bloco h3 { color: var(--navy); font-size: 1.4rem; margin-bottom: 10px }
.bloco ul { margin: 10px 0 14px 18px; color: #37444D; font-size: .95rem }
.bloco .fones { background: var(--mint-10); border-radius: 12px; padding: 14px 18px; font-size: .92rem; color: var(--navy-esc); margin: 14px 0 }
.bloco .fones b { color: var(--verde-esc) }

/* Blog */
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 30px }
.post { background: #fff; border-radius: 18px; padding: 24px; display: flex; flex-direction: column; box-shadow: 0 4px 16px rgba(40, 39, 96, .08); transition: .18s; border: 2px solid transparent }
.post:hover { transform: translateY(-4px); border-color: var(--mint) }
.post .cat { background: var(--navy); color: #fff; font-size: .7rem; font-weight: 800; border-radius: 12px; padding: 4px 12px; align-self: flex-start; letter-spacing: .05em }
.post h3 { color: var(--navy); font-size: 1.06rem; margin: 12px 0 8px }
.post p { font-size: .89rem; color: var(--cinza); flex: 1 }
.post .data { font-size: .75rem; color: var(--cinza); margin-top: 14px }

/* Operadoras */
.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 30px }
.logos img { background: #fff; border-radius: 14px; padding: 12px; width: 100%; height: 98px; object-fit: contain; box-shadow: 0 3px 10px rgba(40, 39, 96, .07); transition: .18s }
.logos img:hover { transform: scale(1.05) }

/* CTA band */
.ctaBand { background: var(--grad); border-radius: 22px; color: #fff; padding: 44px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; position: relative; overflow: hidden }
.ctaBand h2 { color: #fff; margin: 0; font-size: 1.5rem }
.ctaBand p { opacity: .9; margin-top: 6px }

/* Forms */
.formCard { background: #fff; border-radius: 18px; padding: 32px; max-width: 680px; box-shadow: 0 4px 18px rgba(40, 39, 96, .09) }
.formCard label { display: block; font-weight: 700; color: var(--navy); font-size: .9rem; margin: 15px 0 5px }
.formCard input,
.formCard select,
.formCard textarea { width: 100%; padding: 12px 14px; border: 2px solid var(--borda); border-radius: 11px; font-size: .95rem; font-family: inherit }
.formCard input:focus,
.formCard select:focus,
.formCard textarea:focus { outline: none; border-color: var(--mint) }
.contatoBox { background: var(--mint-10); border-left: 5px solid var(--verde-vivo); border-radius: 12px; padding: 20px 22px; margin: 20px 0; font-size: .95rem }

/* Footer */
footer { margin-top: 52px }
.waves { display: block; width: 100%; height: 84px }
.ftBody { background: var(--navy-esc); color: #C6CCE8; padding: 8px 0 88px; margin-top: -2px }
.ftGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 30px; max-width: 1160px; margin: 0 auto; padding: 20px 20px 0 }
.ftGrid h4 { color: #fff; font-size: .98rem; margin-bottom: 12px }
.ftGrid a { display: block; color: #C6CCE8; font-size: .86rem; padding: 3px 0 }
.ftGrid a:hover { color: var(--mint) }
.canal { margin-bottom: 13px; font-size: .83rem }
.canal b { color: var(--mint); display: block; font-size: .87rem }
.canal a { display: inline; padding: 0 }
.social { display: flex; gap: 12px; margin-top: 10px }
.social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(157, 211, 175, .16); display: flex; align-items: center; justify-content: center; padding: 0; transition: .18s }
.social a:hover { background: var(--verde-vivo); transform: translateY(-3px) }
.ansBar { max-width: 1160px; margin: 26px auto 0; padding: 0 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.ansTag { background: #000; color: #fff; border: 2px solid #fff; font-family: Verdana, sans-serif; font-weight: 700; font-size: .8rem; padding: 5px 12px }
.ansBar a { color: #C6CCE8; font-size: .8rem; text-decoration: underline }
.copy { border-top: 1px solid rgba(255, 255, 255, .14); text-align: center; font-size: .78rem; padding: 16px 20px 0; max-width: 1160px; margin: 18px auto 0; color: #9AA3CC }

/* Flutuantes */
.simFloat { position: fixed; right: 18px; bottom: 88px; width: 58px; height: 58px; background: var(--grad); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(40, 39, 96, .4); z-index: 60; transition: .18s }
.simFloat:hover { transform: scale(1.08) }
.simFloat .tip { position: absolute; right: 68px; background: var(--navy); color: #fff; font-size: .75rem; font-weight: 700; padding: 6px 12px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: .18s }
.simFloat:hover .tip { opacity: 1 }
.zap { position: fixed; right: 18px; bottom: 20px; width: 58px; height: 58px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, .3); z-index: 60; transition: .18s }
.zap:hover { transform: scale(1.08) }
.quickbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; background: var(--navy); z-index: 55; grid-template-columns: 1fr 1fr 1fr; box-shadow: 0 -4px 14px rgba(0, 0, 0, .2) }
.quickbar a { color: #fff; text-align: center; font-size: .72rem; font-weight: 700; padding: 9px 4px 11px }
.quickbar a:active { background: var(--navy-claro) }
.quickbar svg { display: block; margin: 0 auto 3px }

.modal-header{background-color: #383780; color: var(--mint);}

/*Area do cliente*/
.ico_view_pass {width: 38px; height: 28px; background-image: url('../../assets/img/ico_view_pass.png'); background-repeat: no-repeat; background-position: 0 0; /* estado "oculto" */}

.menu_cliente {background-color: #383780; line-height: normal; border-radius: 18px; overflow: hidden; padding: 24px 24px 24px 24px; color: #ffffff; }
.menu_cliente .menu_titulo{font-size: 26px; margin-bottom: 30px;}
.menu_cliente .menu_itens{font-size: 16px; padding: 18px 0; font-size: 16px; color: #fff; border-bottom: 1px solid #49488a; display: flex; align-items: center; width: 100%; gap: 10px; word-break: break-word;}
.menu_cliente .menu_itens .menu_ico{width: 21px; height: 22px; flex-shrink: 0;}
.menu_cliente .menu_itens:hover {color: #9bd3ae; }
.menu_cliente .menu_itens:hover .menu_ico, .menu_cliente .active .menu_itens .menu_ico {background-position: -21px 0;}
.menu_cliente .active .menu_itens {color: #9bd3ae;}
.banner {border-radius: 16px; overflow: hidden; border: 1px solid #38378042;}
.table-area {background-color: #fafaff; border: 1px solid #bbbbc4; padding: 15px; border-radius: 10px; font-size: 13px;}
th { width: 1%; white-space: nowrap; font-weight: 700; color: #383780;}

.errorMsg {text-align: center; color: rgb(220, 53, 69);}

table.dados_geral { width: 100%; float: left; font-size: 11px; border-top: 3px solid #4BA17E; border-bottom: 3px solid #4BA17E; }
table.dados_geral th { background: #6FC39F; padding: 6px; color: #fff; }
table.dados_geral td { background: #fff; padding: 6px; border: 1px solid #ddd; }
table.dados_geral td .alterar { background: url(../../imagens/alterar.png) left no-repeat; padding: 2px 0 2px 18px; display: inline-block; font-weight: bold; font-size: 10px; }

#bloquear_tela { position: fixed; top: 0; width:100%; height: 100%; background: url(../../assets/img/ajax-loader.gif) no-repeat center #000; opacity: 0.7; z-index: 100}
#bloquear_tela .texto {     color: #ffffff; font: 16px arial; position: absolute; top: 56%; text-align: center; width: 100%; }

	 /* FAQ accordion */
	.faq { max-width: 860px; margin: 30px auto 0 }
	.faq details { background: #fff; border-radius: 14px; margin-bottom: 12px; box-shadow: 0 3px 12px rgba(40, 39, 96, .07); border: 2px solid transparent; overflow: hidden }
	.faq details[open] { border-color: var(--mint) }
	.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 14px; padding: 18px 20px; font-family: 'Quicksand', sans-serif; font-weight: 700; color: var(--navy); font-size: 1rem }
	.faq summary::-webkit-details-marker { display: none }
	.faq .num { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--mint-30); color: var(--verde-esc); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: .85rem }
	.faq details[open] .num { background: var(--navy); color: #fff }
	.faq .resp { padding: 0 22px 20px 68px; color: #37444D; font-size: .94rem }
	.faq .resp p { margin-bottom: 10px }
	.faq .resp ul { margin: 6px 0 10px 18px }
	.fonte { font-size: .75rem; color: var(--cinza) }

	/* Login */
	.loginWrap { display: flex; justify-content: center; padding: 10px 20px 30px }
	.loginCard { background: #fff; border-radius: 20px; box-shadow: 0 14px 40px rgba(40, 39, 96, .14); padding: 38px 34px; max-width: 580px; width: 100%; margin-top: -70px; position: relative; z-index: 5 }
	.loginCard h3 { color: var(--navy); font-size: 1.25rem; margin-bottom: 4px }
	.loginCard .lsub { color: var(--cinza); font-size: .9rem; margin-bottom: 18px }
	.loginCard label { display: block; font-weight: 700; color: var(--navy); font-size: .9rem; margin: 14px 0 5px }
	.loginCard input { width: 100%; padding: 13px 15px; border: 2px solid var(--borda); border-radius: 11px; font-size: .98rem }
	.loginCard input:focus { outline: none; border-color: var(--mint) }
	.loginCard .btn { width: 100%; margin-top: 20px; padding: 14px }
	.esqueci { display: block; text-align: right; font-size: .83rem; margin-top: 8px; font-weight: 700 }
	.loginDiv { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; color: var(--cinza); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em }
	.loginDiv::before,.loginDiv::after { content: ''; flex: 1; height: 1px; background: var(--borda) }
	.loginAux { display: flex; flex-direction: column; gap: 10px }
	.loginAux a { display: flex; align-items: center; gap: 10px; border: 2px solid var(--borda); border-radius: 12px; padding: 12px 14px; font-weight: 700; color: var(--navy); font-size: .88rem; transition: .15s }
	.loginAux a:hover { border-color: var(--mint); color: var(--verde-esc) }

	/* Artigo */
	.artigo { max-width: 760px; margin: 0 auto; background: #fff; border-radius: 20px; padding: 40px 44px; box-shadow: 0 6px 22px rgba(40, 39, 96, .08); margin-top: -46px; position: relative; z-index: 5 }
	.artigo .byline { color: var(--cinza); font-size: .82rem; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--borda) }
	.artigo p { margin-bottom: 14px; color: #2E3B44; font-size: 1rem }
	.artigo h3 { color: var(--navy); font-size: 1.15rem; margin: 22px 0 10px }
	.artigo .destaque { background: var(--mint-10); border-left: 5px solid var(--verde-vivo); border-radius: 10px; padding: 16px 20px; margin: 18px 0; font-weight: 700; color: var(--navy) }
	.artigo .fontes { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--borda); font-size: .82rem; color: var(--cinza) }



/* Responsivo */
@media (max-width:900px) {
	section {
	    padding: 20px 0;
	}

	 .split, .bloco, .bloco:nth-of-type(even) { grid-template-columns: 1fr }
	 .hero h1 { font-size: 1.65rem }
	 .hero { padding: 44px 0 80px }
	 nav { display: none;   position: absolute;   top: 100%;   left: 0;   right: 0;   background: #fff;   flex-direction: column;   gap: 0;   padding: 10px 20px;   box-shadow: 0 10px 20px rgba(0, 0, 0, .12) }
	 nav.aberto { display: flex }
	 nav a { padding: 13px 8px;   border-radius: 10px }
	 .areas { display: none }
	 .menuBtn { display: block;   margin-left: auto }
	 .brandLogo { height: 56px }
	 .quickbar { display: grid }
	 .zap { bottom: 70px }
	 .simFloat { bottom: 138px }
	 .ftBody { padding-bottom: 120px }
	 .ctaBand { padding: 32px 24px }

	.opcoes {
	flex-direction: column;
	gap: 1rem;
	}

	.opcoes .card {
	width: 100%;
	flex: none;
	}

	.opcoes .btn {
	width: 100%;
	}

	  .menu_cliente {
        display: none;
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        z-index: 1000;

        border-radius: 0 0 18px 18px;
        padding: 15px 24px 24px;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
    }

    .menu_cliente.aberto {
        display: block;
    }

    .menu_cliente .menu_titulo {
        margin-bottom: 10px;
        font-size: 20px;
    }

    .menu_cliente .menu_itens {
        padding: 14px 0;
    }
}


@media (max-width:600px) { 
  .artigo { padding: 28px 22px } 
}