/* ==================================================================
   APEX MOTORS GT · sitio publico
   Garage premium: todo oscuro, tipografia condensada grande, hairlines
   finos, un solo acento color piel. Sin verde, sin dorado saturado.
   ================================================================== */

:root{
  --negro:#08080a; --carbon:#0d0e10; --grafito:#121315; --humo:#1b1c20;
  --gris:#65666b; --gris2:#8e9095; --gris3:#b9bbc0;
  --blanco:#ffffff; --hueso:#f3f1ee; --tinta:#101012; --tinta2:#55565b; --tinta3:#8a8b90;

  /* piel: el unico acento. Neutro calido, nada de amarillo */
  --piel:#dcc8b4; --piel2:#eddfd1; --piel3:#f6efe7; --piel-osc:#a68d78;

  --hilo:rgba(255,255,255,.085);
  --hilo2:rgba(255,255,255,.16);
  --ancho:1180px;
  --bisel:16px;

  --fibra:
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.24) 0 1px, transparent 1px 3px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:72px}
body{
  margin:0; background:var(--negro); color:var(--gris3);
  font:16px/1.68 "Barlow","Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3{
  margin:0; font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  font-weight:700; line-height:.98; letter-spacing:-.012em; text-transform:uppercase;
  color:var(--blanco);
}

.envoltura{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 24px}
.envoltura.angosta{max-width:840px}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ico .lleno,.lleno{fill:currentColor}

.saltar{position:absolute;left:-9999px;top:0;background:var(--piel);color:var(--negro);
  padding:10px 16px;z-index:100}
.saltar:focus{left:0}

/* rotulo tecnico */
.kicker{margin:0 0 18px;font-family:"Barlow Condensed",sans-serif;font-size:13.5px;
  font-weight:600;letter-spacing:.36em;text-transform:uppercase;color:var(--piel);
  display:flex;align-items:center;gap:14px}
.kicker::before{content:"";width:40px;height:1px;background:var(--piel);flex:0 0 auto;
  opacity:.55}

.titulo{font-size:clamp(34px,5.4vw,62px)}
.bajada{margin:22px 0 0;font-size:17.5px;color:var(--gris2);max-width:650px}

.banda{height:1px;background:linear-gradient(90deg,transparent,var(--hilo2) 20%,
  var(--hilo2) 80%,transparent)}

/* ---------------- barra ---------------- */
.barra{position:sticky;top:0;z-index:50;background:rgba(8,8,10,.86);
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid var(--hilo)}
.barra-fila{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.marca img{height:26px;width:auto;filter:brightness(0) invert(1);opacity:.94}

.menu{display:flex;align-items:center;gap:30px}
.menu a{color:var(--gris2);text-decoration:none;font-family:"Barlow Condensed",sans-serif;
  font-size:16px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  transition:color .16s}
.menu a:hover{color:var(--blanco)}

.hamburguesa{display:none;background:none;border:0;padding:10px;cursor:pointer}
.hamburguesa span{display:block;width:22px;height:1.5px;background:#fff;margin:5px 0;
  transition:transform .22s,opacity .22s}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------------- botones ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 24px;border:1px solid transparent;cursor:pointer;text-decoration:none;
  font-family:"Barlow Condensed",sans-serif;font-size:17px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:transform .14s,background .2s,color .2s,border-color .2s}
.btn:active{transform:translateY(1px)}
.btn.grande{padding:17px 34px;font-size:19.5px}
.btn.bloque{width:100%}
.btn .ico{width:19px;height:19px}
.btn-solido{background:var(--piel);color:var(--negro)}
.btn-solido:hover{background:var(--blanco)}
.btn-linea{border-color:var(--hilo2);color:var(--hueso)}
.btn-linea:hover{border-color:var(--piel);color:var(--piel)}
.menu-wa{background:transparent;border:1px solid var(--hilo2);color:var(--hueso);
  padding:9px 18px;font-size:15.5px}
.menu-wa:hover{background:var(--piel);color:var(--negro);border-color:var(--piel)}

/* ---------------- portada ---------------- */
.portada{position:relative;overflow:hidden;padding:112px 0 0;background:var(--negro);
  border-bottom:1px solid var(--hilo)}

/* foto del taller o del carro. Si no existe portada.jpg no se muestra y
   queda el dibujo tecnico. Lo decide app.js. */
.portada-foto{position:absolute;inset:0;z-index:0;opacity:0;
  background:var(--negro) center/cover no-repeat;
  filter:grayscale(.8) contrast(1.08) brightness(.55)}
.portada.con-foto .portada-foto{opacity:1;background-image:url("portada.jpg")}
.portada.con-foto .portada-auto{display:none}

/* dibujo tecnico del vehiculo, de respaldo */
.portada-auto{position:absolute;right:-70px;bottom:60px;width:min(1060px,88vw);height:auto;
  z-index:1;opacity:.34;pointer-events:none;
  fill:none;stroke:var(--gris3);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.portada-auto .vidrio{fill:rgba(220,200,180,.06);stroke:var(--piel);stroke-opacity:.8}
.portada-auto .fino{stroke-width:.9;stroke:var(--gris);stroke-opacity:.9}
.portada-auto .suelo{stroke:var(--piel);stroke-opacity:.3;stroke-width:1}

.portada-velo{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(100deg, var(--negro) 4%, rgba(8,8,10,.94) 32%,
      rgba(8,8,10,.58) 64%, rgba(8,8,10,.34) 100%),
    linear-gradient(0deg, var(--negro) 1%, transparent 24%)}

.portada-caja{position:relative;z-index:3;max-width:820px;padding-bottom:0}
.portada h1{font-size:clamp(50px,9.6vw,116px);line-height:.9;letter-spacing:-.028em;
  color:var(--blanco)}
.portada h1 em{font-style:normal;color:var(--piel);display:inline-block}
.entrada{margin:30px 0 0;font-size:clamp(16.5px,2vw,20px);color:var(--gris3);max-width:590px;
  line-height:1.6}
.acciones{display:flex;flex-wrap:wrap;gap:14px;margin:40px 0 84px}

/* ficha tecnica: pegada al fondo, ancho completo */
.ficha{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;margin:0;border-top:1px solid var(--hilo)}
.ficha div{padding:26px 26px 30px;border-left:1px solid var(--hilo)}
.ficha div:first-child{padding-left:0;border-left:0}
.ficha dt{font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--piel);margin-bottom:6px}
.ficha dd{margin:0;font-family:"Barlow Condensed",sans-serif;font-size:21px;font-weight:600;
  text-transform:uppercase;letter-spacing:.01em;color:var(--hueso);line-height:1.15}

/* ---------------- secciones ---------------- */
.seccion{position:relative;padding:104px 0;overflow:hidden}
.lineas,.repuestos,.contacto{background:var(--negro);background-image:var(--fibra)}
.taller,.proceso,.porque{background:var(--carbon);background-image:var(--fibra)}
.preguntas{background:var(--grafito);background-image:var(--fibra)}
.seccion + .seccion{border-top:1px solid var(--hilo)}

/* numero de seccion enorme, al fondo */
.seccion::before{content:attr(data-n);position:absolute;top:26px;right:26px;
  font-family:"Barlow Condensed",sans-serif;font-size:clamp(110px,17vw,230px);
  font-weight:700;line-height:.8;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.045);pointer-events:none;z-index:0}
.seccion > .envoltura{position:relative;z-index:1}

/* ---------------- dos modulos ---------------- */
.dos-modulos{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--hilo)}
.modulo{position:relative;padding:52px 44px 44px;border-left:1px solid var(--hilo);
  transition:background .24s}
.modulo:first-child{border-left:0}
.modulo:hover{background:rgba(255,255,255,.022)}
.modulo::after{content:"";position:absolute;left:0;top:0;width:0;height:2px;
  background:var(--piel);transition:width .34s ease}
.modulo:hover::after{width:100%}
.ref{position:absolute;top:22px;right:28px;font-family:"Barlow Condensed",sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--piel);opacity:.55}
.modulo .ico-grande{width:34px;height:34px;fill:none;stroke:var(--piel);
  stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:24px}
.modulo .ico-grande .lleno{fill:var(--piel)}
.modulo h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:16px}
.modulo p{margin:0 0 28px;color:var(--gris2);font-size:15.5px}
.enlace-flecha{font-family:"Barlow Condensed",sans-serif;font-size:15.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--piel);text-decoration:none;
  border-bottom:1px solid rgba(220,200,180,.35);padding-bottom:4px}
.enlace-flecha::after{content:" →";transition:margin .18s}
.enlace-flecha:hover{color:var(--blanco);border-bottom-color:var(--blanco)}
.enlace-flecha:hover::after{margin-left:6px}

/* ---------------- servicios ---------------- */
.rejilla-servicios{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:56px;
  background:var(--hilo);border:1px solid var(--hilo)}
.serv{background:var(--carbon);padding:32px 28px 30px;position:relative;
  transition:background .2s}
.serv:hover{background:var(--humo)}
.serv .ico{width:26px;height:26px;stroke:var(--piel);margin-bottom:18px;opacity:.9}
.serv h3{font-size:23px;margin-bottom:10px}
.serv p{margin:0;font-size:14.5px;color:var(--gris2);line-height:1.62}

.nota-caja{margin-top:48px;padding:36px 38px;border:1px solid var(--hilo);
  border-left:2px solid var(--piel);
  background:linear-gradient(100deg,rgba(220,200,180,.07),transparent 62%);
  display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.nota-caja p{margin:0;flex:1 1 400px;color:var(--gris2);font-size:15.5px}
.nota-caja strong{color:var(--piel);font-weight:600}

/* ---------------- categorias de repuestos ---------------- */
.rejilla-cat{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:56px;
  background:var(--hilo);border:1px solid var(--hilo)}
.cat{background:var(--negro);padding:28px 22px;transition:background .2s}
.cat:hover{background:var(--humo)}
.cod{display:block;font-family:"Barlow Condensed",sans-serif;font-size:11.5px;
  font-weight:600;letter-spacing:.3em;color:var(--piel);opacity:.65;margin-bottom:12px}
.cat h3{font-size:21px;margin-bottom:8px}
.cat p{margin:0;font-size:13.5px;color:var(--gris);line-height:1.55}

.aviso-restringido{margin-top:44px;padding:32px 34px;border:1px solid var(--hilo);
  border-left:2px solid var(--piel-osc);background:rgba(255,255,255,.022)}
.aviso-restringido h3{font-size:23px;color:var(--piel);margin-bottom:12px}
.aviso-restringido p{margin:0;color:var(--gris2);font-size:15px}

/* ---------------- pasos ---------------- */
.pasos{list-style:none;margin:58px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 54px}
.pasos li{display:flex;gap:26px;padding:32px 0;border-top:1px solid var(--hilo)}
.paso-n{font-family:"Barlow Condensed",sans-serif;font-size:54px;font-weight:700;
  line-height:.9;color:transparent;-webkit-text-stroke:1px var(--piel);
  flex:0 0 auto;min-width:74px}
.pasos h3{font-size:25px;margin-bottom:12px}
.pasos p{margin:0;color:var(--gris2);font-size:15.5px}

/* ---------------- por que ---------------- */
.rejilla-por{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:56px;
  background:var(--hilo);border:1px solid var(--hilo)}
.por{background:var(--carbon);padding:36px 34px;transition:background .2s}
.por:hover{background:var(--humo)}
.por h3{font-size:25px;margin-bottom:12px;color:var(--piel)}
.por p{margin:0;color:var(--gris2);font-size:15.5px}

/* ---------------- preguntas ---------------- */
details{border-bottom:1px solid var(--hilo)}
details:first-of-type{border-top:1px solid var(--hilo);margin-top:54px}
summary{padding:24px 48px 24px 2px;cursor:pointer;list-style:none;position:relative;
  font-family:"Barlow Condensed",sans-serif;font-size:24px;font-weight:600;
  text-transform:uppercase;letter-spacing:0;color:var(--hueso);transition:color .16s}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--piel)}
summary::after{content:"";position:absolute;right:8px;top:50%;width:15px;height:1px;
  background:var(--piel);transition:background .2s}
summary::before{content:"";position:absolute;right:15px;top:50%;width:1px;height:15px;
  margin-top:-7px;background:var(--piel);transition:transform .22s,opacity .22s}
details[open] summary{color:var(--piel)}
details[open] summary::before{opacity:0;transform:rotate(90deg)}
details p{margin:0 0 28px;color:var(--gris2);font-size:15.5px;max-width:700px}

/* ---------------- contacto ---------------- */
.contacto-fila{display:grid;grid-template-columns:1fr 440px;gap:64px;align-items:start}
.contacto-texto{min-width:0}
.datos{margin:44px 0 0;display:grid;gap:0;border-top:1px solid var(--hilo)}
.datos div{padding:18px 0 18px 20px;border-bottom:1px solid var(--hilo);
  border-left:1px solid var(--piel)}
.datos dt{font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--piel);margin-bottom:4px}
.datos dd{margin:0;font-size:16.5px;color:var(--hueso)}
.datos a{color:var(--hueso);text-decoration:none;border-bottom:1px solid transparent}
.datos a:hover{color:var(--piel);border-bottom-color:var(--piel)}

/* el formulario es la unica pieza clara: contraste a proposito */
.formulario{background:var(--hueso);color:var(--tinta);padding:38px 34px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}
.formulario h3{font-size:28px;margin-bottom:6px;color:var(--tinta)}
.ayuda{margin:0 0 24px;font-size:13.5px;color:var(--tinta3)}
.formulario label{display:block;margin-bottom:16px;
  font-family:"Barlow Condensed",sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinta2)}
.formulario label small{font-family:"Barlow",sans-serif;font-weight:400;font-size:12px;
  letter-spacing:0;text-transform:none;color:var(--tinta3);margin-left:6px}
.formulario input,.formulario select,.formulario textarea{
  width:100%;margin-top:7px;padding:12px 13px;border:0;border-bottom:1px solid #cfcbc5;
  background:transparent;color:var(--tinta);
  font:15.5px/1.5 "Barlow",Helvetica,Arial,sans-serif;letter-spacing:0;text-transform:none;
  transition:border-color .16s}
.formulario textarea{resize:vertical;min-height:92px}
.formulario input:focus,.formulario select:focus,.formulario textarea:focus{
  outline:0;border-bottom-color:var(--tinta)}
.formulario input.malo{border-bottom-color:#9e3730}
.formulario .btn-solido{background:var(--tinta);color:var(--hueso);margin-top:10px}
.formulario .btn-solido:hover{background:var(--humo)}
.pie-form{margin:14px 0 0;text-align:center;min-height:18px}
.pie-form.error{color:#9e3730}

/* ---------------- pie ---------------- */
.pie{background:var(--negro);color:var(--gris);padding:0 0 44px;font-size:14px;
  border-top:1px solid var(--hilo)}
.pie .banda{margin-bottom:50px;background:none}
.pie-fila{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;align-items:start}
.pie-logo{height:24px;width:auto;filter:brightness(0) invert(1);opacity:.35;margin-bottom:16px}
.pie p{margin:0 0 6px}
.pie nav{display:flex;flex-direction:column;gap:11px}
.pie a{color:var(--gris);text-decoration:none;font-family:"Barlow Condensed",sans-serif;
  font-size:15px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.pie a:hover{color:var(--piel)}
.pie-legal{text-align:right;font-size:13px}
.pie-legal a{font-size:13px;letter-spacing:.12em}

/* ---------------- boton flotante ---------------- */
.wa-flotante{position:fixed;right:22px;bottom:22px;width:54px;height:54px;
  background:var(--piel);color:var(--negro);display:grid;place-items:center;z-index:40;
  cursor:pointer;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:0 12px 30px rgba(0,0,0,.55);transition:transform .18s,background .18s}
.wa-flotante:hover{transform:translateY(-2px);background:var(--blanco)}
.wa-flotante svg{width:29px;height:29px;fill:currentColor}

/* ---------------- responsivo ---------------- */
@media (max-width:1000px){
  .rejilla-cat{grid-template-columns:repeat(3,1fr)}
  .rejilla-servicios{grid-template-columns:repeat(2,1fr)}
  .contacto-fila{grid-template-columns:1fr;gap:44px}
  .portada-auto{right:-150px;bottom:80px;width:860px;opacity:.24}
  .ficha{grid-template-columns:repeat(2,1fr)}
  .ficha div:nth-child(3){padding-left:0;border-left:0}
}

@media (max-width:780px){
  html{scroll-padding-top:60px}
  .barra-fila{height:56px}
  .menu{position:fixed;inset:56px 0 auto 0;background:var(--carbon);flex-direction:column;
    align-items:stretch;gap:0;padding:8px 24px 28px;border-bottom:1px solid var(--hilo);
    transform:translateY(-130%);transition:transform .26s ease;
    max-height:calc(100vh - 56px);overflow-y:auto}
  .menu.abierto{transform:translateY(0)}
  .menu a{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.055);font-size:20px}
  .menu .menu-wa{margin-top:18px;border-bottom:0;justify-content:center}
  .hamburguesa{display:block}

  .portada{padding:60px 0 0}
  .portada-auto{width:720px;right:-200px;bottom:150px;opacity:.16}
  .portada-velo{background:
    linear-gradient(180deg, var(--negro) 10%, rgba(8,8,10,.8) 46%, rgba(8,8,10,.94) 100%)}
  .acciones{margin:34px 0 56px}
  .seccion{padding:66px 0}
  .seccion::before{top:16px;right:16px}
  .dos-modulos,.rejilla-servicios,.rejilla-por,.pasos{grid-template-columns:1fr}
  .modulo{border-left:0;border-top:1px solid var(--hilo);padding:40px 26px 34px}
  .modulo:first-child{border-top:0}
  .rejilla-cat{grid-template-columns:repeat(2,1fr)}
  .nota-caja{padding:28px 24px;gap:22px}
  .formulario{padding:30px 24px}
  .acciones .btn{flex:1 1 100%}
  .pasos li{padding:26px 0}
  .paso-n{font-size:40px;min-width:58px}
  .pie-fila{grid-template-columns:1fr;gap:28px}
  .pie-legal{text-align:left}
  .wa-flotante{width:50px;height:50px;right:16px;bottom:16px}
}

@media (max-width:440px){
  .rejilla-cat{grid-template-columns:1fr}
  .ficha{grid-template-columns:1fr}
  .ficha div{padding-left:0;border-left:0;border-top:1px solid var(--hilo)}
  .ficha div:first-child{border-top:0}
}

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

@media print{
  .barra,.wa-flotante,.formulario,.acciones,.portada-auto,.portada-foto,.portada-velo,
  .banda,.seccion::before{display:none}
  body{background:#fff;color:#000}
  .seccion,.portada{background:#fff;color:#000}
  h1,h2,h3,.titulo,.kicker{color:#000}
}