/* EH Ar Condicionado — sistema visual.
   Tokens primeiro; nada de valor solto no restante do arquivo. */

:root {
  /* Cor — azul da marca */
  --navy-900: #100e2c;
  --navy-800: #141139;
  --navy-700: #201b55;
  --navy-600: #2b2472;
  --navy-500: #3a3191;

  /* Cor — texto */
  --ink: #15132c;
  --body: #474761;
  --muted: #5f5f78;
  --on-dark: #ffffff;
  --on-dark-soft: #cfcfe4;
  --on-dark-faint: #a8a7c6;

  /* Cor — superfícies */
  --white: #ffffff;
  --ice: #f4f7fb;
  --ice-2: #e9eff7;
  --line: #e1e6ef;
  --line-strong: #c4cddc;
  /* Borda de campo: 3,1:1 sobre branco, o mínimo da WCAG para componentes. */
  --field-border: #8a93a3;

  /* Cor — destaque */
  --accent: #a9eced;
  --accent-soft: #c9f5f5;
  --accent-ink: #0c7883;
  --accent-ink-hover: #095e67;
  /* Estrelas: âmbar escuro sobre claro (4,6:1) e âmbar claro sobre o azul (9,7:1). */
  --star: #a06a00;
  --star-on-dark: #f0b455;

  /* Espaçamento */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 40px;
  --s-8: 56px;
  --s-9: 72px;
  --s-10: 96px;
  --s-11: 120px;

  --page: 1200px;
  --gutter: 40px;
  --section-y: clamp(64px, 7vw, 104px);

  /* Raio */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Sombra */
  --shadow-sm: 0 1px 2px rgba(16, 14, 44, .05), 0 2px 6px rgba(16, 14, 44, .06);
  --shadow-md: 0 10px 30px -12px rgba(16, 14, 44, .22);
  --shadow-lg: 0 30px 70px -30px rgba(16, 14, 44, .45);

  /* Tipografia */
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Inter",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --header-h: 88px;

  font-family: var(--font);
  color: var(--body);
  background: var(--white);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-5));
}

/* ---------- base ---------- */

* { box-sizing: border-box }
body { margin: 0; font-size: 1rem; line-height: 1.65 }
img { max-width: 100%; display: block }
a { color: inherit }
svg { display: block; flex-shrink: 0 }
button, input, select, textarea { font: inherit }
a, button, input, textarea, select, summary { -webkit-tap-highlight-color: transparent }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

h1, h2, h3, h4, p, figure { margin: 0 }
h1, h2, h3, h4 { color: var(--ink); letter-spacing: -.03em; text-wrap: balance }

h1 {
  font-size: clamp(2.5rem, 4.4vw, 4.05rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.035em;
}
h2 {
  font-size: clamp(1.95rem, 3.1vw, 2.85rem);
  font-weight: 700;
  line-height: 1.14;
  max-width: 26ch;
}
h3 { font-size: 1.3rem; font-weight: 650; line-height: 1.3 }
p { line-height: 1.65 }

em { font-style: normal; color: var(--accent) }
.hero h1 em { display: block }

.wrap { width: min(var(--page), calc(100% - var(--gutter) * 2)); margin-inline: auto }
.section { padding-block: var(--section-y) }
.small { font-size: .875rem; line-height: 1.6; color: var(--muted) }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent-ink);
  margin-bottom: var(--s-4);
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.eyebrow.light { color: var(--accent) }

.skip {
  position: absolute;
  left: var(--s-3);
  top: -80px;
  background: var(--white);
  color: var(--navy-700);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  font-weight: 600;
  z-index: 100;
}
.skip:focus { top: var(--s-3) }

/* ---------- botões ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 17px 26px;
  min-height: 56px;
  text-decoration: none;
  border: 0;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.button svg { width: 18px; height: 18px; transition: transform .18s ease }
.button:hover svg { transform: translate(2px, -2px) }

.primary { background: var(--accent); color: var(--navy-800); box-shadow: var(--shadow-sm) }
.primary:hover { background: var(--accent-soft); transform: translateY(-2px); box-shadow: var(--shadow-md) }

.solid { background: var(--navy-700); color: var(--on-dark) }
.solid:hover { background: var(--navy-600); transform: translateY(-2px) }

.ghost { background: var(--white); color: var(--navy-700); border: 1px solid var(--navy-700) }
.ghost:hover { background: var(--ice-2) }
.ghost svg { width: 18px; height: 18px }
.ghost:hover svg { transform: none }

.text-link {
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
}
.text-link svg { width: 17px; height: 17px; transition: transform .18s ease }
.text-link:hover { text-decoration: underline; text-underline-offset: 6px }
.text-link:hover svg { transform: translateY(3px) }

/* ---------- topo ---------- */

.topline {
  background: var(--navy-900);
  color: var(--on-dark-soft);
  font-size: .85rem;
  letter-spacing: .01em;
}
.topline .wrap { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: 10px }

.header {
  background: var(--navy-700);
  color: var(--on-dark);
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12);
}
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: var(--s-8) }

.brand { width: 124px; height: 62px; overflow: hidden; flex-shrink: 0; display: block }
.brand img { width: 124px; height: 124px; object-fit: contain; margin-top: -31px }

nav { display: flex; gap: var(--s-6); margin-left: auto }
nav a {
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 600;
  padding-block: var(--s-3);
  white-space: nowrap;
  position: relative;
}
nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
nav a:hover::after { transform: scaleX(1) }

.phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-pill);
  padding: 10px var(--s-5);
  transition: background .18s ease, border-color .18s ease;
}
.phone svg { width: 16px; height: 16px }
.phone:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5) }

/* ---------- hero ---------- */

.hero {
  background: var(--navy-700);
  color: var(--on-dark);
  padding: var(--s-9) 0 var(--s-10);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: auto auto -30% -12%;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(169, 236, 237, .16), transparent 62%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  top: -90px;
  right: -110px;
  width: 460px;
  height: 460px;
  background: url("/assets/logo.png") center / contain no-repeat;
  opacity: .05;
  pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 1 }

.hero h1, .hero h2, .hero h3 { color: var(--on-dark) }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s-10); align-items: center }
.hero-copy > p:not(.eyebrow) {
  font-size: 1.15rem;
  line-height: 1.62;
  color: var(--on-dark-soft);
  max-width: 34rem;
  margin-top: var(--s-5);
}

.actions { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; margin-top: var(--s-7) }

.hero-note { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-7) }
.hero-note span {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--on-dark-soft);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-pill);
  padding: 7px 16px;
}

.hero-figure { position: relative; align-self: stretch; min-height: 500px }
.hero-figure > img {
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  object-position: 62% 34%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.hero-figure figcaption {
  position: absolute;
  left: calc(var(--s-6) * -1);
  bottom: var(--s-6);
  max-width: 17rem;
  background: var(--white);
  color: var(--ink);
  padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6);
  border-radius: var(--r-md);
  border-left: 4px solid var(--accent-ink);
  box-shadow: var(--shadow-md);
}
figcaption span {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--accent-ink);
  display: block;
  margin-bottom: var(--s-2);
}
figcaption strong { font-size: 1.05rem; line-height: 1.35; color: var(--ink); display: block }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--on-dark-faint);
  margin-bottom: var(--s-6);
  min-height: 44px;
}
.back-link:hover { color: var(--on-dark) }
.hero-copy .back-link { display: flex; width: fit-content; margin-bottom: var(--s-5) }

.hero-badge {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--s-3);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--accent);
  background: rgba(169, 236, 237, .12);
  border: 1px solid rgba(169, 236, 237, .34);
  border-radius: var(--r-pill);
  padding: 8px 18px 8px 14px;
  margin-bottom: var(--s-5);
}

.service-hero h1 { font-size: clamp(2.4rem, 4vw, 3.6rem); max-width: 16ch }
.service-hero .hero-figure, .service-hero .hero-figure > img { min-height: 450px }

/* ---------- faixa de confiança ---------- */

.trust { background: var(--navy-800); color: var(--on-dark); border-top: 1px solid rgba(255, 255, 255, .1) }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); padding-block: var(--s-7) }
.trust-item { display: flex; gap: var(--s-4); align-items: flex-start }
.trust-item svg { width: 24px; height: 24px; color: var(--accent); margin-top: 2px }
.trust-item strong { display: block; font-size: 1rem; font-weight: 650; margin-bottom: 2px }
.trust-item p { font-size: .9rem; color: var(--on-dark-soft); line-height: 1.5 }

/* ---------- reputação ---------- */

.stars { color: var(--star); letter-spacing: .1em; font-size: 1rem; line-height: 1 }
.rating-badge.on-dark .stars { color: var(--star-on-dark) }
.rating-badge {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-size: .9rem;
  color: var(--body);
  margin-top: var(--s-5);
}
.rating-badge strong { color: var(--ink) }
.rating-badge.on-dark { color: var(--on-dark-soft) }
.rating-badge.on-dark strong { color: var(--on-dark) }
.rating-badge.big { font-size: 1rem; margin: 0 }
.rating-badge.big .stars { font-size: 1.2rem }

.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5) }
.review {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-5);
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.review blockquote { margin: 0; color: var(--body); font-size: .95rem; line-height: 1.6 }
.review figcaption { font-weight: 650; color: var(--ink); font-size: .9rem; margin-top: auto }
.reviews-section .small { margin-top: var(--s-5) }

/* ---------- marcas ---------- */

.brands { background: var(--ice); padding-block: var(--s-8) }
.brands-label {
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}
.brands ul {
  list-style: none;
  margin: var(--s-6) 0 var(--s-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-6) var(--s-8);
}
.brands img {
  width: auto;
  height: 46px;
  max-width: 170px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .2s ease, opacity .2s ease;
}
.brands li:hover img { filter: none; opacity: 1 }
.brands .small { text-align: center; max-width: 34rem; margin-inline: auto }

/* ---------- cabeçalho de seção ---------- */

.section-heading {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-9);
  align-items: end;
  margin-bottom: var(--s-8);
}
.section-heading > p { color: var(--muted); max-width: 26rem }

/* ---------- cartões de serviço ---------- */

.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5) }
.service-card {
  padding: var(--s-6) var(--s-5) var(--s-5);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--ice-2);
  color: var(--navy-700);
  display: grid;
  place-items: center;
  margin-bottom: var(--s-5);
  transition: background .18s ease, color .18s ease;
}
.card-icon svg { width: 26px; height: 26px }
.service-card:hover .card-icon { background: var(--navy-700); color: var(--accent) }
.service-card h3 { margin-bottom: var(--s-3) }
.service-card p { font-size: .95rem; color: var(--muted); margin-bottom: var(--s-6) }
.card-link {
  margin-top: auto;
  font-weight: 650;
  font-size: .875rem;
  color: var(--accent-ink);
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
}
.card-link svg { width: 16px; height: 16px; transition: transform .18s ease }
.service-card:hover .card-link svg { transform: translate(2px, -2px) }

/* ---------- etapas ---------- */

.care-section { background: var(--ice); padding-block: var(--section-y) }
.care-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--s-10) }
.care-grid > div > p:last-child { color: var(--muted); margin-top: var(--s-5); max-width: 30rem }

.steps { list-style: none; margin: 0; padding: 0; position: relative }
.steps li { display: flex; gap: var(--s-5); padding-bottom: var(--s-6); position: relative }
.steps li:last-child { padding-bottom: 0 }
.steps li::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 8px;
  width: 2px;
  background: var(--line-strong);
}
.steps li:last-child::before { display: none }
.steps li > span {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--navy-700);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: .85rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.steps h3 { font-size: 1.125rem; letter-spacing: -.015em; margin-bottom: var(--s-1); padding-top: 9px }
.steps p { color: var(--muted); font-size: .95rem }

/* ---------- destaques da página de serviço ---------- */

.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-7) }
.benefits > div {
  background: var(--ice);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-5);
}
.benefits .number {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--line-strong);
  color: var(--accent-ink);
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: var(--s-4);
}
.benefits h3 { font-size: 1.1rem; letter-spacing: -.015em }

.checklist { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-3) }
.checklist li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--body) }
.checklist svg { width: 20px; height: 20px; color: var(--accent-ink); margin-top: 3px }

/* ---------- comparação de escopo ---------- */

.compare-section { border-top: 1px solid var(--line) }
.compare-lead { color: var(--muted); max-width: 46rem; margin-top: var(--s-4) }
.compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-7);
  align-items: start;
}
.compare-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  background: var(--white);
}
.compare-card.is-ours {
  border-color: var(--navy-700);
  border-width: 2px;
  background: var(--ice);
  box-shadow: var(--shadow-md);
}
.compare-card header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-5);
}
.compare-card h3 { font-size: 1.3rem }
.compare-card header span {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 5px 12px;
}
.compare-card.is-ours header span {
  color: var(--navy-800);
  background: var(--accent);
  border-color: transparent;
}
.compare-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3) }
.compare-card li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: .95rem }
.compare-card li svg { color: var(--muted); margin-top: 3px }
.compare-card.is-ours li svg { color: var(--accent-ink) }
.compare-card > p {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: .9rem;
  color: var(--muted);
}
.compare-close {
  margin-top: var(--s-6);
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--ink);
  max-width: 44rem;
}

/* ---------- formulário ---------- */

.quote-section { padding-block: var(--section-y) }
.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-10); align-items: start }
.quote-grid > div > p:not(.eyebrow) { color: var(--muted); max-width: 28rem; margin-top: var(--s-5) }

form {
  padding: var(--s-7);
  background: var(--ice);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
label { display: block; font-size: .9375rem; font-weight: 650; color: var(--ink); margin-bottom: var(--s-2) }
label span { font-weight: 400; color: var(--muted) }
input, select, textarea {
  display: block;
  width: 100%;
  border: 1px solid var(--field-border);
  border-radius: var(--r-sm);
  padding: 14px var(--s-4);
  background: var(--white);
  color: var(--ink);
  margin-bottom: var(--s-5);
  line-height: 1.5;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--ink) }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px rgba(12, 120, 131, .14);
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315132c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  background-size: 18px;
  padding-right: var(--s-8);
}
textarea { resize: vertical }
form .small { margin-bottom: var(--s-5) }
form button { width: 100% }
#form-status { margin: var(--s-4) 0 0 }
#form-status:empty { display: none }

/* ---------- perguntas ---------- */

.faq { border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.35fr; gap: var(--s-10) }
.faq details { border-bottom: 1px solid var(--line) }
.faq summary {
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.5;
  padding: var(--s-5) var(--s-8) var(--s-5) 0;
  position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none }
.faq summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(var(--accent-ink), var(--accent-ink)) center / 14px 2px no-repeat,
    linear-gradient(var(--accent-ink), var(--accent-ink)) center / 2px 14px no-repeat;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(90deg); background-size: 14px 2px, 0 0 }
.faq summary:hover { color: var(--accent-ink) }
.faq details p { color: var(--muted); margin: 0 0 var(--s-5); max-width: 42rem }

/* ---------- rodapé ---------- */

footer { background: var(--navy-800); color: var(--on-dark) }
.footer-cta { border-bottom: 1px solid rgba(255, 255, 255, .14) }
.footer-cta .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-8);
  padding-block: var(--s-9);
  flex-wrap: wrap;
}
.footer-cta h2 { color: var(--on-dark); max-width: 18ch }

.footer-main {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: var(--s-8);
  padding-block: var(--s-9);
}
.footer-brand img { width: 132px; height: auto; margin: -12px 0 var(--s-4) -6px }
.footer-brand p { color: var(--on-dark-soft); font-size: .95rem; max-width: 24rem }
.footer-col h3 {
  color: var(--on-dark);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 700;
  margin-bottom: var(--s-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid }
.footer-col a {
  display: inline-block;
  text-decoration: none;
  color: var(--on-dark-soft);
  font-size: .95rem;
  padding-block: var(--s-3);
}
.footer-col a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 5px }
.footer-col .big { font-size: 1.3rem; font-weight: 700; color: var(--on-dark) }
.footer-col p { color: var(--on-dark-soft); font-size: .9rem; line-height: 1.55; padding-block: var(--s-2) }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5);
  color: var(--on-dark-faint);
  font-size: .85rem;
  flex-wrap: wrap;
}
.footer-bottom a { text-decoration: none; display: inline-block; padding-block: var(--s-3) }
.footer-bottom a:hover { text-decoration: underline; text-underline-offset: 5px }

.mobile-contact { display: none }

/* ---------- páginas de texto ---------- */

.policy { max-width: 46rem; min-height: 55vh }
.policy h1 { font-size: clamp(2.2rem, 4vw, 3rem); margin-bottom: var(--s-5) }
.policy h2 { font-size: 1.45rem; margin: var(--s-7) 0 var(--s-3); max-width: none }
.policy p { margin-bottom: var(--s-4); color: var(--body) }
.policy .button { margin-top: var(--s-5) }

/* ---------- responsivo ---------- */

@media (max-width: 1100px) {
  :root { --gutter: 28px }
  .header-inner { gap: var(--s-5) }
  nav { gap: var(--s-5) }
  .phone { padding-inline: var(--s-4) }
  .hero-grid { gap: var(--s-7); grid-template-columns: 1fr 1fr }
  .hero-figure, .hero-figure > img { min-height: 440px }
  .hero-figure figcaption { left: var(--s-4); right: var(--s-4); max-width: none }
  .service-grid { grid-template-columns: repeat(2, 1fr) }
  .section-heading { grid-template-columns: 1fr; gap: var(--s-5) }
  .care-grid, .quote-grid, .faq { gap: var(--s-7) }
  .footer-main { grid-template-columns: 1fr 1fr; row-gap: var(--s-7) }
  .footer-brand { grid-column: 1 / -1 }
}

@media (max-width: 860px) {
  .trust-grid { grid-template-columns: 1fr; gap: var(--s-5) }
  .benefits { grid-template-columns: 1fr }
  .compare { grid-template-columns: 1fr }
  .compare-card { padding: var(--s-5) }
  .reviews { grid-template-columns: 1fr }
  .brands img { height: 38px; max-width: 140px }
  .brands ul { gap: var(--s-5) var(--s-6) }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; --header-h: 72px }
  .topline .wrap { font-size: .75rem; gap: var(--s-3) }
  .topline span { white-space: nowrap }
  .header-inner { gap: var(--s-3) }
  .brand { width: 100px; height: 50px }
  .brand img { width: 100px; height: 100px; margin-top: -25px }
  nav { gap: var(--s-4) }
  nav a { font-size: .875rem }
  .phone { display: none }

  .hero { padding: var(--s-7) 0 var(--s-8) }
  .hero::after { width: 300px; top: -60px; right: -70px }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-8) }
  .hero-copy > p:not(.eyebrow) { font-size: 1.05rem }
  .actions { gap: var(--s-4); margin-top: var(--s-6) }
  .actions .button { width: 100% }
  .hero-figure, .service-hero .hero-figure { min-height: 0; height: auto; align-self: start }
  .hero-figure > img, .service-hero .hero-figure > img {
    min-height: 0;
    height: auto;
    max-height: 420px;
    aspect-ratio: 1.15;
  }
  .hero-figure figcaption { position: static; margin-top: var(--s-4); max-width: none }

  .section, .care-section, .quote-section { padding-block: var(--s-8) }
  .service-grid { grid-template-columns: 1fr }
  .service-card p { margin-bottom: var(--s-5) }
  .care-grid, .quote-grid, .faq { grid-template-columns: 1fr; gap: var(--s-6) }
  .quote-grid > div > p:not(.eyebrow) { max-width: none }
  form { padding: var(--s-5) }

  .footer-cta .wrap { padding-block: var(--s-8) }
  .footer-cta .button { width: 100% }
  .footer-main { grid-template-columns: 1fr; padding-block: var(--s-8) }
  .footer-brand { grid-column: auto }
  .footer-bottom { font-size: .8rem }
  footer { padding-bottom: 84px }

  .mobile-contact {
    display: block;
    position: fixed;
    z-index: 25;
    inset: auto 0 0 0;
    padding: var(--s-3) var(--gutter) max(var(--s-3), env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
  }
  .brands img { height: 30px; max-width: 115px }
  .brands ul { gap: var(--s-4) var(--s-5) }
  .mobile-contact { display: flex; gap: var(--s-3) }
  .mobile-contact .button { flex: 1; min-height: 50px; padding: 13px var(--s-4); gap: var(--s-2) }
  .mobile-contact .ghost { flex: 0 0 38% }
}

@media (max-width: 430px) {
  nav .nav-last { display: none }
}

@media (max-width: 380px) {
  nav { gap: var(--s-3) }
  nav a { font-size: .8rem }
  .brand { width: 86px; height: 44px }
  .brand img { width: 86px; height: 86px; margin-top: -21px }
  .topline .wrap { font-size: .7rem }
  .button { padding-inline: var(--s-5) }
}

@media (min-width: 1500px) {
  .hero { padding-bottom: var(--s-11) }
  .hero-figure { max-height: 600px }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto }
  *, *::before, *::after { transition: none !important; animation: none !important }
}