/* Paginas de servico (prefixo servico-). Depende de site.css (tokens e componentes globais). */

/* Hero ------------------------------------------------------------------ */
.servico-hero { background: var(--surface); border-bottom: 1px solid var(--line); }
.servico-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-6) var(--space-8); align-items: center; }
.servico-hero__copy > * + * { margin-top: var(--space-5); }
.servico-hero__copy .hero__actions { margin-top: var(--space-6); }
.servico-hero__copy .lead { max-width: 46ch; }
.servico-hero__aside { min-width: 0; }

.servico-crumb ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: var(--text-small); color: var(--ink-500); }
.servico-crumb li + li::before { content: "/"; margin-right: 0.5rem; color: var(--ink-500); }
.servico-crumb a { color: var(--ink-500); text-decoration: none; }
.servico-crumb a:hover { color: var(--navy-700); text-decoration: underline; }
.servico-crumb [aria-current] { color: var(--navy-900); font-weight: 500; }

/* Placa pontilhada atras da imagem/painel do hero (motivo tecnico, so CSS) */
.servico-plate {
  padding: var(--space-5);
  border: 1px solid var(--line); border-radius: var(--radius);
  background-color: var(--paper);
  background-image: radial-gradient(circle, #C3CEE2 1px, transparent 1.5px);
  background-size: 22px 22px;
}

/* Painel tipografico (quando nao ha imagem) */
.servico-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: var(--space-5) var(--space-6); }
.servico-panel__title { font-weight: 600; color: var(--navy-900); padding-bottom: var(--space-3); }
.servico-panel__list > li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.servico-panel__list a { font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; width: 100%; justify-content: space-between; }
.servico-panel__list a:hover { text-decoration: underline; }
.servico-panel__list .mono { color: var(--ink-500); font-size: var(--text-small); }
.servico-panel__note { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: var(--text-small); color: var(--ink-700); }
.servico-panel__note strong { display: block; }
.servico-panel .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.servico-panel .stat__value { font-size: clamp(1.75rem, 3vw, 2.5rem); }

/* Imagem em moldura */
.servico-figure { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); overflow: hidden; }
.servico-figure img { width: 100%; height: auto; border-radius: calc(var(--radius) - 4px); }
.servico-figure--soft { background: var(--paper); }
.servico-figure--logo { display: grid; place-items: center; padding: var(--space-5); }
.servico-figure--logo img { max-width: 360px; aspect-ratio: 3 / 1.4; object-fit: cover; object-position: center; mix-blend-mode: multiply; }

/* Tags tipograficas ---------------------------------------------------- */
.servico-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.servico-tags > li { display: inline-flex; align-items: center; min-height: 32px; padding: 0 0.875rem; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-pill); color: var(--navy-700); font-size: 0.875rem; font-weight: 500; }
.servico-tags--lg > li { min-height: 44px; padding: 0 1.25rem; font-size: 1rem; }
.section--navy .servico-tags > li { background: transparent; border-color: rgb(255 255 255 / 0.35); color: #fff; }
.servico-tags--mono > li { font-family: var(--font-mono); font-size: 0.8125rem; }

/* Palavras grandes (stack em fundo navy) */
.servico-words { display: flex; flex-wrap: wrap; gap: 0 var(--space-7); }
.servico-words > li { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.5; color: #fff; }
.servico-words--light > li { color: var(--navy-900); }

/* Lista em linhas ------------------------------------------------------- */
.servico-ledger { border-bottom: 1px solid var(--line); }
.servico-ledger__item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.servico-ledger__item > i { font-size: 1.75rem; color: var(--navy-700); }
.servico-ledger__item h3 { font-size: 1.1875rem; }
.servico-ledger__item p { margin-top: var(--space-1); color: var(--ink-700); max-width: 60ch; }
.servico-ledger--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); border-bottom: 0; }
.servico-ledger--cols .servico-ledger__item:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.section--navy .servico-ledger, .section--navy .servico-ledger__item, .section--navy .servico-ledger--cols .servico-ledger__item:nth-last-child(-n+2) { border-color: rgb(255 255 255 / 0.2); }
.section--navy .servico-ledger__item > i { color: #fff; }
.section--navy .servico-ledger__item p { color: #C9D3E6; }

/* Faixa de itens separados por filete (estilo "tira") -------------------- */
.servico-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border-top: 1px solid var(--line); }
.servico-strip__item { padding: var(--space-5) var(--space-5) var(--space-5) 0; border-bottom: 1px solid var(--line); }
.servico-strip__item > i { font-size: 1.75rem; color: var(--navy-700); display: block; margin-bottom: var(--space-3); }
.servico-strip__item h3 { font-size: 1.125rem; }
.servico-strip__item p { margin-top: var(--space-2); font-size: var(--text-small); color: var(--ink-700); }

/* Bento ----------------------------------------------------------------- */
.servico-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); }
.servico-cell { grid-column: span 12; padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.servico-cell > i { font-size: 1.75rem; color: var(--navy-700); display: block; margin-bottom: var(--space-4); }
.servico-cell h3 { font-size: 1.25rem; }
.servico-cell p { margin-top: var(--space-2); color: var(--ink-700); }
.servico-cell--tint { background: var(--info-bg); }
.servico-cell--navy { background: var(--navy-900); border-color: var(--navy-900); }
.servico-cell--navy h3 { color: #fff; }
.servico-cell--navy p { color: #C9D3E6; }
.servico-cell--navy > i { color: #fff; }
.servico-cell--big h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.servico-cell--big p { font-size: 1.125rem; max-width: 40ch; }
@media (min-width: 861px) {
  .servico-cell--3 { grid-column: span 3; }
  .servico-cell--4 { grid-column: span 4; }
  .servico-cell--5 { grid-column: span 5; }
  .servico-cell--6 { grid-column: span 6; }
  .servico-cell--7 { grid-column: span 7; }
  .servico-cell--8 { grid-column: span 8; }
  .servico-cell--12 { grid-column: span 12; }
  .servico-cell--rows2 { grid-row: span 2; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .servico-cell--3 { grid-column: span 6; }
}

/* Linhas de solucao (titulo a esquerda, recursos a direita) --------------- */
.servico-rows > .servico-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-5) var(--space-8); padding-block: var(--space-7); border-top: 1px solid var(--line); }
.servico-rows > .servico-row:first-child { border-top: 0; padding-top: 0; }
.servico-row__sub { color: var(--navy-700); font-weight: 500; }
.servico-row__head > * + * { margin-top: var(--space-3); }
.servico-row__head p { max-width: 48ch; }
.servico-row__body { align-self: start; }
.servico-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); }
.servico-features > li { padding: var(--space-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); font-weight: 500; color: var(--navy-900); }

/* Split imagem + texto ------------------------------------------------- */
.servico-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6) var(--space-8); align-items: center; }
.servico-split__copy > * + * { margin-top: var(--space-4); }
.servico-split__copy h2 + p { max-width: 52ch; }
@media (min-width: 861px) { .servico-split--reverse .servico-figure { order: -1; } }

/* Ferramentas / marcas em colunas tipograficas --------------------------- */
.servico-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-6) var(--space-5); }
.servico-tools__item { padding-top: var(--space-4); border-top: 2px solid var(--navy-900); }
.servico-tools__item h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); letter-spacing: -0.02em; }
.servico-tools__item p { margin-top: var(--space-2); color: var(--ink-700); font-size: var(--text-small); }
.section--navy .servico-tools__item { border-top-color: #fff; }
.section--navy .servico-tools__item p { color: #C9D3E6; }

/* Etapas ----------------------------------------------------------------- */
.servico-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-6) var(--space-5); counter-reset: none; }
.servico-steps--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); }
.servico-steps__item { padding-top: var(--space-4); border-top: 2px solid var(--navy-700); }
.servico-steps--2col .servico-steps__item { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--space-3); border-top: 1px solid var(--line); padding-block: var(--space-5); }
.servico-steps--2col .servico-steps__n { grid-row: span 2; }
.servico-steps__n { display: block; font-size: 1.5rem; font-weight: 500; color: var(--orange-600); margin-bottom: var(--space-2); line-height: 1; }
.servico-steps__item h3 { font-size: 1.1875rem; }
.servico-steps__item p { margin-top: var(--space-2); font-size: var(--text-small); color: var(--ink-700); }

/* Matriz de grupos (4 grupos com listas) ---------------------------------- */
.servico-matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.servico-group { padding: var(--space-6); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.servico-group:nth-child(2) { background: var(--info-bg); }
.servico-group:nth-child(3) { background: var(--info-bg); }
.servico-group h3 { margin-bottom: var(--space-4); }
.servico-group .check-list { font-size: var(--text-small); }

/* Acordeao de especificacoes (banco de dados) ----------------------------- */
.servico-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-7); padding-bottom: var(--space-3); }
.servico-spec h4 { margin-bottom: var(--space-3); color: var(--navy-900); }
.servico-acc .accordion__panel { max-width: none; }
.servico-acc__lead { color: var(--ink-700); max-width: 60ch; margin-bottom: var(--space-5); }
.servico-acc__terms > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.servico-acc__terms strong { font-family: var(--font-mono); font-size: 0.9375rem; }
.servico-acc__terms span { color: var(--ink-500); font-size: var(--text-small); }

/* Dois blocos lado a lado com titulo fixo --------------------------------- */
.servico-aside-list { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6) var(--space-8); align-items: start; }
.servico-aside-list > :first-child { position: sticky; top: calc(var(--nav-h) + var(--space-5)); }
.servico-aside-list .section__head { margin-bottom: 0; }

/* Planos de hospedagem ----------------------------------------------------- */
.servico-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-4); align-items: stretch; }
.servico-plan { position: relative; display: flex; flex-direction: column; padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.servico-plan--rec { border: 2px solid var(--orange-600); box-shadow: var(--shadow-md); }
.servico-plan__flag { align-self: flex-start; margin-bottom: var(--space-3); padding: 0.25rem 0.75rem; border-radius: var(--radius-pill); background: var(--orange-600); color: #fff; font-size: 0.8125rem; font-weight: 600; }
.servico-plan__name { font-size: 1.375rem; }
.servico-plan__desc { margin-top: var(--space-2); font-size: var(--text-small); color: var(--ink-700); min-height: 3em; }
.servico-plan__price { margin-block: var(--space-5); min-height: 5.5rem; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.25rem; }
.servico-plan__old { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-small); color: var(--ink-500); }
.servico-plan__old s { font-family: var(--font-mono); }
.servico-plan__off { padding: 0.125rem 0.5rem; border-radius: var(--radius-pill); background: var(--success-bg); color: var(--success); font-weight: 600; font-size: 0.8125rem; }
.servico-plan__value { font-family: var(--font-mono); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 500; color: var(--navy-900); letter-spacing: -0.02em; line-height: 1.1; }
.servico-plan__value small { font-family: var(--font-sans); font-size: 1rem; color: var(--ink-500); letter-spacing: 0; }
.servico-plan__features { flex: 1; margin-bottom: var(--space-6); }
.servico-plan__features > li { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2) 0; font-size: var(--text-small); }
.servico-plan__features i { font-size: 1.125rem; margin-top: 0.15em; flex-shrink: 0; color: var(--success); }
.servico-plan__features .is-off { color: var(--ink-500); text-decoration: line-through; }
.servico-plan__features .is-off i { color: var(--ink-500); }
.servico-empty { padding: var(--space-6); border: 1px dashed #8794AA; border-radius: var(--radius); background: var(--surface); max-width: 60ch; }
.servico-empty > * + * { margin-top: var(--space-3); }

/* Icones em grade sem moldura (recursos inclusos) -------------------------- */
.servico-inline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.servico-inline__item > i { font-size: 1.75rem; color: var(--navy-700); display: block; margin-bottom: var(--space-3); }
.servico-inline__item h3 { font-size: 1.0625rem; }
.servico-inline__item p { margin-top: var(--space-1); font-size: var(--text-small); color: var(--ink-700); }

/* Destaque de texto (frase em evidencia) ----------------------------------- */
.servico-pull { font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--navy-900); font-weight: 500; max-width: 34ch; }
.servico-note { padding-left: var(--space-5); border-left: 3px solid var(--orange-600); }

.servico-final { padding-top: 0; }
.section + .servico-final { padding-top: var(--section-y-tight); }
.servico-final .cta-band { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* Responsivo -------------------------------------------------------------- */
@media (max-width: 1100px) {
  .servico-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .servico-hero__grid, .servico-split, .servico-aside-list { grid-template-columns: minmax(0, 1fr); }
  .servico-rows > .servico-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-6); }
  .servico-ledger--cols { grid-template-columns: minmax(0, 1fr); }
  .servico-ledger--cols .servico-ledger__item:nth-last-child(2) { border-bottom: 0; }
  .servico-ledger--cols .servico-ledger__item:nth-last-child(2) { border-bottom: 0; }
  .servico-matrix, .servico-spec { grid-template-columns: minmax(0, 1fr); }
  .servico-steps--2col { grid-template-columns: minmax(0, 1fr); }
  .servico-aside-list > :first-child { position: static; }
  .servico-features { grid-template-columns: minmax(0, 1fr); }
  .servico-plate { padding: var(--space-3); }
  .servico-hero { padding-block: var(--space-6); }
}
@media (max-width: 520px) {
  .servico-inline { grid-template-columns: minmax(0, 1fr); }
  .servico-panel { padding: var(--space-5); }
  .servico-cell, .servico-group, .servico-plan { padding: var(--space-5); }
  .servico-hero__copy .hero__actions .btn { width: 100%; }
}