/* komusoftware.com · «De idea a software» (22-oct-2026). Package: design-assets/komu-direccion-2026-10 (palette.json,
   DIRECCION-CREATIVA.md § Sistema visual). Loaded after estilos.css: the new markup uses its own classes, so the v3 layers
   (stickers, wavy section borders, coloured sections, the shop scene) don't reach it. Tokens come from estilos.css + these. */
:root{
  --linea:#cfc9bc; --linea-2:#e4dfd3; --borde:#9b9588; --oscuro:#30302d; --suave:#6e6c66; --durazno:#f5bd91;
  --ancho-d:1220px; --form-d:640px; --gutter:24px;
}
@media (max-width:600px){:root{--gutter:20px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--papel)}
body.en-recorrido{background:var(--washi)}
.ancho{max-width:calc(var(--ancho-d) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}

/* Buttons: a short solid shadow only on the main action. 18.7 px bold = «large text», so ink on amanecer passes AA. */
.btn{border-radius:12px;box-shadow:none}
.btn:active{transform:none;box-shadow:none}
.btn-primario{background:var(--amanecer);color:var(--tinta);font-size:18.7px;box-shadow:0 4px 0 var(--tinta)}
.btn-primario:active{transform:translateY(3px);box-shadow:0 1px 0 var(--tinta)}
.btn-primario[disabled]{box-shadow:none;transform:none}
.btn-tinta{background:var(--tinta);color:var(--papel);box-shadow:none}
.btn .flecha{flex:none}
.link-d{display:inline-flex;align-items:center;gap:4px;font:600 15px var(--f-texto);color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.btn-texto-d{min-height:44px;padding:8px 4px;border:0;background:none;font:600 15px var(--f-texto);color:var(--tinta);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.btn-texto-d[disabled]{opacity:.5;cursor:default}

/* Header: small mark + one CTA, a thin rule inside the content width */
.cabecera-d .ancho,.flujo-top .ancho{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;height:84px}
.cabecera-d .ancho::after,.flujo-top .ancho::after{content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:1.5px;background:var(--linea-2)}
.cabecera-d{background:var(--washi)}
.logo-d{display:inline-flex;align-items:center;gap:8px;font:800 26px var(--f-titulo);letter-spacing:-.02em;color:var(--tinta);text-decoration:none}
.logo-d img{width:40px;height:31px}
.cabecera-d .nav-cta{min-height:46px;padding:10px 20px;font-size:15px}
@media (max-width:600px){.cabecera-d .ancho,.flujo-top .ancho{height:72px}.cabecera-d .nav-cta{min-height:42px;padding:8px 14px;font-size:14px}}

/* Hero: illustration → headline → form, one vertical block (DIRECCION-CREATIVA.md § Inicio) */
.hero-d{background:var(--washi);padding:24px 0 64px;text-align:center}
.hero-ficha{position:relative;width:min(660px,100%);margin:0 auto}
.komu-vivo,.ficha-komu,.komu-ok-d{position:relative}
.komu-vivo{width:100%;aspect-ratio:720/400}
.ficha-komu,.komu-ok-d{aspect-ratio:320/360}
.komu-vivo img,.ficha-komu img,.komu-ok-d img,.komu-rive-canvas{position:absolute;inset:0;width:100%;height:100%}
/* The canvas replaces the SVG in place: same box, no layout jump; it never takes the pointer or the scroll. */
.komu-rive-canvas{opacity:0;transition:opacity .2s;pointer-events:none}
.rive-listo .komu-rive-canvas{opacity:1}
.rive-listo img[data-komu-svg]{visibility:hidden}
/* The business name, in HTML under the drawn card and aligned with its left edge (x 230 of 720), never on its bars */
.ficha-de{position:absolute;left:32%;right:8%;top:88%;font:500 14px/1.3 var(--f-texto);color:var(--suave);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ficha-de b{font-weight:700;color:var(--tinta)}
.hero-d h1{margin:24px auto 0;font-size:clamp(36px,7vw,72px);font-weight:800;line-height:1.03;letter-spacing:-.03em}
.hero-d h1 .l1,.hero-d h1 .l3{display:block}
.hero-d h1 .l1i{white-space:nowrap}
.hero-d h1 em{font-style:normal;color:var(--brasa)}
@media (max-width:759px){.hero-d h1 .l1i{white-space:normal}.hero-d h1 em{display:inline-block;white-space:nowrap}}
.hero-apoyo{margin:14px auto 0;max-width:46ch;font:400 18px/1.45 var(--f-texto);color:var(--suave)}
.hero-despues{margin:20px auto 0;max-width:52ch;font:400 14px/1.5 var(--f-texto);color:var(--suave)}
.garantias-d{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin-top:10px;font:500 13px var(--f-texto);color:var(--suave)}
.garantias-d li{display:inline-flex;align-items:center;gap:7px}
.garantias-d li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amanecer)}
.retomar{margin-top:16px}

/* Business-name form (hero and closing) */
.form-negocio{max-width:600px;margin:28px auto 0;text-align:left}
.form-negocio label{display:block;margin-bottom:8px;font:800 15px var(--f-titulo)}
.campo-negocio{display:flex;gap:6px;padding:5px;border:2px solid var(--tinta);border-radius:14px;background:var(--papel)}
.campo-negocio:focus-within{outline:3px solid var(--amanecer);outline-offset:2px}
.campo-negocio input{flex:1;min-width:0;padding:10px 12px;border:0;background:transparent;font:500 17px var(--f-texto);color:var(--tinta);outline:0}
.campo-negocio input::placeholder,.campo-d input::placeholder{color:#857f74}
.campo-negocio .btn{flex:none;padding:10px 18px}
.campo-negocio.invalido{border-color:var(--error)}
.form-negocio .msg-error{margin-top:8px;font:600 14px var(--f-texto);color:var(--error)}
@media (max-width:600px){
  .campo-negocio{flex-direction:column;gap:12px;padding:0;border:0;background:none}
  .campo-negocio:focus-within{outline:0}
  .campo-negocio input{min-height:56px;padding:12px 16px;border:2px solid var(--tinta);border-radius:14px;background:var(--papel)}
  .campo-negocio input:focus-visible{outline:3px solid var(--amanecer);outline-offset:2px}
  .campo-negocio.invalido input{border-color:var(--error)}
  .campo-negocio .btn{min-height:56px;justify-content:space-between;padding:12px 18px}
}

/* The v3 layers paint each section by id (colour bands, light blobs in the closing, the taped tilted Pablo card):
   the direction uses one light surface, so they are reset here. */
#principal .sec{background:transparent}
.pablo-d .pablo-card{padding:0;border:0;background:none;box-shadow:none}

/* Sections: one light surface, editorial rhythm; washi panels only for services and prices */
.sec{padding:72px 0}
.sec h2{margin:0 0 12px;font:800 clamp(30px,4.2vw,44px)/1.08 var(--f-titulo);letter-spacing:-.025em}
.sec h3{font-family:var(--f-titulo);letter-spacing:-.01em}
.sec-cab{display:grid;grid-template-columns:1fr 1fr;gap:16px 56px;align-items:start}
.bajada-d{max-width:62ch;font:400 18px/1.5 var(--f-texto);color:var(--suave)}
.nota-d{margin-top:28px;font:400 14px/1.5 var(--f-texto);color:var(--suave)}
.panel-washi{padding:56px;border-radius:24px;background:var(--washi)}
@media (max-width:820px){.sec{padding:56px 0}.sec-cab{grid-template-columns:1fr}.panel-washi{padding:36px 24px;margin:0 calc(var(--gutter) * -0.5)}}
.cta-linea{box-shadow:none;border:1.5px solid var(--linea);background:var(--washi);border-radius:16px}
.panel-washi .cta-linea{background:var(--papel)}
.cta-solo{margin-top:24px}

.dolores{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:28px}
.dolores li{padding:18px 0;border-bottom:1.5px solid var(--linea-2);font:500 17px/1.45 var(--f-texto)}
@media (max-width:700px){.dolores{grid-template-columns:1fr}}

.habilidades{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:36px 28px;margin-top:36px}
.habilidad h3{margin:14px 0 6px;font-size:17px;font-weight:800;line-height:1.2}
.habilidad p{font:400 15px/1.45 var(--f-texto);color:var(--suave)}
.ver-registro{min-height:44px;padding:8px 0;border:0;background:none;font:600 13px var(--f-texto);color:var(--tinta);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.registro{font:500 12px/1.4 var(--f-mono);color:var(--tinta-2)}
@media (max-width:900px){.habilidades{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.habilidades{grid-template-columns:1fr;gap:24px}.habilidad{display:grid;grid-template-columns:48px 1fr;column-gap:16px}.habilidad img{grid-row:1 / span 4}.habilidad h3{margin-top:2px}.habilidad .ver-registro{justify-self:start}}

.servicios-d{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:36px 28px;margin-top:32px}
.servicios-d img{width:96px;height:96px}
.servicios-d h3{margin:16px 0 8px;font-size:19px;font-weight:800;line-height:1.2}
.servicios-d p{font:400 15px/1.45 var(--f-texto);color:var(--suave)}
.servicios-d .ejemplos-d{margin-top:10px;font:400 13px/1.45 var(--f-mono);color:var(--tinta-2)}
.servicios-d .desde-d{margin-top:14px;font:800 16px var(--f-titulo);color:var(--brasa)}
@media (max-width:900px){.servicios-d{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.servicios-d{grid-template-columns:1fr}}

.pablo-d{display:grid;grid-template-columns:1fr 1fr;gap:32px 56px;align-items:center}
.pablo-dato{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:16px;font:400 15px var(--f-texto)}
.pablo-d .pablo-card{transform:none}
.pablo-d .pablo-card::before{display:none}
.pablo-d .video-pablo{margin-top:0;border:2px solid var(--tinta);border-radius:16px;box-shadow:none}
@media (max-width:820px){.pablo-d{grid-template-columns:1fr}}

.pasos-d{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:28px}
.pasos-d li{padding-top:18px;border-top:2px solid rgba(229,86,42,.45)}
.pasos-d h3{margin-bottom:8px;font-size:18px;font-weight:800;line-height:1.2}
.pasos-d p{font:400 15px/1.45 var(--f-texto);color:var(--suave)}
@media (max-width:900px){.pasos-d{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pasos-d{grid-template-columns:1fr}}

.precio-d{display:grid;grid-template-columns:1.1fr 1fr;grid-template-areas:"texto lista" "cta lista";grid-template-rows:auto 1fr;gap:0 56px;align-items:start}
.precio-d>div{grid-area:texto}.precios-d{grid-area:lista}.precio-cta{grid-area:cta}
.condiciones-d{margin:20px 0 24px;font:400 14px/1.55 var(--f-texto);color:var(--suave)}
.precios-d{list-style:none}
.precios-d li{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 16px;padding:16px 0;border-bottom:1.5px solid var(--linea)}
.precios-d span{font:700 16px var(--f-texto)}
.precios-d b{font:800 17px var(--f-titulo);white-space:nowrap}
@media (max-width:820px){.precio-d{grid-template-columns:1fr;grid-template-areas:"texto" "lista" "cta";grid-template-rows:auto}.precio-cta{margin-top:24px}}

.faq-d{margin-top:20px;border-top:1.5px solid var(--linea-2)}
.faq-d details{border-bottom:1.5px solid var(--linea-2)}
.faq-d summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:14px 0;font:700 18px/1.3 var(--f-titulo);cursor:pointer;list-style:none}
.faq-d summary::-webkit-details-marker{display:none}
.faq-d summary::after{content:"+";flex:none;font:500 22px var(--f-texto)}
.faq-d details[open] summary::after{content:"−"}
.faq-d details p{max-width:70ch;padding:0 0 18px;font:400 16px/1.55 var(--f-texto);color:var(--tinta-2)}

.cierre-d{padding-bottom:80px}
.cierre-grid{display:grid;grid-template-columns:200px minmax(0,600px);gap:24px 48px;align-items:center;justify-content:center}
.komu-cierre-d{width:180px;height:auto}
.cierre-d .form-negocio{margin:20px 0 0}
.cierre-d .garantias-d{justify-content:flex-start}
@media (max-width:700px){.cierre-grid{grid-template-columns:1fr;text-align:center}.komu-cierre-d{width:132px;margin:0 auto}.cierre-d .garantias-d{justify-content:center}}

.pie-d{padding:28px 0;background:transparent;color:var(--suave);border-top:1.5px solid var(--linea-2);font:400 13px/1.5 var(--f-texto)}
.pie-d .ancho{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.pie-d a{color:var(--tinta)}

/* ───── Recorrido: one column, three stages, a folding project card ───── */
.flujo{min-height:100dvh}
.flujo-top .ancho{display:grid;grid-template-columns:1fr auto 1fr}
.flujo-titulo{font:500 15px var(--f-texto);color:var(--suave)}
.flujo-top .volver{justify-self:end;font-size:14px;font-weight:500;color:var(--suave)}
@media (max-width:700px){.flujo-top .ancho{grid-template-columns:1fr auto}.flujo-titulo{display:none}}
.flujo-cuerpo{max-width:calc(var(--form-d) + 2 * var(--gutter));margin:0 auto;padding:28px var(--gutter) 56px}
.etapas{list-style:none;display:flex;justify-content:space-between;gap:8px;font:500 14px var(--f-texto);color:var(--suave)}
.etapas li{display:flex;align-items:center;gap:7px;white-space:nowrap}
.etapas .num{flex:none;display:grid;place-items:center;width:24px;height:24px;border:1.5px solid var(--linea);border-radius:50%;background:var(--papel);font:700 12px var(--f-texto)}
.etapas [aria-current]{color:var(--tinta);font-weight:700}
.etapas [aria-current] .num{border-color:var(--tinta);background:var(--tinta);color:var(--papel)}
.etapas .hecha .num{border-color:var(--amanecer);background:var(--amanecer);color:var(--tinta)}
@media (max-width:420px){.etapas{font-size:13px;gap:4px}.etapas li{gap:5px}.etapas .num{width:22px;height:22px;font-size:11px}}
.avance{height:4px;margin-top:12px;border-radius:4px;background:var(--linea);overflow:hidden}
.avance i{display:block;height:100%;border-radius:4px;background:var(--amanecer);transition:width .3s ease}
.flujo-meta{display:flex;justify-content:space-between;gap:12px;margin-top:20px;font:500 14px var(--f-texto);color:var(--suave)}
.pregunta-d h1{margin:18px 0 10px;font:800 clamp(30px,5.4vw,44px)/1.1 var(--f-titulo);letter-spacing:-.025em;overflow-wrap:break-word}
.ayuda-d{margin-bottom:8px;font:400 17px/1.5 var(--f-texto);color:var(--suave)}
.ayuda-sel{margin:4px 0 16px;font:500 15px var(--f-texto);color:var(--suave)}

.opciones-d{display:grid;grid-template-columns:1fr;gap:12px}
.opciones-d.dos{grid-template-columns:1fr 1fr}
@media (max-width:340px){.opciones-d.dos{grid-template-columns:1fr}}
.opcion,.carta-d{width:100%;min-height:64px;border:1.5px solid var(--borde);border-radius:12px;background:var(--papel);color:var(--tinta);text-align:left;cursor:pointer}
.opcion{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font:500 16px/1.3 var(--f-texto)}
.opcion:hover,.carta-d:hover{border-color:var(--tinta)}
.opcion[aria-checked="true"],.carta-d[aria-checked="true"]{border:2px solid var(--amanecer);font-weight:700}
.opcion[aria-checked="true"]{padding:13.5px 15.5px}
.marca{position:relative;flex:none;width:20px;height:20px;border:1.5px solid var(--borde);border-radius:50%;background:var(--papel)}
.marca.cuadro{border-radius:6px}
[aria-checked="true"]>.marca{border-color:var(--amanecer);background:var(--amanecer)}
.marca.cuadro::after{content:"";position:absolute;left:5.5px;top:1.5px;width:5px;height:10px;border:solid var(--tinta);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);opacity:0}
[aria-checked="true"]>.marca.cuadro::after{opacity:1}
.marca:not(.cuadro)::after{content:"";position:absolute;inset:4.5px;border-radius:50%;background:var(--papel);opacity:0}
[aria-checked="true"]>.marca:not(.cuadro)::after{opacity:1}
.cartas-d{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.carta-d{display:grid;grid-template-columns:44px 1fr 20px;gap:14px;align-items:center;padding:14px 16px}
.carta-d[aria-checked="true"]{padding:13.5px 15.5px}
.carta-d b{display:block;font:700 16px/1.25 var(--f-texto)}
.carta-d small{display:block;margin-top:2px;font:400 14px/1.4 var(--f-texto);color:var(--suave)}
@media (max-width:600px){.cartas-d{grid-template-columns:1fr}}

.campos-d .campo-d:first-child,.form-contacto .campo-d:first-child{margin-top:8px}
.campo-d{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.campo-d label{font:800 15px var(--f-titulo)}
.campo-d input{min-height:56px;padding:12px 16px;border:1.5px solid var(--borde);border-radius:12px;background:var(--papel);font:500 17px var(--f-texto);color:var(--tinta)}
.campo-d input:focus-visible{border-color:var(--tinta);outline:3px solid var(--amanecer);outline-offset:1px}
.campo-d input[aria-invalid="true"]{border:2px solid var(--error)}
.err-d{font:600 14px var(--f-texto);color:var(--error)}
.ayuda-campo-d{font:400 14px/1.45 var(--f-texto);color:var(--suave)}
.form-contacto>.err-d{display:block;margin-top:8px}
.check-d{display:flex;align-items:flex-start;gap:12px;margin-top:28px;font:400 15px/1.45 var(--f-texto);color:var(--tinta-2);cursor:pointer}
.check-d input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--amanecer)}
.form-contacto #p-priv{margin-top:12px}

.acciones-d{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:36px}
.acciones-d.centro{justify-content:center;flex-wrap:wrap}
.acciones-d .btn-primario{min-width:220px;min-height:56px;justify-content:space-between;padding:12px 20px;margin-left:auto}
.btn-atras{min-height:44px;padding:8px 4px;border:0;background:none;font:500 16px var(--f-texto);color:var(--tinta);cursor:pointer}
.estado-envio{min-height:1.5em;margin-top:12px;text-align:right;font:400 13px/1.5 var(--f-texto);color:var(--suave)}
.estado-envio .btn-texto-d{min-height:32px;padding:0 0 0 6px;font-size:13px}
@media (max-width:420px){.acciones-d .btn-primario{min-width:0;flex:1 1 auto}}

.ficha-d{margin-top:40px;border-top:1.5px solid var(--linea)}
.ficha-d summary{display:flex;align-items:center;gap:16px;min-height:72px;padding:14px 0;cursor:pointer;list-style:none}
.ficha-d summary::-webkit-details-marker{display:none}
.ficha-d.fija{display:flex;align-items:center;gap:16px;padding:14px 0}
.ficha-komu{flex:none;width:60px}
.ficha-t{flex:1;font:800 17px var(--f-titulo)}
.ficha-ver{display:inline-flex;align-items:center;gap:6px;font:500 14px var(--f-texto);color:var(--suave)}
.ficha-ver i::before{content:"+";font-style:normal}
.ficha-d[open] .ficha-ver i::before{content:"−"}
.ficha-cuerpo{padding-bottom:8px}
.ficha-vacia{padding-bottom:12px;font:400 14px var(--f-texto);color:var(--suave)}
.respuestas>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:12px 0;border-bottom:1px solid var(--linea-2)}
.respuestas dt{font:500 13px/1.4 var(--f-texto);color:var(--suave)}
.respuestas dd{grid-column:1;font:600 15px/1.4 var(--f-texto);overflow-wrap:anywhere}
.respuestas dd.editar{grid-column:2;grid-row:1 / span 2;align-self:center}
.resumen-d{margin-top:20px;border-top:1px solid var(--linea-2)}

.agenda-d{margin-top:20px;display:flex;flex-direction:column;gap:16px}
.agenda-d .dia,.agenda-d .hora{border:1.5px solid var(--borde);border-radius:12px;box-shadow:none}
.agenda-d .dia[aria-pressed="true"]{border-color:var(--tinta);background:var(--tinta);color:var(--papel)}
.agenda-d .hora[aria-pressed="true"]{border:2px solid var(--amanecer);background:var(--papel);font-weight:800}
.agenda-d .aviso{border-width:1.5px}
.agenda-d .aviso .btn{margin-top:12px}
.agenda-d .aviso.error{flex-direction:column}

.confirmacion-d{text-align:center}
.confirmacion-d .ayuda-d{max-width:46ch;margin-left:auto;margin-right:auto}
.komu-ok-d{width:170px;margin:12px auto 0}

@media (prefers-reduced-motion:reduce){.avance i,.komu-rive-canvas{transition:none}}

/* ═════════ Movimiento y riqueza (22-oct, 2.ª pasada: «se ve muy básica»). Todo sale de la ficha que recibe piezas.
   Estados ocultos solo con html.mov (lo pone movimiento.js si no hay movimiento reducido): sin JS todo se ve. ═════════ */
:root{interpolate-size:allow-keywords;--resorte:cubic-bezier(.34,1.56,.64,1);--suave-out:cubic-bezier(.2,.8,.2,1)}
@keyframes entra{from{opacity:0;transform:translateY(18px)}}
@keyframes linea{from{opacity:0;transform:translateY(.45em)}}
@keyframes trazo{from{stroke-dashoffset:1}}
@keyframes avanza{from{width:var(--de)}}
@keyframes pulso{0%{transform:scale(.4)}100%{transform:scale(1)}}
@keyframes entraDer{from{opacity:0;transform:translateX(26px)}}
@keyframes toque{0%{transform:scale(.97)}100%{transform:scale(1)}}

/* Buttons answer the hand */
.btn-primario{transition:transform .16s var(--suave-out),box-shadow .16s var(--suave-out)}
.btn-primario:not([disabled]):hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--tinta)}
.btn-primario:not([disabled]):active{transform:translateY(3px);box-shadow:0 1px 0 var(--tinta)}

/* Hero: design paper (a faint dot grid where the project gets drawn), lines that rise, a hand stroke under the word */
.hero-d{position:relative;isolation:isolate;padding-bottom:24px}
.hero-d::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle,rgba(20,20,18,.13) 1.1px,transparent 1.6px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 34%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 62% 58% at 50% 34%,#000 25%,transparent 78%)}
.hero-d h1 .linea{display:inline-block}
.hero-d h1 em{position:relative}
.trazo{position:absolute;left:-1%;bottom:-.1em;width:102%;height:.24em;overflow:visible;pointer-events:none}
.trazo path{fill:none;stroke:var(--luz);stroke-width:max(3px,.075em);stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.mov .hero-d.entra [data-entra]{animation:entra .75s var(--suave-out) both;animation-delay:calc(var(--i,0) * 90ms)}
.mov .hero-d.entra h1 .linea{animation-name:linea}
.mov .hero-d.entra .trazo path{animation:trazo .7s var(--suave-out) .55s both}

/* ═══ Hero → VSL: the project card opens into the video frame among kumo clouds (vsl.js sets --g, --c, --a, --pie) ═══ */
.vsl-d{position:relative;height:250svh;background:linear-gradient(var(--washi) 0,var(--washi) 78%,var(--papel) 100%);--g:0;--c:1;--a:0;--pie:0}
.vsl-escena{position:sticky;top:0;height:100svh;overflow:hidden}
.vsl-nubes{position:absolute;inset:0;pointer-events:none}
.vsl-nubes.atras{z-index:1}.vsl-nubes.frente{z-index:3}
.kumo{position:absolute;left:var(--x);top:var(--y);width:calc(var(--w) * var(--ancho-k,1vw));height:auto;overflow:visible;
  transform:translate3d(calc(var(--d) * var(--g) * var(--v) * var(--lejos,1vw)),calc(var(--g) * var(--vy) * var(--alto-k,1svh)),0) scale(calc(1 + var(--g) * .05));will-change:transform}
.kumo .sombra{fill:rgba(20,20,18,.07)}
.kumo .relleno{fill:var(--papel);stroke:var(--tinta);stroke-width:2.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.kumo .rulos{fill:none;stroke:var(--tinta);stroke-width:1.8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.vsl-nubes.atras .relleno{fill:#efe9dc;stroke:rgba(20,20,18,.55)}.vsl-nubes.atras .rulos{stroke:rgba(20,20,18,.45)}.vsl-nubes.atras .sombra{display:none}
/* The frame: the same folder as the hero card (ink 3 px, solid shadow, tab), sized by vsl.js from card to 16:9 */
.vsl-marco{position:absolute;z-index:2;left:50%;top:50%;width:360px;height:266px;transform:translate(-50%,-52%);border:3px solid var(--tinta);border-radius:calc(8px + var(--g) * 14px) calc(18px + var(--g) * 6px) calc(18px + var(--g) * 6px) calc(18px + var(--g) * 6px);background:var(--papel);box-shadow:calc(9px - var(--g) * 1px) calc(9px - var(--g) * 1px) 0 var(--tinta)}
.vsl-marco::before{content:"";position:absolute;left:-3px;bottom:100%;width:38%;height:calc((1 - var(--g)) * 26px);margin-bottom:-3px;border:3px solid var(--tinta);border-bottom:0;border-radius:12px 22px 0 0;background:var(--papel);opacity:calc(1 - var(--g) * 1.4)}
.vsl-interior{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.vsl-carpeta{position:absolute;inset:0;padding:8% 7%;opacity:var(--c);transform:translateY(calc((1 - var(--c)) * -14%))}
.vsl-carpeta .barra-gris+.barra-gris{margin-top:4%}
.vsl-carpeta .barra-gris.corta{position:absolute;left:7%;bottom:10%;margin:0}
.vsl-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:7%;margin-top:9%;padding-top:7%;border-top:2px solid var(--linea-2)}
.vsl-tiles span{display:grid;place-items:center;aspect-ratio:1;border:2.5px solid var(--tinta);border-radius:12px;background:var(--washi)}
.vsl-tiles span:last-child{background:var(--amanecer)}
.vsl-tiles img{width:66%;height:auto}
.vsl-contenido{position:absolute;inset:0;opacity:var(--a);transform:translateY(calc((1 - var(--a)) * 10%));background:var(--washi)}
.vsl-marco.sin-video .vsl-contenido{background:var(--washi)}
.vsl-contenido video{position:absolute;inset:0;width:100%;height:100%;background:var(--tinta)}
.vsl-marco .aviso-pausa{display:none}
.vsl-marco.pausado-por-scroll .aviso-pausa{display:block}
.vsl-pie{position:absolute;z-index:4;left:50%;top:calc(50% + var(--alto-marco,30svh) / 2 + 20px);width:min(720px,88vw);transform:translate(-50%,calc((1 - var(--pie)) * 10px));opacity:var(--pie);text-align:center;font:500 15px var(--f-texto);color:var(--tinta-2)}
/* Phone: the frame takes the width, so the banks are bigger, travel further and open up and down (clear of the caption) */
@media (max-width:699px){.vsl-d{height:210svh}.kumo{--ancho-k:2vw;--lejos:1.2vw;--alto-k:2.6svh}.vsl-nubes.frente .kumo{top:calc(var(--y) + 4%)}.vsl-pie{font-size:13px}}
@media (prefers-reduced-motion:reduce){.vsl-d{height:auto}.vsl-escena{position:relative}.kumo{will-change:auto}}
body.rm .vsl-d{height:auto} body.rm .vsl-escena{position:relative}
.poster-vsl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2.5%;padding:0 6% 9%}
.poster-vsl img{flex:none;height:auto}
.pieza-vsl{width:15%;transition:transform .1s linear}
.komu-vsl{width:22%;transform:scale(calc(.86 + var(--a) * .14));transform-origin:50% 100%}
.pieza-vsl.pz0{transform:translateX(calc((1 - var(--a)) * 120%)) rotate(calc((1 - var(--a)) * 10deg))}
.pieza-vsl.pz1{transform:translateX(calc((1 - var(--a)) * 60%))}
.pieza-vsl.pz2{transform:translateX(calc((1 - var(--a)) * -60%))}
.pieza-vsl.pz3{transform:translateX(calc((1 - var(--a)) * -120%)) rotate(calc((1 - var(--a)) * -10deg))}
.vsl-pronto{position:absolute;left:0;right:0;bottom:7%;text-align:center;font:600 clamp(13px,1.6vw,17px) var(--f-texto);color:var(--tinta-2)}

/* Sections appear once, as you reach them */
/* An animation, not a transition, so hovers keep their own timing afterwards */
.mov [data-revela]:not(.visto){opacity:0}
.mov [data-revela].visto{animation:entra .7s var(--suave-out) both;animation-delay:calc(var(--i,0) * 80ms)}

/* Problems: each one with a short ink mark that draws in */
.dolores li{position:relative;padding-left:22px}
.dolores li::before{content:"";position:absolute;left:0;top:27px;width:10px;height:2.5px;border-radius:2px;background:var(--amanecer);transform-origin:0 50%;transition:transform .5s var(--suave-out) .25s}
.mov .dolores li:not(.visto)::before{transform:scaleX(0)}

/* Improvements: a pinned project card fills with each piece as you scroll past it (the hero idea, told by the page) */
.piezas-escena{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;margin-top:40px;align-items:start}
.ficha-pegada{position:sticky;top:96px;padding:22px 0 0 118px}
.carpeta{position:relative;padding:26px 24px 24px;border:3px solid var(--tinta);border-radius:6px 18px 18px 18px;background:var(--papel);box-shadow:9px 9px 0 var(--tinta)}
.carpeta::before{content:"";position:absolute;left:-3px;top:-24px;width:40%;height:27px;border:3px solid var(--tinta);border-bottom:0;border-radius:12px 22px 0 0;background:var(--papel)}
.barra-gris{display:block;width:58%;height:11px;border-radius:6px;background:var(--linea)}
.barra-gris+.barra-gris{width:34%;height:6px;margin-top:10px}
.barra-gris.corta{width:42%;height:6px;margin-top:0}
.ranuras{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0 20px;padding-top:20px;border-top:2px solid var(--linea-2)}
.ranuras li{display:grid;place-items:center;aspect-ratio:1;border:2px dashed var(--linea);border-radius:12px;transition:background .3s,border-color .3s,transform .45s var(--resorte)}
.ranuras img{width:64%;height:auto;opacity:0;transform:scale(.3) rotate(-14deg);transition:opacity .25s,transform .5s var(--resorte)}
.ranuras li.llena{border:2.5px solid var(--tinta);background:var(--washi)}
.ranuras li.llena img{opacity:1;transform:none}
.ranuras li.ultima{background:var(--luz);transform:translateY(-3px)}
.komu-pegado{position:absolute;left:0;bottom:-6px;width:124px;height:auto}
.piezas-escena .habilidades{display:block;margin-top:0;list-style:none}
.piezas-escena .habilidad{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;align-items:start;padding:22px 0;border-bottom:1.5px solid var(--linea-2)}
.piezas-escena .habilidad:first-child{padding-top:4px}
.piezas-escena .habilidad h3{margin:6px 0 6px}
.pieza-tile{display:grid;place-items:center;width:64px;height:64px;border:2px solid var(--linea);border-radius:14px;background:var(--papel);transition:border-color .3s,box-shadow .35s var(--resorte),transform .35s var(--resorte)}
.pieza-tile img{width:44px;height:44px}
.habilidad.activa .pieza-tile{border-color:var(--tinta);box-shadow:4px 4px 0 var(--tinta);transform:rotate(-3deg)}
@media (max-width:899px){
  .piezas-escena{display:block;margin-top:24px}
  /* pinned strip: an opaque paper band (fading at its foot) so the list passes under it cleanly */
  .ficha-pegada{top:0;z-index:3;margin:0 calc(var(--gutter) * -1) 4px;padding:26px var(--gutter) 18px calc(var(--gutter) + 58px);background:linear-gradient(var(--papel) 82%,rgba(251,249,243,0))}
  .ficha-pegada .komu-pegado{left:var(--gutter);bottom:14px}
  .carpeta{padding:12px;border-width:2.5px;border-radius:6px 14px 14px 14px;box-shadow:5px 5px 0 var(--tinta)}
  .carpeta::before{top:-15px;height:17px;border-width:2.5px;width:34%}
  .carpeta .barra-gris{display:none}
  .ranuras{grid-template-columns:repeat(8,1fr);gap:5px;margin:0;padding:0;border:0}
  .ranuras li{border-radius:8px;border-width:1.5px}
  .ranuras li.llena{border-width:2px}
  .komu-pegado{width:54px;bottom:-4px}
  .piezas-escena .habilidad{grid-template-columns:52px minmax(0,1fr);gap:16px}
  .pieza-tile{width:52px;height:52px;border-radius:12px}.pieza-tile img{width:36px;height:36px}
}

/* Services: back to ink cards with a solid shadow; each object sits on its own tint and settles in */
.servicios-d{gap:20px}
.servicio-d{padding:20px 20px 22px;border:2px solid var(--tinta);border-radius:18px;background:var(--papel);box-shadow:5px 5px 0 var(--tinta);transition:transform .25s var(--suave-out),box-shadow .25s var(--suave-out),opacity .6s ease}
.servicio-d:hover{transform:translate(-2px,-3px);box-shadow:7px 8px 0 var(--tinta)}
.servicio-img{display:grid;place-items:center;height:132px;margin:-4px -4px 0;border:1.5px solid var(--tinta);border-radius:12px}
.tono-0 .servicio-img{background:var(--cielo,#bfd9f2)}.tono-1 .servicio-img{background:#e9d8be}.tono-2 .servicio-img{background:#cdebdd}.tono-3 .servicio-img{background:#f8d9bd}
.servicio-img img{transition:transform .6s var(--resorte) .15s}
.mov .servicio-d:not(.visto) .servicio-img img{transform:translateY(16px) rotate(-8deg) scale(.85)}
.servicio-d:hover .servicio-img img{transform:rotate(-4deg) scale(1.06)}

/* Process: a path that fills with the scroll and carries Komu from step to step */
.camino{position:relative;margin-top:36px;--p:0}
.pista{position:absolute;left:0;right:0;top:7px;height:3px;border-radius:3px;background:var(--linea)}
.pista-lleno{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p) * 100%);border-radius:3px;background:var(--amanecer)}
.pista-komu{position:absolute;z-index:2;top:-15px;left:calc(var(--p) * 100%);width:40px;height:31px;transform:translateX(-50%)}
.camino .pasos-d{margin-top:0}
.camino .pasos-d li{position:relative;padding-top:40px;border-top:0}
.hito{position:absolute;z-index:1;top:1px;left:0;width:15px;height:15px;border:2.5px solid var(--linea);border-radius:50%;background:var(--papel);transition:background .3s,border-color .3s,transform .4s var(--resorte)}
.paso-on .hito{border-color:var(--tinta);background:var(--amanecer);transform:scale(1.25)}
.camino .pasos-d li h3,.camino .pasos-d li p{transition:opacity .4s ease}
.mov .camino .pasos-d li:not(.paso-on) h3,.mov .camino .pasos-d li:not(.paso-on) p{opacity:.55}
@media (max-width:899px){
  .camino .pasos-d{grid-template-columns:1fr;gap:28px}
  .pista{left:6px;right:auto;top:4px;bottom:0;width:3px;height:auto}
  .pista-lleno{right:0;bottom:auto;width:auto;height:calc(var(--p) * 100%)}
  .pista-komu{top:calc(var(--p) * 100%);left:7px;transform:translate(-50%,-50%)}
  .camino .pasos-d li{padding:0 0 0 40px}
  .hito{top:4px}
}

/* Prices slide in from their column; FAQ opens smoothly; the + turns into × */
.mov .precios-d li[data-revela].visto{animation-name:entraDer}
.faq-d details::details-content{height:0;overflow:clip;transition:height .35s var(--suave-out),content-visibility .35s allow-discrete}
.faq-d details[open]::details-content{height:auto}
.faq-d summary::after{content:"+";transition:transform .3s var(--suave-out)}
.faq-d details[open] summary::after{content:"+";transform:rotate(45deg)}
.faq-r p{max-width:70ch;padding:0 0 18px;font:400 16px/1.55 var(--f-texto);color:var(--tinta-2)}

/* Flow: each new screen comes in; the bar grows from the last step; the picked option pulses once */
.mov .flujo-cuerpo.entra>*{animation:entra .45s var(--suave-out) both;animation-delay:calc(var(--i,0) * 45ms)}
.avance i{transition:none;animation:avanza .7s var(--suave-out) both}
.opcion,.carta-d{transition:border-color .15s,background .15s,transform .15s}
.opcion:active,.carta-d:active{transform:scale(.985)}
.recien{animation:toque .3s var(--suave-out)}
.recien>.marca{animation:pulso .4s var(--resorte)}
.ficha-d summary .ficha-ver i::before{display:inline-block;transition:transform .3s var(--suave-out)}

@media (prefers-reduced-motion:reduce){.avance i{animation:none}.recien,.recien>.marca{animation:none}.pieza-vsl,.komu-vsl{transform:none!important}}
body.rm .avance i,body.rm .recien,body.rm .recien>.marca{animation:none}

/* ═══ Entry animation (intro.js, 4th pass): Komu's sticker on ink → the header's logo ═══ */
.intro{display:none}
html.intro-on{overflow:hidden}
html.intro-on .intro{display:grid}
.intro{position:fixed;inset:0;z-index:100;place-items:center;background:#141412;transition:background-color .45s ease}
.intro-sello{position:relative;display:block;width:132px;height:132px;transform-origin:0 0;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.intro-disco{position:absolute;inset:0;overflow:hidden;border:3px solid #fbf9f3;border-radius:50%;background:#e5562a;animation:i-disco .5s cubic-bezier(.34,1.56,.64,1) both}
.intro-disco img{display:block;width:84%;height:auto;margin:18% auto 0;animation:i-sube .45s cubic-bezier(.2,.8,.2,1) .22s both}
.intro-pulso{position:absolute;inset:-3px;border:3px solid #e5562a;border-radius:50%;opacity:0;animation:i-pulso .55s cubic-bezier(.2,.8,.2,1) .45s both}
.intro.sale,.intro.sale-ya{background-color:rgba(20,20,18,0);pointer-events:none}
.intro.sale .intro-disco{border-color:#fbf9f3;background:#fbf9f3;transition:background .4s}
.intro.sale-ya .intro-sello{opacity:0;transition:opacity .22s ease}
@keyframes i-disco{from{transform:scale(0) rotate(-30deg)}}
@keyframes i-sube{from{transform:translateY(55%);opacity:0}}
@keyframes i-pulso{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}