/* INÍCIO - Identidade pet: rosa, creme e marrom da ilustração */
.sd-demo-page.sd-theme--pet {
  /* A paleta compartilhada com o card do portfólio fica em projetos.css. */
  color: var(--sd-pet-text);
  background: #fffcf8;
}
.sd-theme--pet :focus-visible { outline-color: var(--sd-ink); }
.sd-theme--pet .sd-work-skip { color: var(--sd-ink); }
.sd-theme--pet .sd-demo-ribbon { background: #54372e; color: #fff0e6; }
.sd-theme--pet .sd-demo-header { background: #fffdf9; border-bottom-color: var(--sd-pet-border); }
.sd-theme--pet .sd-demo-nav { color: var(--sd-pet-muted); }
.sd-theme--pet .sd-demo-nav a:hover,
.sd-theme--pet .sd-demo-footer nav a:hover { color: var(--sd-ink); }
.sd-theme--pet .sd-work-label { color: var(--sd-ink); }
.sd-theme--pet .sd-demo-benefits,
.sd-theme--pet .sd-demo-faq details { border-bottom-color: var(--sd-pet-border); }
.sd-theme--pet .sd-demo-benefits p,
.sd-theme--pet .sd-work-heading p,
.sd-theme--pet .sd-work-note,
.sd-theme--pet .sd-demo-service p,
.sd-theme--pet .sd-demo-faq p,
.sd-theme--pet .sd-work-contact p,
.sd-theme--pet .sd-demo-footer p { color: var(--sd-pet-muted); }
.sd-theme--pet .sd-demo-service { border-bottom-color: var(--sd-pet-border); }
.sd-theme--pet .sd-demo-service button { color: var(--sd-ink); border-color: #c99596; background: #fffcf8; }
.sd-theme--pet .sd-demo-service.sd-fx-selected { background: var(--sd-tint); }
.sd-theme--pet .sd-demo-service.sd-fx-selected button { background: var(--sd-ink); border-color: var(--sd-ink); color: #fff; }
.sd-theme--pet .sd-demo-form { background: var(--sd-pet-surface); border-color: var(--sd-pet-border); }
.sd-theme--pet .sd-demo-input { color: var(--sd-pet-text); border-color: #c9ada2; accent-color: var(--sd-ink); }
.sd-theme--pet .sd-demo-input:disabled { background: #f3e9e1; }
.sd-theme--pet main .sd-button--primary {
  background: var(--sd-ink);
  color: #fff;
  box-shadow: 0 10px 24px #8c414922;
}
.sd-theme--pet main .sd-button--primary:hover,
.sd-theme--pet main .sd-button--primary:focus-visible { background: #71343c; }
.sd-theme--pet .sd-demo-estimate { background: #fffcf8; border-color: var(--sd-pet-border); }
.sd-theme--pet .sd-demo-status { color: var(--sd-pet-text); }
.sd-theme--pet .sd-demo-result { background: var(--sd-tint); border-color: #d7aaa6; }
.sd-theme--pet .sd-demo-context__body a { color: var(--sd-ink); }
.sd-theme--pet .sd-fx-bubbles span { border-color: #8c414966; }
.sd-theme--pet .sd-work-contact__inner { background: var(--sd-tint); border-color: var(--sd-pet-border); }
.sd-theme--pet .sd-demo-footer { background: var(--sd-pet-surface); border-top-color: var(--sd-pet-border); }
/* FIM - Identidade pet */

/* INÍCIO - Banner panorâmico: menor altura e transparência apenas na arte */
.sd-theme--pet .sd-demo-hero {
  box-sizing: border-box;
  display: grid;
  align-items: center;
  width: 100%;
  aspect-ratio: 3 / 1;
  min-height: 440px;
  padding-block: clamp(1.5rem, 2.5vw, 2.25rem);
  background: #f8d3cf;
  border-bottom: 0;
}
.sd-theme--pet .sd-demo-hero::before { display: none; }
.sd-theme--pet .sd-pet-wallpaper { display: grid; place-items: center; background: #f8d3cf; }
.sd-theme--pet .sd-pet-wallpaper__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  opacity: .78;
}
.sd-theme--pet .sd-pet-wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #fff9f31a 50%, transparent);
  pointer-events: none;
}
.sd-theme--pet .sd-demo-hero__grid { gap: clamp(1.5rem, 3vw, 3rem); }
.sd-theme--pet .sd-pet-intro {
  box-sizing: border-box;
  padding: clamp(1.5rem, 2.25vw, 2rem);
  border: 1px solid #fffaf4cc;
  border-radius: 24px;
  background: #fffcf6eb;
  box-shadow: 0 12px 32px #54372e0f;
}
.sd-theme--pet .sd-demo-hero h1 { color: var(--sd-pet-text); font-size: clamp(2.35rem, 3.6vw, 3.25rem); margin-bottom: 1rem; }
.sd-theme--pet .sd-demo-hero__description { color: var(--sd-pet-muted); font-size: 1rem; margin-bottom: 1.4rem; }
.sd-theme--pet .sd-demo-hero__art { padding: 1rem; background: #fff8f440; border-color: #fff9f4b8; box-shadow: 0 12px 32px #54372e0f; }
.sd-theme--pet .sd-demo-hero__art .sd-work-art { background: #fffcf6eb; }
.sd-theme--pet .sd-demo-hero__art .sd-work-art__body { min-height: 195px; }
/* FIM - Banner panorâmico */

/* INÍCIO - Tablet e celular: arte inteira e apresentação compacta */
@media (min-width: 901px) and (max-width: 1320px) {
  /* Suaviza a união com o fundo quando os painéis exigem mais altura que a arte. */
  .sd-theme--pet .sd-pet-wallpaper__image {
    mask-image: linear-gradient(180deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }
}
@media (max-width: 900px) {
  .sd-theme--pet .sd-demo-hero {
    aspect-ratio: auto;
    min-height: 0;
    padding-top: calc(100vw / 3 + 1rem);
    padding-bottom: 1.5rem;
    background: linear-gradient(180deg, #f8d3cf, #fff3ec);
  }
  .sd-theme--pet .sd-pet-wallpaper { bottom: auto; height: auto; aspect-ratio: 3 / 1; }
  .sd-theme--pet .sd-demo-hero__grid { grid-template-columns: 1fr; }
  /* A miniatura repete a apresentação e é apenas decorativa. */
  .sd-theme--pet .sd-demo-hero__art { display: none; }
}
@media (max-width: 540px) {
  .sd-theme--pet .sd-pet-intro { padding: 1.5rem; border-radius: 22px; }
  .sd-theme--pet .sd-demo-hero h1 { font-size: clamp(2.25rem, 9vw, 2.7rem); }
  .sd-theme--pet .sd-demo-hero .sd-button { width: 100%; justify-content: center; }
}
/* FIM - Tablet e celular */