/* ==========================================================================
   TR Telecom — página Serviços
   Herói e faixa final usam as artes fornecidas como fundo (proporção exata);
   a grade de serviços usa a linguagem visual do site.
   ========================================================================== */

.sv-hero {
  position: relative;
  /* A proporcao do hero fica como estava (nao mexe no layout abaixo). A foto
     nova tem outra proporcao (1,777 contra 2,334), entao o preenchimento passa
     a ser 'cover' com a posicao puxada para cima (30%): assim a cabeca do homem
     nao e cortada e a sobra sai pela agua, embaixo. Com '100% 100%' ela
     esticaria. */
  aspect-ratio: 1916 / 821;
  background:
    /* Escurecimento para o texto. A foto nova e bem mais clara e cheia de
       detalhe na cidade a esquerda: sem isto "Sua jornada..." e o "MAIS" em
       ciano somem sobre os predios. O layout de referencia tambem tem o lado
       esquerdo escurecido sob o texto. */
    linear-gradient(180deg, rgba(3, 7, 15, 0) 58%, rgba(3, 7, 15, 0.62) 100%),
    linear-gradient(90deg, rgba(3, 7, 15, 0.84) 0%, rgba(3, 7, 15, 0.62) 26%, rgba(3, 7, 15, 0.26) 48%, rgba(3, 7, 15, 0) 70%),
    url("../img/dobra-servicos-hero.jpg?v=e282ae58") center 30% / cover no-repeat;
  overflow: hidden;
}
.sv-hero .wrap { position: absolute; inset: 0; max-width: none; padding: 0; }

/* O texto do hero comeca DEPOIS do paralelogramo azul da arte (que ocupa
   y 11,7%..20,5% do hero) e depois do header (38px de barra + 76px da linha,
   em px). O max() garante as duas coisas: em telas estreitas o hero encolhe
   (aspect-ratio) e o "Voltar ao inicio" acabaria embaixo do header. */
.sv-hero__copy { position: absolute; left: 5.2%; top: max(148px, 24%); width: 44%; }
.sv-hero__voltar {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 1.6vw;
  color: var(--muted);
  font-size: clamp(10px, 0.72vw, 14px);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.sv-hero__voltar svg { width: 0.95vw; height: 0.95vw; min-width: 13px; min-height: 13px; }
.sv-hero__voltar:hover { color: var(--cyan-2); }

.sv-hero .eyebrow { font-size: clamp(10px, 0.78vw, 15px); margin-bottom: 0.7vw; }
.sv-hero__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(34px, 5.4vw, 100px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text);
}
.sv-hero__titulo span { color: var(--cyan-2); }
.sv-hero__texto {
  margin: 1vw 0 0;
  font-size: clamp(12px, 1.05vw, 20px);
  line-height: 1.45;
  color: var(--muted);
}
/* Quebra de linha depois de "mundo" so no mobile: no desktop o texto cabe numa
   linha so e a quebra nao deve aparecer. */
.sv-hero__quebra { display: none; }

/* Os 3 selos: a arte limpa NAO tem mais os icones, entao o HTML traz icone e
   texto, como no layout de referencia. Ficam na mesma faixa onde estavam. */
.sv-selos {
  position: absolute;
  left: 5.5%;
  top: 79.8%;
  width: 43.5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  list-style: none;
}
.sv-selos li {
  display: flex;
  align-items: center;
  gap: 0.9vw;
  font-size: clamp(9px, 0.72vw, 14px);
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(200, 221, 248, 0.92);
}
.sv-selos svg {
  width: 3vw; height: 3vw; min-width: 36px; min-height: 36px; flex: none;
  padding: 0.72vw;
  color: var(--cyan-2);
  background: rgba(4, 12, 26, 0.94);
  border: 1px solid var(--line-strong);
  border-radius: 24%;
}

/* .sv-hero__nota ("MAIS POSSIBILIDADES...") e .sv-hero__assinatura
   ("Conexoes que movem voce.") foram retirados a pedido: ficavam sobre o rosto
   do homem e sobre a cidade, na area mais clara da foto nova. Os elementos
   tambem sairam do HTML. */

/* -------------------------------------------------------- grade de serviços */
.sv-lista { padding: clamp(40px, 5vw, 76px) 0 clamp(46px, 5.4vw, 84px); }
.sv-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
/* Card da grade: foto no topo (recortada da arte da dobra 2) e o texto no painel
   abaixo. O padding sai do card e vai para o corpo, para a foto encostar nas
   bordas; o overflow:hidden faz a foto respeitar o arredondamento. */
.sv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(31, 168, 255, 0.13), rgba(31, 168, 255, 0) 62%),
    linear-gradient(180deg, rgba(10, 30, 61, 0.62), rgba(5, 13, 28, 0.72));
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.sv-card__foto { display: block; width: 100%; height: auto; }
.sv-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-glow);
}
/* .sv-card__selo foi removido: o icone ja vem dentro da foto recortada. */
.sv-card__corpo { display: flex; flex-direction: column; min-width: 0; padding: 20px 22px 22px; flex: 1; }
/* Empurra o botao para a base do card: sem isso os cards da mesma linha ficam
   com o botao em alturas diferentes, porque as descricoes tem tamanhos
   diferentes. */
.sv-card__acao { margin-top: auto; }
.sv-card__titulo {
  margin: 2px 0 6px;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--text);
}
.sv-card__texto { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--muted); }
.sv-card__tag {
  margin: 14px 0 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  color: rgba(95, 214, 255, 0.72);
}
.sv-card__acao {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.sv-card__acao svg { width: 15px; height: 15px; }
.sv-card__acao:hover { background: rgba(31, 168, 255, 0.16); border-color: var(--cyan); color: #fff; }

/* ---------------------------------------------------------- faixa final */
.sv-cta {
  position: relative;
  aspect-ratio: 3 / 1;
  background: url("../img/dobra-servicos-cta.jpg?v=4784fbf0") center / 100% 100% no-repeat;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.sv-cta .wrap { position: absolute; inset: 0; max-width: none; padding: 0; }
.sv-cta .eyebrow,
.sv-cta__titulo,
.sv-cta__texto,
.sv-cta__acoes { position: absolute; left: 5.6%; }
.sv-cta .eyebrow { top: 14%; font-size: clamp(10px, 0.78vw, 15px); margin: 0; }
.sv-cta__titulo {
  top: 23%;
  /* 47% (era 44%): em 44% "PRONTO PARA SE CONECTAR" nao caberia numa linha e o
     titulo quebrava em tres, enquanto a arte e o layout pedem duas. */
  width: 47%;
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(22px, 2.9vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text);
}
.sv-cta__texto {
  top: 55%;
  width: 34%;
  margin: 0;
  font-size: clamp(11px, 0.86vw, 16px);
  line-height: 1.5;
  color: var(--muted);
}
/* As duas pilulas do CTA JA existem na arte (dobra 3), vazias: uma solida e uma
   vazada. Antes os botoes HTML ficavam soltos embaixo a esquerda e as pilulas do
   lado direito apareciam sem texto. Agora os botoes entram exatamente sobre elas,
   para dar o rotulo — a arte fornece a forma, o HTML fornece o texto.

   Medido na arte (2172x724): solida x 52,5%..73%, vazada x 75,1%..93,5%,
   ambas y 63,7%..76,5%. */
.sv-cta__acoes {
  left: 0;
  /* A altura e a largura de cada botao casam com a pilula da arte (solida
     x 52,4%..73,3% e vazada x 74,6%..93,4%, ambas y 62,8%..77,7%). Sao larguras
     diferentes, entao cada botao tem a sua — com flex os dois ficariam iguais e
     sobraria a borda de uma das pilulas. */
  top: 62.4%;
  width: 100%;
  height: 15.6%;
  display: block;
}
.sv-cta__acoes .btn {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 999px;
  justify-content: center;
  font-size: clamp(10px, 0.85vw, 16px);
}
.sv-cta__acoes .btn:nth-child(1) { left: 51.9%; width: 21.8%; }
.sv-cta__acoes .btn:nth-child(2) { left: 74.2%; width: 20.3%; }
/* O botao vazado aqui e OPACO de proposito. Atras dele fica a pilula vazada da
   arte: com fundo transparente, o contorno dela aparecia em volta do botao
   (dois contornos). O proprio layout de referencia usa botao escuro solido
   neste lugar. Cor amostrada do entorno da pilula na arte. */
.sv-cta__acoes .btn--ghost {
  background: linear-gradient(180deg, #021b38 0%, #010e20 100%);
  border-color: rgba(130, 195, 255, 0.5);
}
.sv-cta__acoes .btn--ghost:hover {
  background: linear-gradient(180deg, #06294f 0%, #02142b 100%);
  border-color: var(--cyan);
}
.sv-cta__nota { position: absolute; right: 4.4%; top: 38%; width: 118px; text-align: right; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ responsivo */
@media (max-width: 1024px) {
  .sv-hero,
  .sv-cta { aspect-ratio: auto; background-size: cover; }
  /* O header e fixo: o hero comeca depois dele (44px da topbar + 82px da barra). */
  .sv-hero { margin-top: 126px; padding: 40px 0 56px; }
  .sv-hero .wrap,
  .sv-cta .wrap { position: static; padding-inline: 24px; }
  .sv-hero__copy,
  .sv-hero__nota,
  .sv-hero__assinatura,
  .sv-selos,
  .sv-cta .eyebrow,
  .sv-cta__titulo,
  .sv-cta__texto,
  .sv-cta__acoes,
  .sv-cta__nota { position: static; width: auto; }
  .sv-selos { display: flex; align-items: flex-start; justify-content: flex-start; gap: 18px; margin-top: 24px; height: auto; }
  .sv-selos li { position: static; display: flex; align-items: center; gap: 8px; }
  .sv-selos svg { display: block; width: 34px; height: 34px; color: var(--cyan-2); }
  .sv-hero__copy { max-width: 560px; }
  .sv-hero__voltar { margin-bottom: 18px; font-size: 0.85rem; }
  .sv-hero__titulo { font-size: clamp(40px, 12vw, 76px); }
  .sv-hero__texto { font-size: 1rem; margin-top: 14px; }
  .sv-hero__quebra { display: inline; }
  .sv-selos { flex-direction: column; gap: 14px; margin-top: 28px; }
  .sv-selos svg { width: 24px; height: 24px; }
  .sv-selos li { font-size: 0.72rem; }
  .sv-hero__nota,
  .sv-hero__assinatura,
  .sv-cta__nota { display: none; }

  .sv-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sv-cta { padding: 64px 0 72px; }
  .sv-cta__titulo { width: auto; max-width: 620px; font-size: clamp(28px, 7vw, 44px); }
  .sv-cta__texto { max-width: 420px; margin-top: 16px; }
  /* Abaixo de 1025px os botoes deixam de ficar sobre as pilulas da arte e viram
     botoes normais. Sem reposicionar, o `position:absolute; height:100%` do
     desktop esticava os dois ate a altura toda da faixa (pilulas gigantes). */
  .sv-cta__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    height: auto;
    margin-top: 26px;
  }
  .sv-cta__acoes .btn,
  .sv-cta__acoes .btn:nth-child(1),
  .sv-cta__acoes .btn:nth-child(2) {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
  }
}

@media (max-width: 640px) {
  /* Header no celular: topbar (44px) + barra principal (72px) = 116px. */
  .sv-hero { margin-top: 116px; padding: 32px 0 48px; }
  .sv-grade { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sv-card { padding: 0; }
  .sv-card__corpo { padding: 18px 18px 20px; }
  .sv-cta__acoes .btn,
  .sv-cta__acoes .btn:nth-child(1),
  .sv-cta__acoes .btn:nth-child(2) { width: 100%; }
}