/* ==========================================================
   Talleres AMG - hoja de estilos
   Modo oscuro. Tipografia Inter. Acento ambar.
   ========================================================== */

:root {
  color-scheme: dark;

  --fondo: #0e1116;
  --fondo-alt: #141922;
  --fondo-2: #141922;
  --fondo-3: #1b212c;
  --fondo-4: #232b38;
  --borde: #2a3342;
  --borde-claro: #3a4557;

  --texto: #eef2f7;
  --texto-2: #b8c2d0;
  --texto-3: #8b97a8;

  --ambar: #ffb020;
  --ambar-claro: #ffc758;
  --ambar-tenue: rgba(255, 176, 32, 0.12);
  --ambar-borde: rgba(255, 176, 32, 0.32);

  --wa: #25d366;
  --wa-tenue: rgba(37, 211, 102, 0.12);

  --radio: 14px;
  --radio-s: 9px;
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.35);
  --sombra-s: 0 4px 14px rgba(0, 0, 0, 0.28);
  /* alias en ingles, por legibilidad */
  --shadow: var(--sombra);
  --shadow-s: var(--sombra-s);

  /* area tactil minima recomendada (WCAG 2.2) */
  --tap: 44px;

  --wrap: 1180px;
  --gap: 22px;
}

/* el navegador pinta los controles nativos en claro si no se le dice */
:root { color-scheme: dark; }

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(1.95rem, 4.4vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 3.1vw, 2.2rem); }
h3 { font-size: 1.16rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ambar); text-decoration: none; }
a:hover { color: var(--ambar-claro); text-decoration: underline; }

b, strong { font-weight: 700; color: var(--texto); }
i { color: var(--ambar); }

img, svg { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}

/* ---------- salto accesible ---------- */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ambar);
  color: #14181f;
  padding: 12px 20px;
  font-weight: 700;
  border-radius: 0 0 var(--radio-s) 0;
}
.saltar:focus { left: 0; }

/* ---------- cabecera ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(14, 17, 22, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}

.cabecera__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--texto);
  text-decoration: none;
  flex-shrink: 0;
}
.marca:hover { color: var(--texto); text-decoration: none; }

.marca__img { display: block; width: 40px; height: 40px; flex-shrink: 0; }

.marca__texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca__texto b {
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--texto);
}
.marca__texto small {
  font-size: 0.68rem;
  color: var(--texto-3);
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.menu-btn {
  margin-left: auto;
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  cursor: pointer;
}
.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--texto);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
}
.menu-btn span { position: relative; }
.menu-btn span::before { position: absolute; top: -6px; }
.menu-btn span::after { position: absolute; top: 6px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.nav a {
  padding: 8px 11px;
  border-radius: var(--radio-s);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--texto-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s;
}
.nav a:hover { background: var(--fondo-3); color: var(--texto); text-decoration: none; }
.nav a.activo { background: var(--ambar-tenue); color: var(--ambar); }

/* ---------- tarjeta de servicio con boton ---------- */
.tarjeta--enlace {
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s, transform 0.18s;
}
.tarjeta--enlace:hover { border-color: var(--ambar); transform: translateY(-2px); }
.tarjeta--enlace p { flex: 1; }

.tarjeta__cta {
  display: block;
  margin-top: 14px;
  padding: 9px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  background: var(--ambar);
  border-radius: 6px;
  color: #14161c;
  text-decoration: none;
  transition: background 0.18s;
}
.tarjeta__cta::after { content: " \2192"; }
.tarjeta__cta:hover { background: var(--ambar-claro); color: #14161c; text-decoration: none; }
/* sin :has(), que no lo tiene todo el mundo */
.tarjeta--enlace .tarjeta__ico { color: var(--ambar); }

/* ---------- listado de servicios extra ---------- */
.servicios-extra { margin-top: 40px; }
.servicios-extra__lista {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
}
.servicios-extra__lista li {
  padding: 14px 18px;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: 0.94rem;
  color: var(--texto-2);
}
.servicios-extra__lista b { color: var(--texto); }
.servicios-extra__lista a { font-weight: 700; white-space: nowrap; }

/* ---------- formas de pago ---------- */
.pilares--pagos li {
  background: var(--fondo-2);
  border: 1px solid var(--borde);
}
.pilares--pagos h3 { color: var(--texto); }
.pilares__destacado {
  border-color: var(--ambar) !important;
  background: var(--fondo-3) !important;
}
.pilares__destacado h3 { color: var(--ambar); }

/* ---------- rotulo de aviso ---------- */
.aviso-rotulo {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 9px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #14161c;
  background: var(--ambar);
  border-radius: 4px;
  vertical-align: 3px;
}

/* ---------- numeros de contacto en el heroes ---------- */
.hero__numeros {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 620px;
  margin: 0 auto 12px;
}
@media (max-width: 560px) { .hero__numeros { grid-template-columns: 1fr; } }

.hero__numero {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 14px 18px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.hero__numero-quien {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ambar);
}
/* El telefono del hero es INFORMACION, no un boton. Se ha quitado el
   enlace a proposito: con el numero en grande y pulsable, el visitante
   escribia por ahi en vez de rellenar el formulario, y ahi no se le puede
   decir que es, que le pasa ni en que estado esta el coche. */
.hero__numero-tel {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--texto);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color 0.18s;
}
/* Ahora el numero es un enlace a tel:, no un dato. Se nota al pasar por
   encima y al tabularlo, que si no parece pulsable. */
.hero__numero-tel:hover { color: var(--ambar); text-decoration: underline; }
.hero__numero-tel:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; border-radius: 4px; }
.hero__numero span { font-size: 0.78rem; color: var(--texto-3); }

/* ---------- botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.15s, background 0.18s, border-color 0.18s, color 0.18s;
  cursor: pointer;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn--primario { background: var(--ambar); color: #14181f; }
.btn--primario:hover { background: var(--ambar-claro); color: #14181f; }

.btn--secundario {
  background: transparent;
  color: var(--texto);
  border-color: var(--borde-claro);
}
.btn--secundario:hover { border-color: var(--ambar); color: var(--ambar); }

.btn--wa { background: var(--wa-tenue); color: var(--wa); border-color: rgba(37, 211, 102, 0.4); width: 100%; }
.btn--wa:hover { background: var(--wa); color: #0d1a12; }

/* ---------- hero ---------- */
.hero {
  padding: 64px 0 56px;
  background:
    radial-gradient(1100px 460px at 50% -8%, rgba(255, 176, 32, 0.1), transparent 62%),
    linear-gradient(180deg, var(--fondo-alt), var(--fondo));
  border-bottom: 1px solid var(--borde);
}

/* El hero va centrado. Con todo pegado a la izquierda, el titulo se leia
   como una etiqueta y la ficha de datos de abajo parecia otra cosa
   distinta: aqui se leia como una portada. */
.hero__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__eyebrow,
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ambar);
}

.hero__eyebrow { justify-content: center; }

.punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ambar);
  box-shadow: 0 0 0 4px var(--ambar-tenue);
  flex-shrink: 0;
}

/* El h1 es una frase larga y tiene que caber en UNA linea. Con el cuerpo
   de antes (3,1 rem) ocupa 1.200 px y se parte en tres. Con este cuerpo
   entra en el ancho del wrap, y solo se parte en movil, donde es
   imposible. */
.hero__titulo {
  margin: 0 auto 20px;
  max-width: 100%;
  font-size: clamp(1.35rem, 3.6vw, 2.7rem);
  text-wrap: balance;
}

.hero__sub {
  max-width: 62ch;
  font-size: 1.06rem;
  color: var(--texto-2);
  margin: 0 auto 28px;
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; justify-content: center; }

/* El indice que sustituyo a los chips. Antes eran once etiquetas sueltas sin
   enlace: se veian, pero no llevaban a nada. Ahora son CUADROS, y solo
   cuadros: el nombre del servicio y nada mas. Con una linea de descripcion
   debajo de cada uno, que era como estaba antes, la lista ocupaba media
   pantalla y había que leerla entera para encontrar un nombre. Con el solo
   nombre se lee de un vistazo y el que quiere el detalle pulsa y lo tiene. */
.indice {
  width: 100%;
  max-width: 820px;
  margin: 0 auto 36px;
}

.indice__titulo {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ambar);
  margin: 0 0 14px;
  text-align: left;
}

.indice__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  text-align: left;
}

/* El cuadro entero es el enlace. No se pone un <a> dentro de un <li> con un
   borde, sino al reves: el li ES el boton, con el a dentro ocupando todo el
   hueco. Asi el area pulsable es el cuadro entero y no solo las letras. */
.indice__lista li { display: flex; }

.indice__lista a {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texto-2);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.indice__lista a:hover,
.indice__lista a:focus-visible {
  border-color: var(--ambar);
  background: var(--ambar-tenue);
  color: var(--texto);
  text-decoration: none;
}

/* La nota de que los numeros del hero son solo informacion. Sin ella, el
   telefono enorme del hero parece el sitio para escribir, y no lo es. */
.hero__nota-num {
  font-size: 0.82rem;
  color: var(--texto-3);
  margin: -12px auto 30px;
  max-width: 46ch;
}
.hero__nota-num a { color: var(--ambar); font-weight: 600; }

/* La ficha de datos, como el resto del hero, centrada y con el ancho del
   indice. Antes iba a todo el ancho del wrap y, con el hero centrado, se
   quedaba colgando a la izquierda del indice, que es lo que hacia que la
   portada pareciera dos cosas pegadas. */
.hero__ficha {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 26px 34px;
  align-items: start;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  text-align: left;
  padding: 26px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--shadow-s);
}
@media (max-width: 620px) {
  .hero__ficha { grid-template-columns: 1fr; }
}

.puntuacion { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.estrellas { color: var(--ambar); letter-spacing: 2px; font-size: 1.02rem; }
.puntuacion__num { display: flex; align-items: baseline; gap: 5px; }
.puntuacion__num b { font-size: 2.1rem; font-weight: 800; line-height: 1.05; }
.puntuacion__den { font-size: 0.9rem; color: var(--texto-3); }
.puntuacion small { font-size: 0.78rem; color: var(--texto-3); }

.hero__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 18px 22px;
  margin: 0;
}
.hero__datos dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-bottom: 3px;
}
.hero__datos dd { margin: 0; font-size: 0.94rem; color: var(--texto); }

.nota-acces { grid-column: 1 / -1; margin: 0; font-size: 0.84rem; color: var(--texto-3); }

/* ---------- secciones ---------- */
.seccion { padding: 74px 0; border-bottom: 1px solid var(--borde); }
.seccion--alt { background: var(--fondo-alt); }

.seccion__titulo { max-width: 24ch; margin-bottom: 14px; }
.seccion__intro { max-width: 68ch; color: var(--texto-2); margin-bottom: 38px; }

.subtitulo {
  margin: 46px 0 20px;
  font-size: 1.28rem;
}

.nota-modulos {
  margin-top: 30px;
  padding: 18px 22px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--ambar);
  border-radius: var(--radio-s);
  color: var(--texto-2);
  font-size: 0.94rem;
}

/* ---------- pilares ---------- */
.pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pilares li {
  padding: 22px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.pilares h3 { color: var(--ambar); margin-bottom: 6px; }
.pilares p { font-size: 0.93rem; color: var(--texto-2); margin: 0; }

/* ---------- modulos ---------- */
.rejilla-modulos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--gap);
}

.bloque {
  padding: 24px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.bloque__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--borde);
  font-size: 1.06rem;
}
.bloque__ico { font-size: 1.2rem; }

.modulos { list-style: none; margin: 0; padding: 0; }
.modulos li { padding: 11px 0; border-bottom: 1px dashed var(--borde); }
.modulos li:last-child { border-bottom: 0; padding-bottom: 0; }
.modulos b { display: block; color: var(--ambar); font-size: 0.92rem; }
.modulos span { font-size: 0.89rem; color: var(--texto-2); }

/* ---------- servicios / tarjetas ---------- */
.rejilla-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--gap);
}

.tarjeta {
  padding: 24px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  display: flex;
  flex-direction: column;
}
.tarjeta__ico { font-size: 1.5rem; margin-bottom: 10px; }
.tarjeta h3 { margin-bottom: 10px; }
.tarjeta > p { font-size: 0.93rem; color: var(--texto-2); }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  position: relative;
  padding: 8px 0 8px 20px;
  font-size: 0.9rem;
  color: var(--texto-2);
}
.lista li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 17px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ambar);
}

.tags { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: auto 0 0; padding: 14px 0 0; }
.tags li {
  padding: 4px 11px;
  background: var(--ambar-tenue);
  border: 1px solid var(--ambar-borde);
  border-radius: 999px;
  font-size: 0.76rem;
  color: var(--ambar);
}

/* ---------- electricidad ---------- */
.rejilla-chk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--gap);
}
.chk {
  padding: 20px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.chk h3 { font-size: 1rem; color: var(--ambar); margin-bottom: 6px; }
.chk p { font-size: 0.9rem; color: var(--texto-2); margin: 0; }

.semaforo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 10px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.semaforo li {
  position: relative;
  padding: 10px 0 10px 30px;
  font-size: 0.93rem;
  color: var(--texto-2);
}
.semaforo li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ambar-tenue);
  border: 2px solid var(--ambar);
}

/* ---------- marcas ---------- */
.rejilla-marcas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: var(--gap);
  align-items: start;
}
.ficha-marca {
  padding: 24px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.ficha-marca > h3 {
  color: var(--ambar);
  font-size: 1.08rem;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--ambar-tenue);
}
.ficha-marca h4 {
  margin: 20px 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto);
}
.ficha-marca h4:first-of-type { margin-top: 0; }

.codigos { list-style: none; margin: 0; padding: 0; }
.codigos li { padding: 6px 0; font-size: 0.87rem; color: var(--texto-2); }
.codigos b {
  display: inline-block;
  min-width: 128px;
  color: var(--ambar);
  font-size: 0.83rem;
  font-family: "Consolas", "SF Mono", ui-monospace, monospace;
}

/* ---------- sectores ---------- */
.rejilla-sectores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--gap);
}
.sector {
  position: relative;
  padding: 24px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.sector__ico { font-size: 1.7rem; display: block; margin-bottom: 10px; }
.sector h3 { margin-bottom: 8px; }
.sector p { font-size: 0.9rem; color: var(--texto-2); margin: 0; }

.badge {
  display: inline-block;
  margin-top: 12px;
  padding: 3px 10px;
  background: var(--ambar);
  color: #14181f;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ---------- texto largo ----------
   Los correos, las URLs de maps y los titulos con coletilla se rompen
   en palabras a lo bruto si no se les da un limite. */
body { overflow-wrap: break-word; }

/* ---------- la cabecera gana sombra al bajar ---------- */
.cabecera { transition: box-shadow 0.2s; }
.cabecera.pegada { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }

/* ---------- destacado ---------- */
.destacado {
  margin-top: var(--gap);
  padding: 28px;
  background: linear-gradient(135deg, var(--fondo-4), var(--fondo-3));
  border: 1px solid var(--ambar-borde);
  border-radius: var(--radio);
}
.destacado h3 { color: var(--ambar); }
.destacado p { max-width: 70ch; color: var(--texto-2); }
.destacado .btn { margin-top: 16px; }
.nota-acces { font-size: 0.88rem; color: var(--texto-3); }

/* ---------- pasos ---------- */
/* cinco pasos en una sola fila de ancho completo: queda a lo ancho y alineado */
.pasos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
@media (max-width: 1100px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .pasos { grid-template-columns: 1fr; } }
.pasos li {
  position: relative;
  padding: 24px 20px 20px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.paso__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  background: var(--ambar);
  color: #14181f;
  border-radius: 50%;
  font-weight: 800;
  font-size: 1rem;
}
.pasos h3 { font-size: 1rem; margin-bottom: 6px; }
.pasos p { font-size: 0.88rem; color: var(--texto-2); margin: 0; }

/* El rotulo de cada grupo de servicios: Electrónica, Mecánica, Vehículos y
   equipos. Antes las doce tarjetas iban en una rejilla sola y no se distinguia
   qué era de quién, cuando la mitad de ellas son de electrónica y lo que
   diferencia al taller es justamente eso. */
.serv-grupo {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ambar);
  margin: 38px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borde);
}
.serv-grupo:first-of-type { margin-top: 26px; }

.rejilla-servicios + .serv-grupo { margin-top: 42px; }

/* ---------- avisos ---------- */
.avisos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--gap);
}
.aviso {
  padding: 22px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.aviso h4 { color: var(--ambar); margin-bottom: 8px; }
.aviso p { font-size: 0.9rem; color: var(--texto-2); margin: 0; }
.aviso--legal {
  background: var(--ambar-tenue);
  border-color: var(--ambar-borde);
}
/* El aviso de «si algo deja de funcionar, es otra reparación». Se
   diferencia del legal con un borde de aviso, no con un fondo de color:
   los dos son los dos únicos cuadros que no hablan de cómo trabajamos. */
.aviso--consejo {
  background: var(--fondo-3);
  border-color: var(--borde);
  border-left: 3px solid var(--ambar);
}

/* ---------- equipo y perfiles ---------- */
.rejilla-equipo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--gap);
  align-items: start;
}

.rejilla-perfiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  align-items: start;
}

@media (max-width: 820px) {
  .rejilla-perfiles { grid-template-columns: 1fr; }
}

.persona,
.perfil {
  padding: 24px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

/* ---------- contacto dentro de cada persona ---------- */
.persona__contacto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--borde);
}
.persona__para {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.persona__contacto a {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--wa);
  text-decoration: none;
}
.persona__contacto a:hover { text-decoration: underline; }

.persona__ini {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  background: var(--ambar);
  color: #14181f;
  border-radius: 12px;
  font-size: 1.4rem;
  font-weight: 800;
}

.persona h3,
.perfil h3 { margin-bottom: 4px; }
.persona__alias {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--texto-3);
  letter-spacing: 0.02em;
}
.persona__rol {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: var(--ambar);
  font-weight: 600;
}
.persona > p:last-child,
.perfil > p { font-size: 0.9rem; color: var(--texto-2); }

.cualidades { list-style: none; margin: 14px 0; padding: 0; }
.cualidades li { padding: 8px 0; font-size: 0.88rem; color: var(--texto-2); border-bottom: 1px dashed var(--borde); }
.cualidades li:last-child { border-bottom: 0; }
.cualidades b { color: var(--texto); }

/* Lo que cada persona NO hace. Va en las fichas del equipo, que es donde
   se busca a quien escribir: si Iulian no hace mecanica y no lo pone, el
   visitante le escribe y pierde el dia. */
.persona__no {
  margin: 12px 0 0;
  padding: 11px 14px;
  background: rgba(255, 90, 90, 0.08);
  border: 1px solid rgba(255, 90, 90, 0.28);
  border-radius: var(--radio-s);
  font-size: 0.85rem;
  color: var(--texto-2);
  line-height: 1.5;
}
.persona__no b { color: #ff8a8a; }
/* El de Nelly no es un «no hace» sino un «para que», asi que no va en rojo */
.persona__no--info { background: var(--ambar-tenue); border-color: var(--ambar-borde); }
.persona__no--info b { color: var(--ambar); }

/* La cabecera de la seccion de dispositivos: la nota y el contacto de
   Iulian uno al lado del otro. Antes la nota iba sola a todo el ancho y el
   telefono quedaba enterrado mas abajo, en la rejilla de cuatro. */
.dispositivos-cabecera {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  margin: 20px 0 26px;
}
.dispositivos-nota { margin: 0; }
@media (max-width: 620px) { .dispositivos-cabecera { grid-template-columns: 1fr; } }

.dispositivos-contacto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 20px;
  background: var(--fondo-3);
  border: 1px solid var(--ambar-borde);
  border-radius: var(--radio);
  text-decoration: none;
  white-space: nowrap;
}
.dispositivos-contacto:hover { border-color: var(--ambar); text-decoration: none; }
.dispositivos-contacto b {
  font-size: 0.98rem;
  color: var(--texto);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dispositivos-contacto b span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.dispositivos-contacto em {
  font-style: normal;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ambar);
}

.perfil__no,
.perfil__destacado {
  margin: 14px 0 0;
  padding: 13px 16px;
  border-radius: var(--radio-s);
  font-size: 0.86rem;
}
.perfil__no { background: rgba(255, 90, 90, 0.08); border: 1px solid rgba(255, 90, 90, 0.28); color: var(--texto-2); }
.perfil__no b { color: #ff8a8a; }
.perfil__destacado { background: var(--ambar-tenue); border-color: var(--ambar-borde); color: var(--texto-2); }

/* ---------- contacto directo ---------- */
.rejilla-directo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(265px, 100%), 1fr));
  gap: var(--gap);
}
.directo-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.directo-card h3 { margin-bottom: 4px; }
.directo-card > p { font-size: 0.88rem; color: var(--texto-2); }
.directo-card__hor {
  margin: auto 0 14px;
  padding-top: 12px;
  font-size: 0.8rem;
  color: var(--texto-3);
  border-top: 1px solid var(--borde);
}

/* ---------- resenas ---------- */
.resenas-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 28px;
  margin-bottom: 26px;
}
.resenas-cabecera .seccion__titulo { margin-bottom: 0; }

.resenas__resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0;
  font-size: 0.9rem;
  color: var(--texto-2);
}
.resenas__cifra b { font-size: 1.35rem; font-weight: 800; color: var(--texto); }
.resenas__total { color: var(--texto-3); }
.resenas__enlace { font-size: 0.85rem; white-space: nowrap; }

.rejilla-resenas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .rejilla-resenas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rejilla-resenas { grid-template-columns: 1fr; } }
.resena {
  margin: 0;
  padding: 15px 16px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
}
.resena .estrellas { font-size: 0.82rem; letter-spacing: 1.4px; }
.resena blockquote {
  margin: 7px 0 9px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--texto-2);
  font-style: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.resena figcaption { font-size: 0.75rem; color: var(--texto-3); }

.resenas__nota {
  margin: 22px 0 0;
  font-size: 0.82rem;
  color: var(--texto-3);
}
.resenas__nota a { margin-left: 4px; }

/* ---------- contacto ---------- */
.rejilla-contacto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: var(--gap);
}
.contacto-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  text-decoration: none;
  transition: border-color 0.18s, transform 0.15s;
}
.contacto-item:hover {
  border-color: var(--ambar);
  color: var(--texto);
  text-decoration: none;
  transform: translateY(-2px);
}
.contacto-item > span { font-size: 1.4rem; }
.contacto-item b { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ambar); }
.contacto-item small { font-size: 0.88rem; color: var(--texto-2); word-break: break-word; }

.horario-caja {
  margin-top: var(--gap);
  padding: 24px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.horario-caja h3 { display: flex; align-items: center; gap: 9px; }
.horario-caja ul { list-style: none; margin: 0; padding: 0; }
.horario-caja li { padding: 5px 0; font-size: 0.92rem; color: var(--texto-2); }

/* ---------- pagos ---------- */
.pagos {
  margin-top: var(--gap);
  padding: 24px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.pagos h3 { display: flex; align-items: center; gap: 9px; }
.pagos p { font-size: 0.93rem; color: var(--texto-2); margin: 0 0 6px; }
.pagos__no {
  color: var(--texto-3) !important;
  font-size: 0.86rem !important;
}
.pagos__no b { color: #ff8a8a; }

/* ---------- cta ---------- */
.cta {
  padding: 62px 0 70px;
  background:
    radial-gradient(900px 380px at 18% 0%, rgba(255, 176, 32, 0.12), transparent 60%),
    var(--fondo-alt);
  border-bottom: 1px solid var(--borde);
  text-align: center;
}
.cta h2 { max-width: 22ch; margin-inline: auto; margin-bottom: 14px; }
.cta p { max-width: 58ch; margin-inline: auto; color: var(--texto-2); }
.cta .hero__acciones { justify-content: center; margin-top: 26px; }

/* ---------- tabla de "con quien hablo" ----------
   Una tabla de verdad, no cuatro tarjetas. Lo que se busca es saber a quien
   escribir y DE QUE hablarle, y eso son dos columnas: una persona y un
   asunto. Con las tarjetas habia que leerlas todas para deducir a quien
   tocarle. En movil cada fila se apila y rotula sola, sin necesitar dos
   tablas ni repetir el texto. */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tabla-contacto {
  max-width: 940px;
  margin: 26px auto 0;
  text-align: left;
}
.tabla-contacto table {
  width: 100%;
  border-collapse: collapse;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.tabla-contacto thead th {
  padding: 12px 18px;
  background: var(--fondo-4);
  border-bottom: 1px solid var(--borde-claro);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ambar);
  text-align: left;
  white-space: nowrap;
}
.tabla-contacto tbody th,
.tabla-contacto tbody td {
  padding: 16px 18px;
  vertical-align: top;
  border-bottom: 1px solid var(--borde);
  font-size: 0.9rem;
  text-align: left;
}
.tabla-contacto tbody tr:last-child th,
.tabla-contacto tbody tr:last-child td { border-bottom: 0; }

.tabla-contacto tbody th {
  width: 25%;
  min-width: 190px;
  font-weight: 400;
}
.tabla-contacto tbody th b {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--texto);
}
.tabla-contacto tbody th small {
  display: block;
  margin-top: 3px;
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--texto-3);
}
.tabla-contacto tbody td { color: var(--texto-2); }

/* La primera fila es Angel: el texto de arriba ya dice que si es electronica
   se habla con el, y es quien decide el camino en el taller. */
.tabla-contacto__fila--angel th,
.tabla-contacto__fila--angel td { background: rgba(255, 176, 32, 0.06); }

.tabla-contacto__dato {
  width: 190px;
  white-space: nowrap;
}
.tabla-contacto__wa,
.tabla-contacto__tel {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radio-s);
  font-size: 0.84rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s;
}
.tabla-contacto__wa {
  background: var(--wa-tenue);
  border: 1px solid rgba(37, 211, 102, 0.34);
  color: #4ade80;
}
.tabla-contacto__wa:hover { background: rgba(37, 211, 102, 0.2); }
.tabla-contacto__tel {
  margin-top: 8px;
  background: var(--fondo-4);
  border: 1px solid var(--borde-claro);
  color: var(--ambar);
  font-variant-numeric: tabular-nums;
}
.tabla-contacto__tel:hover { border-color: var(--ambar-borde); }

/* En movil no cabe en tres columnas: cada fila se convierte en una ficha y el
   encabezado de cada campo lo pone data-label, que va en el HTML. */
@media (max-width: 720px) {
  .tabla-contacto table,
  .tabla-contacto thead,
  .tabla-contacto thead tr,
  .tabla-contacto tbody,
  .tabla-contacto tbody tr,
  .tabla-contacto tbody th,
  .tabla-contacto tbody td {
    display: block;
    width: auto;
    /* Sin esto el ancho minimo que necesita el escritorio (190 px en la
       columna de contacto) se transmite a la fila y la tabla se sale. */
    min-width: 0;
    max-width: 100%;
  }
  /* El encabezado se apila con las filas, asi que sus th sobran en pantalla.
     Se esconden celda a celda y no el thead entero: con "display:none" en el
     thead, las columnas se pierden tambien para un lector de pantalla, y con
     las celdas fuera de flujo la fila se queda a cero sin empujar la tabla. */
  .tabla-contacto thead th {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tabla-contacto tbody tr { border-bottom: 1px solid var(--borde); }
  .tabla-contacto tbody tr:last-child { border-bottom: 0; }
  .tabla-contacto tbody th {
    padding: 16px 18px 4px;
    border-bottom: 0;
  }
  .tabla-contacto tbody td { padding: 4px 18px; }
  .tabla-contacto tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--texto-3);
  }
  .tabla-contacto__dato { width: auto; white-space: normal; padding-bottom: 18px !important; }
  .tabla-contacto__fila--angel th,
  .tabla-contacto__fila--angel td { background: transparent; }
  .tabla-contacto tbody tr.tabla-contacto__fila--angel { box-shadow: inset 3px 0 0 var(--ambar); }
}

/* el formulario dentro de la seccion de cierre */
.cta .subtitulo { margin-top: 40px; }
.cta__form-intro { max-width: 60ch; margin: 0 auto 20px; font-size: 0.92rem; }
.cta__persona {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  color: var(--texto);
  text-decoration: none;
  transition: border-color 0.18s, transform 0.15s;
}
.cta__persona:hover { border-color: var(--ambar); color: var(--texto); text-decoration: none; transform: translateY(-2px); }
.cta__persona b { font-size: 0.98rem; }
.cta__persona small { font-size: 0.75rem; color: var(--texto-3); }
.cta__persona span { font-size: 0.86rem; color: var(--ambar); font-weight: 600; margin-top: 4px; }
.cta__persona--jelty { border-color: var(--ambar-borde); background: rgba(255, 176, 32, 0.07); }

/* Las cuatro tarjetas se sustituyeron por .tabla-contacto. Estas reglas se
   quedan por si vuelven a usarse en otra pagina; el validador avisa si queda
   alguna etiqueta con la clase vieja sin reglas que la sustained. */

.horario-caja--cta { max-width: 900px; margin: 26px auto 0; text-align: left; }
.horario-filas { display: flex; flex-direction: column; gap: 10px; }
.horario-fila {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--borde);
}
.horario-fila:last-child { border-bottom: 0; padding-bottom: 0; }
.horario-fila__dep { font-size: 0.9rem; font-weight: 700; color: var(--ambar); }
.horario-fila__dia { font-size: 0.9rem; color: var(--texto-2); }
.horario-fila__hora { font-size: 0.9rem; color: var(--texto); font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .horario-fila { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- detalle de cada persona ----------
   La lista larga de lo que hace cada uno va bajo "Ver en detalle", cerrado.
   La pagina se lee de una pasada y el detalle sigue a un clic. */
.persona__mas {
  margin: 12px 0 0;
  border-top: 1px solid var(--borde);
  padding-top: 10px;
}
.persona__mas > summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ambar);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.persona__mas > summary::-webkit-details-marker { display: none; }
.persona__mas > summary::before {
  content: "\25B8";            /* triangulo a la derecha */
  font-size: 0.9em;
}
.persona__mas[open] > summary::before { content: "\25BE"; }  /* hacia abajo */
.persona__mas > summary:hover { color: var(--ambar-claro); }
.persona__mas > summary:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; }
.persona__mas .cualidades { margin-top: 10px; }
.persona__hor {
  font-size: 0.76rem;
  color: var(--texto-3);
  margin-top: 10px;
}

/* ---------- destacados y texto fuerte ---------- */
.destacado--prueba { text-align: left; }
.destacado--prueba h3 { font-size: 1.14rem; }
.pedir-fuerte { color: var(--ambar); }

/* ---------- pilares ---------- */
.seccion--pilares { padding: 42px 0; }

/* ---------- pie ---------- */
.pie { padding: 52px 0 26px; background: #0a0d12; }
.pie__inner {
  display: grid;
  grid-template-columns: minmax(240px, 1.1fr) 2fr;
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--borde);
}
.pie__marca b { font-size: 1.6rem; font-weight: 800; letter-spacing: 0.05em; }
.pie__marca p { margin-top: 8px; font-size: 0.87rem; color: var(--texto-3); max-width: 40ch; }

.pie__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 26px; }
.pie__cols h3 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ambar); margin-bottom: 10px; }
.pie__cols ul { list-style: none; margin: 0; padding: 0; }
.pie__cols li { padding: 3px 0; font-size: 0.87rem; color: var(--texto-3); }
.pie__cols a { color: var(--texto-3); }
.pie__cols a:hover { color: var(--ambar); }

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding-top: 22px;
  font-size: 0.82rem;
  color: var(--texto-3);
}
.pie__legal p { margin: 0; }
.pendiente { color: var(--ambar); font-weight: 600; }

/* ---------- animacion al hacer scroll ---------- */
.revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.revelar.visible { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .pie__inner { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  html { scroll-padding-top: 74px; }

  .menu-btn { display: flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 12px 22px 20px;
    margin: 0;
    background: var(--fondo);
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--shadow);
    /* dvh es la altura real de la ventana en movil: 100vh da demasiado
       cuando el navegador enseña la barra de direcciones */
    max-height: calc(100dvh - 74px);
    overflow-y: auto;
    /* al llegar al final del menu no se sigue moviendo la pagina */
    overscroll-behavior: contain;
  }
  .nav.abierto { display: flex; }
  .nav a { padding: 11px 12px; font-size: 0.95rem; }

  .hero { padding: 44px 0 40px; }
  .hero__ficha { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .puntuacion { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; }

  .seccion { padding: 54px 0; }
  .codigos b { min-width: 0; display: block; margin-bottom: 2px; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .marca__texto small { display: none; }
  .hero__acciones .btn { width: 100%; }
  .pie__legal { flex-direction: column; }
}

/* ---------- cualquier enlace o boton, comodo al dedo ----------
   Sin esto, en el movil los enlaces de texto del cuerpo se pulsan con
   el dedo gordo y fallan. */
@media (hover: none) {
  a[href^="http"],
  a[href^="tel:"],
  a[href^="mailto:"],
  .servicios-extra__lista a,
  .resenas__nota a,
  .pie__cols a,
  .cualidades a,
  .faq summary {
    display: inline-block;
    min-height: var(--tap);
    /* centra la zona pulsable sin mover el texto de sitio */
    padding-block: 10px;
  }
  .pie__cols li a { display: block; }
  .resenas__enlace { min-height: var(--tap); padding-block: 12px; }
  .codigos li,
  .cualidades li { padding-block: 8px; }
}

/* ---------- pantallas muy estrechas (moviles viejos, 320 px) ---------- */
@media (max-width: 360px) {
  :root { --wrap: 1180px; }
  .wrap,
  .cabecera__inner { padding-inline: 16px; }
  .seccion { padding: 44px 0; }
  .form-consulta { padding: 20px 16px; }
  .form-consulta__pie .btn { flex: 1 1 100%; }
  .hero__numero { padding: 12px 14px; }
  .hero__numero a { font-size: 1.32rem; }
  .cta__persona { padding: 12px 14px; }
  .servicios-extra__lista li { padding: 12px 14px; }
  .servicios-extra__lista a { display: inline-block; margin-top: 4px; }
  .tabla-envoltorio { overflow-x: auto; }
}

/* ==========================================================
   FORMULARIO DE WHATSAPP
   Rellena los campos y abre WhatsApp con el mensaje escrito.
   ========================================================== */
.form-consulta {
  max-width: 780px;
  margin: 0 auto;
  padding: 30px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  text-align: left;
}

.form-consulta__cabecera { margin-bottom: 20px; text-align: center; }
.form-consulta__cabecera h3 { margin-bottom: 6px; }
.form-consulta__cabecera p { margin: 0; font-size: 0.9rem; color: var(--texto-2); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.form-grid .campo--ancho { grid-column: 1 / -1; }

@media (max-width: 620px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-consulta { padding: 22px 18px; }
}

.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.campo label .opt { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  /* 16px como minimo: por debajo, iOS hace zoom al enfocar y no se
     vuelve a leer bien el formulario */
  min-height: var(--tap);
  padding: 11px 13px;
  background: var(--fondo);
  border: 1px solid var(--borde-claro);
  border-radius: var(--radio-s);
  color: var(--texto);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  /* evita el zoom automatico en Safari */
  -webkit-appearance: none;
  appearance: none;
}
.campo select {
  /* flecha propia: la nativa se ve casi invisible sobre fondo oscuro */
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--texto-2) 50%),
    linear-gradient(135deg, var(--texto-2) 50%, transparent 50%);
  background-position: right 19px center, right 13px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
/* el desplegable usa fondo propio, asi que sus opciones tambien */
.campo select option { background: var(--fondo-3); color: var(--texto); }
.campo textarea { resize: vertical; min-height: 110px; }
.campo select { cursor: pointer; }
/* La nota que el JavaScript pone bajo el destinatario. Va oculta con hidden
   mientras la lista no se haya recortado, para no repetir lo que ya se ve. */
.campo__nota {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--texto-3);
}
.campo__nota[hidden] { display: none; }
.campo input::placeholder,
.campo textarea::placeholder { color: var(--texto-3); opacity: 0.7; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--ambar); }
.campo :focus-visible { outline: 3px solid var(--ambar); outline-offset: 1px; }

/* el estado de error se marca tambien en el campo, no solo en el aviso */
.campo [aria-invalid="true"] { border-color: #ff6b6b; }

.form-consulta__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.form-consulta__pie .btn { flex: 1 1 220px; }
.form-consulta__nota { margin: 14px 0 0; font-size: 0.8rem; color: var(--texto-3); }

/* ---------- tablas (las de las paginas legales) ---------- */
.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 0.92rem;
}
.legal th,
.legal td {
  padding: 11px 13px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--borde);
}
.legal th {
  background: var(--fondo-3);
  font-weight: 700;
  color: var(--texto);
}
.legal tbody tr:nth-child(even) { background: var(--fondo-2); }
/* en pantallas estrechas la tabla se desplaza en horizontal en vez de
   aplastarse hasta ser ilegible */
.tabla-envoltorio {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 20px;
}
.tabla-envoltorio table { margin-bottom: 0; min-width: 460px; }

/* ---------- sin JavaScript ----------
   El <html> nace con la clase js-off y un script del <head> la cambia por
   js-on. Si el JS no llega, se ven los enlaces a WhatsApp en lugar de un
   boton que no haria nada. */
.js-off .form-consulta__pie,
.js-off .form-consulta__nota { display: none; }
.js-off .solo-sin-js { display: block; }
.js-on .solo-sin-js { display: none; }
.solo-sin-js {
  margin: 18px 0 0;
  padding: 14px 16px;
  background: var(--wa-tenue);
  border: 1px solid rgba(37, 211, 102, 0.4);
  border-radius: var(--radio-s);
  font-size: 0.94rem;
}
.solo-sin-js a { font-weight: 700; }

/* ---------- animacion de entrada ----------
   .revelar solo oculta si hay JS activo. Asi el contenido nunca se queda
   invisible por un fallo del script. */
.js-on .revelar { opacity: 0; transform: translateY(14px); }
.js-on .revelar.visible { opacity: 1; transform: none; }

/* aviso de error, solo visible si falta algun campo */
.form-error {
  display: none;
  margin: 0 0 16px;
  padding: 11px 15px;
  background: rgba(255, 90, 90, 0.1);
  border: 1px solid rgba(255, 90, 90, 0.35);
  border-radius: var(--radio-s);
  color: #ffb3b3;
  font-size: 0.86rem;
}
.form-error.visible { display: block; }

/* ==========================================================
   BOTON DE IDIOMA
   ========================================================== */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: var(--fondo-3);
  border: 1px solid var(--borde-claro);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--texto-2);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.lang:hover {
  background: var(--ambar-tenue);
  border-color: var(--ambar);
  color: var(--ambar);
  text-decoration: none;
}
.lang__globo { font-size: 0.95rem; line-height: 1; }
.lang__texto { display: inline-block; }
/* La version corta solo se ve cuando el nombre completo de la cabecera
   ("TalleresAMG") deja al boton sin sitio. En escritorio no hace falta. */
.lang__corto { display: none; }

@media (max-width: 860px) {
  .lang { padding: 6px 12px; font-size: 0.78rem; }
}

/* "TalleresAMG" es bastante mas ancho que "AMG": con la marca, el boton de
   idioma y el de menu no cabian a 320 px. Aqui se encoge el nombre, se
   recortan los huecos y el idioma pasa a "EN". El boton de menu se queda en
   44 px porque es la zona tactil minima. */
@media (max-width: 440px) {
  .cabecera__inner { gap: 10px; padding-inline: 14px; }
  .marca { gap: 9px; min-width: 0; }
  .marca__img { width: 34px; height: 34px; }
  .marca__texto b { font-size: 1rem; letter-spacing: 0.02em; }
  .marca__texto small { font-size: 0.6rem; }
  .lang { padding: 6px 10px; gap: 5px; }
  .lang__texto { display: none; }
  .lang__corto { display: inline-block; font-weight: 700; }
}

@media (max-width: 860px) {
  /* en movil, el boton va pegado al boton de menu */
  .cabecera__inner { position: relative; }
  .cabecera__lang { margin-left: auto; }
  .menu-btn { margin-left: 0; }
}

@media (min-width: 861px) {
  .nav { margin-left: auto; }
  .cabecera__lang { margin-left: 0; }
}

/* ==========================================================
   PAGINAS DE SERVICIO
   ========================================================== */
.servicio-hero {
  padding: 54px 0 46px;
  background:
    radial-gradient(900px 400px at 80% -10%, rgba(255, 176, 32, 0.1), transparent 62%),
    linear-gradient(180deg, var(--fondo-alt), var(--fondo));
  border-bottom: 1px solid var(--borde);
}
.servicio-hero__miga {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
  font-size: 0.78rem;
  color: var(--texto-3);
}
.servicio-hero__miga a { color: var(--texto-3); }
.servicio-hero__miga a:hover { color: var(--ambar); }
.servicio-hero h1 { max-width: 22ch; margin-bottom: 16px; }
.servicio-hero__lead { max-width: 64ch; font-size: 1.05rem; color: var(--texto-2); margin-bottom: 24px; }

/* resumen en tres puntos clave */
.servicio-claves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: var(--gap);
  margin-top: 28px;
}
.servicio-claves article {
  padding: 20px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.servicio-claves h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.98rem;
  color: var(--ambar);
  margin-bottom: 6px;
}
.servicio-claves p { margin: 0; font-size: 0.88rem; color: var(--texto-2); }

/* contenido en dos columnas: texto y aside */
.servicio-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
@media (max-width: 900px) { .servicio-cols { grid-template-columns: 1fr; } }

.servicio-aside {
  position: sticky;
  top: 92px;
  padding: 22px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.servicio-aside h3 { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ambar); }
.servicio-aside ul { list-style: none; margin: 0 0 18px; padding: 0; }
.servicio-aside li { padding: 6px 0; font-size: 0.88rem; color: var(--texto-2); border-bottom: 1px dashed var(--borde); }
.servicio-aside li:last-child { border-bottom: 0; }
.servicio-aside .btn { width: 100%; }

@media (max-width: 900px) { .servicio-aside { position: static; } }

/* pasos del servicio */
.pasos-servicio { counter-reset: ps; list-style: none; margin: 0; padding: 0; }
.pasos-servicio li {
  position: relative;
  counter-increment: ps;
  padding: 0 0 22px 46px;
  border-left: 2px solid var(--borde);
  margin-left: 15px;
}
.pasos-servicio li:last-child { border-left-color: transparent; padding-bottom: 0; }
.pasos-servicio li::before {
  content: counter(ps);
  position: absolute;
  left: -16px;
  top: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--ambar);
  color: #14181f;
  border-radius: 50%;
  font-size: 0.88rem;
  font-weight: 800;
}
.pasos-servicio h3 { margin-bottom: 4px; font-size: 1rem; }
.pasos-servicio p { margin: 0; font-size: 0.9rem; color: var(--texto-2); }

/* avisos destacados dentro del servicio */
.aviso-destacado {
  margin: 24px 0;
  padding: 20px 22px;
  background: var(--ambar-tenue);
  border: 1px solid var(--ambar-borde);
  border-radius: var(--radio);
}
.aviso-destacado h3 { color: var(--ambar); font-size: 1rem; }
.aviso-destacado p { margin: 0; font-size: 0.9rem; color: var(--texto-2); }

/* preguntas frecuentes */
.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  overflow: hidden;
}
.faq summary {
  padding: 15px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--texto);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ambar);
  transition: transform 0.2s;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--ambar); }
.faq details > div { padding: 0 18px 17px; }
.faq details > div p { margin: 0; font-size: 0.9rem; color: var(--texto-2); }

/* enlaces a otras paginas de servicio */
.servicios-relacionados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 12px;
}
.servicios-relacionados a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 16px;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  color: var(--texto-2);
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 0.18s, color 0.18s, transform 0.15s;
}
.servicios-relacionados a:hover { border-color: var(--ambar); color: var(--ambar); transform: translateY(-1px); text-decoration: none; }
.servicios-relacionados a::before { content: "\2192"; color: var(--ambar); }

/* ---------- impresion ---------- */
@media print {
  .cabecera, .cta, .hero__acciones, .pie__cols, .lang, .form-consulta, .menu-btn { display: none; }
  body { background: #fff; color: #000; }
  .seccion { page-break-inside: avoid; }
  .revelar { opacity: 1 !important; transform: none !important; }
  .faq details > div { display: block; }
}