/* Landing de Michi Mapa · misma línea editorial (tinta sobre papel). Usa los tokens de maqueta.css */
.defs{position:absolute}
body.landing{overflow-x:hidden}
.top-landing{justify-content:space-between}
.nav-landing a{color:var(--t70);text-decoration:none;position:relative;padding:6px 0}
.nav-landing a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--tinta);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-landing a:hover{color:var(--tinta)}.nav-landing a:hover::after{transform:scaleX(1)}
.entrar{margin-left:0}

/* ---------- portada ---------- */
.hero{min-height:calc(100svh - var(--top));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(16px,4vw,64px);padding:clamp(24px,4vw,56px) clamp(16px,4vw,56px) 0;position:relative;border-bottom:1.5px solid var(--tinta)}
.hero-texto{align-self:center;padding-bottom:clamp(24px,6vw,80px);position:relative;z-index:2}
.hero h1{font:400 clamp(56px,8.6vw,148px)/.88 var(--serif);letter-spacing:-.03em;margin:22px 0 26px}
.hero h1 em{font-style:italic}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .l span{display:inline-block;transform:translateY(105%);animation:sube 1.1s var(--out) forwards}
.hero h1 .l:nth-child(2) span{animation-delay:.12s}.hero h1 .l:nth-child(3) span{animation-delay:.24s}
@keyframes sube{to{transform:none}}
.bajada{font-size:clamp(17px,1.35vw,20px);color:var(--t70);max-width:36ch;opacity:0;animation:fundir 1s .6s forwards}
@keyframes fundir{to{opacity:1}}
.acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;opacity:0;animation:fundir 1s .8s forwards}
.pill.grande{padding:20px 34px;font-size:18px}

/* ---------- el gato ---------- */
.escena{position:relative;width:min(100%,600px);aspect-ratio:1/1;justify-self:center;align-self:end;perspective:1400px;touch-action:none;cursor:grab;margin-bottom:clamp(90px,14vw,190px)}
.escena.arrastrando{cursor:grabbing}
.escena.sobre-bigote{cursor:pointer}
.giro{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.cara,.espalda{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:visible}
.espalda{transform:rotateY(180deg)}
.tinta{fill:var(--tinta)}
.oreja-in{fill:none;stroke:var(--papel);stroke-opacity:.18;stroke-width:5;stroke-linecap:round}
.blanco{fill:var(--papel)}
.pupila{fill:var(--tinta)}
.brillo{fill:var(--papel)}
.nariz{fill:var(--papel)}
.boca{fill:none;stroke:var(--papel);stroke-width:4;stroke-linecap:round}
.nuca{fill:none;stroke:var(--papel);stroke-opacity:.15;stroke-width:5;stroke-linecap:round}
.bigotes path{fill:none;stroke:var(--tinta);stroke-width:3.2;stroke-linecap:round}
.bigotes.papel path{stroke:var(--papel)}
.goteo{position:absolute;left:0;top:0;width:100%;height:150%;overflow:visible;pointer-events:none}
.goteo #menton,.goteo #gotas *{fill:var(--tinta)}
#salpicaduras circle{fill:var(--tinta)}
#charco{fill:var(--tinta);opacity:.92}
#prrr text{font:italic 400 30px var(--serif);fill:var(--tinta)}

/* ---------- secciones ---------- */
.seccion{padding:clamp(80px,11vw,150px) clamp(16px,4vw,56px);border-bottom:1px solid var(--t12)}
.seccion h2,.cierre h2{font:400 clamp(42px,6vw,92px)/.96 var(--serif);letter-spacing:-.025em;max-width:15ch;margin-top:clamp(28px,4vw,52px)}
.seccion h2 em,.cierre h2 em{font-style:italic}
.pasos{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(48px,6vw,90px);border-top:1.5px solid var(--tinta)}
.pasos li{padding-top:28px}
.romano{display:block;font:italic 400 clamp(64px,7vw,110px)/.8 var(--serif);margin-bottom:22px}
.pasos h3{font:400 30px/1.05 var(--serif);margin-bottom:10px}
.pasos p{color:var(--t70);max-width:34ch}
.cifras{background:var(--tinta);color:var(--papel);border-bottom:0}
.cifras .rotulo{color:rgba(244,241,234,.5)}.cifras .rotulo b{color:var(--papel)}
.numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(40px,5vw,72px)}
.numeros div{border-top:1px solid rgba(244,241,234,.25);padding-top:22px}
.numeros b{display:block;font:400 clamp(72px,9vw,150px)/.85 var(--serif);letter-spacing:-.04em}
.numeros span{font:400 13px/1.5 var(--mono);color:rgba(244,241,234,.65);display:block;margin-top:12px;max-width:26ch}
.fuente{font:400 12px/1.5 var(--mono);color:rgba(244,241,234,.45);margin-top:40px}
.garantias{list-style:none;margin-top:clamp(48px,6vw,90px);border-top:1.5px solid var(--tinta)}
.garantias li{display:grid;grid-template-columns:180px minmax(0,1fr);gap:var(--g,32px);padding:30px 0;border-bottom:1px solid var(--t12);align-items:baseline}
.garantias span{font:400 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--t45)}
.garantias p{font:400 clamp(22px,2.2vw,32px)/1.2 var(--serif);max-width:38ch}
.cierre{padding:clamp(90px,12vw,170px) clamp(16px,4vw,56px);display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.cierre h2{margin:0}
.pie{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px clamp(16px,4vw,56px);border-top:1.5px solid var(--tinta);font:400 12px/1.4 var(--mono);color:var(--t45)}
.pie span{display:inline-flex;gap:8px;align-items:center}
.pie a{color:var(--t70)}

/* ---------- hoja de inicio de sesión ---------- */
.velo{position:fixed;inset:0;background:rgba(17,17,16,.35);z-index:2500;opacity:0;transition:opacity .4s}
.velo.on{opacity:1}
.hoja{position:fixed;top:0;right:0;bottom:0;width:min(100%,480px);background:var(--papel);border-left:1.5px solid var(--tinta);z-index:2600;padding:28px clamp(20px,3vw,40px) 24px;display:flex;flex-direction:column;gap:18px;overflow:auto;transform:translateX(102%);transition:transform .55s var(--ease)}
.hoja.on{transform:none}
.hoja[hidden],.velo[hidden]{display:block!important;visibility:hidden}
.hoja.on,.velo.on{visibility:visible}
.cerrar{position:absolute;top:18px;right:18px;width:40px;height:40px;border:1.5px solid var(--tinta);border-radius:50%;display:grid;place-items:center;transition:.3s}
.cerrar:hover{background:var(--tinta);color:var(--papel);transform:rotate(90deg)}
.cerrar svg{width:18px;height:18px}
.hoja h2{font:400 56px/.92 var(--serif);letter-spacing:-.025em;margin-top:6px}
.hoja h2 em{font-style:italic}
.hoja-bajada{color:var(--t70)}
.hoja-bajada.grande{font:400 26px/1.2 var(--serif);color:var(--tinta)}
.hoja-bajada em{font-style:italic}
.paso{display:flex;flex-direction:column;gap:16px}
.paso[hidden]{display:none}
.opcion{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border:1.5px solid var(--tinta);border-radius:16px;font:400 16px/1 var(--sans);text-align:left;position:relative;overflow:hidden;isolation:isolate;transition:color .4s}
.opcion::before{content:"";position:absolute;inset:0;background:var(--tinta);transform:translateY(101%);transition:transform .45s var(--ease);z-index:-1}
.opcion:hover{color:var(--papel)}.opcion:hover::before{transform:none}
.opcion svg{width:20px;height:20px}.opcion .flecha{margin-left:auto;width:17px}
.form-mail{display:flex;flex-direction:column;gap:12px;padding-top:18px;border-top:1px solid var(--t12)}
.form-mail label{font:400 11.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--t45)}
.form-mail input,.casillas input{background:transparent;border:0;border-bottom:1.5px solid var(--tinta);padding:10px 2px;font:300 22px/1.2 var(--sans);border-radius:0;outline:none}
.form-mail input:focus,.casillas input:focus{border-bottom-width:3px}
.form-mail .pill,.codigo .pill{align-self:flex-start;margin-top:6px}
.error{font:400 12.5px/1.4 var(--mono);color:var(--res);min-height:1em}
.casillas{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.casillas input{text-align:center;font:400 40px/1 var(--serif);padding:8px 0}
.codigo{display:flex;flex-direction:column;gap:14px}
.link{align-self:flex-start;font:400 12.5px/1 var(--mono);text-decoration:underline;text-underline-offset:4px;color:var(--t70)}
.letra-chica{display:flex;gap:10px;margin-top:auto;padding-top:18px;border-top:1px solid var(--t12);font:400 11.5px/1.55 var(--mono);color:var(--t45)}
.letra-chica svg{width:15px;height:15px;flex:none;margin-top:2px}
.aviso-maqueta{font:400 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--t45);border:1px dashed var(--t45);border-radius:6px;padding:5px 7px 4px;align-self:flex-start}

@media (max-width:960px){
  .nav-landing{display:none}
  .hero{grid-template-columns:1fr;padding-top:24px}
  .escena{width:min(100%,420px);margin-bottom:120px}
  .pasos,.numeros{grid-template-columns:1fr}
  .garantias li{grid-template-columns:1fr;gap:10px}
}