/* Azul-bebê e rosa suave inspirados no logo fornecido. */
body{background:#fff}.topline{background:#123B52;color:#ffffff}.topline a:hover{color:#a43065}.header{background:#38BDF8}.hero{background:linear-gradient(120deg,#e6f7ff 0%,#f0faff 48%,#ffedf5 100%)}
.button{background:#bce7f8;border-color:#a0d6eb;color:#23485f;border-radius:11px}.button:hover{background:#a6ddf2;color:#23485f}.button-outline{background:#fff7fb;border-color:#ebc8d9;color:#87405f}.button-outline:hover{background:#fbe1ee;color:#71304f}.button-light{background:#fff;border-color:#efc5d9;color:#85405f}.button-light:hover{background:#fff5fa;color:#71304f}
.search-panel{border-color:#d5eaf5;box-shadow:0 15px 40px #82bbd61a}.search-field{background:#f7fcff;border-color:#c6e1ed}.search-field button{background:#f8c9df;color:#783653}.search-field button:hover{background:#f4b7d3}.search-field:focus-within{border-color:#d878a3;box-shadow:0 0 0 2px #f8c9df55}.search-form label .icon{color:#4d8ca6}.search-form[data-species=cat] label .icon{color:#b95183}
.hero-puppy{background:#e4f1f9}.hero-puppy img{mix-blend-mode:normal}.love-note{background:#fff9fc;border:1px solid #f5d8e7}.love-note .icon{color:#c04f85}.hero-kitten{border-color:#fff5fa}.text-card{border-top-color:#c6e7f7}.breed-card:hover{box-shadow:0 10px 35px #8bbcd51f}.card-photo{background:#effaff}.card-photo span{background:#fff8fcf2;color:#844063}.card-contact{border-color:#e0eff6}
.responsible-section{background:linear-gradient(110deg,#fff0f7,#f0faff);border-color:#f2dce8}.editorial-number{color:#e8b2cf}.choice-list>div{border-color:#e4dce7}.final-cta{background:linear-gradient(105deg,#e1f5ff,#ffe6f2);color:#294f65;border:1px solid #e7d5e2}.final-cta p{color:#566d7c}.final-cta .eyebrow{color:#9c4770}.values-strip>div>.icon{color:#6399b2}.values-strip>div:nth-child(2)>.icon{color:#c65b8c}
footer{background:#fff5fa;border-color:#f0dce7}.footer-bottom{border-color:#efdbe6}.footer-grid .social-link{color:#9b406c}.alphabet a[aria-current],.pagination [aria-current]{background:#c7eafa;color:#294f65;border-color:#aed8eb}.alphabet a:hover{background:#ffe5f1;color:#813b5b}.traits-grid section{background:#f5fbff}.breed-contact{background:#fff0f7;border:1px solid #f0d8e5}.category-links>a{background:linear-gradient(135deg,#e9f8ff,#fff5fa)}.category-links>a:nth-child(2){background:#fff0f7}.suggestions li[aria-selected=true],.suggestions li:hover{background:#e8f7ff}.source-note{border-color:#d9eaf1}
@media(max-width:600px){.nav nav{background:#fffafd}.hero{padding-bottom:26px}.final-cta{background:linear-gradient(145deg,#e1f5ff,#ffe6f2)}}
.card-photo.ai-photo img,.breed-portrait.ai-portrait img{width:100%;height:100%;object-fit:cover;object-position:center}.card-photo.ai-photo span{font-size:.75rem}.image-credit{font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}
.topline{
    background:#123B52 !important;
    color:#ffffff !important;
}


/* ===== Identidade vibrante + navegação responsiva ===== */
:root{
  --accent:#F53691;
  --accent-light:#ffffff;
  --sky:#38BDF8;
  --line:#B9E9FA;
}
body{background:#fff;color:#294f65}
.topline{background:#123B52!important;color:#fff!important}
.topline a{color:#fff}.topline a:hover{color:#fff;text-decoration:underline}
.header{background:#38BDF8!important}

/* Menu desktop: cada opção funciona visualmente como botão. */
.nav nav{gap:9px}
.nav nav a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:9px 13px;border-radius:11px;
  background:#fff;color:#24506a!important;border:1px solid rgba(255,255,255,.9);
  font-weight:650;transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.nav nav a:hover,.nav nav a:focus-visible{
  background:#F53691;color:#fff!important;border-color:#F53691;transform:translateY(-1px)
}
.nav nav a[aria-current="page"]{background:#F53691;color:#fff!important;border-color:#F53691}
.nav-contact{background:#F53691!important;border-color:#F53691!important;color:#fff!important}
.nav-contact:hover{background:#fff!important;border-color:#fff!important;color:#24506a!important}

/* Botões e interações com contraste alto. */
.button{background:#38BDF8;border-color:#38BDF8;color:#123f58}
.button:hover{background:#F53691;border-color:#F53691;color:#fff}
.button-outline{background:#fff;border-color:#38BDF8;color:#176484}
.button-outline:hover{background:#38BDF8;color:#123f58}
.button-light{background:#fff;border-color:#fff;color:#176484}
.button-light:hover{background:#F53691;border-color:#F53691;color:#fff}
a:hover{color:#F53691}

/* Retira os tons bebê: branco como base, pink/azul apenas nos destaques. */
.hero{background:#fff}
.search-panel,.search-field,.love-note,.card-photo,.traits-grid section{background:#fff}
.search-field{border-color:#38BDF8}.search-field button{background:#38BDF8;color:#123f58}.search-field button:hover{background:#F53691;color:#fff}
.search-field:focus-within{border-color:#F53691;box-shadow:0 0 0 2px rgba(245,54,145,.22)}
.responsible-section{background:#fff;border-color:#38BDF8}
.final-cta{background:#38BDF8;color:#123f58;border-color:#38BDF8}.final-cta p{color:#123f58}.final-cta .eyebrow{color:#123f58}
.category-links>a{background:#fff!important;border-color:#38BDF8}
.category-links>a:hover{background:#38BDF8!important;color:#123f58}.category-links>a:hover p{color:#123f58}
.category-links>a:nth-child(2){background:#fff!important}
.breed-contact{background:#fff;border-color:#F53691}
.alphabet a[aria-current],.pagination [aria-current]{background:#38BDF8;color:#123f58;border-color:#38BDF8}
.alphabet a:hover{background:#F53691;color:#fff}
.suggestions li[aria-selected=true],.suggestions li:hover{background:#38BDF8;color:#123f58}

/* Rodapé premium: azul-marinho profundo, branco e detalhes vibrantes. */
footer{background:#123B52!important;border-color:#123B52!important;color:#fff}
footer p,.footer-grid h2,.footer-grid a,.footer-grid .social-link{color:#fff!important}
.footer-grid p,.footer-bottom{color:#DCEAF1!important}
.footer-bottom a{color:#fff!important}
.footer-bottom{border-color:rgba(220,234,241,.28)!important}
.footer-grid .social-link .icon{color:#F53691!important}
.footer-logo{display:inline-block!important;margin-bottom:18px!important}
.footer-logo img{width:105px;height:105px;object-fit:contain}

/* Tablet: mantém os botões compactos para não embolar. */
@media(max-width:1100px) and (min-width:601px){
  .nav{gap:12px}.nav nav{gap:6px}.nav nav a{padding:8px 9px;font-size:.72rem}.nav-contact{padding:10px 11px;font-size:.7rem}
}

/* Celular */
@media(max-width:600px){
  /* Dados do médico em uma única faixa branca, sem invadir o cabeçalho. */
  .topline{
    min-height:42px;padding:9px 8px!important;background:#123B52!important;color:#fff!important;
    justify-content:center;text-align:center;font-size:clamp(9px,2.75vw,11px)!important;
    line-height:1.25;letter-spacing:0!important;white-space:nowrap;overflow:hidden
  }
  .topline span{display:block;max-width:100%}.topline>a{display:none}

  .nav{min-height:92px}
  .menu-toggle{
    display:flex!important;align-items:center;justify-content:center;margin-left:auto;
    width:52px;height:46px;padding:10px;border:0!important;border-radius:12px;
    background:#fff!important;color:#1678A0!important;box-shadow:0 3px 12px rgba(25,87,116,.13)
  }
  .menu-toggle:hover,.menu-toggle:focus-visible{background:#F53691!important;color:#fff!important}
  .menu-toggle .icon{width:29px;height:29px;stroke-width:2.1}

  /* Menu aberto: compacto, branco, itens separados e resposta visual ao toque. */
  .nav nav{
    display:none;position:absolute;top:100%;left:-18px;right:-18px;z-index:30;
    padding:10px 18px 12px!important;background:#fff!important;border-top:1px solid #38BDF8;
    box-shadow:0 16px 24px rgba(21,60,75,.14)
  }
  .nav nav.open{display:flex;flex-direction:column;align-items:stretch;gap:6px!important}
  .nav nav a{
    min-height:44px;padding:10px 14px!important;border-radius:10px;background:#fff!important;
    color:#176484!important;border:1px solid #38BDF8!important;font-size:.92rem!important;
    justify-content:flex-start
  }
  .nav nav a:hover,.nav nav a:focus-visible,.nav nav a:active,.nav nav a[aria-current="page"]{
    background:#F53691!important;color:#fff!important;border-color:#F53691!important;transform:none
  }
  .final-cta{background:#38BDF8}
  footer{background:#123B52!important}
}
\n\n/* ===== Ajustes finais: faixa técnica, navegação e rodapé compacto ===== */
/* Rodapé compacto e hover de alto contraste sobre o azul-marinho. */
footer{padding-top:34px!important}
.footer-grid{gap:28px!important;padding-bottom:26px!important;align-items:start}
.footer-grid h2{margin:0 0 10px!important;line-height:1.25}
.footer-grid a{margin:0 0 5px!important;line-height:1.35;padding:4px 7px;border-radius:7px;width:max-content;max-width:100%;transition:background .16s,color .16s}
.footer-grid p{margin:8px 0!important;line-height:1.5!important}
.footer-grid .social-link{margin-top:7px!important}
.footer-grid a:hover,.footer-grid a:focus-visible,.footer-bottom a:hover,.footer-bottom a:focus-visible{
  background:#38BDF8!important;color:#fff!important;text-decoration:none!important
}
.footer-grid a:hover strong,.footer-grid a:focus-visible strong{color:#fff!important}
.footer-logo{padding:0!important;margin:0 0 8px!important;background:transparent!important}
.footer-logo:hover,.footer-logo:focus-visible{background:transparent!important}
.footer-logo img{display:block}
.footer-bottom{padding-block:14px!important}

@media(max-width:600px){
  /* Permite quebra controlada: nenhum trecho do CRMV/MAPA é cortado. */
  .topline{
    min-height:0!important;height:auto!important;padding:7px 14px!important;
    white-space:normal!important;overflow:visible!important;line-height:1.3!important;
    font-size:clamp(9px,2.65vw,11px)!important;background:#123B52!important;color:#fff!important
  }
  .topline span{display:block!important;width:100%!important;max-width:100%!important;text-align:center!important;overflow-wrap:normal!important}
  footer{padding-top:28px!important}
  .footer-grid{gap:18px 14px!important;padding-bottom:20px!important}
  .footer-grid h2{margin-bottom:7px!important}
  .footer-grid a{margin-bottom:3px!important;padding:5px 7px!important}
  .footer-grid p{margin:6px 0!important}
}

/* ===== Correção final: faixa técnica sempre em uma única linha ===== */
@media(max-width:600px){
  .topline{
    min-height:38px!important;
    height:auto!important;
    padding:7px 6px!important;
    background:#123B52!important;
    color:#fff!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    white-space:nowrap!important;
    overflow:visible!important;
    line-height:1.15!important;
    letter-spacing:-.015em!important;
    font-size:clamp(7.8px,2.42vw,10.5px)!important;
  }
  .topline span{
    display:block!important;
    width:auto!important;
    max-width:none!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-align:center!important;
  }
  .topline>a{display:none!important}
}
@media(max-width:390px){
  .topline{font-size:clamp(7.2px,2.28vw,9px)!important;padding-inline:4px!important;letter-spacing:-.025em!important}
}


/* Ícone oficial do WhatsApp fornecido pelo site */
.whatsapp-icon{width:24px;height:24px;object-fit:contain;border-radius:50%;flex-shrink:0}
.floating-chat{background:transparent!important;box-shadow:none!important;overflow:hidden;padding:0!important}
.floating-chat:hover{background:transparent!important;transform:scale(1.05)}
.floating-chat .whatsapp-icon{width:100%!important;height:100%!important;object-fit:cover;border-radius:50%}
.card-contact .whatsapp-icon{width:17px!important;height:17px!important}
.values-strip .whatsapp-icon{width:28px!important;height:28px!important}
@media(max-width:600px){.values-strip .whatsapp-icon{width:26px!important;height:26px!important}}


/* ===== WhatsApp fornecido + acabamento do logo no rodapé ===== */
.footer-logo{background:transparent!important;padding:0!important;border-radius:0!important;width:max-content!important;box-shadow:none!important}
.footer-logo:hover,.footer-logo:focus-visible{background:transparent!important}
.footer-logo img{display:block!important}
.whatsapp-icon{display:inline-block!important;object-fit:contain!important;background:transparent!important}
.floating-chat .whatsapp-icon{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}

/* ===== Logo do rodapé: somente imagem/link, sem tratamento de botão ===== */
footer .footer-logo,footer .footer-logo:hover,footer .footer-logo:focus,footer .footer-logo:focus-visible,footer .footer-logo:active{
  display:inline-block!important;width:auto!important;max-width:none!important;height:auto!important;
  padding:0!important;margin:0 0 8px!important;background:none!important;background-color:transparent!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;outline:0!important;transform:none!important;
  color:inherit!important;text-decoration:none!important;
}
footer .footer-logo img{display:block!important;width:78px!important;height:auto!important;max-width:78px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
@media(max-width:600px){footer .footer-logo img{width:70px!important;max-width:70px!important}}

/* 2026-09-29 — favicon/social icons and premium final CTA */
.instagram-icon{display:inline-block!important;object-fit:contain!important;flex:0 0 auto!important;vertical-align:middle!important}
.topline .instagram-icon{width:18px!important;height:18px!important}
.footer-grid .instagram-icon{width:20px!important;height:20px!important}
.category-links .instagram-icon{width:28px!important;height:28px!important}
.final-cta{background:#123B52!important;color:#fff!important;border-color:#123B52!important}
.final-cta h2,.final-cta .eyebrow{color:#fff!important}
.final-cta p{color:#DCEAF1!important}
.final-cta .button-light{background:#fff!important;color:#123B52!important;border-color:#fff!important}
.final-cta .button-light:hover{background:#F53691!important;color:#fff!important;border-color:#F53691!important}

/* Favicon da marca no selo Pequenos encontros */
.love-note .love-note-favicon{width:27px;height:27px;display:block;flex:0 0 27px;object-fit:contain}
@media(max-width:820px){.love-note .love-note-favicon{width:20px;height:20px;flex-basis:20px}}
@media(max-width:600px){.love-note .love-note-favicon{width:18px;height:18px;flex-basis:18px}}