/* ============================================================
   ESPADA LLAVES Y MANDOS — Collado Villalba
   Web genuina: no comparte maqueta con Estética Sofía ni con Il Tizzone.
   Todo sale de SU material: el rojo y el negro son los de su logotipo, los
   servicios los de su tarjeta de visita, y el tono es de usted porque así
   escriben ellos ("Gracias por su paciencia", "Encargue ahora").

   El encargo manda sobre la estética: quien busca esto ha perdido la llave
   del coche y tiene prisa. Por eso el teléfono es lo más grande de la página.
   ============================================================ */

/* Barlow: grotesca de señalética, con aire de matrícula y de rótulo de taller.
   La condensada para los titulares grandes, que en automoción se lee como
   panel informativo y no como revista. */
@font-face {
  font-family: 'Barlow';
  src: url('fonts/barlow.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'BarlowC';
  src: url('fonts/barlow-cond.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ---------- OSCURO, de taller (por defecto) ---------- */
  --fondo: #121214;
  --panel: #1b1b1e;      /* superficies elevadas */
  --panel2: #26262a;     /* un escalón más, para el hover */
  --tinta: #f2f0ec;
  --gris: #9b9791;       /* texto secundario */
  --rojo: #e8412a;       /* EL de su logotipo */
  --rojo-vivo: #ff5a3d;  /* el mismo, subido para que se lea sobre oscuro */
  --linea: rgba(242, 240, 236, 0.14);
  --sombra: rgba(0, 0, 0, 0.6);
  --logo-fondo: transparent;

  --texto: 'Barlow', system-ui, -apple-system, sans-serif;
  --titular: 'BarlowC', 'Barlow', system-ui, sans-serif;
  --ancho: 1280px;
}

/* ---------- CLARO, de tarjeta de visita ----------
   Su tarjeta impresa es blanca con negro y rojo. Aquí es lo mismo. El rojo
   baja de tono porque el #ff5a3d sobre blanco no llega al contraste mínimo. */
[data-tema="claro"] {
  --fondo: #f7f6f4;
  --panel: #ffffff;
  --panel2: #efedea;
  --tinta: #16161a;
  --gris: #6b6660;
  --rojo: #d2361f;
  --rojo-vivo: #c22f19;
  --linea: rgba(22, 22, 26, 0.16);
  --sombra: rgba(40, 30, 25, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--rojo-vivo); outline-offset: 3px; }

.envoltura { width: min(100% - 2.4rem, var(--ancho)); margin-inline: auto; }

h1, h2, h3 {
  font-family: var(--titular);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  margin: 0;
}
h2 { font-size: clamp(2.1rem, 4.8vw, 3.7rem); margin-bottom: 1.1rem; }
p { margin: 0 0 1rem; }
.guia { color: var(--gris); font-size: 1.05rem; max-width: 50ch; }

/* Rótulo de sección con la llave del logotipo como viñeta */
.rotulo {
  font-family: var(--texto);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rojo-vivo);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.rotulo::before {
  content: '';
  width: 26px;
  height: 8px;
  background: var(--rojo-vivo);
  /* silueta de llave, como la del coche de su logotipo */
  clip-path: polygon(0 40%, 62% 40%, 62% 0, 78% 0, 78% 40%, 88% 40%, 100% 50%, 88% 60%, 0 60%);
  flex: none;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0 1.8rem;
  border: 2px solid var(--rojo);
  border-radius: 3px;
  background: var(--rojo);
  color: #fff;
  font-family: var(--texto);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -10px var(--rojo); }
.boton--hueco { background: transparent; color: var(--tinta); border-color: var(--linea); }
.boton--hueco:hover { border-color: var(--rojo); box-shadow: none; }

/* ============================================================
   CABECERA — el teléfono siempre a la vista, que es a lo que se viene
   ============================================================ */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0.7rem clamp(1rem, 3vw, 2.2rem);
  background: color-mix(in srgb, var(--fondo) 94%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.cabecera--fija { border-bottom-color: var(--linea); }
.marca { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.marca img { height: 54px; width: auto; }
/* El nombre en texto al lado: el logotipo lleva "LLAVES & MANDOS" en arco y a
   tamaño de cabecera ese texto es ilegible. */
.marca__txt { display: flex; flex-direction: column; line-height: 1.1; }
.marca__txt b { font-family: var(--titular); font-size: 1.12rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.marca__txt span { font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gris); }
@media (max-width: 560px) { .marca__txt { display: none; } }
.cabecera__der { display: flex; align-items: center; gap: 0.6rem; }

.tel-cab {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--titular);
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--tinta);
  padding: 0.3rem 0.2rem;
  transition: color 0.2s ease;
}
.tel-cab:hover { color: var(--rojo-vivo); }
.tel-cab svg { width: 20px; height: 20px; color: var(--rojo-vivo); flex: none; }

.tema {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 3px;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.tema:hover { border-color: var(--rojo); }
.tema svg { width: 18px; height: 18px; }
.tema__luna { display: none; }
[data-tema="claro"] .tema__sol { display: none; }
[data-tema="claro"] .tema__luna { display: block; }

/* ============================================================
   PORTADA
   Las rayas diagonales de taller se quitaron: eran un adorno genérico que no
   decía nada de ellos. En su lugar manda SU foto —mandos sobre el rojo de la
   marca, con el llavero del cochecito que repite el coche del logotipo— a
   sangre, de borde a borde y sin marco.
   ============================================================ */
.portada {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: stretch;
  min-height: calc(100svh - 72px);
  overflow: hidden;
}
.portada__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.2rem, 5vw, 4.6rem) clamp(1.2rem, 4vw, 4.4rem);
}
.portada h1 {
  font-size: clamp(2.8rem, 7vw, 6.2rem);
  line-height: 0.92;
  margin-bottom: 1.2rem;
}
.portada h1 em { font-style: normal; color: var(--rojo-vivo); }
.portada__bajada {
  color: var(--gris);
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  max-width: 42ch;
  margin-bottom: 1.9rem;
}

/* La foto a sangre. Sin marco, sin borde y sin esquinas redondeadas: es la
   pared roja del taller entrando en la página. */
.portada__foto { position: relative; overflow: hidden; background: var(--rojo); }
/* La imagen ya viene recortada a la relación de esta columna, así que 'cover'
   no descarta nada. Se probó subir el encuadre con object-position y no hacía
   nada: al ser la foto más ancha en proporción, el recorte cae por los lados. */
.portada__foto img { width: 100%; height: 100%; object-fit: cover; }
/* Un degradado muy corto en el borde izquierdo funde la foto con el fondo, para
   que no parezca una imagen pegada encima. */
.portada__foto::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 90px;
  background: linear-gradient(90deg, var(--fondo), transparent);
  z-index: 2;
}

/* EL TELÉFONO. Es el objeto principal de la página, no un dato de contacto. */
.telefonazo {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.8rem;
  border: 2px solid var(--rojo);
  border-radius: 3px;
  background: color-mix(in srgb, var(--rojo) 12%, transparent);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.telefonazo:hover { background: color-mix(in srgb, var(--rojo) 22%, transparent); transform: translateY(-2px); }
.telefonazo small {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rojo-vivo);
}
.telefonazo b {
  font-family: var(--titular);
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.portada__acciones { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }

/* ============================================================
   EL DENTADO — el elemento firma
   Sustituye a las diagonales. Es el perfil de una llave, dibujado a CSS, y
   separa las secciones. Sale de lo que ellos venden, no de una plantilla.
   ============================================================ */
.dentado {
  height: 14px;
  background: var(--rojo);
  --p: 22px;
  clip-path: polygon(
    0 100%, 0 40%, calc(var(--p)*1) 40%, calc(var(--p)*1) 0, calc(var(--p)*2) 0,
    calc(var(--p)*2) 40%, calc(var(--p)*3) 40%, calc(var(--p)*3) 0, calc(var(--p)*4) 0,
    calc(var(--p)*4) 55%, calc(var(--p)*5) 55%, calc(var(--p)*5) 0, calc(var(--p)*6) 0,
    calc(var(--p)*6) 40%, 100% 40%, 100% 100%);
}

@media (max-width: 940px) {
  .portada { grid-template-columns: 1fr; min-height: 0; }
  .portada__foto { height: 46svh; order: -1; }
  .portada__foto::before { inset: auto 0 0 0; width: auto; height: 70px;
    background: linear-gradient(0deg, var(--fondo), transparent); }
}

/* ============================================================
   FRANJA DE DATOS
   ============================================================ */
.franja { border-block: 1px solid var(--linea); background: var(--panel); }
.franja__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--linea); }
.dato { background: var(--panel); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 0.2rem; }
.dato b { font-family: var(--titular); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; line-height: 1; color: var(--rojo-vivo); }
.dato span { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); }
.dato .estrellas { color: var(--rojo-vivo); letter-spacing: 2px; font-size: 0.88rem; }

/* ============================================================
   SERVICIOS — los seis de su tarjeta de visita
   ============================================================ */
.servicios { padding-block: clamp(3.4rem, 7vw, 5.6rem); }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 4px; overflow: hidden; margin-top: 2.4rem; }
.tarjeta { background: var(--fondo); padding: 1.9rem 1.7rem; display: flex; flex-direction: column; gap: 0.7rem; transition: background 0.25s ease; }
.tarjeta:hover { background: var(--panel); }
.tarjeta__n { font-family: var(--titular); font-size: 0.9rem; font-weight: 700; color: var(--rojo-vivo); letter-spacing: 0.1em; }
.tarjeta h3 { font-size: 1.42rem; }
.tarjeta p { font-size: 0.94rem; color: var(--gris); margin: 0; }

/* ============================================================
   MARCAS — los NOMBRES, no los logotipos: reproducir el logo de Audi o BMW
   en la web de un tercero es riesgo de marca; citarlas por nombre para decir
   para quién trabajas es uso legítimo.
   ============================================================ */
.marcas { background: var(--panel); border-block: 1px solid var(--linea); padding-block: clamp(3rem, 6vw, 4.6rem); }
.marcas__lista { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }
.marca-pill {
  font-family: var(--titular);
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.55rem 1.2rem;
  border: 1px solid var(--linea);
  border-radius: 3px;
  color: var(--tinta);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.marca-pill:hover { border-color: var(--rojo); color: var(--rojo-vivo); }
.marca-pill--mas { border-style: dashed; color: var(--gris); }

/* ============================================================
   QUÉ TRAER — el objeto útil de la página. Lo que nadie te cuenta
   hasta que llegas al mostrador.
   ============================================================ */
.traer { padding-block: clamp(3.4rem, 7vw, 5.6rem); }
.traer__rejilla { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 940px) { .traer__rejilla { grid-template-columns: 1fr; } }
.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
.lista-check li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; padding-bottom: 0.9rem; border-bottom: 1px solid var(--linea); }
.lista-check li::before {
  content: '';
  width: 22px; height: 22px;
  border: 2px solid var(--rojo);
  border-radius: 3px;
  background: color-mix(in srgb, var(--rojo) 18%, transparent);
  flex: none;
  margin-top: 0.15rem;
}
.lista-check b { display: block; font-weight: 600; }
.lista-check span { color: var(--gris); font-size: 0.93rem; }

/* ============================================================
   EL OFICIO
   ============================================================ */
.oficio { background: var(--panel); border-block: 1px solid var(--linea); }
.oficio__rejilla { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.oficio__foto { height: 100%; min-height: 380px; }
.oficio__foto img { width: 100%; height: 100%; object-fit: cover; }
.oficio__texto { padding: clamp(2.4rem, 5vw, 4.4rem); }
@media (max-width: 940px) { .oficio__rejilla { grid-template-columns: 1fr; } }

/* ============================================================
   VISITA — horario y dónde. Importante: solo abren por las mañanas.
   ============================================================ */
.visita { padding-block: clamp(3.4rem, 7vw, 5.6rem); }
.visita__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 940px) { .visita__rejilla { grid-template-columns: 1fr; } }
.horario { border-collapse: collapse; width: 100%; max-width: 26rem; margin-top: 1.6rem; }
.horario th { text-align: left; font-weight: 400; padding: 0.55rem 0; border-bottom: 1px solid var(--linea); }
.horario td { text-align: right; padding: 0.55rem 0; border-bottom: 1px solid var(--linea); font-variant-numeric: tabular-nums; font-weight: 600; }
.horario tr.cerrado th, .horario tr.cerrado td { color: var(--gris); font-weight: 400; }
.aviso-horario a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0.15rem 0.2rem;
  font-weight: 700;
  color: var(--rojo-vivo);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}
.aviso-horario {
  margin-top: 1.4rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--rojo);
  background: color-mix(in srgb, var(--rojo) 8%, transparent);
  font-size: 0.94rem;
}
.ficha { display: grid; gap: 1.2rem; margin: 1.8rem 0 0; }
.ficha > div { padding-bottom: 1.2rem; border-bottom: 1px solid var(--linea); }
.ficha dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris); margin-bottom: 0.2rem; }
.ficha dd { margin: 0; font-size: 1.1rem; }
.ficha dd a { text-decoration: none; border-bottom: 2px solid var(--linea); }
.ficha dd a:hover { border-color: var(--rojo); color: var(--rojo-vivo); }

.mapa { min-height: 340px; border: 1px solid var(--linea); border-radius: 4px; overflow: hidden; background: var(--panel); }
.mapa iframe { width: 100%; height: 100%; min-height: 340px; border: 0; }
.mapa__aviso {
  width: 100%; min-height: 340px; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.55rem; padding: 2rem; border: 0; background: var(--panel);
  font-family: var(--texto); font-size: 0.9rem; color: var(--gris);
  text-align: center; cursor: pointer; transition: background 0.25s ease;
}
.mapa__aviso:hover { background: var(--panel2); }
.mapa__aviso b { font-family: var(--titular); font-size: 1.3rem; font-weight: 700; color: var(--tinta); text-transform: uppercase; }
.mapa__aviso svg { width: 28px; height: 28px; color: var(--rojo-vivo); }

/* ============================================================
   CIERRE
   ============================================================ */
.cierre { border-top: 1px solid var(--linea); padding-block: clamp(3rem, 7vw, 5rem); text-align: center; background: var(--panel); }
.cierre h2 { max-width: 18ch; margin-inline: auto; }
.cierre .guia { margin: 1.2rem auto 2rem; }
.cierre .telefonazo { align-items: center; }

/* ============================================================
   PIE
   ============================================================ */
.pie { border-top: 1px solid var(--linea); padding-block: 2.4rem 1.8rem; }
.pie__rejilla { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: center; }
.pie__legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.pie__legal a { font-size: 0.84rem; color: var(--gris); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
.pie__legal a:hover { color: var(--rojo-vivo); }
.pie__nota { margin: 1.8rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--linea); font-size: 0.82rem; color: var(--gris); }

/* Botón flotante de llamar: aquí lo urgente es el teléfono, no WhatsApp */
.llamar {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 70;
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--rojo); color: #fff;
  box-shadow: 0 10px 26px -8px var(--sombra);
  transition: transform 0.2s ease;
}
.llamar:hover { transform: scale(1.06); }
.llamar svg { width: 26px; height: 26px; }

/* ============================================================
   MOVIMIENTO — sobrio
   ============================================================ */
.revela { opacity: 0; transform: translateY(20px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); }
.revela.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revela { opacity: 1; transform: none; transition: none; }
  .boton:hover, .llamar:hover, .telefonazo:hover { transform: none; }
}

/* ============================================================
   MÓVIL — el teléfono no puede encogerse: es a lo que se viene
   ============================================================ */
@media (max-width: 720px) {
  .cabecera { padding: 0.6rem 0.9rem; gap: 0.5rem; }
  .marca img { height: 36px; }
  .tel-cab { font-size: 1.15rem; }
  .tel-cab span { display: none; }
  .tema { width: 38px; height: 38px; }
  .rotulo { font-size: 0.78rem; }
  .dato span, .ficha dt, .pie__legal a, .pie__nota { font-size: 0.84rem; }
  .tarjeta p { font-size: 0.96rem; }
  .lista-check span { font-size: 0.95rem; }
}

/* El logotipo tiene dos versiones porque su tinta es negra: sobre el fondo
   oscuro de la web ese negro desaparece y solo quedaría la llave roja. */
.marca .logo-oscuro { display: block; }
.marca .logo-claro { display: none; }
[data-tema="claro"] .marca .logo-oscuro { display: none; }
[data-tema="claro"] .marca .logo-claro { display: block; }