/* Galga · taller mecánico en Vitoria-Gasteiz (concepto WEBO). Honesto y técnico, sin nada de «tuning»:
   acero claro, grafito y el azul marino del mono de trabajo como único acento.
   Regla de formas: todo a 3 px (precisión de taller); la galga (hojas en abanico) es el único gesto gráfico.
   Movimiento (5/10, preciso y mecánico): medir antes de cambiar. Momento firma: el presupuesto de ejemplo se imprime
   línea a línea y la base, el IVA y el total se suman en vivo. Alrededor: la galga del logo abre sus hojas, el filo del
   titular se mide, una corredera recorre la regla de «Cómo trabajamos» y los filetes de los servicios se trazan. */

@font-face { font-family: "Barlow"; src: url("/assets/fonts/conceptos/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/conceptos/barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/conceptos/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/conceptos/barlow-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --acero: #E9ECEE;
  --acero-2: #DADFE3;
  --blanco: #F8F9FA;
  --grafito: #15191E;
  --grafito-2: #20262D;
  --gris: #4F5862;
  --gris-claro: #A9B2BB;
  --azul: #1E4DA1;
  --azul-hondo: #173E84;
  --azul-claro: #8FB0EA;
  --hilo: rgb(21 25 30 / .14);
  --hilo-claro: rgb(233 236 238 / .16);
  --fuente: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --margen: clamp(20px, 5vw, 72px);
  --r: 3px;
}

html { background: var(--acero); scroll-behavior: smooth; scrollbar-color: var(--gris-claro) var(--acero); }
body {
  background: var(--acero); color: var(--grafito);
  font: 400 1.0625rem/1.6 var(--fuente);
  font-kerning: normal; font-variant-numeric: lining-nums;
}
::selection { background: var(--azul); color: var(--blanco); }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: var(--r); }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
.marco { width: min(100% - 2 * var(--margen), 1296px); margin-inline: auto; }

.saltar {
  position: absolute; left: 16px; top: 16px; z-index: 50;
  padding: 10px 16px; border-radius: var(--r); background: var(--blanco); color: var(--grafito); text-decoration: none; font-weight: 500;
  transform: translateY(-180%);
}
.saltar:focus-visible { transform: none; }

.slot { position: relative; overflow: hidden; margin: 0; isolation: isolate; }
.slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot:has(> img) > .esc { display: none; }
.esc { position: absolute; pointer-events: none; }

/* Botones y enlaces */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--r);
  background: var(--azul); color: #fff;
  font: 600 1rem/1 var(--fuente); letter-spacing: .01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 180ms ease, transform 140ms var(--ease);
}
.boton:active { transform: scale(.97); }
.boton--borde { min-height: 44px; padding: 0 18px; background: rgb(21 25 30 / .35); box-shadow: inset 0 0 0 1px rgb(233 236 238 / .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.enlace {
  color: inherit; font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
  text-decoration-color: rgb(233 236 238 / .5);
  transition: text-decoration-color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: #2758B3; }
  .boton--borde:hover { background: rgb(21 25 30 / .6); }
  .enlace:hover { text-decoration-color: currentColor; }
  .cabecera__nav a:hover { color: #fff; text-decoration-color: rgb(233 236 238 / .6); }
  .marca:hover .hoja-2 { transform: rotate(-30deg); }
  .marca:hover .hoja-3 { transform: rotate(-52deg); }
}

/* Cabecera sobre la foto */
.cabecera {
  position: absolute; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: center; gap: clamp(20px, 3vw, 44px);
  padding: clamp(16px, 2.4vw, 28px) var(--margen);
  color: var(--acero);
}
.marca { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: inherit; text-decoration: none; }
.marca__galga { width: 34px; height: 34px; flex: none; fill: var(--acero); }
.marca__hoja { fill: var(--azul-claro); }
/* Las hojas de la galga giran sobre su eje (8, 23.7); el CSS manda sobre el atributo transform */
.marca__galga rect { transform-origin: 8px 23.7px; transform-box: view-box; transition: transform 320ms var(--ease); }
.marca__galga .hoja-1 { transform: rotate(-8deg); }
.marca__galga .hoja-2 { transform: rotate(-26deg); }
.marca__galga .hoja-3 { transform: rotate(-44deg); }
.marca__eje { fill: var(--grafito); stroke: var(--acero); stroke-width: 1.2; }
.marca__nombre { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.marca__apellido { padding-left: 10px; border-left: 1px solid rgb(233 236 238 / .35); font-size: .9375rem; color: rgb(233 236 238 / .8); line-height: 1.1; }
.cabecera__nav ul { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.cabecera__nav a {
  font-size: .9375rem; font-weight: 500; color: rgb(233 236 238 / .85);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 7px; text-decoration-thickness: 1px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

/* Portada a sangre: el taller por dentro */
.portada {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; min-height: 100dvh;
  display: grid; align-items: end;
  padding: 136px var(--margen) clamp(56px, 9vh, 104px);
  color: var(--acero);
  background: var(--grafito);
}
.slot--taller > img { object-position: 40% 50%; }
.slot--taller {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #14181D 0%, #232A32 34%, #353D46 57%, #49525C 57.3%, #3B434C 100%);
}
.slot--taller::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgb(15 18 22 / .95) 0%, rgb(15 18 22 / .84) 38%, rgb(15 18 22 / .5) 56%, rgb(15 18 22 / 0) 74%),
    linear-gradient(0deg, rgb(15 18 22 / .75) 0%, transparent 40%),
    linear-gradient(180deg, rgb(15 18 22 / .75) 0%, transparent 20%);
}
.portada__texto { max-width: 1000px; }
.portada h1 {
  font-size: clamp(2.75rem, 5.2vw, 4.75rem); font-weight: 600; line-height: 1; letter-spacing: -.025em;
  color: #fff;
}
.portada h1 span { display: block; }
.portada h1 .linea + .linea { color: #BCC4CC; }
/* El filo: una hoja de galga que se mide bajo el titular */
.portada__filo {
  display: block; width: min(320px, 60%); height: 10px; margin-top: clamp(24px, 2.6vw, 32px);
  background:
    repeating-linear-gradient(90deg, rgb(233 236 238 / .55) 0 1px, transparent 1px 16px) 0 0 / 100% 6px no-repeat,
    linear-gradient(var(--azul-claro), var(--azul-claro)) 0 100% / 100% 2px no-repeat;
  transform-origin: left center;
}
.portada__sub { max-width: 42ch; margin-top: 20px; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: rgb(233 236 238 / .86); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(28px, 3vw, 40px); }
.portada :focus-visible { outline-color: var(--acero); }

/* Entrada (solo con html.mov): el titular sube línea a línea tras su máscara, el filo se mide de izquierda a
   derecha (las marcas se descubren, no se estiran) y la galga del logo abre sus hojas. */
.portada h1 .linea { overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
html.mov .portada h1 .linea > span { animation: galga-linea 900ms var(--ease) 120ms backwards; }
html.mov .portada h1 .linea + .linea > span { animation-delay: 230ms; }
html.mov .portada__filo { animation: galga-mide 1000ms cubic-bezier(.77, 0, .175, 1) 420ms backwards; }
html.mov .portada__sub { animation: galga-sube 800ms var(--ease) 560ms backwards; }
html.mov .acciones { animation: galga-sube 800ms var(--ease) 640ms backwards; }
html.mov .marca__galga .hoja-2, html.mov .marca__galga .hoja-3 { animation: galga-abanico 700ms cubic-bezier(.32, .72, 0, 1) 300ms backwards; }
html.mov .marca__galga .hoja-3 { animation-delay: 380ms; }
@keyframes galga-linea { from { transform: translateY(105%); } }
@keyframes galga-sube { from { opacity: 0; transform: translateY(16px); } }
@keyframes galga-mide { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes galga-abanico { from { transform: rotate(-8deg); } }

/* Cómo trabajamos: la regla */
.como { padding: clamp(88px, 10vw, 144px) 0 clamp(72px, 8vw, 120px); }
.como__cabeza, .regla-marco { width: min(100% - 2 * var(--margen), 1296px); margin-inline: auto; }
.regla-marco { position: relative; margin-top: clamp(48px, 6vw, 80px); }
.como h2, .presupuesto h2, .servicios h2, .cita h2 { font-size: clamp(2.125rem, 3.6vw, 3.25rem); line-height: 1.04; letter-spacing: -.02em; }
.como__cabeza p { margin-top: 14px; max-width: 46ch; font-size: 1.125rem; color: var(--gris); }
.regla {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 2.6vw, 40px);
  padding-top: 44px;
}
/* Corredera: solo existe con movimiento (galga.js la mueve con el scroll) */
.regla__avance, .regla__cursor { display: none; position: absolute; z-index: 1; pointer-events: none; }
html.mov-listo .regla__avance, html.mov-listo .regla__cursor { display: block; }
.regla__avance { left: 0; right: 0; top: 0; height: 3px; background: var(--azul); transform-origin: 0 50%; transform: scaleX(0); }
.regla__cursor { left: -1px; top: -10px; width: 2px; height: 40px; background: var(--azul); }
.regla__cursor::before { content: ""; position: absolute; left: -4px; top: 0; width: 10px; height: 7px; border-radius: 1px; background: var(--azul); }
/* Escala: milímetros, y una marca larga cada diez */
.regla::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px;
  background:
    repeating-linear-gradient(90deg, var(--grafito) 0 1px, transparent 1px 64px) 0 0 / 100% 22px no-repeat,
    repeating-linear-gradient(90deg, rgb(21 25 30 / .45) 0 1px, transparent 1px 6.4px) 0 0 / 100% 10px no-repeat,
    linear-gradient(var(--grafito), var(--grafito)) 0 0 / 100% 1px no-repeat;
}
.paso { position: relative; }
.paso::before { content: ""; position: absolute; left: 0; top: -44px; width: 3px; height: 30px; background: var(--azul); transition: background-color 240ms ease; }
html.mov-listo .paso:not(.es-medido)::before { background: var(--gris-claro); }
.paso__num { display: block; font-size: 1rem; font-weight: 600; color: var(--azul); font-variant-numeric: tabular-nums; }
.paso h3 { margin-top: 6px; font-size: clamp(1.375rem, 1.8vw, 1.625rem); line-height: 1.15; letter-spacing: -.01em; }
.paso p { margin-top: 10px; max-width: 30ch; color: var(--gris); }

/* El presupuesto, línea a línea */
.presupuesto {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 112px); align-items: center;
  padding: clamp(72px, 9vw, 128px) max(var(--margen), calc((100% - 1296px) / 2));
  background: var(--acero-2);
}
.presupuesto__texto > p { margin-top: 16px; max-width: 42ch; font-size: 1.125rem; color: var(--gris); }
.compromisos { margin-top: clamp(28px, 3vw, 40px); }
.compromisos li { position: relative; padding: 13px 0 13px 28px; border-top: 1px solid var(--hilo); font-weight: 500; }
.compromisos li::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 2px; background: var(--azul); }

.hoja {
  margin: 0; padding: clamp(24px, 3vw, 44px);
  background: var(--blanco); border-radius: var(--r);
  box-shadow: 0 1px 2px rgb(21 25 30 / .08), 0 30px 60px -34px rgb(21 25 30 / .45);
  font-variant-numeric: tabular-nums;
}
.hoja__cabeza { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: start; padding-bottom: 18px; border-bottom: 2px solid var(--grafito); }
.hoja__titulo { font-size: 1.625rem; font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.hoja__sello {
  grid-row: span 2; align-self: start;
  padding: 6px 12px; border: 1.5px solid var(--azul); border-radius: var(--r);
  color: var(--azul); font-size: .875rem; font-weight: 600; letter-spacing: .02em;
  transform: rotate(-4deg);
}
.hoja__coche { font-size: .9375rem; color: var(--gris); line-height: 1.4; }
.hoja__motivo, .hoja__espera { margin-top: 18px; font-size: .9375rem; color: var(--gris); }
.hoja__motivo b, .hoja__espera b { display: block; margin-bottom: 2px; color: var(--grafito); font-weight: 600; }
.hoja__tabla { width: 100%; margin-top: 18px; border-collapse: collapse; }
.hoja__tabla thead th { padding: 0 0 8px; font-size: .8125rem; font-weight: 500; color: var(--gris); text-align: left; border-bottom: 1px solid var(--hilo); }
.hoja__tabla thead th:last-child, .hoja__tabla td:last-child { text-align: right; white-space: nowrap; }
.hoja__tabla tbody td { padding: 12px 0; border-bottom: 1px solid var(--hilo); }
.hoja__tabla tbody td:first-child { padding-right: 16px; }
.hoja__tabla tfoot th { padding: 8px 0 0; font-weight: 400; color: var(--gris); text-align: left; }
.hoja__tabla tfoot td { padding: 8px 0 0; }
.hoja__tabla tfoot tr:first-child > * { padding-top: 14px; }
.hoja__total > * { padding-top: 12px !important; font-size: 1.25rem; font-weight: 700 !important; color: var(--grafito) !important; }
.hoja__espera { padding: 14px 16px; border-radius: var(--r); background: #E6ECF7; color: #33405A; }
.hoja__espera b { color: var(--azul-hondo); }

/* Servicios con la foto del banco */
.servicios {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: stretch;
  width: min(100% - 2 * var(--margen), 1296px); margin-inline: auto;
  padding: clamp(88px, 10vw, 144px) 0;
}
.slot--banco {
  min-height: 520px; border-radius: var(--r);
  background:
    radial-gradient(ellipse 50% 40% at 80% 10%, rgb(200 216 235 / .35), transparent 70%),
    linear-gradient(170deg, #3A424B 0%, #2A3138 55%, #1D2329 100%);
}
.esc--disco {
  left: 14%; top: 34%; width: 92%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, #1D2329 0 13%, #8E98A2 13.5% 15%, #6D7680 15.5% 30%, transparent 30.5%),
    repeating-radial-gradient(circle, #9AA4AE 0 1px, #8A949E 1px 4px),
    #8A949E;
  -webkit-mask-image: radial-gradient(circle, #000 69%, transparent 69.5%);
  mask-image: radial-gradient(circle, #000 69%, transparent 69.5%);
  transform: scaleY(.46) rotate(-8deg);
  filter: drop-shadow(0 30px 24px rgb(0 0 0 / .5));
}
.esc--micro {
  left: 30%; top: 30%; width: 58%; height: 22px; border-radius: 2px;
  background: linear-gradient(180deg, #DDE3E8, #A9B2BB 60%, #7E8892);
  box-shadow: 0 14px 18px -6px rgb(0 0 0 / .5);
  transform: rotate(-16deg);
}
.esc--micro::after {
  content: ""; position: absolute; right: -10%; top: -6px; width: 22%; height: 34px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, #C9D1D8 0 2px, #9AA4AE 2px 4px);
}
.slot--banco::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(15 18 22 / .35), transparent 50%); }
.lista { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 48px); margin-top: clamp(28px, 3vw, 44px); }
.lista div { position: relative; padding: 18px 0 20px; }
.lista div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hilo); transform-origin: 0 50%; }
html.mov-listo .lista div:not(.es-visto)::before { transform: scaleX(0); }
html.mov-listo .lista div.es-visto::before { transition: transform 900ms cubic-bezier(.77, 0, .175, 1) var(--retraso, 0ms); }
.lista dt { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.005em; }
.lista dd { margin: 4px 0 0; max-width: 34ch; color: var(--gris); }

/* Pedir presupuesto */
.cita {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px clamp(40px, 6vw, 112px);
  padding: clamp(72px, 9vw, 128px) max(var(--margen), calc((100% - 1296px) / 2));
  background: var(--grafito); color: var(--acero);
}
.cita :focus-visible { outline-color: var(--azul-claro); }
.cita__texto > p { margin-top: 16px; max-width: 40ch; font-size: 1.125rem; color: rgb(233 236 238 / .8); }
.horario { margin-top: clamp(32px, 4vw, 48px); }
.horario div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 4px 20px; padding: 13px 0; border-top: 1px solid var(--hilo-claro); }
.horario dt { color: rgb(233 236 238 / .7); }
.horario dd { margin: 0; font-variant-numeric: tabular-nums; }
.horario a { color: inherit; text-underline-offset: 4px; text-decoration-color: rgb(233 236 238 / .4); }

.formulario {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-content: start;
  padding: clamp(24px, 3vw, 40px); border-radius: var(--r);
  background: var(--grafito-2); box-shadow: inset 0 0 0 1px var(--hilo-claro);
}
.campo { display: grid; gap: 8px; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: .9375rem; font-weight: 500; }
.campo input, .campo textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: var(--r);
  background: #2B323A; color: var(--acero); box-shadow: inset 0 0 0 1px rgb(233 236 238 / .22);
  font-size: 1rem; caret-color: var(--azul-claro);
  transition: box-shadow 160ms ease;
}
.campo textarea { resize: vertical; min-height: 112px; }
.campo input:focus, .campo textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--azul-claro); }
.campo__ayuda { font-size: .875rem; color: rgb(233 236 238 / .66); }
.formulario__boton { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
.formulario__aviso { grid-column: 1 / -1; padding: 12px 14px; border-radius: var(--r); background: rgb(143 176 234 / .12); box-shadow: inset 0 0 0 1px rgb(143 176 234 / .35); color: var(--acero); font-size: .9375rem; }
.formulario__aviso:empty { display: none; }

.pie {
  display: flex; flex-wrap: wrap; gap: 16px clamp(32px, 6vw, 96px);
  padding: 36px max(var(--margen), calc((100% - 1296px) / 2)) 104px;
  background: var(--grafito); color: rgb(233 236 238 / .7); font-size: .9375rem;
  border-top: 1px solid var(--hilo-claro);
}
.pie__marca { margin-right: auto; color: var(--acero); font-weight: 600; }

/* Tableta */
@media (max-width: 1024px) {
  .regla { grid-template-columns: 1fr 1fr; row-gap: 56px; }
  .regla::before { display: none; }
  html.mov-listo .regla__avance, html.mov-listo .regla__cursor { display: none; }
  .paso::before { top: -16px; width: 32px; height: 3px; }
  .presupuesto, .servicios, .cita { grid-template-columns: 1fr; }
  .slot--banco { min-height: 0; aspect-ratio: 16 / 10; }
  .esc--disco { width: 64%; left: 28%; top: 20%; }
}

/* Móvil */
@media (max-width: 760px) {
  .cabecera__nav, .marca__apellido { display: none; }
  .boton--borde { min-height: 42px; padding: 0 14px; font-size: .9375rem; }
  .portada { padding-top: 120px; }
  .portada h1 { font-size: clamp(2.375rem, 10.4vw, 2.875rem); }
  .slot--taller::after { background: linear-gradient(0deg, rgb(15 18 22 / .96) 0%, rgb(15 18 22 / .82) 48%, rgb(15 18 22 / .2) 78%, rgb(15 18 22 / .6) 100%); }
  .regla { grid-template-columns: 1fr; row-gap: 0; padding-top: 0; padding-left: 40px; }
  .regla::before {
    display: block; left: 0; right: auto; top: 0; bottom: 0; width: 22px; height: auto;
    background:
      repeating-linear-gradient(180deg, var(--grafito) 0 1px, transparent 1px 64px) 0 0 / 22px 100% no-repeat,
      repeating-linear-gradient(180deg, rgb(21 25 30 / .45) 0 1px, transparent 1px 6.4px) 0 0 / 10px 100% no-repeat,
      linear-gradient(var(--grafito), var(--grafito)) 0 0 / 1px 100% no-repeat;
  }
  .paso { padding: 4px 0 32px; }
  .paso::before { left: -40px; top: 6px; width: 30px; height: 3px; }
  html.mov-listo .regla__avance, html.mov-listo .regla__cursor { display: block; }
  .regla__avance { right: auto; bottom: 0; width: 3px; height: auto; transform-origin: 50% 0; transform: scaleY(0); }
  .regla__cursor { left: -10px; top: -1px; width: 40px; height: 2px; }
  .regla__cursor::before { left: 0; top: -4px; width: 7px; height: 10px; }
  .hoja { padding: 22px 18px; }
  .hoja__tabla tbody td { font-size: .9375rem; }
  .lista { grid-template-columns: 1fr; }
  .formulario { grid-template-columns: 1fr; padding: 20px; }
  .horario div { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marca__galga rect, .paso::before { transition: none; }
}