/* Lois Margolin, LLC · design system v1 (30/09/2026)
   Romana: Libre Caslon Text. Cifras y precios: Fragment Mono (ningún precio en serifa).
   Cuerpo: Hanken Grotesk (decidido el 30/09/2026). Titulares: Libre Caslon Text. Cifras: Fragment Mono.
   Un solo look deliberado: porcelana con secciones en tinta. Oro del monograma medido: #BEA978. */

@font-face{font-family:"Libre Caslon Text";src:url(fonts/caslon.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url(fonts/caslon-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Fragment Mono";src:url(fonts/fragment-mono.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fragment Mono";src:url(fonts/fragment-mono-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

:root{
  --ink:#121110; --onyx:#1D1B18; --onyx-2:#27241F; --gold:#BEA978; --gold-hi:#E6D7AE; --bronze:#7A6230;
  --porcelain:#F7F4EE; --paper:#FFFFFF; --linen:#ECE5D8; --sand:#DDD4C3; --stone:#6F685D; --stone-2:#8E877B;
  --ok:#2F5B38; --ok-bg:#E3EEE2; --warn:#7A4A12; --warn-bg:#F6E4C9; --info:#4E3D5C; --info-bg:#ECE4F0;
  --serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --num:"Fragment Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r-s:10px; --r-m:18px; --r-l:28px; --r-xl:40px;
  --pad:clamp(16px,4.5vw,56px); --max:1240px;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --shadow:0 1px 0 rgba(18,17,16,.04),0 18px 40px -24px rgba(18,17,16,.28);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--porcelain);color:var(--ink);font:400 17px/1.62 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:6px}
::selection{background:var(--gold-hi);color:var(--ink)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.num{font-family:var(--num);font-variant-numeric:tabular-nums slashed-zero;letter-spacing:-.01em}

/* Tipografía */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;text-wrap:balance;margin:0}
h1{font-size:clamp(40px,7.6vw,92px);line-height:1.02}
h2{font-size:clamp(32px,4.8vw,58px);line-height:1.06}
h3{font-size:clamp(22px,2.4vw,28px);line-height:1.16}
h4{font:600 15px/1.35 var(--sans);letter-spacing:.005em;margin:0}
h1 em,h2 em,h3 em{font-style:italic;color:var(--bronze)}
.dark h1 em,.dark h2 em,.dark h3 em{color:var(--gold-hi)}
p{margin:0;text-wrap:pretty}
.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--stone);max-width:58ch}
.dark .lede{color:#C9C0AF}
.small{font-size:14px;color:var(--stone)}
.dark .small{color:#A89F8E}
.prose{max-width:66ch}
.prose p+p{margin-top:1em}
.prose h2{font-size:clamp(26px,3vw,34px);margin:1.6em 0 .5em}
.prose h3{font-size:22px;margin:1.4em 0 .4em}
.prose ul,.prose ol{padding-left:1.2em;margin:.8em 0;display:grid;gap:.45em}
.prose li::marker{color:var(--bronze)}
.prose blockquote{margin:1.4em 0;padding:18px 22px;background:var(--linen);border-radius:var(--r-m);font:italic 400 20px/1.45 var(--serif)}
.prose strong{font-weight:600}
.mark{background:linear-gradient(transparent 58%,var(--gold-hi) 58%);padding:0 .08em}

/* Palabra dorada con trazo */
.w{position:relative;white-space:nowrap;font-style:italic;color:var(--bronze)}
.dark .w{color:var(--gold-hi)}
.w svg{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.3em;overflow:visible;pointer-events:none}
.w path{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;animation:draw 1.3s .35s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:99px;border:1px solid transparent;font:600 15px/1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .35s var(--ease),background .25s,color .25s,box-shadow .35s var(--ease);white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-ink{background:var(--ink);color:var(--porcelain)}
.btn-ink:hover{box-shadow:0 12px 24px -12px rgba(18,17,16,.5)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-line{background:transparent;border-color:var(--sand);color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.dark .btn-line{border-color:rgba(255,255,255,.25);color:var(--porcelain)}
.btn-glass{background:rgba(255,255,255,.1);color:var(--porcelain);border-color:rgba(255,255,255,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn-sm{min-height:40px;padding:0 16px;font-size:13.5px}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.link{font-weight:600;text-decoration:none;display:inline-flex;gap:8px;align-items:center;border-bottom:1px solid var(--sand);padding-bottom:2px}
.link:hover{border-color:var(--ink)}

/* Monograma */
.lm .gl{fill:var(--lm-l,#BEA978)}
.lm .gm{fill:var(--lm-m,#121110)}

/* Header */
.hdr{position:sticky;top:0;z-index:50;view-transition-name:hdr;background:color-mix(in srgb,var(--porcelain) 82%,transparent);backdrop-filter:saturate(1.2) blur(16px);-webkit-backdrop-filter:saturate(1.2) blur(16px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.hdr.scrolled{border-bottom-color:rgba(18,17,16,.08)}
.hdr .wrap{display:flex;align-items:center;gap:20px;min-height:68px;padding-top:env(safe-area-inset-top,0px)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:0}
.brand svg{width:34px;height:34px;flex:none}
.brand b{display:block;font:400 18px/1.05 var(--serif);white-space:nowrap}
.brand i{display:block;font:italic 400 12.5px/1.2 var(--serif);color:var(--bronze)}
.nav{display:flex;gap:4px;margin-left:auto;list-style:none;padding:0;margin-block:0}
.nav a{display:block;padding:9px 13px;border-radius:99px;font:500 14.5px var(--sans);text-decoration:none;color:#3F3A33}
.nav a:hover,.nav a[aria-current="page"]{background:var(--linen);color:var(--ink)}
.hdr .cta{display:flex;gap:8px;align-items:center}
.menu-btn{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--sand);background:var(--paper);align-items:center;justify-content:center;cursor:pointer}
@media (max-width:980px){.nav,.hdr .cta .btn-line{display:none}.menu-btn{display:inline-flex}.hdr .cta{margin-left:auto}}
@media (max-width:420px){.hdr .cta .btn-ink{display:none}.brand i{display:none}}
.sheet-nav{position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--porcelain);display:grid;grid-template-rows:auto 1fr auto;padding:calc(env(safe-area-inset-top,0px) + 14px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 22px);clip-path:circle(0 at calc(100% - 44px) 34px);transition:clip-path .7s var(--ease);pointer-events:none}
.sheet-nav.open{clip-path:circle(150% at calc(100% - 44px) 34px);pointer-events:auto}
.sheet-nav .top{display:flex;justify-content:space-between;align-items:center}
.sheet-nav nav{display:grid;align-content:center;gap:6px}
.sheet-nav nav a{font:400 clamp(34px,9vw,54px)/1.12 var(--serif);text-decoration:none;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.sheet-nav.open nav a{opacity:1;transform:none}
.sheet-nav.open nav a:nth-child(2){transition-delay:.05s}.sheet-nav.open nav a:nth-child(3){transition-delay:.1s}.sheet-nav.open nav a:nth-child(4){transition-delay:.15s}.sheet-nav.open nav a:nth-child(5){transition-delay:.2s}.sheet-nav.open nav a:nth-child(6){transition-delay:.25s}
.sheet-nav nav a em{color:var(--gold-hi)}
.sheet-nav .foot{display:grid;gap:10px;font-size:14px;color:#B9B0A0}

/* Secciones */
.sec{padding-block:clamp(64px,10vw,128px)}
.sec.tight{padding-block:clamp(44px,6vw,80px)}
.dark{background:var(--ink);color:var(--porcelain)}
.linen{background:var(--linen)}
.head{display:grid;gap:14px;max-width:760px;margin-bottom:clamp(32px,5vw,56px)}
.head.c{margin-inline:auto;text-align:center}.head.c .lede{margin-inline:auto}
.head.r{margin-left:auto;text-align:right}.head.r .lede{margin-left:auto}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:16px}

/* Héroe con película */
.hero-film{position:relative;height:300svh;background:#0d0c0b;color:var(--porcelain)}
.hero-film .stage{position:sticky;top:0;height:100svh;overflow:hidden}
.hero-film .frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:opacity,transform}
.hero-film .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,12,11,.84) 0%,rgba(13,12,11,.5) 30%,rgba(13,12,11,.06) 52%,rgba(13,12,11,.3) 66%,rgba(13,12,11,.92) 92%)}
@media (min-width:900px){.hero-film .shade{background:linear-gradient(90deg,rgba(13,12,11,.9) 0%,rgba(13,12,11,.7) 34%,rgba(13,12,11,.1) 62%),linear-gradient(0deg,rgba(13,12,11,.7),transparent 40%)}}
.hero-film .copy{position:absolute;left:0;right:0;top:calc(84px + 3vh)}
.hero-film h1{max-width:12ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero-film .sub{margin-top:18px;max-width:38ch;font-size:clamp(16px,1.5vw,19px);color:#DDD4C3}
.hero-film .beats{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 116px);height:84px}
.hero-film .w{color:var(--gold-hi)}
@media (max-width:640px){.hero-film .acts .btn-glass{display:none}}
.beat{position:absolute;left:var(--pad);right:var(--pad);font:400 clamp(22px,2.6vw,30px)/1.15 var(--serif);max-width:30ch;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .6s var(--ease);text-shadow:0 1px 18px rgba(0,0,0,.4)}
.beat em{color:var(--gold-hi)}
.beat.on{opacity:1;transform:none}
.hero-film .acts{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 40px);display:flex;gap:10px;flex-wrap:wrap}
.hero-film .ticks{position:absolute;right:max(14px,var(--pad));top:50%;translate:0 -50%;display:grid;gap:7px}
.hero-film .ticks i{width:3px;height:20px;border-radius:3px;background:rgba(255,255,255,.25);transition:background .3s}
.hero-film .ticks i.on{background:var(--gold)}
.scroll-cue{font:500 12px var(--sans);letter-spacing:.06em;color:#B9B0A0;display:flex;align-items:center;gap:8px}

/* Tarjetas de servicio */
.svc{display:grid;gap:14px;padding:14px;border-radius:var(--r-l);background:var(--paper);box-shadow:var(--shadow);text-decoration:none;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.svc:hover{transform:translateY(-4px)}
.svc .ph{border-radius:200px 200px var(--r-m) var(--r-m);overflow:hidden;aspect-ratio:4/3.4}
.svc .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.svc:hover .ph img{transform:scale(1.05)}
.svc .body{padding:4px 8px 8px;display:grid;gap:8px}
.svc h3{font-size:24px}
.svc p{font-size:15px;color:var(--stone)}
.svc .more{font:600 13.5px var(--sans);display:flex;gap:6px;align-items:center;margin-top:4px}
.dark .svc{background:var(--onyx);box-shadow:none}
.dark .svc p{color:#A89F8E}

/* Lista de servicios detallada */
.svc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,5vw,64px);align-items:center;padding-block:clamp(40px,6vw,72px);border-top:1px solid var(--sand)}
.svc-row:nth-child(even) .media{order:2}
@media (max-width:860px){.svc-row{grid-template-columns:1fr}.svc-row:nth-child(even) .media{order:0}}
.svc-row .media{border-radius:var(--r-l);overflow:hidden;aspect-ratio:16/11}
.svc-row .media img{width:100%;height:100%;object-fit:cover}
.svc-row .txt{display:grid;gap:14px}
.checks{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:10px}
.checks li{position:relative;padding-left:30px;font-size:16px;line-height:1.5}
.checks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--linen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.6L13 6.5' fill='none' stroke='%237A6230' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.dark .checks li::before{background-color:var(--onyx-2)}

/* Credenciales, cita, proceso */
.creds{display:flex;flex-wrap:wrap;gap:8px}
.creds span{font:500 13px var(--sans);padding:8px 14px;border-radius:99px;background:var(--linen);color:#3F3A33}
.dark .creds span{background:var(--onyx);color:#DDD4C3}
.quote{display:grid;gap:18px;padding:clamp(24px,4vw,44px);border-radius:var(--r-l);background:var(--onyx);color:var(--porcelain)}
.quote p{font:italic 400 clamp(21px,2.4vw,28px)/1.35 var(--serif)}
.quote small{font:500 13px var(--sans);color:var(--gold)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px;counter-reset:st}
.step{display:grid;gap:10px;padding:22px;border-radius:var(--r-m);background:var(--paper);box-shadow:var(--shadow);align-content:start}
.step::before{counter-increment:st;content:counter(st);font:400 15px var(--num);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--gold)}
.step p{font-size:15px;color:var(--stone)}
.dark .step{background:var(--onyx);box-shadow:none}.dark .step p{color:#A89F8E}
.arch{border-radius:260px 260px var(--r-l) var(--r-l);overflow:hidden}
.arch img{width:100%;height:100%;object-fit:cover}
.portrait-slot{aspect-ratio:4/5;border-radius:260px 260px var(--r-l) var(--r-l);background:repeating-linear-gradient(135deg,var(--linen) 0 12px,#E6DECF 12px 24px);display:grid;place-items:center;text-align:center;padding:24px;color:var(--stone);font-size:14px}
.stat{display:grid;gap:4px}
.stat b{font:400 clamp(34px,4vw,48px)/1 var(--num);letter-spacing:-.03em}
.stat small{font-size:13.5px;color:var(--stone)}
.dark .stat small{color:#A89F8E}

/* Blog */
.post-card{display:grid;gap:14px;text-decoration:none}
.post-card .ph{border-radius:var(--r-l);overflow:hidden;aspect-ratio:16/10}
.post-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.post-card:hover .ph img{transform:scale(1.04)}
.meta{display:flex;gap:10px;flex-wrap:wrap;font:500 13px var(--sans);color:var(--stone)}
.meta .num{font-size:12.5px}
.post-card h3{font-size:clamp(22px,2.2vw,27px)}
.article-hero{position:relative;height:min(62svh,560px);overflow:hidden;background:#0d0c0b}
.article-hero img{width:100%;height:100%;object-fit:cover}
.draft{display:inline-block;font:600 11px var(--sans);letter-spacing:.05em;color:var(--bronze);background:var(--linen);padding:4px 10px;border-radius:99px}

/* Formularios */
.field{display:grid;gap:6px}
.field label{font:600 13px var(--sans);color:#3F3A33}
.field input,.field select,.field textarea{min-height:50px;border-radius:14px;border:1px solid var(--sand);background:var(--paper);padding:12px 14px;font-size:16px;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px rgba(190,169,120,.25)}
.field .hint{font-size:12.5px;color:var(--stone)}
.form{display:grid;gap:14px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.form .row2{grid-template-columns:1fr}}
.card{background:var(--paper);border-radius:var(--r-l);padding:clamp(20px,3vw,32px);box-shadow:var(--shadow)}
.dark .card{background:var(--onyx);box-shadow:none}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px}
.slot{min-height:46px;border-radius:12px;border:1px solid var(--sand);background:var(--paper);cursor:pointer;font:400 14px var(--num)}
.slot[aria-pressed="true"]{background:var(--ink);color:var(--gold);border-color:var(--ink)}
.days{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.day{flex:none;display:grid;gap:2px;justify-items:center;min-width:64px;padding:10px 8px;border-radius:14px;border:1px solid var(--sand);background:var(--paper);cursor:pointer}
.day small{font:500 11.5px var(--sans);color:var(--stone)}
.day b{font:400 20px var(--num)}
.day[aria-pressed="true"]{background:var(--ink);color:var(--porcelain);border-color:var(--ink)}
.day[aria-pressed="true"] small{color:var(--gold)}
.ok-box{display:grid;gap:10px;justify-items:start;padding:20px;border-radius:var(--r-m);background:var(--linen)}

/* FAQ */
.faq{display:grid;gap:10px}
.faq details{background:var(--paper);border-radius:var(--r-m);padding:4px 20px;box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:16px 0;font:400 19px/1.3 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 26px/1 var(--sans);color:var(--bronze);transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;color:var(--stone);max-width:64ch}

/* CTA band y footer */
.cta-band{display:grid;gap:22px;justify-items:start}
.foot{background:var(--ink);color:#B9B0A0;padding-block:64px calc(env(safe-area-inset-bottom,0px) + 100px);font-size:14.5px}
.foot .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
@media (max-width:860px){.foot .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot .cols{grid-template-columns:1fr}}
.foot h4{color:var(--porcelain);margin-bottom:12px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.foot a{text-decoration:none}.foot a:hover{color:var(--porcelain)}
.foot .brand b{color:var(--porcelain)}.foot .brand i{color:var(--gold)}
.foot .legal{margin-top:40px;padding-top:22px;border-top:1px solid #2E2A25;display:flex;flex-wrap:wrap;gap:12px 24px;font-size:13px}

/* Agente: dock + panel */
.dock{position:fixed;left:50%;translate:-50% 0;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);z-index:60;display:flex;gap:8px;align-items:center;padding:6px;border-radius:99px;background:rgba(22,20,18,.8);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 40px -16px rgba(0,0,0,.45);width:min(560px,calc(100vw - 24px));transition:transform .5s var(--ease),opacity .4s;view-transition-name:dock}
.dock.hide,.dock.away{transform:translateY(120%);opacity:0}
.dock .ask{flex:1;display:flex;align-items:center;gap:10px;background:none;border:0;color:#E9E1D0;font:500 14.5px var(--sans);cursor:pointer;padding:4px 10px;text-align:left;min-width:0}
.dock .ask span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orb{width:32px;height:32px;border-radius:50%;flex:none;background:conic-gradient(from 200deg,#8C7442,#E6D7AE,#BEA978,#5B4A2A,#8C7442);animation:spin 6s linear infinite;box-shadow:0 0 0 3px rgba(190,169,120,.2)}
.orb.think{animation-duration:1.2s}
@keyframes spin{to{rotate:360deg}}
.agent{visibility:hidden;transition:transform .6s var(--ease),visibility 0s .6s;position:fixed;z-index:90;right:0;bottom:0;top:0;width:min(440px,100vw);background:var(--porcelain);box-shadow:-30px 0 60px -30px rgba(0,0,0,.35);display:flex;flex-direction:column;transform:translateX(105%)}
.agent.open{transform:none;visibility:visible;transition:transform .6s var(--ease),visibility 0s}
@media (max-width:640px){.agent{top:auto;height:min(88svh,760px);width:100vw;border-radius:28px 28px 0 0;transform:translateY(105%)}.agent.open{transform:none}}
.agent-top{display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px 14px;border-bottom:1px solid var(--sand)}
@media (max-width:640px){.agent-top{padding-top:16px}}
.agent-top b{display:block;font:600 14.5px var(--sans)}
.agent-top small{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--stone)}
.agent-top small i{width:7px;height:7px;border-radius:50%;background:#4E8A5B}
.agent-top .x{margin-left:auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--sand);background:var(--paper);cursor:pointer;display:grid;place-items:center}
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.msg{max-width:86%;padding:12px 15px;border-radius:20px;font-size:15px;line-height:1.5;animation:pop .45s var(--ease);white-space:pre-wrap}
.msg.bot{background:var(--paper);border-bottom-left-radius:6px;box-shadow:0 1px 0 #E7E0D2}
.msg.me{background:var(--ink);color:var(--porcelain);margin-left:auto;border-bottom-right-radius:6px}
.msg.sys{max-width:100%;background:none;color:var(--stone);font-size:12px;text-align:center;padding:2px 8px}
.msg .act{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;white-space:normal}
.msg .act button,.msg .act a{font:600 13px var(--sans);padding:8px 12px;border-radius:99px;border:1px solid var(--sand);background:var(--porcelain);cursor:pointer;text-decoration:none}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 10px}
.chips button{font:500 13px var(--sans);padding:9px 13px;border-radius:99px;border:1px solid var(--sand);background:var(--paper);cursor:pointer}
.chips button:hover{border-color:var(--bronze)}
.composer{margin:0 12px calc(env(safe-area-inset-bottom,0px) + 14px);display:flex;gap:8px;align-items:center;background:var(--paper);border-radius:99px;padding:6px 6px 6px 18px;box-shadow:0 1px 0 #E0D8C8,0 10px 26px -14px rgba(0,0,0,.2)}
.composer input{flex:1;border:0;outline:0;background:none;font-size:16px;min-width:0}
.composer button{width:42px;height:42px;border-radius:50%;border:0;background:var(--ink);color:var(--porcelain);display:grid;place-items:center;cursor:pointer}
.typing{display:inline-flex;gap:4px}.typing i{width:6px;height:6px;border-radius:50%;background:#B4AB9B;animation:blink 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25}}
.scrim{position:fixed;inset:0;z-index:85;background:rgba(18,17,16,.36);opacity:0;pointer-events:none;transition:opacity .4s}
.scrim.on{opacity:1;pointer-events:auto}

/* Reveal: visible en reposo, solo suaviza la entrada */
.rv{transition:opacity .9s var(--ease),transform 1s var(--ease)}
.rv.pre{opacity:.001;transform:translateY(24px)}

/* View transitions entre documentos */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.35s var(--ease) both vt-out}
::view-transition-new(root){animation:.55s var(--ease) both vt-in}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(16px)}}
::view-transition-group(hdr),::view-transition-group(dock){animation-duration:0s}

/* Portal */
.p-shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100svh;background:#F2EEE7}
@media (max-width:900px){.p-shell{grid-template-columns:1fr}}
.p-side{position:sticky;top:0;height:100svh;background:var(--ink);color:#C9C0AF;padding:22px 16px;display:flex;flex-direction:column;gap:22px}
@media (max-width:900px){.p-side{display:none}}
.p-side .brand b{color:var(--porcelain)}.p-side .brand i{color:var(--gold)}
.p-side nav{display:grid;gap:4px}
.p-side nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;text-decoration:none;font:500 14.5px var(--sans)}
.p-side nav a:hover{background:var(--onyx)}
.p-side nav a[aria-current="page"]{background:var(--onyx-2);color:var(--porcelain)}
.p-side nav a svg{width:18px;height:18px}
.p-side .who{margin-top:auto;display:flex;gap:10px;align-items:center;font-size:13px}
.p-main{padding:clamp(18px,3vw,36px) var(--pad) 120px;display:grid;gap:18px;align-content:start;min-width:0}
.p-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.p-top h1{font-size:clamp(28px,3.6vw,40px)}
.p-top small{display:block;font:500 13px var(--sans);color:var(--stone)}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--gold);display:grid;place-items:center;font:600 14px var(--sans);flex:none}
.ex{font:600 10.5px var(--sans);letter-spacing:.06em;color:var(--warn);background:var(--warn-bg);padding:3px 8px;border-radius:99px;vertical-align:middle}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:var(--paper);border-radius:var(--r-m);padding:18px;display:grid;gap:6px;align-content:start;min-width:0}
.kpi small{font:500 12.5px var(--sans);color:var(--stone)}
.kpi b{font:400 clamp(22px,2.4vw,30px)/1.1 var(--num);letter-spacing:-.03em}
.kpi b.w{font-family:var(--serif);letter-spacing:0;white-space:normal;color:inherit;font-style:normal}
.kpi.dk{background:var(--ink);color:var(--porcelain)}.kpi.dk small{color:#A89F8E}
.kpi svg.spark{width:100%;height:46px}
.bar12{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.bar12 i{height:7px;border-radius:4px;background:#E3DBCD}
.bar12 i.ok{background:var(--bronze)}.bar12 i.now{background:var(--gold);animation:blink 1.4s infinite}
.panel{background:var(--paper);border-radius:var(--r-m);padding:8px;min-width:0}
.panel>header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 12px 8px}
.panel>header h2{font:400 21px var(--serif)}
.panel>header a{font:600 13px var(--sans)}
.drow{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px}
.drow+.drow{border-top:1px solid #F0EBE2}
.drow:hover{background:#FAF8F4}
.drow .ic{width:38px;height:38px;border-radius:11px;background:var(--linen);display:grid;place-items:center;flex:none;font:400 10.5px var(--num);color:var(--bronze)}
.drow .t{min-width:0;flex:1}
.drow .t b{display:block;font:600 14px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow .t small{font-size:12.5px;color:var(--stone)}
.st{font:600 11px var(--sans);padding:4px 9px;border-radius:99px;white-space:nowrap}
.st.ok{background:var(--ok-bg);color:var(--ok)}.st.due{background:var(--warn-bg);color:var(--warn)}.st.req{background:var(--info-bg);color:var(--info)}
.tbl{overflow-x:auto}
.tbl table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.tbl th{font:600 12px var(--sans);color:var(--stone);text-align:left;padding:10px 12px;border-bottom:1px solid var(--sand)}
.tbl td{padding:12px;border-bottom:1px solid #F0EBE2}
.tbl td.n{text-align:right;font-family:var(--num);font-variant-numeric:tabular-nums}
.tbl tr.t td{border-top:1.5px solid var(--ink);font-weight:600;border-bottom:0}
.tabbar{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:40;display:none;justify-content:space-around;padding:8px;border-radius:24px;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 12px 30px -12px rgba(0,0,0,.28)}
@media (max-width:900px){.tabbar{display:flex}}
.tabbar a{display:grid;justify-items:center;gap:3px;font:500 11px var(--sans);color:var(--stone-2);text-decoration:none;padding:4px 10px}
.tabbar a svg{width:22px;height:22px}
.tabbar a[aria-current="page"]{color:var(--ink)}
.drop{border:1.5px dashed var(--sand);border-radius:var(--r-m);padding:26px;text-align:center;display:grid;gap:8px;justify-items:center;background:#FBFAF7;transition:border-color .2s,background .2s}
.drop.over{border-color:var(--bronze);background:var(--linen)}
.pay-sheet{visibility:hidden;position:fixed;z-index:95;left:50%;bottom:0;translate:-50% 0;width:min(480px,100vw);background:var(--paper);border-radius:28px 28px 0 0;padding:12px 22px calc(env(safe-area-inset-bottom,0px) + 22px);box-shadow:0 -24px 60px rgba(0,0,0,.28);display:grid;gap:14px;transform:translateY(105%);transition:transform .55s var(--ease),visibility 0s .55s}
.pay-sheet.open{transform:none;visibility:visible;transition:transform .55s var(--ease),visibility 0s}
.grab{width:42px;height:5px;border-radius:5px;background:var(--sand);margin:0 auto}
.amt{font:400 40px/1 var(--num);letter-spacing:-.04em}
.cardin{min-height:50px;border-radius:14px;border:1px solid var(--sand);display:flex;align-items:center;gap:10px;padding:0 14px;font:400 15px var(--num)}
.testmode{justify-self:start;font:600 10.5px var(--sans);letter-spacing:.06em;background:#FFF1D6;color:var(--warn);padding:4px 9px;border-radius:6px}
.stripe-note{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--stone)}
.stripe-note b{color:#635BFF;font:700 14px var(--sans);letter-spacing:-.02em}
.paid{display:grid;justify-items:center;gap:10px;text-align:center;padding:10px 0}
.paid .ck{width:60px;height:60px;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.paid .ck path{fill:none;stroke:var(--gold);stroke-width:3;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .7s .1s var(--ease) forwards}

/* Login */
.login{min-height:100svh;display:grid;grid-template-columns:1.1fr 1fr;background:#0d0c0b}
@media (max-width:860px){.login{grid-template-columns:1fr;align-content:end}}
.login .art{position:relative;overflow:hidden}
.login .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
@media (max-width:860px){.login .art{position:fixed;inset:0}}
.login .box{position:relative;align-self:center;margin:clamp(12px,4vw,48px);padding:clamp(22px,4vw,40px);border-radius:32px;background:rgba(247,244,238,.95);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:grid;gap:14px;max-width:460px;width:calc(100% - 24px);justify-self:center}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.w path,.paid .ck path{stroke-dashoffset:0}.rv.pre{opacity:1;transform:none}}
@media print{.hdr,.dock,.agent,.scrim,.tabbar,.p-side{display:none!important}body{background:#fff}}

/* ===== Motion v2 (30/09/2026): itálicas con blur, ilustraciones de pasos, respuesta al tacto ===== */
/* Itálicas de Libre Caslon: entran palabra por palabra desde el desenfoque */
.bw{display:inline-block;white-space:pre;padding:.08em .16em .18em;margin:-.08em -.16em -.18em}
.js-em .bw{opacity:0;filter:blur(14px);transform:translateY(.22em) scale(1.04);transform-origin:0 70%;letter-spacing:.04em;transition:opacity 1.1s var(--ease),filter 1.3s var(--ease),transform 1.3s var(--ease),letter-spacing 1.4s var(--ease);transition-delay:calc(var(--i,0) * 90ms + var(--d0,120ms))}
.js-em.in .bw{opacity:1;filter:blur(0);transform:none;letter-spacing:0}
.js-em .w path{animation:none}
.js-em.in .w path{animation:draw 1.3s calc(var(--n,1) * 90ms + 520ms) var(--ease) forwards}
/* Brillo que recorre la itálica una vez que se asienta */
.js-em.in em .bw,.js-em.in .w .bw{background-image:linear-gradient(100deg,currentColor 40%,var(--gold-hi) 50%,currentColor 60%);background-size:250% 100%;background-position:100% 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;animation:sheen 2.2s calc(var(--i,0) * 90ms + 1.1s) var(--ease) both}
.js-em.in em .bw,.js-em.in .w .bw{-webkit-text-fill-color:transparent}
.dark .js-em.in em .bw,.hero-film .js-em.in .w .bw{background-image:linear-gradient(100deg,currentColor 40%,#FFF6DD 50%,currentColor 60%)}
@keyframes sheen{from{background-position:100% 0}to{background-position:0% 0}}

/* Ilustraciones de los pasos */
.step{position:relative;overflow:hidden;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.step .ill{order:-1;margin:-8px -8px 6px;aspect-ratio:16/10;border-radius:calc(var(--r-m) - 6px);background:radial-gradient(120% 90% at 50% 0%,#FBF9F4 0%,var(--porcelain) 60%,#EFE9DD 100%);display:grid;place-items:center;overflow:hidden}
.step .ill svg{width:100%;height:100%;overflow:visible}
.ill .d{fill:none;stroke:#3F3A33;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease) var(--d,.1s)}
.ill .d.s{stroke:#C9BEA9}
.ill .d.g{stroke:var(--gold);stroke-width:1.6}
.ill .d.t{stroke:#8C8374}
.ill .d.paper{fill:#fff}
.ill .f{fill:var(--gold);opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center;transition:opacity .5s var(--ease) var(--d,.9s),transform .7s cubic-bezier(.3,1.6,.5,1) var(--d,.9s)}
.ill .ck{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--ease) 1.7s}
.ill.on .d,.ill.on .ck{stroke-dashoffset:0}
.ill.on .d.s[stroke-dasharray]{stroke-dashoffset:0}
.ill.on .f{opacity:1;transform:none}
.ill circle[stroke-dasharray]{stroke-dashoffset:0;opacity:0;transition:opacity 1.2s var(--ease) .2s}.ill.on circle[stroke-dasharray],.ill.on path[stroke-dasharray="2 5"]{opacity:1}
.ill path[stroke-dasharray="2 5"]{stroke-dashoffset:0;opacity:0;transition:opacity 1.2s var(--ease) .2s}
/* 1 · la aguja recorre los 20 minutos */
.ill .hand{transform-origin:120px 75px;transform:rotate(-120deg);transition:transform 1.6s var(--ease) .5s}
.ill.on .hand{transform:none}
.step:hover .ill .hand{transform:rotate(6deg)}
.ill .pip{transition-delay:1.6s}
/* 2 · lo disperso se alinea */
.ill .sc{transform:rotate(var(--r));transition:stroke-dashoffset 1.2s var(--ease),transform 1s var(--ease)}
.step:hover .ill .sc{transform:rotate(0deg) translateX(6px)}
.ill .flow{stroke-dasharray:.06 .04;stroke-dashoffset:1}
.ill.on .flow{animation:flow 3.2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-.9}}
/* 3 · ritmo mensual: el mes en curso late */
.ill .pulse{fill:none;stroke:var(--gold);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.ill.on .pulse{animation:pulse 2.4s var(--ease) 1.6s infinite}
@keyframes pulse{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(2.4)}}
.step:hover .ill .d.g{stroke:var(--bronze)}
/* 4 · la entrega viaja al profesional */
.ill .pkt{transition:transform 1.2s var(--ease)}
.step:hover .ill .pkt{transform:translateX(14px)}
.step:hover{box-shadow:0 26px 50px -30px rgba(18,17,16,.35)}

/* Respuesta al tacto: tarjetas con luz que sigue el cursor e inclinación leve */
.svc,.post-card,.step{--mx:50%;--my:0%}
@media (hover:hover) and (pointer:fine){
  .svc,.step{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));will-change:transform;transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity .9s var(--ease)}
  .svc:hover,.step:hover{--ty:-4px}
  .svc::after,.step::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(230,215,174,.28),transparent 45%);opacity:0;transition:opacity .5s var(--ease)}
  .svc:hover::after,.step:hover::after{opacity:1}
  .svc{position:relative}
}
.svc .more{transition:gap .4s var(--ease),color .3s}
.svc:hover .more{gap:10px;color:var(--bronze)}
.svc h3,.post-card h3{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .7s var(--ease);display:inline;padding-bottom:2px}
.svc:hover h3,.post-card:hover h3{background-size:100% 1px}
/* Botones: brillo de barrido, respuesta magnética y pulsación */
.btn{position:relative;overflow:hidden;isolation:isolate;transform:translate(var(--bx,0px),var(--by,0px))}
.btn-gold::before,.btn-ink::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.btn-ink::before{background:linear-gradient(110deg,transparent 30%,rgba(230,215,174,.22) 50%,transparent 70%)}
.btn-gold:hover::before,.btn-ink:hover::before{transform:translateX(120%)}
.btn:active,.svc:active,.post-card:active,.step:active,.creds span:active{transform:scale(.97);transition-duration:.15s}
/* Navegación: subrayado que crece */
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
/* Credenciales y lista */
.creds span{transition:transform .4s var(--ease),background .3s,color .3s,box-shadow .4s var(--ease)}
.creds span:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--gold)}
.checks li{transition:transform .4s var(--ease)}
.checks li:hover{transform:translateX(4px)}
.checks li::before{transition:background-color .3s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.checks li:hover::before{transform:scale(1.15)}
.checks.stag li{opacity:0;transform:translateX(-8px);transition:opacity .7s var(--ease) calc(var(--i) * 90ms + .5s),transform .8s var(--ease) calc(var(--i) * 90ms + .5s)}
.checks.stag.in li{opacity:1;transform:none}
/* Fotos en arco: parallax suave */
.arch img{transform:translateY(var(--py,0px)) scale(1.08);transition:transform .2s linear}

@media (prefers-reduced-motion:reduce){
  .js-em .bw{opacity:1;filter:none;transform:none;letter-spacing:0}
  .js-em.in em .bw,.js-em.in .w .bw{animation:none;-webkit-text-fill-color:currentColor;background:none}
  .ill .d,.ill .ck{stroke-dashoffset:0}.ill .f{opacity:1;transform:none}.ill .hand{transform:none}
  .checks.stag li{opacity:1;transform:none}
  .arch img{transform:none}
}

/* Héroe con video: encuadre propio en móvil */
@media (max-width:899px){.hero-film video.frame{object-position:var(--op,50% 50%)}}
/* Clips de video */
.svc-row .media video{width:100%;height:100%;object-fit:cover;display:block}
.clip{margin:0;display:grid;gap:12px}
.clip video{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:200px 200px var(--r-m) var(--r-m);display:block;background:#1D1B18}
.clip figcaption{font:500 14px var(--sans);color:var(--stone);padding-left:4px}
.arch video{width:100%;height:100%;object-fit:cover;display:block}