/* ==========================================================
   HOME
   ========================================================== */

/* ==========================================================
   Tablets (até 992px)
   ========================================================== */

@media (max-width: 992px) {
  .topo-adotpet h1 {
    font-size: 2.4rem;
  }

  .topo-adotpet p {
    font-size: 1rem;
  }

  /* Botões */

  .adotar-btn {
    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;
  }

  /* Aviso */

  .adotpet-aviso-card {
    margin: 35px auto;

    width: 100%;
  }

  .adotpet-header-aviso {
    justify-content: center;

    text-align: center;
  }

  .adotpet-btn-whatsapp {
    width: 100%;
  }

  /* Modal */

  .modal-box {
    width: 90%;

    max-width: 600px;
  }

  .adocao-section,
  .adotados-section {
    padding: 40px 20px;
  }

  .adocao-section h2,
  .adotados-section h2 {
    font-size: 2rem;
    margin-bottom: 30px;
  }

  /* Grid Home */

  .pets-grid-home {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 24px;

    max-width: 760px;
    margin: auto;
  }

  /* Cards */

  .pet-card {
    height: 320px;
  }

  .pet-card-front img {
    height: 68%;
  }

  .pet-info {
    padding: 16px;
  }

  .pet-info h3 {
    font-size: 2.35rem;
  }

  .pet-info p {
    font-size: 1.95rem;
  }

  .pet-details {
    padding: 18px;
  }

  .pet-details li {
    font-size: 1.95rem;

    margin-bottom: 8px;
  }

  .adotar-btn {
    font-size: 1.6rem;

    padding: 14px;
  }

  .adotpet-detalhe {
    flex-direction: column;
  }

  .adotpet-detalhe .adotpet-col-foto {
    width: 100%;

    border-right: none;

    border-bottom: 1px solid #eee;
  }

  .adotpet-detalhe .adotpet-foto-container {
    height: 420px;
  }

  .adotpet-detalhe .adotpet-col-info {
    width: 100%;
    padding: 10px 20px;
  }
}

/* ==========================================================
   Celulares (até 768px)
   ========================================================== */

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.6rem;
  }

  h3 {
    font-size: 1.3rem;
  }

  /* Espaçamentos */

  .dv-padding-hdpi {
    padding-left: 20px;

    padding-right: 20px;
  }

  .dv-padding-mdpi {
    padding: 15px;
  }

  /* Redes sociais */

  .redes-sociais {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;
  }

  .svg-icon {
    width: 28px;

    height: 28px;
  }

  /* Aviso */

  .adotpet-aviso-card {
    border-left: none;

    border-top: 5px solid var(--cor-institucional);

    margin-top: 30px;
  }

  .adotpet-header-aviso {
    flex-direction: column;

    gap: 10px;
  }

  .adotpet-header-aviso h3 {
    text-align: center;
  }

  .adotpet-btn-whatsapp {
    font-size: 0.95rem;
  }

  /* Modal */

  .modal-overlay {
    padding: 20px;
  }

  .modal-box {
    width: 100%;

    border-radius: 12px;
  }

  .modal-box h2 {
    font-size: 1.5rem;
  }

  .modal-box p {
    font-size: 0.95rem;
  }

  .btn-close {
    width: 100%;
  }

  /* WhatsApp fixo */

  .fixed-whatsapp {
    right: 15px;

    left: 15px;

    width: auto;

    justify-content: center;

    border-radius: 15px 15px 0 0;
  }

  .adocao-section,
  .adotados-section {
    padding: 30px 15px;
  }

  .adocao-section h2,
  .adotados-section h2 {
    font-size: 1.7rem;

    margin-bottom: 25px;
  }

  .pets-grid-home {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 16px;

    padding: 32px 20px;
  }

  .pet-card {
    height: 300px;
  }

  .pet-card-front img {
    height: 62%;
  }

  .pet-info {
    padding: 12px;
  }

  .pet-info h3 {
    font-size: 1.05rem;
  }

  .pet-info p {
    font-size: 0.82rem;
  }

  .pet-details {
    padding: 14px;
  }

  .pet-details li {
    font-size: 1.2rem;

    margin-bottom: 6px;
  }

  .adotar-btn {
    width: 100%;

    padding: 12px;

    font-size: 0.9rem;
  }

  .carimbo {
    width: 70px !important;
  }

  .adotpet-listagem {
    display: flex;

    flex-direction: column;
  }

  .adotpet-listagem .pet-image {
    width: 100%;

    height: 260px;
  }

  .adotpet-listagem .pet-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;
    object-position: top;
  }

  .adotpet-listagem .pet-details {
    padding: 20px;
    width: 100%;
  }

  .adotpet-listagem .social-icons {
    justify-content: center;
  }

  .adotpet-listagem .adotpet-nome-animal {
    font-size: 1.7rem;
  }

  .adotpet-listagem .adotpet-grid-item {
    grid-template-columns: 1fr;
  }

  .pet-temperamento {
    text-align: left;
  }

  .pet-details-action {
    margin-top: 20px;
  }

  .pet-details-action .adotar-btn {
    width: 100%;
  }

  .adotpet-detalhe {
    border-radius: 12px;
  }

  .adotpet-detalhe .adotpet-foto-container {
    height: 300px;

    padding: 15px;
  }

  .adotpet-detalhe .btn-open {
    width: 100%;
  }

  .adotpet-detalhe .adotpet-col-info {
    padding: 20px 10px;
  }

  .adotpet-detalhe .adotpet-titulo-ficha {
    font-size: 1.5rem;

    text-align: center;
  }

  .adotpet-detalhe .adotpet-grid-item {
    display: flex;

    flex-direction: column;
  }

  .adotpet-detalhe .adotpet-grid-item p {
    font-size: 0.95rem;
  }

  .adotpet-detalhe .adotpet-temperamento {
    font-size: 0.95rem;

    text-align: center;
  }

  .adotpet-detalhe .dv-gray {
    font-size: 0.9rem;

    text-align: justify;
  }
}

/* ==========================================================
   Celulares pequenos (até 576px)
   ========================================================== */

@media (max-width: 576px) {
  html {
    font-size: 15px;
  }
  body {
    overflow-x: hidden;
  }
  h1 {
    font-size: 1.7rem;
  }
  h2 {
    font-size: 1.4rem;
  }
  h3 {
    font-size: 1.15rem;
  }
  .fundo-adotados {
    background: #ffffff;
    width: auto;
  }
  .svg-icon {
    width: 24px;
    height: 24px;
  }
  .modal-box {
    padding: 20px 15px;
  }
  .modal-box h2 {
    font-size: 1.25rem;
  }
  .modal-box p {
    font-size: 0.9rem;
  }
  .adotpet-btn-whatsapp {
    min-height: 46px;
    font-size: 0.88rem;
  }
  .fixed-whatsapp {
    padding: 12px;
    font-size: 0.85rem;
  }
  .adocao-section,
  .adotados-section {
    padding: 25px 10px;
  }
  .pets-grid-home {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .pet-card {
    height: 270px;
    border-radius: 12px;
  }
  .pet-card-front img {
    height: 58%;
  }
  .pet-info {
    padding: 10px;
  }
  .pet-info h3 {
    font-size: 1.6rem;
    margin-bottom: 5px;
  }
  .pet-info p {
    font-size: 1rem;
  }
  .pet-details {
    padding: 10px;
  }
  .pet-details li {
    font-size: 1.2rem;
    line-height: 1.6;
  }
  .pet-details {
    display: flex;
    flex-direction: column;
  }

  .pet-details-content {
    flex: 1;
  }

  .pet-details-action {
    margin-top: auto;
  }

.adotar-btn,
 .adotar-btn:link,
 .adotar-btn:visited{
    display: inline-block;
    padding: 1.2rem;
    background: var(--cor-acao);
    color: var(--cor-texto-inverso) !important;
    text-decoration: none;
    border-radius: 5px;
    transition: color .3s ease;
}

  .adocao-section .adotar-btn i {
    flex-shrink: 0;
    font-size: 0.9rem;
  }

  .adotar-btn-vejamais {
    padding: 1.7rem 1rem !important;
    font-size: 0.85rem !important;
    width: fit-content;
    color: white;
  }

  .frase-adocao {
    font-size: 0.75rem;

    line-height: 1.35;
  }

  .carimbo {
    width: 55px !important;
  }

  .adotpet-listagem {
    border-radius: 12px;
  }

  .adotpet-listagem .pet-image {
    height: 220px;
  }

  .adotpet-listagem .pet-details {
    padding: 16px;
    width: 100%;
  }

  .adotpet-listagem .social-icons {
    gap: 18px;
  }

  .adotpet-listagem .social-icons img {
    height: 22px;
  }

  .adotpet-listagem .adotpet-nome-animal {
    font-size: 2rem;
  }

  .adotpet-listagem .adotpet-grid-item p {
    font-size: 1.2rem;
    line-height: 1.2rem;
  }

  .pet-temperamento {
    font-size: 0.9rem;
  }

  .pet-details-action .adotar-btn {
    font-size: 0.9rem;
  }

  .adotpet-detalhe .adotpet-foto-container {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
  }

  .adotpet-detalhe .adotpet-foto-container img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  .adotpet-detalhe .adotpet-col-info {
    padding: 20px 10px;
  }

  .adotpet-detalhe .adotpet-titulo-ficha {
    font-size: 1.3rem;
  }

  .adotpet-detalhe .adotpet-grid-item p {
    font-size: 0.88rem;
  }

  .adotpet-detalhe .adotpet-temperamento {
    font-size: 0.88rem;
  }

  .adotpet-detalhe .btn-open {
    font-size: 0.9rem;

    padding: 12px;
  }
}
/* ==========================================================
   Celulares (até 380px)
   ========================================================== */

@media (max-width: 380px) {
  :root {
    --font-size-display: 2.4rem;
    --font-size-h1: 2.1rem;
    --font-size-h2: 1.9rem;
    --font-size-h3: 1.7rem;
    --font-size-h4: 1.6rem;
    --font-size-h5: 1.3rem;

    --font-size-base: 1.3rem;
    --font-size-small: 1.1rem;
    --font-size-tiny: 1rem;
    --font-size-p: 0.8rem;
  }

  h1,
  .h1 {
    font-size: var(--font-size-h1);
  }
  h2,
  .h2 {
    font-size: var(--font-size-h2);
  }
  p {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
    color: var(--cor-texto);
    margin-bottom: 1.2rem;
  }

.adotar-btn,
 .adotar-btn:link,
 .adotar-btn:visited{
    display: inline-block;
    padding: 1.2rem;
    background: var(--cor-acao);
    color: var(--cor-texto-inverso) !important;
    text-decoration: none;
    border-radius: 5px;
    transition: color .3s ease;
    width: auto;
}

.adotar-btn:hover{
    color: var(--cor-destaque) !important;
}

.adotar-btn:active,
.adotar-btn:focus{
    color: var(--cor-destaque) !important;
}

.adotar-btn i {
    flex-shrink: 0;
    font-size: 0.9rem;
  }

  .whatsapp-link {
    font-size: var(--font-size-small);
  }
 /* .adocao-section,
  .adotados-section {
    padding: 25px 10px;
  } */
  .fundo-adotados {
    background: #ffffff;
    width: auto;
  }
  .adotpet-detalhe .adotpet-foto-container {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
  }
  .adotpet-detalhe .adotpet-foto-container img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }
  .pets-grid-home {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .pet-card {
    height: 270px;
    border-radius: 12px;
  }
  .pet-card-front {
    display: block;
  }
  .pet-card-front img {
    height: 58%;
  }
  .pets-grid-home .pet-card .pet-card-front::after {
    content: "↻ Ver detalhes";
    font-size: var(--font-size-tiny);
    font-weight: 400;
  }
  .pet-info {
    padding: 10px;
  }

  .pet-info h3 {
    font-size: 0.95rem;

    margin-bottom: 5px;
  }

  .pet-info p {
    font-size: var(--font-size-small);
  }

  .pet-details li {
    font-size: 1rem;

    line-height: 1.3;
  }

  .adotar-btn-vejamais {
    padding: 0.7rem 0 !important;
    font-size: 0.85rem !important;
    width: fit-content;
  }

  .frase-adocao {
    font-size: 0.75rem;

    line-height: 1.35;
  }

  .carimbo {
    width: 55px !important;
  }

  .adotpet-listagem {
    border-radius: 12px;
  }
  .pet-header {
    gap: 8px;
  }

  .pet-header .adotpet-nome-animal {
    font-size: 1.8rem;
    text-align: start;
  }

  .pet-header .social-icons img {
    width: 18px;
    height: 18px;
  }

  .adotpet-listagem .pet-image {
    height: 220px;
  }

  .adotpet-listagem .pet-details {
    padding: 20px;
    width: 100%;
  }

  .adotpet-listagem .adotpet-nome-animal {
    font-size: 1.35rem;
  }

  .adotpet-listagem .adotpet-grid-item p {
    font-size: 0.95rem;
  }

  .pet-temperamento {
    font-size: 0.9rem;
  }

  .pet-details-action .adotar-btn {
    font-size: 0.9rem;
  }

  .adotpet-detalhe .adotpet-foto-container {
    height: 240px;
    object-position: top;
  }

  .adotpet-detalhe .adotpet-col-info {
    padding: 10px 20px;
  }

  .adotpet-detalhe .adotpet-titulo-ficha {
    font-size: 1.3rem;
  }

  .adotpet-detalhe .adotpet-grid-item p {
    font-size: 0.88rem;
  }

  .adotpet-detalhe .adotpet-temperamento {
    font-size: 0.88rem;
  }

  .adotpet-detalhe .btn-open {
    font-size: 0.9rem;

    padding: 12px;
  }

  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-column {
    width: 100%;
    flex: 1 1 30px;
  }

  .image-column img {
    margin: 10px auto;
  }

  .footer-bottom {
    text-align: center;
  }

  .footer-links a {
    font-size: var(--font-size-tiny);
  }

  .footer-links a:hover {
    color: #00bef2;
  }

  .footer-copy {
    text-align: center;
    margin-top: 20px;
    font-size: var(--font-size-small);
    color: #cdd9e5;
  }
  .img-noticia-principal {
    max-height: 350px !important; /* Ajuste para celular */
  }
}