/* Ajuste de marca: menos sanitario, más grafito y acero. */
:root {
  --brand-cyan: #4ebade;
  --primary: #076b83;
  --primary-dark: #045166;
  --line: #cfd7d7;
  --soft: #ecefed;
  --shadow: 0 12px 32px rgba(20, 29, 30, .11);
  --signal: #935600;
  --signal-light: #f5bd4c;
  --steel: #dce2e1;
  --muted: #465357;
}

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  background-color: #f8f8f6;
  background-image: none;
}

h1, h2, h3 {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  word-spacing: normal;
}

h1 { font-weight: 700; }

.site-header {
  background: #161b1c;
  border-bottom-color: #344043;
  box-shadow: inset 0 -2px 0 var(--brand-cyan);
}

.brand {
  width: 168px;
  height: 65px;
  min-width: 168px;
  background: url('../img/thome-kfz-logo.png') center / contain no-repeat;
  text-decoration: none;
}

.brand span,
.brand small { display: none; }

.menu-toggle span:not(.sr-only) { background: #fff; }
.primary-nav.is-open { background: #161b1c; }
.primary-nav a { color: #eef4f5; }
.primary-nav a[aria-current=page] { color: var(--brand-cyan); }
.nav-cta { display: none !important; }
.hero { position: relative; background: linear-gradient(145deg, #e5e9e8 0%, #fbfcfb 64%); }
.hero::before { display: none; }
.hero-grid { position: relative; }
.hero h1 { max-width: 900px; font-size: clamp(2.2rem, 4.9vw, 3.4rem); letter-spacing: -.01em; line-height: 1.08; }
.hero h1 > span, .hero h1 em { display: block; }
.hero h1 em { color: #08718b; font-weight: 700; font-style: normal; white-space: nowrap; }
.eyebrow { color: #05647c; letter-spacing: .1em; }
.lead, .section-heading > p:last-child, .service-card p, .steps p, .contact-details span { color: var(--muted); }
.hero .lead { max-width: 690px; padding-left: .85rem; border-left: 3px solid var(--brand-cyan); color: #344246; font-size: clamp(1.08rem, 1.6vw, 1.25rem); font-weight: 600; line-height: 1.6; }
.button { border-radius: 4px; letter-spacing: 0; gap: .5rem; }
.button-primary { box-shadow: 0 5px 0 #04536c; }
.button-primary:hover, .button-primary:focus { transform: translateY(1px); box-shadow: 0 4px 0 #04536c; }
.button-outline { border-width: 1px; }
.trust-bar { background: #fdfdfc; border-top: 1px solid #20272a; }
.trust-bar { box-shadow: inset 0 3px 0 var(--brand-cyan); }
.trust-bar div { padding: 1.35rem 1.15rem; }
.trust-bar strong { font-size: .94rem; }
.service-card { border-radius: 8px; border-top: 3px solid #20272a; box-shadow: none; }
.service-card:hover { border-top-color: var(--primary); }
.service-icon, .step-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid #97a9ac; border-radius: 4px; color: var(--brand-cyan); box-shadow: 3px 3px 0 rgba(78,186,222,.13); }
.promise-grid span { display: inline-flex; padding: .2rem .42rem; border-radius: 3px; background: #20272a; color: #fff; font-size: .68rem; font-weight: 900; letter-spacing: .11em; }
.service-card h3 { font-size: 1.3rem; }
.tuev-callout { position: relative; overflow: hidden; background: #20272a; }
.tuev-callout::after { content: ""; position: absolute; right: -8%; top: -30%; width: 45%; height: 180%; transform: rotate(18deg); background: repeating-linear-gradient(135deg, rgba(231,167,43,.13) 0 10px, transparent 10px 22px); pointer-events: none; }
.tuev-callout > * { position: relative; z-index: 1; }
.tuev-callout .eyebrow { color: var(--signal-light); }
.tuev-callout .button-light { background: var(--signal-light); color: #1f2729; }
.steps li { border-top-color: #20272a; }
.steps .step-icon { border-color: #b9c5c6; color: var(--signal); }
.ui-icon { display: inline-block; flex: 0 0 auto; width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; vertical-align: -.16em; }
.service-icon .ui-icon, .step-icon .ui-icon { width: 22px; height: 22px; }
.hero-visual { background: linear-gradient(90deg, rgba(14,27,31,.32), rgba(14,27,31,.06)), url('../img/hero-workshop-diagnosis.png') center / cover no-repeat; }
.hero-visual::before { inset: 0; right: auto; bottom: auto; width: auto; height: auto; border: 0; border-radius: 0; background: linear-gradient(180deg, rgba(7,21,25,.08), rgba(7,21,25,.26)); }
.hero-visual > p { display: none; }
.photo-placeholder { background: linear-gradient(90deg, rgba(16,29,32,.18), rgba(16,29,32,.04)), url('../img/workshop-team.png') center / cover no-repeat; }
.photo-placeholder::before { inset: 0; right: auto; bottom: auto; width: auto; height: auto; border: 0; border-radius: 0; background: linear-gradient(180deg, transparent, rgba(7,21,25,.12)); }
.photo-placeholder > span { display: none; }
.promise-section { background: #20272a; color: #f5f7f6; max-width: none; padding-left: max(1.25rem, calc((100% - 1175px) / 2)); padding-right: max(1.25rem, calc((100% - 1175px) / 2)); }
.promise-section .section-heading { max-width: 680px; }
.promise-section .section-heading > p:last-child { color: #c4d0d0; }
.promise-section .eyebrow { color: var(--signal-light); }
.promise-grid { display: grid; gap: 1rem; margin-top: 2rem; max-width: 1175px; }
.promise-grid article { padding: 1.4rem; border: 1px solid #4c5a5c; border-radius: 6px; background: rgba(255,255,255,.03); }
.promise-grid h3 { margin: 1.1rem 0 .55rem; font-size: 1.25rem; }
.promise-grid p { margin: 0; color: #e0e7e7; }
.local-proof-section { display: grid; gap: 1rem; }
.local-map-card, .review-card { padding: 1.6rem; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.local-map-card { background: #e7eceb; border-top: 4px solid #20272a; }
.local-map-card h2, .review-card h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.local-map-card > p:not(.eyebrow), .review-card > p:not(.eyebrow) { color: var(--muted); }
.review-card { border-top: 4px solid var(--primary); }
.local-proof-section .eyebrow .ui-icon { width: 1em; height: 1em; margin-right: .35rem; color: var(--brand-cyan); }
.review-card .eyebrow .ui-icon { color: var(--signal-light); fill: currentColor; stroke-width: 1.3; }
.section-heading h2::after { content: ""; display: block; width: 34px; height: 3px; margin-top: .75rem; background: var(--brand-cyan); }
.promise-section .section-heading h2::after { background: var(--brand-cyan); }
.site-footer .brand { margin-bottom: .8rem; }
.site-footer address .ui-icon, .site-footer a .ui-icon { margin-right: .45rem; color: var(--brand-cyan); }
.footer-instagram { display: inline-flex; align-items: center; gap: .5rem; margin-top: .6rem; color: #e9f0f1; }
.footer-instagram .ui-icon { width: 1.1rem; height: 1.1rem; color: #f1b64a; }
.footer-instagram strong, .footer-instagram small { display: block; }
.footer-instagram small { color: #aebdbe; font-size: .72rem; }
.contact-strip { grid-template-columns: 1fr; }
.contact-strip-actions { grid-template-columns: 1fr 1fr; }
.contact-social { display: inline-flex; align-items: center; gap: .7rem; color: #d7e1e2; font-size: .84rem; }
.contact-social > span:first-child { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #536366; border-radius: 4px; color: #f1b64a; }
.contact-social strong, .contact-social small { display: block; }
.contact-social small { color: #aebdbe; margin-top: .1rem; }
.mobile-contact-bar { display: none; }

@media (min-width: 1000px) {
  .nav-phone { color: #d7e1e2; }
  .promise-grid { grid-template-columns: repeat(3, 1fr); }
  .local-proof-section { grid-template-columns: .9fr 1.1fr; align-items: stretch; }
  .contact-strip { grid-template-columns: 1.2fr 1fr; }
}

@media (max-width: 719px) {
  body { padding-bottom: 70px; }
  .menu-toggle { width: 44px; height: 44px; place-content: center; }
  .hero { padding-top: 3rem; padding-bottom: 2.5rem; }
  .hero h1 { font-size: clamp(1.75rem, 8vw, 3.35rem); }
  .hero-actions { align-items: flex-start; gap: 0; margin-top: .9rem; }
  .hero-actions .button { display: none; }
  .hero-actions .text-link { padding: .55rem 0; }
  .hero-visual { min-height: 170px; margin-top: .35rem; }
  .section { padding-top: 3.4rem; padding-bottom: 3.4rem; }
  .trust-bar div { padding: 1rem; }
  .tuev-callout { padding-top: 2.8rem; padding-bottom: 2.8rem; }
  .contact-strip { margin-bottom: 1.25rem; }
  .floating-whatsapp { display: none; }
  .mobile-contact-bar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; min-height: 64px; box-shadow: 0 -8px 24px rgba(20,29,30,.16); }
  .mobile-contact-bar a { display: grid; place-items: center; text-decoration: none; color: #fff; font-size: .93rem; font-weight: 700; }
  .mobile-contact-bar .mobile-call { background: var(--primary); }
  .mobile-contact-bar .mobile-whatsapp { background: #1d2729; }
}