/* Vista previa tipográfica. Sustituir la primera familia por una VAG Rounded
   con licencia mediante @font-face cuando se entregue el archivo webfont. */
:root {
  --vag-rounded: "VAG Rounded", "VAG Round", "Arial Rounded MT Bold", "Nunito", Arial, sans-serif;
  --brand-cyan: #7ccbe6;
  --tech-cyan: #7ccbe6;
  --primary: #7ccbe6;
  --primary-dark: #57afd0;
  --tech-glow: rgba(124, 203, 230, .18);
}

body,
button,
input,
select,
textarea {
  font-family: var(--vag-rounded);
  font-weight: 400;
  letter-spacing: 0;
  font-kerning: normal;
}

h1,
h2,
h3,
h4,
.button,
.primary-nav a,
.nav-phone,
.eyebrow,
label,
.text-link,
.footer-note,
.trust-bar strong,
.service-card h3,
.steps h3 {
  font-family: var(--vag-rounded);
  letter-spacing: 0 !important;
  font-kerning: normal;
}

h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }
.button, .primary-nav a, .nav-phone, .text-link, label { font-weight: 600; }
.eyebrow { font-weight: 700; }

/* La marca entregada ya contiene su propia tipografía. */
.brand { letter-spacing: normal; }

/* El símbolo de WhatsApp usa una silueta sólida, no el trazo de los iconos UI. */
.ui-icon-whatsapp {
  fill: currentColor;
  stroke: none;
}

.hero h1 em,
.text-link,
.service-icon,
.step-icon,
.local-proof-section .eyebrow .ui-icon,
.appointment-modal__selection b {
  color: #7ccbe6;
}

.button-primary,
.appointment-modal__mark,
.calendar-day.is-selected {
  background-color: #7ccbe6;
}

.appointment-modal__mark { color: #071013; }

.button-primary,
.appointment-modal__mark,
.appointment-modal__selection,
.calendar-day:hover:not(:disabled),
.calendar-day:focus-visible {
  border-color: #7ccbe6;
}

.floating-whatsapp .ui-icon-whatsapp {
  width: 28px;
  height: 28px;
}

/* Calendario propio: fines de semana visibles pero no seleccionables. */
.appointment-date-control {
  display: flex;
  gap: .45rem;
  margin-top: .35rem;
}

.appointment-date-control input {
  width: 100%;
  margin-top: 0;
  cursor: pointer;
}

.appointment-date-control button {
  border: 1px solid #4ebade;
  background: transparent;
  color: #eaf5f7;
  padding: .55rem .7rem;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}

.appointment-picker {
  margin-top: -.3rem;
  padding: 1rem;
  border: 1px solid #34545c;
  background: #091113;
}

.calendar-head {
  display: grid;
  grid-template-columns: 2.25rem 1fr 2.25rem;
  align-items: center;
  gap: .6rem;
  margin-bottom: .8rem;
  text-align: center;
  color: #edf6f7;
}

.calendar-head button {
  min-height: 2.25rem;
  border: 1px solid #405d64;
  background: #0d181b;
  color: #4ebade;
  font: 1.45rem/1 var(--vag-rounded);
  cursor: pointer;
}

.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .25rem;
}

.calendar-weekdays {
  margin-bottom: .3rem;
  color: #a9bec2;
  font-size: .75rem;
  text-align: center;
}

.calendar-weekdays span:nth-child(6),
.calendar-weekdays span:nth-child(7) { color: #69787b; }

.calendar-day,
.calendar-blank {
  min-height: 2.3rem;
}

.calendar-day {
  border: 1px solid transparent;
  background: #102126;
  color: #edf6f7;
  font: inherit;
  font-size: .86rem;
  cursor: pointer;
}

.calendar-day:hover:not(:disabled),
.calendar-day:focus-visible {
  border-color: #4ebade;
  background: #173238;
}

.calendar-day.is-selected {
  background: #4ebade;
  color: #071013;
  font-weight: 700;
}

.calendar-day.is-weekend,
.calendar-day:disabled,
.calendar-head button:disabled {
  background: #12191b;
  border-color: #1e292c;
  color: #607074;
  cursor: not-allowed;
  opacity: .62;
}

.calendar-note {
  margin: .85rem 0 0;
  color: #819397;
  font-size: .78rem;
  text-align: center;
}

/* Confirmación visible tras un envío correcto. */
.appointment-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(2, 9, 11, .78);
  backdrop-filter: blur(7px);
}

.appointment-modal__panel {
  width: min(100%, 510px);
  padding: clamp(1.8rem, 5vw, 3rem);
  border: 1px solid rgba(78, 186, 222, .72);
  background: linear-gradient(145deg, #102126, #081113);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .52), 0 0 32px rgba(78, 186, 222, .15);
  color: #edf6f7;
  text-align: center;
}

.appointment-modal__mark {
  display: grid;
  place-items: center;
  width: 3.35rem;
  height: 3.35rem;
  margin: 0 auto 1.2rem;
  border: 1px solid #4ebade;
  border-radius: 50%;
  background: rgba(78, 186, 222, .14);
  color: #4ebade;
  font: 700 1.7rem/1 Arial, sans-serif;
}

.appointment-modal .eyebrow { margin-bottom: .65rem; }
.appointment-modal h2 { margin-bottom: 1rem; color: #fff; }
.appointment-modal p { margin: 0 auto .8rem; color: #c9dcdf; }
.appointment-modal__selection {
  display: grid;
  gap: .18rem;
  margin: 1.35rem 0;
  padding: 1rem;
  border: 1px solid rgba(78, 186, 222, .55);
  background: rgba(78, 186, 222, .09);
}

.appointment-modal__selection span {
  color: #a9bec2;
  font-size: .8rem;
}

.appointment-modal__selection strong {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
}

.appointment-modal__selection b {
  color: #4ebade;
  font-size: 1.05rem;
  font-weight: 700;
}

.appointment-modal__note {
  margin: 1.25rem auto 1.5rem !important;
  padding: .8rem 1rem;
  border-left: 2px solid #f5bd4c;
  background: rgba(245, 189, 76, .08);
  color: #f2e6c2 !important;
  font-size: .92rem;
  text-align: left;
}

/* Señales visuales para Maps y Google Bewertungen, sin inventar valoraciones. */
.local-map-card,
.review-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.local-map-card > *,
.review-card > * { position: relative; z-index: 1; }

.local-map-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 360'%3E%3Cg fill='none' stroke='%23f5bd4c' stroke-linecap='round'%3E%3Cpath d='M-50 260 C90 210 150 295 270 215 S455 100 750 142' stroke-width='3'/%3E%3Cpath d='M32 -30 C125 78 195 60 255 142 S430 290 635 405' stroke-width='2'/%3E%3Cpath d='M10 95 L178 135 L268 75 L398 128 L526 62 L720 105' stroke-width='1.5'/%3E%3Cpath d='M96 355 C155 265 270 280 350 203 S533 175 680 9' stroke-width='1.5'/%3E%3C/g%3E%3Cg fill='%23f5bd4c'%3E%3Ccircle cx='270' cy='215' r='6'/%3E%3Ccircle cx='526' cy='62' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 58% 44%;
  background-repeat: no-repeat;
  background-size: 145% auto;
  pointer-events: none;
}

.local-map-card::after {
  content: "";
  position: absolute;
  right: -3.5rem;
  bottom: -3.5rem;
  z-index: 0;
  width: 11rem;
  height: 11rem;
  border: 1px solid rgba(245, 189, 76, .35);
  border-radius: 50%;
  box-shadow: 0 0 0 2rem rgba(245, 189, 76, .025), 0 0 0 4rem rgba(245, 189, 76, .018);
}

.local-map-card .button-outline {
  border-color: rgba(245, 189, 76, .78);
  box-shadow: 0 0 18px rgba(245, 189, 76, .08);
}

.local-map-card .button-outline:hover,
.local-map-card .button-outline:focus-visible {
  background: rgba(245, 189, 76, .13);
  border-color: #f5bd4c;
}

.review-card::before {
  content: "“";
  position: absolute;
  right: 1.25rem;
  top: -.75rem;
  z-index: 0;
  color: rgba(124, 203, 230, .12);
  font: 900 10rem/.9 Georgia, serif;
  pointer-events: none;
}

.review-visual {
  position: absolute !important;
  right: 1.25rem;
  bottom: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: rgba(124, 203, 230, .7);
  pointer-events: none;
}

.review-visual > span:first-child {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgba(245, 189, 76, .62);
  color: #f5bd4c;
  font-size: 1.05rem;
}

.review-card .text-link { padding-right: 4rem; }

@media (max-width: 719px) {
  .review-visual { right: 1rem; bottom: 1rem; }
  .review-card .text-link { padding-right: 3.7rem; }
}

/* Cabecera clara: mantiene el contraste en el menú y deja respirar el logo. */
.site-header {
  background: #050a0b;
  border-bottom: 1px solid rgba(124, 203, 230, .68);
  box-shadow: inset 0 -1px 0 #7ccbe6, 0 5px 20px rgba(0, 0, 0, .28);
}

.nav-wrap {
  min-height: 88px;
}

.site-header .brand {
  width: 182px;
  height: 70px;
  min-width: 182px;
  background-image: url('../img/thome-kfz-logo-inverted.svg');
}

.site-footer .brand {
  background-image: url('../img/thome-kfz-logo-inverted.svg');
}

.primary-nav { gap: 1.45rem; }
.primary-nav a, .nav-phone { font-size: .96rem; }

/* Las páginas interiores informan sin competir con el hero principal. */
.page-hero {
  padding-top: clamp(1.15rem, 2vw, 1.65rem);
  padding-bottom: clamp(1.1rem, 1.9vw, 1.55rem);
}

.page-hero h1 {
  max-width: 720px;
  font-size: clamp(1.85rem, 2.8vw, 2.75rem);
  line-height: 1.04;
}

.page-hero > p:last-child {
  max-width: 650px;
  margin-top: .65rem;
  font-size: clamp(.96rem, 1.2vw, 1.05rem);
  line-height: 1.45;
}

/* Páginas legales: jerarquía funcional y mucho más contenida. */
.legal-page {
  padding-top: clamp(1.8rem, 3vw, 2.6rem);
  padding-bottom: 3rem;
}

.legal-page h1 {
  margin-bottom: 1rem;
  font-size: clamp(1.75rem, 2.5vw, 2.35rem);
  line-height: 1.1;
}

.primary-nav a,
.nav-phone { color: #f4fbfc !important; }
.primary-nav a[aria-current="page"] { color: #7ccbe6 !important; }
.menu-toggle span:not(.sr-only) { background: #f4fbfc; }

@media (max-width: 999px) {
  .primary-nav.is-open {
    background: #050a0b;
    border-bottom: 1px solid rgba(124, 203, 230, .55);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .34);
  }
}

@media (max-width: 719px) {
  .nav-wrap {
    min-height: 78px;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .site-header .brand {
    width: 150px;
    height: 58px;
    min-width: 150px;
  }

  .page-hero {
    padding-top: 1.05rem;
    padding-bottom: 1rem;
  }

  .page-hero h1 {
    font-size: clamp(1.55rem, 7.2vw, 2.05rem);
    line-height: 1.06;
  }

  .page-hero > p:last-child {
    margin-top: .55rem;
    font-size: .94rem;
    line-height: 1.42;
  }

  .legal-page {
    padding-top: 1.5rem;
    padding-bottom: 2.4rem;
  }

  .legal-page h1 { font-size: 1.65rem; }

  .contact-layout > .request-form { order: -1; }
}