/* =====================================================================
   PetHub — Estilos específicos de páginas
   ===================================================================== */

/* ---------- Home: hero ---------- */
.home-hero h1 { font-size: clamp(40px, 6.2vw, 76px); }
.home-hero .carousel { margin-top: 44px; }

/* ---------- Preços ---------- */
.pricing-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; }
.pricing-tabs .chip.is-soon { opacity: .6; }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: var(--radius-lg); border: 1.5px solid var(--border-light); background: #fff; }
.plan-card.is-featured { border-color: var(--accent); box-shadow: var(--shadow-brand); }
.plan-card__flag { position: absolute; top: -14px; left: 24px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--brand-lime); color: var(--text-heading); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.plan-card h3 { font-size: 22px; }
.plan-card .plan-card__desc { margin-top: 8px; font-size: 14px; min-height: 44px; }
.plan-card .price { display: flex; align-items: baseline; gap: 6px; margin: 22px 0 6px; font-family: var(--font-display); color: var(--text-heading); }
.plan-card .price strong { font-size: 44px; letter-spacing: -.03em; line-height: 1; }
.plan-card .price span { color: var(--text-muted); font-size: 14px; font-family: var(--font-body); }
.plan-card .price-note { font-size: 13px; color: var(--text-muted); }
.plan-card .btn { margin: 22px 0; }
.plan-card .check-list { font-size: 14px; gap: 10px; }
.plan-card .check-list li { font-weight: 500; }
.plan-card .check-list .icon { width: 18px; height: 18px; }
.plan-card.is-dark { background: var(--bg-dark); color: var(--text-on-dark-muted); border-color: transparent; }
.plan-card.is-dark h3, .plan-card.is-dark .price, .plan-card.is-dark .check-list li { color: #fff; }
.plan-card.is-dark .check-list .icon { color: var(--brand-lime); }
@media (max-width: 1100px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .plans { grid-template-columns: 1fr; } }

.compare { margin-top: 64px; }
.compare__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare__table th, .compare__table td { padding: 14px 16px; border-bottom: 1px solid var(--border-light); text-align: center; }
.compare__table th:first-child, .compare__table td:first-child { text-align: left; }
.compare__table thead th { position: sticky; top: var(--header-h); background: #fff; font-family: var(--font-display); font-size: 15px; color: var(--text-heading); z-index: 1; }
.compare__table tbody th { font-weight: 600; color: var(--text-heading); }
.compare__table .group th { background: var(--bg-off-white); text-align: left; font-family: var(--font-display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.compare__table .icon { width: 18px; height: 18px; margin: auto; color: var(--accent); }
.compare__table .no { color: var(--border-strong); }
.compare__scroll { overflow-x: auto; }
@media (max-width: 800px) { .compare__table { min-width: 720px; } }
.support-grid .card .icon-box { margin-bottom: 4px; }

/* ---------- Blog / listas ---------- */
.list-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.list-hero .stats-inline { grid-template-columns: 1fr 1fr; margin-top: 28px; }
.list-hero img { width: 100%; border-radius: var(--radius-xl); aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--shadow-md); }
@media (max-width: 900px) { .list-hero { grid-template-columns: 1fr; } }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filter-bar--secondary { margin-top: -12px; }
.filter-bar--secondary .chip { font-size: 13px; padding: 8px 14px; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }
.post-card[hidden] { display: none; }
.empty-state { padding: 48px; text-align: center; border-radius: var(--radius-lg); background: var(--bg-off-white); }

/* ---------- Post ---------- */
.post-hero { max-width: 820px; margin-inline: auto; text-align: center; }
.post-hero h1 { font-size: clamp(32px, 4.4vw, 54px); margin: 18px 0; }
.post-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; font-size: 14px; color: var(--text-muted); }
.post-cover { margin: 40px auto 0; max-width: 1000px; }
.post-cover img { width: 100%; aspect-ratio: 16/8; object-fit: cover; border-radius: var(--radius-xl); }
.post-cover img[src*="rotina-creche-nova-capa"] { object-position: top center; }
.post-cover img[src*="spa-pet-banho"] { object-position: top center; }
.post-cover img[src*="hotel-beagle-v2"] { object-position: top center; }
/* fotos em pé: o recorte 16:8 mostra a cabeça dos cães */
.post-cover img[src*="training-1"] { object-position: center 20%; }
.post-cover img[src*="creche-caes-correndo"] { object-position: center 58%; }
.post-cover img[src*="hotel-caes-gramado"] { object-position: center 36%; }
.post-cover img[src*="alta-temporada-tres-caes"] { object-position: center 29%; }
.post-cover img[src*="inadimplencia-tres-caes-gramado"] { object-position: center 69%; }
.post-cover img[src*="enriquecimento-ambiental-creche"] { object-position: center 22%; }
.post-cover img[src*="pacote-diarias-creche-patio"] { object-position: center 43%; }
.post-cover img[src*="adaptacao-caes-creche"] { object-position: center 62%; }
.post-cover img[src*="custo-por-pet-cao-dinheiro"] { object-position: center 52%; }
.post-cover img[src*="separar-dinheiro-gestao"] { object-position: center 32%; }
.post-cover img[src*="primeiro-funcionario-creche"] { object-position: center 55%; }
.post-cover img[src*="hotel-beagle.jpg"] { object-position: center 8%; }
.post-cover img[src*="protocolo-sanitario-vacina"] { object-position: center 40%; }
.post-cover img[src*="faltas-creche-caes-patio"] { object-position: center 75%; }
.post-cover img[src*="spa-pet.webp"] { width: auto; max-width: 280px; aspect-ratio: auto; object-fit: contain; margin: 0 auto; display: block; }
.prose figure img[src*="spa-pet.webp"] { max-height: 80px; width: auto; margin: 0 auto; display: block; }
.post-cover img[src*="pet-feliz.webp"] { width: auto; max-width: 320px; aspect-ratio: auto; object-fit: contain; margin: 0 auto; display: block; background: var(--bg-off-white, #f8f7f5); padding: 32px 40px; border-radius: var(--radius-xl); }
.prose figure img[src*="pet-feliz.webp"] { max-height: 80px; width: auto; margin: 0 auto; display: block; }
.post-cover img[src*="pets.webp"] { object-position: center top; }
.post-cover img[src*="owner-3"] { object-position: center 30%; }
.post-cover img[src*="tosa-salao"] { object-position: center 25%; }
.prose figure img[src*="pet-hospede-checkin"] { max-width: 480px; width: 100%; height: auto; margin: 0 auto; display: block; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }

.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; }
.post-sidebar { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; display: grid; gap: 16px; }
.post-sidebar .card h3 { margin-top: 0; font-size: 17px; }
.post-sidebar .card ul { display: grid; gap: 10px; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--text-heading); }
@media (max-width: 1000px) { .post-layout { grid-template-columns: 1fr; } .post-sidebar { position: static; } }

/* ---------- Demo ---------- */
.demo-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.demo-form { display: grid; gap: 16px; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-xl); background: #fff; border: 1px solid var(--border-light); box-shadow: var(--shadow-md); }
.demo-form h2 { font-size: 24px; }
.demo-benefits { display: grid; gap: 18px; margin-top: 32px; }
.demo-benefits li { display: flex; gap: 14px; align-items: flex-start; }
.demo-benefits b { display: block; color: var(--text-heading); }
.demo-benefits span { font-size: 15px; }
.demo-stats { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.demo-stats .stat { padding: 20px; border-radius: var(--radius-md); background: var(--bg-off-white); }
.demo-stats .stat strong { color: var(--accent); font-size: 34px; }
.demo-stats .stat span { color: var(--text-body); opacity: 1; }
.form-success { display: none; padding: 20px; border-radius: var(--radius-md); background: var(--brand-lime-soft); color: #3d5400; font-weight: 600; }
.form-success.is-visible { display: block; }
@media (max-width: 900px) { .demo-layout { grid-template-columns: 1fr; } }

/* ---------- Tour ---------- */
.tour-block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; padding-block: clamp(32px, 4vw, 56px); }
.tour-block:nth-child(even) > :first-child { order: 2; }
.tour-block__media { padding: 32px; border-radius: var(--radius-xl); background: var(--bg-off-white); }
.tour-block__media img { width: 100%; }
.tour-block h3 { font-size: clamp(24px, 2.6vw, 34px); }
.tour-block p { margin-top: 14px; }
.tour-block .check-list { margin-top: 22px; }
.tour-block .btn-group { margin-top: 24px; }
@media (max-width: 900px) { .tour-block { grid-template-columns: 1fr; } .tour-block:nth-child(even) > :first-child { order: 0; } }

/* ---------- FAQ page ---------- */
.faq-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; }
.faq-sidenav { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 6px; }
.faq-sidenav a { padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 600; color: var(--text-body); }
.faq-sidenav a:hover, .faq-sidenav a.is-active { background: var(--bg-off-white); color: var(--accent); }
.faq-group { scroll-margin-top: calc(var(--header-h) + 24px); }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; } .faq-sidenav { position: static; display: flex; flex-wrap: wrap; } }

/* ---------- Comunidade / eventos / webinars ---------- */
.video-card { padding: 0; overflow: hidden; }
.video-card__thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-card__thumb .play { position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; border-radius: 50%; background: #fff; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); }
.video-card__body { padding: 20px; }
.video-card__body h3 { margin-top: 0; font-size: 18px; }
.event-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 24px; align-items: center; padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--border-light); background: #fff; }
.event-date { text-align: center; padding: 12px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); font-family: var(--font-display); font-weight: 800; }
.event-date b { display: block; font-size: 30px; line-height: 1; }
.event-date span { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.event-row h3 { font-size: 20px; }
.event-row p { margin-top: 6px; font-size: 14px; }
@media (max-width: 700px) { .event-row { grid-template-columns: 1fr; } .event-date { justify-self: start; } }

/* ---------- Ajuda ---------- */
.search-box { display: flex; align-items: center; gap: 12px; max-width: 640px; margin: 28px auto 0; padding: 8px 8px 8px 20px; border-radius: var(--radius-pill); background: #fff; border: 1.5px solid var(--border-light); box-shadow: var(--shadow-sm); }
.search-box input { flex: 1; border: 0; padding: 10px 0; background: transparent; }
.search-box input:focus { outline: none; }
.help-card .icon-box { margin-bottom: 6px; }

/* ---------- Carreiras ---------- */
.job-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 26px; border-radius: var(--radius-lg); border: 1px solid var(--border-light); background: #fff; }
.job-row h3 { font-size: 18px; }
.job-row p { font-size: 14px; margin-top: 4px; }
.values-grid .card .icon-box { margin-bottom: 4px; }

/* ---------- Loja ---------- */
.product-card { padding: 0; overflow: hidden; }
.product-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.product-card__body { padding: 20px; }
.product-card__body h3 { margin-top: 0; font-size: 17px; }
.product-card .price { margin-top: 8px; font-family: var(--font-display); font-weight: 800; color: var(--text-heading); }

/* ---------- Enterprise / porte ---------- */
.value-block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; padding-block: clamp(32px, 4vw, 56px); }
.value-block:nth-child(even) > :first-child { order: 2; }
.value-block img { width: 100%; border-radius: var(--radius-xl); aspect-ratio: 5/4; object-fit: cover; }
.value-block h3 { font-size: clamp(24px, 2.6vw, 34px); }
.value-block p { margin-top: 14px; }
@media (max-width: 900px) { .value-block { grid-template-columns: 1fr; } .value-block:nth-child(even) > :first-child { order: 0; } }

/* ---------- 404 ---------- */
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.notfound .big { font-family: var(--font-display); font-size: clamp(80px, 16vw, 180px); line-height: 1; letter-spacing: -.05em; color: var(--accent-soft); }

/* ---------- Page hero interno (padrão) ---------- */
.page-hero { padding: clamp(40px, 6vw, 80px) 0; }
.page-hero .hero__content { max-width: 800px; }
.page-hero.hero--center .hero__content { margin-inline: auto; }

/* ---------- Onboarding cards ---------- */
.onboarding-cards .card .icon-box { margin-bottom: 6px; }
.post-cover img[src*="quintal-do-bobby"], .post-card img[src*="quintal-do-bobby"] { object-position: center 68%; }
.post-cover img[src*="pet-zen"], .post-card img[src*="pet-zen"], .testi-card img[src*="pet-zen"] { object-position: center 88%; }