/*
Theme Name: JP Auto Repair
Theme URI: https://jpautorepairandbodyshop.com
Author: FGCHH TechLabs by Genexis
Description: Tema cinematico de alto nivel para JP Auto Repair & Body Shop (carbon + cromo + rojo). EN base + boton ES.
Version: 1.0
*/
:root{
  --carbon:#0b0b0d; --carbon2:#141418; --steel:#1b1d22; --panel:#17191e;
  --chrome1:#f4f6f8; --chrome2:#b7bdc6; --chrome3:#7b818b;
  --red:#e4002b; --red2:#ff2142;
  --ink:#eceef1; --muted:#9298a1; --line:#2a2d34;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--carbon);color:var(--ink);
  font-family:"Barlow",system-ui,Arial,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.ttl{font-family:"Oswald",Impact,sans-serif;font-weight:600;letter-spacing:.5px;line-height:1.08;margin:0 0 .4em;text-transform:uppercase}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.red{color:var(--red)}
.eyebrow{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:3px;
  font-size:13px;color:var(--red2);font-weight:600;margin:0 0 14px}
.chrome{background:linear-gradient(180deg,#fff 0%,#cfd4da 45%,#8b9099 55%,#eef1f4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* carbon texture */
.carbon{background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0 2px,transparent 2px 4px),
  repeating-linear-gradient(-45deg,rgba(0,0,0,.25) 0 2px,transparent 2px 4px),
  var(--carbon2)}

/* ===== NAV ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;background:linear-gradient(180deg,rgba(8,8,10,.92),rgba(8,8,10,.55));backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.nav-logo{display:flex;align-items:center;gap:12px}
.nav-logo img{height:46px;mix-blend-mode:screen}
.nav-name{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;font-size:17px;letter-spacing:1px;line-height:1}
.nav-name small{display:block;font-size:11px;color:var(--muted);letter-spacing:2px}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a.lnk{font-family:"Oswald",sans-serif;text-transform:uppercase;font-size:14px;letter-spacing:1px;color:var(--chrome2)}
.nav-links a.lnk:hover{color:#fff}
.nav-call{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;padding:9px 16px;border-radius:4px;
  font-family:"Oswald",sans-serif;text-transform:uppercase;font-size:14px;letter-spacing:1px;font-weight:600}
.nav-call:hover{background:var(--red2)}
.lang{border:1px solid var(--line);border-radius:999px;display:flex;overflow:hidden;font-family:"Oswald",sans-serif;font-size:12px}
.lang button{background:transparent;color:var(--muted);border:0;padding:6px 11px;cursor:pointer;letter-spacing:1px;text-transform:uppercase}
.lang button.on{background:var(--red);color:#fff}
.burger{display:none;background:transparent;border:0;color:#fff;font-size:26px;cursor:pointer}

/* language visibility */
[data-lang]{display:none}
body.en [data-lang="en"]{display:inline}
body.es [data-lang="es"]{display:inline}
.block[data-lang]{display:none}
body.en .block[data-lang="en"]{display:block}
body.es .block[data-lang="es"]{display:block}

/* ===== HERO ===== */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-ov{position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse at 50% 40%,rgba(10,10,12,.35),rgba(8,8,10,.86) 75%),
  linear-gradient(180deg,rgba(8,8,10,.6),rgba(8,8,10,.35) 40%,rgba(8,8,10,.95))}
.hero-c{position:relative;z-index:2;padding:120px 20px 80px;max-width:900px}
.hero-logo{height:150px;margin:0 auto 10px;mix-blend-mode:screen;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
.hero h1{font-size:clamp(38px,7vw,78px);font-weight:700}
.hero h1 .chrome{display:inline-block}
.hero .sub{color:var(--chrome2);font-size:clamp(16px,2.4vw,21px);max-width:680px;margin:14px auto 28px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:"Oswald",sans-serif;text-transform:uppercase;
  letter-spacing:1px;font-weight:600;font-size:16px;padding:15px 26px;border-radius:5px;cursor:pointer;border:0;transition:.15s}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 30px rgba(228,0,43,.35)}
.btn-red:hover{background:var(--red2);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid var(--chrome3)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.hero-phone{display:block;margin-top:22px;font-family:"Oswald",sans-serif;letter-spacing:1px;color:var(--chrome2);font-size:15px}
.hero-phone b{color:#fff;font-size:20px}

/* trust strip */
.strip{background:#08080a;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 40px;padding:16px 20px}
.strip span{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:13px;color:var(--chrome2)}
.strip span b{color:var(--red2)}

/* ===== SECTIONS ===== */
section.sec{padding:84px 0}
.sec-head{text-align:center;max-width:760px;margin:0 auto 48px}
.sec-head h2{font-size:clamp(28px,4.5vw,46px)}
.sec-head p{color:var(--muted);font-size:18px;margin:8px 0 0}
.alt{background:var(--carbon2)}

.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:linear-gradient(180deg,var(--panel),#101217);border:1px solid var(--line);border-radius:10px;padding:26px;
  position:relative;overflow:hidden;transition:.18s}
.card:hover{border-color:#3a3e47;transform:translateY(-3px)}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--red),transparent)}
.card h3{font-size:22px;margin-bottom:10px}
.card p{color:var(--muted);margin:0 0 12px;font-size:15.5px}
.card .deliver{font-size:13.5px;color:var(--chrome3);border-top:1px dashed var(--line);padding-top:10px;margin-top:4px}
.ic{width:46px;height:46px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  background:rgba(228,0,43,.12);color:var(--red2);font-size:24px}

/* why list */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.why .item{display:flex;gap:16px}
.why .num{font-family:"Oswald",sans-serif;font-size:30px;color:var(--red);line-height:1;min-width:46px}
.why h3{font-size:20px;margin-bottom:6px}
.why p{color:var(--muted);margin:0;font-size:15.5px}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:24px;position:relative}
.step .n{font-family:"Oswald",sans-serif;font-size:40px;color:#23262d;position:absolute;right:16px;top:8px}
.step h3{font-size:19px;margin:6px 0 8px}
.step p{color:var(--muted);font-size:15px;margin:0}

/* about */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.about .quote{font-size:19px;line-height:1.7;color:var(--chrome2)}
.about .plate{background:var(--carbon);border:1px solid var(--line);border-radius:12px;padding:30px;text-align:center}
.about .plate img{height:120px;margin:0 auto 14px;mix-blend-mode:screen}

/* reviews placeholder */
.rev{text-align:center;max-width:680px;margin:0 auto}
.rev .stars{color:var(--red2);font-size:26px;letter-spacing:4px;margin-bottom:12px}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.form label{display:block;font-family:"Oswald",sans-serif;text-transform:uppercase;font-size:12px;letter-spacing:1px;color:var(--chrome2);margin:0 0 6px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form input,.form select,.form textarea{width:100%;background:#0d0e11;border:1px solid var(--line);border-radius:6px;
  color:#fff;padding:12px 13px;font-family:inherit;font-size:15px;margin-bottom:14px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--red)}
.info .line{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
.info .line .k{font-family:"Oswald",sans-serif;text-transform:uppercase;font-size:12px;letter-spacing:1px;color:var(--red2)}
.info .line .v{color:var(--chrome2);font-size:15.5px}
.hours td{padding:3px 14px 3px 0;color:var(--chrome2);font-size:15px}
.map{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:16px;height:220px}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(.3) invert(.9) hue-rotate(180deg)}

/* footer */
footer.ft{background:#070709;border-top:1px solid var(--line);padding:40px 0;text-align:center;color:var(--muted);font-size:14px}
footer.ft .fl{display:flex;gap:10px;justify-content:center;align-items:center;margin-bottom:10px}
footer.ft img{height:40px;mix-blend-mode:screen}

/* floating mobile */
.float{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;grid-template-columns:1fr 1fr}
.float a{padding:15px;text-align:center;font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1px;color:#fff;font-size:15px}
.float .c{background:var(--red)}
.float .e{background:#1c1f25;border-top:1px solid var(--line)}

@media(max-width:860px){
  .nav{padding:10px 14px}
  .nav .nav-links a.lnk{display:none}
  .nav-name{display:none}
  .nav-logo img{height:40px}
  .nav-links{gap:12px}
  .nav-call{padding:8px 13px;font-size:13px}
  .lang button{padding:5px 10px}
  .g3,.g2,.why,.contact,.about{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .form .row{grid-template-columns:1fr}
  .float{display:grid}
  section.sec{padding:60px 0}
  .hero-logo{height:110px}
}

/* ===== THEME TOGGLE + LIGHT MODE (aditivo · el oscuro es el default y no se toca) ===== */
.theme-tgl{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--chrome2);
  cursor:pointer;font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.theme-tgl:hover{color:#fff;border-color:var(--chrome3)}
body.light{--carbon:#eef0f3;--carbon2:#e4e7eb;--panel:#ffffff;--ink:#15171c;--muted:#58606b;--line:#dde1e6}
body.light{background:var(--carbon)}
/* marco cinematográfico siempre oscuro: nav, hero, strip, footer, plate (logo siempre sobre oscuro) */
body.light .strip{background:#101216}
body.light .about .plate{background:#101216;border-color:#23262d}
/* contenido en claro */
body.light .card{background:#ffffff;border-color:#e3e6ea;box-shadow:0 2px 12px rgba(20,25,35,.06)}
body.light .card p{color:#58606b}
body.light .card .deliver{color:#80868f;border-top-color:#e3e6ea}
body.light .carbon{background:var(--carbon2)}
body.light .step{background:#ffffff;border-color:#e3e6ea}
body.light .step .n{color:#e4e7eb}
body.light .why p,body.light .sec-head p,body.light .step p,body.light .rev p{color:#58606b}
body.light .form input,body.light .form select,body.light .form textarea{background:#ffffff;color:#15171c;border-color:#d7dbe0}
body.light .info .line .v,body.light .hours td{color:#3a4049}
body.light .map iframe{filter:none}