/* =========================================================
   Taller Mecánico Turbo · Totana
   Dirección de arte: "Hoja de taller"
   Paleta medida del edificio real: cal de la fachada, antracita
   del zócalo, rojo óxido del suelo del vano.
   Firma: la fotografía tramada en semitono.
   ========================================================= */

:root{
  --cal:      #ECEEF0;   /* la cal de la fachada */
  --cal-2:    #F6F7F8;   /* un punto más clara, para bloques */
  --ink:      #22262B;   /* el antracita del zócalo */
  --slate:    #4A535C;   /* el gris azulado del zócalo a la luz */
  --hot:      #A6412C;   /* el rojo óxido del suelo del vano */
  --line:     rgba(34,38,43,.18);
  --line-dark:rgba(236,238,240,.20);

  --wrap: 1220px;
  --pad:  clamp(20px, 5vw, 64px);
  --sec:  clamp(72px, 11vw, 148px);
  --ease: cubic-bezier(.22,.61,.36,1);

  --mono: "JetBrains Mono", ui-monospace, monospace;
  --disp: "Saira Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--cal);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--hot); color:#fff; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--cal); padding:12px 18px; font-family:var(--mono); font-size:.8125rem;
}
.skip:focus{ left:0; }

:focus-visible{ outline:3px solid var(--hot); outline-offset:3px; }

/* ---------- etiquetas mono (mínimo 12px: por debajo salta el detector) ---------- */
.tag{
  font-family:var(--mono);
  font-size:.8125rem;      /* 13px */
  font-weight:600;
  letter-spacing:.10em;
  color:var(--slate);
  text-transform:uppercase;
}
.tag--sec{ margin-bottom:18px; }
.tag--onDark{ color:rgba(236,238,240,.72); }

/* ---------- botones (esquinas rectas, sin relleno de bajo contraste) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:600; font-size:.875rem; letter-spacing:.04em;
  padding:14px 22px; border:2px solid transparent; border-radius:0;
  transition:background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
  cursor:pointer;
}
.btn--fill{ background:var(--hot); color:#fff; }        /* 6,1:1 */
.btn--line{ border-color:var(--ink); color:var(--ink); }
.btn--lg{ padding:18px 30px; font-size:.9375rem; }
.btn--block{ width:100%; }
@media (hover:hover){
  .btn--fill:hover{ background:var(--ink); }
  .btn--line:hover{ background:var(--ink); color:var(--cal); }
}
.btn:active{ transform:scale(.97); }

/* ============ HEADER ============ */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:transparent;
}
/* velo superior: la zona oscura del tramado deja el logo y el menú ilegibles sin él */
.hd::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  height:150px;
  background:linear-gradient(to bottom,
    rgba(236,238,240,.97) 0%,
    rgba(236,238,240,.88) 45%,
    rgba(236,238,240,0) 100%);
  transition:opacity .3s ease;
}
.hd.scrolled::before{ opacity:0; }
.hd.scrolled{
  background:rgba(236,238,240,.92);
  backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.hd__in{
  max-width:var(--wrap); margin-inline:auto; padding:14px var(--pad);
  display:flex; align-items:center; gap:28px;
}
.mark{ display:flex; align-items:baseline; gap:10px; margin-right:auto; }
.mark__word{
  font-family:var(--disp); font-weight:800; font-size:1.75rem;
  letter-spacing:.02em; line-height:1; text-transform:uppercase;
}
.mark__sub{
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  color:var(--slate); letter-spacing:.06em;
}

.nav{ display:flex; gap:28px; }
.nav a{
  font-family:var(--mono); font-size:.8125rem; font-weight:500; letter-spacing:.06em;
  color:var(--slate); padding-bottom:3px; border-bottom:2px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.nav a:hover, .nav a.active{ color:var(--ink); border-bottom-color:var(--hot); }

.burger{ display:none; width:44px; height:44px; background:none; border:0; padding:10px; }
.burger span{ display:block; height:2px; background:var(--ink); margin:5px 0; transition:transform .25s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:900px){
  .hd__cta{ display:none; }
  .burger{ display:block; }
  .nav{
    position:fixed; inset:0; background:var(--ink);
    flex-direction:column; align-items:center; justify-content:center; gap:32px;
    transform:translateY(-100%); transition:transform .35s var(--ease);
  }
  .nav.open{ transform:none; }
  .nav a{ font-size:1.25rem; color:var(--cal); }
  .nav a:hover, .nav a.active{ color:#fff; }
}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  padding-top:120px;
}
.hero__media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:20% 46%; }

/* cortinilla de entrada: si la animación no llega a correr, la cortina ya está fuera */
.hero__media::after{
  content:""; position:absolute; inset:0; background:var(--cal);
  transform:translateY(-101%);
  animation:wipe 1s var(--ease) forwards;
}
@keyframes wipe{ from{ transform:translateY(0); } to{ transform:translateY(-101%); } }

/* Velo DIAGONAL: tapa solo la mitad donde cae el texto y deja la trama
   a plena fuerza en la derecha, que es donde tiene que verse la firma. */
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(101deg,
      rgba(236,238,240,.97) 0%,
      rgba(236,238,240,.94) 32%,
      rgba(236,238,240,.52) 55%,
      rgba(236,238,240,0)   78%),
    linear-gradient(to top,
      rgba(236,238,240,.80) 0%,
      rgba(236,238,240,0)   22%);
}
/* En estrecho el texto ocupa TODO el ancho, así que el velo diagonal no vale:
   pasa a horizontal y deja la trama arriba, donde no hay texto. */
@media (max-width:900px){
  .hero__scrim{
    background:linear-gradient(to top,
      rgba(236,238,240,.97) 0%,
      rgba(236,238,240,.96) 54%,
      rgba(236,238,240,.66) 76%,
      rgba(236,238,240,.06) 97%);
  }
  .hero__media img{ object-position:34% 40%; }
}

.hero__in{
  position:relative; z-index:2;
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:0 var(--pad) clamp(80px,11vh,120px);
}
.hero__in .tag{ color:var(--ink); }
.hero__h1{
  font-family:var(--disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(3.1rem, 9.6vw, 9.5rem);
  line-height:.88; letter-spacing:-.015em;
  margin:14px 0 26px;
  text-wrap:balance;
}
.hero__h1 .hot{ color:var(--hot); }
.hero__sub{
  max-width:44ch; font-size:clamp(1.0625rem,1.6vw,1.25rem);
  color:var(--slate); text-wrap:pretty; margin-bottom:34px;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }

/* barra de estado inferior */
.statusbar{
  position:relative; z-index:2;
  border-top:1px solid var(--line);
  background:rgba(236,238,240,.9);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px var(--pad);
  font-family:var(--mono); font-size:.8125rem; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--slate);
}
.dot{ width:9px; height:9px; background:var(--slate); flex:none; }
.dot.open{ background:#1E7A3C; }
.dot.closed{ background:var(--hot); }
.statusbar__now{ color:var(--ink); font-weight:600; }
.statusbar__sep{ width:1px; height:14px; background:var(--line); }

/* ============ SECCIONES ============ */
.sec{ padding-block:var(--sec); }
.sec__h2{
  font-family:var(--disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(2.4rem,6vw,5rem); line-height:.92; letter-spacing:-.01em;
}
.sec__h2--dark{ color:var(--cal); }

/* ---------- servicios: filas a todo el ancho, tipografía grande ---------- */
.sec--services{ background:var(--cal-2); }
.svc{ list-style:none; margin:clamp(40px,6vw,68px) 0 0; border-top:1px solid var(--line); }
.svc__row{
  border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px 32px; align-items:baseline;
  max-width:var(--wrap); margin-inline:auto;
  padding:clamp(20px,2.6vw,30px) var(--pad);
  transition:background-color .22s var(--ease), color .22s var(--ease);
}
.svc__name{
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.75rem,4.4vw,3.4rem); line-height:1; letter-spacing:-.01em;
}
.svc__desc{ color:var(--slate); font-size:1.0625rem; }
@media (hover:hover){
  .svc__row:hover{ background:var(--ink); color:var(--cal); }
  .svc__row:hover .svc__desc{ color:inherit; opacity:.78; }
}
.svc__foot{
  margin-top:clamp(32px,4vw,52px);
  font-family:var(--mono); font-size:.9375rem; color:var(--slate);
}
.svc__foot a{ color:var(--hot); font-weight:600; border-bottom:2px solid var(--hot); }

/* ---------- banda oscura: lo que cuentan los clientes ---------- */
.sec--dark{ background:var(--ink); color:var(--cal); }
.quotes{
  margin-top:clamp(40px,5vw,64px);
  display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(28px,4vw,56px);
  align-items:start;
}
.quote{ border-left:2px solid var(--hot); padding-left:clamp(20px,2.4vw,32px); }
.quote__text{
  font-size:clamp(1.0625rem,1.9vw,1.4375rem); line-height:1.5;
  color:var(--cal); text-wrap:pretty;
}
.quote__by{
  margin-top:20px; font-family:var(--mono); font-size:.8125rem;
  letter-spacing:.06em; text-transform:uppercase; color:#fff; font-weight:600;
}
.quote__by span{ display:block; margin-top:4px; color:rgba(236,238,240,.62); font-weight:500; letter-spacing:.04em; }
@media (max-width:860px){ .quotes{ grid-template-columns:1fr; } }

/* ---------- el taller ---------- */
.taller{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,72px);
  align-items:start;
}
.taller__media{ border:1px solid var(--line); background:var(--cal-2); }
.taller__media img{ width:100%; }
.taller__addr{
  font-family:var(--mono); font-size:1rem; line-height:1.8;
  margin:24px 0 30px; color:var(--ink);
}
.hours{ width:100%; border-collapse:collapse; }
.hours th, .hours td{
  padding:11px 14px; text-align:left; font-size:.9375rem; font-weight:500;
  border-bottom:1px solid var(--line);
}
.hours th{ font-family:var(--mono); font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); }
.hours td{ font-variant-numeric:tabular-nums; text-align:right; }
.hours .closed{ color:var(--slate); }
.hours .today{ background:var(--ink); color:var(--cal); }
.hours .today th, .hours .today td{ color:inherit; border-bottom-color:transparent; }
.taller__acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
@media (max-width:860px){ .taller{ grid-template-columns:1fr; } }

.map{
  margin-top:clamp(48px,6vw,80px);
  border-top:1px solid var(--line);
  filter:grayscale(1) contrast(1.05);
}
.map iframe{ display:block; width:100%; height:clamp(300px,42vw,460px); border:0; }

/* ---------- contacto ---------- */
.sec--contacto{ background:var(--cal-2); }
.contacto{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:start; }
.contacto__lead{ margin-top:22px; color:var(--slate); max-width:46ch; text-wrap:pretty; }
.contacto__alt{ margin-top:20px; font-family:var(--mono); font-size:.9375rem; color:var(--slate); }
.contacto__alt a{ color:var(--hot); font-weight:600; border-bottom:2px solid var(--hot); }
@media (max-width:860px){ .contacto{ grid-template-columns:1fr; } }

.form{ border:1px solid var(--line); background:var(--cal); padding:clamp(22px,3vw,36px); }
.field{ margin-bottom:20px; }
.field label{
  display:block; margin-bottom:8px;
  font-family:var(--mono); font-size:.8125rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--slate);
}
.field input[type=text], .field input[type=tel], .field textarea{
  width:100%; font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--cal-2); border:1px solid var(--line); border-radius:0;
  padding:13px 14px; transition:border-color .2s var(--ease);
}
.field input:focus, .field textarea:focus{ border-color:var(--ink); outline-offset:1px; }
.field textarea{ resize:vertical; min-height:118px; }
.field--check{ display:flex; align-items:flex-start; gap:11px; }
.field--check input{ margin-top:4px; width:17px; height:17px; accent-color:var(--hot); flex:none; }
.field--check label{
  margin:0; font-family:var(--body); font-size:.9375rem; text-transform:none;
  letter-spacing:0; font-weight:400; color:var(--slate);
}
.form__note{ margin-top:14px; font-size:.875rem; color:var(--slate); }
.form__err{ margin-top:12px; font-size:.9375rem; color:var(--hot); font-weight:600; }

/* ============ FOOTER ============ */
.ft{ background:var(--ink); color:var(--cal); padding-top:clamp(56px,7vw,88px); }
.ft__in{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; padding-bottom:clamp(40px,5vw,64px); }
.mark__word--ft{ font-family:var(--disp); font-weight:800; font-size:2.25rem; color:var(--cal); }
.ft__tag{ margin-top:10px; color:rgba(236,238,240,.72); font-size:.9375rem; }
.ft__h{
  font-family:var(--mono); font-size:.8125rem; font-weight:600; letter-spacing:.10em;
  text-transform:uppercase; color:rgba(236,238,240,.62); margin-bottom:14px;
}
.ft__col p{ color:rgba(236,238,240,.88); font-size:.9375rem; margin-bottom:10px; }
.ft__col a{ border-bottom:1px solid var(--line-dark); }
.ft__bar{
  border-top:1px solid var(--line-dark);
  padding-block:22px;
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px;
}
.ft__legal{ display:flex; flex-wrap:wrap; gap:20px; }
.ft__legal a{ font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(236,238,240,.72); }
.ft__legal a:hover{ color:#fff; }
.ft__copy{ margin-left:auto; font-family:var(--mono); font-size:.75rem; color:rgba(236,238,240,.62); }
.demo-aviso{
  padding-bottom:26px; font-size:.75rem; color:rgba(236,238,240,.55); line-height:1.5;
}
@media (max-width:860px){
  .ft__in{ grid-template-columns:1fr; gap:28px; }
  .ft__copy{ margin-left:0; }
}

/* ============ CALL BAR MÓVIL ============ */
.callbar{ display:none; }
@media (max-width:760px){
  .callbar{
    position:fixed; left:0; right:0; bottom:0; z-index:120;
    display:grid; grid-template-columns:1fr 1fr;
    border-top:1px solid var(--line);
  }
  .callbar__a{
    text-align:center; padding:15px 8px; background:var(--ink); color:var(--cal);
    font-family:var(--mono); font-size:.875rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  }
  .callbar__a--alt{ background:var(--hot); color:#fff; }
  body{ padding-bottom:54px; }
  .hero{ padding-top:96px; }
}

/* ============ MOVIMIENTO ============ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero__media::after{ animation:none; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}