/* Vitrine /dominios — estrutura da Hostinger (faixas escuras e claras alternadas, cabeçalho fixo com
   busca compacta, mosaicos com foto + interface, carrossel, sanfona, tabela) na identidade da FD.
   Carregado depois de domains.css (base compartilhada com checkout e pedido). Sem estilo inline (CSP). */
:root{
  --light-bg:#f6f4f0;--light-card:#ffffff;--light-line:#e6e2da;--light-text:#151515;--light-muted:#6b6962;
  --light-tint:#fbeee8;--orange-ink:#c8431f;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.center{text-align:center}

/* Cabeçalho fixo + busca compacta */
.top-sticky{position:sticky;top:0;z-index:50;background:rgba(21,21,21,.94);backdrop-filter:blur(10px);gap:20px}
.search-mini{flex:0 1 460px;padding:4px 4px 4px 14px;border-radius:999px;background:#f3f3ee;border:0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s}
.search-mini input{color:#151515;font-size:15px;padding:8px 6px}
.search-mini input::placeholder{color:#8a887f}
.search-mini .btn{border-radius:999px;width:36px;height:36px;padding:0}
.search-mini .search-ico{stroke:#8a887f}
.top-sticky.show-search .search-mini{opacity:1;visibility:visible;transform:none}
@media (max-width:640px){.search-mini{display:none}}

/* Faixas */
.band{padding:88px 0}
.band-inner{max-width:1180px;margin:0 auto;padding:0 clamp(16px,3vw,40px)}
.band-inner.narrow{max-width:820px}
.band-dark{background:var(--bg);color:var(--text)}
.band-light{background:var(--light-bg);color:var(--light-text)}
.band-flush{padding-top:40px}
.band-title{font-family:var(--heading);font-size:clamp(28px,3.8vw,44px);line-height:1.12;letter-spacing:-.02em;margin:0 0 36px;text-wrap:balance}
.band-sub{color:var(--light-muted);margin:-24px 0 32px}
.band-light .note{color:var(--light-muted)}
.btn-lg{padding:15px 32px;font-size:16px;margin-top:36px}
.btn-outline{background:transparent;border:1.5px solid var(--orange-ink);color:var(--orange-ink)}
.btn-outline:hover{background:var(--light-tint)}

/* 1. Topo */
.hero{padding:64px 0 48px;background:radial-gradient(900px 420px at 50% -8%,rgba(255,99,53,.24),transparent 70%),linear-gradient(180deg,#1b1a19,#151515)}
.hero-title{text-align:center;font-size:clamp(36px,5.4vw,60px);margin:0 0 28px}
.search-lg{max-width:720px;margin:0 auto;align-items:center;padding:8px 8px 8px 18px;border-radius:16px;background:#f3f3ee;border:0;box-shadow:0 18px 50px rgba(0,0,0,.4)}
.search-lg input{font-size:18px;padding:13px 8px;color:#151515}
.search-lg input::placeholder{color:#8a887f}
.search-lg .btn{padding:13px 28px;font-size:16px;border-radius:11px}
.search-ico{width:22px;height:22px;flex:none;fill:none;stroke:#8a887f;stroke-width:2;stroke-linecap:round}
.hero-bento{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:14px;max-width:1000px;margin:40px auto 0}
@media (max-width:860px){.hero-bento{grid-template-columns:1fr}}
.hb{position:relative;border-radius:18px;padding:24px;min-height:240px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;overflow:hidden;text-decoration:none;color:inherit}
.hb h2{font-family:var(--heading);font-size:22px;margin:0;line-height:1.2}
.hb p{margin:0;font-size:14px}
.hb-promo{background:linear-gradient(140deg,#ff7a4d,#c8431f);color:#1a0d08}
.hb-promo p{color:rgba(26,13,8,.82)}
.hb-promo h2{font-size:28px}
.hb-icon{position:absolute;top:22px;left:24px;width:44px;height:44px;border-radius:12px;background:#1a0d08;display:grid;place-items:center;font-size:20px}
.hb-photo{padding:0}
.hb-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.hb-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,21,21,.05) 25%,rgba(21,21,21,.9))}
.hb-photo-text{position:relative;z-index:1;padding:20px 22px}
.hb-photo-text p{color:#f3f3ee}
.hb-photo-text .stat{font-family:var(--heading);font-size:36px;font-weight:700;line-height:1}
.hb-photo-text .stat-sm{font-size:24px;margin-top:10px}
.hb-link{background:#262422;border:1px solid var(--line)}
.hb-link:hover{border-color:#57554f}
.hb-link p{color:var(--muted)}
.hb-arrow{position:absolute;top:18px;right:20px;font-size:20px;color:var(--muted)}
.hb-ui{display:flex;align-items:center;gap:8px;align-self:flex-start;margin:0 0 auto;margin-top:28px;background:#f3f3ee;color:#151515;border-radius:10px;padding:8px 12px;font-size:13px}
.hb-ui-dot{width:14px;height:14px;border-radius:50%;background:var(--orange)}
.hb-ui-bar{width:70px;height:8px;border-radius:4px;background:#d9d6ce}
.trust{text-align:center;color:var(--muted);font-size:14px;margin:26px 0 0}

/* Resultados */
.results-band{padding:48px 0 56px}
.results{display:flex;flex-direction:column;gap:18px;max-width:980px;margin:0 auto}
.results > .state,.results > .loader{border-radius:16px;overflow:hidden;background:var(--light-card);border:1px solid var(--light-line);color:var(--light-muted)}
.results .loader-title{color:var(--light-text)}
.results .loader-grid i{background:#d9d6ce}
.results .loader-grid i:nth-child(5){background:var(--orange)}
.notice{display:flex;flex-wrap:wrap;gap:4px;align-items:baseline;background:var(--light-card);border:1px solid var(--light-line);border-radius:12px;padding:14px 18px;color:var(--light-muted);font-size:15px}
.notice strong{color:var(--light-text)}
.featured{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:20px;padding:24px 26px;border-radius:18px;background:var(--light-card);border:1.5px solid var(--orange);box-shadow:0 12px 34px rgba(200,67,31,.12)}
.featured-head{min-width:0}
.badge{display:inline-block;background:#dff5e8;color:#1c7a47;font-size:12px;font-weight:700;border-radius:6px;padding:3px 8px;margin-bottom:8px}
.featured-name{margin:0;font-family:var(--heading);font-size:clamp(22px,3vw,30px);font-weight:700;word-break:break-all;color:var(--light-text)}
.featured-price{text-align:right;font-variant-numeric:tabular-nums;color:var(--light-text)}
.featured-price strong{display:block;font-size:26px}
.featured-price span{font-size:13px;color:var(--light-muted)}
.featured .btn{padding:14px 28px;font-size:16px}
.featured-foot{grid-column:1/-1;margin:0;padding-top:14px;border-top:1px solid var(--light-line);color:var(--light-muted);font-size:14px}
@media (max-width:640px){.featured{grid-template-columns:1fr auto}.featured .btn{grid-column:1/-1}}
.more-title{font-family:var(--heading);font-size:20px;margin:14px 0 0;color:var(--light-text)}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filter{background:var(--light-card);border:1px solid var(--light-line);color:var(--light-muted);border-radius:999px;padding:7px 14px;font-size:14px;cursor:pointer}
.filter:hover{color:var(--light-text);border-color:#cfcac0}
.filter[aria-selected="true"]{background:var(--light-text);color:#fff;border-color:var(--light-text);font-weight:600}
.result-list{border:1px solid var(--light-line);border-radius:16px;overflow:hidden;background:var(--light-card)}
.result-list .result{background:var(--light-card);border-top:1px solid var(--light-line)}
.result-list .result:first-child{border-top:0}
.result-list .result-name{color:var(--light-text)}
.result-list .result-name small,.result-list .price span{color:var(--light-muted)}
.result-list .price strong{color:var(--light-text)}
.result-list .tag-no{background:#efece6;color:var(--light-muted)}
.result-list .btn-ghost{border-color:#d9d4ca;color:var(--light-text)}
.result-list .btn-ghost:hover{border-color:var(--orange-ink);color:var(--orange-ink)}
.result-list:empty::before{content:"Nenhuma extensão livre nesta categoria.";display:block;padding:20px;color:var(--light-muted)}

/* 2. Por que registrar (claro) */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why-lg{grid-column:span 2}
@media (max-width:900px){.why{grid-template-columns:1fr}.why-lg{grid-column:auto}}
.why-card{background:var(--light-card);border:1px solid var(--light-line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.why-tint{background:var(--light-tint);border-color:#f3d9ce}
.why-visual{position:relative;height:250px;overflow:hidden}
.why-visual img{width:100%;height:100%;object-fit:cover;display:block}
.why-visual-plain{display:grid;place-items:center}
.why-body{padding:22px 26px 28px}
.why-body h3{font-family:var(--heading);font-size:22px;margin:8px 0 6px;color:var(--light-text)}
.why-body p{margin:0;color:var(--light-muted);font-size:15px}
.chip-soft{display:inline-block;font-size:12px;font-weight:600;color:var(--orange-ink);background:#fff;border:1px solid #f3d0c2;border-radius:999px;padding:4px 10px}
.ui-url{display:flex;align-items:center;gap:10px;background:#fff;color:#444;border-radius:999px;padding:12px 20px;font-size:15px;box-shadow:0 14px 30px rgba(200,67,31,.18);white-space:nowrap}
.ui-url b{color:#151515}
.ui-globe{width:22px;height:22px;border-radius:50%;background:var(--orange);box-shadow:inset 0 0 0 5px #ffc4ae;flex:none}
.ui-cursor{position:absolute;left:58%;top:62%;width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:26px solid #151515;transform:rotate(-30deg)}
.ui-float{position:absolute;background:#fff;color:#151515;border-radius:14px;padding:12px 16px;box-shadow:0 16px 36px rgba(0,0,0,.25);display:grid;gap:10px;font-size:14px;min-width:230px}
.ui-float-tr{top:22px;right:22px}
.ui-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ui-badge{background:#dff5e8;color:#1c7a47;font-size:12px;font-weight:700;border-radius:6px;padding:3px 8px}
.ui-chat{position:absolute;right:22px;bottom:22px;max-width:300px;background:#fff;color:#151515;border-radius:16px 16px 4px 16px;padding:12px 16px;font-size:14px;box-shadow:0 16px 36px rgba(0,0,0,.25)}
.ui-chat p{margin:0 0 8px}
.ui-typing{display:inline-flex;gap:4px;background:var(--orange);border-radius:999px;padding:6px 10px}
.ui-typing i{width:6px;height:6px;border-radius:50%;background:#fff;animation:fdtype 1.2s infinite ease-in-out}
.ui-typing i:nth-child(2){animation-delay:.15s}.ui-typing i:nth-child(3){animation-delay:.3s}
@keyframes fdtype{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ui-steps{list-style:none;margin:0;padding:18px 26px;background:#fff;border-radius:16px;box-shadow:0 16px 36px rgba(200,67,31,.16);display:grid;gap:14px;color:#151515;font-weight:600;min-width:170px}
.ui-steps li{display:flex;align-items:center;gap:12px}
.ui-steps li::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid #c9c5bc;flex:none}
.ui-steps li.done::before{border-color:var(--orange);background:var(--orange);box-shadow:inset 0 0 0 3px #fff}

/* 3. Carrossel (escuro) */
.carousel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:32px}
.carousel-head .band-title{margin:0 0 10px;max-width:14em}
.link-soft{color:var(--muted);font-size:14px}
.link-soft:hover{color:var(--text)}
.carousel-nav{display:flex;gap:10px}
.round-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#232322;color:var(--text);font-size:22px;line-height:1;cursor:pointer}
.round-btn:hover{border-color:#57554f}
.round-btn:disabled{opacity:.35;cursor:default}
.carousel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.carousel::-webkit-scrollbar{display:none}
@media (min-width:1000px){.carousel{grid-auto-columns:calc((100% - 42px)/4)}}
.tld-card{scroll-snap-align:start;background:#fff;color:#151515;border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:4px}
.tld-card p{margin:0}
.tld-card .tld{font-family:var(--heading);font-size:30px;font-weight:700;letter-spacing:-.02em}
.tld-card .desc{color:#5b5953;font-size:14px;min-height:42px;margin-bottom:14px}
.tld-card .renew{font-size:13px;color:#6b6962}
.tld-card .from{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.tld-card .from small{font-size:13px;font-weight:500;color:#6b6962}
.tld-card .btn{margin-top:14px;background:var(--orange);color:#1a0d08;border:0}
.tld-card .btn:hover{background:#ff7a52}

/* 4. Como escolher (claro, duas colunas) */
.two-col{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start}
@media (max-width:860px){.two-col{grid-template-columns:1fr;gap:12px}}
.accordion details{border-bottom:1px solid var(--light-line)}
.accordion summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-size:18px;position:relative;color:var(--light-text);transition:color .2s}
.accordion summary:hover{color:var(--orange-ink)}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:26px;line-height:1.1;color:var(--light-muted);transition:transform .3s ease,color .2s}
.accordion details[open] summary::after{transform:rotate(45deg);color:var(--orange-ink)}
/* Conteúdo animado pelo domains.js (altura + opacidade); o wrapper .acc-body é criado lá. */
.accordion .acc-body{overflow:hidden}
.accordion details p{margin:-6px 0 20px;color:var(--light-muted);max-width:60ch}
@media (prefers-reduced-motion:reduce){.accordion summary::after{transition:none}}
.accordion-lines summary{font-size:17px}

/* 5. Essencial (escuro, três cartões com interface) */
.essentials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.essentials{grid-template-columns:1fr}}
.ess h3{font-family:var(--heading);font-size:20px;margin:20px 0 6px}
.ess p{margin:0;color:var(--muted);font-size:15px}
.ess-visual{height:260px;border-radius:18px;background:radial-gradient(360px 200px at 50% 40%,rgba(255,99,53,.22),transparent 70%),#232322;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.ess-list{display:grid;gap:10px;justify-items:center;font-size:14px;color:#8d8b84}
.ess-list .on{display:flex;align-items:center;gap:10px;background:#f3f3ee;color:#151515;padding:12px 20px;border-radius:999px;font-size:16px;box-shadow:0 12px 30px rgba(0,0,0,.4);transform:scale(1.08)}
.ess-list .on i{width:16px;height:16px;border-radius:50%;background:var(--orange)}
.ess-list .on b{color:var(--orange-ink)}
.ess-connect{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;padding:0 12px}
.ess-pill{background:#f3f3ee;color:#151515;border-radius:999px;padding:12px 18px;font-weight:600;font-size:15px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.ess-pill-dark{background:var(--orange);color:#1a0d08}
.ess-plug{width:44px;height:44px;border-radius:50%;background:#151515;border:1px solid var(--line);display:grid;place-items:center;font-size:20px;color:var(--orange)}
.ess-prices{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 18px;width:100%}
.ess-prices div{background:#f3f3ee;color:#151515;border-radius:14px;padding:16px;display:grid;gap:4px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.ess-prices span{font-size:12px;color:#6b6962}
.ess-prices b{font-size:22px}
.ess-prices .hi{outline:2px solid var(--orange)}

/* 6. Tabela de preços (claro) */
.table-tools{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:flex-end;margin:-8px 0 32px}
.tool-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--light-line);border-radius:10px;padding:0 12px;min-width:min(320px,100%)}
.tool-search input{border:0;outline:0;background:transparent;padding:12px 4px;font-size:15px;color:var(--light-text);width:100%}
.tool-select{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--light-text);min-width:min(320px,100%)}
.tool-select select{background:#fff;border:1px solid var(--light-line);border-radius:10px;padding:12px;font-size:15px;color:var(--light-text)}
.band-light .table-wrap{background:#fff;border:1px solid var(--light-line);border-radius:18px;overflow-x:auto}
.band-light .price-table th{background:#fff;color:var(--light-text);text-transform:none;letter-spacing:0;font-size:15px;padding:18px 24px;border-bottom:1px solid var(--light-line)}
.band-light .price-table td{padding:16px 24px;border-bottom:1px solid var(--light-line);color:var(--light-text)}
.band-light .price-table tbody tr:nth-child(odd){background:#faf8f5}
.band-light .price-table td:first-child{color:var(--orange-ink);font-size:16px}
.band-light .price-table .btn{border-color:#d9d4ca;color:var(--light-text);background:#fff}
.band-light .price-table .btn:hover{border-color:var(--orange-ink);color:var(--orange-ink)}
.table-more{padding:18px;text-align:center}
.table-more:has(button[hidden]){display:none}

.foot{border-top:1px solid var(--light-line);background:#efece6;color:var(--light-muted);padding:28px 16px;text-align:center;font-size:13px}
.foot a{color:var(--light-muted)}
@media (prefers-reduced-motion:reduce){.ui-typing i{animation:none}.search-mini{transition:none}}
.price-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.band-light .price-table td,.band-light .price-table th{border-left:0;border-right:0;text-align:left}
.band-light .price-table td:last-child,.band-light .price-table th:last-child{text-align:right}
.band-light .price-table .btn{padding:8px 16px;font-size:14px}
.search-mini{align-items:center;gap:6px}
.search-mini .search-ico{width:18px;height:18px}
.search-lg{gap:10px}
.results-band{scroll-margin-top:72px}

/* Ícones Lucide (SVG inline, traço herdando a cor do texto) */
.lc{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none}
.lc-sm{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:6px}
.hb-icon{color:#ff8a60}
.hb-icon .lc{width:22px;height:22px}
.hb-arrow .lc{width:20px;height:20px}
.search-mini .btn .lc{width:18px;height:18px;margin:auto}
.round-btn{display:grid;place-items:center}
.round-btn .lc{width:20px;height:20px}
.ess-plug .lc{width:20px;height:20px}
.ui-label{display:inline-flex;align-items:center}
.chip-soft .lc-sm{stroke-width:3}

/* Cartão grande do topo: foto + barra de endereço com cadeado + selo "SSL ativo" + texto sobre degradê */
.hb-promo{padding:0;background:#1f1a17;color:#f3f3ee}
.hb-promo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.hb-promo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,21,21,.05) 20%,rgba(21,21,21,.55) 55%,rgba(21,21,21,.94))}
.hb-promo-ui{position:absolute;top:18px;left:18px;right:18px;z-index:2;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hb-url{display:inline-flex;align-items:center;gap:4px;background:#f3f3ee;color:#444;border-radius:999px;padding:8px 14px;font-size:13px;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.hb-url .lc-sm{color:#1c7a47;margin-right:4px}
.hb-url b{color:#151515}
.hb-ssl{display:inline-flex;align-items:center;background:#dff5e8;color:#1c7a47;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700;box-shadow:0 10px 26px rgba(0,0,0,.3)}
.hb-ssl .lc-sm{stroke-width:3;margin-right:5px}
.hb-promo-text{position:relative;z-index:2;padding:22px 24px;display:grid;gap:6px}
.hb-kicker{justify-self:start;background:var(--orange);color:#1a0d08;font-size:12px;font-weight:700;border-radius:6px;padding:3px 8px}
.hb-promo h2{font-size:26px;color:#fff}
.hb-promo p{color:rgba(243,243,238,.85)}
.hero-bento .hb{min-height:320px}
.hb-promo > img{object-position:50% 22%}
.hb-promo::after{background:linear-gradient(180deg,rgba(21,21,21,0) 38%,rgba(21,21,21,.6) 62%,rgba(21,21,21,.95))}

/* Transferência para cá */
.transfer-band{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
@media (max-width:860px){.transfer-band{grid-template-columns:1fr;gap:24px}}
.transfer-band .band-title{margin-bottom:16px}
.transfer-lead{color:var(--muted);font-size:17px;line-height:1.6;margin:0;max-width:52ch}
.transfer-form{display:grid;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px}
.transfer-form label{font-size:13px;color:var(--muted);font-weight:500}
.transfer-row{display:flex;gap:10px}
.transfer-row input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:12px 14px;font-size:16px}
.transfer-row input:focus{outline:none;border-color:var(--orange)}
.transfer-note{font-size:13px;color:var(--muted);margin:0}
.transfer-note.err{color:#ffb3b3}
@media (max-width:420px){.transfer-row{flex-direction:column}}