/* WJulio · site institucional e LPs
   Padrão do setor, no acabamento das grandes operadoras: claro, leve, sem efeito preso à rolagem. */

:root {
  --branco: #ffffff;
  --clara: #f4f7e6;        /* seções alternadas */
  --tinta: #234351;        /* azul petróleo, cor principal */
  --texto: #3d5a67;
  --verde: #b4d569;        /* botão principal */
  --verde-hover: #c3e07c;
  --azul: #1a6c80;         /* links e ícones (o #2b92aa escurecido para leitura) */
  --azul-claro: #bddbe0;
  --oliva: #abba7d;
  --creme: #f7efd1;
  --borda: #dfe6c8;
  --sombra: 0 1px 2px rgb(16 24 32 / 0.05), 0 10px 30px -14px rgb(16 24 32 / 0.16);
  --serifa: "Gloock", Georgia, serif;
  --sans: "Poppins", system-ui, sans-serif;
  --raio: 16px;
  --secao: clamp(64px, 8vw, 112px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--branco); color: var(--texto); font: 400 1.0625rem/1.7 var(--sans); }
::selection { background: var(--verde); color: var(--tinta); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
.icone { flex: none; }

h1, h2 { font-family: var(--serifa); font-weight: 400; color: var(--tinta); letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.75rem); line-height: 1.06; margin: 0 0 20px; }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem); line-height: 1.12; margin: 0 0 16px; }
h3 { font: 600 1.15rem/1.35 var(--sans); color: var(--tinta); margin: 0 0 8px; }
p { margin: 0 0 1em; text-wrap: pretty; }
strong { font-weight: 600; color: var(--tinta); }
mark.grifo { background: none; color: var(--azul); }

.container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
.estreito { max-width: 800px; }
.secao { padding: var(--secao) 0; }
.secao.clara { background: var(--clara); }
.secao-topo { max-width: 720px; margin-bottom: clamp(32px, 4vw, 48px); }
.secao-topo.centro { margin-left: auto; margin-right: auto; text-align: center; }
.secao-topo p { font-size: 1.1rem; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--tinta); color: #fff; padding: 10px 16px; }
.pular:focus { top: 12px; }

/* Botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 1rem/1.2 var(--sans); color: var(--tinta); background: var(--verde); border: 0; border-radius: 999px; padding: 15px 28px; min-height: 52px; text-decoration: none; cursor: pointer; transition: background-color 0.2s, transform 0.2s; }
.botao:hover { background: var(--verde-hover); }
.botao:active { transform: translateY(1px); }
.botao[disabled] { opacity: 0.7; cursor: progress; }
.botao-contorno { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.botao-contorno:hover { background: var(--clara); }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }

/* Topo */
.topo { position: sticky; top: 0; z-index: 20; background: var(--branco); box-shadow: 0 1px 0 var(--borda); }
.topo-linha { max-width: 1200px; margin: 0 auto; padding: 12px clamp(16px, 4vw, 32px); display: flex; align-items: center; gap: 28px; }
.marca { margin-right: auto; }
.marca img { width: clamp(120px, 12vw, 148px); }
.menu ul { list-style: none; display: flex; gap: clamp(18px, 2.4vw, 32px); margin: 0; padding: 0; }
.menu a { color: var(--tinta); text-decoration: none; font-weight: 500; font-size: 0.97rem; padding: 8px 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a[aria-current] { border-bottom-color: var(--verde); }
.botao-topo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 0.95rem; color: #fff; background: var(--tinta); padding: 11px 20px; border-radius: 999px; transition: background-color 0.2s; }
.botao-topo:hover { background: #2e5869; }
.menu-botao { display: none; }

/* Hero */
.hero { background: linear-gradient(180deg, var(--clara), var(--branco)); padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 6vw, 88px); }
.hero-grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-sub { font-size: clamp(1.1rem, 1rem + 0.35vw, 1.25rem); line-height: 1.6; max-width: 34em; }
.confianca { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 28px 0 0; padding: 0; font-size: 0.93rem; font-weight: 500; color: var(--tinta); }
.confianca li { display: flex; align-items: center; gap: 8px; }
.confianca .icone { color: var(--azul); }
.hero-foto { position: relative; align-self: end; }
.hero-foto::before { content: ""; position: absolute; inset: 18% 4% 0; background: var(--tinta); border-radius: 28px 28px 0 0; }
.hero-foto img { position: relative; width: min(100%, 460px); margin: 0 auto; }
.hero-foto .selo-foto { position: absolute; left: 0; bottom: 28px; background: #fff; border-radius: 12px; box-shadow: var(--sombra); padding: 12px 16px; font-size: 0.85rem; line-height: 1.4; color: var(--texto); max-width: 230px; }
.selo-foto strong { display: block; font-size: 0.95rem; }

/* Card de texto ao lado do título (Sobre) */
.hero-card { background: var(--branco); border: 1px solid var(--borda); border-radius: 20px; padding: clamp(24px, 3vw, 36px) clamp(28px, 4vw, 48px); box-shadow: var(--sombra); }
.hero-card > :last-child { margin-bottom: 0; }

/* Cards de serviço */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.card { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 28px 36px; box-shadow: var(--sombra); display: grid; grid-template-columns: auto 1fr; grid-auto-rows: auto; column-gap: 14px; align-content: start; transition: transform 0.2s, box-shadow 0.2s; }
.card > :not(.card-icone) { grid-column: 1 / -1; }
.card > .card-icone + h3 { grid-column: 2; align-self: center; margin: 0; }
.card > p { margin-top: 12px; }
.card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgb(16 24 32 / 0.05), 0 18px 36px -16px rgb(16 24 32 / 0.2); }
.card-icone { color: var(--azul); display: grid; place-items: center; }
.card-icone .icone { width: 30px; height: 30px; }
.secao > .container > .card-icone .icone, .estreito > .card-icone .icone { width: 36px; height: 36px; margin-bottom: 12px; }
.card p { font-size: 0.98rem; }
.card-link { margin-top: 4px; justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.card-link:hover { text-decoration: underline; }
a.card { text-decoration: none; color: inherit; }

/* Duas colunas: texto e imagem */
.duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.duas.invertida > :first-child { order: 2; }
.foto-moldura { background: var(--azul-claro); border-radius: 24px; padding: 32px 32px 0; overflow: hidden; }
.foto { border-radius: 24px; width: 100%; aspect-ratio: 1; object-fit: cover; }
.foto-moldura img { margin: 0 auto; max-height: 520px; width: auto; }

/* Listas */
.lista-check { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 10px; }
.lista-check li { position: relative; padding-left: 34px; }
.lista-check li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 22px; height: 22px; border-radius: 50%; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23234351' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.lista-x li::before { background: var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23234351' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.artigo ul { padding-left: 1.2em; }
.artigo li { margin-bottom: 0.4em; }

/* Passos */
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; counter-reset: passo; }
.passos li { counter-increment: passo; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 26px 28px; }
.passos li::before { content: counter(passo); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tinta); color: var(--verde); font: 1.2rem/1 var(--serifa); margin-bottom: 14px; }
.passos p { margin: 0; font-size: 0.98rem; }

/* Destaque e citação */
.destaque { background: var(--tinta); color: #dfe7d6; border-radius: 24px; padding: clamp(32px, 5vw, 56px) clamp(32px, 7vw, 88px); }
.destaque h2, .destaque h3, .destaque strong { color: var(--creme); }
.passos + .frase, .cards + .frase { margin-top: 32px; }
.estreito > p + h2, .estreito > ul + h2 { margin-top: 1.4em; }
.citacao { font: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem)/1.3 var(--serifa); color: var(--tinta); margin: 1.4em 0; padding-left: 24px; border-left: 1px solid var(--oliva); }
.frase { font: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem)/1.35 var(--serifa); color: var(--tinta); }

/* Perguntas frequentes */
.faq { max-width: 860px; margin: 0 auto; }
.pergunta { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; margin-bottom: 12px; }
.pergunta summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 16px; align-items: center; padding: 20px 32px; font: 600 1.05rem/1.4 var(--sans); color: var(--tinta); }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after { content: ""; width: 28px; height: 28px; border-radius: 50%; background: var(--clara) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23234351' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform 0.2s; }
.pergunta[open] summary::after { transform: rotate(180deg); }
.pergunta > :not(summary) { padding: 0 32px; }
.pergunta[open] > :last-child { padding-bottom: 20px; margin-bottom: 0; }

/* Blog */
.posts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.post a { display: flex; flex-direction: column; height: 100%; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--sombra); transition: transform 0.2s; }
.post a:hover { transform: translateY(-3px); }
.post img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.post-texto { display: flex; flex-direction: column; gap: 8px; padding: 22px 30px 26px; flex: 1; }
.post-meta { font-size: 0.85rem; color: var(--azul); font-weight: 500; }
.post-titulo { font: 1.3rem/1.3 var(--serifa); color: var(--tinta); }
.post-resumo { font-size: 0.95rem; }
.post-leia { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--azul); }
/* Página do blog (modelo do blog da Ana Sumam) */
.abertura { text-align: center; max-width: 860px; margin: 0 auto 36px; }
.abertura .hero-sub { margin: 0 auto; }
.filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; }
.filtros button { font: 500 0.9rem/1 var(--sans); color: var(--tinta); background: var(--branco); border: 1px solid var(--borda); border-radius: 999px; padding: 10px 18px; min-height: 40px; cursor: pointer; transition: background-color 0.2s; }
.filtros button:hover { background: var(--clara); }
.filtros button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.busca { max-width: 520px; margin: 0 auto 48px; }
.busca input { width: 100%; font: 400 1rem/1.4 var(--sans); color: var(--tinta); background: var(--clara); border: 1px solid var(--borda); border-radius: 10px; padding: 14px 18px; }
.posts.blog { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px 24px; }
.posts.blog .post { grid-column: span 2; }
.posts.blog.com-destaque .post:nth-child(-n+2) { grid-column: span 3; }
.posts.blog .post a { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; gap: 14px; }
.posts.blog .post a:hover { transform: none; }
.posts.blog .post a:hover .post-titulo { color: var(--azul); }
.posts.blog img { border-radius: 12px; }
.posts.blog .post-titulo { font-size: 1.35rem; transition: color 0.2s; }
.posts.blog.com-destaque .post:nth-child(-n+2) .post-titulo { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); }
.posts.blog .post-meta { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--borda); display: flex; flex-direction: column; gap: 2px; color: var(--texto); font-weight: 400; }
.posts.blog [hidden] { display: none; }
.vazio { text-align: center; }
@media (max-width: 960px) {
  .posts.blog .post, .posts.blog.com-destaque .post:nth-child(-n+2) { grid-column: span 3; }
}
@media (max-width: 560px) {
  .posts.blog .post, .posts.blog.com-destaque .post:nth-child(-n+2) { grid-column: 1 / -1; }
}
.ver-todos { display: flex; justify-content: center; margin-top: 36px; }

/* CTA no meio do artigo e Leia também (modelo do blog da Ana Sumam) */
.cta-artigo { background: var(--tinta); color: #dfe7d6; border-radius: var(--raio); padding: clamp(28px, 4vw, 40px) clamp(28px, 6vw, 56px); margin: 2.4em auto; }
.cta-artigo .cta-titulo { font: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem)/1.25 var(--serifa); color: var(--creme); margin: 0 0 0.5em; text-wrap: balance; }
.cta-artigo p { margin: 0; }
.cta-artigo .botao { margin-top: 22px; }
.leia-tambem { margin-top: clamp(40px, 6vw, 64px); }
.leia-tambem h2 { font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.9rem); margin: 0 0 18px; }
.relacionado { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 32px); align-items: center; padding: 16px; background: var(--clara); border: 1px solid var(--borda); border-radius: var(--raio); text-decoration: none; color: inherit; transition: border-color 0.2s; }
.relacionado + .relacionado { margin-top: 16px; }
.relacionado:hover { border-color: var(--oliva); }
.relacionado img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.relacionado .meta-rel { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--azul); margin-bottom: 8px; }
.relacionado .titulo-rel { display: block; font: clamp(1.15rem, 1rem + 0.5vw, 1.4rem)/1.3 var(--serifa); color: var(--tinta); }
.relacionado .ler-rel { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 0.92rem; font-weight: 600; color: var(--azul); }
.artigo .ver-todos { margin-top: 40px; }
@media (max-width: 600px) { .relacionado { grid-template-columns: 1fr; } }

/* Texto de card justificado (pedido da Aline, 27/10/2026); títulos continuam alinhados à esquerda */
:is(.card, .hero-card, .destaque, .pergunta, .cta-artigo) :is(p, li), .post-resumo { text-align: justify; hyphens: auto; }
/* .passos fica de fora: colunas de ~130px de texto abrem buracos entre as palavras quando justificadas */

/* Artigo */
.artigo { font-size: 1.1rem; }
.artigo h2 { margin-top: 1.6em; }
.artigo h3 { margin-top: 1.4em; }
.trilha { font-size: 0.9rem; color: var(--texto); }
.artigo-meta { color: var(--azul); font-weight: 500; }
.artigo-capa { margin: 28px 0 36px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; border-radius: var(--raio); }

/* Formulário */
.form-card { background: var(--branco); color: var(--texto); border-radius: 20px; padding: clamp(24px, 3vw, 36px); box-shadow: 0 2px 4px rgb(16 24 32 / 0.05), 0 24px 48px -20px rgb(16 24 32 / 0.22); border: 1px solid var(--borda); }
.form-titulo { font: clamp(1.4rem, 1.2rem + 0.5vw, 1.7rem)/1.2 var(--serifa); color: var(--tinta); margin: 0 0 18px; }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-size: 0.88rem; font-weight: 500; color: var(--tinta); }
.form input { font: 400 1rem/1.4 var(--sans); color: var(--tinta); background: var(--branco); border: 1px solid #c9d3b0; border-radius: 10px; padding: 12px 14px; min-height: 50px; width: 100%; transition: border-color 0.2s, box-shadow 0.2s; }
.form input:hover { border-color: var(--oliva); }
.form input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgb(43 146 170 / 0.25); }
.form input:user-invalid { border-color: #c0392b; }
.form .botao { width: 100%; margin-top: 4px; }
.lgpd { position: relative; font-size: 0.78rem; line-height: 1.5; margin: 2px 0 0; padding-left: 24px; color: var(--texto); }
.lgpd .icone { position: absolute; left: 0; top: 2px; color: var(--azul); }

/* Chamada final */
.chamada { background: var(--tinta); color: #dfe7d6; padding: var(--secao) 0; }
.chamada-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: clamp(32px, 6vw, 88px); align-items: center; }
.chamada h2 { color: var(--creme); }
.chamada .form-card { box-shadow: 0 24px 48px -20px rgb(0 0 0 / 0.45); border-color: transparent; }
.chamada-texto > p { font-size: 1.1rem; max-width: 30em; }
.chamada-autor { display: flex; align-items: center; gap: 16px; margin: 28px 0; max-width: 420px; }
.chamada-autor img { width: 80px; height: 80px; border-radius: 50%; }
.chamada-autor p { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.chamada-autor strong { display: block; color: var(--creme); font-size: 1rem; }
.link-wa { display: inline-flex; align-items: center; gap: 8px; color: var(--verde); font-weight: 600; }

/* Contato */
.dados { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 16px; }
.dados span { display: block; font-size: 0.82rem; font-weight: 600; color: var(--azul); }
.mapa { width: 100%; height: 340px; border: 0; border-radius: var(--raio); }

/* Rodapé */
.rodape { background: #1b3540; color: #c9d6cf; padding: clamp(48px, 6vw, 72px) 0 28px; font-size: 0.95rem; }
.rodape-grade { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.rodape img { width: 160px; margin-bottom: 16px; }
.rodape-titulo { font: 600 0.95rem/1.3 var(--sans); color: var(--verde); margin: 0 0 14px; letter-spacing: 0; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rodape a { color: var(--creme); }
.rede { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; }
.rodape-legal { max-width: 1200px; margin: 44px auto 0; padding: 20px clamp(16px, 4vw, 32px) 0; border-top: 1px solid rgb(171 186 125 / 0.3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 0.82rem; color: #a9bab3; }
.rodape-legal p { margin: 0; }

/* Cookies */
.cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; max-width: 560px; margin: 0 auto; background: var(--tinta); color: #dfe7d6; padding: 18px 20px; border-radius: 14px; box-shadow: 0 12px 40px -12px rgb(0 0 0 / 0.45); display: grid; gap: 12px; font-size: 0.9rem; }
.cookies[hidden] { display: none; }
.cookies p { margin: 0; }
.cookies a { color: var(--creme); }
.cookies div { display: flex; gap: 10px; }
.cookies .botao { min-height: 44px; padding: 10px 20px; }
.cookies .botao-contorno { color: var(--creme); box-shadow: inset 0 0 0 1.5px var(--azul-claro); }
.cookies .botao-contorno:hover { background: rgb(255 255 255 / 0.08); }

@media (max-width: 960px) {
  .hero-grade, .duas, .chamada-grade { grid-template-columns: 1fr; }
  .duas.invertida > :first-child { order: 0; }
  .hero-foto { max-width: 420px; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .rodape-grade > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .menu-botao { display: inline-flex; font: 600 0.95rem/1 var(--sans); color: var(--tinta); background: transparent; border: 1px solid var(--borda); border-radius: 999px; padding: 11px 16px; min-height: 44px; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--branco); box-shadow: 0 12px 24px -12px rgb(16 24 32 / 0.2); }
  .menu.aberto { display: block; }
  .menu ul { flex-direction: column; gap: 0; padding: 8px clamp(16px, 4vw, 32px) 16px; }
  .menu a { display: block; padding: 13px 0; font-size: 1.05rem; border-bottom: 1px solid var(--borda); }
  .botao-topo span { display: none; }
  .botao-topo { padding: 12px; }
}
@media (max-width: 560px) {
  .rodape-grade { grid-template-columns: 1fr; }
  .acoes .botao { width: 100%; }
  .hero-foto .selo-foto { position: relative; bottom: auto; margin: -12px auto 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}
.estreito > .card-icone { display: block; }