/* =====================================================================
   Mike and Lens: "El MAL" design system
   Colombian chiva-bus sign painting, sombrero vueltiao pintas, Wayuu weave.
   ===================================================================== */
:root{
  --yellow:#FCD116; --yellow-lt:#FFE677;
  --blue:#0B3D91; --blue-dk:#062a66;
  --red:#D8232A; --red-dk:#9E141A;
  --green:#1F8A43; --green-dk:#135c2b;
  --black:#1C1712; --cream:#F5EBD3; --cream-2:#E9DAB4; --pink:#F28DA9;
  --wa:#1FAF54;
  --sign:"Ultra", "Rockwell Extra Bold", Georgia, serif;
  --tuscan:"Sancreek", "Ultra", Georgia, serif;
  --brush:"Yellowtail", "Brush Script MT", cursive;
  --body:"Alegreya Sans", "Trebuchet MS", sans-serif;
  /* sombrero vueltiao pinta: concentric black diamonds on cream fibre */
  --pinta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Crect width='36' height='36' fill='%23F5EBD3'/%3E%3Cpath d='M18 2L34 18L18 34L2 18Z' fill='%231C1712'/%3E%3Cpath d='M18 8L28 18L18 28L8 18Z' fill='%23F5EBD3'/%3E%3Cpath d='M18 13L23 18L18 23L13 18Z' fill='%231C1712'/%3E%3Cpath d='M0 0H7L0 7ZM36 0H29L36 7ZM0 36H7L0 29ZM36 36H29L36 29Z' fill='%231C1712'/%3E%3C/svg%3E");
  /* Wayuu mochila kanás: zigzag + diamonds */
  --wayuu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='28'%3E%3Crect width='48' height='28' fill='%23D8232A'/%3E%3Cpath d='M0 2.5H48M0 25.5H48' stroke='%231C1712' stroke-width='3'/%3E%3Cpolyline points='0,21 12,7 24,21 36,7 48,21' fill='none' stroke='%23FCD116' stroke-width='3.5'/%3E%3Cpath d='M12 13L16 17L12 21L8 17ZM36 13L40 17L36 21L32 17Z' fill='%230B3D91'/%3E%3Cpath d='M24 6L27 9L24 12L21 9ZM0 6L3 9L0 12ZM48 6L45 9L48 12Z' fill='%231F8A43'/%3E%3Ccircle cx='12' cy='17' r='1.3' fill='%23F5EBD3'/%3E%3Ccircle cx='36' cy='17' r='1.3' fill='%23F5EBD3'/%3E%3C/svg%3E");
  --confetti:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='200'%3E%3Cg opacity='.9'%3E%3Crect x='20' y='24' width='15' height='6' rx='1' fill='%23D8232A' transform='rotate(30 27 27)'/%3E%3Crect x='120' y='40' width='13' height='5' fill='%230B3D91' transform='rotate(-20 126 42)'/%3E%3Crect x='200' y='16' width='13' height='5' fill='%231F8A43' transform='rotate(60 206 18)'/%3E%3Ccircle cx='70' cy='90' r='4' fill='%23F28DA9'/%3E%3Cpath d='M160 110q8-10 16 0t16 0' fill='none' stroke='%23D8232A' stroke-width='3' stroke-linecap='round'/%3E%3Crect x='40' y='150' width='14' height='5' fill='%230B3D91' transform='rotate(70 46 152)'/%3E%3Crect x='100' y='170' width='12' height='5' fill='%23D8232A' transform='rotate(-45 106 172)'/%3E%3Ccircle cx='222' cy='150' r='3.5' fill='%231F8A43'/%3E%3Cpath d='M8 112q6 8 12 0t12 0' fill='none' stroke='%230B3D91' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='180' cy='70' r='3' fill='%231C1712'/%3E%3C/g%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:100px}
body{margin:0;background:var(--cream);color:var(--black);font-family:var(--body);font-size:1.2rem;line-height:1.55;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
picture{display:contents}
a{color:inherit}
button{font:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
.skip{position:absolute;left:12px;top:-80px;z-index:200;background:var(--black);color:var(--cream);padding:10px 16px;border-radius:10px;font-weight:800}
.skip:focus{top:12px}
.prose p{max-width:62ch;margin:0 0 1.05em}
.prose a{text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:3px;font-weight:700}

/* ============ sign-painted lettering ============ */
.sign{position:relative;margin:0;font-family:var(--sign);font-weight:400;line-height:1.04;letter-spacing:.005em;
  color:var(--st,var(--black));-webkit-text-stroke:var(--sw,.15em) var(--st,var(--black));filter:drop-shadow(.05em .06em 0 var(--dr,var(--red)))}
.sign::after{content:attr(data-text);position:absolute;inset:0;-webkit-text-stroke:0;color:transparent;pointer-events:none;
  background:linear-gradient(180deg,var(--fa,var(--cream)) 0 56%,var(--fb,var(--yellow)) 56% 100%) 0 .02em/100% 1.04em repeat-y;
  -webkit-background-clip:text;background-clip:text}
.on-blue{--fa:var(--cream);--fb:var(--yellow);--st:var(--black);--dr:var(--red)}
.on-cream{--fa:var(--yellow);--fb:var(--red);--st:var(--blue-dk);--dr:var(--black)}
.on-yellow{--fa:#2f63c4;--fb:var(--blue);--st:var(--black);--dr:var(--red)}
.on-red{--fa:var(--cream);--fb:var(--yellow);--st:var(--black);--dr:var(--blue)}
.on-green{--fa:var(--yellow);--fb:var(--cream);--st:var(--black);--dr:var(--red)}
.head{margin:0 0 44px}
.head h1,.head h2{font-size:clamp(2.2rem,4vw,3.7rem);padding-bottom:.2em}
.head.sm h2{font-size:clamp(2rem,3.2vw,3rem)}
.echo{margin:.95rem 0 0 .15rem;font-family:var(--brush);font-weight:400;font-size:clamp(1.55rem,2.4vw,2.1rem);line-height:1.1;color:var(--red)}
.echo.y{color:var(--yellow)}
.echo.c{color:var(--cream)}
.ramo{position:absolute;pointer-events:none}

/* ============ bands ============ */
.pinta-band{height:36px;background:var(--pinta) 0 0/36px 36px repeat-x;border-block:4px solid var(--black)}
.wayuu-band{height:28px;background:var(--wayuu) 0 0/48px 28px repeat-x}
.flag-stripes{height:18px;background:linear-gradient(var(--yellow) 0 6px,var(--blue) 6px 12px,var(--red) 12px 18px)}

/* ============ buttons: painted plaques ============ */
.plaque{display:inline-flex;align-items:center;justify-content:center;gap:.45em;text-decoration:none;font-family:var(--sign);font-weight:400;font-size:1.15rem;line-height:1.1;
  padding:.8em 1.3em .75em;border:3px solid var(--black);border-radius:14px;background:var(--red);color:var(--cream);
  --ring:var(--yellow);box-shadow:inset 0 0 0 3px var(--bg-c,var(--red)),inset 0 0 0 5px var(--ring),5px 6px 0 var(--black);transition:transform .15s,box-shadow .15s}
.plaque:hover{transform:translate(-2px,-2px);box-shadow:inset 0 0 0 3px var(--bg-c,var(--red)),inset 0 0 0 5px var(--ring),7px 8px 0 var(--black)}
.plaque:active{transform:translate(3px,3px);box-shadow:inset 0 0 0 3px var(--bg-c,var(--red)),inset 0 0 0 5px var(--ring),2px 3px 0 var(--black)}
.plaque.cream{--bg-c:var(--cream);--ring:var(--blue);background:var(--cream);color:var(--blue)}
.plaque.blue{--bg-c:var(--blue);background:var(--blue);color:var(--cream)}
.plaque.green{--bg-c:var(--green);background:var(--green);color:var(--cream)}
.plaque.wa{--bg-c:var(--wa);--ring:var(--cream);background:var(--wa);color:#fff}
.plaque.small{font-size:.95rem;padding:.6em 1em .55em;border-radius:10px}
.plaque svg{width:1.2em;height:1.2em;flex:0 0 auto}
.plaque[disabled]{opacity:.6;cursor:progress}

/* ============ nav ============ */
.top{position:sticky;top:0;z-index:50;background:var(--yellow);box-shadow:0 5px 0 var(--blue),0 10px 0 var(--red),0 13px 0 var(--black)}
.nav{display:flex;align-items:center;gap:20px;padding:10px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:50% 42%;border:3px solid var(--black);background:var(--cream)}
.brand b{display:block;font-family:var(--sign);font-weight:400;font-size:1.3rem;line-height:1;color:var(--blue)}
.brand small{display:block;font-size:.95rem;font-weight:700;color:var(--red);line-height:1.2;margin-top:3px}
.links{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.links a{display:block;text-decoration:none;font-weight:800;font-size:1.08rem;color:var(--blue);padding:6px 12px;border-radius:8px}
.links a:hover,.links a[aria-current="page"]{background:var(--blue);color:var(--yellow)}
.lang{display:flex;align-items:center;border:3px solid var(--black);border-radius:10px;overflow:hidden;background:var(--cream);flex:0 0 auto}
.lang a{text-decoration:none;font-weight:800;font-size:1rem;padding:6px 11px;line-height:1.1;color:var(--black)}
.lang a[aria-current="true"]{background:var(--red);color:var(--cream)}
.lang a:not([aria-current="true"]):hover{background:var(--yellow)}
.lang span{width:3px;align-self:stretch;background:var(--black)}
.menu-toggle{display:none;border:3px solid var(--black);background:var(--cream);border-radius:10px;padding:6px 12px;font-weight:800;font-size:1rem;line-height:1.1}

/* ============ home hero ============ */
.hero{position:relative;background:var(--blue);overflow:hidden;min-height:clamp(640px,80vh,760px);display:flex;align-items:stretch}
.hero-photo{position:absolute;top:0;bottom:0;right:0;width:52%;margin:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:32% 40%}
/* slideshow: crossfade + slow push-in */
.slides{position:absolute;inset:0;overflow:hidden;background:var(--blue-dk)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.3s ease}
.slide.on{opacity:1;z-index:1}
/* .leaving keeps the same animation running on the outgoing photo, so its zoom
   carries on smoothly while it fades out instead of snapping back to full size */
.slide.on img,.slide.leaving img{animation:push 7.5s ease-out both}
@keyframes push{from{transform:scale(1.09)}to{transform:scale(1)}}
.slide-ctl{position:absolute;z-index:4;left:22px;bottom:22px;display:flex;align-items:center;gap:10px;background:var(--cream);border:3px solid var(--black);border-radius:12px;padding:6px 8px 6px 6px;box-shadow:4px 5px 0 var(--black)}
.slide-tag{font-family:var(--sign);font-size:.95rem;line-height:1.1;text-decoration:none;white-space:nowrap;background:var(--red);color:var(--cream);border:2px solid var(--black);border-radius:8px;padding:6px 10px 5px}
.slide-tag:hover{background:var(--blue)}
.dots{display:flex}
.dots button{width:24px;height:24px;padding:0;border:0;background:none;display:grid;place-items:center}
.dots button::before{content:"";width:11px;height:11px;border-radius:50%;border:2px solid var(--black);background:var(--cream);transition:transform .2s,background .2s}
.dots button:hover::before{transform:scale(1.25)}
.dots button[aria-current="true"]::before{background:var(--red);transform:scale(1.2)}
.pause{width:30px;height:30px;flex:0 0 auto;border-radius:50%;border:2px solid var(--black);background:var(--yellow);display:grid;place-items:center;padding:0}
.pause span{width:10px;height:11px;border-inline:3px solid var(--black)}
.pause[data-paused="true"] span{width:0;height:0;border-block:6px solid transparent;border-right:0;border-left:10px solid var(--black);margin-left:3px}
.hero-layer{position:absolute;inset:0 auto 0 0;width:60%}
.hero-layer.l1{background:var(--red);clip-path:polygon(0 0,100% 0,86% 100%,0 100%)}
.hero-layer.l2{width:calc(60% - 14px);background:var(--yellow);clip-path:polygon(0 0,100% 0,86% 100%,0 100%)}
.hero-layer.l3{width:calc(60% - 26px);background:radial-gradient(circle at 12% 18%,rgba(255,255,255,.06) 0 180px,transparent 181px),var(--blue);clip-path:polygon(0 0,100% 0,86% 100%,0 100%)}
.hero-copy{position:relative;z-index:3;width:min(1240px,100% - 48px);margin-inline:auto;padding:88px 0 96px;display:flex;flex-direction:column;justify-content:center}
.hero-copy > *{max-width:min(640px,50vw)}
.hola{margin:0 0 10px;font-family:var(--brush);font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1;color:var(--yellow)}
.hero h1{margin:0;font-size:clamp(2.6rem,4.3vw,4.2rem)}
.hero h1 .sign{display:block}
.hero .echo{color:var(--cream);font-size:clamp(1.45rem,2.2vw,1.95rem);margin-top:14px}
.hero .who{margin:22px 0 0;font-size:clamp(1.15rem,1.5vw,1.35rem);font-weight:800;color:var(--yellow);line-height:1.35}
.hero .what{margin:6px 0 0;color:var(--cream);font-size:1.15rem;max-width:52ch}
.ctas{display:flex;flex-wrap:wrap;gap:18px;margin-top:30px}
.hero .ctas{max-width:none}
.hero .ramo.tl{left:-38px;top:-30px;width:190px;transform:rotate(-8deg)}
.hero .ramo.bl{left:-30px;bottom:-34px;width:160px;transform:rotate(12deg) scaleX(-1)}
.hero .ramo.tr{left:calc(60% - 190px);top:-22px;width:170px;transform:rotate(18deg);z-index:4}
/* flowers grow into place on load (scale/rotate compose with each ramo's own transform) */
.hero .ramo,.phero .ramo{animation:grow 1.25s cubic-bezier(.2,.85,.25,1.3) both}
.hero .ramo.tl{animation-delay:.2s}
.hero .ramo.tr{animation-delay:.45s}
.hero .ramo.bl{animation-delay:.7s}
.phero .ramo{animation-delay:.25s}
@keyframes grow{0%{scale:0;rotate:-40deg;opacity:0}35%{opacity:1}100%{scale:1;rotate:0deg;opacity:1}}
.sticker{position:absolute;z-index:4;right:34px;bottom:34px;width:176px;height:176px;border-radius:50%;display:grid;place-items:center;text-align:center;text-decoration:none;
  background:var(--cream);border:4px solid var(--black);box-shadow:0 0 0 6px var(--yellow),0 0 0 10px var(--black),6px 10px 0 10px rgba(0,0,0,.25);transform:rotate(-9deg);transition:transform .2s}
.sticker:hover{transform:rotate(-3deg) scale(1.04)}
.sticker span{display:block;padding:0 18px;font-weight:800;font-size:1rem;line-height:1.15;color:var(--black)}
.sticker b{display:block;font-family:var(--sign);font-weight:400;font-size:2.4rem;line-height:1;color:var(--red);margin-bottom:4px}
.sticker i{display:block;font-style:normal;font-family:var(--brush);font-size:1.35rem;color:var(--blue);margin-top:4px}

/* ============ inner page header ============ */
.phero{position:relative;overflow:hidden;background:var(--blue);color:var(--cream);padding:72px 0 64px}
.phero::before{content:"";position:absolute;inset:0 0 0 auto;width:34%;background:var(--red);clip-path:polygon(22% 0,100% 0,100% 100%,0 100%)}
.phero::after{content:"";position:absolute;inset:0 0 0 auto;width:calc(34% - 14px);background:var(--yellow);clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);opacity:.9}
.phero .wrap{position:relative;z-index:2}
.phero .head{margin:0}
.phero h1{font-size:clamp(2.3rem,4.4vw,4rem);max-width:17ch}
.phero .lead{margin:22px 0 0;max-width:56ch;font-size:clamp(1.15rem,1.6vw,1.35rem);font-weight:600}
.phero .ramo{right:3%;top:50%;translate:0 -50%;width:min(300px,26vw);z-index:3}
.phero.has-photo{padding:0}
.phero.has-photo .ph-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:stretch}
.phero.has-photo .ph-copy{padding:72px 0 64px}
.phero.has-photo::before,.phero.has-photo::after{display:none}
.ph-photo{position:relative;margin:0 calc((100vw - min(1240px,100vw - 48px)) / -2) 0 0;border-left:8px solid var(--yellow);box-shadow:-14px 0 0 var(--red)}
.ph-photo img{width:100%;height:100%;object-fit:cover}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 18px;padding:0;font-weight:700;font-size:1rem;color:var(--yellow)}
.crumbs li+li::before{content:"◆";margin-right:6px;color:var(--red);font-size:.8em}
.crumbs a{color:var(--cream);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.price-tag{display:inline-flex;align-items:baseline;gap:10px;margin-top:26px;background:var(--yellow);color:var(--black);border:4px solid var(--black);border-radius:14px;padding:8px 18px 10px;box-shadow:6px 7px 0 var(--red);transform:rotate(-2deg)}
.price-tag b{font-family:var(--sign);font-weight:400;font-size:2.4rem;line-height:1;color:var(--red);text-shadow:2px 2px 0 var(--black)}
.price-tag span{font-weight:800}

/* ============ chiva ============ */
.chiva-sec{position:relative;background:var(--cream);padding:96px 0 0;overflow:hidden}
.chiva-head{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end}
.chiva-head .head{margin:0}
.chiva-head p{margin:0 0 6px;max-width:46ch;font-size:1.2rem}
.chiva-head p b{color:var(--red)}
/* 'Did you know?' fact card */
.factcard{position:relative;justify-self:start;max-width:470px;margin:18px 0 6px;padding:34px 26px 22px 26px;background:#fffaf0;border:4px solid var(--black);border-radius:16px;box-shadow:7px 8px 0 var(--red);transform:rotate(1.4deg);overflow:visible}
.factcard::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;border-radius:12px 12px 0 0;border-bottom:3px solid var(--black);background:linear-gradient(var(--yellow) 0 4px,var(--blue) 4px 8px,var(--red) 8px 12px)}
.factcard .fc-tag{position:absolute;top:-20px;left:18px;margin:0;padding:5px 14px 6px;font-family:var(--sign);font-size:1.05rem;line-height:1.1;color:var(--blue-dk);background:var(--yellow);border:3px solid var(--black);border-radius:10px;box-shadow:3px 4px 0 var(--black);transform:rotate(-4deg)}
.factcard .fc-bus{position:absolute;right:16px;top:-24px;width:58px;transform:rotate(6deg)}
.factcard p:not(.fc-tag){margin:0;font-size:1.15rem;line-height:1.5}
.factcard:hover .fc-bus{animation:busbob .6s ease-in-out 2}
@keyframes busbob{0%,100%{translate:0 0}50%{translate:-4px -3px}}
.stage{position:relative;margin-top:44px;padding-top:10px}
.puff.trail{z-index:1}
.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:78px;z-index:0;
  background:linear-gradient(transparent 36px,var(--yellow) 36px 42px,transparent 42px) 0 0/90px 100% repeat-x,linear-gradient(var(--black) 0 4px,#4a443c 4px)}
.stage::before{content:"";position:absolute;left:0;right:0;bottom:0;height:78px;z-index:1;
  background:linear-gradient(90deg,#4a443c 0 50px,transparent 50px 90px) 0 36px/90px 6px repeat-x}
.bus-scroll{position:relative;z-index:2;width:min(1400px,100% - 32px);margin:0 auto}
.bus{position:relative;padding-bottom:56px;will-change:transform}
.bus.out{transform:translateX(calc(-100vw - 100%))}
.bus.rolling{transition:transform 1.9s cubic-bezier(.16,.72,.26,1)}
.rockable{position:relative;transform-origin:55% 100%}
.rockable.rock{animation:rock .95s cubic-bezier(.3,.6,.3,1)}
@keyframes rock{0%{transform:none}14%{transform:translateY(-7px) rotate(-1.3deg)}34%{transform:translateY(2px) rotate(.9deg)}54%{transform:translateY(-3px) rotate(-.5deg)}74%{transform:rotate(.25deg)}100%{transform:none}}
.rack{position:relative;height:50px;margin:0 138px 0 20px;display:flex;align-items:flex-end;gap:14px;padding:0 30px 10px}
.rack::before{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;border:4px solid var(--black);border-bottom:0;border-radius:8px 8px 0 0;background:repeating-linear-gradient(90deg,var(--black) 0 4px,transparent 4px 46px)}
.bag{position:relative;display:block;border:3px solid var(--black);border-radius:7px}
.bag.b1{width:74px;height:30px;background:var(--red)}
.bag.b1::after{content:"";position:absolute;left:28px;top:-10px;width:14px;height:8px;border:3px solid var(--black);border-bottom:0;border-radius:6px 6px 0 0}
.bag.b2{width:52px;height:38px;background:var(--green);border-radius:16px 16px 6px 6px}
.bag.b3{width:110px;height:24px;background:var(--pinta) 0 0/24px 24px;border-radius:12px}
.bag.b4{width:60px;height:34px;background:var(--blue)}
.bag.b4::after{content:"";position:absolute;inset:8px 20px;border-radius:50%;background:var(--cream);border:3px solid var(--black)}
.bag.b5{width:84px;height:28px;background:var(--wayuu) 0 0/34px 20px;border-radius:14px 14px 4px 4px}
.bag.b6{width:46px;height:36px;background:var(--yellow)}
.body{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) 78px 118px;align-items:end}
.rear{align-self:stretch;background:var(--blue);border:4px solid var(--black);border-right:0;border-radius:22px 0 0 12px;position:relative}
.rear::before{content:"";position:absolute;left:5px;right:5px;top:30px;bottom:48px;border-left:3px solid var(--yellow);border-right:3px solid var(--yellow);background:repeating-linear-gradient(var(--yellow) 0 3px,transparent 3px 18px)}
.cabin{position:relative;background:var(--yellow);border:4px solid var(--black);border-radius:0 18px 0 0;overflow:hidden}
.roofline{height:22px;background:radial-gradient(circle at 11px 22px,var(--cream) 0 7px,transparent 7.5px) 0 0/22px 22px repeat-x,var(--red);border-bottom:4px solid var(--black)}
.ruta{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 6px;padding:10px 70px 12px;background:var(--yellow);border-bottom:4px solid var(--black)}
.ruta .lbl{font-family:var(--brush);font-size:2.3rem;line-height:1;color:var(--red);margin-right:8px;text-shadow:2px 2px 0 var(--black)}
.ruta .ramo{width:70px;top:50%;translate:0 -50%}
.ruta .ramo.a{left:4px}.ruta .ramo.b{right:4px;transform:scaleX(-1)}
.stop{position:relative;border:0;background:none;padding:4px 14px 3px;border-radius:10px;font-family:var(--tuscan);font-size:1.6rem;line-height:1.15;color:var(--blue);transition:background .2s,color .2s}
.stop + .stop::before{content:"";position:absolute;left:-6px;top:50%;width:8px;height:8px;background:var(--red);transform:translateY(-50%) rotate(45deg);border:1.5px solid var(--black)}
.stop:hover{color:var(--red)}
.stop[aria-pressed="true"]{background:var(--red);color:var(--cream);box-shadow:inset 0 0 0 2px var(--black),inset 0 0 0 4px var(--yellow),3px 3px 0 var(--black)}
.windows{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));background:var(--black);gap:4px;border-bottom:4px solid var(--black)}
.win{position:relative;border:0;padding:14px 12px 16px;background:var(--red);display:block;text-align:left}
.win:nth-child(even){background:var(--blue)}
.win::before{content:"";position:absolute;inset:5px;border:2px solid var(--yellow);border-radius:12px;pointer-events:none}
.pane{position:relative;aspect-ratio:1/.92;border:4px solid var(--black);border-radius:26px 26px 6px 6px;overflow:hidden;background:#2c2620;box-shadow:0 0 0 4px var(--cream)}
.pax{position:absolute;inset:0;transition:transform .32s cubic-bezier(.5,0,.7,.4);transition-delay:calc(var(--i) * 45ms)}
.pax img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.win.off .pax{transform:translateY(112%)}
.win.on .pax{transition:transform .42s cubic-bezier(.2,.9,.3,1.15);transition-delay:calc(var(--i) * 60ms)}
.win:hover .pane{box-shadow:0 0 0 4px var(--yellow)}
.win:hover .pax img{transform:scale(1.05)}
.win:focus-visible{outline:4px solid var(--cream);outline-offset:-8px}
.panel{position:relative;height:92px;border-bottom:4px solid var(--black);background:var(--yellow)}
.panel svg{position:absolute;inset:0;width:100%;height:100%}
.busname{position:absolute;left:50%;top:50%;translate:-50% -50%;background:var(--cream);border:4px solid var(--black);border-radius:50%/60%;padding:2px 34px 6px;
  font-family:var(--tuscan);font-size:2.4rem;line-height:1.1;color:var(--red);white-space:nowrap;box-shadow:0 0 0 4px var(--blue),0 0 0 7px var(--black)}
.stripes{height:30px;background:linear-gradient(var(--blue) 0 8px,var(--black) 8px 11px,var(--red) 11px 19px,var(--black) 19px 22px,var(--green) 22px 30px)}
.cab{align-self:stretch;position:relative;margin-top:26px;background:var(--red);border:4px solid var(--black);border-left:0;display:flex;flex-direction:column}
.cab .glass{margin:34px 8px 0 4px;height:116px;border:4px solid var(--black);border-radius:6px 26px 6px 6px;overflow:hidden;background:#243451;box-shadow:0 0 0 3px var(--cream)}
.cab .glass img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:grayscale(1) contrast(1.1)}
.cab .door{flex:1;margin:12px 10px 0 6px;border:3px solid var(--black);border-bottom:0;border-radius:6px 6px 0 0;background:radial-gradient(circle at 80% 30%,var(--yellow) 0 5px,var(--black) 5.5px 7.5px,transparent 8px),var(--red)}
.cab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient(var(--blue) 0 8px,var(--black) 8px 11px,var(--red) 11px 19px,var(--black) 19px 22px,var(--green) 22px 30px);border-top:4px solid var(--black)}
.bonnet{position:relative;height:46%;min-height:170px;background:var(--yellow);border:4px solid var(--black);border-left:0;border-radius:0 90px 16px 0}
.bonnet::before{content:"";position:absolute;left:0;right:22px;top:26px;height:44px;background:linear-gradient(var(--red) 0 10px,transparent 10px 17px,var(--blue) 17px 27px,transparent 27px 34px,var(--green) 34px 44px);border-radius:0 30px 30px 0}
.bonnet .lamp{position:absolute;right:-6px;top:78px;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff 0 6px,#ffe58a 7px 13px,#d9b43c 14px);border:4px solid var(--black)}
.bonnet .bumper{position:absolute;right:-14px;bottom:-4px;width:70px;height:22px;border:4px solid var(--black);border-radius:6px;background:linear-gradient(#fff,#b9b9b9 60%,#8c8c8c)}
.wheel{position:absolute;bottom:0;width:118px;height:118px;border-radius:50%;z-index:3;background:radial-gradient(circle,var(--yellow) 0 11px,var(--black) 11.5px 15px,var(--red) 15.5px 40px,var(--black) 40.5px 44px,#322c26 44.5px);border:4px solid var(--black)}
.wheel::before{content:"";position:absolute;inset:18px;border-radius:50%;background:repeating-conic-gradient(var(--yellow) 0 6deg,transparent 6deg 45deg);
  -webkit-mask:radial-gradient(circle,transparent 0 13px,#000 14px 36px,transparent 37px);mask:radial-gradient(circle,transparent 0 13px,#000 14px 36px,transparent 37px)}
.wheel.w1{left:calc(30px + 9%)}
.wheel.w2{right:52px}
.bus.rolling .wheel::before{animation:spin .45s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* exhaust pipe + cartoon puffs (spawned by JS) */
.exhaust{position:absolute;z-index:4;width:26px;height:12px;background:linear-gradient(#cfcfcf,#8a8a8a);border:3px solid var(--black);border-radius:3px 6px 6px 3px}
.exhaust.ex-side{left:4px;bottom:46px;z-index:0}
.exhaust.ex-rear{left:58px;bottom:6px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,#222 0 35%,#9a9a9a 40%)}
.puff{position:absolute;left:var(--px,0);top:var(--py,50%);width:var(--sz);height:var(--sz);margin:calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);border-radius:50%;background:#efe8d8;border:3px solid var(--black);pointer-events:none;
  box-shadow:inset -4px -4px 0 rgba(28,23,18,.12);animation:puff var(--dur) cubic-bezier(.2,.6,.3,1) var(--delay) both}
@keyframes puff{0%{transform:translate(0,0) scale(.2);opacity:0}12%{opacity:1}70%{opacity:.9}100%{transform:translate(var(--dx),var(--dy)) scale(var(--s));opacity:0}}
.chassis{position:absolute;left:36px;right:120px;bottom:42px;height:26px;background:var(--black);z-index:1;border-radius:4px}
.bus-note{position:relative;z-index:3;margin:0;padding:18px 16px 26px;text-align:center;color:var(--cream);font-weight:700;background:#4a443c}
.bus-note b{color:var(--yellow)}
.bus-note a{color:var(--yellow);margin-left:.6em;text-decoration-thickness:2px;text-underline-offset:3px}
.swipe{display:none}

/* ============ events / carnival ============ */
.fiesta{position:relative;background:var(--yellow);padding:96px 0 110px}
/* drifting confetti: two layers at different sizes and speeds. Each moves exactly
   whole tiles per loop so the restart is seamless; transforms keep it on the GPU. */
.fiesta,.cta-band{overflow:hidden;isolation:isolate}
.fiesta > .wrap,.cta-band > .wrap{position:relative;z-index:1}
.fiesta::before,.cta-band::before,.fiesta::after,.cta-band::after{content:"";position:absolute;z-index:0;pointer-events:none;will-change:transform}
.fiesta::before,.cta-band::before{top:-640px;left:-380px;right:0;bottom:0;background:var(--confetti) 0 0/380px 320px;animation:drift-a 70s linear infinite}
.fiesta::after,.cta-band::after{top:-440px;left:0;right:-500px;bottom:0;background:var(--confetti) 60px 40px/250px 220px;opacity:.5;animation:drift-b 48s linear infinite}
@keyframes drift-a{to{transform:translate(380px,640px)}}
@keyframes drift-b{to{transform:translate(-500px,440px)}}
.fi-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.motto{position:relative;margin:0 0 26px;padding:22px 26px 24px;background:var(--red);border:4px solid var(--black);border-radius:18px;box-shadow:inset 0 0 0 4px var(--red),inset 0 0 0 7px var(--yellow),8px 9px 0 var(--black);transform:rotate(-1.5deg)}
.motto p{margin:0;font-family:var(--brush);font-size:clamp(1.8rem,2.6vw,2.35rem);line-height:1.08;color:var(--cream);text-shadow:2px 3px 0 var(--black)}
.fi-copy > p{margin:0 0 18px;max-width:44ch}
.facts{list-style:none;margin:24px 0 30px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.facts li{background:var(--cream);border:3px solid var(--black);border-radius:10px;padding:6px 14px 5px;font-weight:800;line-height:1.2}
.facts li.price{background:var(--blue);color:var(--yellow);font-family:var(--sign);font-weight:400;font-size:1.3rem}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:22px}
/* brushed-past wiggle: JS sets --kick (signed by mouse direction) and adds .bump;
   rotate/translate compose with each frame's own tilt, pivoting near the top like a hung picture */
.collage .frame{transform-origin:50% 12%}
.collage .frame.bump{animation:bump .95s cubic-bezier(.3,.7,.4,1)}
@keyframes bump{
  0%{rotate:0deg;translate:0 0}
  14%{rotate:var(--kick);translate:0 -5px}
  34%{rotate:calc(var(--kick) * -.6);translate:0 -3px}
  54%{rotate:calc(var(--kick) * .35)}
  74%{rotate:calc(var(--kick) * -.15);translate:0 -1px}
  100%{rotate:0deg;translate:0 0}
}
.frame{position:relative;margin:0;padding:10px;background:var(--c,var(--red));border:4px solid var(--black);border-radius:14px;box-shadow:7px 8px 0 var(--black);transform:rotate(var(--r,0deg))}
.frame::before{content:"";position:absolute;inset:4px;border:2px solid var(--yellow);border-radius:10px;pointer-events:none;z-index:1}
.frame img{width:100%;height:100%;object-fit:cover;border:3px solid var(--black);border-radius:6px}
[data-lb]{cursor:zoom-in}
.frame.big{grid-column:1/-1;--c:var(--blue);--r:-1deg}
.frame.big img{aspect-ratio:16/9;object-position:50% 30%}
.frame.f2{--c:var(--red);--r:1.4deg;grid-column:1}
.frame.f2 img,.frame.f4 img{aspect-ratio:5/4}
.frame.f3{--c:var(--green);--r:-1.6deg;grid-column:2;grid-row:2/4;align-self:stretch;display:flex}
.frame.f3 img{height:auto;flex:1;min-height:0}
.frame.f4{--c:var(--cream);--r:.8deg;grid-column:1}
.frame.f4::before{border-color:var(--red)}

/* flowers */
.flores{position:relative;background:var(--green);color:var(--cream);padding:96px 0 104px;overflow:hidden}
.flores::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 10%,rgba(252,209,22,.16) 0 260px,transparent 261px)}
.fl-grid{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px;align-items:center}
.arches{display:grid;grid-template-columns:.8fr 1.2fr;gap:26px;align-items:end}
.arch{position:relative;margin:0;padding:10px;background:var(--cream);border:4px solid var(--black);border-radius:200px 200px 14px 14px;box-shadow:8px 9px 0 var(--black)}
.arch img{width:100%;border:3px solid var(--black);border-radius:190px 190px 8px 8px;object-fit:cover}
.arch.a1 img{aspect-ratio:4/5.2}
.arch.a2 img{aspect-ratio:4/4.4}
.arch .ramo{width:120px;left:50%;top:-50px;translate:-50% 0;z-index:2}
.arch.a2 .ramo{width:138px;top:-58px}
/* the sprays grow out of the arch tops when the section arrives (JS adds .bloom to .flores) */
.arch .ramo{transform-origin:50% 80%}
@media (prefers-reduced-motion:no-preference){
  .js .flores:not(.bloom) .arch .ramo{scale:0;opacity:0}
  .flores.bloom .arch .ramo{animation:sprout 1.3s cubic-bezier(.2,.85,.25,1.35) both}
  .flores.bloom .arch.a2 .ramo{animation-delay:.35s}
}
@keyframes sprout{0%{scale:0;rotate:-25deg;opacity:0;translate:-50% 30px}30%{opacity:1}100%{scale:1;rotate:0deg;opacity:1;translate:-50% 0}}
.flores .head{margin-bottom:22px}
.flores p{margin:0 0 26px;max-width:46ch}

/* ============ about ============ */
.about{background:var(--cream);padding:100px 0 110px}
.ab-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.me{position:relative;margin:0}
.me .pic{padding:24px;background:var(--pinta) 0 0/24px 24px;border:4px solid var(--black);box-shadow:10px 12px 0 var(--red)}
.me .pic img{border:4px solid var(--black);width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;filter:grayscale(1) contrast(1.12)}
/* the MAL rubber stamp: the outer box moves and casts shadows; the inner ink is patchy (noise mask) */
.stamp{position:absolute;z-index:2;right:48px;bottom:84px;transform:rotate(-11deg);font-size:4rem}
.stamp .ink{display:block;font-family:var(--sign);line-height:1;color:var(--red);border:6px double var(--red);border-radius:12px;padding:4px 16px 8px;background:rgba(245,235,211,.88);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.07' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -10 0 0 0 8.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/220px 120px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.07' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -10 0 0 0 8.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/220px 120px}
.stamp::after{content:"";position:absolute;inset:-8px;border:4px solid var(--red);border-radius:18px;opacity:0;pointer-events:none}
/* ...and it slams down when the portrait scrolls into view (JS adds .slam) */
@media (prefers-reduced-motion:no-preference){
  .js .stamp:not(.slam){opacity:0}
  .stamp.slam{animation:slam .5s cubic-bezier(.55,0,.8,.2) both}
  .stamp.slam::after{animation:ring .6s ease-out .36s}
  .me.thud .pic{animation:thud .4s cubic-bezier(.3,1.6,.5,1) .36s}
  .me.thud .pic img{animation:flash .5s ease-out .36s}
}
@keyframes slam{
  0%{opacity:0;transform:translate(-40px,-120px) rotate(4deg) scale(2.8);filter:blur(3px) drop-shadow(30px 46px 14px rgba(0,0,0,.45))}
  35%{opacity:1}
  72%{transform:rotate(-11deg) scale(.93);filter:blur(0) drop-shadow(2px 3px 1px rgba(0,0,0,.4))}
  86%{transform:rotate(-11deg) scale(1.03)}
  100%{opacity:1;transform:rotate(-11deg) scale(1);filter:none}
}
@keyframes ring{0%{opacity:.8;transform:scale(.96)}100%{opacity:0;transform:scale(1.5)}}
@keyframes thud{0%{transform:none}30%{transform:translate(2px,5px) scale(.985)}65%{transform:translate(-1px,-1px)}100%{transform:none}}
@keyframes flash{0%{filter:grayscale(1) contrast(1.12) brightness(1.18)}100%{filter:grayscale(1) contrast(1.12)}}
.me figcaption{margin-top:28px;font-weight:700;font-size:1.05rem}
.dict{margin:0 0 30px;padding:20px 24px 18px;background:var(--black);color:var(--cream);border-radius:16px;box-shadow:inset 0 0 0 4px var(--black),inset 0 0 0 6px var(--yellow);max-width:560px}
.dict .w{font-family:var(--sign);font-size:2.4rem;line-height:1;color:var(--yellow)}
.dict .w span{display:inline-block;line-height:1.25;vertical-align:baseline;font-family:var(--body);font-size:1.05rem;font-style:italic;font-weight:500;color:var(--cream-2);margin-left:.6em}
.dict p{margin:8px 0 0;font-size:1.15rem}
.dict p b{color:var(--yellow)}
.defs{list-style:none;margin:10px 0 0;padding:0;counter-reset:def;font-size:1.15rem;line-height:1.4}
.defs li{position:relative;padding-left:1.4em;counter-increment:def}
.defs li+li{margin-top:6px}
.defs li::before{content:counter(def) ".";position:absolute;left:0;font-weight:800;color:var(--yellow)}
.about .copy > p{max-width:60ch;margin:0 0 1.05em}
.chase{margin:30px 0 0;font-family:var(--brush);font-size:clamp(2.1rem,3.4vw,2.9rem);line-height:1.1;color:var(--blue);max-width:22ch}

/* ============ awards: celebrated the Colombian way ============ */
.awards{position:relative;overflow:hidden;isolation:isolate;background:var(--blue);color:var(--cream);padding:96px 0 120px}
.awards > .wrap{position:relative;z-index:1}
/* stadium floodlights from the top corners */
.floodlights{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  conic-gradient(from 150deg at 0 0,transparent 0 14deg,rgba(255,244,190,.07) 14deg 22deg,transparent 22deg),
  conic-gradient(from 196deg at 100% 0,transparent 0 6deg,rgba(255,244,190,.07) 6deg 14deg,transparent 14deg),
  radial-gradient(circle at 50% 120%,rgba(252,209,22,.14),transparent 60%)}
.aw-top{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;flex-wrap:wrap}
.aw-top .head{margin:0}
/* trapo: a painted fan banner tied to the fence */
.trapo{position:relative;margin:14px 0 0;padding:0 14px;transform:rotate(-2deg);animation:wave 5s ease-in-out infinite;transform-origin:50% 0}
.trapo span{display:block;position:relative;padding:16px 30px 18px;font-family:var(--sign);font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.15;color:var(--blue-dk);
  background:linear-gradient(var(--yellow) 0 64%,var(--blue) 64% 82%,var(--red) 82%);border:4px solid var(--black);border-radius:6px;box-shadow:7px 8px 0 rgba(0,0,0,.35);
  clip-path:polygon(0 3%,50% 0,100% 3%,99% 50%,100% 97%,50% 100%,0 97%,1% 50%)}
.trapo span{padding-bottom:34px}
.trapo::before,.trapo::after{content:"";position:absolute;top:-16px;width:4px;height:26px;background:#cfc7b3;border-radius:2px;box-shadow:0 0 0 2px var(--black)}
.trapo::before{left:28px;transform:rotate(-14deg)}.trapo::after{right:28px;transform:rotate(14deg)}
@keyframes wave{0%,100%{transform:rotate(-2deg) skewX(0)}50%{transform:rotate(-1deg) skewX(-2deg)}}

.aw-win{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;align-items:center;margin-top:64px}
.win-photo{position:relative;margin:34px 30px 34px 34px}
.polvora{position:absolute;left:50%;top:50%;width:138%;aspect-ratio:1;translate:-50% -50%;z-index:0;opacity:.9;pointer-events:none}
.polvora .rays{transform-origin:0 0;animation:spinrays 60s linear infinite}
@keyframes spinrays{to{transform:rotate(360deg)}}
.win-photo .frame{position:relative;z-index:1;--c:var(--yellow);--r:-2deg;box-shadow:10px 12px 0 var(--black)}
.win-photo .frame::before{border-color:var(--red)}
.win-photo .frame img{aspect-ratio:1/1}
.cry{margin:0 0 10px;font-family:var(--brush);font-size:clamp(2.6rem,4.6vw,4rem);line-height:1;color:var(--yellow);text-shadow:3px 4px 0 var(--red),6px 8px 0 var(--black);transform:rotate(-4deg);transform-origin:0 50%}
.win-copy h3{margin:0 0 12px;font-family:var(--sign);font-weight:400;font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.12;color:var(--yellow)}
.win-copy > p{margin:0;max-width:46ch}
.ribbon{display:inline-block;background:var(--yellow);color:var(--black);font-family:var(--sign);font-size:1.3rem;padding:6px 16px 7px;border:3px solid var(--black);border-radius:8px;box-shadow:4px 4px 0 var(--red);margin-bottom:14px}

/* medals on tricolour ribbons */
.medal{position:absolute;z-index:3;width:74px;transform-origin:50% 0;pointer-events:none}
.medal .band{display:block;margin:0 auto;width:40px;height:52px;background:linear-gradient(90deg,var(--yellow) 0 50%,var(--blue) 50% 75%,var(--red) 75%);border:3px solid var(--black);border-bottom:0;clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.medal b{display:grid;place-items:center;margin:-14px auto 0;width:70px;height:70px;border-radius:50%;font-family:var(--sign);font-weight:400;font-size:1.15rem;line-height:1;color:var(--black);
  background:radial-gradient(circle at 35% 30%,#fff6c0 0 12%,#f7cf3d 30%,#c9951b 72%,#8a6210);border:3px solid var(--black);box-shadow:inset 0 0 0 5px rgba(255,255,255,.25),inset 0 0 0 7px rgba(0,0,0,.25),4px 5px 0 rgba(0,0,0,.35)}
.medal b span{display:block;font-size:.9rem;color:var(--red);margin-bottom:-6px}
.medal.big{top:-38px;left:-30px;width:96px;transform:rotate(-10deg)}
.medal.big .band{width:52px;height:68px}
.medal.big b{width:92px;height:92px;font-size:1.6rem;margin-top:-18px}
.medal.big b span{font-size:1.2rem}

/* newspaper clipping, taped up */
.clipping{position:relative;display:inline-grid;grid-template-columns:170px 1fr;gap:18px;align-items:center;margin:30px 0 0;max-width:460px}
.clipping button{padding:0;border:0;background:#eee;box-shadow:6px 7px 0 rgba(0,0,0,.35);transform:rotate(3deg);transition:transform .2s}
.clipping button:hover{transform:rotate(0) scale(1.03)}
.clipping img{width:100%}
.clipping .tape{position:absolute;z-index:2;width:58px;height:18px;background:rgba(245,235,211,.75);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.clipping .t1{left:-14px;top:6px;transform:rotate(-32deg)}
.clipping .t2{left:130px;bottom:-4px;transform:rotate(-24deg)}
.clipping figcaption{font-weight:700;color:var(--cream-2);font-size:1.02rem}
.clipping figcaption b{display:block;font-family:var(--brush);font-weight:400;font-size:1.7rem;color:var(--yellow);line-height:1.1}

/* the finalist medal rack */
.streak{margin:84px 0 0;font-family:var(--sign);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.2rem);color:var(--cream);text-shadow:3px 3px 0 var(--red)}
.medal-rack{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:56px 36px}
.medal-rack li{grid-column:span 2}
.medal-rack li.dbl{grid-column:span 3}
.medal-rack li.dbl .thumb img{aspect-ratio:1/1;object-position:50% 40%}
.medal-rack li.dbl .medal{width:88px;margin-left:-44px}
.medal-rack li.dbl .medal .band{width:48px;height:60px}
.medal-rack li.dbl .medal b{width:84px;height:84px;font-size:1.35rem}
/* ¡Doblete! two shortlisted in one year: sticker straddles the pair */
.doblete{position:absolute;z-index:4;top:8px;right:-74px;margin:0;width:120px;padding:10px 8px 12px;text-align:center;background:var(--red);border:4px solid var(--black);border-radius:14px;transform:rotate(8deg);box-shadow:inset 0 0 0 3px var(--red),inset 0 0 0 5px var(--yellow),5px 6px 0 var(--black)}
.doblete b{display:block;font-family:var(--brush);font-weight:400;font-size:1.9rem;line-height:1;color:var(--yellow);text-shadow:2px 2px 0 var(--black)}
.doblete span{display:block;margin-top:4px;font-weight:800;font-size:.86rem;line-height:1.2;color:var(--cream)}
.medal-rack li.dbl:hover ~ li .doblete,.medal-rack li.dbl:hover .doblete{animation:swing 1.1s ease-in-out}
.medal-rack li{position:relative;padding-top:66px}
.medal-rack .medal{top:0;left:50%;margin-left:-37px}
.medal-rack li:hover .medal{animation:swing 1.1s ease-in-out}
@keyframes swing{0%{rotate:0deg}20%{rotate:12deg}45%{rotate:-8deg}70%{rotate:4deg}100%{rotate:0deg}}
.medal-rack .thumb{display:block;width:100%;padding:8px;border:4px solid var(--black);border-radius:14px;background:var(--cream);box-shadow:7px 8px 0 var(--red)}
.medal-rack li:nth-child(2) .thumb{box-shadow:7px 8px 0 var(--yellow)}
.medal-rack li:nth-child(3) .thumb,.medal-rack li:nth-child(5) .thumb{box-shadow:7px 8px 0 var(--cream-2)}
.medal-rack li:nth-child(4) .thumb{box-shadow:7px 8px 0 var(--red)}
.medal-rack .thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;border:3px solid var(--black);border-radius:8px}
.rack-copy{margin-top:18px}
.rack-copy .fin{display:inline-block;font-family:var(--sign);font-size:.95rem;background:var(--red);color:var(--cream);border:2px solid var(--black);border-radius:6px;padding:3px 10px 2px;margin-bottom:8px}
.rack-copy b{display:block;font-weight:800;font-size:1.2rem;line-height:1.25;color:var(--cream)}
.rack-copy .tag{display:block;font-size:.98rem;color:var(--yellow);font-weight:700;margin-top:3px}
.rack-copy p{margin:8px 0 0;font-size:1rem;color:var(--cream-2)}
.rack-copy a{color:var(--cream)}

/* celebration effects (spawned by JS when the section scrolls in) */
.papelitos{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.papelitos i{position:absolute;top:-24px;left:var(--x);width:var(--w);height:var(--hgt);background:var(--c);border-radius:1px;animation:fall var(--d) cubic-bezier(.3,.4,.5,1) var(--delay) both}
@keyframes fall{0%{transform:translate3d(0,0,0) rotate(0) rotateX(0)}100%{transform:translate3d(var(--dx),var(--fall),0) rotate(var(--rot)) rotateX(720deg);opacity:.9}}
.sparks{position:absolute;inset:0;z-index:4;pointer-events:none}
.burst{position:absolute;left:var(--bx);top:var(--by);width:0;height:0}
.burst i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 10px 2px var(--c);animation:spark .95s cubic-bezier(.1,.7,.3,1) var(--delay) both}
@keyframes spark{0%{transform:rotate(var(--a)) translateX(0) scale(1);opacity:1}80%{opacity:1}100%{transform:rotate(var(--a)) translateX(var(--r)) scale(.3);opacity:0}}

/* ============ prices: tienda ============ */
.tienda{position:relative;overflow:hidden;padding:100px 0 110px;background:linear-gradient(transparent calc(100% - 150px),var(--red) calc(100% - 150px) calc(100% - 140px),var(--green) calc(100% - 140px)),var(--cream)}
.sign-board{position:relative;background:var(--yellow);border:5px solid var(--black);border-radius:26px;padding:26px 44px 34px;box-shadow:inset 0 0 0 6px var(--yellow),inset 0 0 0 10px var(--red),inset 0 0 0 13px var(--black),12px 14px 0 var(--black)}
.sign-board .ramo.a{width:150px;left:-56px;top:-60px;transform:rotate(-12deg)}
.sign-board .ramo.b{width:150px;right:-56px;top:-60px;transform:rotate(12deg) scaleX(-1)}
.board-top{text-align:center;padding:26px 0 18px}
.board-top .head{margin:0}
.board-top h2,.board-top h1{display:inline-block}
.plist{list-style:none;margin:0;padding:0}
.plist li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 28px;align-items:center;padding:20px 8px;border-top:4px solid var(--black)}
.plist li:first-child{border-top:0}
.plist h2,.plist h3{margin:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;font-family:var(--sign);font-weight:400;font-size:clamp(1.3rem,2.1vw,1.8rem);line-height:1.1;color:var(--blue)}
.plist h2 a,.plist h3 a{text-decoration:none}
.plist h2 a:hover,.plist h3 a:hover{color:var(--red)}
.plist .pop{font-family:var(--brush);font-size:1.5rem;color:var(--cream);background:var(--red);border:3px solid var(--black);border-radius:8px;padding:0 12px 2px;transform:rotate(-3deg);display:inline-block;line-height:1.2}
.plist p{margin:4px 0 0;font-weight:500;font-size:1.1rem}
.plist .more{font-weight:800;color:var(--blue);font-size:1rem}
.plist .amt{font-family:var(--sign);font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:1;color:var(--red);text-shadow:3px 3px 0 var(--black)}
.board-foot{margin:6px 0 0;text-align:center;font-weight:700}
.board-scope{margin:10px auto 0;max-width:60ch;text-align:center;font-size:1rem;font-weight:600;color:var(--blue-dk)}
.amt small,.price-tag small,.incl .amt b small{display:block;font-family:var(--brush);font-size:1.2rem;line-height:1;color:var(--blue);text-shadow:none;text-transform:none;margin-bottom:2px}
.price-tag{flex-direction:column;align-items:flex-start;gap:0}
.price-tag small{color:var(--red)}
.incl .amt b{text-align:right}
.beyond{margin:-4px 0 16px;font-weight:700;font-size:1rem;color:var(--blue-dk)}
.price-note{margin:2px 0 12px;font-size:.98rem;font-weight:600;color:#5b4f40}

/* ============ reviews ============ */
.reviews{background:var(--red);color:var(--cream);padding:96px 0 110px;position:relative}
.rv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 60px;align-items:start}
.quote{margin:0;position:relative;padding-top:66px}
.quote::before{content:"\201C";position:absolute;top:-24px;left:-4px;font-family:var(--sign);font-size:8rem;line-height:1;color:var(--yellow);text-shadow:4px 5px 0 var(--black)}
.quote blockquote{margin:0;font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.42;font-weight:500}
.quote figcaption{margin-top:20px;font-weight:800;font-size:1.1rem}
.quote figcaption span{display:block;font-weight:500;color:var(--yellow-lt)}
.quote.on-light blockquote{color:var(--black)}
.quote.on-light figcaption span{color:var(--red)}

/* ============ prints ============ */
.prints-sec{background:var(--cream);padding:96px 0 110px}
.pr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:48px}
.pr-head .head{margin:0}
.pr-head p{margin:0;font-weight:700;max-width:34ch}
.prints{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.print{margin:0}
.print .frame{--r:0deg;display:block;transition:box-shadow .2s}
/* jiggle on hover: rotate/translate compose with each frame's own tilt */
.print .frame:hover,.print .frame:focus-visible{animation:jiggle .7s cubic-bezier(.36,.07,.19,.97) both;box-shadow:10px 12px 0 var(--black)}
@keyframes jiggle{
  0%{rotate:0deg;translate:0 0}
  15%{rotate:-4deg;translate:0 -6px}
  30%{rotate:3.2deg;translate:0 -6px}
  45%{rotate:-2.2deg;translate:0 -4px}
  60%{rotate:1.4deg;translate:0 -3px}
  75%{rotate:-.7deg;translate:0 -1px}
  100%{rotate:0deg;translate:0 0}
}
.print:nth-child(1) .frame{--c:var(--red);--r:-1deg}
.print:nth-child(2) .frame{--c:var(--blue);--r:.8deg}
.print:nth-child(3) .frame{--c:var(--green);--r:-.6deg}
.print .frame img{aspect-ratio:4/5}
.print .swap{position:relative}
.print .swap .alt{position:absolute;inset:var(--pad,10px);width:calc(100% - 2 * var(--pad,10px));height:calc(100% - 2 * var(--pad,10px));opacity:0;transition:opacity .35s}
.print .swap:hover .alt,.print .swap:focus-visible .alt{opacity:1}
.print figcaption{margin-top:22px}
.print h2,.print h3{margin:0;font-family:var(--sign);font-weight:400;font-size:1.45rem;line-height:1.15;color:var(--blue)}
.print p{margin:6px 0 14px;font-weight:600}
.print .opts{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.print .opts li{background:var(--yellow);border:3px solid var(--black);border-radius:10px;padding:4px 12px 3px;font-weight:800}
.badge{position:absolute;z-index:2;top:-14px;right:-10px;background:var(--red);color:var(--cream);font-family:var(--brush);font-size:1.5rem;padding:0 14px 4px;border:3px solid var(--black);border-radius:10px;transform:rotate(6deg);box-shadow:3px 3px 0 var(--black)}

/* ============ booking ============ */
.book{position:relative;background:var(--blue);color:var(--cream);padding:100px 0 120px;overflow:hidden}
.book .ramo.a{width:220px;right:-40px;top:-40px;transform:rotate(160deg)}
.bk-grid{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:60px;align-items:start}
.book .echo{color:var(--yellow)}
.bk-copy p{margin:0 0 16px;max-width:40ch;font-size:1.2rem}
.bk-list{list-style:none;margin:24px 0 30px;padding:0}
.bk-list li{position:relative;padding-left:30px;margin-bottom:10px;font-weight:700}
.bk-list li::before{content:"";position:absolute;left:4px;top:.45em;width:13px;height:13px;background:var(--yellow);border:2px solid var(--black);transform:rotate(45deg)}
.bk-alt{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.bk-alt p{margin:0;font-weight:700}
.bk-alt a:not(.plaque){color:var(--yellow);font-weight:800}
.form{background:var(--cream);color:var(--black);border:4px solid var(--black);border-radius:18px;overflow:hidden;box-shadow:12px 14px 0 var(--black)}
.form .pinta-band{border-top:0}
.form-in{padding:28px 30px 26px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;margin-bottom:16px}
.field label{font-weight:800;font-size:1.05rem;margin-bottom:5px;color:var(--blue)}
.field input,.field select,.field textarea{font:inherit;font-size:1.08rem;color:var(--black);background:#fffaf0;border:3px solid var(--black);border-radius:10px;padding:10px 12px;width:100%}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:4px 4px 0 var(--yellow)}
.field .hint{font-size:.95rem;margin-top:5px;color:#5b4f40;font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .plaque{width:100%;margin-top:4px;font-size:1.25rem}
.form-status{margin:14px 0 0;text-align:center;font-weight:700;min-height:1.5em}
.form-status.ok{color:var(--green-dk)}
.form-status.err{color:var(--red-dk)}
.form.sent .form-fields{display:none}
.sent-card{display:none;padding:34px 30px 36px;text-align:center}
.form.sent .sent-card{display:block}
.sent-card .sign{font-size:2.4rem}
.sent-card p{margin:14px auto 0;max-width:36ch;font-weight:700}

/* ============ CTA band ============ */
.cta-band{position:relative;background:var(--yellow);padding:80px 0 88px;text-align:center}
.cta-band .head{margin:0 0 18px}
.cta-band h2{display:inline-block}
.cta-band p{margin:0 auto;max-width:48ch;font-weight:700}
.cta-band .ctas{justify-content:center}

/* ============ portfolio ============ */
.pf-sec{padding:84px 0 110px}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:34px}
.cat{position:relative;display:block;text-decoration:none;background:var(--c,var(--red));border:4px solid var(--black);border-radius:16px;padding:10px 10px 0;box-shadow:7px 8px 0 var(--black);transition:transform .2s,box-shadow .2s}
.cat:nth-child(4n+2){--c:var(--blue)}.cat:nth-child(4n+3){--c:var(--green)}.cat:nth-child(4n+4){--c:var(--yellow)}
.cat:hover{transform:translate(-3px,-3px) rotate(-.6deg);box-shadow:10px 11px 0 var(--black)}
.cat .img{border:3px solid var(--black);border-radius:10px 10px 6px 6px;overflow:hidden;aspect-ratio:4/3;background:#2c2620}
.cat .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cat:hover .img img{transform:scale(1.05)}
.cat .lbl{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 6px 14px}
.cat .lbl b{font-family:var(--tuscan);font-weight:400;font-size:1.8rem;line-height:1.05;color:var(--cream);text-shadow:2px 2px 0 var(--black)}
.cat:nth-child(4n+4) .lbl b{color:var(--blue);text-shadow:2px 2px 0 var(--cream)}
.cat .lbl span{font-weight:800;color:var(--cream);white-space:nowrap}
.cat:nth-child(4n+4) .lbl span{color:var(--black)}
.cat p{margin:0;padding:0 6px 16px;color:var(--cream);font-weight:600;font-size:1.02rem}
.cat:nth-child(4n+4) p{color:var(--black)}
.cat-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 36px;padding:0;list-style:none}
.cat-nav a{display:block;text-decoration:none;font-weight:800;padding:6px 14px 5px;border:3px solid var(--black);border-radius:10px;background:var(--cream);box-shadow:3px 3px 0 var(--black)}
.cat-nav a:hover{background:var(--yellow)}
.cat-nav a[aria-current="page"]{background:var(--red);color:var(--cream)}
.masonry{columns:3 300px;column-gap:18px}
.masonry .tile{display:block;width:100%;break-inside:avoid;margin:0 0 18px;padding:0;border:4px solid var(--black);border-radius:10px;overflow:hidden;background:#2c2620;box-shadow:5px 6px 0 var(--c,var(--red))}
.masonry .tile:nth-child(3n+2){--c:var(--blue)}.masonry .tile:nth-child(3n+3){--c:var(--yellow)}
.masonry .tile img{width:100%;transition:transform .5s,filter .3s}
.masonry .tile:hover img{transform:scale(1.03)}
.pf-foot{margin-top:40px;font-weight:700;text-align:center}

/* ============ service page ============ */
.svc-intro{padding:84px 0 40px}
.svc-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}
.incl{position:relative;background:var(--yellow);border:4px solid var(--black);border-radius:20px;padding:22px 26px 26px;box-shadow:inset 0 0 0 5px var(--yellow),inset 0 0 0 8px var(--red),inset 0 0 0 10px var(--black),9px 10px 0 var(--black)}
.incl h2{margin:6px 0 14px;font-family:var(--sign);font-weight:400;font-size:1.6rem;color:var(--blue)}
.incl ul{list-style:none;margin:0 0 20px;padding:0}
.incl li{position:relative;padding:8px 0 8px 32px;border-bottom:3px dotted rgba(28,23,18,.3);font-weight:800}
.incl li:last-child{border-bottom:0}
.incl li::before{content:"";position:absolute;left:5px;top:.95em;width:13px;height:13px;background:var(--red);border:2px solid var(--black);transform:rotate(45deg)}
.incl .amt{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 16px;padding-top:14px;border-top:4px solid var(--black)}
.incl .amt span{font-weight:800}
.incl .amt b{font-family:var(--sign);font-weight:400;font-size:3rem;line-height:1;color:var(--red);text-shadow:3px 3px 0 var(--black)}
.incl .plaque{width:100%}
.svc-photos{padding:40px 0 96px}
.photo-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.photo-row .frame img{aspect-ratio:4/5}
.photo-row .frame:nth-child(3n+1){--c:var(--red);--r:-1deg}
.photo-row .frame:nth-child(3n+2){--c:var(--blue);--r:.8deg}
.photo-row .frame:nth-child(3n+3){--c:var(--green);--r:-.5deg}
.svc-review{background:var(--red);color:var(--cream);padding:88px 0 96px}
.svc-review .quote{max-width:900px}
.faq-sec{padding:96px 0 100px}
.faq{max-width:860px}
.faq details{border:4px solid var(--black);border-radius:14px;background:#fffaf0;margin-bottom:16px;box-shadow:5px 6px 0 var(--blue)}
.faq summary{cursor:pointer;list-style:none;padding:16px 56px 16px 20px;font-weight:800;font-size:1.2rem;position:relative;color:var(--blue)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;translate:0 -50%;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--yellow);border:3px solid var(--black);font-family:var(--sign);color:var(--black);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 20px 18px;max-width:62ch}
.others{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;list-style:none;margin:0;padding:0}
.others a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;text-decoration:none;padding:16px 18px;border:4px solid var(--black);border-radius:14px;background:var(--cream);box-shadow:5px 6px 0 var(--black);transition:transform .15s}
.others a:hover{transform:translate(-2px,-2px);background:var(--yellow)}
.others b{font-family:var(--sign);font-weight:400;font-size:1.2rem;color:var(--blue)}
.others span{font-family:var(--sign);color:var(--red);font-size:1.3rem}

/* ============ footer: back of the chiva ============ */
.foot{background:var(--black);color:var(--cream);padding:0 0 40px;position:relative;overflow:hidden}
.foot .wayuu-band{margin-bottom:70px}
.rear-view{position:relative;width:min(460px,100% - 32px);margin:0 auto}
.rear-body{position:relative;background:var(--blue);border:5px solid var(--black);border-radius:36px 36px 14px 14px;padding:26px 70px 30px;box-shadow:0 0 0 5px var(--yellow)}
.rear-body::before{content:"";position:absolute;left:22px;top:24px;bottom:30px;width:26px;border-left:4px solid var(--yellow);border-right:4px solid var(--yellow);background:repeating-linear-gradient(var(--yellow) 0 4px,transparent 4px 22px)}
.rear-body img{width:100%;aspect-ratio:1/1;object-fit:cover;border:5px solid var(--black);border-radius:18px;background:var(--cream)}
.tail{position:absolute;right:20px;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#ff8f8f 0 5px,var(--red) 6px);border:4px solid var(--black)}
.tail.t1{top:34%}.tail.t2{top:calc(34% + 46px);background:radial-gradient(circle at 40% 40%,#fff3b0 0 5px,#f5a300 6px)}
.bumper{position:relative;margin:-6px -26px 0;height:34px;border:5px solid var(--black);border-radius:8px;background:linear-gradient(#fff,#bdbdbd 55%,#8a8a8a)}
.plate{position:absolute;left:50%;top:-6px;translate:-50% 0;background:var(--yellow);color:var(--black);border:3px solid var(--black);border-radius:6px;padding:2px 12px;font-weight:800;letter-spacing:.06em;font-size:1rem;white-space:nowrap}
.tyres{display:flex;justify-content:space-between;padding:0 30px}
.tyres i{display:block;width:84px;height:34px;background:#4a4038;border:5px solid var(--black);border-top:0;border-radius:0 0 14px 14px}
.foot-row{display:grid;grid-template-columns:1fr auto auto;gap:40px;align-items:start;margin-top:64px;padding-top:26px;border-top:3px dotted #4d443a}
.foot-row .big{font-family:var(--sign);font-size:2rem;line-height:1;color:var(--yellow)}
.foot-row p{margin:10px 0 0;color:var(--cream-2);max-width:52ch}
.foot ul{list-style:none;margin:0;padding:0;line-height:2}
.foot ul a{text-decoration:none;border-bottom:3px solid var(--red);font-weight:700}
.foot ul a:hover{color:var(--yellow)}
.legal{margin-top:34px;font-size:.95rem;color:#a99c86}

/* ============ floating WhatsApp ============ */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:var(--wa);color:#fff;border:4px solid var(--black);box-shadow:4px 5px 0 var(--black);transition:transform .15s}
.wa-float:hover{transform:translate(-2px,-2px) rotate(-6deg)}
.wa-float svg{width:32px;height:32px}

/* ============ lightbox + toast ============ */
.lb{position:fixed;inset:0;z-index:100;background:rgba(28,23,18,.95);display:none;align-items:center;justify-content:center;padding:70px 76px 40px}
.lb.open{display:flex}
.lb figure{margin:0;max-width:min(1200px,100%);text-align:center;color:var(--cream)}
.lb img{max-height:78vh;width:auto;margin:0 auto;border:10px solid var(--cream);border-radius:8px;box-shadow:0 0 0 4px var(--black),10px 12px 0 4px var(--red)}
.lb figcaption{margin-top:22px;font-size:1.15rem;font-weight:600}
.lb figcaption b{display:block;font-family:var(--brush);font-weight:400;font-size:1.7rem;color:var(--yellow);line-height:1.1}
.lb .x{position:absolute;top:16px;right:16px}
.lb .nav-b{position:absolute;top:50%;translate:0 -50%;width:54px;height:54px;border-radius:50%;border:3px solid var(--black);background:var(--yellow);font-family:var(--sign);font-size:1.5rem;line-height:1;color:var(--black);box-shadow:3px 4px 0 var(--red)}
.lb .prev{left:14px}.lb .next{right:14px}
.lb.single .nav-b{display:none}
.toast{visibility:hidden;opacity:0;transition:transform .35s,opacity .2s,visibility .35s;position:fixed;left:50%;bottom:24px;z-index:110;transform:translate(-50%,160%);background:var(--black);color:var(--cream);border:3px solid var(--yellow);padding:12px 20px;border-radius:12px;font-weight:700;max-width:calc(100% - 32px)}
.toast.show{transform:translate(-50%,0);visibility:visible;opacity:1}

/* ============ responsive ============ */
@media (max-width:1180px){
  .links a{padding:6px 8px;font-size:1rem}
  .stop{font-size:1.35rem;padding:4px 10px 3px}
  .ruta{padding-inline:56px}
  .ruta .ramo{width:52px}
}
@media (max-width:1020px){
  .links{display:none}
  .menu-toggle{display:block}
  .top.open .links{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;margin-top:13px;background:var(--yellow);padding:8px 16px 18px;border-bottom:4px solid var(--black)}
  .top.open .links a{padding:10px 6px;font-size:1.15rem}
  .others{grid-template-columns:1fr}
  .foot-row{grid-template-columns:1fr 1fr}
  .foot-row > div:first-child{grid-column:1/-1}
}
@media (max-width:900px){
  .hero{flex-direction:column;min-height:0}
  .hero-layer{display:none}
  .hero-copy{padding:64px 0 60px}
  .hero-copy > *{max-width:none}
  .hero-photo{position:relative;width:100%;height:auto;border-top:6px solid var(--yellow);box-shadow:0 -12px 0 var(--red)}
  .hero-photo{aspect-ratio:4/3.4}
  .slide-ctl{left:12px;bottom:12px;gap:6px;padding:5px 6px 5px 5px}
  .slide-tag{font-size:.85rem}
  .hero .ramo.tr{display:none}
  .sticker{width:142px;height:142px;right:16px;bottom:18px}
  .sticker b{font-size:1.9rem}.sticker span{font-size:.86rem;padding:0 12px}.sticker i{font-size:1.15rem}
  .chiva-head,.fi-grid,.fl-grid,.ab-grid,.aw-win,.rv-grid,.bk-grid,.svc-grid{grid-template-columns:1fr;gap:40px}
  .phero.has-photo .ph-grid{grid-template-columns:1fr;gap:0}
  .phero.has-photo .ph-copy{padding:56px 0 44px}
  .ph-photo{margin:0 -24px;border-left:0;border-top:8px solid var(--yellow);box-shadow:0 -14px 0 var(--red)}
  .ph-photo img{aspect-ratio:4/3;height:auto}
  .phero::before,.phero::after,.phero .ramo{display:none}
  .medal-rack{grid-template-columns:1fr;max-width:460px;gap:44px}
  .medal-rack li,.medal-rack li.dbl{grid-column:auto}
  .doblete{right:-6px;top:20px;width:124px}
  .doblete b{font-size:1.55rem}
  .aw-win{margin-top:48px}
  .win-photo{max-width:420px;margin:30px 24px 24px 30px}
  .streak{margin-top:64px}
  .me{max-width:440px}
  .prints{grid-template-columns:1fr;max-width:440px;margin-inline:auto;gap:48px}
  .photo-row{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:1.1rem}
  .wrap,.hero-copy{width:calc(100% - 32px)}
  .brand b{font-size:1.1rem}.brand small{font-size:.85rem}.brand img{width:48px;height:48px}
  .nav{gap:10px}
  .lang a{padding:6px 8px}
  .chiva-sec{padding-top:70px}
  .ruta-slot{margin:34px 16px 0}
  .ruta-slot .ruta{border:4px solid var(--black);border-radius:16px;padding:10px 12px 12px;box-shadow:0 0 0 4px var(--red),6px 8px 0 4px var(--black)}
  .ruta-slot .ruta .ramo{display:none}
  .ruta .lbl{width:100%;text-align:center;margin:0 0 4px;font-size:2rem}
  .stop{font-size:1.2rem;padding:4px 9px 3px}
  .stop + .stop::before{display:none}
  .stage{margin-top:26px}
  .bus-scroll{width:100%;overflow-x:auto;overflow-y:hidden;padding:0 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .bus{width:1480px}
  .win{scroll-snap-align:center}
  .swipe{display:block;margin:0 16px;text-align:center;font-weight:700;color:var(--blue)}
  .fiesta,.flores,.about,.awards,.tienda,.reviews,.prints-sec,.book,.svc-review,.faq-sec{padding:72px 0 84px}
  .pf-sec{padding:56px 0 84px}
  .svc-intro{padding:56px 0 24px}
  .svc-photos{padding:24px 0 72px}
  .collage{gap:16px}
  .frame{padding:7px;--pad:7px;box-shadow:5px 6px 0 var(--black)}
  .motto{padding:18px 18px 20px}
  .arches{gap:14px}
  .arch{padding:6px;box-shadow:5px 6px 0 var(--black)}
  .arch .ramo{width:84px;top:-36px}
  .arch.a2 .ramo{width:97px;top:-41px}
  .stamp{font-size:2.8rem;right:30px;bottom:70px}
  .clipping{grid-template-columns:120px 1fr}
  .clipping .t2{left:90px}
  .medal.big{left:-18px;top:-30px;width:80px}
  .medal.big b{width:76px;height:76px;font-size:1.3rem}
  .sign-board{padding:14px 16px 22px;border-radius:18px;box-shadow:inset 0 0 0 5px var(--yellow),inset 0 0 0 8px var(--red),inset 0 0 0 10px var(--black),7px 8px 0 var(--black)}
  .sign-board .ramo.a,.sign-board .ramo.b{width:92px;top:-40px}
  .sign-board .ramo.a{left:-18px}.sign-board .ramo.b{right:-18px}
  .plist li{grid-template-columns:1fr auto;padding:18px 4px}
  .plist li .plaque{grid-column:1/-1;justify-self:start}
  .row{grid-template-columns:1fr;gap:0}
  .form-in{padding:22px 16px 20px}
  .form{box-shadow:7px 8px 0 var(--black)}
  .rear-body{padding:18px 52px 22px}
  .rear-body::before{left:12px;width:20px}
  .tail{right:10px;width:26px;height:26px}
  .foot-row{grid-template-columns:1fr}
  .lb{padding:70px 12px 90px}
  .lb .nav-b{top:auto;bottom:18px;translate:none}
  .lb .prev{left:calc(50% - 70px)}.lb .next{right:calc(50% - 70px)}
  .hero .ramo.tl{width:130px;left:-40px;top:-36px}
  .hero .ramo.bl{display:none}
  .hero h1{font-size:1.95rem}
  .nav-cta,.brand small{display:none}
  .hero-photo{order:2}
  .sticker{top:14px;bottom:auto;right:14px;width:116px;height:116px;box-shadow:0 0 0 4px var(--yellow),0 0 0 7px var(--black)}
  .sticker b{font-size:1.5rem}.sticker span{font-size:.72rem;padding:0 10px}.sticker i{font-size:1rem}
  .hero-copy{padding:48px 0 52px}
  .head h1,.head h2,.head.sm h2{font-size:1.9rem}
  .phero h1{font-size:2.1rem}
  .head{margin-bottom:30px}
  .echo{font-size:1.45rem}
  .photo-row{grid-template-columns:1fr;gap:22px}
  .masonry{columns:2 150px;column-gap:10px}
  .masonry .tile{margin-bottom:10px;border-width:3px;box-shadow:3px 4px 0 var(--c,var(--red))}
  .cat-grid{grid-template-columns:1fr;gap:26px}
  .wa-float{width:54px;height:54px;right:12px;bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}