/* =========================================================
   MOLDE · sistema visual
   Concepto: galería de estudio. Fondo neutro casi blanco, tinta negra,
   un único acento ultramar. El color fuerte lo ponen las webs de ejemplo.
   Titulares enormes en Geist con una palabra en cursiva serif (Newsreader).
   ========================================================= */
:root{
  --paper:#f2f2ef;
  --paper-2:#e7e7e2;
  --raise:#ffffff;
  --ink:#0f0f0e;
  --mute:#5e5e59;
  --line:#d4d4cd;
  --accent:#2e3fe6;
  --on-accent:#ffffff;
  --night:#111110;
  --on-night:#f2f2ef;
  --night-mute:#9d9d96;
  --night-line:#2c2c29;
  --ok:#1f7a4d;
  --focus:#2e3fe6;
  --menu-bg:#121211;
  --menu-fg:#f2f2ef;
  --menu-mute:#8e8e87;
  --menu-line:#2a2a27;
  --menu-card:#1e1e1c;
  --menu-card-h:#272725;
  --menu-accent:#a3adff;

  --display:"Geist","Helvetica Neue",Arial,sans-serif;
  --body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif; /* sin monoespaciadas: mismo cuerpo con cifras tabulares */

  --gl:max(clamp(16px,4vw,56px),env(safe-area-inset-left,0px));
  --gr:max(clamp(16px,4vw,56px),env(safe-area-inset-right,0px));
  --hdr:68px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0e0e0d;--paper-2:#161615;--raise:#1b1b1a;--ink:#ededE8;--mute:#9d9d96;--line:#2c2c29;
  --accent:#8c98ff;--on-accent:#0e0e0d;--night:#1c1c1a;--on-night:#ededE8;--night-mute:#9d9d96;--night-line:#33332f;--ok:#6fd19c;--focus:#8c98ff;--menu-bg:#1b1b19;--menu-line:#34342f;--menu-card:#252523;--menu-card-h:#2e2e2b;color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0e0e0d;--paper-2:#161615;--raise:#1b1b1a;--ink:#ededE8;--mute:#9d9d96;--line:#2c2c29;
  --accent:#8c98ff;--on-accent:#0e0e0d;--night:#1c1c1a;--on-night:#ededE8;--night-mute:#9d9d96;--night-line:#33332f;--ok:#6fd19c;--focus:#8c98ff;--menu-bg:#1b1b19;--menu-line:#34342f;--menu-card:#252523;--menu-card-h:#2e2e2b;color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--body);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
img{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.035em;text-wrap:balance;margin:0}
p{margin:0}
em.s,.h-display em,.h1 em,.h2 em{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.02em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:8px}
.skip:focus{top:12px}

/* ---------- estructura ---------- */
.wrap{max-width:1360px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.sec{padding-block:clamp(72px,8vw,128px)}
.sec.tight{padding-block:clamp(56px,7vw,104px)}
.alt{background:var(--paper-2)}
.raise{background:var(--raise)}
.dark{background:var(--night);color:var(--on-night)}
.dark .muted,.dark .lead{color:var(--night-mute)}
.kick{display:block;font:500 15px/1.3 var(--body);letter-spacing:-.005em;color:var(--mute)}
.dark .kick{color:var(--night-mute)}
.h-display{font-size:clamp(34px,4.4vw,64px);line-height:1.04;letter-spacing:-.035em}
.h1{font-size:clamp(32px,3.6vw,52px);line-height:1.06;letter-spacing:-.03em}
.h2{font-size:clamp(26px,2.8vw,40px);line-height:1.1;letter-spacing:-.025em}
.h3{font-size:clamp(19px,1.6vw,23px);line-height:1.2;letter-spacing:-.015em}
.lead{font-size:clamp(16px,1.2vw,18px);line-height:1.55;color:var(--mute);max-width:56ch}
.muted{color:var(--mute)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.head{display:grid;gap:18px;max-width:900px}
.head-split{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,5vw,80px);align-items:end}
.head-split .lead{justify-self:end}
@media (max-width:900px){.head-split{grid-template-columns:1fr}.head-split .lead{justify-self:start}}

/* ---------- botones y enlaces ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font:500 15px/1 var(--body);padding:14px 22px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn .ar{transition:transform .2s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.dark .btn{background:var(--on-night);color:var(--night);border-color:var(--on-night)}
.dark .btn-line{background:transparent;color:var(--on-night)}
.dark .btn-line:hover{background:var(--on-night);color:var(--night)}
.btn-sm{padding:11px 18px;font-size:14px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.lnk{display:inline-flex;align-items:center;gap:8px;font-weight:500;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px}
.lnk .ar{transition:transform .2s var(--ease)}
.lnk:hover .ar{transform:translateX(4px)}
.chip{display:inline-block;font:500 12px/1 var(--mono);padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:var(--mute)}
.note{font-size:13px;color:var(--mute)}
.dark .note{color:var(--night-mute)}

/* ---------- cabecera y mega menú ----------
   Referencia: menú de Squarespace. Panel flotante oscuro con piquito,
   columnas de enlaces sin descripción, divisor y tarjetas destacadas. */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--paper);border-bottom:1px solid transparent;transition:border-color .2s}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:var(--hdr)}
.logo{display:inline-flex;align-items:baseline;font:700 24px/1 var(--display);letter-spacing:-.06em;text-decoration:none;justify-self:start}
.logo i{display:inline-block;width:.32em;height:.32em;background:var(--accent);margin-left:2px;border-radius:1px}
.nav{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav>li>a,.nav>li>button{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:999px;border:0;background:none;font:500 15px/1 var(--body);text-decoration:none;cursor:pointer;color:var(--ink);transition:background .15s}
.nav>li>a:hover,.nav>li>button:hover{background:var(--paper-2)}
.nav>li>button[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
.nav>li>a[aria-current="page"]{background:var(--paper-2)}
.nav svg{width:10px;height:10px;transition:transform .2s}
.nav button[aria-expanded="true"] svg{transform:rotate(180deg)}
.hdr-r{justify-self:end;display:flex;align-items:center;gap:8px}
.hdr-r .txt{font:500 15px var(--body);text-decoration:none;padding:9px 12px}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;place-items:center}
.burger span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink);transition:transform .2s}
.burger span::before{top:-5px}.burger span::after{top:5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)}

.mega{position:absolute;left:0;right:0;top:100%;padding:12px var(--gr) 0 var(--gl);pointer-events:none}
.mega-panel{pointer-events:auto;position:relative;max-width:1160px;margin:0 auto;background:var(--menu-bg);color:var(--menu-fg);border:1px solid var(--menu-line);border-radius:14px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.45);padding:36px 40px 32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 1px 300px;gap:0 40px;
  transform-origin:var(--cx,50%) 0;animation:megain .24s var(--ease)}
@keyframes megain{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
.mega-panel::before{content:"";position:absolute;top:-7px;left:var(--cx,50%);width:12px;height:12px;margin-left:-6px;background:var(--menu-bg);border-left:1px solid var(--menu-line);border-top:1px solid var(--menu-line);transform:rotate(45deg);transition:left .25s var(--ease)}
.mega-col{display:grid;align-content:start;gap:28px;min-width:0}
.mega h3{font:500 13px/1.2 var(--body);color:var(--menu-mute);margin:0 0 14px}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega ul a{display:block;padding:7px 0;font:400 16px/1.3 var(--body);text-decoration:none;color:var(--menu-fg);transition:color .15s,transform .2s var(--ease)}
.mega ul a:hover,.mega ul a:focus-visible,.mega ul a.on{color:var(--menu-accent);transform:translateX(3px)}
.mega-div{background:var(--menu-line);width:1px}
.mega-side{display:grid;gap:12px;align-content:start}
.mcard{display:grid;gap:4px;padding:16px 18px;border-radius:10px;background:var(--menu-card);text-decoration:none;color:var(--menu-fg);transition:background .2s}
.mcard:hover{background:var(--menu-card-h)}
.mcard b{font:500 16px/1.3 var(--body)}
.mcard small{font-size:14px;line-height:1.4;color:var(--menu-mute)}
.mcard .site{margin-top:12px;border-radius:6px;box-shadow:none}
.mcard .site.swap{animation:pagein .3s var(--ease)}
.mega-all{grid-column:1/4;align-self:end;margin-top:28px;font:500 15px/1 var(--body);color:var(--menu-fg);text-decoration:none;display:inline-flex;gap:8px;justify-self:start}
.mega-all:hover .ar{transform:translateX(4px)}
.mega-all .ar{transition:transform .2s var(--ease)}
@media (max-width:1180px){.mega-panel{grid-template-columns:repeat(3,minmax(0,1fr)) 1px 250px;gap:0 28px;padding:32px}}

.mnav{position:fixed;inset:calc(var(--hdr) + env(safe-area-inset-top,0px)) 0 0;z-index:49;background:var(--paper);overflow-y:auto;padding:12px var(--gr) calc(32px + env(safe-area-inset-bottom,0px)) var(--gl)}
.mnav details{border-bottom:1px solid var(--line)}
.mnav summary,.mnav>a{display:flex;justify-content:space-between;align-items:center;padding:16px 0;font:500 18px/1.2 var(--display);letter-spacing:-.02em;list-style:none;cursor:pointer;text-decoration:none;border-bottom:1px solid var(--line)}
.mnav details summary{border-bottom:0}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:"+";font-weight:300;font-size:26px}
.mnav details[open] summary::after{content:"–"}
.mnav ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:2px}
.mnav ul a{display:block;padding:9px 0;color:var(--mute);text-decoration:none;font-size:17px}
.mnav .btn{margin-top:24px;width:100%;justify-content:center}
@media (max-width:1060px){.nav,.hdr-in>nav,.hdr-r .txt,.hdr-r .btn{display:none}.burger{display:grid}.hdr-in{grid-template-columns:1fr auto}}

/* ---------- transición de página ---------- */
main{animation:pagein .5s var(--ease)}
@keyframes pagein{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- inicio: hero ---------- */
.hero{padding-block:clamp(40px,6vw,88px) clamp(72px,9vw,136px)}
.hero .h-display{max-width:20ch}
.hero-row{display:grid;grid-template-columns:4fr 8fr;gap:clamp(32px,5vw,80px);margin-top:clamp(36px,5vw,64px);align-items:start}
.hero-side{display:grid;gap:28px;padding-top:8px;min-width:0}
.hero-side .lead{font-size:17px}
.who{display:grid;gap:10px;padding-top:24px;border-top:1px solid var(--line);font-size:15px;color:var(--mute)}
.who b{color:var(--ink);font-weight:500}
.stage{position:relative;padding:0 0 15% 13%;min-width:0}
.stage .m2{position:absolute;left:0;bottom:0;width:46%;z-index:2}
.inv{position:absolute;right:4%;bottom:-2%;width:min(290px,40%);z-index:3}
@media (max-width:900px){
  .hero-row{grid-template-columns:1fr}
  .stage{padding:0 0 0 0}
  .stage .m2{display:none}
  .inv{position:relative;right:auto;bottom:auto;width:100%;max-width:340px;margin:-28px 0 0 auto}
}

/* factura (componente reutilizable) */
.invoice{background:var(--raise);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:18px 18px 16px;box-shadow:0 30px 50px -30px rgba(0,0,0,.4);font-size:13px;display:grid;gap:10px}
.invoice .t{display:flex;justify-content:space-between;align-items:center;font:500 11px/1 var(--mono);color:var(--mute)}
.invoice .who2{font-weight:500;font-size:15px}
.invoice .rows{display:grid;gap:6px;padding-block:10px;border-block:1px solid var(--line)}
.invoice .rows div,.invoice .tot{display:flex;justify-content:space-between;gap:12px}
.invoice .rows span:last-child,.invoice .tot span:last-child{font-family:var(--mono);font-variant-numeric:tabular-nums}
.invoice .tot{font-weight:600;font-size:15px}
.paid{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--mono);color:var(--ok)}
.paid::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

/* línea de sectores */
.lineup{border-block:1px solid var(--line);padding-block:22px}
.lineup .wrap{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline}
.lineup span.kick{margin-right:8px}
.lineup a{font:500 16px/1.4 var(--display);letter-spacing:-.02em;text-decoration:none;color:var(--mute);transition:color .15s}
.lineup a:hover{color:var(--ink)}

/* libro de cuentas */
.money-split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,7vw,120px);align-items:start}
.money-split .head{position:sticky;top:calc(var(--hdr) + 40px)}
.ledger{background:var(--raise);border:1px solid var(--line);border-radius:16px;padding:clamp(20px,3vw,36px);display:grid;gap:4px}
.ledger .lh{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding-bottom:18px}
.ledger .lh b{font:600 18px/1.25 var(--display);letter-spacing:-.02em}
.ledger .r{display:grid;grid-template-columns:1fr auto;gap:16px;padding:14px 0;border-top:1px solid var(--line);align-items:baseline}
.ledger .r small{display:block;color:var(--mute);font-size:14px}
.ledger .r .mono{font-size:17px}
.ledger .r.rec .mono{color:var(--accent)}
.ledger .total{display:grid;grid-template-columns:1fr auto;padding:20px 0 0;border-top:2px solid var(--ink);margin-top:6px;font:600 clamp(22px,2vw,28px)/1 var(--display);letter-spacing:-.02em}
.growth{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.growth .gt{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:15px}
.bars{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:140px;margin-top:18px}
.bars i{display:block;background:var(--accent);border-radius:3px 3px 0 0;opacity:.9;transition:opacity .2s}
.bars i:hover{opacity:1}
.bars-x{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;margin-top:8px;font:400 11px/1 var(--mono);color:var(--mute);text-align:center}
@media (max-width:900px){.money-split{grid-template-columns:1fr}.money-split .head{position:static}}

/* beneficios */
.benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,6vw,96px);margin-top:clamp(48px,6vw,88px)}
.benefits article{border-top:1px solid var(--line);padding:28px 0 44px;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.benefits h3{font-size:clamp(18px,1.5vw,21px);letter-spacing:-.015em;line-height:1.25}
.benefits p{color:var(--mute);max-width:48ch}
.dark .benefits article{border-color:var(--night-line)}
.dark .benefits p{color:var(--night-mute)}
@media (max-width:760px){.benefits{grid-template-columns:1fr}}

/* tiles de sectores */
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,72px)}
.tile{display:grid;gap:12px;text-decoration:none;align-content:start}
.tile .site{transition:transform .3s var(--ease),box-shadow .3s}
.tile:hover .site{transform:translateY(-5px)}
.tile b{font-weight:500;font-size:16px;display:flex;justify-content:space-between;gap:8px}
.tile b .ar{opacity:0;transform:translateX(-4px);transition:.2s var(--ease)}
.tile:hover b .ar{opacity:1;transform:none}
@media (max-width:1100px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* escaparate de proyectos */
.showcase{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,40px) clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,72px)}
.showcase .big{grid-column:1/-1}
.showcase .half{grid-column:span 6}
.showcase .half:nth-of-type(3){margin-top:clamp(0px,8vw,120px)}
.proj{display:grid;gap:16px;text-decoration:none;align-content:start}
.proj .site{transition:transform .35s var(--ease)}
.proj:hover .site{transform:translateY(-6px)}
.proj .pm{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap}
.proj .pm b{font:600 18px/1.25 var(--display);letter-spacing:-.025em}
.proj .pm span{color:var(--mute);font-size:15px}
.proj>p{color:var(--mute);font-size:15px;max-width:52ch}
.proj .go{font-weight:500;font-size:15px;display:inline-flex;gap:8px;align-items:center}
.proj .go .ar{transition:transform .2s var(--ease)}
.proj:hover .go .ar{transform:translateX(4px)}
@media (max-width:760px){.showcase .half{grid-column:1/-1}.showcase .half:nth-of-type(3){margin-top:0}}

/* pasos */
.steps{list-style:none;margin:clamp(48px,6vw,88px) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--line)}
.steps li{position:relative;padding:40px 20px 0 0;display:grid;gap:8px;align-content:start}
.steps li::before{content:"";position:absolute;left:0;top:4px;width:11px;height:11px;border-radius:50%;background:var(--paper-2);border:1.5px solid var(--ink)}
.steps li:last-child::before{background:var(--accent);border-color:var(--accent)}
.steps .n{font:500 12px/1 var(--mono);color:var(--mute)}
.steps b{font:600 17px/1.25 var(--display);letter-spacing:-.02em}
.steps p{font-size:15px;color:var(--mute)}
@media (max-width:1000px){
  .steps{grid-template-columns:1fr;gap:0}
  .steps::before{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .steps li{padding:0 0 28px 36px}
}

/* dos maneras de cobrar */
.two{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.dark .two{border-color:var(--night-line)}
.two>div{padding:32px clamp(0px,3vw,48px) 0 0;min-width:0}
.two>div+div{border-left:1px solid var(--line);padding-left:clamp(20px,3vw,48px)}
.dark .two>div+div{border-color:var(--night-line)}
.two h3{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.02em}
.two .sub{margin-top:8px;color:var(--mute)}
.dark .two .sub{color:var(--night-mute)}
.plist{list-style:none;margin:28px 0 0;padding:0}
.plist li{display:grid;grid-template-columns:1fr auto;gap:16px;padding:16px 0;border-top:1px solid var(--line);align-items:baseline}
.plist li span:last-child{font-size:15px;color:var(--mute);text-align:right;white-space:nowrap}
.plist small{display:block;color:var(--mute);font-size:14px;line-height:1.45;margin-top:4px;max-width:44ch}
.dark .plist li{border-color:var(--night-line)}
.dark .plist li span:last-child{color:var(--night-mute)}
@media (max-width:820px){.two{grid-template-columns:1fr}.two>div+div{border-left:0;padding-left:0;margin-top:24px}}

/* caso con antes/después */
.case{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:center;margin-top:clamp(40px,5vw,72px)}
.case .txt{display:grid;gap:18px;min-width:0}
.case dl{margin:8px 0 0;display:grid}
.case dl div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.case dt{font:500 12px/1.6 var(--mono);color:var(--mute)}
.case dd{margin:0}
.ba{position:relative;--x:50%;user-select:none;touch-action:pan-y;min-width:0}
.ba .site{aspect-ratio:16/10}
.ba .before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);pointer-events:none;z-index:4}
.ba .handle::after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-size:16px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.ba .lbl{position:absolute;top:calc(3.4cqw + 12px);z-index:4;font:500 11px/1 var(--mono);background:rgba(0,0,0,.65);color:#fff;padding:6px 8px;border-radius:4px}
.ba .lbl.l{left:12px}.ba .lbl.r{right:12px}
.ba input{width:100%;margin-top:16px;accent-color:var(--accent)}
.ba-wrap{container-type:inline-size}
@media (max-width:900px){.case{grid-template-columns:1fr}}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:4fr 8fr;gap:clamp(32px,6vw,96px)}
.qs{min-width:0}
.qs details{border-top:1px solid var(--line)}
.qs details:last-child{border-bottom:1px solid var(--line)}
.qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:24px 0;font:500 17px/1.35 var(--display);letter-spacing:-.01em}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"+";font:300 28px/1 var(--display);transition:transform .25s var(--ease);flex:none}
.qs details[open] summary::after{transform:rotate(45deg)}
.qs details p{padding:0 0 26px;color:var(--mute);max-width:62ch}
.qs details[open] p{animation:pagein .35s var(--ease)}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}}

/* CTA final */
.cta-final{padding-block:clamp(96px,13vw,200px)}
.cta-final .h-display{max-width:22ch}
.cta-final .row{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:end;margin-top:40px}
.cta-final .row .btns{justify-content:flex-end}
@media (max-width:900px){.cta-final .row{grid-template-columns:1fr}.cta-final .row .btns{justify-content:flex-start}}

/* ---------- cómo funciona ---------- */
.page-hero{padding-block:clamp(48px,7vw,104px) clamp(56px,7vw,104px)}
.page-hero .h1{max-width:24ch;margin-top:20px}
.page-hero .lead{margin-top:28px}
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--mute)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--ink)}
.cycle-wrap{display:grid;grid-template-columns:6fr 6fr;gap:clamp(32px,6vw,96px);align-items:center}
.cycle{width:100%;max-width:560px;justify-self:center;overflow:visible}
.cycle .ring{fill:none;stroke:var(--line);stroke-width:1.5}
.cycle .arc{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:4 6}
.cycle .node{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.cycle .node.on{fill:var(--accent);stroke:var(--accent)}
.cycle .num{font:500 13px var(--mono);fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.cycle .num.on{fill:var(--on-accent)}
.cycle .lab{font:500 15px var(--body);fill:var(--ink)}
.cycle .mid{font:600 19px var(--display);fill:var(--ink);text-anchor:middle;letter-spacing:-.03em}
.cycle .mid2{font:400 14px var(--body);fill:var(--mute);text-anchor:middle}
@media (max-width:900px){.cycle-wrap{grid-template-columns:1fr}}

.srows{display:grid;gap:clamp(80px,10vw,150px)}
.srow{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:center}
.srow:nth-child(even){grid-template-columns:7fr 5fr}
.srow:nth-child(even) .txt{order:2}
.srow .txt{display:grid;gap:16px;max-width:46ch;min-width:0}
.srow .big-n{font:300 clamp(40px,4vw,56px)/.9 var(--display);letter-spacing:-.06em;color:var(--accent)}
.srow .txt ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.srow .txt li{padding-left:22px;position:relative;color:var(--mute)}
.srow .txt li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:1.5px;background:var(--ink)}
.srow .vis{min-width:0}
@media (max-width:900px){.srow,.srow:nth-child(even){grid-template-columns:1fr}.srow:nth-child(even) .txt{order:0}}

/* prospectos */
.sheet{background:var(--raise);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.sheet-h{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font:500 13px var(--mono);color:var(--mute)}
.tbl-scroll{overflow-x:auto}
.sheet table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.sheet th{font:500 11px/1 var(--mono);color:var(--mute);text-align:left;padding:12px 18px}
.sheet td{padding:14px 18px;border-top:1px solid var(--line)}
.tag{display:inline-block;font:500 12px/1 var(--body);padding:5px 9px;border-radius:999px;background:var(--paper-2)}
.tag.hot{background:var(--accent);color:var(--on-accent)}

/* propuesta (documento) */
.doc{background:var(--raise);border:1px solid var(--line);border-radius:6px;padding:clamp(24px,4vw,48px);box-shadow:0 40px 60px -40px rgba(0,0,0,.4);display:grid;gap:18px;max-width:560px;margin-inline:auto;transform:rotate(-1.2deg)}
.doc .dh{display:flex;justify-content:space-between;font:500 11px var(--mono);color:var(--mute)}
.doc h4{font-size:clamp(19px,1.8vw,24px);line-height:1.15;letter-spacing:-.02em}
.doc .sec2{display:grid;gap:6px;font-size:14px}
.doc .sec2 b{font:500 11px var(--mono);color:var(--mute)}
.doc .lines{display:grid;gap:7px}
.doc .lines i{display:block;height:7px;border-radius:4px;background:var(--paper-2)}
.doc .sum{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--ink);padding-top:14px;font:600 22px/1 var(--display)}
.doc .sign{display:flex;justify-content:space-between;align-items:end;gap:16px;font-size:13px;color:var(--mute)}
.doc .sign span:last-child{font:italic 500 24px/1 var(--serif);color:var(--ink);border-bottom:1px solid var(--line);padding:0 24px 6px}

/* calendario orientativo */
.weeks{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;margin-top:40px}
.weeks .w{font:400 11px/1 var(--mono);color:var(--mute);text-align:center;padding-bottom:8px}
.weeks .bar2{border-radius:6px;padding:12px 14px;font-size:14px;font-weight:500;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.weeks .b1{grid-column:1/5;background:var(--paper-2)}
.weeks .b2{grid-column:4/8;background:var(--ink);color:var(--paper)}
.weeks .b3{grid-column:7/11;background:var(--accent);color:var(--on-accent)}
.weeks .b4{grid-column:10/13;border:1.5px dashed var(--ink)}
@media (max-width:700px){.weeks{grid-template-columns:1fr}.weeks .w{display:none}.weeks .b1,.weeks .b2,.weeks .b3,.weeks .b4{grid-column:auto;white-space:normal}}

/* ---------- oportunidades: bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.bc{grid-column:span 2;display:grid;gap:14px;align-content:start;text-decoration:none;padding:clamp(14px,1.6vw,20px);border-radius:16px;background:var(--raise);border:1px solid var(--line);transition:border-color .2s,transform .3s var(--ease)}
.bc:hover{border-color:var(--ink);transform:translateY(-3px)}
.bc.w3{grid-column:span 3}
.bc .bt{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.bc b{font:600 17px/1.25 var(--display);letter-spacing:-.025em}
.bc .n{font:500 12px var(--mono);color:var(--mute)}
.bc p{color:var(--mute);font-size:15px}
.bc .sell{font-size:14px;display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:1000px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bc,.bc.w3{grid-column:span 1}}
@media (max-width:600px){.bento{grid-template-columns:1fr}}

/* ---------- sector ---------- */
.s-hero{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:center}
.s-hero .txt{display:grid;gap:22px;min-width:0}
.needs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:48px}
.needs article{display:grid;gap:10px;align-content:start;border-top:2px solid var(--ink);padding-top:20px}
.needs b{font:600 17px/1.25 var(--display);letter-spacing:-.02em}
.needs p{color:var(--mute);font-size:15px}
@media (max-width:1000px){.needs{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.needs{grid-template-columns:1fr}}
.ptable{width:100%;border-collapse:collapse;margin-top:32px}
.ptable th{text-align:left;font:500 11px/1 var(--mono);color:var(--mute);padding:0 0 14px}
.ptable td{padding:20px 16px 20px 0;border-top:1px solid var(--line);vertical-align:top}
.ptable td:first-child{font:500 16px/1.4 var(--display);letter-spacing:-.005em}
.ptable td small{display:block;font:400 15px/1.45 var(--body);color:var(--mute);margin-top:4px;letter-spacing:0}
.ptable td.pr{text-align:right;font-family:var(--mono);font-size:15px;white-space:nowrap;padding-right:0}
.ptable td.tm{color:var(--mute);font-size:15px;white-space:nowrap}
.sitemap{display:grid;gap:18px;justify-items:center;margin-top:40px}
.sitemap .root{padding:14px 22px;border-radius:10px;background:var(--ink);color:var(--paper);font-weight:500}
.sitemap .kids{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;position:relative;padding-top:22px}
.sitemap .kids::before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:var(--line)}
.sitemap .kids span{position:relative;padding:12px 18px;border:1px solid var(--line);border-radius:10px;background:var(--raise);font-size:15px}
.sitemap .kids span::before{content:"";position:absolute;left:50%;top:-23px;height:22px;width:1px;background:var(--line)}
.pitch{font:italic 500 clamp(21px,2vw,30px)/1.3 var(--serif);letter-spacing:-.02em;max-width:30ch;margin:0}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pn a{display:grid;gap:6px;padding:24px;border:1px solid var(--line);border-radius:14px;text-decoration:none;transition:border-color .2s}
.pn a:hover{border-color:var(--ink)}
.pn a:last-child{text-align:right}
.pn b{font:600 clamp(17px,1.4vw,20px)/1.2 var(--display);letter-spacing:-.015em}
@media (max-width:900px){.s-hero{grid-template-columns:1fr}}

/* ---------- servicios ---------- */
.svc-split{display:grid;grid-template-columns:4fr 8fr;gap:clamp(32px,6vw,96px)}
.svc-split .head{position:sticky;top:calc(var(--hdr) + 40px);align-self:start}
.svc-split .tbl-scroll{min-width:0}
.svc-split .ptable{margin-top:0;min-width:560px}
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:56px;border:1px solid var(--ink);border-radius:18px;overflow:hidden}
.pack{padding:clamp(24px,3vw,40px);display:grid;gap:16px;align-content:start;min-width:0}
.pack+.pack{border-left:1px solid var(--ink)}
.pack.feat{background:var(--ink);color:var(--paper)}
.pack.feat .muted{color:var(--night-mute)}
.pack .amt{font:600 clamp(30px,2.8vw,40px)/1 var(--display);letter-spacing:-.03em}
.pack .amt small{display:block;font:500 15px/1.3 var(--mono);letter-spacing:0;margin-top:8px;opacity:.75}
.pack ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.pack li{padding-left:22px;position:relative}
.pack li::before{content:"";position:absolute;left:0;top:.7em;width:12px;height:1.5px;background:currentColor}
@media (max-width:900px){.svc-split{grid-template-columns:1fr}.svc-split .head{position:static}.packs{grid-template-columns:1fr}.pack+.pack{border-left:0;border-top:1px solid var(--ink)}}

/* ---------- portfolio ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.filters button{padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;font:500 14px/1 var(--body);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.filters button:hover{border-color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(48px,6vw,96px) clamp(20px,3vw,40px);margin-top:48px}
.pgrid .proj.wide{grid-column:1/-1}
.pgrid .proj.wide .site{aspect-ratio:16/8.4}
@media (max-width:1000px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pgrid{grid-template-columns:1fr}}

/* ---------- proyecto ---------- */
.pmeta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.pmeta div{display:grid;gap:6px}
.pmeta dt{font:500 11px/1 var(--mono);color:var(--mute)}
.pmeta dd{margin:0;font-size:17px}
.pdet{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(32px,5vw,72px) clamp(20px,3vw,48px)}
.pdet .c6{grid-column:span 6}.pdet .c4{grid-column:span 4}
.pdet h3{font-size:clamp(18px,1.5vw,21px);letter-spacing:-.015em;margin-bottom:12px}
.pdet p{color:var(--mute);max-width:52ch}
.swatches{display:flex;gap:10px}
.swatches span{width:56px;height:56px;border-radius:50%;border:1px solid var(--line)}
.ulist{list-style:none;margin:0;padding:0;display:grid}
.ulist li{padding:10px 0;border-top:1px solid var(--line)}
@media (max-width:900px){.pmeta{grid-template-columns:1fr 1fr}.pdet .c6,.pdet .c4{grid-column:1/-1}}

/* ---------- aprende ---------- */
.syl{display:grid;grid-template-columns:4fr 8fr;gap:clamp(32px,6vw,96px);align-items:start}
.syl aside{position:sticky;top:calc(var(--hdr) + 32px);display:grid;gap:20px;padding:clamp(20px,3vw,32px);border-radius:18px;background:var(--ink);color:var(--paper)}
.syl aside dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.syl aside dt{font:500 11px/1 var(--mono);color:var(--night-mute)}
.syl aside dd{margin:6px 0 0;font:600 22px/1 var(--display);letter-spacing:-.02em}
.syl aside .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);justify-content:center}
.mods{counter-reset:m;min-width:0}
.mod{border-top:1px solid var(--line)}
.mod:last-child{border-bottom:1px solid var(--line)}
.mod summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:56px 1fr auto auto;gap:16px;align-items:baseline;padding:26px 0}
.mod summary::-webkit-details-marker{display:none}
.mod summary .n{font:500 13px var(--mono);color:var(--mute)}
.mod summary b{font:600 clamp(17px,1.4vw,19px)/1.3 var(--display);letter-spacing:-.01em}
.mod summary .h{font:400 14px var(--mono);color:var(--mute);white-space:nowrap}
.mod summary::after{content:"+";font:300 26px/1 var(--display);transition:transform .25s var(--ease)}
.mod[open] summary::after{transform:rotate(45deg)}
.mod ol{margin:0 0 28px 72px;padding:0;list-style:none;display:grid;gap:0}
.mod ol li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);color:var(--mute)}
.mod ol li span:first-child{color:var(--ink)}
@media (max-width:900px){.syl{grid-template-columns:1fr}.syl aside{position:static}.mod summary{grid-template-columns:36px 1fr auto}.mod summary .h{display:none}.mod ol{margin-left:52px}}
.outcomes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:48px}
.outcomes article{display:grid;gap:14px;align-content:start}
.outcomes b{font:600 18px/1.25 var(--display);letter-spacing:-.025em}
.outcomes p{color:var(--mute)}
@media (max-width:900px){.outcomes{grid-template-columns:1fr}}

/* ---------- recursos ---------- */
.calc{display:grid;grid-template-columns:7fr 5fr;gap:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--raise)}
.calc form{padding:clamp(20px,3vw,40px);display:grid;gap:26px;min-width:0}
.calc fieldset{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.calc legend{font:500 12px/1 var(--mono);color:var(--mute);margin-bottom:10px;padding:0}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-block;padding:11px 16px;border-radius:999px;border:1px solid var(--line);cursor:pointer;font-size:15px;transition:.15s}
.seg input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.seg input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.checks label{display:flex;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:15px}
.checks label:has(input:checked){border-color:var(--ink)}
.checks input{accent-color:var(--accent);width:16px;height:16px}
.checks small{margin-left:auto;font-family:var(--mono);color:var(--mute);font-size:13px}
.range{display:flex;align-items:center;gap:16px}
.range input{flex:1;accent-color:var(--accent)}
.range output{font:600 19px/1 var(--display);min-width:3ch;text-align:right}
.calc .out{background:var(--ink);color:var(--paper);padding:clamp(24px,3vw,40px);display:grid;gap:18px;align-content:start}
.calc .out .big{font:600 clamp(34px,3.4vw,48px)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.calc .out dl{margin:0;display:grid}
.calc .out dl div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--night-line);font-size:15px}
.calc .out dt{color:var(--night-mute)}
.calc .out dd{margin:0;font-family:var(--mono)}
.calc .out .note{color:var(--night-mute)}
@media (max-width:900px){.calc{grid-template-columns:1fr}}
@media (max-width:520px){.checks{grid-template-columns:1fr}}
.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:40px}
.rcard{display:grid;grid-template-rows:auto 1fr auto;gap:14px;padding:clamp(20px,2.4vw,28px);border:1px solid var(--line);border-radius:16px;text-decoration:none;min-height:240px;transition:border-color .2s,transform .3s var(--ease);background:var(--paper)}
.rcard:hover{border-color:var(--ink);transform:translateY(-3px)}
.rcard b{font:600 18px/1.25 var(--display);letter-spacing:-.025em;display:block;margin-bottom:8px}
.rcard p{color:var(--mute);font-size:15px}
.rcard .go{font-weight:500;font-size:15px;display:flex;justify-content:space-between}
.rcard.first{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.rcard.first p,.rcard.first .chip{color:var(--on-accent);border-color:currentColor;opacity:.9}
@media (max-width:1000px){.rgrid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.rgrid{grid-template-columns:1fr}}
.posts{list-style:none;margin:32px 0 0;padding:0}
.posts .row{display:grid;grid-template-columns:160px 1fr auto;gap:24px;align-items:baseline;padding:22px 0;border-top:1px solid var(--line)}
.posts li:last-child .row{border-bottom:1px solid var(--line)}
.posts .c{font:500 12px var(--mono);color:var(--mute)}
.posts b{font:500 17px/1.35 var(--display);letter-spacing:-.02em;transition:color .15s}
.posts .t{font:400 14px var(--mono);color:var(--mute)}
@media (max-width:700px){.posts .row{grid-template-columns:1fr;gap:6px}}

/* ---------- precios ---------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:56px;align-items:stretch}
.plan{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:18px;padding:clamp(24px,3vw,36px);border:1px solid var(--line);border-radius:20px;background:var(--raise);min-width:0}
.plan.feat{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plan.feat .muted{color:var(--night-mute)}
.plan .name{font:500 12px/1 var(--mono)}
.plan .amt{font:600 clamp(30px,2.8vw,40px)/1 var(--display);letter-spacing:-.03em}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start;font-size:15px}
.plan li{padding-left:24px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.42em;width:10px;height:6px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
.plan .btn{justify-content:center}
.plan.feat .btn{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
@media (max-width:960px){.plans{grid-template-columns:1fr}}
.cmp{width:100%;border-collapse:collapse;min-width:620px}
.cmp th,.cmp td{padding:16px 12px;border-top:1px solid var(--line);text-align:center;font-size:15px}
.cmp th:first-child,.cmp td:first-child{text-align:left;padding-left:0}
.cmp thead th{border-top:0;font:500 12px/1 var(--mono);color:var(--mute)}
.yes{display:inline-block;width:10px;height:6px;border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(-45deg)}
.no{color:var(--mute)}

/* ---------- sobre nosotros ---------- */
.manifesto{font:500 clamp(22px,2.2vw,32px)/1.3 var(--display);letter-spacing:-.02em;max-width:36ch;text-wrap:balance}
.manifesto em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--accent)}
.principles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.principles article{display:grid;gap:12px;align-content:start;border-top:1px solid var(--night-line);padding-top:24px}
.principles article:nth-child(1){grid-column:1/6}
.principles article:nth-child(2){grid-column:7/13;margin-top:clamp(0px,8vw,120px)}
.principles article:nth-child(3){grid-column:3/9}
.principles b{font:600 clamp(19px,1.6vw,23px)/1.2 var(--display);letter-spacing:-.015em}
.principles p{color:var(--night-mute);max-width:46ch}
@media (max-width:820px){.principles article:nth-child(n){grid-column:1/-1;margin-top:0}}
.story{display:grid;grid-template-columns:4fr 8fr;gap:clamp(32px,6vw,96px)}
.story .body{display:grid;gap:20px;font-size:17px;max-width:62ch}
.story .body p:first-child::first-line{font-weight:600}
@media (max-width:900px){.story{grid-template-columns:1fr}}

/* ---------- contacto ---------- */
.contact{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.contact .info{display:grid;gap:32px;min-width:0}
.contact .blk{display:grid;gap:10px}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.mail .addr{font:600 clamp(19px,1.6vw,23px)/1.2 var(--display);letter-spacing:-.015em;user-select:all;word-break:break-all}
.copy{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:none;cursor:pointer;font-size:13px}
.socials{display:flex;flex-wrap:wrap;gap:8px}
.socials a{padding:10px 16px;border-radius:999px;border:1px solid var(--line);text-decoration:none;font-size:15px;transition:border-color .15s}
.socials a:hover{border-color:var(--ink)}
.form{display:grid;gap:18px;padding:clamp(20px,3vw,40px);border-radius:20px;background:var(--raise);border:1px solid var(--line);min-width:0}
.form .two-f{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:8px;min-width:0}
.field label{font-size:14px;font-weight:500}
.field input,.field select,.field textarea{width:100%;font:400 16px/1.4 var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 14px;transition:border-color .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field .err{color:#c0392b;font-size:13px}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#c0392b}
.form .legal{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--mute)}
.form .legal input{margin-top:3px;accent-color:var(--accent)}
.form .btn{justify-self:start}
.form-msg{padding:16px 18px;border-radius:12px;background:var(--paper-2);font-size:15px}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
@media (max-width:560px){.form .two-f{grid-template-columns:1fr}}

/* ---------- pie ---------- */
.ftr{background:var(--night);color:var(--on-night);padding-block:clamp(64px,8vw,112px) 32px}
.ftr-top{display:grid;grid-template-columns:4fr 8fr;gap:clamp(32px,6vw,96px)}
.ftr-top .logo{font-size:30px}
.ftr-top p{color:var(--night-mute);margin-top:16px;max-width:36ch}
.ftr-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ftr h3{font:500 12px/1 var(--mono);color:var(--night-mute);margin-bottom:16px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.ftr ul a{text-decoration:none;opacity:.9}
.ftr ul a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.ftr-bot{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;margin-top:clamp(56px,7vw,96px);padding-top:24px;border-top:1px solid var(--night-line);font-size:13px;color:var(--night-mute)}
.ftr-bot nav{display:flex;flex-wrap:wrap;gap:20px}
.ftr-bot a{text-decoration:none}
.ftr-bot a:hover{color:var(--on-night)}
@media (max-width:900px){.ftr-top{grid-template-columns:1fr}.ftr-cols{grid-template-columns:1fr 1fr;row-gap:36px}}

/* ---------- etapas en pestañas ---------- */
.tabs{display:grid;grid-template-columns:4fr 8fr;gap:clamp(32px,5vw,80px);align-items:start}
.tab-list{display:grid;border-top:1px solid var(--line)}
.tab-list button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:32px 1fr;gap:6px 10px;padding:18px 0;border-bottom:1px solid var(--line);color:var(--mute);transition:color .2s}
.tab-list button:hover{color:var(--ink)}
.tab-list .n{font:600 17px/1.3 var(--display)}
.tab-list b{font:600 17px/1.3 var(--display);letter-spacing:-.01em}
.tab-list small{grid-column:2;font-size:15px;line-height:1.45;display:none}
.tab-list button[aria-selected="true"]{color:var(--ink)}
.tab-list button[aria-selected="true"] .n{color:var(--accent)}
.tab-list button[aria-selected="true"] small{display:block;color:var(--mute)}
.tab-list button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tab-panel{display:grid;gap:28px;min-width:0;animation:pagein .4s var(--ease)}
.tab-panel .vis{min-height:clamp(240px,30vw,420px);display:grid;align-items:center;min-width:0}
.tab-panel ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.tab-panel li{padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px}
@media (max-width:900px){.tabs{grid-template-columns:1fr}.tab-list{grid-template-columns:1fr 1fr;gap:8px;border-top:0}.tab-list button{border:1px solid var(--line);border-radius:12px;padding:12px}.tab-list button[aria-selected="true"]{border-color:var(--ink)}.tab-list button[aria-selected="true"] small{display:none}}

/* ---------- sector: necesidades + oferta ---------- */
.need-offer{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.needs.n2{grid-template-columns:1fr 1fr;margin-top:32px}
.pitch-wrap{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,96px);align-items:center}
.dark .sitemap .root{background:var(--on-night);color:var(--night)}
.dark .sitemap .kids span{background:transparent;border-color:var(--night-line)}
.dark .sitemap .kids::before,.dark .sitemap .kids span::before{background:var(--night-line)}
.dark .pn a{border-color:var(--night-line)}
.dark .pn a:hover{border-color:var(--on-night)}
.dark .pn .kick{color:var(--night-mute)}
@media (max-width:900px){.need-offer,.pitch-wrap{grid-template-columns:1fr}}
@media (max-width:560px){.needs.n2{grid-template-columns:1fr}}
.tile small{color:var(--mute);font-size:14px;margin-top:-6px}

/* ---------- modelo de plantillas ---------- */
.kit{background:var(--raise);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:grid;gap:10px;box-shadow:0 30px 50px -30px rgba(0,0,0,.4);font-size:14px}
.kit .kt{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--mute)}
.kit b{font-weight:600;font-size:16px}
.kit ul{list-style:none;margin:0;padding:0;display:grid}
.kit li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.kit li span:last-child{color:var(--mute);white-space:nowrap}
.incl4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,64px)}
.incl4 article{display:grid;gap:10px;align-content:start;min-width:0}
.incl4 .vis{aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--paper-2);display:grid;align-content:center;margin-bottom:6px}
.incl4 .vis .site{border-radius:0;box-shadow:none}
.incl4 .vis .photos{gap:0}
.incl4 .vis .photos figure{aspect-ratio:1.0667;border-radius:0}
.incl4 .vis .photos figcaption{display:none}
.incl4 .pv{padding:18px;align-content:start;background:var(--raise);border:1px solid var(--line)}
.incl4 .pv p{font-size:14px;line-height:1.55;color:var(--mute)}
.incl4 .gv{padding:18px 22px;align-content:center;background:var(--raise);border:1px solid var(--line)}
.incl4 .gv ol{margin:0;padding-left:20px;display:grid;gap:8px;font-size:14px}
.incl4>article>b{font-weight:600;font-size:17px}
.incl4>article>p{color:var(--mute);font-size:15px}
@media (max-width:1000px){.incl4{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.incl4{grid-template-columns:1fr}}
.photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.photos figure{margin:0;aspect-ratio:4/3;border-radius:8px;position:relative;overflow:hidden;background:var(--paper-2) center/cover no-repeat}
.photos figcaption{position:absolute;left:8px;bottom:8px;font-size:12px;line-height:1;background:rgba(0,0,0,.55);color:#fff;padding:5px 7px;border-radius:4px}
.promptbox{background:var(--raise);color:var(--ink);border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0}
.dark .promptbox{border-color:var(--night-line)}
.promptbox .ph{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px;color:var(--mute)}
.promptbox pre{margin:0;padding:20px;white-space:pre-wrap;word-wrap:break-word;font:400 15px/1.6 var(--body);max-height:440px;overflow:auto}
.banks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.bank{display:grid;gap:12px;text-decoration:none;align-content:start}
.bank .photos{transition:transform .3s var(--ease)}
.bank:hover .photos{transform:translateY(-4px)}
.bank .pm{display:flex;justify-content:space-between;align-items:baseline}
.bank b{font-weight:600;font-size:18px}
.bank .pm span,.bank small{color:var(--mute);font-size:14px}
@media (max-width:900px){.banks{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.banks{grid-template-columns:1fr}}
.howto{list-style:none;margin:16px 0 0;padding:0;display:grid;counter-reset:h}
.howto li{counter-increment:h;display:grid;gap:4px;padding:16px 0 16px 40px;border-top:1px solid var(--line);position:relative;color:var(--mute);font-size:15px}
.howto li::before{content:counter(h);position:absolute;left:0;top:16px;font:600 17px/1.3 var(--display);color:var(--accent)}
.howto b{color:var(--ink);font-weight:600;font-size:17px}
.dupl{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:clamp(24px,4vw,48px);display:grid;place-items:center;width:100%}
.dupl-in{width:min(420px,100%);background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:22px;display:grid;gap:12px;box-shadow:0 30px 60px -30px rgba(0,0,0,.4)}
.dupl-in b{font-weight:600;font-size:17px}
.dupl-in small{color:var(--mute);font-size:14px}
.dupl-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.dupl-row span:first-child{color:var(--mute)}
.dupl-b{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.t-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.chip.new{background:var(--accent);color:var(--on-accent);border-color:var(--accent);vertical-align:middle;font-size:12px;padding:5px 9px}
.h1 .chip.new{font-size:14px;letter-spacing:0}
.meta-s{font-size:14px;color:var(--mute)}
.filters .n{color:var(--mute);margin-left:4px}
.filters button[aria-pressed="true"] .n{color:inherit;opacity:.7}
.plans.two-p{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px}
.plan .amt small{font:500 15px/1 var(--body);letter-spacing:0;opacity:.7}
@media (max-width:760px){.plans.two-p{grid-template-columns:1fr}}

/* ---------- carrusel de portadas (inicio) ---------- */
.reel{position:relative;overflow:hidden;background:var(--night);color:var(--on-night);padding-block:clamp(56px,7vw,104px);--rgap:clamp(12px,2.7vw,40px)}
.reel-rows{display:grid;gap:var(--rgap)}
.reel-row{overflow:hidden}
.reel-track{display:flex;width:max-content;animation:reel 70s linear infinite}
.reel-row.rev .reel-track{animation-direction:reverse;animation-duration:85s}
@keyframes reel{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.reel-item{flex:none;display:block;width:clamp(200px,24vw,400px);margin-right:var(--rgap)}
.reel-item .site{box-shadow:none;transition:transform .35s var(--ease),filter .35s}
.reel-item:hover .site{transform:scale(1.02)}
.reel:hover .reel-track,.reel.paused .reel-track{animation-play-state:paused}
.reel-over{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:18px;padding-inline:var(--gl) var(--gr);pointer-events:none;
}
.reel-over h2{color:#fff;font-size:clamp(28px,3vw,44px);line-height:1.05;letter-spacing:-.025em;max-width:14ch;text-shadow:0 2px 24px rgba(0,0,0,.65),0 0 2px rgba(0,0,0,.4)}
.reel-over p{color:rgba(255,255,255,.82);max-width:42ch;font-size:17px}
.reel-over .btn{pointer-events:auto;background:#fff;color:#111;border-color:#fff;margin-top:6px}
.reel-pause{position:absolute;right:calc(var(--gr) + env(safe-area-inset-right,0px));bottom:24px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.16);cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px)}
.reel-pause:hover{background:rgba(255,255,255,.28)}
.reel-pause span{width:12px;height:14px;border-left:4px solid #fff;border-right:4px solid #fff}
.reel-pause[aria-pressed="true"] span{width:0;height:0;border-left:13px solid #fff;border-right:0;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
@media (max-width:700px){.reel-item{width:58vw}}
@media (prefers-reduced-motion:reduce){.reel-track{animation:none!important}.reel-pause{display:none}}

/* ---------- filtro de estilo ---------- */
.seg-style{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;margin-top:32px;border-radius:999px;background:var(--paper-2)}
.seg-style button{border:0;background:transparent;padding:10px 16px;border-radius:999px;font:500 14px/1 var(--body);cursor:pointer;color:var(--mute);transition:background .2s,color .2s}
.seg-style button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg-style .n{opacity:.6;margin-left:4px}
.chip.anim{background:transparent;color:var(--ink);border-color:var(--ink);font-size:12px;padding:5px 9px;vertical-align:middle}
.h1 .chip.anim{font-size:14px}
.proj .pm .chip.new{color:var(--on-accent);font-size:12px}
.proj .pm .chip.anim{color:var(--ink);font-size:12px}
.proj .pm b .chip{font-weight:500;margin-left:4px}

/* ---------- toque cinematográfico de Molde ---------- */
/* 1 · titulares que entran palabra a palabra */
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .14em 0;margin:0 -.06em -.14em 0}
.wd>span{display:inline-block;animation:wordup 1s cubic-bezier(.2,.75,.15,1) both;animation-delay:calc(var(--i) * 70ms + 80ms)}
@keyframes wordup{from{transform:translateY(108%)}to{transform:none}}
/* 2 · escenario del hero en 3D */
.hero-row{perspective:1800px}
.stage{transform-origin:50% 0;transform:rotateX(var(--tx,0deg)) scale(var(--sc,1));will-change:transform}
.stage .m2,.stage .inv{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.stage .m2{transform:translate3d(var(--px1,0),var(--py1,0),0)}
.stage .inv{transform:translate3d(var(--px2,0),var(--py2,0),0)}
/* 3 · grano de película en las secciones oscuras */
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:-60px;pointer-events:none;z-index:5;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain .9s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-14px,9px)}40%{transform:translate(11px,-17px)}60%{transform:translate(-7px,16px)}80%{transform:translate(17px,5px)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.wd>span{animation:none}.stage{transform:none!important}.grain::after{animation:none}}

/* =========================================================
   PORTADA · estructura de Squarespace con medidas de referencia
   (proporciones tomadas de capturas a 2000 px de ancho)
   ========================================================= */
:root{--warm:#8c786a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--warm:#3a2f28}}
:root[data-theme="dark"]{--warm:#3a2f28}

/* cabecera oscura sobre el hero */
.hdr.on-dark{background:#0b0a09;border-bottom-color:transparent}
.hdr.on-dark .logo,.hdr.on-dark .nav>li>button,.hdr.on-dark .hdr-r .txt{color:#f2f2ef}
.hdr.on-dark .nav>li>button:hover{background:rgba(255,255,255,.1)}
.hdr.on-dark .nav>li>button[aria-expanded="true"]{background:#f2f2ef;color:#111}
.hdr.on-dark .burger{border-color:#3a3a36}
.hdr.on-dark .burger span,.hdr.on-dark .burger span::before,.hdr.on-dark .burger span::after{background:#f2f2ef}
.hdr.on-dark .burger[aria-expanded="true"] span{background:transparent}

/* 1 · hero: titular ~4,4 % del ancho, botón blanco, tres webs asomando */
.hx{position:relative;overflow:hidden;background:#110c09;color:#fff;min-height:clamp(620px,calc(100svh - var(--hdr)),980px);display:flex;flex-direction:column}
.hx-bg{position:absolute;inset:-4%;animation:mk-kb 26s ease-in-out infinite alternate;
  background:radial-gradient(ellipse 30% 42% at 20% 34%,rgba(214,150,92,.5),transparent 70%),radial-gradient(ellipse 26% 38% at 82% 26%,rgba(186,118,66,.42),transparent 70%),
  radial-gradient(ellipse 70% 38% at 50% 104%,rgba(120,58,28,.6),transparent 72%),linear-gradient(180deg,#22170f 0,#120c08 70%)}
.hx-bg i{position:absolute;border-radius:50%;filter:blur(30px);background:radial-gradient(circle,rgba(255,206,140,.75),rgba(255,170,90,0) 70%);animation:flick 5s ease-in-out infinite alternate}
.hx-bg .l1{left:14%;top:20%;width:12vw;height:12vw}
.hx-bg .l2{right:12%;top:12%;width:9vw;height:9vw;animation-delay:-2s}
.hx-bg .l3{left:44%;top:52%;width:18vw;height:8vw;opacity:.35;animation-delay:-3.5s}
@keyframes flick{from{opacity:.65;transform:scale(1)}to{opacity:1;transform:scale(1.08)}}
.hx::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 35%,rgba(0,0,0,.55) 100%);z-index:1;pointer-events:none}
.hx-in{position:relative;z-index:2;text-align:center;display:grid;justify-items:center;padding:clamp(72px,9vh,124px) var(--gr) 0 var(--gl)}
.hx-h{font-size:clamp(38px,4.4vw,72px);line-height:1.02;letter-spacing:-.045em;font-weight:500;max-width:19ch;color:#fff}
.hx-h em{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.02em}
.hx-btn{margin-top:clamp(28px,3vw,44px);background:#fff;color:#111;font:500 clamp(15px,1vw,17px)/1 var(--body);padding:clamp(18px,1.4vw,22px) clamp(36px,3.2vw,52px);border-radius:3px;text-decoration:none;transition:transform .2s var(--ease),background .2s}
.hx-btn:hover{transform:translateY(-2px);background:#f1ece6}
.hx-sub{margin-top:clamp(16px,1.6vw,24px);font-size:clamp(15px,1.05vw,17px);color:rgba(255,255,255,.9)}
.hx-mocks{position:relative;z-index:2;margin-top:auto;height:clamp(230px,30vw,470px);perspective:1600px;transform-origin:50% 100%;transform:rotateX(var(--tx,0deg)) scale(var(--sc,1))}
.hx-m{position:absolute;top:clamp(40px,5.5vw,90px)}
.hx-m .site{box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.hx-m.c{left:50%;width:44.5%;margin-left:-22.25%;z-index:2}
.hx-m.l{left:-5%;width:37%;top:clamp(56px,7vw,110px);transform:rotateY(16deg);transform-origin:100% 50%}
.hx-m.r{right:-5%;width:37%;top:clamp(56px,7vw,110px);transform:rotateY(-16deg);transform-origin:0 50%}
@media (max-width:760px){.hx-m.c{width:84%;margin-left:-42%}.hx-m.l,.hx-m.r{display:none}.hx-mocks{height:62vw}}

/* 2 · pestañas + tarjeta grande (62 % del ancho) */
.sx{padding-block:clamp(72px,8vw,128px) clamp(64px,7vw,112px);overflow:hidden}
.sx-head{text-align:center;display:grid;justify-items:center}
.sx-h{font-size:clamp(30px,3vw,48px);line-height:1.08;letter-spacing:-.035em;font-weight:500}
.sx-sub{margin-top:clamp(14px,1.4vw,22px);font-size:clamp(15px,1.1vw,18px)}
.sx-tabs{margin-top:clamp(32px,3.6vw,56px);display:flex;gap:4px;overflow-x:auto;max-width:100%;scrollbar-width:none}
.sx-tabs::-webkit-scrollbar{display:none}
.sx-tabs button{border:0;background:transparent;padding:clamp(11px,1vw,15px) clamp(14px,1.2vw,20px);border-radius:999px;font:400 clamp(15px,1.1vw,18px)/1 var(--body);color:var(--ink);cursor:pointer;white-space:nowrap;transition:background .2s}
.sx-tabs button:hover{background:var(--paper-2)}
.sx-tabs button[aria-selected="true"]{background:var(--paper-2)}
.sx-view{margin-top:clamp(28px,3.3vw,56px)}
.sx-track{display:flex;gap:2.7vw;transition:transform .8s cubic-bezier(.2,.7,.2,1);will-change:transform}
.sx-card{flex:none;width:min(62vw,1240px);aspect-ratio:16/10;border-radius:8px;overflow:hidden;position:relative;background:var(--bg);color:#fff;cursor:pointer}
.sx-card.on{cursor:default}
.sx-txt{position:absolute;left:3.6%;top:8%;max-width:46%;z-index:2}
.sx-txt h3{font:400 clamp(24px,1.9vw,36px)/1.1 var(--serif);letter-spacing:-.01em}
.sx-txt p{margin-top:14px;font-size:clamp(14px,1.1vw,18px);line-height:1.45;opacity:.92}
.sx-go{position:absolute;right:3.6%;top:8.4%;z-index:2;color:#fff;font-size:clamp(13px,.95vw,15px);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:2px}
.sx-mock{position:absolute;left:23%;width:54%;bottom:-3%}
.sx-mock .site{aspect-ratio:16/12;border-radius:8px 8px 0 0;box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.sx-fl{position:absolute;z-index:3;background:#fff;color:#111;border-radius:6px;padding:14px 16px;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);display:grid;gap:6px;min-width:clamp(150px,13vw,210px);transition:transform .6s var(--ease)}
.sx-fl small{color:#777;font-size:11px}
.sx-fl b{font:400 clamp(17px,1.4vw,24px)/1.1 var(--serif)}
.sx-fl.a{left:11%;top:50%}
.sx-fl.a i{display:block;height:28px;border-radius:3px;background:#1d1d1b;margin-top:4px}
.sx-fl.b{right:9%;bottom:12%}
.sx-sw{display:flex;gap:4px;margin-top:4px}
.sx-sw span{width:26px;height:20px;border-radius:2px}
.sx-card:not(.on) .sx-fl{transform:translateY(12px)}
@media (max-width:760px){.sx-card{width:86vw;aspect-ratio:4/5}.sx-txt{max-width:88%}.sx-go{top:auto;bottom:4%;right:auto;left:3.6%}.sx-mock{left:6%;width:88%;bottom:14%}.sx-fl{display:none}}

/* 3 · todo lo que necesitas: 4 tarjetas visibles (21,6 % del ancho) */
.fx{padding-block:clamp(64px,7vw,120px);overflow:hidden}
.fx-head{display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:start}
.fx-head h2{font-size:clamp(30px,3vw,48px);line-height:1.08;letter-spacing:-.035em;font-weight:500;max-width:15ch}
.fx-head p{font-size:clamp(15px,1.05vw,18px);line-height:1.5;max-width:46ch}
.fx-view{margin-top:clamp(48px,5.5vw,104px)}
.fx-track{display:flex;gap:2.7vw;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.fx-card{flex:none;width:calc((100% - 3 * 2.7vw) / 4);aspect-ratio:432/586;border-radius:6px;overflow:hidden;position:relative;background:var(--bg);color:#fff;text-decoration:none;display:flex;flex-direction:column;padding:clamp(18px,2.2vw,32px);transition:transform .35s var(--ease),box-shadow .35s}
.fx-card:hover{transform:translateY(-6px);box-shadow:0 30px 50px -24px rgba(0,0,0,.5)}
.fx-card h3{font:500 clamp(18px,1.45vw,25px)/1.15 var(--display);letter-spacing:-.015em}
.fx-card p{margin-top:10px;font-size:clamp(13px,.95vw,16px);line-height:1.45;opacity:.9}
.fx-vis{flex:1;display:grid;place-items:center;position:relative;min-height:0;margin-block:12px}
.fx-arr{align-self:flex-end;font-size:22px;transition:transform .2s var(--ease)}
.fx-card:hover .fx-arr{transform:translateX(4px)}
.fv-stack{position:relative;width:88%;height:70%}
.fv-stack>div{position:absolute;width:78%}
.fv-stack>div:first-child{left:0;top:6%;transform:rotate(-5deg)}
.fv-stack>div:last-child{right:0;bottom:6%;transform:rotate(4deg)}
.fv-one{width:100%}
.fv-prompt{width:92%;background:#fff;color:#111;border-radius:6px;padding:14px;display:grid;gap:8px;font-size:13px;line-height:1.45}
.fv-prompt small{color:#888;font-size:11px}
.fv-prompt i{display:inline-block;width:2px;height:1em;background:#111;vertical-align:middle;margin-left:2px;animation:mk-blink 1s steps(2) infinite}
.fv-prompt span{justify-self:end;background:#111;color:#fff;border-radius:999px;padding:6px 12px;font-size:12px}
.fv-photos{width:100%}
.fv-photos .photos{gap:4px}
.fv-photos figcaption{display:none}
.fv-dup{width:86%;background:#fff;color:#111;border-radius:8px;padding:16px;display:grid;gap:8px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.fv-dup b{font-size:15px}.fv-dup small{color:#777;font-size:12px}
.fv-dup span{justify-self:start;background:var(--accent);color:var(--on-accent);border-radius:4px;padding:8px 14px;font-size:13px;font-weight:500}
.fv-dom{width:92%;display:grid;gap:8px}
.fv-dom span{display:flex;justify-content:space-between;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.1);font-size:13px}
.fv-dom span.on{background:#fff;color:#111}
.fv-dom b{font-weight:500;opacity:.6}
.fx-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:clamp(28px,3vw,48px)}
.fx-dots{grid-column:2;display:flex;gap:6px;align-items:center}
.fx-dots i{width:6px;height:6px;border-radius:999px;background:var(--line);transition:width .3s,background .3s}
.fx-dots i.on{width:28px;background:var(--mute)}
.fx-arrows{grid-column:3;justify-self:end;display:flex;gap:10px}
.fx-arrows button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:400 22px/1 var(--display);cursor:pointer}
.fx-arrows button:disabled{opacity:.35;cursor:default}
@media (max-width:900px){.fx-head{grid-template-columns:1fr}.fx-card{width:72vw}}

/* 4 · empezar con IA: dos tarjetas negras (30 % del ancho cada una) */
.ax{padding-block:clamp(56px,5vw,96px) clamp(72px,8vw,140px);background:linear-gradient(180deg,var(--paper) 0,var(--paper) 18%,var(--warm) 100%)}
.ax-head{text-align:center;display:grid;justify-items:center}
.ax-head h2{font-size:clamp(30px,3vw,48px);line-height:1.08;letter-spacing:-.035em;font-weight:500;max-width:20ch}
.ax-head p{margin-top:clamp(20px,2.4vw,40px);font-size:clamp(15px,1.05vw,18px)}
.ax-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.7vw;width:min(100%,max(62vw,860px));margin:clamp(40px,5.5vw,96px) auto 0}
.ax-card{background:#000;color:#fff;border-radius:6px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.ax-vis{aspect-ratio:594/440;position:relative;overflow:hidden}
.ax-vis::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,#000);pointer-events:none}
.ax-kit .k1{position:absolute;left:16%;right:14%;top:2%}
.ax-kit .k2{position:absolute;left:16%;right:14%;top:44%;opacity:.65}
.ax-badge{position:absolute;left:3%;top:3%;z-index:2;background:var(--accent);color:var(--on-accent);font:600 13px/1.1 var(--body);padding:10px 12px;border-radius:4px;text-align:center}
.ax-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0;align-content:start}
.ax-grid .site{border-radius:2px;box-shadow:none}
.ax-txt{display:grid;gap:clamp(10px,1.2vw,18px);justify-items:center;text-align:center;padding:clamp(20px,2.2vw,32px) clamp(20px,3vw,48px) clamp(28px,3vw,48px)}
.ax-txt span{font-size:clamp(13px,.95vw,16px)}
.ax-txt p{color:#9c9c96;font-size:clamp(15px,1.1vw,19px);line-height:1.45;max-width:36ch}
.ax-txt a{color:#fff;text-decoration:none;font:500 clamp(18px,1.45vw,26px)/1.2 var(--display);letter-spacing:-.015em}
.ax-txt a:hover{text-decoration:underline;text-underline-offset:6px}
@media (max-width:760px){.ax-cards{grid-template-columns:1fr}}

/* 5 · hecho en Molde: paredes de webs en un cilindro 3D */
.rx{position:relative;overflow:hidden;background:#000;color:#fff;height:clamp(560px,56vw,880px);--tw:clamp(170px,19vw,330px);--R:calc(var(--tw) * 2.25)}
.rx-stage{position:absolute;inset:0;perspective:760px;perspective-origin:50% 50%}
.ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;animation:ringspin 120s linear infinite}
.ring.rev{animation-direction:reverse;animation-duration:150s}
.ring:nth-child(1){top:20%}
.ring:nth-child(3){top:80%}
.ring:has(.rt:hover){animation-play-state:paused}
@keyframes ringspin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
.rt{position:absolute;width:var(--tw);left:calc(var(--tw) / -2);top:calc(var(--tw) * -.3125);transform:rotateY(var(--a)) translateZ(calc(var(--R) * -1));backface-visibility:hidden;display:block}
.rt .site{box-shadow:none;border-radius:4px;filter:brightness(.62);transition:filter .3s}
.rt:hover .site{filter:none}
.rx-h{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;text-align:center;pointer-events:none;font:500 clamp(30px,3vw,48px)/1.05 var(--display);letter-spacing:-.035em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.8)}
.rx-h em{font-family:var(--serif);font-style:italic}
.rx-pill{position:absolute;z-index:4;pointer-events:none;background:#fff;color:#111;border-radius:999px;padding:12px 20px;font:500 16px/1 var(--body);white-space:nowrap;transform:translate(-50%,-140%)}
@media (prefers-reduced-motion:reduce){.ring,.hx-bg,.hx-bg i{animation:none}}

/* hero con foto real y título con el logotipo */
.hx-bg{background:linear-gradient(180deg,rgba(14,9,6,.55),rgba(14,9,6,.35) 45%,rgba(14,9,6,.85)),url(../img/px-4009011.jpg) center 35%/cover!important}
.hx-bg i{display:none}
.rx-logo{display:inline-flex;align-items:baseline;font:700 1.3em/1 var(--display);letter-spacing:-.06em}
.rx-logo i{display:inline-block;width:.3em;height:.3em;background:var(--accent);margin-left:.05em;border-radius:1px}

/* ---------- portada 2 rehecha: foto a sangre + web flotante + interfaz ---------- */
.sx-card{aspect-ratio:1.45;background:#111 center/cover no-repeat}
.sx-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,8,7,.72) 0,rgba(10,8,7,.35) 45%,rgba(10,8,7,.12) 100%),linear-gradient(180deg,rgba(10,8,7,.35),transparent 35%)}
.sx-txt{left:3.6%;top:9%;max-width:36%}
.sx-txt h3{font:400 clamp(24px,2.2vw,40px)/1.08 var(--serif);letter-spacing:-.015em}
.sx-txt p{margin-top:clamp(10px,1vw,16px);font-size:clamp(14px,1.1vw,19px);line-height:1.4;opacity:.95}
.sx-go,.sx-fl{display:none}
.sx-mock{position:absolute;z-index:2;left:23.5%;width:53%;top:39%;bottom:auto;display:block;transition:transform .5s var(--ease)}
.sx-mock .site{aspect-ratio:16/12;border-radius:10px;box-shadow:0 50px 90px -30px rgba(0,0,0,.75)}
.sx-card.on .sx-mock:hover{transform:translateY(-6px)}
.sx-pill{position:absolute;z-index:3;left:20.3%;top:60%;background:#fff;color:#111;border-radius:999px;padding:clamp(9px,.75vw,13px) clamp(14px,1.2vw,20px);font:500 clamp(11px,.8vw,14px)/1 var(--body);box-shadow:0 14px 30px -12px rgba(0,0,0,.55)}
.sx-list{position:absolute;z-index:3;right:13.4%;top:69%;display:grid;gap:clamp(4px,.4vw,8px);width:clamp(170px,16.4vw,300px)}
.sx-row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(8px,.7vw,12px);align-items:center;background:#fff;color:#111;border-radius:6px;padding:clamp(6px,.5vw,9px);box-shadow:0 14px 30px -12px rgba(0,0,0,.55)}
.sx-row i{width:clamp(28px,2.3vw,40px);aspect-ratio:1;border-radius:3px;background:#ddd center/cover}
.sx-row b{display:block;font:500 clamp(11px,.75vw,13px)/1.2 var(--body)}
.sx-row small{display:block;font-size:clamp(10px,.68vw,12px);color:#777;margin-top:2px}
.sx-row em{width:clamp(14px,1.1vw,19px);aspect-ratio:1;border-radius:50%;border:1.5px solid #222;position:relative}
.sx-row em.ok::after{content:"";position:absolute;left:30%;top:22%;width:28%;height:44%;border-right:1.5px solid #222;border-bottom:1.5px solid #222;transform:rotate(45deg)}
.sx-row em.spin{border-style:dashed;border-color:#555;animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sx-row.dim{background:rgba(222,196,200,.88);color:rgba(17,17,17,.62)}
.sx-row.dim small{color:rgba(17,17,17,.5)}
.sx-pill,.sx-list{transition:opacity .5s .35s,transform .6s .35s cubic-bezier(.2,.7,.2,1)}
.sx-card:not(.on) .sx-pill,.sx-card:not(.on) .sx-list{opacity:0;transform:translateY(14px)}
@media (max-width:760px){.sx-card{aspect-ratio:4/5}.sx-txt{max-width:86%}.sx-mock{left:7%;width:86%;top:44%}.sx-pill,.sx-list{display:none}}

/* ---------- hero rotatorio ---------- */
.hx-photos{position:absolute;inset:0;z-index:0;overflow:hidden}
.hx-photo{position:absolute;inset:0;background:center 35%/cover no-repeat;opacity:0;transition:opacity 1.4s ease}
.hx-photo.on{opacity:1;animation:hxkb 7s ease-out both}
@keyframes hxkb{from{transform:scale(1.1)}to{transform:scale(1)}}
.hx-bg{z-index:1;inset:0!important;animation:none!important;background:linear-gradient(180deg,rgba(12,8,6,.62),rgba(12,8,6,.38) 40%,rgba(12,8,6,.9))!important}
.hx-now{margin-top:clamp(18px,2vw,30px);display:grid;justify-items:center;gap:10px}
.hx-name{font-size:14px;color:rgba(255,255,255,.85)}
.hx-name.in{animation:pagein .6s var(--ease)}
.hx-bars{display:flex;gap:6px}
.hx-bars button{position:relative;width:clamp(22px,2.4vw,38px);height:16px;border:0;padding:0;background:none;cursor:pointer}
.hx-bars button::before,.hx-bars button::after{content:"";position:absolute;left:0;right:0;top:6px;height:3px;border-radius:2px;background:rgba(255,255,255,.3)}
.hx-bars button::after{background:#fff;transform:scaleX(0);transform-origin:0 50%}
.hx-bars button.done::after{transform:scaleX(1)}
.hx-bars button.on::after{animation:fillbar 5s linear forwards}
@keyframes fillbar{to{transform:scaleX(1)}}
.hx-m{position:absolute;display:block;left:50%!important;right:auto!important;width:44.5%!important;margin-left:0!important;top:clamp(40px,5.5vw,90px)!important;transform-origin:50% 30%;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity .9s ease,filter .9s ease;will-change:transform}
.hx-m[data-pos="c"]{transform:translateX(-50%);z-index:3}
.hx-m[data-pos="l"]{transform:translateX(-132%) translateY(6%) scale(.83) rotateY(16deg);z-index:2;filter:brightness(.75);cursor:pointer}
.hx-m[data-pos="r"]{transform:translateX(32%) translateY(6%) scale(.83) rotateY(-16deg);z-index:2;filter:brightness(.75);cursor:pointer}
.hx-m[data-pos="hl"]{transform:translateX(-215%) translateY(12%) scale(.7) rotateY(24deg);opacity:0;z-index:1;pointer-events:none}
.hx-m[data-pos="hr"]{transform:translateX(115%) translateY(12%) scale(.7) rotateY(-24deg);opacity:0;z-index:1;pointer-events:none}
.hx-m[data-pos="hh"]{transform:translateX(-50%) translateY(35%) scale(.6);opacity:0;z-index:0;pointer-events:none}
.hx-m[data-pos="l"]:hover,.hx-m[data-pos="r"]:hover{filter:brightness(.95)}
@media (max-width:760px){.hx-m{width:84%!important}.hx-m[data-pos="l"],.hx-m[data-pos="r"]{opacity:0;pointer-events:none}}
@media (prefers-reduced-motion:reduce){.hx-photo.on{animation:none}.hx-bars button.on::after{animation:none;transform:scaleX(1)}}
.sx-view,.fx-view{touch-action:pan-y;user-select:none}
.fx-view{cursor:grab}
.fx-view.dragging{cursor:grabbing}
.fx-view.dragging .fx-card{pointer-events:none}
.sx-view.dragging{cursor:grabbing}
.sx-view.dragging .sx-card{pointer-events:none}

/* ---------- correcciones de la auditoría ---------- */
/* titulares: si la animación no llega a ejecutarse, el texto se muestra igualmente */
.wd-done .wd>span{animation:none!important;transform:none!important}
/* rendimiento: las webs del cilindro no animan por dentro y las secciones fuera de pantalla se pausan */
.rt .site *{animation:none!important}
.zz-off .site *,.zz-off .ring,.zz-off .hx-photo{animation-play-state:paused!important}
.fx,.ax,.rx{content-visibility:auto;contain-intrinsic-size:auto 900px}
/* control de pausa del hero (accesibilidad: todo lo que se mueve solo se puede parar) */
.hx-ctrl{display:flex;align-items:center;gap:10px}
.hx-pause{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;cursor:pointer;display:grid;place-items:center;padding:0}
.hx-pause span{width:8px;height:9px;border-left:2.5px solid #fff;border-right:2.5px solid #fff}
.hx-pause[aria-pressed="true"] span{width:0;height:0;border-left:8px solid #fff;border-right:0;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.hx.paused .hx-bars button.on::after{animation-play-state:paused}

/* ---------- iniciar sesión ---------- */
.login{min-height:calc(100svh - var(--hdr));display:grid}
.login-in{display:grid;grid-template-columns:5fr 7fr;min-height:100%}
.login-form{padding:clamp(40px,6vw,96px) clamp(24px,5vw,88px);padding-left:max(clamp(24px,5vw,88px),env(safe-area-inset-left,0px));max-width:620px;width:100%;justify-self:end;display:grid;align-content:center}
.login-form .logo{font-size:28px}
.login-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px}
.login-row .legal{margin:0}
.login-side{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(12,8,6,.35),rgba(12,8,6,.75)),url(../img/px-4009011.jpg) center/cover;display:grid;align-content:center;justify-items:center;gap:28px;padding:clamp(32px,5vw,80px)}
.login-mock{width:min(78%,640px);transform:perspective(1400px) rotateY(-10deg) rotateX(4deg);box-shadow:0 60px 100px -40px rgba(0,0,0,.8)}
.login-side p{color:#fff;font:400 clamp(20px,1.8vw,28px)/1.3 var(--serif);text-align:center;max-width:22ch}
@media (max-width:900px){.login-in{grid-template-columns:1fr}.login-side{display:none}.login-form{justify-self:center}}

/* ---------- páginas limpias (acceso y cuestionario) ---------- */
body.bare .hdr,body.bare .ftr,body.bare .mnav,body.bare .skip{display:none!important}
body.bare main{animation:none}

/* acceso, inspirado en el de Squarespace */
.auth{min-height:100svh;display:grid;grid-template-rows:auto 1fr;background:var(--paper)}
.auth-top{display:flex;justify-content:space-between;align-items:center;padding:28px var(--gr) 0 var(--gl);font:500 15px/1 var(--body)}
.auth-top a{text-decoration:none}
.auth-top a:hover{text-decoration:underline;text-underline-offset:4px}
.auth-main{display:grid;justify-items:center;align-content:center;padding:40px var(--gr) 72px var(--gl);text-align:center}
.auth-logo{font-size:30px;justify-self:center}
.auth-h{margin-top:28px;font:600 clamp(24px,2.2vw,32px)/1.15 var(--display);letter-spacing:-.025em}
.auth-sub{margin-top:10px;color:var(--mute)}
.auth-sub b{color:var(--ink)}
.auth-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(24px,4vw,72px);width:min(100%,1060px);margin-top:clamp(36px,4vw,56px);align-items:center;text-align:left}
.auth-form{display:grid;gap:26px}
.auth-f{display:grid;gap:8px}
.auth-f label{font-size:13px;color:var(--mute)}
.auth-f input{width:100%;border:0;border-bottom:1.5px solid var(--line);background:transparent;color:var(--ink);font:400 17px/1.4 var(--body);padding:10px 0;border-radius:0}
.auth-f input:focus{outline:none;border-bottom-color:var(--ink)}
.auth-pw{display:flex;align-items:center;gap:8px;border-bottom:1.5px solid var(--line)}
.auth-pw:focus-within{border-bottom-color:var(--ink)}
.auth-pw input{border-bottom:0}
.auth-eye{border:0;background:none;color:var(--ink);cursor:pointer;width:32px;height:32px;padding:4px}
.auth-eye svg{width:22px;height:22px}
.auth-submit{height:58px;border:0;background:var(--ink);color:var(--paper);font:500 15px/1 var(--body);cursor:pointer;border-radius:2px}
.auth-submit:disabled{background:var(--paper-2);color:var(--mute);cursor:default}
.auth-or{align-self:stretch;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;gap:10px;color:var(--mute);font-size:14px}
.auth-or::before,.auth-or::after{content:"";width:1px;background:var(--line)}
.auth-social{display:grid;gap:14px}
.auth-sso{display:grid;grid-template-columns:24px 1fr 24px;align-items:center;height:62px;padding:0 22px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);font:500 16px/1 var(--body);cursor:pointer;border-radius:2px;transition:background .15s}
.auth-sso:hover{background:var(--paper-2)}
.auth-sso svg{width:22px;height:22px}
.auth-msg{margin-top:28px;max-width:560px}
.auth-help,.auth-legal{margin-top:40px;font-size:14px;font-weight:500}
.auth-legal{color:var(--mute);font-weight:400}
@media (max-width:820px){.auth-grid{grid-template-columns:1fr}.auth-or{grid-template-columns:1fr auto 1fr;grid-template-rows:none;align-items:center}.auth-or::before,.auth-or::after{width:auto;height:1px}}

/* cuestionario de Empezar, inspirado en el de Squarespace */
.qz{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,24.3vw,520px);background:var(--paper)}
.qz-main{display:grid;grid-template-rows:auto 1fr auto;min-width:0}
.qz-top{padding:28px var(--gr) 0 var(--gl)}
.qz-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(32px,6vw,110px);align-items:start;padding:clamp(56px,11vh,150px) var(--gr) 48px var(--gl)}
.qz-q h1{font:500 clamp(26px,2.2vw,36px)/1.15 var(--display);letter-spacing:-.03em}
.qz-q p{margin-top:12px;color:var(--mute);max-width:36ch}
.qz-prog{display:flex;margin-top:44px;width:120px}
.qz-prog i{flex:1;height:2px;background:var(--line)}
.qz-prog i.on{background:var(--ink)}
.qz-search{display:flex;align-items:center;gap:14px;background:var(--paper-2);padding:0 22px;border-bottom:1.5px solid var(--ink)}
.qz-search svg{width:22px;height:22px;flex:none;color:var(--ink)}
.qz-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:400 18px/1 var(--body);padding:24px 0}
.qz-search input:focus{outline:none}
.qz-list{background:var(--raise);box-shadow:0 20px 40px -24px rgba(0,0,0,.35);padding:18px 26px 22px;display:grid;max-height:440px;overflow:auto}
.qz-lt{font-size:14px;font-weight:500;color:var(--mute);margin-bottom:8px}
.qz-list button{all:unset;cursor:pointer;padding:10px 0;font:400 19px/1.3 var(--body);color:var(--mute);transition:color .15s}
.qz-list button:hover,.qz-list button:focus-visible,.qz-list button[aria-selected="true"]{color:var(--ink)}
.qz-list button[aria-selected="true"]::after{content:"  ✓"}
.qz-none{color:var(--mute);padding:8px 0}
.qz-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.qz-opt{display:grid;gap:8px;text-align:left;padding:12px;border:1.5px solid var(--line);background:var(--raise);color:var(--ink);cursor:pointer;border-radius:6px;align-content:start}
.qz-opt[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.qz-opt b{font-weight:600;font-size:16px;margin-top:4px}
.qz-opt small{color:var(--mute);font-size:14px;line-height:1.4}
.qz-opt .site{box-shadow:none}
.qz-all{aspect-ratio:16/10;display:grid;place-items:center;background:var(--paper-2);border-radius:10px;font-weight:500}
.qz-res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
.qz-t{display:grid;gap:10px}
.qz-t>a:first-child .site{transition:transform .25s var(--ease)}
.qz-t>a:first-child:hover .site{transform:translateY(-3px)}
.qz-tm{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.qz-tm span{color:var(--mute)}
.qz-pers{justify-self:start;font:500 14px/1 var(--body);padding:10px 16px;border:1.5px solid var(--ink);text-decoration:none;border-radius:2px}
.qz-pers:hover{background:var(--ink);color:var(--paper)}
.qz-foot{display:flex;justify-content:flex-end;gap:12px;align-items:center;border-top:1px solid var(--line);padding:16px var(--gr) 16px var(--gl);position:sticky;bottom:0;background:var(--paper)}
.qz-back{border:0;background:none;color:var(--ink);font:500 15px var(--body);cursor:pointer;padding:12px 18px}
.qz-next{border:0;background:var(--ink);color:var(--paper);font:500 16px/1 var(--body);padding:22px 30px;cursor:pointer;border-radius:2px}
.qz-next:disabled{background:var(--paper-2);color:var(--mute);cursor:default}
.qz-side{position:relative;background:#222 center/cover no-repeat;transition:background-image .6s}
.qz-look{position:absolute;top:30px;right:max(30px,env(safe-area-inset-right,0px));color:#fff;text-decoration:none;font:500 15px/1 var(--body);text-shadow:0 1px 10px rgba(0,0,0,.5)}
.qz-look:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:1000px){.qz{grid-template-columns:1fr}.qz-side{display:none}.qz-body{grid-template-columns:1fr}.qz-opts{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.qz-opts,.qz-res{grid-template-columns:1fr}}

/* ---------- catálogo grande ---------- */
.cat-search{display:flex;align-items:center;gap:12px;margin-top:28px;max-width:640px;background:var(--paper-2);border-bottom:1.5px solid var(--ink);padding:0 18px}
.cat-search svg{width:20px;height:20px;flex:none}
.cat-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:400 17px/1 var(--body);padding:18px 0}
.cat-search input:focus{outline:none}
.cat-count{color:var(--mute);font-size:15px;margin-bottom:20px}
.cat-more{display:flex;justify-content:center;margin-top:48px}

/* ---------- personalizador ---------- */
.cz{padding-block:0 clamp(56px,6vw,96px)}
.cz-in{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(24px,3vw,48px);align-items:start}
.cz-pv{position:sticky;top:calc(var(--hdr) + 20px);min-width:0}
.cz-pv .site{box-shadow:0 40px 80px -40px rgba(0,0,0,.5)}
.cz-panel{display:grid;gap:22px;background:var(--raise);border:1px solid var(--line);border-radius:14px;padding:20px;max-height:calc(100vh - var(--hdr) - 40px);overflow:auto;position:sticky;top:calc(var(--hdr) + 20px)}
.cz-l{display:block;font-size:13px;font-weight:600;margin-bottom:10px}
.cz-o{display:flex;flex-wrap:wrap;gap:6px}
.cz-o button{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px;padding:8px 10px;font:500 13px/1.1 var(--body);cursor:pointer;transition:border-color .15s}
.cz-o button:hover{border-color:var(--mute)}
.cz-o button[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.cz-font{display:grid;grid-template-columns:repeat(3,1fr)}
.cz-font button{display:grid;gap:4px;justify-items:center;padding:10px 6px}
.cz-font b{font-size:24px;line-height:1}
.cz-font small{font-size:11px;color:var(--mute)}
.cz-pal{display:grid;grid-template-columns:repeat(6,1fr)}
.cz-pal button{display:flex;padding:4px;gap:0;height:34px}
.cz-pal i{flex:1;height:100%}
.cz-pal i:first-child{border-radius:4px 0 0 4px}.cz-pal i:last-child{border-radius:0 4px 4px 0}
.cz-pic{display:grid;grid-template-columns:repeat(3,1fr)}
.cz-pic button{padding:3px;aspect-ratio:4/3}
.cz-pic i{display:block;width:100%;height:100%;border-radius:5px;background:center/cover}
.cz-sw{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:500}
.cz-sw input{width:18px;height:18px;accent-color:var(--accent)}
.cz-f{display:grid;gap:6px;margin-bottom:10px}
.cz-f label{font-size:12px;color:var(--mute)}
.cz-f input{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px;padding:10px 12px;font:400 15px var(--body)}
.cz-act{display:flex;gap:8px;flex-wrap:wrap;position:sticky;bottom:-20px;background:var(--raise);padding:12px 0 4px;margin-bottom:-4px}
@media (max-width:1000px){.cz-in{grid-template-columns:1fr}.cz-pv,.cz-panel{position:static;max-height:none}}

/* ---------- selector mensual / anual ---------- */
.bill{display:inline-flex;gap:4px;padding:4px;margin-top:36px;border-radius:999px;background:var(--paper-2)}
.bill button{border:0;background:transparent;padding:11px 18px;border-radius:999px;font:500 15px/1 var(--body);color:var(--mute);cursor:pointer}
.bill button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.bill span{margin-left:4px;color:var(--accent);font-weight:600}
.bill button[aria-pressed="true"] span{color:inherit;opacity:.8}
.plans.two-p{margin-top:28px}
.plan .save{display:inline-block;justify-self:start;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600}

/* página legal y 404 */
.prose{max-width:68ch;display:grid;gap:18px;font-size:17px}
.prose h2{font-size:21px;margin-top:20px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* Portada: vídeo de fondo por plantilla */
.hx-photo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.hx-photo video.ready{opacity:1}