/* Componentes das páginas internas (Institucional, Distribuição, Estética, Farmácia, Contato). */
@layer sections {
  /* =========================================================
     Topo de página interna
     ========================================================= */
  .pagina-topo {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(27rem, 62svh, 38rem);
    padding: calc(var(--altura-faixa) + var(--altura-cabecalho) + 2.5rem) 0 clamp(3rem, 2rem + 4vw, 5rem);
    overflow: hidden;
    background: var(--marinho-900);
    color: #fff;
  }

  .pagina-topo__fundo {
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .pagina-topo__fundo picture,
  .pagina-topo__fundo img {
    width: 100%;
    height: 100%;
  }

  .pagina-topo__fundo img {
    object-fit: cover;
  }

  .pagina-topo__fundo::after {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgb(4 19 31 / 0.93) 0%, rgb(4 19 31 / 0.8) 42%, rgb(4 19 31 / 0.4) 100%),
      linear-gradient(180deg, rgb(4 19 31 / 0.55) 0%, transparent 35%, rgb(4 19 31 / 0.55) 100%);
    content: "";
  }

  /* Variante sem foto: marinho com o símbolo da marca como grafismo. */
  .pagina-topo--grafismo {
    background: radial-gradient(120% 120% at 85% 10%, var(--marinho-700) 0%, var(--marinho-900) 55%, var(--marinho-950) 100%);
  }

  .pagina-topo__grafismo {
    position: absolute;
    top: 50%;
    right: -6%;
    z-index: -1;
    width: min(46rem, 70vw);
    height: auto;
    aspect-ratio: 1;
    color: rgb(73 178 224 / 0.08);
    transform: translateY(-42%);
  }

  .pagina-topo .credito-foto {
    top: calc(var(--altura-faixa) + var(--altura-cabecalho) + 1rem);
    bottom: auto;
  }

  .pagina-topo__titulo {
    max-width: 20ch;
    margin-top: 1rem;
    color: #fff;
    font-size: clamp(2.25rem, 1.5rem + 3vw, 3.875rem);
    line-height: 1.06;
    letter-spacing: -0.025em;
  }

  .pagina-topo__texto {
    max-width: 40rem;
    margin-top: 1.25rem;
    color: rgb(255 255 255 / 0.84);
    font-size: var(--t-lead);
  }

  .pagina-topo .acoes {
    margin-top: 2rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    .js .pagina-topo__conteudo > * {
      opacity: 0;
      transform: translateY(20px);
      animation: hero-texto 0.9s var(--ease) forwards;
    }

    .js .pagina-topo__conteudo > :nth-child(2) {
      animation-delay: 0.1s;
    }

    .js .pagina-topo__conteudo > :nth-child(3) {
      animation-delay: 0.2s;
    }

    .js .pagina-topo__conteudo > :nth-child(4) {
      animation-delay: 0.3s;
    }

    .js .pagina-topo__conteudo > :nth-child(5) {
      animation-delay: 0.4s;
    }

    .pagina-topo__fundo img {
      animation: topo-zoom 9s linear both;
    }

    @keyframes topo-zoom {
      from {
        transform: scale(1.08);
      }
    }
  }

  @media (max-width: 39.99em) {
    .pagina-topo .acoes .botao {
      width: 100%;
    }
  }

  /* Trilha de navegação (breadcrumb) */
  .trilha ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    color: rgb(255 255 255 / 0.75);
    font-size: var(--t-sm);
  }

  .trilha li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .trilha li + li::before {
    color: rgb(255 255 255 / 0.5);
    content: "/";
  }

  .trilha a {
    display: inline-block;
    padding-block: 0.125rem;
    color: #fff;
    text-decoration: none;
  }

  .trilha a:hover {
    color: var(--azul-easy-claro);
    text-decoration: underline;
  }

  .trilha [aria-current="page"] {
    color: var(--azul-easy-claro);
  }

  .rotulo--claro {
    color: var(--azul-easy);
  }

  .pagina-topo .rotulo {
    margin-top: 1.5rem;
  }

  /* =========================================================
     Bloco texto + mídia
     ========================================================= */
  .bloco {
    display: grid;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
  }

  .bloco__texto .titulo-secao {
    margin-top: 1rem;
  }

  .bloco__texto .lead {
    margin-top: 1.25rem;
    color: var(--tinta);
  }

  .bloco__texto > p:not(.rotulo, .lead) {
    margin-top: 1rem;
  }

  .bloco__texto .lista-check {
    margin-top: 1.75rem;
  }

  .bloco__texto .acoes {
    margin-top: 2rem;
  }

  .bloco__midia {
    position: relative;
  }

  .bloco__foto {
    overflow: hidden;
    border-radius: var(--raio-g);
    box-shadow: var(--sombra-2);
  }

  .bloco__foto img {
    width: 100%;
    aspect-ratio: 4 / 3.4;
    object-fit: cover;
  }

  .bloco__foto--alta img {
    aspect-ratio: 4 / 4.6;
  }

  .bloco__grafismo {
    position: absolute;
    top: -8%;
    right: -8%;
    z-index: -1;
    width: 60%;
    height: auto;
    aspect-ratio: 1;
    color: var(--azul-easy-50);
  }

  .secao--clara .bloco__grafismo {
    color: #E2EDF3;
  }

  .selo {
    position: absolute;
    bottom: 1.75rem;
    left: -1rem;
    z-index: 2;
    display: grid;
    padding: 1.125rem 1.375rem;
    border-radius: var(--raio);
    background: var(--azul-easy);
    color: var(--marinho-900);
    box-shadow: var(--sombra-2);
    line-height: 1.2;
  }

  .selo strong {
    font-family: var(--fonte-titulo);
    font-size: 1.5rem;
    font-weight: 600;
  }

  .selo > span {
    font-size: var(--t-sm);
    font-weight: 500;
  }

  .secao:has(.bloco__grafismo) {
    overflow-x: clip;
  }

  @media (min-width: 64em) {
    .bloco {
      grid-template-columns: 1fr 1fr;
    }

    .bloco--inverso .bloco__midia {
      order: -1;
    }

    .selo {
      left: -2rem;
    }
  }

  /* =========================================================
     Linha do tempo
     ========================================================= */
  .linha-tempo {
    position: relative;
    display: grid;
    gap: 2.25rem;
  }

  .linha-tempo::before {
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: calc(1.125rem - 1px);
    width: 2px;
    background: linear-gradient(180deg, var(--azul-easy), var(--azul-profundo));
    content: "";
  }

  .marco {
    position: relative;
    padding-left: 3.5rem;
  }

  .marco__ponto {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 2px solid var(--azul-profundo);
    border-radius: 50%;
    background: #fff;
  }

  .marco__ponto::after {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--azul-profundo);
    content: "";
  }

  .marco--hoje .marco__ponto {
    border-color: var(--azul-easy);
    background: var(--azul-easy);
  }

  .marco--hoje .marco__ponto::after {
    background: #fff;
  }

  .marco__ano {
    display: block;
    color: var(--azul-profundo);
    font-family: var(--fonte-titulo);
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.1;
  }

  .marco h3 {
    margin-top: 0.375rem;
    font-size: var(--t-h4);
  }

  .marco p {
    margin-top: 0.5rem;
    font-size: var(--t-sm);
  }

  @media (min-width: 64em) {
    .linha-tempo {
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
    }

    .linha-tempo::before {
      top: calc(1.125rem - 1px);
      right: 0;
      bottom: auto;
      left: 1.125rem;
      width: auto;
      height: 2px;
      background: linear-gradient(90deg, var(--azul-profundo), var(--azul-easy));
    }

    .marco {
      padding-top: 3.5rem;
      padding-left: 0;
    }
  }

  /* =========================================================
     Variações de grade dos cartões com ícone
     ========================================================= */
  @media (min-width: 64em) {
    .recursos--3 {
      grid-template-columns: repeat(3, 1fr);
    }

    .recursos--4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .recurso__icone--grande {
    width: 3.75rem;
    height: 3.75rem;
  }

  .recurso__icone--grande .icone {
    width: 1.75rem;
    height: 1.75rem;
  }

  .recurso ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.875rem;
  }

  .recurso li {
    padding: 0.375rem 0.875rem;
    border-radius: var(--raio-pilula);
    background: var(--azul-easy-50);
    color: var(--azul-profundo-escuro);
    font-size: var(--t-xs);
    font-weight: 700;
  }

  /* Seção escura genérica com cartões translúcidos */
  .secao--escura {
    overflow: hidden;
    background: var(--marinho-900);
    color: var(--texto-claro);
  }

  .secao--escura .recurso {
    border-color: rgb(255 255 255 / 0.12);
    background: rgb(255 255 255 / 0.04);
  }

  .secao--escura .recurso:hover {
    border-color: rgb(73 178 224 / 0.6);
    background: rgb(255 255 255 / 0.07);
    box-shadow: none;
  }

  .secao--escura .recurso h3 {
    color: #fff;
  }

  .secao--escura .recurso__icone {
    background: rgb(73 178 224 / 0.15);
    color: var(--azul-easy);
  }

  .secao--escura .recurso:hover .recurso__icone {
    background: var(--azul-easy);
    color: var(--marinho-900);
  }

  .secao--escura .grafismo-fundo {
    position: absolute;
    top: -20%;
    left: -10%;
    z-index: 0;
    width: 40rem;
    height: auto;
    aspect-ratio: 1;
    color: rgb(73 178 224 / 0.05);
  }

  .secao--escura > .recipiente {
    position: relative;
    z-index: 1;
  }

  /* =========================================================
     Ladrilhos de categoria (segmentos, linhas de produto)
     ========================================================= */
  .ladrilhos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
  }

  .ladrilho {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 5.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: #fff;
    color: var(--tinta);
    font-family: var(--fonte-titulo);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.25;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease);
  }

  .ladrilho:hover {
    border-color: var(--azul-easy);
    box-shadow: var(--sombra-1);
    transform: translateY(-3px);
  }

  /* Ladrilho com link (página 404): o cartão inteiro é a área de clique (WCAG 2.5.8). */
  .ladrilho:has(a) {
    position: relative;
  }

  .ladrilho a {
    display: inline-block;
    padding-block: 0.25rem;
    color: inherit;
  }

  .ladrilho a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .ladrilho__icone {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    background: var(--azul-easy-50);
    color: var(--azul-profundo);
    transition: background-color 0.3s, color 0.3s;
  }

  .ladrilho:hover .ladrilho__icone {
    background: var(--azul-profundo);
    color: #fff;
  }

  .ladrilho__icone .icone {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* =========================================================
     Sanfona (detalhes expansíveis, nativa)
     ========================================================= */
  .sanfona {
    display: grid;
    gap: 0.875rem;
  }

  .sanfona details {
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: #fff;
    transition: box-shadow 0.3s, border-color 0.3s;
  }

  .sanfona details[open] {
    border-color: transparent;
    box-shadow: var(--sombra-2);
  }

  .sanfona summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4.5rem;
    padding: 1rem 1.5rem;
    color: var(--tinta);
    font-family: var(--fonte-titulo);
    font-size: var(--t-h4);
    font-weight: 500;
    line-height: 1.25;
    list-style: none;
    cursor: pointer;
  }

  .sanfona summary::-webkit-details-marker {
    display: none;
  }

  .sanfona summary::after {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: auto;
    background: var(--azul-profundo);
    content: "";
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--duracao) var(--ease);
  }

  .sanfona details[open] summary::after {
    transform: rotate(180deg);
  }

  .sanfona summary:hover {
    color: var(--azul-profundo);
  }

  .sanfona__icone {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: var(--azul-easy-50);
    color: var(--azul-profundo);
  }

  .sanfona__conteudo {
    padding: 0 1.5rem 1.5rem calc(1.5rem + 2.75rem + 1rem);
  }

  .sanfona__conteudo p + p {
    margin-top: 0.875rem;
  }

  @media (max-width: 39.99em) {
    .sanfona__conteudo {
      padding-left: 1.5rem;
    }
  }

  /* =========================================================
     Cobertura (mapa do Brasil)
     ========================================================= */
  .cobertura__grade {
    display: grid;
    gap: 3rem;
    align-items: center;
  }

  .cobertura__mapa {
    position: relative;
    width: 100%;
    max-width: 32rem;
    margin-inline: auto;
  }

  .mapa__svg {
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .uf {
    fill: var(--marinho-700);
    stroke: var(--marinho-900);
    stroke-width: 1.4;
    stroke-linejoin: round;
    transition: fill 0.3s;
  }

  .uf--destaque {
    fill: var(--azul-easy);
  }

  .uf--destaque:hover {
    fill: var(--azul-easy-claro);
  }

  .mapa__cidade circle {
    fill: #fff;
  }

  .mapa__cidade .mapa__pulso {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    opacity: 0.7;
  }

  @media (prefers-reduced-motion: no-preference) {
    .mapa__pulso {
      transform-box: fill-box;
      transform-origin: center;
      animation: mapa-pulso 2s var(--ease) 3;
    }

    @keyframes mapa-pulso {
      from {
        opacity: 0.9;
        transform: scale(0.6);
      }

      to {
        opacity: 0;
        transform: scale(1.8);
      }
    }
  }

  .legenda {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
  }

  .legenda li {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
  }

  .legenda strong {
    display: block;
    color: #fff;
  }

  .legenda__cor {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.2rem;
    border-radius: 6px;
    background: var(--azul-easy);
  }

  .legenda__cor--outros {
    background: var(--marinho-700);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
  }

  .legenda__cor--cidade {
    border: 3px solid #fff;
    border-radius: 50%;
    background: transparent;
  }

  .cobertura .titulo-secao {
    margin-top: 1rem;
    color: #fff;
  }

  .cobertura .lead {
    margin-top: 1.25rem;
  }

  @media (min-width: 64em) {
    .cobertura__grade {
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
    }
  }

  /* =========================================================
     Mapa do Google carregado só por clique (privacidade)
     ========================================================= */
  .mapa-embutido {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 22rem;
    padding: 2rem;
    overflow: hidden;
    border-radius: var(--raio-g);
    background:
      radial-gradient(circle at 30% 20%, rgb(73 178 224 / 0.25), transparent 50%),
      linear-gradient(135deg, var(--marinho-800), var(--marinho-900));
    color: #fff;
    text-align: center;
  }

  .mapa-embutido iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .mapa-embutido__aviso {
    display: grid;
    justify-items: center;
    gap: 1rem;
    max-width: 26rem;
  }

  .mapa-embutido__aviso .icone {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--azul-easy);
  }

  .mapa-embutido__aviso p {
    color: var(--texto-claro);
    font-size: var(--t-sm);
  }

  .mapa-embutido__aviso strong {
    color: #fff;
    font-family: var(--fonte-titulo);
    font-size: var(--t-h4);
    font-weight: 500;
  }

  .mapa-embutido__aviso a {
    color: #fff;
  }

  /* =========================================================
     Contato: escolha da unidade (sobre o topo da página)
     ========================================================= */
  .escolhas {
    position: relative;
    z-index: 5;
    margin-top: -3.5rem;
  }

  .escolhas__grade {
    display: grid;
    gap: 1.5rem;
  }

  .escolha {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.75rem, 1rem + 2vw, 2.5rem);
    border-radius: var(--raio-g);
    background: #fff;
    box-shadow: var(--sombra-3);
  }

  .escolha__cabeca {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .escolha__cabeca h2 {
    font-size: var(--t-h3);
  }

  .escolha__cabeca p {
    color: var(--azul-profundo);
    font-size: var(--t-sm);
    font-weight: 700;
  }

  .escolha .acoes {
    margin-top: auto;
    padding-top: 0.5rem;
  }

  @media (min-width: 56em) {
    .escolhas__grade {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* Cartão de unidade com foto no topo */
  .unidade__foto {
    margin: calc(-1 * clamp(1.75rem, 1rem + 2vw, 2.5rem)) calc(-1 * clamp(1.75rem, 1rem + 2vw, 2.5rem)) 1.75rem;
    overflow: hidden;
  }

  .unidade__foto img {
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    transition: transform 0.9s var(--ease);
  }

  .unidade:hover .unidade__foto img {
    transform: scale(1.05);
  }

  .unidade:has(.unidade__foto) {
    overflow: hidden;
  }

  /* =========================================================
     Faixa do Instagram
     ========================================================= */
  .faixa-insta {
    display: grid;
    gap: 1.5rem;
    align-items: center;
    padding: clamp(2rem, 1.2rem + 3vw, 3.5rem);
    border-radius: var(--raio-g);
    background:
      radial-gradient(circle at 90% 10%, rgb(73 178 224 / 0.35), transparent 45%),
      linear-gradient(120deg, var(--marinho-800), var(--azul-profundo-escuro));
    color: var(--texto-claro);
  }

  .faixa-insta h2 {
    color: #fff;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  }

  .faixa-insta p {
    margin-top: 0.5rem;
  }

  .faixa-insta__icone {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.1);
    color: #fff;
  }

  .faixa-insta__icone .icone {
    width: 2rem;
    height: 2rem;
  }

  @media (min-width: 56em) {
    .faixa-insta {
      grid-template-columns: auto 1fr auto;
      gap: 2rem;
    }
  }

  /* =========================================================
     Ajustes diversos
     ========================================================= */
  .numeros--solto {
    margin-top: 0;
  }

  .etapas--3 {
    counter-reset: none;
  }

  @media (min-width: 64em) {
    .etapas--3 {
      grid-template-columns: repeat(3, 1fr);
    }

    .etapas--3::before {
      right: 16.66%;
      left: 16.66%;
    }
  }

  .link-seta--claro {
    color: #fff;
  }

  .link-seta--claro:hover {
    color: var(--azul-easy-claro);
  }

  .quem-somos__mais {
    margin-top: 1.75rem;
  }

  .rastreabilidade__mais,
  .contato__mais,
  .secao__mais {
    margin-top: 3rem;
    text-align: center;
  }

  .galeria--3 {
    grid-auto-rows: 14rem;
  }

  .galeria--3 .galeria__item {
    grid-column: auto;
    grid-row: auto;
  }

  @media (min-width: 64em) {
    .galeria--3 {
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: clamp(14rem, 18vw, 17rem);
    }
  }

  @media (max-width: 39.99em) {
    .galeria--3 {
      grid-template-columns: 1fr;
    }
  }

  .aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    max-width: 46rem;
    margin: 2.5rem auto 0;
    padding: 1.125rem 1.375rem;
    border-radius: var(--raio);
    background: var(--azul-easy-50);
    color: var(--tinta);
    font-size: var(--t-sm);
  }

  .aviso .icone {
    color: var(--azul-profundo);
  }

  /* Página atual no menu */
  .nav__link[aria-current="page"] {
    color: var(--azul-profundo);
    font-weight: 700;
  }

  @media (min-width: 75em) {
    .cabecalho[data-rolado="false"] .nav__link[aria-current="page"] {
      color: #fff;
    }

    .nav__link[aria-current="page"]::after {
      transform: scaleX(1);
    }
  }
}

@layer sections {
  /* Cartão de unidade com texto curto e link (Institucional) */
  .unidade__texto {
    flex: 1;
    padding-block: 1.5rem 1rem;
  }

  .unidade > .link-seta {
    align-self: flex-start;
  }
}

@layer sections {
  /* Tipografia de seção sobre fundo escuro, mesmo sem .cabeca-secao--claro */
  .secao--escura .rotulo {
    color: var(--azul-easy);
  }

  .secao--escura .titulo-secao {
    color: #fff;
  }

  .secao--escura .lead {
    color: var(--texto-claro);
  }
}

@layer sections {
  .bloco + .galeria {
    margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  }
}

@layer sections {
  /* Alvos de toque de pelo menos 24 px (WCAG 2.5.8) */
  .mapa-embutido__aviso a,
  .aviso a {
    display: inline-block;
    padding-block: 0.125rem;
  }
}

@layer sections {
  /* Topo seguido dos cartões de escolha (Contato): espaço para a sobreposição. */
  .pagina-topo:has(+ .escolhas) {
    padding-bottom: calc(clamp(3rem, 2rem + 4vw, 5rem) + 3.5rem);
  }
}

@layer sections {
  /* Faixa do topo: dois perfis de Instagram */
  .faixa-topo__redes {
    display: flex;
    gap: 1.25rem;
  }

  /* Entre 64em e 75em falta largura para tudo: o horário sai da faixa (continua no rodapé e no Contato). */
  @media (max-width: 74.99em) {
    .faixa-topo__horario {
      display: none;
    }
  }

  /* Rodapé: perfis com nome e descrição */
  .rodape__redes {
    display: grid;
    gap: 0.75rem;
  }

  .rodape__redes li + li {
    margin-top: 0;
  }

  /* .rodape .rodape__redes vence a regra genérica .rodape li a (inline-block). */
  .rodape .rodape__redes a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
  }

  .rodape__redes a:hover strong {
    color: var(--azul-easy);
    text-decoration: underline;
  }

  .rodape__redes strong {
    display: block;
    color: #fff;
    font-weight: 700;
  }

  .rodape__redes small {
    display: block;
    color: var(--texto-claro);
    font-size: var(--t-xs);
  }

  .rodape__rede-icone {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgb(255 255 255 / 0.25);
    border-radius: 50%;
    color: #fff;
  }
}