/* Home y páginas de producto: el color, los botones y el menú vienen de site.css. */
.home{--plata:#A7AAB1;--ease:cubic-bezier(.16,1,.3,1)}
.home h1,.l-h2,.l-say p,.l-area h3,.l-data h3,.l-roster dt,.l-limit-list h3,.l-msg-list h3,.l-cmds h3,.l-cta h2{font-family:var(--serif);font-weight:400}
.home code,.l-cmds dt{font-family:ui-monospace,"SF Mono",Menlo,monospace}
.l-h2{font-size:clamp(32px,4.4vw,60px);line-height:1.12;letter-spacing:-.022em;max-width:17em;text-wrap:balance}
.home section+section{padding-top:clamp(72px,9vw,128px)}

/* ---------- hero ---------- */
.l-hero{padding:88px 0 0}
.l-hero h1{font-size:clamp(42px,6.3vw,88px);line-height:1.04;letter-spacing:-.03em;max-width:13.5em;text-wrap:balance}
.l-lede{font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);max-width:38em;margin-top:28px}
.home .box{margin:40px 0 0;max-width:680px}
.home .box-row small{color:var(--acero)}
.l-prompts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.home .chip{height:36px}
.l-shot{margin-top:80px}
.l-shot figcaption{font-size:13px;color:var(--acero);margin-top:14px}

/* hero del home: texto y video lado a lado, ambos en la primera pantalla */
.l-hero-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:center}
.l-hero-g h1{font-size:clamp(40px,4.6vw,68px)}
.l-hero-g .l-shot{margin-top:0}
.l-hero-n{font-size:14px;color:var(--acero);margin-top:16px}
.l-hero-n a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.p-cta .pill-soft{height:44px;padding:0 22px;font-size:15px}
.l-sub{font-size:18px;color:var(--ink-2);margin:-40px 0 56px;max-width:40em}
.l-sub .l-more{margin:0}
/* bandas: fondo gris a todo el ancho para alternar el ritmo */
.l-band{border-image:conic-gradient(var(--gris) 0 0) fill 0//0 100vmax;padding-top:clamp(64px,8vw,112px)!important;padding-bottom:clamp(64px,8vw,112px);margin-top:clamp(72px,9vw,128px)}
.l-band+section{padding-top:clamp(72px,9vw,128px)}
.l-band .flow li{background:#fff}
.flow li{background:var(--soft)}
.l-msg .flow{margin:40px 0 24px}
.sol-home{max-width:var(--max);margin:0 auto 96px;padding:0 var(--pad)}
.sol-home .l-who{padding-top:0}
.sol-home .tabs{margin-top:0}

/* ---------- medios reales del producto ---------- */
.l-vid,.l-panel img{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 18px 50px -24px rgba(31,32,35,.28)}
.l-vid{position:relative}
.l-vid video,.l-panel img{display:block;width:100%;height:auto;aspect-ratio:16/10}
.l-play{position:absolute;right:16px;bottom:16px;height:32px;padding:0 12px;border-radius:8px;background:rgba(31,32,35,.86);color:#fff;font-size:13px;font-weight:500}
.l-play:hover{background:var(--ink)}

/* ---------- declaración ---------- */
.l-say p{font-size:clamp(30px,4.6vw,64px);line-height:1.16;letter-spacing:-.022em;max-width:20em}

/* ---------- áreas ---------- */
.l-areas>.l-h2{margin-bottom:72px}
.l-panel{background:var(--gris);border-radius:12px;padding:clamp(16px,3vw,40px)}
.l-area h3,.l-data h3{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.018em;line-height:1.2}
.l-area p,.l-data p{font-size:16px;color:var(--ink-2);max-width:32em;margin-top:10px}
.l-area-wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(32px,5vw,72px);align-items:center;margin-bottom:96px}
.l-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);margin-bottom:96px}
.l-pair .l-panel{margin-bottom:24px}
.l-data{background:var(--ink);color:#fff;border-radius:12px;padding:clamp(28px,5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);gap:clamp(32px,5vw,72px);align-items:center}
.l-data p{color:#C9CBD0}
.l-data .l-vid{border-color:#3A3B40}

/* ---------- artefactos ---------- */
.l-art{text-align:center}
.l-art .l-h2{margin:0 auto}
.l-art-lede{font-size:18px;color:var(--ink-2);max-width:36em;margin:20px auto 0}
.l-docs{position:relative;height:clamp(260px,33vw,420px);margin-top:64px}
.doc{--w:clamp(120px,14vw,200px);position:absolute;left:50%;top:0;width:var(--w);margin-left:calc(var(--w)/-2);transform:translateX(calc(var(--i)*var(--w)*1.04)) translateY(calc(var(--i)*var(--i)*7px)) rotate(calc(var(--i)*7deg));transform-origin:50% 120%}
.doc svg{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 22px rgba(31,32,35,.14))}
.doc figcaption{font-size:13px;color:var(--acero);margin-top:14px}
.doc figcaption b{display:block;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px;font-weight:500;color:var(--ink)}
.sh{fill:#fff;stroke:#D9DBE0}
.fo{fill:var(--gris);stroke:#D9DBE0}
.ln{fill:#E6E7EA}.lnd{fill:#C9CBD0}.hd{fill:var(--ink)}.hdi{fill:#fff}.cd{fill:var(--acero)}
.br{fill:var(--ink)}.br:nth-of-type(odd){fill:var(--plata)}
.ax{stroke:#E6E7EA;fill:none}
.hl{fill:var(--ink)}.rw{fill:var(--gris)}
.sl{fill:var(--ink)}.ra{fill:#fff}.rb{fill:var(--plata)}

/* ---------- mensajería ---------- */
.l-msg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:56px}
.l-msg-apps{list-style:none;display:flex;gap:24px}
.l-msg-apps li{display:flex;align-items:center;gap:10px;font-weight:500}
.l-msg-apps img{width:40px;height:40px}
.l-msg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:start}
.l-msg-list>div{padding:22px 0;border-bottom:1px solid var(--line)}
.l-msg-list>div:first-child{padding-top:0}
.l-msg-list h3{font-size:24px;letter-spacing:-.012em;line-height:1.25}
.l-msg-list p{color:var(--ink-2);margin-top:8px}
.l-msg-list code{font-size:14px;background:var(--gris);border-radius:6px;padding:1px 6px}
.l-msg-side{position:sticky;top:96px}
.l-msg-shot img{aspect-ratio:1260/916}
.l-cmds{margin-top:32px}
.l-cmds h3{font-size:22px;margin-bottom:12px}
.l-cmds dl>div{display:grid;grid-template-columns:190px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.l-cmds dt{color:var(--ink);font-size:14px}
.l-cmds dt button{font:inherit;padding:2px 6px;margin-left:-6px;border-radius:6px;transition:background .15s}
.l-cmds dt button:hover{background:var(--gris)}
.l-cmds dt button::after{content:"copiar";margin-left:8px;font-family:Inter,sans-serif;font-size:11px;color:var(--acero)}
.l-cmds dt button[data-copied]::after{content:"copiado ✓";color:var(--ink)}
.l-cmds dd{color:var(--ink-2)}
.l-msg-how{font-size:14px;color:var(--acero);margin-top:20px}

/* ---------- equipo ---------- */
.l-team-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start;margin-top:56px}
.l-roster{border-top:1px solid var(--ink)}
.l-roster>div{padding:18px 0;border-bottom:1px solid var(--line)}
.l-roster dt{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.018em;line-height:1.2}
.l-roster dd{font-size:15px;color:var(--ink-2);margin-top:4px}

/* ---------- conectores ---------- */
.l-conn-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:28px}
.l-conn-head h2{font-size:16px;font-weight:400;color:var(--ink-2)}
.l-conn-head a{font-size:14px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.l-logos{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.l-logos li{display:flex;align-items:center;gap:14px;padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15px}
.l-logos img{width:28px;height:28px;object-fit:contain;flex:none}

/* ---------- ilustración de conectores: entradas → Cloura → salidas ---------- */
.hub{--g:clamp(32px,5vw,72px);display:grid;grid-template-columns:minmax(0,1fr) 200px minmax(0,1fr);gap:var(--g);align-items:center;margin-top:8px}
.hub-t{font-size:13px;color:var(--acero);margin-bottom:12px}
.hub ul{list-style:none;display:grid;gap:12px;position:relative}
.hub li{position:relative;display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.hub li img{width:28px;height:28px;object-fit:contain;flex:none}
.hub li b{display:block;font-weight:500;font-size:15px}
.hub li span{display:block;font-size:13px;color:var(--ink-2)}
/* cada nodo se une con una línea al bus vertical que llega a Cloura */
.hub li::after{content:"";position:absolute;top:50%;width:calc(var(--g)/2);height:1px;background:var(--plata)}
.hub-in li::after{left:100%}
.hub-out li::after{right:100%}
.hub ul::before{content:"";position:absolute;top:calc(28px + 0px);bottom:28px;width:1px;background:var(--plata)}
.hub-in::before{right:calc(var(--g)/-2)}
.hub-out::before{left:calc(var(--g)/-2)}
.hub-core{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;background:var(--ink);color:#fff;border-radius:16px;padding:28px 16px}
.hub-core::before,.hub-core::after{content:"";position:absolute;top:50%;width:calc(var(--g)/2);height:1px;background:var(--plata)}
.hub-core::before{right:100%}.hub-core::after{left:100%}
.hub-core img{width:56px;height:56px;filter:invert(1)}
.hub-core b{font-family:var(--serif);font-weight:400;font-size:26px}
.hub-core span{font-size:13px;color:#C9CBD0}
.l-conn .hub{margin-top:0}
.hub-wrap{margin-bottom:96px}

/* ---------- flujo de mensajería ---------- */
.flow{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:64px;counter-reset:f}
.flow li{position:relative;background:var(--gris);border-radius:12px;padding:28px 22px;display:flex;flex-direction:column;gap:6px}
.flow li+li::before{content:"";position:absolute;right:100%;top:52px;width:24px;height:1px;background:var(--ink)}
.flow-ic{display:flex;gap:8px;align-items:center;height:36px;margin-bottom:10px}
.flow-ic img{height:28px;width:auto}
.flow-pdf{width:36px;justify-content:center;border:1px solid var(--ink);border-radius:6px;font-size:11px;font-weight:600}
.flow b{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-.01em}
.flow span{color:var(--ink-2);font-size:15px}
.flow code{font-size:15px;width:fit-content;background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 8px}

/* ---------- para quién: pestañas ---------- */
.tabs{position:relative;display:inline-flex;gap:4px;background:var(--gris);border-radius:10px;padding:4px;margin:40px 0 32px}
.tabs button{position:relative;z-index:1;height:40px;padding:0 18px;border-radius:8px;font-size:15px;color:var(--ink-2);transition:color .2s}
.tabs button[aria-selected=true]{color:var(--ink);font-weight:500}
.tabs-ind{position:absolute;left:0;top:4px;height:40px;background:#fff;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.08);transition:transform .35s var(--ease),width .35s var(--ease)}
.l-who-p>p{font-size:clamp(20px,2vw,26px);font-family:var(--serif);line-height:1.35;max-width:30em}
.l-who-p ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.l-who-p li{border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:14px;color:var(--ink-2)}

/* ---------- números ---------- */
.l-nums dl{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.l-nums dl>div{padding:24px 24px 0 0}
.l-nums dt{font-size:14px;color:var(--ink-2);order:2}
.l-nums dl>div{display:flex;flex-direction:column}
.l-nums dd{font-family:var(--serif);font-size:clamp(56px,7vw,104px);line-height:1;letter-spacing:-.03em;order:1;margin-bottom:12px;font-variant-numeric:tabular-nums}
.dig{display:inline-block;height:1em;overflow:hidden;vertical-align:top;line-height:1}
.dig>span{display:block;transform:translateY(calc(var(--d)*-1em));animation:l-rueda 1.1s var(--ease) both}
@keyframes l-rueda{from{transform:translateY(0)}}

/* ---------- comparativa ---------- */
.l-vs-wrap{overflow-x:auto;margin-top:48px}
.l-vs table{width:100%;border-collapse:collapse;min-width:640px}
.l-vs th,.l-vs td{text-align:left;padding:18px 20px 18px 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:15px}
.l-vs thead th{font-size:13px;font-weight:400;color:var(--acero)}
.l-vs tbody th{font-weight:500;width:24%}
.l-vs td{color:var(--ink-2);width:38%}
.l-vs td:last-child{color:var(--ink);background:var(--gris);padding-left:20px}
.l-vs thead th:last-child{background:var(--gris);padding-left:20px;color:var(--ink);font-weight:500;border-radius:8px 8px 0 0}

/* ---------- producto: migas, aprobación, vecinos ---------- */
.p-crumbs{display:flex;gap:8px;font-size:14px;color:var(--acero);margin-bottom:20px}
.p-crumbs a{text-decoration:underline;text-underline-offset:3px}
.p-apr .flow{margin-top:48px}
.p-next{max-width:var(--max);margin-top:clamp(96px,12vw,160px)!important;margin-bottom:24px}
.p-next .next b{font-family:var(--serif);font-weight:400;font-size:22px}
.p-next .next:last-child{text-align:right}

/* ---------- artefactos animados: se dibujan una vez al entrar en vista (.in lo pone site.js) ---------- */
.arts{display:grid;gap:24px;margin-top:48px}
.arts-2{grid-template-columns:1fr 1fr}.arts-3{grid-template-columns:repeat(3,1fr)}.arts-4{grid-template-columns:repeat(4,1fr)}
.art svg{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 18px 40px -28px rgba(31,32,35,.35)}
.art figcaption{font-size:15px;color:var(--ink-2);margin-top:14px}
.art *{transform-box:fill-box}
.a-hoja{fill:#fff;stroke:var(--line)}
.a-tit{font:500 13px Inter,sans-serif;fill:var(--ink)}
.a-col{font:12px Inter,sans-serif;fill:var(--acero)}
.a-ln{fill:#E6E7EA}.a-ln2{fill:var(--ink)}.a-reg{stroke:var(--line)}
.a-ok circle{fill:var(--ink)}
.a-chk{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20}
.a-txt{font:500 13px Inter,sans-serif;fill:var(--ink)}
.a-bar{fill:var(--ink);transform-origin:bottom}.a-bar:nth-of-type(2n){fill:var(--plata)}
.a-escribe{transform-origin:left}
.a-celda{fill:var(--gris)}.a-cab{fill:var(--ink)}
.a-tag{font:12px ui-monospace,Menlo,monospace;fill:var(--acero)}
.a-dia{fill:#C9CBD0}.a-17{fill:var(--ink)}
.a-anillo{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:95}
.a-nota rect{fill:var(--ink)}.a-nota text{font:500 12px Inter,sans-serif;fill:#fff}
.a-msj rect{fill:var(--gris)}.a-yo rect{fill:var(--ink)}.a-yo text{font:13px ui-monospace,Menlo,monospace;fill:#fff}
.a-pdf{fill:#fff;stroke:var(--ink)}.a-pdft{font:600 10px Inter,sans-serif;fill:var(--ink)}
.art.in .a-fila{animation:a-entra .5s var(--ease) calc(.25s + var(--i)*.18s) both}
.art.in .a-ok,.art.in .a-oktxt{animation:a-aparece .4s var(--ease) .9s both}
.art.in .a-chk{animation:a-traza .45s ease-out 1.1s both}
.art.in .a-bar{animation:a-crece .7s var(--ease) calc(.35s + var(--i)*.1s) both}
.art.in .a-escribe{animation:a-escribe .6s var(--ease) calc(.15s + var(--i)*.14s) both}
.art.in .a-celda{animation:a-funde .35s ease calc(.15s + var(--i)*.07s) both}
.art.in .a-dia{animation:a-funde .4s ease .1s both}
.art.in .a-anillo{animation:a-anillo .7s var(--ease) .7s both}
.art.in .a-nota{animation:a-entra .5s var(--ease) 1.2s both}
.art.in .a-yo{animation:a-sube .5s var(--ease) .2s both}
.art.in .a-cl{animation:a-sube .5s var(--ease) 1s both}
@keyframes a-entra{from{opacity:0;transform:translateX(-12px)}}
@keyframes a-aparece{from{opacity:0;transform:scale(.6)}}
@keyframes a-traza{from{stroke-dashoffset:20}}
@keyframes a-crece{from{transform:scaleY(0)}}
@keyframes a-escribe{from{transform:scaleX(0)}}
@keyframes a-funde{from{opacity:0}}
@keyframes a-anillo{from{stroke-dashoffset:95}}
@keyframes a-sube{from{opacity:0;transform:translateY(10px)}}

/* ---------- límites ---------- */
.l-limits{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(32px,6vw,96px);align-items:start;padding-bottom:clamp(96px,12vw,180px)}
.l-limits .l-h2{position:sticky;top:96px}
.l-limit-list>div{padding:24px 0;border-bottom:1px solid var(--line)}
.l-limit-list>div:first-child{padding-top:0}
.l-limit-list h3{font-size:24px;letter-spacing:-.012em;line-height:1.25}
.l-limit-list p{color:var(--ink-2);margin-top:8px;max-width:36em}

/* ---------- páginas de producto con el ritmo de claude.com ---------- */
.p-hero{text-align:center;padding-top:72px}
.p-hero h1{margin:0 auto}
.p-hero .l-lede{margin-left:auto;margin-right:auto}
.p-hero .p-cta{justify-content:center}
.p-hero .l-shot,.p-hero .flow{background:var(--panel,var(--salvia));border-radius:24px;padding:clamp(20px,5vw,72px);margin-top:56px}
.p-hero .flow{grid-template-columns:repeat(4,minmax(0,1fr))}
.p-hero .flow li{background:#fff;text-align:left}
.p-tri{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);padding-top:72px}
.p-tri>div{border-top:1px solid var(--ink);padding-top:20px}
.p-tri h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:8px 0 8px}
.p-tri p{font-size:15px;color:var(--ink-2)}
.p-steps>.l-h2,.l-arts>.l-h2,.p-caps>.l-h2,.p-faq>.l-h2,.p-apr>.l-h2{text-align:center;margin-left:auto;margin-right:auto}
.p-steps>.l-h2::before,.l-arts>.l-h2::before,.p-caps>.l-h2::before,.p-faq>.l-h2::before,.p-apr>.l-h2::before,.l-areas>.l-h2::before,.l-msg-head .l-h2::before,.l-limits .l-h2::before,.l-vs>.l-h2::before{content:"";display:block;width:64px;height:64px;margin:0 auto 16px}
.l-areas>.l-h2::before,.l-msg-head .l-h2::before,.l-limits .l-h2::before,.l-vs>.l-h2::before{margin:0 0 16px -6px}
.p-steps>.l-h2::before{background-image:url(/doodles/ruta.svg)}
.l-arts>.l-h2::before{background-image:url(/doodles/documentos.svg)}
.p-caps>.l-h2::before{background-image:url(/doodles/caja.svg)}
.p-faq>.l-h2::before{background-image:url(/doodles/pregunta.svg)}
.p-apr>.l-h2::before{background-image:url(/doodles/firma.svg)}
.l-areas>.l-h2::before{background-image:url(/doodles/carpeta.svg)}
.l-msg-head .l-h2::before{background-image:url(/doodles/telefono.svg)}
.l-limits .l-h2::before{background-image:url(/doodles/escudo.svg)}
.l-vs>.l-h2::before{background-image:url(/doodles/calculadora.svg)}
.p-funciona-t::before{content:"";display:block;width:48px;height:48px;margin:0 auto 8px;background:url(/doodles/enchufe.svg) center/contain no-repeat}
#contabilidad .l-panel{background:var(--salvia)}#impuestos .l-panel{background:var(--arena)}#finanzas .l-panel{background:var(--lavanda)}
.p-caps .l-roster{display:block;max-width:960px;margin:48px auto 0;border-top:1px solid var(--line)}
.p-caps .l-roster>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.p-caps .l-roster dt{font-size:clamp(20px,2vw,26px)}
.p-faq .faq{margin-left:auto;margin-right:auto}
.p-funciona{text-align:center}
.p-funciona-t{font-size:14px;font-weight:400;color:var(--acero)}
.p-logos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 36px;margin-top:24px}
.p-logos li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-2)}
.p-logos img{width:24px;height:24px;object-fit:contain;filter:grayscale(1)}

/* ---------- páginas de producto ---------- */
.l-more{display:inline-block;margin-top:16px;font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.l-more::after{content:" →"}
.l-data .l-more{color:#fff}
.l-msg-teaser{font-size:18px;color:var(--ink-2);max-width:36em}
.p-hero h1{max-width:none}
.p-hero h1 span{display:block;color:var(--acero)}
.p-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:32px}
.p-cta .pill{height:44px;padding:0 22px;font-size:15px}
.p-ask{font-size:15px;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.p-ask:hover{color:var(--ink)}
.p-steps ol{list-style:none;display:grid;gap:40px;margin-top:56px}
.p-steps li{position:sticky;top:calc(96px + var(--n)*20px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(24px,4vw,56px);align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:clamp(20px,3vw,40px);box-shadow:0 -12px 40px -28px rgba(31,32,35,.35)}
.p-steps li img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:8px}
.p-n{font-size:14px;color:var(--acero)}
.p-steps h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.018em;line-height:1.2;margin:6px 0 10px}
.p-steps p{color:var(--ink-2);max-width:30em}
.p-caps .l-roster{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));column-gap:48px}
.p-faq .faq{margin-top:40px;max-width:820px;border-top:1px solid var(--line)}
.p-faq+section{padding-top:clamp(96px,12vw,180px)}

/* ---------- cta ---------- */
.home section.wrap:last-child{padding-top:0}
.l-cta{position:relative;overflow:hidden;background:var(--ink);color:#fff;border-radius:12px;padding:clamp(72px,10vw,144px) clamp(28px,6vw,88px)}
.l-cta img{position:absolute;right:-90px;top:50%;margin-top:-260px;width:520px;height:520px;filter:invert(1);opacity:.16}
.l-cta h2{position:relative;font-size:clamp(38px,5.6vw,80px);letter-spacing:-.028em;line-height:1.06;max-width:11em}
.l-cta p{position:relative;color:#C9CBD0;font-size:18px;max-width:30em;margin:20px 0 32px}
.l-cta .pill{position:relative;height:44px;padding:0 22px;font-size:15px;background:#fff;color:var(--ink)}
.l-cta .pill:hover{background:#E6E7EA}

/* ---------- movimiento ligado al scroll: mejora progresiva, sin él todo se ve completo ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .l-shot .l-vid{animation:l-open linear both;animation-timeline:view();animation-range:entry 5% cover 38%}
    @keyframes l-open{from{transform:scale(.94);opacity:.72}}
    .l-say span{display:inline-block;animation:l-ink linear both;animation-timeline:view();animation-range:cover 20% cover 46%}
    @keyframes l-ink{from{color:var(--plata)}to{color:var(--ink)}}
    .l-docs{view-timeline:--docs}
    .doc{animation:l-fan linear both;animation-timeline:--docs;animation-range:entry 30% cover 55%}
    @keyframes l-fan{from{transform:translateY(40px) rotate(calc(var(--i)*1deg))}}
    .l-panel img{animation:l-lift linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    @keyframes l-lift{from{transform:translateY(28px)}}
    .l-cta .pill{background:linear-gradient(110deg,#fff 40%,#E6E7EA 50%,#fff 60%) 0 0/260% 100%;animation:l-brillo linear both;animation-timeline:view();animation-range:entry 60% cover 55%}
    @keyframes l-brillo{from{background-position:100% 0}to{background-position:0 0}}
    .l-cta img{animation:l-turn linear both;animation-timeline:view();animation-range:entry 0% exit 40%}
    @keyframes l-turn{from{transform:rotate(-40deg) scale(.9)}to{transform:rotate(12deg) scale(1)}}
  }
}

@media (max-width:959px){
  .p-tri{grid-template-columns:1fr}
  .p-caps .l-roster>div{grid-template-columns:1fr;gap:4px}
  .p-hero .flow{grid-template-columns:1fr 1fr}
  .arts-3,.arts-4{grid-template-columns:1fr 1fr}
  .l-hero-g{grid-template-columns:1fr}
  .l-area-wide,.l-pair,.l-data,.l-limits,.l-msg-grid,.l-team-grid{grid-template-columns:1fr}
  .l-limits .l-h2,.l-msg-side{position:static}
  .p-steps li{grid-template-columns:1fr}
  .hub{grid-template-columns:1fr;gap:28px}
  .hub li::after,.hub ul::before,.hub-core::before,.hub-core::after{display:none}
  .flow{grid-template-columns:1fr 1fr}
  .flow li:nth-child(3)::before{display:none}
}
@media (max-width:720px){
  .p-hero .flow{grid-template-columns:1fr}
  .arts-2,.arts-3,.arts-4{grid-template-columns:1fr}
  .l-nums dl{grid-template-columns:1fr 1fr}
  .tabs{display:flex;width:100%}
  .tabs button{flex:1;padding:0 8px;font-size:14px}
  .flow{grid-template-columns:1fr}
  .flow li::before{display:none}
  .p-steps li{position:static;grid-template-columns:1fr}
  .l-hero{padding-top:56px}
  .l-shot{margin-top:48px}
  .doc{--w:62px}
  .doc figcaption{font-size:11px}
  .l-docs{height:230px}
  .l-cmds dl>div{grid-template-columns:1fr;gap:2px}
  .l-cta img{right:-200px;opacity:.1}
  .l-conn-head{flex-direction:column;gap:6px}
  .l-logos{grid-template-columns:1fr 1fr}
  .l-logos li{padding:18px 14px;font-size:14px}
}
/* catálogo de calculadoras y precios (páginas internas) */
.calc{padding-bottom:96px}
.calc-g{margin-top:56px}
.calc-g h2{font-size:22px;font-weight:500;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.calc-g h2 span{color:#6B6F78;font-weight:400}
.calc-g ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));column-gap:40px}
.calc-g li{padding:18px 0;border-bottom:1px solid var(--line)}
.calc-g h3{font-size:16px;font-weight:500}
.calc-g p{font-size:14px;color:var(--ink-2);margin-top:4px}
.calc-reg{display:inline-block;margin-top:8px;font-size:12px;color:#6B6F78}
.calc-vacio{margin-top:56px;color:var(--ink-2)}
.planes{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px}
.plan{border:1px solid var(--line);border-radius:12px;padding:40px;display:flex;flex-direction:column;gap:16px}
.plan h2{font-size:28px;font-weight:500;letter-spacing:-.01em}
.plan-p{color:#6B6F78}
.plan ul{list-style:none;flex:1}
.plan li{padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.plan .pill{align-self:flex-start;height:44px;padding:0 22px}
.plan-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.plan-dark .plan-p{color:#C9CBD0}
.plan-dark li{border-color:#3A3B40}
.plan-dark .pill{background:#fff;color:var(--ink)}
.planes-faq{max-width:1000px;margin-top:64px;margin-bottom:96px;border-top:1px solid var(--line)}
@media (max-width:720px){.planes{grid-template-columns:1fr}.plan{padding:28px}}

/* táctil: objetivos de al menos 44 px */
@media (pointer:coarse){.home .chip,.l-play,.l-cmds dt button,.tabs button,.l-more{min-height:44px}.l-more{display:inline-flex;align-items:center}}
.area-doodle{display:block;width:56px;height:56px;margin:0 0 10px -4px}
.l-data .area-doodle{filter:invert(1) hue-rotate(180deg)}
.l-conn-head h2::before{content:"";display:inline-block;vertical-align:middle;width:36px;height:36px;margin-right:8px;background:url(/doodles/enchufe.svg) center/contain no-repeat}
.a-sello circle{fill:var(--ink)}
.art.in .a-sello{animation:a-aparece .5s var(--ease) 1.2s both}
.art.in .a-sello .a-chk{animation:a-traza .45s ease-out 1.5s both}
/* formularios públicos de calculadoras */
.calc-usar{margin-top:12px;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:15px;font-weight:500}
.calc-usar:hover{background:var(--soft)}
.calc-g li.abierta{grid-column:1/-1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;margin:8px 0}
.calc-f{margin-top:20px}
.calc-campos{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px 24px;margin-bottom:20px}
.calc-campo label{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
.calc-campo input:not([type=checkbox]),.calc-campo select,.calc-campo textarea{width:100%;height:44px;border:1px solid #CFCAC0;border-radius:8px;padding:0 12px;font:inherit;background:#fff;color:var(--ink)}
.calc-campo textarea{height:auto;padding:10px 12px;font-family:ui-monospace,Menlo,monospace;font-size:13px}
.calc-campo :focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.calc-campo small{display:block;font-size:12px;color:var(--acero);margin-top:4px;line-height:1.4}
.calc-check{display:flex!important;align-items:center;gap:8px}
.calc-f .pill{height:44px;padding:0 22px}
.calc-f .pill:disabled{opacity:.6}
.calc-res{margin-top:24px;border-top:1px solid var(--line);padding-top:20px}
.calc-res dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));column-gap:32px}
.calc-res dl div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.calc-res dt{color:var(--ink-2)}.calc-res dd{font-weight:600;text-align:right;font-variant-numeric:tabular-nums;word-break:break-word}
.calc-res h4{font-size:15px;margin:20px 0 8px}
.calc-res ol{padding-left:20px;color:var(--ink-2);font-size:14px;display:grid;gap:4px}
.calc-fund,.calc-nota{font-size:13px;color:var(--acero);margin-top:14px}
.calc-nota a{color:var(--ink);text-decoration:underline}
.calc-err{color:#A63A2B;font-size:14px;margin-top:12px}
.l-area-inv{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
#facturacion-home .l-panel{background:var(--arena);display:flex;justify-content:center}
#facturacion-home .art{max-width:440px;width:100%}
@media (max-width:959px){.l-area-inv{grid-template-columns:1fr}}

/* artefactos sobre panel pastel (como los paneles con UI de claude.com) */
.art{--a1:#8FA58B;--a2:#C3A383;background:var(--salvia);border-radius:20px;padding:clamp(20px,3vw,32px) clamp(20px,3vw,32px) 22px}
.arts>.art:nth-child(3n+2){background:var(--arena);--a1:#B8946F;--a2:#8FA58B}
.arts>.art:nth-child(3n){background:var(--lavanda);--a1:#9893B8;--a2:#C3A383}
.art svg{border-radius:14px;box-shadow:0 22px 44px -26px rgba(31,32,35,.45);transform:rotate(-1.2deg)}
.arts>.art:nth-child(2n) svg{transform:rotate(1deg)}
.art figcaption{font-family:var(--serif);font-size:19px;line-height:1.3;color:var(--ink);margin-top:20px}
.a-hoja{fill:#fff;stroke:none}
.a-tit{font:600 14px Inter,sans-serif}
.a-ln{fill:#ECE8E0}
.a-bar{fill:var(--ink)}.a-bar:nth-of-type(2n){fill:var(--a1)}
.a-celda{fill:#F1EEE8}.a-cab{fill:var(--ink)}
.a-celda[style*="--i:2"],.a-celda[style*="--i:5"],.a-celda[style*="--i:7"]{fill:var(--a1)}
.a-dia{fill:#D3CFC6}.a-17{fill:var(--ink)}
.a-msj rect{fill:#F1EEE8}
.a-pdf{fill:var(--a2);stroke:none}.a-pdft{fill:#fff}
.a-ok circle{fill:var(--a1)}
.a-sello circle{fill:var(--ink)}
.a-nota rect{fill:var(--ink)}
.a-ln2{fill:var(--ink)}
.art .a-escribe:nth-child(odd) .a-ln,.art rect.a-escribe:nth-of-type(odd){fill:var(--a1)}
@media (prefers-reduced-motion:reduce){.art svg{transform:none}}

/* conectores: panel pastel, tarjetas sin borde y uniones punteadas */
.hub{background:var(--lavanda);border-radius:24px;padding:clamp(24px,4vw,56px)}
.hub-t{font-family:var(--serif);font-size:20px;color:var(--ink);margin-bottom:16px}
.hub li{border:0;border-radius:14px;padding:14px 18px;box-shadow:0 12px 30px -22px rgba(31,32,35,.5)}
.hub li img{width:44px;height:44px;padding:9px;border-radius:12px;background:var(--bg)}
.hub li b{font-size:16px}
.hub li::after,.hub-core::before,.hub-core::after{height:2px;background:repeating-linear-gradient(90deg,rgba(31,32,35,.35) 0 5px,transparent 5px 10px) 0 0/20px 2px}
.hub ul::before{width:2px;background:repeating-linear-gradient(180deg,rgba(31,32,35,.35) 0 5px,transparent 5px 10px) 0 0/2px 20px}
.hub-core{border-radius:22px;padding:36px 20px;box-shadow:0 24px 50px -26px rgba(31,32,35,.6)}
.hub-core b{font-size:30px}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .hub li::after,.hub-core::before,.hub-core::after{animation:l-hormigas linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes l-hormigas{to{background-position:200px 0}}
}}
.a-yo rect{fill:var(--ink)}

.calc-usar{display:flex;width:fit-content}
.l-nums{margin-bottom:clamp(64px,8vw,120px)}
@media (max-width:959px){.l-area-wide:not(.l-area-inv)>.l-panel{order:-1}}
@media (max-width:720px){
  .l-vs-wrap{overflow:visible}.l-vs table{min-width:0}.l-vs thead{display:none}
  .l-vs tr{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
  .l-vs th,.l-vs td{padding:0!important;border:0!important;width:auto!important;background:none!important}
  .l-vs td:last-child{color:var(--ink);font-weight:500}
  .l-vs td:nth-child(2)::before{content:"A mano: ";color:var(--acero)}
  .l-vs td:last-child::before{content:"Con Cloura: ";color:var(--acero);font-weight:400}
}
/* Conectores: tarjetas por servicio */
.p-hub{margin-top:56px;text-align:left}
.p-cx>.l-h2{text-align:center;margin-left:auto;margin-right:auto}
.p-cx>.l-h2::before{content:"";display:block;width:64px;height:64px;margin:0 auto 16px;background:url(/doodles/pieza.svg) center/contain no-repeat}
.cx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.cx{background:#fff;border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:12px;box-shadow:0 14px 34px -26px rgba(31,32,35,.5)}
.cx-ic{width:56px;height:56px;border-radius:14px;background:var(--bg);display:flex;align-items:center;justify-content:center}
.cx-ic img{width:30px;height:30px;object-fit:contain}
.cx h3{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-.01em;line-height:1.2}
.cx ul{list-style:none;display:grid;gap:8px;flex:1}
.cx li{position:relative;padding-left:20px;font-size:15px;color:var(--ink-2)}
.cx li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--salvia);box-shadow:inset 0 0 0 1px rgba(31,32,35,.25)}
.cx-como{font-size:14px;color:var(--acero);border-top:1px solid var(--line);padding-top:12px}
.cx-como b{color:var(--ink);font-weight:500}
.cx-como a{color:var(--ink);text-decoration:underline}
@media (max-width:959px){.cx-grid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.cx-grid{grid-template-columns:1fr}}
.cx ul{align-content:start}
/* el ancla #detalle va entre secciones: la sección siguiente conserva su aire */
#detalle+section{padding-top:clamp(72px,9vw,128px)}
.calc-sigue{margin-top:16px}.calc-sigue .pill{height:44px;padding:0 20px}
.l-calcs{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--arena);border-radius:20px;padding:clamp(24px,4vw,40px);margin-top:clamp(56px,7vw,96px)}
.l-calcs img{width:64px;height:64px}
.l-calcs div{display:flex;align-items:center;gap:18px}
.l-calcs h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,32px)}
.l-calcs p{color:var(--ink-2);font-size:15px}