/* ============================================================
   CONTACTO — página /contacto.html
   Diseño editorial: hero de texto sobre fondo claro,
   stats strip, tarjetas de contacto en grid de 4 con colores
   de marca, formulario en panel oscuro y mapa premium.
   ============================================================ */

.contacto-page {
  background: var(--bg-primary);
  overflow: hidden;
}

/* ================================================================
   HERO
   ================================================================ */
/* Banda fotográfica. Era texto centrado sobre dos degradados radiales
   —la página no tenía ni una sola fotografía de contenido— y el centrado
   iba contra la regla de alinear todo al margen izquierdo. */
.contacto-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(360px, 46vh, 480px);
  padding: calc(var(--topbar-height) + var(--space-10)) 0 var(--space-8);
  background: var(--bg-dark);
  overflow: hidden;
}

.contacto-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.contacto-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
}
/* Velo de tres capas, el mismo que el hero de la portada, el de servicios y
   el de presupuesto. Ver el comentario largo en `css/home.css`.

   El de antes bajaba solo de abajo arriba y se escribió contra una foto de
   banco, oscura a propósito. Con la foto real —la puerta del taller, a
   pleno día, con pared blanca— el rótulo se quedaba en 2,02:1 y el titular
   en 2,26:1 a 320px. Lo cazó la comprobación `texto-ilegible-sobre-foto`
   de la auditoría de navegador, no una revisión a ojo. */
.contacto-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(10, 12, 14, 0.38), rgba(10, 12, 14, 0.38)),
    linear-gradient(
      to right,
      rgba(10, 12, 14, 0.60)  0%,
      rgba(10, 12, 14, 0.50) 30%,
      rgba(10, 12, 14, 0.28) 55%,
      rgba(10, 12, 14, 0.06) 80%,
      rgba(10, 12, 14, 0.00) 95%),
    linear-gradient(
      to top,
      rgba(10, 12, 14, 0.78)  0%,
      rgba(10, 12, 14, 0.60) 30%,
      rgba(10, 12, 14, 0.36) 62%,
      rgba(10, 12, 14, 0.14) 88%,
      rgba(10, 12, 14, 0.06) 100%);
}

.contacto-hero .container {
  position: relative;
  z-index: 2;
  text-align: left;
  width: 100%;
}

.contacto-hero-text {
  max-width: 60ch;
  margin: 0;
}

.contacto-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-4);
}
.contacto-hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
}

.contacto-hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-5);
  color: #FFFFFF;
}
/* Sobre foto el azul de marca no llega a contraste; la segunda mitad
   del titular se diferencia por peso, no por color. */
.contacto-hero-title .accent {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}

.contacto-hero-subtitle {
  font-size: clamp(16px, 1.8vw, 19px);
  color: rgba(255, 255, 255, 0.84);
  max-width: 56ch;
  margin: 0 0 var(--space-6);
  line-height: 1.55;
}

.contacto-hero-quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.contacto-hero-quick-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 2px;
  background: transparent;
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.contacto-hero-quick-link svg { width: 14px; height: 14px; }
.contacto-hero-quick-link:hover {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
}
.contacto-hero-quick-link.is-primary {
  background: #FFFFFF;
  color: var(--fg-primary);
  border-color: #FFFFFF;
}
.contacto-hero-quick-link.is-primary:hover {
  background: #E8EBEE;
  border-color: #E8EBEE;
}

/* (Hero visual removido — texto a sangre completa, sin animación) */
.contacto-hero-visual { display: none; }

/* ================================================================
   STATS STRIP — banda con datos clave bajo el hero
   ================================================================ */
.contacto-stats {
  background: var(--bg-dark);
  color: #FFFFFF;
  padding: var(--space-6) 0;
  position: relative;
}
.contacto-stats::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--brand-blue);
}
.contacto-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (min-width: 700px) {
  .contacto-stats-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
}
.contacto-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contacto-stat-value {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.contacto-stat-value .unit {
  font-size: 0.55em;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  margin-left: 4px;
}
.contacto-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  font-weight: 600;
}

/* ================================================================
   BODY — Tarjetas de contacto + Formulario
   ================================================================ */
.contacto-body {
  padding: var(--space-12) 0;
}

/* Sección de tarjetas de contacto en grid de 4 con colores de marca */
.contacto-channels-section {
  margin-bottom: var(--space-12);
}
.contacto-section-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.contacto-section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-8);
  max-width: 24ch;
}

.contacto-channels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 600px) { .contacto-channels { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px){ .contacto-channels { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }

.contacto-channel {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.contacto-channel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--channel-color, var(--brand-blue));
  transition: height var(--transition-base);
}
.contacto-channel:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(10,10,10,0.07);
  border-color: var(--channel-color, var(--brand-blue));
}
.contacto-channel:hover::before { height: 8px; }

.contacto-channel.--email    { --channel-color: var(--brand-blue); }
.contacto-channel.--phone    { --channel-color: var(--brand-blue-dark); }
.contacto-channel.--address  { --channel-color: var(--brand-blue-light); }
.contacto-channel.--lang     { --channel-color: var(--brand-blue); }

.contacto-channel-icon {
  width: 52px;
  height: 52px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--channel-color) 12%, transparent);
  color: var(--channel-color);
  margin-bottom: var(--space-2);
}
.contacto-channel-icon svg { width: 26px; height: 26px; }

.contacto-channel-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-subtle);
  margin: 0;
}
.contacto-channel-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-primary);
  text-decoration: none;
  margin: 0;
  word-break: break-word;
}
a.contacto-channel-value:hover { color: var(--channel-color); }
/* Los teléfonos son enlaces `tel:` apilados: en táctil median 20px de
   alto y se marcaba el de al lado. */
@media (hover: none) {
  a.contacto-channel-value,
  a.contacto-hero-quick-link[href^="tel:"] {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}
.contacto-channel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contacto-channel-list .contacto-channel-value { font-size: 16px; }
.contacto-channel-note {
  font-size: 13px;
  color: var(--fg-muted);
  margin: var(--space-2) 0 0;
  line-height: 1.5;
}
.contacto-channel-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--channel-color);
  text-decoration: none;
}
.contacto-channel-cta::after {
  content: "→";
  transition: transform var(--transition-fast);
}
.contacto-channel:hover .contacto-channel-cta::after { transform: translateX(4px); }

.contacto-channel-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
}
.contacto-lang-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 6px 12px;
  border-radius: 2px;
  background: var(--bg-soft);
  border: 1.5px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fg-primary);
}

/* ================================================================
   FORM SECTION — split con CTA destacado a la izquierda
   ================================================================ */
.contacto-form-section {
  margin-top: var(--space-10);
}
.contacto-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: stretch;
}
@media (min-width: 1024px) {
  .contacto-form-grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 0;
  }
}

/* Panel izquierdo: CTA oscuro con lenguaje "fábrica" */
.contacto-form-aside {
  background: var(--bg-dark);
  color: #FFFFFF;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .contacto-form-aside {
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    border-right: none;
  }
}
.contacto-form-aside::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -30%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-blue) 35%, transparent) 0%, transparent 65%);
  pointer-events: none;
}
.contacto-form-aside-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-blue);
  font-weight: 700;
  display: block;
  margin-bottom: var(--space-3);
  position: relative;
  z-index: 1;
}
.contacto-form-aside-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  position: relative;
  z-index: 1;
}
.contacto-form-aside-text {
  font-size: 15px;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin: 0 0 var(--space-6);
  position: relative;
  z-index: 1;
}
.contacto-form-aside-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  z-index: 1;
}
.contacto-form-aside-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.9);
}
.contacto-form-aside-list li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-top: 6px;
  flex-shrink: 0;
  background: var(--brand-blue);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.contacto-form-aside-list li:nth-child(2)::before { background: var(--brand-blue-dark); }
.contacto-form-aside-list li:nth-child(3)::before { background: var(--brand-blue); }
.contacto-form-aside-list li:nth-child(4)::before { background: var(--brand-blue-light); }

.contacto-form-aside-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 2px;
  color: #FFFFFF;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 600;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  position: relative;
  z-index: 1;
}
.contacto-form-aside-cta:hover {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}

/* Formulario */
.contacto-form-col {
  background: var(--bg-soft);
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
}
@media (min-width: 1024px) {
  .contacto-form-col {
    border-radius: 2px;
    border-left: 1px solid var(--border);
  }
}

.contacto-form-header { margin-bottom: var(--space-6); }
.contacto-form-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}
.contacto-form-subtitle {
  font-size: 14px;
  color: var(--fg-muted);
  margin: 0;
  line-height: 1.5;
}

.contacto-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (min-width: 600px) {
  .contacto-row.is-2col { grid-template-columns: 1fr 1fr; }
}

.contacto-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-4);
}
.contacto-row .contacto-field { margin-bottom: 0; }

.contacto-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}
.contacto-label .req { color: var(--brand-blue); font-weight: 700; }

.contacto-input,
.contacto-select,
.contacto-textarea {
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 13px 14px;
  border: 1.5px solid var(--border);
  border-radius: 2px;
  background: var(--bg-primary);
  color: var(--fg-primary);
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.contacto-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
}
.contacto-input:focus,
.contacto-select:focus,
.contacto-textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-blue) 12%, transparent);
}
.contacto-field.has-error .contacto-input,
.contacto-field.has-error .contacto-textarea {
  border-color: var(--brand-blue);
}
.contacto-field-error {
  font-size: 12px;
  color: var(--brand-blue);
  margin: 0;
  min-height: 1em;
}
.contacto-field:not(.has-error) .contacto-field-error { visibility: hidden; }

.contacto-rgpd {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: var(--space-5) 0;
}
.contacto-rgpd input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  /* 24px es el mínimo de zona táctil de la norma. Estaba en 16 y es la
     casilla del consentimiento: fallarla es no poder enviar el formulario. */
  width: 24px;
  height: 24px;
  accent-color: var(--brand-blue);
}
.contacto-rgpd-label {
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.5;
  /* La zona que recibe el dedo es la etiqueta, no la casilla de 24px. Medida
     a 390px se quedaba en 39px de alto: por encima del mínimo de la norma
     (24px) pero por debajo de los 44 que sigue el resto de la web. Es la
     casilla que hay que marcar para poder enviar el formulario, así que
     conviene que no sea la más difícil de acertar de la página. En
     presupuesto ya medía 87px porque el texto ocupa dos líneas.

     `display: block`, NO flex: la casilla es hermana de la etiqueta, no va
     dentro, así que un flex aquí no la alinearía — lo que haría es partir en
     dos columnas el texto y el enlace de «política de privacidad», que son
     una sola frase. Basta con que la etiqueta deje de ser inline para que
     `min-height` tenga efecto. */
  display: block;
  min-height: 44px;
  padding-block: 6px;
}
.contacto-rgpd-label a {
  color: var(--fg-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contacto-submit-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}
@media (min-width: 600px) {
  .contacto-submit-row { flex-direction: row; align-items: center; gap: var(--space-5); }
}
.contacto-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--brand-blue);
  color: #FFFFFF;
  border: none;
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.contacto-submit svg { width: 16px; height: 16px; }
.contacto-submit:hover {
  background: var(--fg-primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--fg-primary) 25%, transparent);
}
.contacto-alt-cta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  text-decoration: none;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.contacto-alt-cta:hover {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}

/* Estados éxito / error */
.contacto-state {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 2px;
  margin-top: var(--space-4);
  font-size: 14px;
  line-height: 1.5;
}
.contacto-state.is-shown { display: flex; }
.contacto-state svg { width: 22px; height: 22px; flex-shrink: 0; }
.contacto-state.is-success {
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: #166534;
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
}
.contacto-state.is-error {
  background: color-mix(in srgb, var(--brand-blue) 8%, transparent);
  color: #991B43;
  border: 1px solid color-mix(in srgb, var(--brand-blue) 30%, transparent);
}

/* ================================================================
   MAPA — sección final con visual destacado
   ================================================================ */
.contacto-mapa {
  position: relative;
  padding: var(--space-12) 0 var(--space-16);
  background: var(--bg-soft);
  border-top: 1px solid var(--border-subtle);
}
.contacto-mapa-header {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto var(--space-8);
}
.contacto-mapa-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-blue-light);
  font-weight: 700;
  display: inline-block;
  margin-bottom: var(--space-3);
}
.contacto-mapa-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}
.contacto-mapa-intro {
  font-size: 15px;
  color: var(--fg-muted);
  margin: 0;
  line-height: 1.55;
}

.contacto-mapa-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 900px) {
  .contacto-mapa-wrap {
    grid-template-columns: 1.25fr 1fr;
    gap: var(--space-6);
  }
}

.contacto-mapa-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(10,10,10,0.08);
  background: var(--bg-primary);
}
.contacto-mapa-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.contacto-mapa-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: 0 12px 28px rgba(10,10,10,0.04);
}
.contacto-mapa-card-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.contacto-mapa-card-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-muted);
}
.contacto-mapa-card-row strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: 700;
  margin-bottom: 2px;
}
.contacto-mapa-card-row span { display: block; color: var(--fg-primary); font-weight: 500; }
.contacto-mapa-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--brand-blue-light) 14%, transparent);
  color: var(--brand-blue-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contacto-mapa-card-icon svg { width: 18px; height: 18px; }
.contacto-mapa-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  padding: 12px 18px;
  background: var(--fg-primary);
  color: var(--bg-primary);
  border-radius: 2px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  font-weight: 600;
  align-self: flex-start;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.contacto-mapa-card-cta:hover {
  background: var(--brand-blue-light);
  transform: translateY(-2px);
}

/* --- Rediseño: alineación ---
   Cabeceras de sección al margen izquierdo. El hero de contacto sí
   conserva su composición propia. */
.contacto-section-eyebrow,
.contacto-section-title,
.contacto-mapa-header {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

/* --- Regla del oscuro ---
   El fondo oscuro se reserva al pie y al bloque de cierre. La banda de
   cifras pasa a claro con filetes arriba y abajo. */
.contacto-stats {
  background: var(--bg-soft);
  color: var(--fg-primary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Igual que en empresa: los textos de la banda de cifras iban en blanco
   para fondo oscuro. */
.contacto-stat-value,
.contacto-stat-value .unit { color: var(--fg-primary); }
.contacto-stat-label { color: var(--fg-muted); }
.contacto-form-aside-eyebrow { color: var(--fg-subtle); }

/* Los mensajes de estado del formulario. */
.contacto-state.is-success { color: var(--success); }
.contacto-state.is-error   { color: var(--danger); }

/* Fuera los degradados radiales de fondo de página y el halo del bloque
   de canales: adorno sin función sobre fondo blanco. */
.contacto-page,
.contacto-hero { background-image: none; }
.contacto-channel::after,
.contacto-form-aside::before { content: none; }

/* Viñeta triangular a filete corto, como en el resto de la web. */
.contacto-form-aside-list li::before {
  clip-path: none;
  width: 10px;
  height: 1px;
  border-radius: 0;
  background: var(--fg-subtle);
  margin-top: 0.72em;
}

/* --- Hero ---
   Iba centrado y con media frase en azul y cursiva. La cursiva de color
   dentro de un titular es un recurso de folleto: llama la atención
   sobre un trozo de frase sin que haya ninguna razón para destacarlo.
   Se alinea al margen y se unifica la tinta. */
.contacto-hero-text,
.contacto-hero-title,
.contacto-hero-subtitle,
.contacto-hero-actions {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.contacto-hero-actions { justify-content: flex-start; }
.contacto-hero-title em,
.contacto-hero-title i,
.contacto-hero-title .accent {
  font-style: normal;
  color: inherit;
}

/* --- Panel lateral del formulario ---
   Era un bloque oscuro en mitad de una página clara. El oscuro está
   reservado al pie y al cierre de página. */
.contacto-form-aside {
  background: var(--bg-soft);
  color: var(--fg-primary);
  border: 1px solid var(--border);
}
.contacto-form-aside-title,
.contacto-form-aside strong { color: var(--fg-primary); }
.contacto-form-aside-text,
.contacto-form-aside-list li { color: var(--fg-muted); }
.contacto-form-aside .btn,
.contacto-form-aside-cta {
  background: var(--brand-blue);
  color: #FFFFFF;
  border-color: var(--brand-blue);
}

/* El email largo partía a mitad de palabra ("...4x4.co / m"). */
.contacto-channel-value,
.contacto-channel a {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* La franja de cinco colores sobre la banda de cifras es el mismo
   recurso que se retiró del pie: una regla de 4px partida en segmentos
   de colores. Pasa a un filete de 1px. */
.contacto-stats::before {
  height: 1px;
  background: var(--border);
}

/* Teléfono de la tarjeta del mapa.
   Llevaba los estilos en el atributo `style` del propio <a> —el único
   caso de toda la web— y además medía 18px de alto: por debajo de los
   24 que pide WCAG 2.5.8 y siendo el número al que se llama desde el
   móvil. También tenía el `href` con espacios (`tel:+34 968 49 70 19`),
   que algunos marcadores no interpretan; va sin separadores. */
.contacto-mapa-card-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  font-variant-numeric: tabular-nums;
}
@media (hover: none) {
  .contacto-mapa-card-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}