/* ============================================================
   Taller Mecánico Graña · Totana
   Dirección de arte: "Registro 30/43147"
   Paleta sacada de su placa reglamentaria (azul), de las cerchas
   de la nave (óxido) y del disco negro de su logotipo.
   ============================================================ */

:root{
  --tinta:#101418;
  --cal:#EDEEEA;
  --niebla:#DFE0DB;
  --hormigon:#C9CAC3;
  --line:#C8C9C2;
  --line-2:#D9DAD4;
  --body:#2B313A;
  --muted:#565E68;
  --placa:#1B4C9B;
  --placa-deep:#153B78;
  --oxido:#A2452A;

  --maxw:1200px;
  --gutter:clamp(20px,5vw,56px);
  --sec:clamp(72px,10vw,132px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --sh-sm:0 2px 8px -3px rgba(16,20,24,.16);
  --sh-md:0 14px 34px -18px rgba(16,20,24,.38);
  --sh-lg:0 34px 70px -34px rgba(16,20,24,.5);

  --display:"Chakra Petch",system-ui,sans-serif;
  --sans:"Instrument Sans",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  background:var(--cal);color:var(--body);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--placa);color:#fff}
:focus-visible{outline:2px solid var(--placa);outline-offset:3px}

.wrap{width:min(100% - var(--gutter)*2,var(--maxw));margin-inline:auto}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stars{color:var(--oxido);letter-spacing:.08em}
.lnk{color:var(--placa);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.lnk:hover{color:var(--placa-deep)}

.skip{position:absolute;left:-9999px;top:0;background:var(--placa);color:#fff;padding:12px 18px;z-index:60}
.skip:focus{left:8px;top:8px}

/* franja de la placa, pegada al borde superior de la pagina */
.franja{position:fixed;inset:0 0 auto 0;height:5px;background:var(--placa);z-index:50}

/* ─── tipografía ─────────────────────────────────────────── */
.h1{font-family:var(--display);font-weight:700;display:block}
.h1__lede{
  display:block;font-family:var(--mono);font-weight:400;
  font-size:clamp(11.5px,1.2vw,13.5px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--placa);margin-bottom:20px;
}
.h1__lede i{font-style:normal;color:var(--oxido);padding-inline:2px}
.h1__big{
  display:block;font-size:clamp(54px,9.9vw,146px);line-height:.87;
  letter-spacing:-.035em;color:var(--tinta);
}
.h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px,4.6vw,58px);line-height:1.04;letter-spacing:-.025em;
  color:var(--tinta);text-wrap:balance;
}
.h2--claro{color:var(--cal)}
.h3{
  font-family:var(--display);font-weight:600;
  font-size:clamp(21px,2.4vw,27px);line-height:1.15;letter-spacing:-.015em;color:var(--tinta);
  display:flex;align-items:baseline;gap:12px;
}
.p{max-width:56ch;color:var(--body);text-wrap:pretty}
.p+.p{margin-top:16px}
.p--claro{color:#C9CDD3}

/* ─── botones ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.01em;
  padding:13px 22px;border:1.5px solid transparent;border-radius:2px;
  cursor:pointer;white-space:nowrap;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .18s var(--ease),box-shadow .2s var(--ease);
}
.btn--lg{padding:16px 30px;font-size:17px}
.btn--sm{padding:9px 15px;font-size:14px}
.btn--full{width:100%}
.btn--placa{background:var(--placa);color:#fff;box-shadow:var(--sh-sm)}
.btn--ghost{background:transparent;color:var(--tinta);border-color:var(--line)}
.btn--outline{background:transparent;color:var(--placa);border-color:var(--placa)}
@media (hover:hover){
  .btn--placa:hover{background:var(--placa-deep);transform:translateY(-2px);box-shadow:var(--sh-md)}
  .btn--ghost:hover{border-color:var(--tinta);background:rgba(16,20,24,.045)}
  .btn--outline:hover{background:var(--placa);color:#fff}
}
.btn:active{transform:scale(.975)}

/* ─── header ─────────────────────────────────────────────── */
.hdr{position:fixed;top:5px;left:0;right:0;z-index:40}
.hdr.scrolled{background:rgba(237,238,234,.9);backdrop-filter:blur(14px) saturate(150%);box-shadow:0 1px 0 var(--line-2),0 10px 26px -22px rgba(16,20,24,.5)}
.hdr__in{
  width:min(100% - var(--gutter)*2,var(--maxw));margin-inline:auto;
  display:flex;align-items:center;gap:22px;padding:13px 0;
}
.marca{display:flex;align-items:center;gap:11px;margin-right:auto}
.marca img{width:46px;height:46px;border-radius:50%}
.marca__txt{display:flex;flex-direction:column;line-height:1.1}
.marca__txt b{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.02em;color:var(--tinta)}
.marca__txt i{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

.nav{display:flex;gap:26px}
.nav a{
  font-size:14.5px;font-weight:500;color:var(--body);position:relative;padding:5px 0;
  transition:color .2s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--placa);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);
}
@media (hover:hover){.nav a:hover{color:var(--tinta)}.nav a:hover::after{transform:scaleX(1)}}
.nav a.active{color:var(--placa)}
.nav a.active::after{transform:scaleX(1)}

.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--tinta);border-radius:2px;transition:transform .25s var(--ease),opacity .2s var(--ease)}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ─── hero ───────────────────────────────────────────────── */
.hero{
  display:grid;grid-template-columns:1.1fr .9fr;align-items:center;
  min-height:100svh;padding-top:96px;
  background:linear-gradient(90deg,var(--cal) 0 55%,var(--niebla) 55% 100%);
}
.hero__text{padding:clamp(30px,5vw,64px) clamp(20px,3.4vw,48px) clamp(40px,5vw,64px);justify-self:end;width:min(100%,700px)}
.lede{margin:34px 0 32px;max-width:46ch;font-size:clamp(16.5px,1.5vw,19px);color:var(--body);text-wrap:pretty}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.hero__meta{margin-top:34px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center}
.gstars{display:flex;align-items:center;gap:8px;font-size:14px}
.gstars b{font-family:var(--display);font-weight:700;font-size:19px;color:var(--tinta)}
.gstars__n{color:var(--muted);font-size:13.5px}
.hero__estado{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--body)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:0 0 auto}
.dot.open{background:#1E8E4A;box-shadow:0 0 0 4px rgba(30,142,74,.16)}
.dot.closed{background:var(--oxido);box-shadow:0 0 0 4px rgba(162,69,42,.14)}

.hero__placa{padding:clamp(30px,5vw,64px) clamp(20px,4vw,56px);display:flex;justify-content:center}
.placa{width:min(100%,400px)}
.placa__panel{position:relative;filter:drop-shadow(0 26px 40px rgba(16,20,24,.28))}
.placa__svg{width:100%;height:auto;display:block}
.placa__tor{position:absolute;width:9px;height:9px;border-radius:50%;background:#C6CBD2;box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.4)}
.placa__tor--a{top:3.4%;left:3.4%}
.placa__tor--b{top:3.4%;right:3.4%}
.placa__tor--c{bottom:3.4%;left:3.4%}
.placa__tor--d{bottom:3.4%;right:3.4%}
.placa__pie{margin-top:20px;display:flex;flex-direction:column;gap:5px}
.placa__pie b{font-family:var(--display);font-weight:600;font-size:16.5px;color:var(--tinta)}

/* ─── banda a sangre ─────────────────────────────────────── */
.banda{position:relative;background:var(--tinta)}
.banda img{width:100%;height:clamp(240px,42vw,520px);object-fit:cover;object-position:center 58%}
.banda__cap{
  text-transform:none;letter-spacing:.02em;
  position:absolute;left:var(--gutter);bottom:18px;color:#fff;
  background:rgba(16,20,24,.62);backdrop-filter:blur(6px);padding:8px 14px;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* ─── secciones ──────────────────────────────────────────── */
.sec{padding:var(--sec) 0}
.sec--niebla{background:var(--niebla)}
.sec--tinta{background:var(--tinta);color:#C9CDD3}

/* tratamiento de imagen: esquinas solo en 2 vertices */
.marco{
  overflow:hidden;background:var(--hormigon);
  border-top-left-radius:26px;border-bottom-right-radius:26px;
  box-shadow:var(--sh-md);
}

/* el taller */
.taller{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:center}
.taller__txt .p{margin-top:22px}
.taller__foto img{width:100%;height:100%;object-fit:cover;object-position:center 45%;aspect-ratio:3/4}
.taller__foto figcaption{padding:12px 4px 0;background:var(--cal)}
.cifras{display:flex;flex-wrap:wrap;gap:14px 44px;margin-top:36px;padding-top:26px;border-top:1px solid var(--line)}
.cifras li{display:flex;flex-direction:column}
.cifras b{font-family:var(--display);font-weight:700;font-size:clamp(38px,5vw,56px);line-height:1;letter-spacing:-.03em;color:var(--placa)}
.cifras span{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* servicios · parte de trabajo */
.parte__cab{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:44px}
.parte__ref{color:var(--placa)}
.parte{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px)}
.parte__col{background:var(--cal);border:1px solid var(--line);padding:clamp(24px,3vw,38px)}
.parte__n{color:var(--oxido);font-weight:700;font-size:13px}
.chk{margin-top:24px;border-top:1px solid var(--line-2)}
.chk li{
  display:flex;align-items:center;gap:14px;padding:13px 2px;
  border-bottom:1px solid var(--line-2);font-size:16px;
}
.chk li::before{
  content:"";width:15px;height:15px;flex:0 0 auto;border:1.5px solid var(--placa);
  background:
    linear-gradient(45deg,transparent 44%,var(--placa) 44% 56%,transparent 56%),
    linear-gradient(-45deg,transparent 44%,var(--placa) 44% 56%,transparent 56%);
}
.parte__pie{margin-top:34px;font-size:15.5px;color:var(--muted);max-width:62ch}

/* opiniones */
.op__cab{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:44px}
.op__nota{display:flex;align-items:center;gap:14px}
.op__num{font-family:var(--display);font-weight:700;font-size:clamp(46px,6vw,74px);line-height:.9;letter-spacing:-.03em;color:var(--tinta)}
.op__nota .stars{display:block;font-size:16px}
.op__nota .mono{display:block;margin-top:4px}
.op__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px)}
.op{
  background:#fff;border:1px solid var(--line-2);padding:clamp(24px,2.6vw,34px);
  border-bottom:3px solid var(--placa);
}
.op p{font-size:16.5px;color:var(--body);text-wrap:pretty}
.op footer{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-2);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.op footer b{font-family:var(--display);font-weight:600;font-size:16px;color:var(--tinta);width:100%}
.op footer .stars{font-size:14px}
.op footer .mono{font-size:11.5px}

/* firma */
.firma{background:var(--tinta);padding:clamp(44px,6vw,76px) 0 clamp(30px,4vw,52px);overflow:hidden;position:relative}
.firma__label{padding-inline:var(--gutter);color:#7E868F}
.firma__word{position:relative;margin-top:clamp(10px,2vw,22px);padding-left:var(--gutter)}
.firma__word::before{
  content:"";position:absolute;left:0;right:0;top:52%;height:2px;background:var(--oxido);
}
.firma__word span{
  position:relative;display:block;white-space:nowrap;
  font-family:var(--display);font-weight:700;
  font-size:clamp(104px,34vw,470px);line-height:.8;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:2.5px rgba(237,238,234,.72);
  margin-right:-40vw;
}

/* donde */
.donde{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,3vw,44px);margin-top:44px}
.donde__mapa{min-height:380px;position:relative}
.donde__mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.28) contrast(1.04)}
.donde__info{display:flex;flex-direction:column;gap:20px}
.ficha,.horario{background:var(--niebla);border:1px solid var(--line);padding:clamp(22px,2.6vw,30px)}
.ficha__lb{margin-bottom:10px;color:var(--placa)}
.ficha__dir{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.42;color:var(--tinta)}
.ficha__btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.horario__cab{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.estado{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500}
.horario__lista{border-top:1px solid var(--line)}
.horario__lista .row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.horario__lista .row b{font-family:var(--mono);font-size:13.5px;color:var(--tinta)}
.horario__lista .row .cerr{color:var(--muted)}
.horario__lista .row.today{background:rgba(27,76,155,.09);margin-inline:-10px;padding-inline:10px}
.horario__lista .row.today span{font-weight:600;color:var(--placa)}
.horario__nota{margin-top:14px;font-size:14px;color:var(--muted)}

.tira{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:clamp(12px,1.6vw,20px);margin-top:clamp(24px,3vw,40px)}
.tira .shot{cursor:zoom-in;margin:0}
.tira img{width:100%;height:clamp(200px,26vw,320px);object-fit:cover;transition:transform .5s var(--ease)}
.tira .shot:nth-child(1) img{object-position:center 62%}
.tira .shot:nth-child(2) img{object-position:center 38%}
.tira .shot:nth-child(3) img{object-position:center top}
@media (hover:hover){.tira .shot:hover img{transform:scale(1.035)}}

/* contacto */
.contacto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.contacto__txt .p{margin-top:22px}
.contacto__lista{margin-top:32px;border-top:1px solid rgba(237,238,234,.16)}
.contacto__lista li{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid rgba(237,238,234,.16);flex-wrap:wrap}
.contacto__lista .mono{color:#8A929B}
.contacto__lista a,.contacto__lista li>span:last-child{font-family:var(--display);font-weight:600;font-size:17px;color:var(--cal)}
@media (hover:hover){.contacto__lista a:hover{color:#7FA6E4}}

.form{background:rgba(237,238,234,.05);border:1px solid rgba(237,238,234,.15);padding:clamp(24px,3vw,36px)}
.campo{margin-bottom:16px;display:flex;flex-direction:column;gap:7px}
.campo label{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#9AA2AB}
.campo input,.campo textarea{
  background:rgba(16,20,24,.5);border:1px solid rgba(237,238,234,.2);border-radius:2px;
  padding:12px 14px;color:var(--cal);font-size:16px;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.campo input::placeholder,.campo textarea::placeholder{color:#767E88}
.campo input:focus,.campo textarea:focus{border-color:#4D7FD1;background:rgba(16,20,24,.75);outline:none}
.campo textarea{resize:vertical;min-height:104px}
.check{display:flex;gap:11px;align-items:flex-start;margin:6px 0 20px;font-size:14px;color:#AFB6BD}
.check input{margin-top:4px;accent-color:var(--placa);width:16px;height:16px;flex:0 0 auto}
.check .lnk{color:#8FB2E8}
.form .invalid{border-color:#D98074 !important}
.form__nota{margin-top:14px;text-align:center;color:#8A929B;text-transform:none;letter-spacing:.01em}

/* footer */
.ft{background:var(--tinta);color:#AEB5BD;padding-top:clamp(48px,6vw,76px)}
.ft__in{display:grid;grid-template-columns:1.3fr .7fr 1fr;gap:clamp(28px,4vw,56px);padding-bottom:clamp(36px,4vw,56px)}
.ft__marca img{width:64px;height:64px;border-radius:50%;margin-bottom:16px}
.ft__tag{font-size:15px;line-height:1.6;max-width:34ch}
.ft__nav{display:flex;flex-direction:column;gap:9px}
.ft__nav a{font-size:15px;color:#AEB5BD;transition:color .2s var(--ease)}
@media (hover:hover){.ft__nav a:hover{color:var(--cal)}}
.ft__datos p{font-size:15px;line-height:1.6}
.ft__datos p+p{margin-top:12px}
.ft__datos a{font-family:var(--display);font-weight:600;font-size:21px;color:var(--cal)}
.ft__bar{border-top:1px solid rgba(237,238,234,.13);padding:18px 0 calc(18px + env(safe-area-inset-bottom))}
.ft__bar__in{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
.ft__legal{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;order:1}
.ft__legal a{color:#9299A1;transition:color .2s var(--ease)}
@media (hover:hover){.ft__legal a:hover{color:var(--cal)}}
.ft__copy{font-size:13.5px;color:#9299A1;order:2}

/* call-bar movil */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:rgba(16,20,24,.96);backdrop-filter:blur(10px);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));gap:9px}
.callbar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-weight:600;font-size:15.5px;padding:13px;border-radius:2px;
}
.callbar__a{background:var(--placa);color:#fff}
.callbar__b{background:transparent;color:var(--cal);border:1.5px solid rgba(237,238,234,.35)}

/* lightbox */
.lbox img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:2px}
.lbox__x{position:fixed;top:16px;right:20px;background:none;border:0;color:#fff;font-size:38px;line-height:1;cursor:pointer;padding:6px 12px}

/* ─── responsive ─────────────────────────────────────────── */
@media (max-width:1080px){
  .hero{grid-template-columns:1fr;background:var(--cal);min-height:0;padding-top:104px}
  .hero__text{justify-self:stretch;width:auto;padding-inline:var(--gutter);padding-bottom:clamp(28px,5vw,48px)}
  .hero__placa{background:var(--niebla);padding-block:clamp(36px,7vw,60px)}
  .taller,.donde,.contacto{grid-template-columns:1fr}
  .taller__foto{max-width:460px}
  .taller__foto img{aspect-ratio:4/3}
  .donde__mapa{min-height:320px}
}
@media (max-width:860px){
  .hdr__cta{display:none}
  .burger{display:block}
  .nav{
    position:fixed;inset:0;background:var(--cal);flex-direction:column;justify-content:center;
    align-items:center;gap:26px;transform:translateX(100%);transition:transform .34s var(--ease);
  }
  .nav.open{transform:none}
  .nav a{font-family:var(--display);font-weight:600;font-size:26px}
  .parte,.op__grid{grid-template-columns:1fr}
  .tira{grid-template-columns:1fr 1fr}
  .tira .shot:nth-child(3){grid-column:span 2}
  .tira .shot:nth-child(3) img{height:clamp(210px,44vw,300px)}
  .ft__in{grid-template-columns:1fr 1fr}
  .ft__marca{grid-column:span 2}
  .callbar{display:flex}
  body{padding-bottom:74px}
  .ft__bar{padding-bottom:82px}
}
@media (max-width:560px){
  .h1__big{font-size:clamp(50px,15vw,74px)}
  .cta .btn{width:100%}
  .banda__cap{left:12px;right:12px;bottom:12px;font-size:11px}
  .cifras{gap:18px 28px}
  .ft__in{grid-template-columns:1fr}
  .ft__marca{grid-column:auto}
  .tira{grid-template-columns:1fr}
  .tira .shot:nth-child(3){grid-column:auto}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}