/* =================================================================
   AUTO PISTO 30-30 — Sitio v3 · tipografía slab + condensada  ·  sistema visual
   ================================================================= */
:root{
  --red:#e5342a;        --red-deep:#bf241c;
  --blue:#1d2ea3;       --blue-deep:#141f73;
  --yellow:#ffc828;     --yellow-deep:#e8a900;
  --cream:#fbf3e2;      --cream-2:#f4e9cf;
  --ink:#1b1a17;        --ink-soft:#5c574c;
  --white:#fff;
  --wa:#1eb15a;
  --shadow:5px 6px 0 var(--ink);
  --shadow-sm:3px 4px 0 var(--ink);
  --bd:2.5px solid var(--ink);
  --maxw:1100px;
  --ff-display:'Alfa Slab One',Georgia,serif;
  --ff-sign:'Barlow Condensed',system-ui,sans-serif;
  --ff-body:'Barlow',system-ui,sans-serif;
  --accent:var(--red);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--ff-body);font-size:17.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--ff-display);font-weight:400;line-height:1.06;margin:0;letter-spacing:-.005em}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ff-sign);font-weight:700;font-size:17px;line-height:1;text-transform:uppercase;letter-spacing:.05em;
  padding:14px 22px;border:var(--bd);border-radius:14px;background:var(--white);color:var(--ink);
  box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .12s,box-shadow .12s;white-space:nowrap}
.btn:hover{transform:translate(-1px,-2px);box-shadow:5px 7px 0 var(--ink)}
.btn:active{transform:translate(1px,2px);box-shadow:1px 2px 0 var(--ink)}
.btn--primary{background:var(--accent);color:var(--white)}
.btn--blue{background:var(--blue);color:var(--white)}
.btn--yellow{background:var(--yellow);color:var(--ink)}
.btn--wa{background:var(--wa);color:var(--white)}
.btn--ghost{background:transparent}
.btn--lg{font-size:19px;padding:16px 26px}
.btn .ic{width:20px;height:20px;flex:0 0 auto}

/* route shield badge */
.shield{font-family:var(--ff-sign);font-weight:700;color:var(--white);background:var(--blue);
  border:3px solid var(--white);outline:2.5px solid var(--ink);border-radius:10px;
  display:inline-grid;place-items:center;text-align:center;line-height:.92;
  box-shadow:var(--shadow-sm)}
.eyebrow{font-family:var(--ff-sign);font-weight:700;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);display:inline-block}

/* dashed road line helper */
.lane-dash{background:
  repeating-linear-gradient(var(--yellow) 0 18px, transparent 18px 38px)}

/* =================================================================
   HEADER
   ================================================================= */
.site-head{position:sticky;top:0;z-index:60;background:var(--cream);
  border-bottom:var(--bd)}
.site-head .wrap{display:flex;align-items:center;gap:14px;height:66px}
.logo-lockup{display:flex;align-items:center;gap:10px;min-width:0}
.logo-lockup img{height:46px;width:auto}
.logo-lockup .wm{font-family:var(--ff-display);font-weight:400;line-height:1;font-size:17px;letter-spacing:-.01em}
.logo-lockup .wm b{color:var(--red)}
.logo-lockup .wm span{display:block;font-family:var(--ff-sign);font-weight:700;font-size:12px;color:var(--blue);letter-spacing:.16em;text-transform:uppercase}
.site-head .spacer{flex:1}
.head-cta{display:none}
@media(min-width:720px){.head-cta{display:inline-flex}}

/* =================================================================
   HERO
   ================================================================= */
.hero{position:relative;background:var(--accent);color:var(--white);overflow:hidden;
  padding:34px 0 0}
.hero .wrap{position:relative;z-index:2}
.hero .plate{display:inline-flex;align-items:center;gap:9px;background:var(--white);color:var(--ink);
  border:var(--bd);border-radius:999px;padding:7px 15px 7px 9px;box-shadow:var(--shadow-sm);
  font-family:var(--ff-sign);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.hero .plate .sh{font-family:var(--ff-sign);font-weight:700;letter-spacing:.1em;background:var(--blue);color:#fff;font-size:13px;
  padding:4px 9px;border-radius:7px;line-height:1}
.hero h1{font-size:clamp(34px,9.2vw,64px);max-width:14ch;text-shadow:3px 3px 0 var(--red-deep)}
.hero h1 em{font-style:normal;color:var(--yellow);text-shadow:3px 3px 0 var(--ink)}
.hero p.lede{font-size:clamp(17px,4.4vw,21px);max-width:34ch;margin:16px 0 0;font-weight:500;
  color:#fff;opacity:.96}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
.hero .scene{position:relative;height:232px;margin-top:14px;z-index:2}
@media(min-width:720px){
  .hero{padding-top:54px}
  .hero .scene{height:280px;margin-top:0;margin-bottom:-6px}
}
/* the road at the bottom of hero */
.hero-road{position:absolute;left:0;right:0;bottom:0;height:120px;background:#26241f;z-index:1;
  border-top:6px solid var(--ink)}
.hero-road::before{content:"";position:absolute;top:50%;left:0;right:0;height:7px;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,var(--yellow) 0 40px,transparent 40px 74px)}
.hero-road::after{content:"";position:absolute;top:0;left:0;right:0;height:14px;
  background:repeating-linear-gradient(90deg,#fff 0 26px,transparent 26px 60px);opacity:.5}
.hero .carro{position:absolute;bottom:44px;width:min(52%,216px);left:50%;--hx:-50%;transform:translateX(var(--hx));
  filter:drop-shadow(0 10px 0 rgba(0,0,0,.22));z-index:3;will-change:transform}
@media(min-width:720px){.hero .carro{left:auto;right:2%;--hx:0;width:340px;bottom:60px}}

/* clouds / hills decoration */
.hero .puff{position:absolute;background:rgba(255,255,255,.16);border-radius:50%;z-index:1}

/* =================================================================
   SECTION SHELL + EXIT-SIGN HEADERS
   ================================================================= */
.section{padding:54px 0}
.section.alt{background:var(--cream-2)}
.section.blue{background:var(--blue);color:#fff}
.section.ink{background:var(--ink);color:var(--cream)}
.sec-head{display:flex;flex-direction:column;gap:6px;margin-bottom:26px}
.sec-head .eyebrow{margin-bottom:2px}
.sec-head h2{font-size:clamp(27px,6.6vw,42px)}
.sec-head p{margin:6px 0 0;color:var(--ink-soft);max-width:42ch;font-size:16.5px}
.section.blue .sec-head p,.section.ink .sec-head p{color:rgba(255,255,255,.82)}
.section.blue .eyebrow{color:var(--yellow)}

/* exit-sign tag */
.exitsign{align-self:flex-start;background:#1f7a3d;color:#fff;border:3px solid #fff;outline:2.5px solid var(--ink);
  border-radius:9px;padding:7px 14px;font-family:var(--ff-sign);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;box-shadow:var(--shadow-sm);
  display:inline-flex;align-items:center;gap:8px;margin-bottom:14px}
.exitsign .arw{font-size:16px}


/* ============ ESPECIALIDAD · PREPARADAS ============ */
.especial{position:relative;background:var(--red);color:var(--white);border:var(--bd);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.especial::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:repeating-linear-gradient(90deg,var(--yellow) 0 26px,var(--ink) 26px 52px);border-top:var(--bd)}
.especial-in{display:grid;gap:22px;padding:26px 22px 40px}
@media(min-width:840px){.especial-in{grid-template-columns:1fr .82fr;gap:38px;padding:34px 34px 46px;align-items:center}}
.especial .stamp{display:inline-flex;align-items:center;gap:9px;background:var(--yellow);color:var(--ink);border:var(--bd);border-radius:11px;box-shadow:var(--shadow-sm);padding:6px 13px;font-family:var(--ff-sign);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase}
.especial h3{font-size:clamp(28px,7.4vw,44px);margin:16px 0 0;line-height:1.02}
.especial p{margin:12px 0 0;font-size:17px;max-width:40ch;color:rgba(255,255,255,.9)}
.sabores{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 0;padding:0;list-style:none}
.sabores li{background:var(--white);color:var(--ink);border:var(--bd);border-radius:11px;box-shadow:var(--shadow-sm);padding:8px 13px;font-family:var(--ff-sign);font-weight:700;font-size:16px;letter-spacing:.04em;text-transform:uppercase}
.especial .cta-row{margin-top:24px}
.especial .art{display:grid;place-items:center}
.especial .art .disc{width:min(74vw,300px);aspect-ratio:1;border-radius:50%;border:var(--bd);background:var(--cream);box-shadow:var(--shadow);display:grid;place-items:center}
.especial .art .disc svg{width:58%;height:58%}
.sub-head{display:flex;align-items:baseline;gap:14px;margin:54px 0 18px}
.sub-head h3{font-size:clamp(21px,5vw,28px);white-space:nowrap}
.sub-head .ln{flex:1;height:0;border-top:2px dashed var(--cream-2)}

/* =================================================================
   ANTOJOS GRID
   ================================================================= */
.antojos{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:620px){.antojos{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.antojos{grid-template-columns:repeat(4,1fr)}}
.antojo{position:relative;background:var(--white);border:var(--bd);border-radius:18px;
  box-shadow:var(--shadow);padding:18px 14px 16px;display:flex;flex-direction:column;gap:10px;
  transition:transform .14s,box-shadow .14s;cursor:default}
.antojo:hover{transform:translate(-2px,-3px);box-shadow:7px 9px 0 var(--ink)}
.antojo .glyph{width:54px;height:54px;border-radius:14px;border:var(--bd);display:grid;place-items:center;
  background:var(--cream)}
.antojo .glyph svg{width:32px;height:32px}
.antojo h3{font-size:17px;line-height:1.15}
.antojo small{color:var(--ink-soft);font-size:13.5px;font-weight:500}
.antojo .tab{position:absolute;top:-1px;right:14px;width:34px;height:14px;background:var(--accent);
  border:var(--bd);border-top:none;border-radius:0 0 8px 8px}
.antojo.c1 .glyph{background:#ffe7e5}.antojo.c2 .glyph{background:#e6ecff}
.antojo.c3 .glyph{background:#fff4d6}.antojo.c4 .glyph{background:#e3f5e8}
.antojo.c5 .glyph{background:#f3e8ff}.antojo.c6 .glyph{background:#ffeede}
.antojo.c7 .glyph{background:#e0f3f7}.antojo.c8 .glyph{background:#fde6ef}

/* =================================================================
   PASOS — cómo funciona el autopisto
   ================================================================= */
.pasos{display:grid;gap:16px}
@media(min-width:760px){.pasos{grid-template-columns:repeat(3,1fr)}}
.paso{background:rgba(255,255,255,.08);border:2.5px solid rgba(255,255,255,.85);border-radius:18px;
  padding:22px 20px;position:relative}
.paso .num{font-family:var(--ff-sign);font-weight:700;font-size:17px;background:var(--yellow);color:var(--ink);
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:2.5px solid var(--ink);
  box-shadow:var(--shadow-sm);margin-bottom:14px}
.paso h3{font-size:20px;color:#fff}
.paso p{margin:8px 0 0;color:rgba(255,255,255,.85);font-size:15.5px}

/* =================================================================
   RUTA — 4 sucursales (the showpiece)
   ================================================================= */
.ruta{position:relative}
.ruta-track{position:relative;margin-top:10px}
/* the lane graphic, left side */
.lane{position:absolute;left:14px;top:0;bottom:0;width:58px;z-index:0}
.lane .road{position:absolute;inset:0;background:#26241f;border-left:5px solid var(--ink);
  border-right:5px solid var(--ink);border-radius:30px}
.lane .road::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:6px;transform:translateX(-50%);
  background:repeating-linear-gradient(var(--yellow) 0 20px,transparent 20px 42px)}
.carro-ruta{position:absolute;left:14px;width:86px;z-index:5;--tx:0;
  filter:drop-shadow(0 6px 0 rgba(0,0,0,.25));will-change:transform;pointer-events:none;
  transform:translateX(var(--tx)) rotate(var(--rot,0deg))}
@media(min-width:720px){
  .lane{left:50%;transform:translateX(-50%)}
  .carro-ruta{left:50%;--tx:-50%}
}
.stops{position:relative;z-index:2;display:flex;flex-direction:column;gap:30px;
  padding-left:92px}
@media(min-width:720px){
  .stops{padding-left:0;max-width:760px;margin:0 auto}
  .stop:nth-child(odd){padding-right:calc(50% + 46px)}
  .stop:nth-child(even){padding-left:calc(50% + 46px)}
}
.stop{position:relative}
.stop .marker{position:absolute;left:-78px;top:14px;width:50px;height:54px;z-index:4;
  display:grid;place-items:center}
@media(min-width:720px){
  .stop:nth-child(odd) .marker{left:auto;right:calc(50% - 25px)}
  .stop:nth-child(even) .marker{left:calc(50% - 25px)}
}
.marker .shield{width:50px;height:54px;font-size:17px;border-radius:10px;
  clip-path:polygon(50% 0,100% 22%,100% 78%,50% 100%,0 78%,0 22%);background:var(--blue);
  transition:transform .2s,background .2s}
.stop.active .marker .shield{background:var(--red);transform:scale(1.16)}
.stop-card{background:var(--white);border:var(--bd);border-radius:18px;box-shadow:var(--shadow);
  overflow:hidden;transition:transform .18s,box-shadow .18s}
.stop.active .stop-card{transform:translateY(-3px);box-shadow:7px 9px 0 var(--ink)}

.histo .foto-1999{width:100%;height:300px;object-fit:cover;border:var(--bd);border-radius:20px;box-shadow:var(--shadow);display:block;filter:sepia(.34) saturate(1.18) contrast(1.07) brightness(.97)}


/* foto 1999: virado cálido para amarrar con la paleta */

.histo .photo-wrap::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;mix-blend-mode:multiply;background:linear-gradient(150deg,rgba(255,200,40,.3),rgba(229,52,42,.22) 62%,rgba(27,26,23,.3))}
.histo .photo-wrap::before{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;z-index:2;mix-blend-mode:screen;background:radial-gradient(70% 55% at 30% 22%,rgba(255,231,168,.2),transparent 70%)}
.stop-card .body{padding:15px 16px 16px}
.stop-card .toprow{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.stop-card h3{font-size:18px;line-height:1.15}
.stop-card .addr{color:var(--ink-soft);font-size:14.5px;margin:2px 0 0}
.stop-card .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px}
.tag{font-family:var(--ff-sign);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;border:2px solid var(--ink);
  border-radius:8px;padding:3px 9px;line-height:1.1}
.tag.open{background:#e3f5e8;color:#1f7a3d;border-color:#1f7a3d}
.tag.soon{background:var(--cream-2);color:var(--ink-soft)}
.stop-card .hrs{font-size:13.5px;color:var(--ink-soft)}
.stop-card .lk{margin-top:13px;display:flex;gap:9px;flex-wrap:wrap}
.stop-card .lk .btn{font-size:14px;padding:9px 14px}

/* =================================================================
   HISTORIA 1999
   ================================================================= */
.histo .wrap{display:grid;gap:24px;align-items:center}
@media(min-width:820px){.histo .wrap{grid-template-columns:1fr 1fr;gap:40px}}
.histo .big{font-family:var(--ff-display);font-size:clamp(56px,16vw,108px);color:var(--yellow);
  line-height:.85;text-shadow:4px 4px 0 var(--ink)}
.histo h2{font-size:clamp(25px,6.2vw,38px);margin:6px 0 0}
.histo p{margin:14px 0 0;color:rgba(255,255,255,.86);font-size:16.5px;max-width:46ch}
.histo .photo-wrap{position:relative}
.histo .foto-1999{width:100%;height:300px;object-fit:cover;display:block;border:var(--bd);border-radius:20px;box-shadow:var(--shadow);filter:sepia(.34) saturate(1.18) contrast(1.07) brightness(.97)}
.histo .stat-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.histo .stat{background:rgba(255,255,255,.07);border:2.5px solid rgba(255,255,255,.8);border-radius:14px;
  padding:12px 16px;text-align:center}
.histo .stat b{font-family:var(--ff-display);font-size:24px;display:block;color:var(--yellow)}
.histo .stat small{font-size:12.5px;color:rgba(255,255,255,.8)}

/* =================================================================
   CONTACTO / FOOTER
   ================================================================= */
.contacto{background:var(--accent);color:#fff}
.contacto .wrap{display:grid;gap:22px}
@media(min-width:820px){.contacto .wrap{grid-template-columns:1.1fr .9fr;gap:40px}}
.contacto h2{font-size:clamp(27px,6.6vw,42px)}
.contacto p{font-size:17px;opacity:.95;margin:12px 0 0;max-width:40ch}
.contacto .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.contacto .card{background:#fff;color:var(--ink);border:var(--bd);border-radius:20px;box-shadow:var(--shadow);
  padding:22px}
.contacto .card h3{font-size:19px;margin-bottom:12px}
.contacto .row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:2px dashed var(--cream-2)}
.contacto .row:last-child{border-bottom:none}
.contacto .row .ic{width:38px;height:38px;border:var(--bd);border-radius:11px;display:grid;place-items:center;
  flex:0 0 auto;background:var(--cream)}
.contacto .row .ic svg{width:20px;height:20px}
.contacto .row b{display:block;font-family:var(--ff-sign);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.03em}
.contacto .row small{color:var(--ink-soft)}
.socials{display:flex;gap:10px;margin-top:8px}
.socials a{width:46px;height:46px;border:var(--bd);border-radius:12px;display:grid;place-items:center;
  background:var(--cream);color:var(--ink);box-shadow:var(--shadow-sm);transition:transform .12s}
.socials a:hover{transform:translate(-1px,-2px)}
.socials a svg{width:22px;height:22px}

footer.foot{background:var(--ink);color:var(--cream);padding:30px 0 40px}
footer.foot .wrap{display:flex;flex-direction:column;gap:14px}
footer.foot .top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
footer.foot .wm{font-family:var(--ff-display);font-weight:400;font-size:19px}
footer.foot .wm b{color:var(--yellow)}
footer.foot .legal{font-size:13px;color:rgba(255,255,255,.6);line-height:1.5}
footer.foot .plus18{display:inline-flex;align-items:center;gap:8px;border:2px solid rgba(255,255,255,.5);
  border-radius:10px;padding:6px 12px;font-family:var(--ff-sign);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.08em}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}