:root{--k:#000;--w:#fff;--display:'Bodoni Moda',Georgia,serif;--texto:'Outfit',system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--k);color:var(--w);font-family:var(--texto);font-weight:300;line-height:1.6}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid currentColor;outline-offset:4px}
section{padding:clamp(70px,12vw,140px) 4vw}
.claro{background:var(--w);color:var(--k)}
h2{font-family:var(--display);font-weight:500;font-size:clamp(2.2rem,6vw,5rem);line-height:1.05;margin:0 0 .7em}

/* Cabecera: se invierte sola sobre fondos negros y blancos */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px 4vw;mix-blend-mode:difference;color:#fff}
.top nav{display:flex;gap:clamp(14px,3vw,34px);font-weight:600}
.top nav a{text-decoration:none}
.top nav a:hover{text-decoration:underline;text-underline-offset:6px}

/* Botón flotante de WhatsApp */
#whatsapp-flotante{position:fixed;right:22px;bottom:22px;z-index:60;width:62px;height:62px;display:flex;align-items:center;justify-content:center;background:#25d366;color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 6px 24px rgba(0,0,0,.35);transition:transform .2s,box-shadow .2s}
#whatsapp-flotante svg{width:34px;height:34px}
#whatsapp-flotante:hover{transform:scale(1.08);box-shadow:0 8px 28px rgba(0,0,0,.45)}
@media (max-width:700px){#whatsapp-flotante{right:16px;bottom:16px;width:58px;height:58px}}

/* Cursor */
.cursor{position:fixed;top:0;left:0;width:30px;height:30px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:99;opacity:0;transition:width .25s,height .25s,opacity .3s}
.cursor.grande{width:78px;height:78px}
@media (pointer:coarse){.cursor{display:none}}

/* Hero */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:120px;padding-bottom:36px}
h1{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,11.5vw,11rem);line-height:1;letter-spacing:-.03em;margin:0;overflow:hidden;padding-bottom:.1em}
.letra{display:inline-block;transform:translateY(110%);opacity:0;animation:sube .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*60ms)}
@keyframes sube{to{transform:none;opacity:1}}
.lead{max-width:44ch;font-size:clamp(1.05rem,2vw,1.35rem);margin:.4em 0 1.2em}
#cuerda{width:100%;height:110px;display:block}
.teclado{position:relative;display:flex;height:clamp(150px,26vw,250px);border:1px solid #fff}
.teclado button{font:inherit;cursor:pointer}
.w{flex:1;display:flex;align-items:flex-end;justify-content:center;padding:0 0 10px;background:#fff;color:#000;border:0;border-right:1px solid #000;transform-origin:top;transition:transform .15s,background .15s}
.w:last-of-type{border-right:0}
.w.on{background:#bdbdbd;transform:scaleY(.97)}
.b{position:absolute;top:0;width:7%;height:60%;transform:translateX(-50%);z-index:2;background:#000;color:#fff;border:1px solid #fff;border-top:0;transition:background .15s,color .15s}
.b.on{background:#fff;color:#000}
.hint{font-size:.9rem;opacity:.7;margin:14px 0 0}

/* Cinta */
.marquee{background:#fff;color:#000;overflow:hidden;white-space:nowrap;padding:14px 0;border-block:1px solid #000;font-family:var(--display);font-style:italic;font-size:clamp(1.4rem,3vw,2.2rem)}
.marquee div{display:inline-block;animation:run 30s linear infinite}
@keyframes run{to{transform:translateX(-50%)}}

/* Servicios */
.lista{list-style:none;margin:0;padding:0;border-top:1px solid currentColor}
.lista li{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;padding:34px 12px;border-bottom:1px solid currentColor;transition:background .35s,color .35s,padding .35s}
.lista li:hover{background:#000;color:#fff;padding-left:36px}
.lista strong{font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,4vw,3rem);line-height:1.1}
.lista p{margin:0;max-width:46ch}

/* Proceso */
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}
.pasos li{position:relative;padding-top:24px}
.pasos li::before{content:"";position:absolute;top:0;left:0;height:2px;width:0;background:#fff;transition:width 1.2s ease calc(var(--d,0)*.25s)}
.pasos li.visto::before{width:100%}
.pasos b{display:block;font-family:var(--display);font-weight:500;font-size:1.7rem;line-height:1.15;margin-bottom:.3em}

/* Formulario */
form{display:grid;gap:26px;max-width:640px}
label{display:grid;gap:4px;font-weight:600;font-size:.95rem}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:26px}
input,select{font:inherit;font-weight:400;background:transparent;color:inherit;border:0;border-bottom:2px solid #000;border-radius:0;padding:10px 0;outline:none;transition:border-width .15s}
input:focus,select:focus{border-bottom-width:6px}
.enviar{justify-self:start;font:inherit;font-weight:600;padding:18px 44px;background:#000;color:#fff;border:2px solid #000;border-radius:999px;cursor:pointer;transition:background .25s,color .25s,transform .25s}
.enviar:hover{background:#fff;color:#000;transform:translateX(10px)}
#estado{min-height:1.6em;font-weight:600;margin-top:22px}
footer{padding:40px 4vw;font-size:.9rem;opacity:.7}

@media (max-width:700px){.lista li{grid-template-columns:1fr;gap:.6rem}.fila{grid-template-columns:1fr}.top nav a:first-child{display:none}}
@media (prefers-reduced-motion:reduce){.marquee div{animation:none}.letra{animation:none;transform:none;opacity:1}*{transition-duration:.01ms!important}}