/* Todah Pets — estilos base, hover e responsividade
   Gerado na conversão do Claude Design para HTML estático (27/08/2026) */

html { scroll-behavior: smooth; }
body { margin: 0; background: #FBF6EE; color: #16241E; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #174A3B; text-decoration: none; }
a:hover { color: #D9663C; }
img { display: block; max-width: 100%; }

@keyframes tp-drift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(3%, -4%, 0) scale(1.08); } 100% { transform: translate3d(0,0,0) scale(1); } }
@keyframes tp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tp-float { 0% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } 100% { transform: translateY(0) rotate(-1deg); } }
@keyframes tp-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 22px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
@keyframes tp-slowzoom { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes tp-shine { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(320%) skewX(-18deg); } }

:focus-visible { outline: 3px solid #D9663C; outline-offset: 3px; border-radius: 6px; }

/* ---------- hover (convertido de style-hover) ---------- */
.hv1:hover { border-bottom-color: #F2A93B; color: #174A3B; }
.hv2:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 18px 34px -14px rgba(23,74,59,.75); color: #FBF6EE; }
.hv3:hover { transform: translateY(-3px) scale(1.02); color: #FBF6EE; }
.hv4:hover { background: #EAF1EC; transform: translateY(-3px); }
.hv5:hover { transform: translateY(-3px); color: #FBF6EE; }
.hv6:hover { transform: translateY(-3px) scale(1.03); color: #16241E; }
.hv7:hover { color: #F2A93B; }
.hv8:hover { transform: scale(1.08); color: #FFFFFF; }
.hv9:hover { transform: translateY(-2px) scale(1.03); color: #16241E; }
.hv10:hover { transform: scale(1.06); }
.hv11:hover { transform: translateY(-2px); color: #16241E; }

/* ---------- lightbox ---------- */
#tp-lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(14,30,24,.92); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 40px; cursor: zoom-out; opacity: 0; transition: opacity .28s ease; }
#tp-lightbox.is-open { opacity: 1; }
#tp-lightbox[hidden] { display: none; }
.tp-lb-inner { max-width: 1100px; width: 100%; }
#tp-lb-img { width: 100%; height: 76vh; border-radius: 20px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); background-repeat: no-repeat; background-position: center; background-size: contain; }
#tp-lb-cap { margin-top: 16px; text-align: center; color: #FBF6EE; font-size: 16px; font-weight: 600; }
#tp-lb-close { position: absolute; top: 20px; right: 24px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(251,246,238,.14); color: #FBF6EE; font-size: 30px; line-height: 1; cursor: pointer; transition: background .25s; }
#tp-lb-close:hover { background: rgba(251,246,238,.28); }

/* ================= RESPONSIVO =================
   O layout original usava grids e tipografia fixos, sem nenhuma media query.
   Como as medidas vêm de style inline, a sobrescrita exige !important. */

/* --- tablet --- */
@media (max-width: 1024px) {
  [style*="grid-template-columns: 1.02fr .98fr"],
  [style*="grid-template-columns: .95fr 1.05fr"],
  [style*="grid-template-columns: .8fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 40px !important; }

  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  [style*="grid-template-columns: 1.4fr .8fr .8fr"] { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  [style*="font-size: 74px"] { font-size: 52px !important; }
  [style*="font-size: 62px"] { font-size: 46px !important; }
  [style*="font-size: 54px"] { font-size: 42px !important; }
  [style*="font-size: 52px"] { font-size: 40px !important; }
  [style*="font-size: 50px"] { font-size: 38px !important; }
  [style*="font-size: 46px"] { font-size: 36px !important; }
  [style*="font-size: 44px"] { font-size: 34px !important; }
}

/* --- celular --- */
@media (max-width: 720px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 18px !important; }

  [style*="font-size: 74px"] { font-size: 36px !important; }
  [style*="font-size: 62px"] { font-size: 32px !important; }
  [style*="font-size: 54px"] { font-size: 29px !important; }
  [style*="font-size: 52px"] { font-size: 28px !important; }
  [style*="font-size: 50px"] { font-size: 27px !important; }
  [style*="font-size: 46px"] { font-size: 26px !important; }
  [style*="font-size: 44px"] { font-size: 25px !important; }
  [style*="font-size: 34px"] { font-size: 26px !important; }
  [style*="font-size: 30px"] { font-size: 24px !important; }
  [style*="font-size: 27px"] { font-size: 21px !important; }
  h1, h2 { line-height: 1.1 !important; }
  h3 { font-size: 20px !important; }
  blockquote { padding: 20px 22px !important; }

  section { padding-left: 20px !important; padding-right: 20px !important; }
  section[style*="padding: 88px"] { padding-top: 44px !important; padding-bottom: 24px !important; }
  section[style*="padding: 96px"],
  section[style*="padding: 100px"],
  section[style*="padding: 92px"] { padding-top: 56px !important; padding-bottom: 24px !important; }

  /* cartão CTA verde */
  [style*="border-radius: 40px"][style*="padding: 80px 60px"] { padding: 48px 24px !important; border-radius: 28px !important; }

  /* header: nav vira linha rolável, botão do WhatsApp sai (já existe o flutuante) */
  header > div { padding: 12px 18px !important; gap: 14px !important; }
  header nav { gap: 18px !important; font-size: 14px !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  header nav::-webkit-scrollbar { display: none; }
  header nav a[href^="https://wa.me"] { display: none !important; }
  header img { height: 38px !important; }
  header span { font-size: 21px !important; }

  /* fotos e cartões */
  img[style*="height: 620px"], img[style*="height: 540px"], img[style*="height: 560px"], img[style*="height: 500px"] { height: 360px !important; }
  article { min-height: 0 !important; padding: 26px 22px !important; }

  /* elementos absolutos que saem da tela no mobile */
  [style*="position: absolute"][style*="left: -34px"],
  [style*="position: absolute"][style*="right: -18px"],
  [style*="position: absolute"][style*="right: -26px"],
  [style*="position: absolute"][style*="left: -26px"] { position: static !important; margin-top: 14px !important; max-width: 100% !important; animation: none !important; }

  /* marquee mais discreto */
  [style*="animation: tp-marquee"] > div { font-size: 20px !important; gap: 26px !important; padding-right: 26px !important; }

  /* rodapé */
  footer { padding: 44px 20px 28px !important; }
  footer > div { gap: 30px !important; }

  /* lightbox */
  #tp-lightbox { padding: 16px !important; }
  #tp-lb-img { height: 64vh !important; }

  /* botão flutuante do WhatsApp um pouco menor */
  a[aria-label="Falar no WhatsApp"] { width: 58px !important; height: 58px !important; right: 18px !important; bottom: 18px !important; }
}

@media (max-width: 400px) {
  [style*="font-size: 74px"] { font-size: 31px !important; }
  [style*="font-size: 62px"] { font-size: 28px !important; }
  [style*="font-size: 54px"] { font-size: 25px !important; }
  [style*="font-size: 52px"] { font-size: 25px !important; }
  [style*="font-size: 50px"] { font-size: 24px !important; }
  [style*="font-size: 46px"] { font-size: 23px !important; }
  [style*="font-size: 44px"] { font-size: 23px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}