*{box-sizing:border-box}body.cine{margin:0;background:#131511;color:#f5f1e8;font:16px/1.45 Arial,sans-serif;text-align:left;overflow-x:clip}body.cine:before,body.cine:after{display:none}.cine nav{position:absolute;top:0;left:0;width:100%;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:22px 5%;color:white;background:linear-gradient(#0009,transparent);font:10px/1.3 monospace;letter-spacing:.12em}.cine nav a,.opening a{color:inherit;text-decoration:none;border:0}.film{height:235svh;position:relative;--p:0}.screen{position:sticky;top:0;height:100svh;background:#171b15;overflow:hidden;isolation:isolate}.shot,.veil,.frame{position:absolute;inset:0;pointer-events:none}.shot{background-size:cover;background-position:center}.initial{background-image:var(--photo);transform:scale(calc(1 + var(--p)*.18))}.next{background-image:var(--second);transform:scale(calc(1.14 - var(--p)*.14));clip-path:inset(0 calc((1 - var(--wipe))*100%) 0 0)}.radial .next{clip-path:circle(calc(var(--wipe)*145vmax) at 68% 42%)}.diagonal .next{clip-path:polygon(0 0,calc(var(--wipe)*130% - 30%) 0,calc(var(--wipe)*130%) 100%,0 100%)}.veil{background:linear-gradient(0deg,#080b09ed 0%,#0b0c0b82 27%,transparent 78%)}.frame{inset:12% 5% 12%;border-top:1px solid #fff4;border-bottom:1px solid #fff4}.opening,.chapter{position:absolute;left:6%;right:6%;bottom:15%;color:#fff}.opening{opacity:var(--open,1);transform:translateY(calc(var(--p)*-8vh))}.cine h1,.cine .chapter h2{font:500 clamp(70px,12vw,176px)/.88 Georgia,serif;letter-spacing:-.074em;text-transform:none;color:white;margin:.21em 0}.cine h1 em{display:block;color:var(--tint);font-weight:400}.cine.surf h1,.cine.bicicletas h1,.cine.minimarket h1,.cine.dental h1{font-family:Arial,sans-serif;font-weight:800}.opening a{display:inline-block;border-bottom:1px solid #fff9;padding:8px 0}.cine small,.meter{font:600 10px/1.5 monospace;letter-spacing:.15em}.chapter{opacity:var(--ch,0);pointer-events:none;transform:translateY(calc((1 - var(--ch,0))*30px))}.cine .chapter h2{font-size:clamp(47px,7vw,96px);max-width:13ch}.chapter p{max-width:39em;margin:15px 0 0;font-size:clamp(15px,2vw,20px)}.meter{position:absolute;bottom:4%;left:6%;right:6%;display:flex;align-items:center;gap:18px;color:white}.meter i{flex:1;height:2px;background:linear-gradient(to right,var(--tint) calc(var(--p)*100%),#fff5 0)}.cine .selector{background:#f3eee4;color:#21231e;margin:0;max-width:none;padding:12vh max(7vw,calc((100vw - 880px)/2));min-height:86svh}.cine .selector h2{font:normal clamp(44px,7vw,88px)/1 Georgia,serif;letter-spacing:-.05em;color:#29251e;text-transform:none}.cine summary{font:normal clamp(25px,4vw,48px)/1.25 Georgia,serif;padding:18px 0}.cine details[open]{border-left:4px solid var(--accent);padding-left:18px}.cine details[open] p{font-size:18px}.cine .credits{background:#191b17;color:white}.cine .credits a{color:white}@media(prefers-reduced-motion:reduce){.shot,.opening,.chapter{transform:none}}
.plate{margin:0 0 20px;height:clamp(180px,28svh,340px);position:relative;background-size:cover;background-position:50% 38%;overflow:hidden;border-radius:2px;transition:background-position .65s}.plate[data-choice="1"]{background-position:50% 55%}.plate[data-choice="2"]{background-position:50% 75%}.plate figcaption{position:absolute;bottom:12px;left:14px;color:white;font:600 12px monospace;background:#171913da;padding:7px 11px}.coffee-plate{background:repeating-linear-gradient(4deg,transparent 0 10px,#4727120c 11px 12px),linear-gradient(110deg,#b97140,#dcb07d 60%,#a5623d)}.coffee-plate svg{width:100%;height:100%}.cup{transform-origin:55% 50%;transition:transform .55s}.brew{stop-color:#48210e;transition:stop-color .45s}.foam{opacity:0;transition:opacity .45s}.plate[data-choice="1"] .cup{transform:rotate(-18deg) scale(.9)}.plate[data-choice="1"] .brew{stop-color:#804520}.plate[data-choice="2"] .cup{transform:rotate(12deg) scale(1.05)}.plate[data-choice="2"] .brew{stop-color:#ad773f}.plate[data-choice="2"] .foam{opacity:1}@media(prefers-reduced-motion:reduce){.plate,.cup,.foam,.brew{transition:none}}
