/* ==========================================================================
   THOR PET SPA — página /gatos (Estética Felina)
   Complemento do style.css. Carregue SEMPRE depois dele.

   Esta página é COMPLEMENTAR, não uma cópia da home: mesma paleta, mesmas
   fontes, mesmas ondas e o mesmo botão de WhatsApp — mas com blocos próprios,
   inspirados nas páginas internas de referência: banner de foto cortado em
   onda, título em duas linhas, textos com ícone de traço em zigue-zague,
   grade de cards mínimos e um bloco de perguntas que abre e fecha.
   ========================================================================== */

/* ───────────── BANNER DE TOPO (foto, sem texto por cima) ───────────── */
.pagehero{position:relative; overflow:hidden; background:var(--green-d);
  height:clamp(280px,40vw,520px);}
.pagehero__ph{
  position:absolute; inset:0;
  background:url("../img/gatos-hero-sm.jpg") center 20%/cover no-repeat;
}
/* logo abaixo do banner o título já entra — sem o respiro cheio de seção */
.sec--tight{padding-top:clamp(38px,5vw,66px);}
@media (min-width:900px){
  .pagehero__ph{background-image:url("../img/gatos-hero.jpg");}
}
/* véu de cima: mantém o menu branco legível sobre qualquer foto */
.pagehero::after{
  content:""; position:absolute; inset:0 0 auto 0; height:38%;
  background:linear-gradient(rgba(15,95,98,.34), transparent);
}

/* ───────────── TÍTULO DE PÁGINA (duas linhas) ───────────── */
.ptitle{text-align:center; margin:0 0 1.1rem;}
.ptitle__1{
  display:block; font-family:'Pacifico',cursive; font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.5rem); line-height:1.2;
  color:var(--green); letter-spacing:0;
}
.ptitle__2{
  display:block; font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:clamp(2.5rem,6.6vw,4.6rem); line-height:.95;
  color:var(--purple); letter-spacing:-.02em; text-transform:uppercase;
}
.pintro{max-width:660px; margin:0 auto; text-align:center; font-size:1.08rem;}
.pintro .btn{margin-top:1.4rem;}

/* ───────────── BLOCOS EM ZIGUE-ZAGUE COM ÍCONE DE TRAÇO ───────────── */
.zig{display:grid; gap:clamp(30px,4.5vw,52px); max-width:980px; margin:clamp(44px,6vw,72px) auto 0;}
.zig li{display:grid; grid-template-columns:220px 1fr; gap:clamp(20px,4vw,48px); align-items:center;}
.zig li:nth-child(even){grid-template-columns:1fr 220px;}
.zig li:nth-child(even) .zig__ico{order:2;}
.zig__ico{
  width:clamp(126px,15vw,180px); aspect-ratio:1; margin-inline:auto;
  display:grid; place-items:center; border-radius:50%;
  background:#fff; box-shadow:0 0 0 3px var(--green-l), var(--sh-s);
  transition:box-shadow .4s var(--e), transform .45s var(--e);
}
.zig li:hover .zig__ico{transform:translateY(-6px); box-shadow:0 0 0 3px var(--green), var(--sh-m);}
/* os ícones desta página são desenhados a traço, não preenchidos */
.zig__ico svg{
  width:52%; height:52%;
  fill:none; stroke:var(--green); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.zig__tx{text-align:center;}
.zig__tx h3{margin-bottom:.4em;}
.zig__tx p:last-child{margin-bottom:0;}

/* ───────────── GRADE DE CARDS MÍNIMOS ───────────── */
.mini{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem;}
.mini li{
  background:#fff; border-radius:26px; padding:1.6rem 1.1rem; text-align:center;
  box-shadow:var(--sh-s); color:var(--body);
  transition:transform .4s var(--e), box-shadow .4s var(--e);
}
.mini li:hover{transform:translateY(-7px); box-shadow:var(--sh-m);}
.mini__ico{display:block; width:2rem; height:2rem; margin:0 auto .7rem; fill:var(--green);}
.mini b{display:block; font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:1.04rem; line-height:1.25; color:var(--green-dd);}

/* ───────────── FOTO + TEXTO ───────────── */
.dual{display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(30px,5vw,64px); align-items:center;}
.dual--rev .dual__media{order:2;}
.photo-r{border-radius:38px; overflow:hidden; aspect-ratio:4/5; background:var(--green-l);
  box-shadow:var(--sh-m);}
.photo-r img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--e);}
.photo-r:hover img{transform:scale(1.06);}
/* a lista de conferência não tem margem embaixo — o botão que a segue precisa */
.ticks + .btn{margin-top:1.7rem;}

/* ───────────── PERGUNTAS QUE ABREM E FECHAM ───────────── */
/* <details>/<summary> nativos: funcionam sem JavaScript nenhum. */
.acc{max-width:900px; margin-inline:auto; display:grid; gap:.75rem;}
.acc details{
  background:#fff; border:2px solid transparent; border-radius:22px;
  box-shadow:var(--sh-s); overflow:hidden; transition:border-color .3s, box-shadow .3s;
}
.acc details[open]{border-color:var(--green-l); box-shadow:var(--sh-m);}
.acc summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:.9rem; padding:1.1rem 1.4rem;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.08rem;
  color:var(--green-dd);
}
.acc summary::-webkit-details-marker{display:none;}
.acc summary::before{
  content:"+"; flex:none; display:grid; place-items:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--green); color:#fff; font-size:1.25rem; line-height:1;
  transition:background .3s, rotate .35s var(--eb);
}
.acc details[open] summary::before{content:"−"; background:var(--purple); rotate:180deg;}
.acc summary:hover{color:var(--green);}
.acc__a{padding:0 1.5rem 1.4rem clamp(1.5rem,4vw,3.9rem); color:var(--body);}
.acc__a p:last-child,.acc__a ul:last-child{margin-bottom:0;}
.acc__a .ticks{margin-top:.9rem;}

/* ───────────── AVISO (orientação veterinária) ───────────── */
.note{
  display:flex; align-items:center; gap:1.3rem;
  background:#fff; border:2px solid rgba(31,178,166,.28);
  border-radius:28px; padding:1.4rem 1.7rem;
  margin-top:clamp(34px,4vw,48px);
  box-shadow:var(--sh-s); color:var(--body);
}
.note__i{flex:none; display:grid; place-items:center; width:56px; height:56px;
  border-radius:18px; background:var(--green); color:#fff;}
.note__i .ic{width:1.5rem; height:1.5rem;}
.note p{margin:0; font-size:.99rem;}
.note b{color:var(--green-dd);}

/* ───────────── CITAÇÃO DE DESTAQUE ───────────── */
.quote{max-width:900px; margin:0 auto clamp(34px,5vw,52px); text-align:center;
  padding:0 clamp(10px,4vw,40px);}
.quote p{font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:clamp(1.45rem,3.2vw,2.35rem); line-height:1.2; color:#fff; margin:0;}
.quote p em{font-style:normal; color:var(--green-l); display:block;}
.quote::before{content:"“"; display:block; font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:5rem; line-height:.6; color:var(--green-l); opacity:.6; margin-bottom:.1em;}

/* ───────────── OS "NÃOS" ───────────── */
.creed{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;}
.creed li{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  border-radius:30px; padding:2rem 1.7rem;
  transition:transform .4s var(--e), background .4s;}
.creed li:hover{transform:translateY(-8px); background:rgba(255,255,255,.18);}
.creed__x{display:inline-grid; place-items:center; width:52px; height:52px; border-radius:18px;
  background:var(--green-l); color:var(--purple); margin-bottom:1rem;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.4rem; line-height:1;}
.creed b{display:block; font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:1.18rem; color:#fff; margin-bottom:.35em;}
.creed p{margin:0; font-size:.96rem;}

/* ───────────── GALERIA FELINA ───────────── */
.gal{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem;}
.gal figure{
  position:relative; overflow:hidden; aspect-ratio:1/1;
  border-radius:32% 32% 32% 32% / 28% 28% 28% 28%;
  box-shadow:0 0 0 8px rgba(255,255,255,.5), var(--sh-m);
  transition:transform .45s var(--eb), border-radius .5s var(--e);
}
.gal figure:nth-child(even){border-radius:28% 28% 28% 28% / 34% 34% 34% 34%;}
.gal img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--e);}
.gal figure:hover{transform:translateY(-8px) rotate(-2deg); border-radius:26px;}
.gal figure:hover img{transform:scale(1.09);}

/* ───────────── Ajustes de contraste sobre banda colorida ───────────── */
/* No style.css a .ticks só vivia dentro de card branco. Solta sobre banda
   turquesa ela sumia — aqui ganha a versão clara, com a bolinha no amarelo. */
.band--green .ticks li,
.band--green-d .ticks li,
.band--purple .ticks li{color:#fff;}
.band--green .ticks .ic,
.band--green-d .ticks .ic,
.band--purple .ticks .ic{background:var(--lime); fill:var(--green-dd);}
/* dentro de card branco o padrão original continua valendo */
.acc__a .ticks li,.svc__b .ticks li{color:var(--green-dd);}
.acc__a .ticks .ic,.svc__b .ticks .ic{background:var(--green); fill:#fff;}
/* sobre o rosa, o texto da faixa de CTA vai para o roxo do logo */
.band--pink .cta-band{background:rgba(255,255,255,.45); border-color:#fff;}
.band--pink .cta-band p{color:var(--purple);}

/* ───────────── RESPONSIVO ───────────── */
@media (max-width:1080px){
  .mini{grid-template-columns:repeat(2,1fr);}
  .creed{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .dual,.dual--rev{grid-template-columns:1fr;}
  .dual--rev .dual__media{order:0;}
  .dual__media{max-width:420px; margin:0 auto;}
  .note{flex-direction:column; text-align:center; gap:1rem;}
  /* no celular o ícone sobe e o texto desce — o zigue-zague vira coluna */
  .zig li,.zig li:nth-child(even){grid-template-columns:1fr; gap:1.1rem;}
  .zig li:nth-child(even) .zig__ico{order:0;}
}
@media (max-width:640px){
  .mini,.creed{grid-template-columns:1fr;}
  .gal{grid-template-columns:repeat(2,1fr);}
  .acc summary{font-size:1rem; padding:.95rem 1.1rem;}
  .acc__a{padding:0 1.1rem 1.2rem 1.1rem;}
}