:root{--navy:#12345a;--blue:#1976d2;--ink:#263445;--muted:#657487;--bg:#f3f6fa}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.65 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink)}a{color:var(--blue)}.wrap{max-width:1200px;margin:0 auto;padding:0 24px}.site-header{background:#12345a;color:white;position:relative;z-index:5}.nav{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-size:25px;font-weight:850;letter-spacing:.5px;color:white;text-decoration:none}.brand span{color:#8bc4ff}.nav nav{display:flex;gap:28px;flex-wrap:wrap}.nav nav a{color:#eaf4ff;text-decoration:none;font-weight:600;font-size:16px}.nav nav a:hover,.footer a:hover{color:#8bc4ff}.hero,.page-hero{background:linear-gradient(120deg,#102c4d 0%,#195b99 70%,#1976d2 100%);color:white}.hero{padding:90px 0 100px}.hero-grid{display:grid;grid-template-columns:1.3fr .8fr;align-items:center;gap:60px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:2px;color:#b9dcff}.eyebrow.dark{color:#1976d2}.hero h1,.page-hero h1{font-size:clamp(35px,4.5vw,61px);line-height:1.12;letter-spacing:-1.5px;margin:15px 0 22px}.hero p,.page-hero p{font-size:19px;max-width:680px;color:#e0ecf9}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;border:0;border-radius:10px;background:var(--blue);color:white;text-decoration:none;font-size:15px;font-weight:750;padding:13px 20px;min-height:48px;transition:transform .2s,box-shadow .2s}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #12345a30}.btn-light{background:white;color:#12345a}.btn-outline{border:1px solid #ffffff85;background:transparent;color:white}.hero-panel{padding:32px;border:1px solid #ffffff4a;border-radius:22px;background:#ffffff13;box-shadow:0 18px 50px #071e3540}.hero-panel h2{font-size:29px;line-height:1.2;margin:14px 0}.hero-panel p{font-size:16px}.hero-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.hero-stats span{border:1px solid #ffffff45;padding:7px 12px;border-radius:30px;font-size:13px}.page-hero{padding:64px 0 72px}.page-hero h1{font-size:clamp(34px,4vw,50px);max-width:850px}.section{padding:72px 0}.section-tight{padding-top:20px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px}.section h2{font-size:clamp(27px,3vw,36px);line-height:1.2;margin:8px 0 12px}.muted{color:var(--muted);margin:0;max-width:750px}.text-link{font-weight:750;white-space:nowrap;text-decoration:none}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:30px}.card{display:flex;flex-direction:column;align-items:center;text-align:center;background:white;border:1px solid #e1e9f3;border-top:5px solid var(--accent);border-radius:17px;padding:23px 17px 25px;box-shadow:0 12px 28px #12345a0c}.plan-art{height:235px;width:100%;display:flex;justify-content:center;align-items:center}.card img{max-height:225px;max-width:100%;object-fit:contain}.card h3{font-size:22px;margin:10px 0}.card p{margin:0 0 12px;color:#586a7f;font-size:14px}.plan-for{font-size:12px;color:#66778a;min-height:40px;margin-bottom:18px}.card .btn{width:100%;margin-top:auto}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}.feature,.contact-card{padding:28px;background:white;border:1px solid #e4ebf3;border-radius:16px}.feature h3{margin:12px 0 7px}.feature p{margin:0;color:#66778a}.step{font-weight:800;color:#1976d2;font-size:15px}.cta{margin:32px 0 76px;padding:35px 42px;background:#12345a;color:white;border-radius:20px;display:flex;justify-content:space-between;align-items:center;gap:28px}.cta h2{font-size:28px;margin:0 0 6px}.cta p{color:#d3e1f2;margin:0}.footer{background:#102b49;color:#d1e1f0;padding:45px 0 22px}.footer-inner{display:flex;justify-content:space-between;gap:20px}.footer-inner strong{font-size:20px;color:white}.footer-inner p{margin:8px 0}.footer nav{display:flex;gap:22px;flex-wrap:wrap}.footer a{color:#d1e1f0;text-decoration:none}.footer-bottom{margin-top:35px;padding-top:18px;border-top:1px solid #ffffff24;font-size:13px;color:#a9bdd1}.disclaimer{font-size:13px;color:#6b7b8b;margin-top:18px}.faq details{padding:20px 24px;border-radius:12px;background:white;border:1px solid #e1e9f3;margin-top:12px}.faq summary{font-weight:700;cursor:pointer}.faq details p{color:#607184}.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}.contact-card .contact-icon{display:inline-flex;width:49px;height:49px;align-items:center;justify-content:center;border-radius:14px;background:#e6f2ff;color:#1769b9;font-size:26px}.contact-card h3{font-size:22px;margin:16px 0 4px}.contact-card p{color:#6a7b8e;margin:0 0 12px}.contact-card strong{font-size:18px;overflow-wrap:anywhere;display:block}.contact-card small{color:#8b6870;display:block;margin-top:10px}.contact-placeholder{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:#e6eef7;padding:38px;border-radius:20px}.contact-placeholder p{color:#64758a}.mock-form{background:white;border-radius:14px;padding:24px;box-shadow:0 12px 28px #12345a10}.mock-input{border:1px solid #dbe3ee;border-radius:8px;padding:13px;color:#8c9aac;margin-bottom:12px}.mock-message{height:90px}.mock-button{opacity:.65;cursor:default}input,select,textarea{max-width:100%;padding:8px;border:1px solid #ccd6e1;border-radius:5px}table{max-width:100%}#formulario{overflow-x:auto}@media(max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-grid{gap:30px}.contact-grid{grid-template-columns:1fr 1fr}}@media(max-width:700px){.nav{flex-direction:column;padding-top:20px;padding-bottom:20px}.nav nav{justify-content:center;gap:14px 22px}.hero-grid,.contact-placeholder{grid-template-columns:1fr}.hero{padding:60px 0}.section{padding:50px 0}.section-tight{padding-top:12px}.section-head,.cta,.footer-inner{flex-direction:column;align-items:flex-start}.features,.contact-grid{grid-template-columns:1fr}.cta{padding:27px}.page-hero{padding:50px 0}}@media(max-width:520px){.cards{grid-template-columns:1fr}.card{max-width:400px;width:100%;margin:0 auto}.brand{font-size:22px}.wrap{padding-left:18px;padding-right:18px}} /* Tabelas de planos - v3 */ .hosting-comparison{padding-top:18px}.comparison-scroll{overflow-x:auto;border:1px solid #e0e8f2;border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(18,52,90,.06)}.comparison-table,.extra-table{width:100%;border-collapse:collapse;text-align:center}.comparison-table{min-width:790px}.comparison-table th,.comparison-table td,.extra-table th,.extra-table td{padding:17px 13px;border-bottom:1px solid #e7edf4}.comparison-table thead th{background:#e8eef6;color:#18314f;font-size:.91rem}.comparison-table thead th:not(:first-child){color:white}.comparison-table thead .plan-red{background:#c62828}.comparison-table thead .plan-green{background:#138a35}.comparison-table thead .plan-blue{background:#237dd2}.comparison-table thead .plan-yellow{background:#e49b12;color:#172b43!important}.comparison-table tbody tr:nth-child(even),.extra-table tbody tr:nth-child(even){background:#f4f7fb}.comparison-table tbody th{text-align:left;color:#263d57;font-weight:600}.comparison-table tbody td strong{font-size:1.07rem;color:#12345a}.comparison-actions td{padding-top:20px;padding-bottom:20px}.table-btn{display:inline-block;background:#1976d2;color:white;text-decoration:none;padding:10px 15px;border-radius:9px;font-weight:700;white-space:nowrap}.table-btn:hover{background:#12345a}.comparison-notes{margin:17px 0 32px;color:#62748b;font-size:.94rem}.comparison-notes p{margin:7px 0}.hosting-extras{display:grid;grid-template-columns:1fr 1fr;gap:22px}.hosting-panel{border:1px solid #e0e8f2;border-radius:18px;padding:26px;background:#fff;min-width:0}.hosting-panel h3{margin:0 0 20px;color:#12345a}.hosting-benefits{list-style:none;margin:0;padding:0;display:grid;gap:12px}.hosting-benefits li{position:relative;padding-left:25px}.hosting-benefits li:before{content:'✓';position:absolute;left:0;color:#16875d;font-weight:800}.extra-table{text-align:left;min-width:420px;font-size:.92rem}.extra-table thead th{background:#e8eef6;color:#12345a}.payment-heading{margin-top:30px!important}@media(max-width:800px){.hosting-extras{grid-template-columns:1fr}.hosting-panel{padding:20px}} /* V4 — Tabela de planos: colunas em tons suaves e leitura mais espaçada. */ .hosting-comparison .comparison-table{border-collapse:separate;border-spacing:0;min-width:920px} .hosting-comparison .comparison-table th,.hosting-comparison .comparison-table td{padding:25px 22px;line-height:1.65;border-bottom:1px solid rgba(32,54,80,.10);vertical-align:middle} .hosting-comparison .comparison-table thead th{padding-top:23px;padding-bottom:23px;font-size:.98rem;letter-spacing:.015em} .hosting-comparison .comparison-table thead th:first-child{background:#edf2f7;color:#18314f} .hosting-comparison .comparison-table thead .plan-red{background:#f5cdd0;color:#82232d!important} .hosting-comparison .comparison-table thead .plan-green{background:#cdebd7;color:#176238!important} .hosting-comparison .comparison-table thead .plan-blue{background:#cde3fa;color:#194f86!important} .hosting-comparison .comparison-table thead .plan-yellow{background:#fff0b9;color:#765609!important} .hosting-comparison .comparison-table tbody tr:nth-child(even){background:transparent} .hosting-comparison .comparison-table tbody th{background:#f7f9fc;min-width:205px} .hosting-comparison .comparison-table tbody td:nth-child(2){background:#fff0f1} .hosting-comparison .comparison-table tbody td:nth-child(3){background:#edf9f0} .hosting-comparison .comparison-table tbody td:nth-child(4){background:#edf5ff} .hosting-comparison .comparison-table tbody td:nth-child(5){background:#fff9e7} .hosting-comparison .comparison-table tbody tr:hover td:nth-child(2){background:#fce2e5} .hosting-comparison .comparison-table tbody tr:hover td:nth-child(3){background:#dcf2e2} .hosting-comparison .comparison-table tbody tr:hover td:nth-child(4){background:#dcecff} .hosting-comparison .comparison-table tbody tr:hover td:nth-child(5){background:#fff1c9} .hosting-comparison .comparison-table tbody td+td{border-left:1px solid rgba(32,54,80,.07)} .hosting-comparison .comparison-table .comparison-actions td{padding-top:28px;padding-bottom:28px} @media(max-width:800px){.hosting-comparison .comparison-table{min-width:850px}.hosting-comparison .comparison-table th,.hosting-comparison .comparison-table td{padding:21px 18px}} /* Minhas personalizações */ /* Sandro Walmor - 07/07/2016 */ /* Regras */ #div-regras{ padding: 20px; padding-left: 30px; padding-right: 30px; font-size: 12px; } #tabela-dpn { /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ font-size: 14px; color: #333333; font-style: normal; font-weight: bold; font-weight: normal; text-align: left; } #titulo-tabela, .titulo-tabela { background-color: #aaaaaa; color: #ffffff; } #subtitulo-tabela, .subtitulo-tabela { background-color: #cccccc; color: #ffffff; }#titulo-coluna, .titulo-coluna { background-color: #cccccc; /*color: #ffffff;*/ } #texto-branco, .texto-branco { color: #FFFFFF; } #tr-listrada, .tr-listrada { background-color: #ecebe9; } #listrada, .listrada, #listrada2, .listrada2 { background-color: #eee; } #listrada1, .listrada1 { background-color: #fff; } /* PLANOS */ #plano-red, .plano-red { background-color: #CF0004; color: #FFFFFF; } #plano-green, .plano-green { background-color: #019901; color: #FFFFFF; } #plano-blue, .plano-blue { background-color: #3898FE; color: #FFFFFF; } #plano-yellow, .plano-yellow { background-color: #FD9C03; color: #FFFFFF; } /* formularios */ #div-pedido { margin: 0px; padding: 0px; padding-left: 0px; padding-right: 0px; text-align: center; text-align: left; /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ font-size: 14px; font-style: normal; /*color: #333333;*/ border: 0px solid green; } #formulario { /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ font-size: 14px; font-style: normal; /*color: #333333;*/ border: 0px solid brown; } #formulario table { margin: 0px; text-align: left; width: 100%; border-bottom: none; /*border-collapse:collapse;*/ border: 0px solid #ddd; } #formulario tr { border: 0px solid #ddd; } #formulario tr td { padding-top: 20px; padding-bottom: 20px; padding-left: 0px; padding-right: 0px; vertical-align: middle; border: 0px solid #ddd; } #formulario .td-aviso { background: #FFFFB9; border: 2px solid red; } #formulario .td-subtitulo { background: #eeeeee; } #formulario .tr-tipo-erro-pedido { background: #FFFFB9; border: 2px solid red; } #formulario input { /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ background-color: #80C7E7; font-size: 14px; color: #000000; border: 1px solid #333333; } #formulario textarea { /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ background-color: #80C7E7; font-size: 14px; color: #000000; border: 1px solid #333333; } #formulario select { /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ background-color: #80C7E7; font-size: 16px; color: #000000; border: 1px solid #333333; } #formulario option { /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ background-color: #80C7E7; font-size: 14px; color: #000000; border: 1px solid #333333; } #formulario option.option_label { /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ background-color: #80C7E7; font-size: 14px; color: #000000; border: 1px solid #333333; } #formulario option.um { background-color: #F0F0F0; } #formulario option.dois { background-color: #D0D0D0; } #formulario radio, #formulario .radio { background-color: white; border: 0px solid #333333; } #formulario button , #formulario .botao, #formulario .link_botao { /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ font-size: 16px; font-style: normal; font-weight: bold; background-color: #80C7E7; border: 1px solid #555555; color: #000000; padding-left: 10px; padding-right: 10px; } #formulario img { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #formulario hr { color: #cccccc; width: 100%; height: 5px; } #formulario #contrato { overflow: auto; height: 250px; } /* formularios (tratamento de textos) */ #formulario .titulo { /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ font-size: 18px; /*color: #333333;*/ font-style: normal; font-weight: bold; text-align: left; } #formulario .subtitulo { /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ font-size: 16px; /*color: #333333;*/ font-style: normal; font-weight: bold; text-align: left; text-shadow: 1px 1px 2px #aaa; } #formulario .destaque { /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ font-size: 14px; /*color: #333333;*/ font-style: normal; font-weight: bold; text-align: left; } #formulario .aviso { /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ font-size: 16px; color: red; font-style: normal; font-weight: bold; text-align: left; text-shadow: 1px 1px 2px #aaa; } #formulario .aviso-adulto { /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ font-size: 14px; color: red; font-style: normal; font-weight: bold; text-align: left; } #formulario .asterisco { /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ font-size: 14px; color: red; font-style: normal; font-weight: bold; text-align: left; } #formulario .label { /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ font-size: 14px; font-style: normal; /*color: #333333;*/ font-weight: bold; } #formulario .legenda { /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ font-size: 12px; font-style: normal; /*color: #333333;*/ } #formulario a { /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ font-style: normal; /*color: #333333;*/ text-decoration: none; } #formulario a:active { /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ font-style: normal; /*color: #333333;*/ text-decoration: none; font-weight: bold; } #formulario a:hover { /*font-family: Verdana, Arial, Helvetica, sans-serif;*/ font-style: normal; color: red; text-decoration: none; } #formulario .link { font-size: 16px; background: #dddddd; border: 1px solid #555555; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; } /* div oculta no pedido de hospedagem */ #div-pedido-regras-oculto{ display: none; } /* sombras */ /*Como você pode ver text-shadow aceita quatro valores: 3px: Cordenada X (horizontal) da sombra em relação ao texto; 4px: Cordenada Y (vertical) da sombra em relação ao texto; 2px: O raio de desfocagem da sombra, isso significa que quanto maior o valor mais a sombra é “esticada”, causando um efeito de borrão; #aaa: Cor da sombra. A cor pode ser especificado no inicio ou após o valor de desfoque. Podemos trabalhar com múltiplas sombras, bastando apenas separar os valores da propriedade text-shadow por uma virgula. Segue abaixo dois exemplos de utilização de múltiplas sombras. Exemplo 1 Exemplo text-shadow text-shadow: 1px 1px 3px #666, -1px -1px 3px #fff, 1px 1px #666, -1px -1px #fff */ .sombra-fraca, h1, h2, h3 { text-shadow: 1px 1px 2px #aaa; } .sombra-media { text-shadow: 3px 4px 2px #aaa; } .sombra-multipla { /* relevo */ text-shadow: 1px 1px 3px #666, -1px -1px 3px #fff, 1px 1px #666, -1px -1px #fff } .negrito, h1, h2, h3, h4, h5, h6 { font-weight: bold; } /* testes com as cores dos fundos */ #section-home { /* centro da página inicial */ /* background-color: green; */ } #section-home-inner { /* conteúdo triplo do centro da página inicial */ /* background-color: yellow; */ } #content { /* conteúdo geral de todas as páginas inclusive o fundo inteiro */ /* background-color: cyan; */ } #content-core { /* centro do conteúdo geral de todas as páginas menos o fundo */ /* background-color: blue; */ } #main { /* conteúdo principal de todas as páginas */ /* background-color: red; */ } #main-core { /* dentro do conteúdo principal de todas as páginas */ /* background-color: brown; */ } /* Minhas personalizações */