/* ==========================================================================
   LUXVET — style.css
   Estilos das seções abaixo da primeira tela.
   (Cabeçalho, hero, botões e cores ficam no CSS crítico do index.html.)
   ========================================================================== */

/* Seções */
.secao{position:relative;padding:72px 0}
.secao--sem-topo{padding-top:0}
.secao-topo{text-align:center;max-width:720px;margin:0 auto 40px}
.secao-topo p:not(.pilula){color:var(--texto-suave);font-size:1.05rem}
.script--bloco{display:block}
.pilula--ouro{background:var(--ouro);color:var(--verde-escuro)}
.acoes{text-align:center;margin-top:28px}
.acoes-linha{display:flex;flex-wrap:wrap;gap:12px}
.btn--claro{background:#fff;border-color:#fff;color:var(--verde)}
.circ{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:var(--verde);color:#fff}
.circ .ico{width:26px;height:26px}

/* Lista com patinhas douradas (como nos posts) */
.lista-pata{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:12px}
.lista-pata li{display:flex;gap:.7em;align-items:flex-start}
.lista-pata .pata{margin-top:.15em}
.lista-pata strong{color:var(--verde)}

/* 3. Serviços: fundo verde com folhas, como o post "Jd. Glória" */
.servicos{background:var(--verde);color:#fff;padding-top:36px;overflow:hidden}
.servicos h2{color:#fff}
.servicos .secao-topo p:not(.pilula){color:rgba(255,255,255,.86)}
.servicos .script{color:var(--ouro-claro)}
.folha{position:absolute;width:180px;opacity:.1;fill:#fff;pointer-events:none}
/* Lista com patinhas douradas em duas colunas, igual ao post; cada linha abre o WhatsApp */
.lista-servicos{list-style:none;margin:0 auto;padding:0;max-width:980px;column-gap:56px}
@media (min-width:800px){.lista-servicos{columns:2}}
.lista-servicos li{break-inside:avoid;border-bottom:1px dashed rgba(226,188,63,.45)}
.lista-servicos a{display:grid;grid-template-columns:24px 1fr auto;column-gap:14px;align-items:center;padding:16px 2px;color:#fff;text-decoration:none}
.lista-servicos a::before{content:"";grid-row:1/3;align-self:start;width:24px;height:24px;margin-top:2px;background:var(--ouro-claro);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 11.2c2.9 0 5.6 3.4 5.6 6.1 0 1.9-1.6 2.6-3 2.3-1-.2-1.7-.6-2.6-.6s-1.6.4-2.6.6c-1.4.3-3-.4-3-2.3 0-2.7 2.7-6.1 5.6-6.1z'/%3E%3Cellipse cx='5.2' cy='10.4' rx='1.9' ry='2.3'/%3E%3Cellipse cx='9' cy='6.2' rx='2' ry='2.5'/%3E%3Cellipse cx='15' cy='6.2' rx='2' ry='2.5'/%3E%3Cellipse cx='18.8' cy='10.4' rx='1.9' ry='2.3'/%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'%3E%3Cpath d='M12 11.2c2.9 0 5.6 3.4 5.6 6.1 0 1.9-1.6 2.6-3 2.3-1-.2-1.7-.6-2.6-.6s-1.6.4-2.6.6c-1.4.3-3-.4-3-2.3 0-2.7 2.7-6.1 5.6-6.1z'/%3E%3Cellipse cx='5.2' cy='10.4' rx='1.9' ry='2.3'/%3E%3Cellipse cx='9' cy='6.2' rx='2' ry='2.5'/%3E%3Cellipse cx='15' cy='6.2' rx='2' ry='2.5'/%3E%3Cellipse cx='18.8' cy='10.4' rx='1.9' ry='2.3'/%3E%3C/svg%3E") center/contain no-repeat}
.lista-servicos strong{font-size:1.12rem;font-weight:800;line-height:1.25}
.lista-servicos span{grid-column:2;color:rgba(255,255,255,.8);font-size:.92rem;line-height:1.45}
.lista-servicos .ico{grid-column:3;grid-row:1/3;color:var(--ouro-claro);transition:transform .2s}
.lista-servicos a:hover strong{color:var(--ouro-claro)}
.lista-servicos a:hover .ico{transform:scale(1.15)}

/* Duas colunas com foto (banho & tosa / Petlove) */
.duas-col{display:grid;gap:40px;align-items:center}
.col-foto{position:relative;margin:0}
.col-foto picture{display:block}
.col-foto img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--raio);border:6px solid #fff}
@media (min-width:900px){.duas-col{grid-template-columns:1fr 1fr;gap:56px}.duas-col--inv .col-foto{order:2}}

/* 4. Banho & tosa */
.tosa h2 .script{font-size:1.25em;margin-top:.1em}
.selo-fds{position:absolute;right:-6px;top:-14px;display:grid;place-items:center;width:118px;height:118px;padding:12px;margin:0;border-radius:50%;
  background:var(--verde);color:#fff;border:4px solid var(--ouro);text-align:center;font-size:.78rem;font-weight:800;text-transform:uppercase;line-height:1.2}

/* 5. Vacinas: card promocional no estilo do post da V10 */
.vacinas{background:linear-gradient(180deg,var(--creme) 0%,var(--creme-2) 100%)}
.vacinas h2 .script{font-size:1.5em}
.card-promo{display:grid;max-width:980px;margin-inline:auto;overflow:hidden;border-radius:var(--raio);background:#fff;border:2px solid rgba(201,162,39,.4)}
@media (min-width:820px){.card-promo{grid-template-columns:1.15fr .85fr}}
.promo-corpo{padding:28px 22px}
@media (min-width:600px){.promo-corpo{padding:36px}}
.promo-faixa{display:inline-block;margin-bottom:12px;padding:.3em .9em;border-radius:6px;background:var(--ouro);color:var(--verde-escuro);font-weight:900;font-style:italic;text-transform:uppercase;font-size:.85rem}
.promo-nome{margin:0 0 6px;font-size:clamp(2rem,6vw,3rem);line-height:.95;color:var(--verde);text-transform:uppercase}
.promo-nome em{color:var(--ouro-escuro)}
.promo-sub{margin:0 0 16px;font-family:var(--f-script);font-size:1.8rem;line-height:1;color:var(--ouro-escuro)}
.lista-check{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:10px}
.lista-check li{display:flex;gap:.6em;align-items:flex-start;font-size:.95rem}
.check{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--verde);color:#fff}
.check .ico{width:14px;height:14px}
.promo-lado{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:28px;text-align:center;background:var(--verde);color:#fff}
.preco{display:flex;flex-direction:column;align-items:center;margin:0;padding:14px 26px;border-radius:4px;background:#fff;color:var(--verde);border:4px solid var(--ouro)}
.preco small{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ouro-escuro)}
.preco strong{font-size:3.4rem;font-weight:900;line-height:1;letter-spacing:-.03em}
.preco sup{position:relative;top:.5em;font-size:.4em;vertical-align:top}
.dose{margin-top:6px;padding:.2em .8em;border-radius:999px;background:var(--verde);color:#fff;font-size:.72rem;font-weight:800;text-transform:uppercase}
.aviso{display:flex;gap:.5em;margin:0;padding:10px 12px;border-radius:4px;background:rgba(255,255,255,.12);text-align:left;font-size:.85rem;color:rgba(255,255,255,.94)}
.vacinas-extra{margin:28px 0 0;text-align:center;color:var(--texto-suave)}

/* 6. Petlove */
.petlove{background:#fff}
.petlove-marca{margin:0 0 .2em;font-weight:900;font-size:clamp(2rem,6vw,2.8rem);line-height:1;letter-spacing:-.02em;color:#5B2D90}
.petlove-marca i{font-style:normal;color:#E5007D}
.petlove h2 .script{font-size:1.2em;margin-top:.1em}
.beneficios{list-style:none;padding:0;display:grid;gap:12px;margin:22px 0 26px}
.beneficio{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:4px;background:var(--creme)}
.beneficio strong{display:block;color:var(--verde)}
.beneficio span{font-size:.94rem;color:var(--texto-suave)}

/* 7. Por que a LuxVet */
.porque{background:var(--verde-claro)}
/* Círculos com aro dourado, como os destaques do perfil */
.destaques{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:28px 44px}
.destaque{display:flex;flex-direction:column;align-items:center;gap:12px;width:130px;text-align:center;color:var(--verde);font-weight:800;font-size:.85rem;line-height:1.25;text-transform:uppercase}
.destaque .circ{width:76px;height:76px;outline:3px solid var(--ouro);outline-offset:4px}
.destaque .circ .ico{width:34px;height:34px}

/* 8. Dica de saúde */
.card-dica{display:grid;max-width:980px;margin-inline:auto;overflow:hidden;border-radius:var(--raio);background:#fff}
@media (min-width:820px){.card-dica{grid-template-columns:.9fr 1.1fr}}
.dica-foto picture,.dica-foto img{display:block;width:100%;height:100%}
.dica-foto img{object-fit:cover;aspect-ratio:4/3}
@media (min-width:820px){.dica-foto img{aspect-ratio:auto}}
.dica-corpo{padding:28px 22px}
@media (min-width:600px){.dica-corpo{padding:36px}}
.dica-corpo h3{font-size:clamp(1.5rem,4vw,2rem);line-height:1.1;color:var(--verde)}
.dica-corpo h3 span{color:var(--ouro-escuro)}

/* 9. Feed do Instagram (imita o grid do perfil) */
.feed{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:760px}
.post{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:4/5;padding:8px;overflow:hidden;border-radius:6px;text-align:center;text-decoration:none;transition:transform .2s,filter .2s}
.post:hover{transform:scale(1.03);filter:brightness(1.05)}
.post--verde{background:var(--verde);color:#fff}
.post--ouro{background:linear-gradient(160deg,#C9A227,#A88415);color:var(--verde-escuro)}
.post--creme{background:var(--creme-2);color:var(--verde)}
.post--foto{justify-content:flex-end;color:#fff}
.post--foto picture{position:absolute;inset:0}
.post--foto img{width:100%;height:100%;object-fit:cover}
.post--foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,79,43,.88))}
.post > span{position:relative;z-index:1}
.p-script{font-family:var(--f-script);font-size:clamp(1.4rem,6vw,2.6rem);line-height:1}
.post--verde .p-script{color:var(--ouro-claro)}
.post--ouro .p-script{color:#fff}
.p-caixa{font-weight:900;text-transform:uppercase;font-size:clamp(.62rem,2.4vw,1.05rem);line-height:1.05}
.p-mini{margin-top:4px;font-weight:700;font-size:clamp(.5rem,1.8vw,.75rem)}
.post--verde .p-mini:first-child,.post--creme .p-mini:first-child{color:var(--ouro-claro);text-transform:uppercase;margin:0 0 4px}
.post--creme .p-mini:first-child{color:var(--ouro-escuro)}

/* 11. Localização */
.local-grid{display:grid;gap:28px}
@media (min-width:900px){.local-grid{grid-template-columns:.85fr 1.15fr;align-items:stretch}}
.info-lista{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:16px}
.info-lista > li{display:flex;gap:14px;align-items:flex-start}
.info-lista .circ{width:44px;height:44px}
.info-lista .circ .ico{width:22px;height:22px}
.info-lista strong{display:block;color:var(--verde)}
.info-lista address{font-style:normal}
.info-lista a{color:var(--texto);text-decoration:none}
.info-lista a:hover{color:var(--verde);text-decoration:underline}
.horarios{list-style:none;margin:0;padding:0}
.horarios span{font-weight:700}
.horarios .is-hoje{color:var(--verde);font-weight:700}
.tag-hoje{display:inline-block;margin-left:.3em;padding:0 .6em;border-radius:999px;background:var(--ouro);color:var(--verde-escuro);font-size:.75rem;font-weight:800}
.mapa{position:relative;display:grid;place-items:center;min-height:320px;overflow:hidden;border-radius:var(--raio);border:6px solid #fff;background:var(--verde-claro)}
.mapa-desenho{position:absolute;inset:0;width:100%;height:100%}
.mapa-pino{position:absolute;left:50%;top:38%;display:grid;place-items:center;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--verde);border:3px solid var(--ouro)}
.mapa-pino .ico{transform:rotate(45deg);color:var(--ouro-claro);width:26px;height:26px}
.mapa-botao{position:relative;margin-top:110px}
.mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 12. Rodapé */
.rodape{padding:56px 0 96px;background:var(--verde-escuro);color:rgba(255,255,255,.86)}
.rodape-grid{display:grid;gap:32px}
@media (min-width:800px){.rodape-grid{grid-template-columns:1.3fr 1fr 1fr}}
.rodape .logo{color:#fff}
.rodape .logo-nome b,.rodape .logo-sub{color:var(--ouro-claro)}
.rodape-slogan{margin:14px 0 6px;font-family:var(--f-script);font-size:2rem;line-height:1;color:var(--ouro-claro)}
.rodape-titulo{margin:0 0 12px;font-size:.9rem;letter-spacing:.08em;color:var(--ouro-claro)}
.rodape address{font-style:normal}
.rodape-links{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rodape-links a{display:inline-flex;align-items:center;gap:.6em;color:#fff;text-decoration:none}
.rodape-links a:hover{color:var(--ouro-claro);text-decoration:underline}
.rodape-copy{margin:36px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);text-align:center;font-size:.85rem}

@media (prefers-reduced-motion:reduce){
  .btn:hover,.post:hover{transform:none}
}