/* Talleres Bielas · taller de ejemplo */
:root{
  --asfalto:#1C1F22; --asfalto-2:#25292D; --asfalto-3:#30353A; --acero:#8A939B; --blanco:#F4F4F1;
  --amarillo:#FFD400; --amarillo-d:#E6BE00; --rojo:#E5372A; --verde:#2BB673;
  --f-c:"Barlow Condensed", "Arial Narrow", sans-serif; --f:"Barlow", system-ui, sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1); --gut:clamp(16px,4vw,44px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--asfalto);color:var(--blanco);font:400 17px/1.55 var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
h1,h2,h3{margin:0}
p{margin:0}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px}
[id]{scroll-margin-top:80px}
.wrap{width:min(1240px,100% - 2*var(--gut));margin-inline:auto}
.hl{background:var(--amarillo);color:var(--asfalto);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 26px;border:2px solid transparent;font:700 17px/1 var(--f-c);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:background .2s,color .2s,transform .3s var(--ease)}
.btn:hover{transform:translateX(3px)}
.btn--sm{min-height:42px;padding:0 18px;font-size:15px}
.btn--y{background:var(--amarillo);color:var(--asfalto)}
.btn--y:hover{background:#fff}
.btn--o{background:transparent;color:var(--blanco);box-shadow:inset 0 0 0 2px var(--blanco);clip-path:none}
.btn--o:hover{background:var(--blanco);color:var(--asfalto)}
.btn--full{width:100%}

.nav{position:sticky;top:0;z-index:60;background:rgba(28,31,34,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:3px solid var(--amarillo)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:70px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 15px/1 var(--f-c);text-transform:uppercase;letter-spacing:.14em}
.logo b{display:block;font:800 30px/1 var(--f-c);letter-spacing:.02em;color:var(--amarillo)}
.logo__g{width:44px;height:44px;animation:gear 12s linear infinite}
@keyframes gear{to{transform:rotate(360deg)}}
.nav__l{display:none;gap:26px;font:600 16px/1 var(--f-c);text-transform:uppercase;letter-spacing:.1em}
.nav__l a{text-decoration:none;color:var(--acero);transition:color .2s}
.nav__l a:hover{color:var(--amarillo)}
@media (min-width:920px){.nav__l{display:flex}}

.hero{position:relative;min-height:min(92svh,860px);display:flex;align-items:center;overflow:hidden}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;filter:saturate(1.15) contrast(1.1);transform:scale(1.1);animation:z 2.4s var(--ease) forwards}
@keyframes z{to{transform:scale(1)}}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,31,34,.96) 0%,rgba(28,31,34,.85) 45%,rgba(28,31,34,.3) 100%)}
@media (max-width:760px){.hero__bg::after{background:linear-gradient(180deg,rgba(28,31,34,.6),rgba(28,31,34,.95) 55%)}}
.hero__c{position:relative;padding:110px 0 90px}
.tag{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--f-c);letter-spacing:.2em;text-transform:uppercase;color:var(--amarillo)}
.tag span{color:var(--verde);animation:bl 1.4s infinite}
@keyframes bl{50%{opacity:.2}}
.hero__t{font:800 clamp(3.4rem,10vw,8rem)/.88 var(--f-c);text-transform:uppercase;margin-top:18px;letter-spacing:-.005em}
.hero__t .hl{display:inline-block;transform:skew(-6deg);animation:slam .8s .3s var(--ease) both}
@keyframes slam{from{transform:skew(-6deg) translateX(-30px);opacity:0}}
.hero__p{max-width:48ch;margin-top:24px;color:#C9CED2;font-size:clamp(1rem,1.3vw,1.15rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
@media (max-width:520px){.hero__cta .btn{flex:1 1 100%}}
.hero__n{list-style:none;padding:0;margin:44px 0 0;display:flex;flex-wrap:wrap;gap:30px}
.hero__n b{display:block;font:800 3rem/1 var(--f-c);color:var(--amarillo);font-variant-numeric:tabular-nums}
.hero__n span{font-size:14px;color:var(--acero);text-transform:uppercase;letter-spacing:.08em}
.hazard{position:absolute;left:0;right:0;bottom:0;height:16px;background:repeating-linear-gradient(-45deg,var(--amarillo) 0 18px,var(--asfalto) 18px 36px);animation:hz 2s linear infinite;background-size:51px 16px}
@keyframes hz{to{background-position:51px 0}}

.sec{padding:clamp(80px,11vw,140px) 0}
.k{font:600 15px/1 var(--f-c);letter-spacing:.2em;text-transform:uppercase;color:var(--amarillo);margin-bottom:16px}
.h2{font:800 clamp(2.6rem,7vw,5.4rem)/.9 var(--f-c);text-transform:uppercase;max-width:15ch}
.lead{margin-top:16px;color:#C9CED2;max-width:56ch}
.head{margin-bottom:44px}

.svc{display:grid;gap:2px;background:var(--asfalto-3)}
@media (min-width:640px){.svc{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.svc{grid-template-columns:repeat(3,1fr)}}
.s{background:var(--asfalto);padding:34px 30px;position:relative;overflow:hidden;transition:background .3s}
.s::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--amarillo);transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.s:hover{background:var(--asfalto-2)}
.s:hover::before{transform:none}
.s svg{width:52px;height:52px;color:var(--amarillo);margin-bottom:20px;transition:transform .5s var(--ease)}
.s:hover svg{transform:rotate(-12deg) scale(1.1)}
.s h3{font:700 28px/1 var(--f-c);text-transform:uppercase}
.s p{color:#B3BAC0;margin-top:10px}
.s__p{display:inline-block;margin-top:18px;font:700 16px/1 var(--f-c);letter-spacing:.08em;text-transform:uppercase;color:var(--asfalto);background:var(--amarillo);padding:6px 10px}

.quote{background:var(--blanco);color:var(--asfalto)}
.quote .lead{color:#4B5258}
.quote .k{color:#9B7F00}
.qg{display:grid;gap:40px;align-items:start;grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){.qg{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:60px}.qr{position:sticky;top:100px}}
.qf fieldset{border:0;padding:0;margin:30px 0 0}
.qf legend{font:700 20px/1 var(--f-c);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg label,.checks label{cursor:pointer;position:relative}
.seg input,.checks input{position:absolute;opacity:0}
.seg span{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border:2px solid var(--asfalto);font-weight:600;transition:.2s}
.seg input:checked+span{background:var(--asfalto);color:var(--amarillo)}
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.checks span{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 14px;border:2px solid #D4D6D2;font-weight:600;background:#fff;transition:.2s}
.checks span::before{content:"";width:20px;height:20px;border:2px solid var(--asfalto);flex:none;transition:.2s}
.checks input:checked+span{border-color:var(--asfalto)}
.checks input:checked+span::before{background:var(--amarillo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10l4 4 8-8' fill='none' stroke='%231C1F22' stroke-width='3'/%3E%3C/svg%3E") center/14px no-repeat}
.seg input:focus-visible+span,.checks input:focus-visible+span{outline:3px solid var(--amarillo);outline-offset:2px}
.qr{background:var(--asfalto);color:var(--blanco);padding:30px 26px;clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%)}
.qr__k{font:600 14px/1 var(--f-c);letter-spacing:.2em;text-transform:uppercase;color:var(--acero)}
.qr__v{font:800 clamp(3.4rem,8vw,5rem)/1 var(--f-c);color:var(--amarillo);margin:10px 0 16px;display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.qr__v small{font-size:.5em;color:var(--acero)}
.qr__l{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:6px;color:#C9CED2;font-size:15px}
.qr__l li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--asfalto-3);padding-bottom:6px}
.qr__book{border-top:2px solid var(--asfalto-3);padding-top:20px}
.days{display:flex;gap:6px;overflow-x:auto;margin:12px 0 14px;padding-bottom:4px}
.days button{flex:none;width:60px;padding:8px 0;border:2px solid var(--asfalto-3);background:transparent;cursor:pointer;display:grid;justify-items:center;font:600 13px/1.2 var(--f-c);text-transform:uppercase}
.days button b{font-size:24px}
.days button.is-on{background:var(--amarillo);color:var(--asfalto);border-color:var(--amarillo)}
.days button:disabled{opacity:.3;cursor:not-allowed}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fld{display:grid;gap:4px}
.fld span{font:600 13px/1 var(--f-c);letter-spacing:.12em;text-transform:uppercase;color:var(--acero)}
.fld input{min-height:48px;border:2px solid var(--asfalto-3);background:var(--asfalto-2);padding:0 12px;font-size:16px;width:100%}
.fld input:focus{outline:0;border-color:var(--amarillo)}
.fld.is-bad input{border-color:var(--rojo)}
.err{color:#FF8277;font-weight:600;min-height:1.3em;margin:8px 0}
.qr__ok{border-top:2px solid var(--asfalto-3);padding-top:20px;animation:up .5s var(--ease) both}
@keyframes up{from{opacity:0;transform:translateY(12px)}}
.qr__ok h3{font:800 32px/1 var(--f-c);text-transform:uppercase;color:var(--amarillo)}
.qr__ok p{margin-top:8px;color:#C9CED2}
.qr__ok .btn{margin-top:16px}

.estado{background:var(--asfalto-2)}
.demo-plate{border:0;background:var(--amarillo);color:var(--asfalto);font:700 15px/1 var(--f-c);padding:4px 8px;cursor:pointer;letter-spacing:.06em}
.track{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.plate{display:flex;align-items:stretch;background:#fff;border:3px solid #111;border-radius:8px;overflow:hidden;height:66px;flex:1 1 300px;max-width:420px}
.plate__eu{display:flex;flex-direction:column;align-items:center;justify-content:center;width:42px;background:#1E4BB8;color:#fff;font:700 16px/1 var(--f-c)}
.plate__eu i{color:#FFD400;font-style:normal;font-size:12px;margin-bottom:4px}
.plate input{flex:1;border:0;background:transparent;color:#111;font:800 36px/1 var(--f-c);letter-spacing:.12em;text-transform:uppercase;padding:0 14px;min-width:0}
.plate input:focus{outline:0}
.plate:focus-within{box-shadow:0 0 0 4px var(--amarillo)}
.track .btn{min-height:66px}
.status{margin-top:36px;background:var(--asfalto);padding:30px 26px;animation:up .5s var(--ease) both}
.status__h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:26px}
.status__car{font:800 32px/1 var(--f-c);text-transform:uppercase}
.status__car small{display:block;font:500 15px/1.4 var(--f);text-transform:none;color:var(--acero);margin-top:6px}
.status__eta{background:var(--amarillo);color:var(--asfalto);font:700 18px/1 var(--f-c);text-transform:uppercase;padding:10px 14px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
@media (min-width:860px){.steps{grid-template-columns:repeat(5,1fr)}}
.steps li{position:relative;padding:0 0 26px 44px;color:var(--acero)}
@media (min-width:860px){.steps li{padding:46px 14px 0 0}}
.steps li::before{content:"";position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;border:3px solid var(--asfalto-3);background:var(--asfalto);z-index:1}
.steps li::after{content:"";position:absolute;left:13px;top:28px;bottom:0;width:3px;background:var(--asfalto-3)}
@media (min-width:860px){.steps li::after{left:28px;right:0;top:13px;bottom:auto;width:auto;height:3px}}
.steps li:last-child::after{display:none}
.steps li.is-done{color:var(--blanco)}
.steps li.is-done::before{background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10l3 3 7-7' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E") center/14px no-repeat;border-color:var(--verde)}
.steps li.is-done::after{background:var(--verde)}
.steps li.is-now{color:var(--amarillo)}
.steps li.is-now::before{border-color:var(--amarillo);background:var(--amarillo);box-shadow:0 0 0 0 rgba(255,212,0,.6);animation:pl 1.6s infinite}
@keyframes pl{70%{box-shadow:0 0 0 12px rgba(255,212,0,0)}100%{box-shadow:0 0 0 0 rgba(255,212,0,0)}}
.steps b{display:block;font:700 20px/1.1 var(--f-c);text-transform:uppercase}
.steps small{font-size:14px}
.notes{margin-top:26px;display:grid;gap:12px}
@media (min-width:860px){.notes{grid-template-columns:1.3fr 1fr}}
.note{background:var(--asfalto-2);padding:18px;display:flex;gap:14px;align-items:flex-start}
.note img{width:120px;height:90px;object-fit:cover;flex:none}
.note p{color:#C9CED2;font-size:15px}
.note b{display:block;color:var(--blanco);font:700 18px/1.2 var(--f-c);text-transform:uppercase;margin-bottom:4px}
.approve{background:var(--amarillo);color:var(--asfalto);padding:18px}
.approve b{display:block;font:800 22px/1.1 var(--f-c);text-transform:uppercase}
.approve p{margin:6px 0 12px;font-size:15px}
.approve .row{display:flex;gap:8px}
.approve button{flex:1;min-height:46px;border:2px solid var(--asfalto);background:var(--asfalto);color:var(--amarillo);font:700 16px/1 var(--f-c);text-transform:uppercase;cursor:pointer}
.approve button+button{background:transparent;color:var(--asfalto)}
.nf{color:#FF8277;font-weight:600}

.tg{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.tg{grid-template-columns:1fr 1fr;gap:60px}}
.tg__imgs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tg__imgs figure{margin:0;overflow:hidden;aspect-ratio:3/4}
.tg__imgs figure:nth-child(2){margin-top:40px}
.tg__imgs img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2);transition:transform 1.2s var(--ease)}
.tg__imgs figure:hover img{transform:scale(1.06)}
.dl{margin:30px 0 0;display:grid;gap:14px}
.dl div{border-left:3px solid var(--amarillo);padding-left:14px}
.dl dt{font:600 14px/1 var(--f-c);letter-spacing:.16em;text-transform:uppercase;color:var(--acero)}
.dl dd{margin:6px 0 0}
.dl small{color:var(--acero)}

.foot{border-top:3px solid var(--amarillo);padding:40px 0 100px;font-size:14px;color:var(--acero)}
.foot__in{display:grid;gap:8px}
.foot__l{font:600 18px/1 var(--f-c);text-transform:uppercase;letter-spacing:.14em;color:var(--blanco)}
.foot__l b{color:var(--amarillo);font-size:28px}

.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.logo__g,.hazard{animation:none}}