/* ==========================================================================
   DOBRAS — texto sobre as artes de fundo fornecidas pela TR Telecom
   Cada seção vira uma "tela" com a proporção exata da arte e os textos são
   posicionados em % medidas na própria imagem. Vale no desktop: abaixo de
   1025px o site volta ao empilhamento normal, legível no celular.
   ========================================================================== */

@media (min-width: 1025px) {

  /* As artes já são escuras e limpas: as notas perdem a sombra do layout
     empilhado (a coruja reativa a sua logo abaixo, para legibilidade). */
  .side-note { text-shadow: none; }

  /* ------------------------------------------------------------------
     1) DIFERENCIAIS — agora e o banner em codigo (assets/css/diferenciais.css).
        A antiga arte dobra-diferenciais.jpg nao e mais usada.
     ------------------------------------------------------------------ */

  /* ------------------------------------------------------------------
     2) PLANOS — agora 100% em codigo (assets/css/planos.css). A antiga arte
        dobra-planos.jpg nao e mais usada.
     ------------------------------------------------------------------ */

  .plans {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
  }
  .plan {
    position: absolute;
    top: 26.94%;
    height: 65.3%;
    padding: 3.4% 6.5% 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
    justify-content: flex-start;
  }
  .plan:hover { transform: none; box-shadow: none; }
  .plan:nth-child(1) { left: 6.48%; width: 27.98%; }
  .plan:nth-child(2) { left: 36.24%; width: 27.58%; }
  .plan:nth-child(3) { left: 65.60%; width: 27.92%; }

  .plan__badge {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    background: none;
    box-shadow: none;
    color: #04121f;
    font-size: clamp(8px, 0.66vw, 13px);
    letter-spacing: 0.12em;
    padding: 0;
    white-space: nowrap;
  }
  .plan__speed { font-size: clamp(20px, 2.6vw, 48px); }
  .plan__tagline { font-size: clamp(8.5px, 0.68vw, 13px); margin-top: 0.55vw; letter-spacing: 0.08em; }

  /* Divisória logo abaixo da legenda (como no modelo) e os ícones de check
     do próprio HTML, já que os anéis da arte foram retirados da imagem. */
  .plan__features {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border-top: 0;
    display: block;
    gap: 0;
  }
  .plan__features::before {
    content: "";
    position: absolute;
    left: 6.5%;
    right: 6.5%;
    top: 27.3%;
    height: 1px;
    background: rgba(120, 186, 255, 0.22);
  }
  .plan__feature {
    position: absolute;
    left: 9%;
    width: 85%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.85vw;
    font-size: clamp(10px, 0.8vw, 15px);
    height: auto;
    min-height: 0;
  }
  .plan__feature svg {
    display: block;
    width: clamp(13px, 1.25vw, 23px);
    height: clamp(13px, 1.25vw, 23px);
    flex: none;
  }
  .plan__feature:nth-child(1) { top: 39.5%; }
  .plan__feature:nth-child(2) { top: 48.6%; }
  .plan__feature:nth-child(3) { top: 57.7%; }
  .plan__feature:nth-child(4) { top: 66.8%; }

  .plan__price {
    position: absolute;
    left: 6.5%;
    top: auto;
    bottom: 16.6%;
    margin: 0;
    width: 87%;
    border-top: 1px solid rgba(120, 186, 255, 0.22);
    padding-top: 0.9%;
  }
  .plan__currency { font-size: clamp(11px, 0.92vw, 17px); }
  .plan__amount { font-size: clamp(19px, 1.95vw, 35px); }
  .plan__period { font-size: clamp(9px, 0.72vw, 13px); }
  .plan .btn--block {
    position: absolute;
    left: 6.5%;
    top: 83.5%;
    bottom: auto;
    width: 87%;
    height: 10.8%;
    padding: 0;
    font-size: clamp(10px, 0.85vw, 16px);
    box-shadow: none;
  }
  .plan .btn--block:hover { transform: none; box-shadow: none; }

  /* ------------------------------------------------------------------
     3) EMPRESAS — arte 2172x724 (3:1)
        Pílula do CTA: x 6,1%..30,6% · y 65%..75%
        Cards: 62,8%..78,9% e 80%..96,7% · linhas 8,3%..48,3% e 51,7%..90%
     ------------------------------------------------------------------ */
  .section--business {
    aspect-ratio: 3 / 1;
    padding: 0;
    background: url("../img/dobra-empresas.jpg?v=b6db6bc9") center / 100% 100% no-repeat;
    overflow: hidden;
  }
  .section--business .wrap {
    position: absolute;
    inset: 0;
    max-width: none;
    padding: 0;
  }
  .business { display: block; height: 100%; }

  .business__copy,
  .owl__body,
  .coverage__copy {
    position: absolute;
    inset: 0;
    width: auto;
  }
  .business__art { display: none; }

  .business__copy .eyebrow {
    position: absolute;
    left: 6.3%;
    top: 18%;
    font-size: clamp(9.5px, 0.78vw, 15px);
    margin: 0;
  }
  .business__copy .section-head__title {
    position: absolute;
    left: 6.3%;
    top: 21.5%;
    width: 25%;
    font-size: clamp(19px, 2.25vw, 41px);
    margin: 0;
  }
  .business__copy .section-sub {
    position: absolute;
    left: 6.3%;
    top: 45%;
    width: 25%;
    font-size: clamp(10px, 0.84vw, 15px);
    margin: 0;
  }
  /* A pílula já existe na arte (x 6,35–30,13% · y 59,87–71,41%): o botão vira
     só o rótulo, sem borda nem fundo, para não aparecerem dois retângulos. */
  .business__copy .btn {
    position: absolute;
    left: 6.35%;
    top: 59.87%;
    width: 23.78%;
    height: 11.54%;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: clamp(10px, 0.85vw, 16px);
  }
  .business__copy .btn:hover { background: none; box-shadow: none; transform: none; }

  .solutions {
    position: absolute;
    left: 62.8%;
    top: 8.3%;
    width: 33.9%;
    height: 81.7%;
    display: grid;
    grid-template-columns: 47.5% 47.1%;
    grid-template-rows: 48.9% 46.9%;
    gap: 0 5.4%;
    padding: 0;
  }
  .solution {
    padding: 42% 10% 0 12%;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
  }
  .solution:hover { transform: none; box-shadow: none; }
  .solution__icon { display: none; }
  .solution__title { font-size: clamp(10px, 0.8vw, 15px); margin-bottom: 0.3vw; line-height: 1.15; }
  .solution__text { font-size: clamp(9px, 0.72vw, 13px); line-height: 1.3; }

  /* ------------------------------------------------------------------
     4) CORUJA — arte 2172x724 (3:1)
        Pílula central: x 46,7%..67,2% · y 65%..75%
        Traços das notas: esquerda x 6,7% · direita x 85%
     ------------------------------------------------------------------ */
  .section--owl {
    aspect-ratio: 3 / 1;
    padding: 0;
    background: url("../img/dobra-coruja.jpg?v=04c545cc") center / 100% 100% no-repeat;
    border-block: 0;
    overflow: hidden;
  }
  .section--owl::before { display: none; }
  .section--owl .wrap {
    position: absolute;
    inset: 0;
    max-width: none;
    padding: 0;
  }
  .owl { display: block; height: 100%; }
  .owl__art { display: none; }

  .owl__title {
    position: absolute;
    left: 48%;
    top: 27%;
    width: 34%;
    font-size: clamp(19px, 2.2vw, 40px);
    margin: 0;
  }
  .owl__text {
    position: absolute;
    left: 48%;
    top: 47%;
    width: 34%;
    font-size: clamp(10px, 0.84vw, 15px);
    margin: 0;
    max-width: none;
  }
  /* Coordenadas da pílula no layout de referência. O fundo novo da seção é só
     a coruja — a pílula vinha desenhada na arte antiga (por isso border:0 /
     background:none). Agora o HTML desenha, e com fundo próprio para o rótulo
     não se perder sobre os fios de luz. */
  .owl__body .btn {
    position: absolute;
    left: 47.33%;
    top: 61.05%;
    width: 20.12%;
    height: 12.29%;
    padding: 0 3%;
    border: 1px solid rgba(120, 190, 255, 0.55);
    border-radius: 999px;
    background: rgba(4, 12, 26, 0.5);
    box-shadow: inset 0 0 26px -16px rgba(31, 168, 255, 0.9);
    font-size: clamp(10px, 0.85vw, 16px);
  }
  .owl__body .btn:hover {
    border-color: var(--cyan);
    background: rgba(31, 168, 255, 0.16);
    box-shadow: 0 12px 26px -16px rgba(31, 168, 255, 0.9);
  }

  /* Notas ancoradas logo acima dos traços que já existem na arte:
     esquerdo em ~61% da altura, direito em ~76%. */
  .owl__aside-left {
    left: 5.8%;
    top: auto;
    bottom: 39.5%;
    transform: none;
    text-align: left;
    width: 13.5%;
    font-size: clamp(8px, 0.63vw, 12px);
    line-height: 1.9;
    text-shadow: 0 2px 10px rgba(2, 8, 20, 0.92), 0 0 26px rgba(2, 8, 20, 0.8);
  }
  .owl__aside-left::after { margin: 0.8vw auto 0 0; }
  .owl__aside {
    right: 11.4%;
    top: auto;
    bottom: 24.5%;
    transform: none;
    width: 12.5%;
    font-size: clamp(8px, 0.63vw, 12px);
    line-height: 1.9;
    text-shadow: 0 2px 10px rgba(2, 8, 20, 0.92), 0 0 26px rgba(2, 8, 20, 0.8);
  }
  .owl__aside::after { margin: 0.8vw 0 0 auto; }

  /* ------------------------------------------------------------------
     5) COBERTURA — arte 2172x724 (3:1)
        Campo: x 6,1%..52,2% · y 63%..75% (botão a partir de 36% da tela)
        Traço da nota: x ~88%
     ------------------------------------------------------------------ */
  .section--coverage {
    aspect-ratio: 3 / 1;
    padding: 0;
    background: url("../img/dobra-cobertura.jpg?v=5e9b9671") center / 100% 100% no-repeat;
    overflow: hidden;
  }
  .section--coverage .wrap {
    position: absolute;
    inset: 0;
    max-width: none;
    padding: 0;
  }
  .coverage { display: block; height: 100%; }
  .coverage__map { display: none; }

  .coverage__copy .eyebrow {
    position: absolute;
    left: 6.1%;
    top: 27%;
    font-size: clamp(9.5px, 0.78vw, 15px);
    margin: 0;
  }
  .coverage__title {
    position: absolute;
    left: 6.1%;
    top: 30.5%;
    width: 38%;
    font-size: clamp(20px, 2.35vw, 43px);
    margin: 0;
  }
  .coverage__text {
    position: absolute;
    left: 6.1%;
    top: 53%;
    width: 34%;
    font-size: clamp(10px, 0.84vw, 15px);
    margin: 0;
  }

  .coverage__form {
    position: absolute;
    left: 6.1%;
    top: 63%;
    width: 46.1%;
    height: 12%;
    max-width: none;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
    /* O fundo novo da secao e SO o mapa: nao traz mais a caixa do campo nem a
       pilula do botao (antes vinham da arte — por isso border:0/background:none).
       Agora o HTML desenha as duas. */
    border: 1px solid rgba(120, 190, 255, 0.5);
    border-radius: 999px;
    background: rgba(4, 12, 26, 0.74);
    box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.9), inset 0 0 22px -12px rgba(31, 168, 255, 0.6);
  }
  .coverage__form:focus-within { border-color: var(--cyan); }
  /* Agora o pino do HTML volta a aparecer (na arte nova nao existe). */
  .coverage__field { flex: 1 1 auto; padding-left: 4.5%; min-width: 0; }
  .coverage__field svg { display: block; }
  .coverage__input { font-size: clamp(10px, 0.84vw, 15px); padding: 0; }
  .coverage__form .btn {
    flex: 0 0 35.1%;
    width: 35.1%;
    height: 100%;
    padding: 0 3%;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--cyan) 0%, var(--cyan-3) 100%);
    color: #04121f;
    font-size: clamp(10px, 0.85vw, 16px);
  }
  .coverage__form .btn:hover { transform: none; box-shadow: 0 12px 26px -14px rgba(31, 168, 255, 0.9); }
  .coverage__feedback {
    position: absolute;
    left: 6.1%;
    top: 77.5%;
    width: 44%;
    font-size: clamp(9px, 0.75vw, 14px);
  }

  /* Coluna estreita alinhada à direita, como no modelo, no canto escuro. */
  .coverage__aside {
    right: 4.2%;
    /* 40% (era 30%): a faixa acima tem os fios de luz atravessando, e o texto
       so fica legivel na area mais escura, abaixo deles. */
    top: 40%;
    transform: none;
    width: 118px;
    text-align: right;
    font-size: clamp(8px, 0.63vw, 12px);
    line-height: 1.9;
    text-shadow: 0 2px 10px rgba(2, 8, 20, 0.92), 0 0 26px rgba(2, 8, 20, 0.8);
  }
  /* O tracinho decorativo do ::after foi retirado a pedido. */
  .coverage__aside::after { display: none; }
}