/* Sistema de diseño «Cine» · keyzip.pro · v1 (26/10/2026)
   Tokens: cambia --acc (acento, SOLO botones/cifras/detalles) y --bg por sector. */
:root{--bg:#0b0b0d;--bg2:#141418;--ink:#f3efe8;--mut:#a9a39a;--line:#ffffff1a;--acc:#d8b26a;--acc-ink:#111;
--fd:'Cormorant Garamond',Georgia,serif;--fb:'Inter',system-ui,sans-serif;--r:18px;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--fb);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit}
h1,h2,h3{font-family:var(--fd);font-weight:500;line-height:1.02;letter-spacing:-.01em;margin:0;text-wrap:balance}
.wrap{width:min(1180px,92vw);margin:0 auto}
.eyebrow{font:600 12px/1 var(--fb);letter-spacing:.28em;text-transform:uppercase;color:var(--acc)}
/* franja demo */
.demo-bar{position:relative;z-index:30;background:#ffd400;color:#000;text-align:center;padding:8px 12px;font:700 13px/1.3 var(--fb)}
/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:20;transition:background .4s,backdrop-filter .4s,padding .4s;padding:22px 0}
.demo-bar~.nav{top:34px}
.nav.solid{background:#0b0b0dcc;backdrop-filter:blur(14px);padding:12px 0;border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px}
.brand{font:600 15px/1.1 var(--fb);letter-spacing:.22em;text-transform:uppercase}.brand small{display:block;letter-spacing:.08em;text-transform:none;font-weight:400;color:var(--mut);font-size:11px;margin-top:3px}
/* botones */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;background:var(--acc);color:var(--acc-ink);font-weight:600;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s;will-change:transform}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px -12px var(--acc)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid #ffffff55}.btn.ghost:hover{border-color:var(--ink);box-shadow:none}
.btn .ar{transition:transform .35s var(--ease)}.btn:hover .ar{transform:translateX(4px)}
/* hero cinematográfico */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding:0 0 9vh}
.hero .bg{position:absolute;inset:-6% 0;background-size:cover;background-position:center;transform:scale(1.08);animation:kb 18s var(--ease) forwards;will-change:transform}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#000a 0%,#0000 30%,#0006 62%,var(--bg) 100%),radial-gradient(120% 80% at 20% 100%,#000c,#0000 60%)}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(42px,6.4vw,96px);max-width:15ch;margin:18px 0 22px}
.hero p.lead{font-size:clamp(17px,1.6vw,20px);max-width:52ch;color:#e9e3d9;margin:0 0 30px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.scroll-cue{position:absolute;left:50%;bottom:22px;z-index:2;width:1px;height:46px;background:linear-gradient(var(--ink),#0000);animation:cue 2.2s infinite}
@keyframes kb{to{transform:scale(1)}}@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* secciones */
section{padding:clamp(80px,12vw,150px) 0}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.sec-head h2{font-size:clamp(38px,5.4vw,72px)}.sec-head p{color:var(--mut);margin:0;max-width:46ch}
.alt{background:var(--bg2)}
/* tarjetas de servicio */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.card{background:var(--bg);padding:34px 30px;position:relative;transition:background .5s}
.card:hover{background:#17171c}.card h3{font-size:30px;margin:14px 0 10px}.card p{color:var(--mut);margin:0 0 18px}
.card .num{font:500 13px var(--fb);color:var(--mut);letter-spacing:.2em}
.price{font:500 34px/1 var(--fd);color:var(--acc)}.price small{font:400 13px var(--fb);color:var(--mut);margin-left:6px}
.card::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--acc);transition:width .6s var(--ease)}.card:hover::before{width:100%}
/* fotos */
.frame{border-radius:var(--r);overflow:hidden;position:relative}.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}.frame:hover img{transform:scale(1.05)}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.parallax{will-change:transform}.frame img.parallax{position:absolute;left:0;top:-14%;height:128%!important;object-fit:cover}
html.cap .hero{min-height:var(--caph,900px)}
/* cifras */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px;border-top:1px solid var(--line);padding-top:40px}
.stat b{display:block;font:500 clamp(48px,6vw,80px)/1 var(--fd);color:var(--acc)}.stat span{color:var(--mut);font-size:14px}
/* pasos */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px;counter-reset:s}
.step{border-top:1px solid var(--line);padding-top:24px}.step::before{counter-increment:s;content:"0" counter(s);font:500 54px/1 var(--fd);color:var(--acc);display:block;margin-bottom:14px}
.step h3{font-size:28px;margin-bottom:8px}.step p{color:var(--mut);margin:0}
/* aviso */
.notice{border:1px solid #d8b26a55;background:#d8b26a10;border-radius:var(--r);padding:24px 28px;color:#eadcc0}
/* faq */
details{border-bottom:1px solid var(--line);padding:22px 0}summary{cursor:pointer;font:500 24px var(--fd);list-style:none;display:flex;justify-content:space-between}summary::after{content:"+";color:var(--acc);transition:transform .3s}details[open] summary::after{transform:rotate(45deg)}details p{color:var(--mut);margin:12px 0 0}
/* cta final */
.final{text-align:center;position:relative;overflow:hidden}.final h2{font-size:clamp(44px,7vw,96px);margin-bottom:20px}.final p{color:var(--mut);max-width:50ch;margin:0 auto 34px}
footer{border-top:1px solid var(--line);padding:36px 0;color:var(--mut);font-size:14px}footer a{color:var(--ink)}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:25;background:#25d366;color:#fff;text-decoration:none;font-weight:700;border-radius:999px;padding:14px 18px;box-shadow:0 10px 30px #0006;transition:transform .3s}.wa-float:hover{transform:scale(1.05)}
/* fichas (inmuebles, platos, tratamientos) */
.listing{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.item{background:var(--bg2);border-radius:var(--r);overflow:hidden;transition:transform .5s var(--ease)}.item:hover{transform:translateY(-6px)}
.item .frame{border-radius:0;aspect-ratio:4/3}.item .body{padding:22px 24px 26px}.item h3{font-size:28px;margin:6px 0}.item p{color:var(--mut);margin:0}
.tag{display:inline-block;font:600 11px var(--fb);letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.chip{display:inline-block;margin-top:10px;font-size:12px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--mut)}
/* formulario */
.form{display:grid;gap:12px;max-width:560px}.form input,.form select{background:#ffffff0a;border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:15px 16px;font:16px var(--fb)}.form input:focus,.form select:focus{outline:2px solid var(--acc);outline-offset:1px}
/* revelado al hacer scroll */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}
@media (max-width:820px){.sec-head,.split{grid-template-columns:1fr}.nav .btn{padding:11px 16px;font-size:14px}.hero{padding-bottom:12vh}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}