/* Promoauto · cerrajeriallavespanama.com
   Taller de llaves: rojo del logo como acento, azul noche como base, latón solo en ilustraciones.
   Listas regladas en vez de tarjetas; tipografía condensada tipo rótulo automotriz. */
:root{
  --ink:#0f1d2b;
  --navy:#0c2c4a;
  --red:#bf0411;
  --red-deep:#930310;
  --brass:#c8963e;
  --paper:#f3f5f7;
  --white:#ffffff;
  --muted:#58636f;
  --line:#d8dee4;
  --wa:#17833f;
  --wa-deep:#126a33;
  --on-dark:#c3d0dc;
  --f-display:"Barlow Condensed","Arial Narrow","Roboto Condensed",Arial,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:.98;letter-spacing:.005em;text-wrap:balance;margin:0;text-transform:uppercase}
h2{font-size:clamp(2.1rem,5.2vw,3.4rem)}
p{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--white);padding:10px 14px;z-index:99}
.skip:focus{left:12px;top:12px}
.label{font-family:var(--f-mono);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.band{padding-block:clamp(52px,7.5vw,92px)}
.paper{background:var(--paper)}
.dark{background:var(--navy);color:var(--white)}
.dark .label{color:var(--brass)}
.intro{display:grid;gap:14px;max-width:760px;margin-bottom:clamp(26px,4vw,42px)}
.intro p{color:var(--muted);font-size:1.08rem;max-width:60ch}
.dark .intro p{color:var(--on-dark)}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:6px;font-family:var(--f-display);font-weight:700;font-size:1.2rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s,transform .15s}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.btn:active{transform:translateY(1px)}
.btn-wa{background:var(--wa);color:var(--white)}.btn-wa:hover{background:var(--wa-deep)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}.btn-line:hover{background:var(--ink);color:var(--white)}
.dark .btn-line{color:var(--white);border-color:var(--white)}.dark .btn-line:hover{background:var(--white);color:var(--navy)}
.btn svg{width:22px;height:22px;flex:none}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* barra superior + header */
.topbar{background:var(--ink);color:var(--on-dark);font-size:.84rem}
.topbar .wrap{display:flex;justify-content:space-between;gap:4px 16px;flex-wrap:wrap;padding-block:7px}
.topbar b{color:var(--white);font-weight:600}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);margin-right:7px;vertical-align:middle}
.status.is-open .dot{background:var(--wa);box-shadow:0 0 0 3px rgba(23,131,63,.25)}
.status.is-closed .dot{background:var(--red)}
header.site{position:sticky;top:0;z-index:30;background:var(--white);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:70px}
.brand{display:flex;align-items:center}
.brand img{height:40px;width:auto}
.navlinks{display:flex;gap:24px;font-weight:600;font-size:.95rem}
.navlinks a{text-decoration:none;color:var(--muted)}.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--red)}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-actions .btn{min-height:42px;padding:0 16px;font-size:1.05rem;white-space:nowrap}
.menu-toggle{display:none;min-height:42px;padding:0 12px;border:2px solid var(--ink);border-radius:6px;background:var(--white);font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;color:var(--ink)}
@media (max-width:980px){
  .menu-toggle{display:inline-flex;align-items:center}
  .navlinks{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--white);border-bottom:2px solid var(--ink);padding:6px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px))}
  .navlinks.is-open{display:flex}
  .navlinks a{padding:12px 0;border-bottom:1px solid var(--line);font-size:1.05rem;color:var(--ink)}
}
@media (max-width:460px){.nav-actions .ntext{display:none}.nav-actions .btn{padding:0 12px}.brand img{height:32px}}

/* portada */
.hero{padding-block:clamp(26px,4vw,48px) 0;background:linear-gradient(180deg,var(--paper),var(--white))}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero-copy{display:grid;gap:18px;min-width:0}
.hero h1{font-size:clamp(3rem,8.4vw,5.2rem);line-height:.88}
.hero h1 em,.page-hero h1 em{font-style:normal;color:var(--red)}
.sub{font-size:1.15rem;color:var(--muted);max-width:48ch}
.proof{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;font-weight:700;font-size:.95rem}
.proof li{display:flex;align-items:center;gap:7px;background:var(--white);border:1.5px solid var(--line);border-radius:999px;padding:6px 12px 6px 8px;line-height:1.2}
.proof li::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--red);color:var(--white);font-size:.75rem;font-weight:800;flex:none}
.page-hero .proof{margin-top:16px}
@media (max-width:520px){.proof{gap:6px}.proof li{font-size:.85rem;padding:5px 10px 5px 6px}.proof li::before{width:18px;height:18px}}
.hero-photo{position:relative;margin:0;border-radius:14px;overflow:hidden;aspect-ratio:1079/1145;max-height:600px;width:100%;background:var(--paper)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.hero-photo figcaption{position:absolute;left:14px;bottom:14px}
.tag{display:inline-block;background:rgba(15,29,43,.86);color:var(--white);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:4px}
.tag b{color:var(--brass)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-photo{aspect-ratio:4/3}}
.strip{margin-top:clamp(40px,6vw,72px);border-block:1px solid var(--line);background:var(--white)}
.strip .wrap{display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:center;padding-block:16px;font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.strip a{text-decoration:none;color:var(--ink)}.strip a:hover{color:var(--red)}

/* páginas internas */
.page-hero{padding-block:clamp(26px,4vw,48px) clamp(40px,6vw,64px);background:linear-gradient(180deg,var(--paper),var(--white))}
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:18px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line)}
.crumbs a{color:var(--red);text-decoration:none}
.page-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,5vw,56px);align-items:start}
.page-grid>*{min-width:0}
.page-hero h1{font-size:clamp(2.5rem,6.6vw,4.6rem);line-height:.92;margin-block:10px 18px}
.facts{background:var(--navy);color:var(--white);border-radius:14px;padding:22px;display:grid;gap:14px}
.facts h2{font-size:1.5rem}
.facts dl{margin:0;display:grid;gap:10px}
.facts dt{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.facts dd{margin:2px 0 0;color:var(--on-dark)}
.facts dd b{color:var(--white);font-weight:600}
.facts a{color:var(--white)}
@media (max-width:900px){.page-grid{grid-template-columns:1fr}}
.feat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 28px;border-top:2px solid var(--ink)}
.feat li{padding:20px 0;border-bottom:1px solid var(--line);display:grid;gap:6px}
.feat h3{font-size:1.55rem}
.feat p{color:var(--muted)}
.prose{display:grid;gap:clamp(30px,4vw,44px);max-width:780px}
.prose section{display:grid;gap:12px}
.prose h2{font-size:clamp(1.8rem,4vw,2.5rem)}
.prose p{color:var(--ink);max-width:68ch}
.prose ul,.prose ol{margin:0;padding-left:1.2em;display:grid;gap:6px;max-width:66ch}
.prose h3{font-size:clamp(1.25rem,2.6vw,1.5rem);margin-top:6px}
.prose a{color:var(--red)}
.models{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.models li{padding:7px 14px;border:1.5px solid var(--line);border-radius:999px;background:var(--white);font-weight:600}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 24px;border-top:2px solid var(--ink);list-style:none;margin:0;padding:0}
.related a{display:flex;justify-content:space-between;gap:12px;padding:16px 2px;border-bottom:1px solid var(--line);text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:1.3rem;text-transform:uppercase;letter-spacing:.02em}
.related a::after{content:"→";color:var(--red)}
.related a:hover{color:var(--red)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.split>*{min-width:0}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* cotizador */
.order{display:grid;grid-template-columns:.9fr 1.1fr;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--white)}
.order-side{background:var(--navy);color:var(--white);padding:clamp(24px,4vw,40px);display:grid;align-content:space-between;gap:28px}
.order-side .label{color:var(--brass)}
.order-side h2{font-size:clamp(2rem,4.4vw,3rem)}
.order-side p{color:var(--on-dark)}
.order-side .num{font-family:var(--f-mono);font-size:.82rem;color:var(--on-dark);display:grid;gap:10px}
.order-side .num b{display:block;font-family:var(--f-display);font-size:1.9rem;letter-spacing:.04em;color:var(--white)}
.order form{padding:clamp(24px,4vw,40px);display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-content:start}
.field{display:grid;gap:6px;min-width:0}
.field>label,.field>.flabel{font-family:var(--f-mono);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field input{font:inherit;font-size:1rem;width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink)}
.field input:focus{outline:none;border-color:var(--red);background:var(--white)}
.full{grid-column:1/-1}
.chips{display:flex;flex-wrap:wrap;gap:8px;position:relative;border:0;margin:0;padding:0}
.chips input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.chips label{font-size:.95rem;font-weight:600;color:var(--ink);padding:9px 14px;border:1.5px solid var(--line);border-radius:999px;cursor:pointer;background:var(--white)}
.chips input:checked+label{background:var(--ink);border-color:var(--ink);color:var(--white)}
.chips input:focus-visible+label{outline:3px solid var(--brass);outline-offset:2px}
.order button.btn{width:100%}
.form-note{font-size:.85rem;color:var(--muted)}
@media (max-width:900px){.order{grid-template-columns:1fr}.order form{grid-template-columns:1fr 1fr}.field.year{grid-column:1/-1}}

/* servicios */
.svc{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.svc li{border-bottom:1px solid var(--line)}
.svc a{display:grid;grid-template-columns:72px 1fr auto;gap:20px;align-items:center;padding:22px 4px;text-decoration:none;transition:background .15s}
.svc a:hover{background:var(--white)}
.svc .code{font-family:var(--f-mono);font-size:.8rem;color:var(--red);font-weight:700}
.svc h3{font-size:clamp(1.6rem,3.4vw,2.2rem)}
.svc p{color:var(--muted);margin-top:6px;max-width:62ch}
.svc .go{font-family:var(--f-display);font-weight:700;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;color:var(--red);white-space:nowrap}
.svc a>div{min-width:0}
@media (max-width:640px){.svc a{grid-template-columns:1fr;gap:6px}}

/* videos */
.videos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.vcard{display:grid;gap:12px;align-content:start;min-width:0}
.vcard video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px;background:var(--ink)}
.vcard .yr{font-family:var(--f-mono);font-size:.78rem;color:var(--red);font-weight:700}
.vcard h3{font-size:1.75rem}
.vcard p{color:var(--muted);font-size:.95rem}
.videos.single{grid-template-columns:minmax(0,320px)}
@media (max-width:960px){.videos{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.videos{gap:12px}.vcard h3{font-size:1.35rem}}

/* proceso */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,36px);counter-reset:s;list-style:none;margin:0;padding:0}
.steps li{display:grid;gap:10px;align-content:start;padding-top:18px;border-top:2px solid var(--brass)}
.steps li::before{counter-increment:s;content:"Paso " counter(s);font-family:var(--f-mono);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.steps h3{font-size:1.9rem}
.steps p{color:var(--on-dark)}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* por qué + hoja de llave */
.why{display:grid;border-top:2px solid var(--ink)}
.why div{padding:20px 0;display:grid;gap:6px;border-bottom:1px solid var(--line)}
.why h3{font-size:1.6rem}
.why p{color:var(--muted)}
.blade-card{background:var(--navy);border-radius:14px;padding:22px;color:var(--white);display:grid;gap:12px;margin:0;min-width:0}
.blade-card .row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark)}
.blade-card .row b{color:var(--brass)}
.blade-card svg{width:100%;height:auto}
.blade-card figcaption{color:var(--on-dark);font-size:.95rem}

/* reseñas */
.reviews{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,48px);align-items:center}
.reviews>*{min-width:0}
.reviews blockquote{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,4.4vw,3rem);line-height:1;text-transform:uppercase}
.reviews blockquote span{color:var(--red)}
.rev-card{border:1.5px solid var(--line);border-radius:12px;padding:24px;display:grid;gap:14px;background:var(--white)}
.rev-card p{color:var(--muted)}
@media (max-width:800px){.reviews{grid-template-columns:1fr}}

/* marcas */
.brands{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.brands h3{font-family:var(--f-mono);font-size:.75rem;font-weight:700;letter-spacing:.12em;color:var(--muted);margin-bottom:12px}
.brands ul{list-style:none;margin:0;padding:0;display:grid}
.brands li a,.brands li span{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);font-family:var(--f-display);font-weight:700;font-size:1.3rem;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;color:var(--muted)}
.brands li a{color:var(--ink)}
.brands li a::after{content:"Ver →";font-family:var(--f-mono);font-size:.7rem;color:var(--red);letter-spacing:.06em}
.brands li a:hover{color:var(--red)}
@media (max-width:900px){.brands{grid-template-columns:1fr 1fr}}

/* ubicación */
.loc{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center}
.loc-photo{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:4/5;max-height:560px;background:var(--paper)}
.loc-photo img{width:100%;height:100%;object-fit:cover}
.loc-info{display:grid;gap:18px;min-width:0}
.loc-info address{font-style:normal;font-size:1.1rem}
.hours{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.hours td{padding:10px 0;border-bottom:1px solid var(--line)}
.hours td+td{text-align:right;font-family:var(--f-mono);font-size:.92rem}
.hours tr.closed td{color:var(--muted)}
@media (max-width:900px){.loc{grid-template-columns:1fr}.loc-photo{aspect-ratio:4/3}}

/* faq */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,56px)}
.faq>*{min-width:0}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:2px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-weight:700;font-size:1.1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);color:var(--red);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:20px;color:var(--muted);max-width:62ch}
@media (max-width:900px){.faq{grid-template-columns:1fr}}

/* cierre + footer */
.final{display:grid;gap:24px;justify-items:start}
.final h2{font-size:clamp(2.6rem,7.6vw,5.2rem);line-height:.9}
.final h2 span{color:var(--brass)}
.final .phone{font-family:var(--f-mono);color:var(--on-dark);font-size:.9rem}
footer.site{background:var(--ink);color:var(--on-dark);font-size:.95rem}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;padding-block:48px}
.foot-logo{display:inline-block;background:var(--white);border-radius:8px;padding:10px 14px}
.foot-logo img{height:32px;width:auto}
footer.site h2{margin:0 0 10px;font-family:var(--f-mono);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer.site a{text-decoration:none}footer.site a:hover{color:var(--white);text-decoration:underline}
footer.site address{font-style:normal}
.legal{border-top:1px solid #24364a;padding-block:16px;font-size:.82rem;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
@media (max-width:900px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot{grid-template-columns:1fr}}

/* barra fija móvil */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:none;grid-template-columns:1fr 1.4fr;gap:10px;padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:var(--white);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(15,29,43,.08)}
.mbar .btn{min-height:48px;font-size:1.1rem;padding:0 10px}
@media (max-width:900px){.mbar{display:grid}body{padding-bottom:76px}}

/* 404 */
.notfound{min-height:50vh;display:grid;align-content:center;gap:20px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.prose .models{display:flex;flex-wrap:wrap;gap:8px;padding:0;max-width:none}
.page-hero + .band{padding-top:clamp(20px,3vw,36px)}
/* Móvil: solo la barra fija (WhatsApp y fijo) como contacto en la primera vista */
@media (max-width:900px){
  .nav-actions .btn-wa{display:none}
  .hero-copy .ctas,.page-hero .page-grid .ctas{display:none}
}


/* opiniones reales (2026-10-30) */
.quotes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(28px,4vw,44px)}
.quotes figure{margin:0;border:1.5px solid var(--line);border-radius:12px;padding:20px;display:grid;gap:10px;align-content:start;background:var(--white)}
.quotes .stars{color:var(--brass);letter-spacing:.12em;font-size:1rem}
.quotes blockquote{margin:0;font-size:1rem;line-height:1.45;color:var(--ink)}
.quotes figcaption{font-weight:700;font-size:.88rem;color:var(--muted)}
@media (max-width:900px){.quotes{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.quotes{grid-template-columns:1fr}}
/* english */
.en-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:start}
.en-grid>*{min-width:0}
.en-list{list-style:none;margin:0 0 24px;padding:0;border-top:2px solid var(--ink)}
.en-list li{padding:14px 0;border-bottom:1px solid var(--line);font-weight:600}
.en-quote{margin:0;border-left:4px solid var(--red);padding:6px 0 6px 20px;display:grid;gap:12px}
.en-quote blockquote{margin:0;font-family:var(--f-display);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.15}
.en-quote figcaption{font-weight:700;color:var(--muted);font-size:.9rem}
.en-quote p{color:var(--muted);margin:0}
@media (max-width:900px){.en-grid{grid-template-columns:1fr}}