:root{
  --paper:#ebe5d3;
  --ink:#111;
  --accent:#f9b233;
  --accent-2:#f07f24;
  --f-display:'Anton',Impact,sans-serif;
  --f-body:'Special Elite','Courier New',monospace;
  --f-hand:'Permanent Marker',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.5;overflow-x:clip}
main{overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
.grain{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.32;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* header */
.top{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:14px 24px;pointer-events:none}
.top>*{pointer-events:auto}
.top__logo img{height:26px;width:auto}
.lang{display:flex;gap:4px;font-family:var(--f-display);letter-spacing:.05em;background:var(--paper);padding:2px 10px;border:2px solid var(--ink)}
.lang button{background:none;border:0;font:inherit;cursor:pointer;color:#7a735f;padding:0 2px}
.lang button.is-on{color:var(--ink);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px;text-decoration-color:var(--accent-2)}

.btn{display:inline-block;text-decoration:none;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.08em;font-size:20px;
  background:var(--ink);color:var(--accent);padding:12px 28px;box-shadow:6px 6px 0 var(--accent-2);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--accent-2)}

/* ===== HERO ===== */
.hero{position:relative;min-height:100vh;padding:120px 4vw 210px;overflow:visible;isolation:isolate}
.hero__def{font-size:15px;text-transform:uppercase;letter-spacing:.18em;margin-bottom:46px}
.hero__def b{background:var(--ink);color:var(--accent);padding:0 3px;font-weight:400}
.hero__title{font-family:var(--f-display);font-weight:400;text-transform:uppercase;line-height:.8;
  font-size:clamp(88px,17vw,300px);letter-spacing:-.01em;position:relative;z-index:2}
.hero__title span{display:block;position:relative;width:max-content}
.hero__title .t1{transform:rotate(-2deg)}
.hero__title .t2{transform:rotate(1.5deg);margin-top:.04em;margin-left:.1em}
.hero__title i{font-style:normal;color:var(--accent-2);-webkit-text-stroke:2px var(--ink);margin-right:.04em}
.crown{position:absolute;width:.34em;left:1.02em;top:-.26em;transform:rotate(8deg);z-index:4}
.ring{position:absolute;inset:-.14em -.1em -.18em -.06em;width:calc(100% + .16em);height:calc(100% + .32em);pointer-events:none;overflow:visible}
.ring path{stroke-dasharray:1800;stroke-dashoffset:1800;animation:draw 1.6s .6s cubic-bezier(.6,.1,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.hero__art{position:absolute;right:0;top:15vh;width:min(46vw,640px);z-index:3;transform:rotate(5deg);
  filter:drop-shadow(8px 10px 0 rgba(0,0,0,.18));will-change:transform}
.hero__strip{position:relative;width:min(560px,86vw);margin-top:36px;z-index:4;transform:rotate(-2.5deg)}
.hero__strip img{width:100%}
.hero__strip p{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:8% 9%;
  font-family:var(--f-hand);font-size:clamp(17px,2.1vw,25px);line-height:1.15}
.hero__tape{position:absolute;z-index:5;width:150px;opacity:.9}
.hero__tape--a{left:3%;top:70%;transform:rotate(-24deg)}
.hero__tape--b{left:42%;top:84%;width:120px;transform:rotate(14deg)}
.hero__brush{position:absolute;z-index:1;width:min(460px,50vw);left:34vw;bottom:2%;opacity:.85;transform:rotate(-4deg)}
.hero__note{position:absolute;z-index:5;right:6%;bottom:8%;font-family:var(--f-hand);font-size:clamp(18px,2.4vw,30px);line-height:1.1;color:var(--ink);
  background:var(--accent);padding:6px 14px;transform:rotate(-4deg);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.hero__cta{position:absolute;z-index:6;left:4vw;bottom:44px}

/* ===== ESCENAS ===== */
.scene{position:relative;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:2vw;padding:0 4vw 80px;margin-top:-90px}
.scene__edge{position:absolute;left:0;right:0;top:-1px;width:100%;height:150px;object-fit:fill;z-index:0;
  filter:sepia(.22) saturate(.9) brightness(.97)}
.scene--1{background:var(--ink);color:var(--paper);padding-top:210px;z-index:1}
.scene__art-wrap{position:relative;z-index:2}
.scene__paper{position:absolute;inset:8% -2% 4% -3%;width:104%;height:88%;object-fit:fill;transform:rotate(-2.5deg);opacity:.96}
.scene__art{position:relative;width:min(100%,760px);height:auto;margin:auto;transform:rotate(-3deg);will-change:transform;z-index:2}
.scene__pencil{position:absolute;right:-2%;bottom:-8%;width:46%;filter:invert(1);opacity:.55;z-index:3}
.scene__text{position:relative;z-index:3}
.scene__ch{font-family:var(--f-hand);font-size:22px;color:var(--accent);transform:rotate(-2deg)}
.scene__title{font-family:var(--f-display);font-weight:400;text-transform:uppercase;line-height:.84;font-size:clamp(70px,12vw,190px);margin:6px 0 14px;color:var(--paper);text-shadow:5px 5px 0 var(--accent-2)}
.scene__blurb{max-width:420px;margin-bottom:34px;font-size:18px}
.scene__marker{position:absolute;right:3%;top:120px;width:min(190px,18vw);opacity:.9;transform:rotate(14deg);z-index:1}
.scene .btn{margin-top:22px}

.polaroid{position:relative;background:#f4efe0;padding:12px 12px 8px;width:min(340px,70vw);transform:rotate(3deg);box-shadow:8px 10px 0 rgba(0,0,0,.55);color:var(--ink)}
.polaroid img:not(.polaroid__tape){width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#0a0a0a}
.polaroid__tape{position:absolute;top:-16px;left:50%;width:110px;transform:translateX(-50%) rotate(-6deg);z-index:2}
.polaroid figcaption{display:flex;justify-content:space-between;align-items:baseline;padding-top:10px;font-family:var(--f-hand);font-size:22px}
.polaroid .price{background:var(--ink);color:var(--accent);padding:0 8px;transform:rotate(-3deg)}

/* ===== calle (interludio) ===== */
.road{position:relative;height:150px;background:var(--ink);overflow:hidden;z-index:2}
.road__line{position:absolute;left:0;right:0;top:50%;height:8px;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,var(--accent) 0 60px,transparent 60px 120px)}
.road__rider{position:absolute;height:120px;width:auto;bottom:26px;left:-200px;animation:ride 11s linear infinite;filter:invert(1) hue-rotate(180deg) brightness(1.3)}
@keyframes ride{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 400px))}}

.next{background:var(--ink);color:var(--paper);text-align:center;padding:70px 24px 90px}
.next__txt{font-family:var(--f-hand);font-size:22px;color:var(--accent);line-height:1.5}

/* ===== footer ===== */
.foot{background:var(--paper);text-align:center;padding:90px 24px 40px;position:relative}
.foot__dog{width:min(300px,60vw);margin:0 auto 26px;filter:drop-shadow(5px 6px 0 rgba(0,0,0,.2))}
.foot__talk{font-size:20px;margin-bottom:20px}
.foot__links{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.foot__links a{font-family:var(--f-display);font-size:28px;text-transform:uppercase;text-decoration:none;letter-spacing:.05em}
.foot__links a:hover{background:var(--ink);color:var(--accent);padding:0 6px;margin:0 -6px}
.foot__small{font-size:13px;opacity:.6}

/* ===== móvil ===== */
@media (max-width:820px){
  .top{padding:10px 14px}
  .hero{padding:90px 5vw 150px;min-height:0}
  .hero__def{font-size:12px}
  .hero__title{font-size:clamp(80px,25vw,200px)}
  .hero__art{position:relative;right:auto;top:auto;width:96%;margin:-6px auto 0;display:block}
  .hero__strip{margin-top:-10px}
  .hero__note{position:relative;right:auto;bottom:auto;display:inline-block;margin:20px 0 0 4vw}
  .hero__cta{position:relative;left:auto;bottom:auto;display:inline-block;margin:26px 0 0 4vw;font-size:16px}
  .hero__tape,.hero__brush{display:none}
  .scene{grid-template-columns:1fr;margin-top:-60px;padding-bottom:60px}
  .scene--1{padding-top:150px}
  .scene__edge{height:100px}
  .scene__title{font-size:clamp(64px,22vw,140px)}
  .scene__marker{display:none}
  .road__rider{height:90px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.ring path{stroke-dashoffset:0}html{scroll-behavior:auto}}