/*
 * Correções funcionais preservadas sobre a direção visual anterior.
 * Este arquivo não redefine tipografia, botões ou linguagem estética.
 */

/* Logo oficial no cabeçalho. */
.header-logo-link {
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
}

.brand-logo {
  display: block;
  width: min(10.5rem, 42vw);
  height: auto;
  flex: none;
  object-fit: contain;
}

/* Mantém os atalhos de Instagram e Facebook na mesma linha. */
.header-socials {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0;
  transform: translateX(-4.5rem);
}

.header-social-link {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  place-items: center;
}

.header-social-link svg {
  display: block;
}

/* Logo oficial no rodapé. */
.footer-logo {
  width: min(11rem, 52vw);
}

/* <picture> da logo (WebP + PNG) não interfere no layout: o <img> segue como item direto. */
.logo-picture {
  display: contents;
}

/* Aviso de privacidade compacto. Celular: faixa fixa no rodapé da tela, botões lado a lado. */
.cookie-banner[data-consent-banner] {
  position: fixed;
  inset: auto 0.5rem 0.5rem;
  z-index: 1000;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0.7rem 0.8rem;
  font-family: var(--v-font-body);
}

.cookie-banner[data-consent-banner] .cookie-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
}

.cookie-banner[data-consent-banner] p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Link dentro da frase: sem a altura mínima de 44px dos links isolados, que esticava a linha. */
.cookie-banner[data-consent-banner] p a {
  display: inline;
  min-width: 0 !important;
  min-height: 0 !important;
}

.cookie-banner[data-consent-banner] .cookie-banner__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.cookie-banner[data-consent-banner] .cookie-button {
  min-width: 0;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
}

/*
 * Celulares de tela curta (ex.: 360x640, 390x664): o aviso vira uma linha baixa
 * (texto à esquerda, botões à direita) e o hero perde parte do respiro superior,
 * para o botão principal do hero ficar visível acima do aviso.
 */
@media (max-width: 767px) and (max-height: 700px) {
  .cookie-banner[data-consent-banner] {
    inset: auto 0.375rem 0.375rem;
    padding: 0.45rem 0.5rem 0.45rem 0.7rem;
  }

  .cookie-banner[data-consent-banner] .cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }

  /* style.css força 1rem !important no texto e nos botões do aviso em telas pequenas. */
  .cookie-banner[data-consent-banner] p {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.7rem !important;
    line-height: 1.3;
  }

  .cookie-banner[data-consent-banner] p a {
    font-size: inherit !important;
  }

  .cookie-banner[data-consent-banner] .cookie-banner__actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 0.375rem;
  }

  .cookie-banner[data-consent-banner] .cookie-button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0.25rem 0.7rem;
    font-size: 0.78rem !important;
  }

  /* Home */
  .home-hero {
    padding-top: 1.75rem;
  }

  .home-hero .eyebrow {
    margin-bottom: 0.625rem;
  }

  .home-hero h1 {
    margin-bottom: 0.875rem;
  }

  .home-hero .hero-actions {
    margin-top: 1.125rem;
  }

  /* Contato, 404 e demais cabeçalhos de página */
  .page-header {
    padding-top: 1.75rem;
  }

  .page-header h1 {
    margin-bottom: 0.875rem;
  }

  /* Páginas de serviço (hero com breadcrumb) */
  main > section.overflow-hidden.border-b:first-child {
    padding-top: 0.75rem;
  }

  main > section.overflow-hidden.border-b:first-child nav[aria-label="Breadcrumb"] {
    margin-bottom: 0.75rem;
  }

  main > section.overflow-hidden.border-b:first-child p.mb-4 {
    margin-bottom: 0.625rem;
  }

  main > section.overflow-hidden.border-b:first-child h1 + p {
    margin-top: 0.875rem;
    line-height: 1.65;
  }

  main > section.overflow-hidden.border-b:first-child .mt-7 {
    margin-top: 1rem;
  }

  main > section.overflow-hidden.border-b:first-child a.mt-8 {
    margin-top: 1rem;
  }
}

/*
 * Auditoria mobile: área de toque mínima de 44x44px e texto de corpo com 16px.
 * O visual-refresh.css reduz .text-sm/.text-xs com !important e deixa alguns links
 * como inline, o que anulava as regras equivalentes do style.css.
 */
@media (max-width: 767px) {
  /* Breadcrumbs: alvo de 44px sem mudar a altura da linha (margem negativa compensa). */
  /* Seletor reforçado: precisa vencer "main li > a:not(.button)" do visual-refresh.css. */
  nav[aria-label="Breadcrumb"] li > a:not(.button) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px !important;
    min-height: 44px !important;
    margin-block: -12px;
  }

  /* Sumário dos artigos: cada item vira uma linha tocável de 44px. */
  nav[aria-label^="Sumário"] ol > li {
    margin-top: 0 !important;
  }

  nav[aria-label^="Sumário"] ol > li > a:not(.button) {
    display: flex !important;
    align-items: center;
    min-height: 44px !important;
  }

  /* Contato: links isolados em parágrafos curtos (Instagram, Facebook, mapa). */
  .contact-page .content-section p > a {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px !important;
    margin-block: -12px;
    vertical-align: baseline;
  }

  /* Texto de corpo pequeno (cards do blog, legendas, caixa do autor). Rótulos em
     caixa-alta (eyebrows) continuam pequenos por serem rótulos, não texto corrido. */
  main p.text-sm,
  main p.text-xs,
  main figcaption,
  main figcaption.text-sm {
    font-size: 1rem !important;
  }
}

/* Telas muito estreitas (ex.: 320px): logo e espaçamentos menores para o botão do menu caber. */
@media (max-width: 359px) {
  header .brand-logo {
    width: 7rem !important;
    min-width: 0 !important;
  }

  header > div:has(> .header-logo-link) {
    column-gap: 0.5rem !important;
    gap: 0.5rem !important;
  }
}

/* Computador: cartão discreto no canto inferior direito, longe dos botões do hero (à esquerda). */
@media (min-width: 768px) {
  .cookie-banner[data-consent-banner] {
    inset: auto 1.25rem 1.25rem auto;
    width: min(22rem, calc(100% - 2.5rem));
    padding: 0.85rem 1rem;
  }
}

/* Redes sociais do rodapé: ícone ao lado do nome, com respiro entre os itens. */
.footer-social-icons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.footer-social-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
}

.footer-social-icon svg {
  flex: none;
}

/* Horários, telefones e endereço do rodapé: ícone ao lado do texto. */
.footer-icon-line,
.footer-map-link {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.footer-icon-line + .footer-icon-line,
.footer-icon-line + .footer-map-link {
  margin-top: 0.5rem;
}

.footer-icon-line svg,
.footer-map-link svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0.2em;
  margin-top: calc((1lh - 16px) / 2);
}

/* Fotografias 3:2 completas e cards sem espaço artificial entre texto e preço. */
.home-services .service-grid,
.services-page .service-grid {
  align-items: start;
}

.home-services .service-card,
.services-page .service-card {
  height: auto;
  align-self: start;
}

.home-services .card-media,
.services-page .card-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--v-beige);
}

.home-services .card-media img,
.services-page .card-media img {
  width: 100%;
  height: auto !important;
  aspect-ratio: 3 / 2;
  object-fit: contain !important;
  transform: none !important;
}

.home-services .card-body,
.services-page .card-body {
  height: auto !important;
  flex: 0 0 auto;
}

.home-services .card-price,
.services-page .card-price {
  margin-top: 0.85rem;
}

.home-services .card-link,
.services-page .card-link {
  margin-top: 0.65rem;
}

/* O mesmo enquadramento integral nas aberturas dos serviços individuais. */
.service-detail-page main > section:first-child img {
  width: 100%;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: contain !important;
}

/* Valores: título e descrição começam na mesma linha em cada item. */
.about-page > .content-section.about-values .content-flow {
  display: grid;
  max-width: var(--v-container);
  grid-template-columns: 1fr;
}

.about-page > .content-section.about-values .content-flow > h2 {
  grid-column: 1;
}

.about-values .value-item {
  display: grid;
  padding: 1.4rem 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 4rem;
  border-top: 1px solid var(--v-line);
}

.about-values .value-item:last-child {
  border-bottom: 1px solid var(--v-line);
}

.about-values .value-item h3,
.about-values .value-item p {
  margin: 0;
  padding: 0;
}

.about-values .value-item h3,
.about-team .team-member h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
}

.about-values .value-item p,
.about-team .team-member p {
  color: var(--v-muted);
}

/* A fotografia coletiva e as três biografias mantêm a composição anterior. */
.about-page > .content-section.about-team .content-flow {
  display: grid;
  max-width: var(--v-container);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2rem;
}

.about-team .content-flow > h2,
.about-team .media--wide {
  grid-column: 1 / -1;
}

.about-team .team-member {
  min-width: 0;
}

.about-team .team-member h3 {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--v-line);
}

/* Contato: os mesmos elementos, agrupados em um painel mais compacto. */
.contact-page {
  display: grid;
  grid-template-columns: minmax(1.25rem, 1fr) repeat(12, minmax(0, 6.1rem)) minmax(1.25rem, 1fr);
  gap: 1px;
  background: var(--v-line);
}

.contact-page > section {
  min-width: 0;
}

.contact-hero {
  grid-column: 1 / -1;
}

.contact-channels {
  grid-column: 2 / span 4;
}

.contact-location {
  grid-column: 6 / span 8;
}

.contact-map {
  grid-column: 2 / span 12;
}

.contact-directions {
  grid-column: 2 / span 7;
}

.contact-hours {
  grid-column: 9 / span 5;
}

.contact-booking {
  grid-column: 2 / span 4;
}

.contact-policies {
  grid-column: 6 / span 5;
}

.contact-payment {
  grid-column: 11 / span 3;
}

.contact-facilities {
  grid-column: 2 / span 7;
}

.contact-adjustments {
  grid-column: 9 / span 5;
}

.contact-cta {
  grid-column: 1 / -1;
}

.contact-page > .content-section,
.contact-page > .content-section:nth-of-type(odd) {
  padding: 0 !important;
  background: var(--v-paper) !important;
}

.contact-page > .contact-location,
.contact-page > .contact-hours,
.contact-page > .contact-payment {
  background: var(--v-beige) !important;
}

.contact-page > .contact-policies,
.contact-page > .contact-adjustments {
  background: var(--v-cream) !important;
}

.contact-page > .content-section > .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(1.75rem, 3vw, 2.6rem);
}

.contact-page .content-flow > h2 {
  margin-bottom: 0.85rem;
  font-size: clamp(1.9rem, 2.8vw, 2.65rem);
}

.contact-page .content-flow > p,
.contact-page .content-flow > ul {
  margin-bottom: 0.65rem;
}

.contact-location .media--float-right,
.contact-facilities .media--float-right {
  width: 100%;
}

.contact-location .media--float-right img,
.contact-facilities .media--float-right img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

.contact-page > .content-section.contact-cta {
  padding-block: clamp(2.75rem, 4vw, 4rem) !important;
  color: #fff;
  background: var(--v-green-800) !important;
}

.contact-page > .content-section.contact-cta > .container {
  width: min(calc(100% - (var(--v-gutter) * 2)), var(--v-container)) !important;
  margin-inline: auto !important;
  padding: 0;
}

.contact-page > .content-section.contact-cta .content-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem clamp(2rem, 6vw, 6rem);
}

.contact-page > .content-section.contact-cta p,
.contact-page > .content-section.contact-cta .cta-row {
  margin: 0;
  color: #fff;
}

.contact-page > .content-section.contact-cta p a {
  color: #fff;
}

/* Contraste dos conteúdos relacionados e das ações em fundos escuros/cobre. */
.service-detail-page main > section[aria-labelledby="cta-final"] > div > p,
.service-detail-page main > section[aria-labelledby="cta-final"] [data-seo-service-blog-links] {
  color: #06201a !important;
}

.service-detail-page main > section[aria-labelledby="cta-final"] [data-seo-service-blog-links] {
  display: block;
  margin-top: 1.25rem;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.7;
  text-transform: none !important;
}

.service-detail-page main > section[aria-labelledby="cta-final"] [data-seo-service-blog-links] a,
.service-detail-page main > section[aria-labelledby="cta-final"] a:not([href^="https://wa.me/"]) {
  color: #06201a !important;
  border-color: rgb(6 32 26 / 0.55) !important;
  text-decoration-color: rgb(6 32 26 / 0.72);
}

.service-detail-page main > section[aria-labelledby="cta-final"] [class*="tracking-"][class*="uppercase"] {
  color: #06201a !important;
}

.service-detail-page main > section[aria-labelledby="cta-final"] a[class*="rounded-full"]:not([href^="https://wa.me/"]):hover {
  color: #fff !important;
  background: #06201a !important;
  border-color: #06201a !important;
}

@media (max-width: 1023px) {
  .contact-page {
    display: block;
    background: var(--v-cream);
  }

  .contact-page > .content-section {
    width: min(calc(100% - (var(--v-gutter) * 2)), var(--v-container));
    margin-inline: auto;
    border-bottom: 1px solid var(--v-line);
  }

  .contact-page > .contact-hero,
  .contact-page > .contact-cta {
    width: 100%;
  }

  .contact-page > .content-section.contact-cta .content-flow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .header-socials {
    transform: none;
  }

  .brand-logo {
    width: min(9rem, 46vw);
  }

  .about-page > .content-section.about-values .content-flow,
  .about-page > .content-section.about-team .content-flow {
    display: block;
  }

  .about-values .value-item {
    display: block;
    padding: 1.15rem 0;
  }

  .about-values .value-item h3 {
    margin-bottom: 0.4rem;
  }

  .about-team .team-member h3 {
    margin-top: 1.5rem;
  }

  .contact-page > .content-section {
    width: calc(100% - 2.5rem);
  }

  .contact-page > .content-section > .container {
    padding: 1.5rem;
  }

  .contact-page > .contact-map > .container {
    padding: 1rem;
  }

  .contact-page > .contact-hero,
  .contact-page > .contact-cta {
    width: 100%;
  }

  .contact-page > .content-section.contact-cta > .container {
    padding-inline: var(--v-gutter);
  }

  .contact-page > .content-section.contact-cta .button {
    width: 100%;
  }
}

/* ─── Blog: botões "Ler sobre..." sempre visíveis como pílula bege,
   ficam levemente mais escuros no hover. ─────────────────────────────────── */

/* Links simples sem classe rounded-full → viram pílula */
article.overflow-hidden a[href*="/blog/"].inline-flex:not([class*="rounded-full"]),
article.overflow-hidden a[href*="/blog/"][class*="font-bold"][class*="text-cobreDark"] {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: #ede0d0;
  color: rgb(13 41 36 / 0.72) !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.18s ease;
}

article.overflow-hidden a[href*="/blog/"].inline-flex:not([class*="rounded-full"]):hover,
article.overflow-hidden a[href*="/blog/"][class*="font-bold"][class*="text-cobreDark"]:hover {
  background: #d9c9b4;
}

/* Pílulas já com rounded-full: mesma aparência bege → hover levemente mais escuro */
article.overflow-hidden a[href*="/blog/"][class*="rounded-full"] {
  background: #ede0d0 !important;
  color: rgb(13 41 36 / 0.72) !important;
  transition: background 0.18s ease;
}

article.overflow-hidden a[href*="/blog/"][class*="rounded-full"]:hover {
  background: #d9c9b4 !important;
}

/* ─── Serviços: card-link sempre visível como pílula bege → hover escuro ── */

.home-services .service-card,
.services-page .service-card {
  position: relative;
}

.home-services .card-link,
.services-page .card-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: #ede0d0;
  color: rgb(13 41 36 / 0.72) !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.18s ease;
}

.home-services .card-link:hover,
.services-page .card-link:hover {
  background: #d9c9b4;
  color: rgb(13 41 36 / 0.72) !important;
}