/* Imagine AI — sistema v3. Papel y tinta + los efectos del template Creative Studio.
   Un solo acento funcional (azul). Los cuatro colores de marca son artwork, no UI. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root{
--paper:#ffffff;--paper-2:#f7f7f8;--paper-3:#efeff1;--white:#ffffff;
--ink:#1a1a1a;--ink-soft:#52565e;--ink-mute:#63676e;
--blue:#2b4b8c;--blue-deep:#1e3768;--blue-light:#9cb8e8;
--art-orange:#ff6b35;--art-pink:#ff1f8f;--art-purple:#7b2cbf;--art-blue:#3a86ff;
--art-grad:linear-gradient(120deg,var(--art-orange),var(--art-pink),var(--art-purple),var(--art-blue));
--art-grad-text:linear-gradient(94deg,var(--art-pink),var(--art-purple) 62%,var(--blue));
/* Degradé del logo: canon en branding/ds-v3/tokens.css (--logo-grad / --logo-grad-light).
   Alineado 2026-09-18 para que el wordmark del sitio coincida con el favicon y los PNG. */
--logo-grad:linear-gradient(96deg,#c62a95,#5b3bb0);
--logo-grad-light:linear-gradient(96deg,#e56bb0,#93b2e2);
--rule:rgba(26,26,26,.09);--rule-strong:rgba(26,26,26,.2);--rule-dark:rgba(255,255,255,.14);
--on-ink:#f7f7f8;--on-ink-soft:rgba(247,247,248,.72);--on-ink-mute:rgba(247,247,248,.56);
--success:#3f6f3a;--danger:#a33528;--warn:#b0721c;
--font-title:'Bricolage Grotesque',Georgia,serif;--font-body:'Manrope',system-ui,sans-serif;--font-mono:'JetBrains Mono',ui-monospace,monospace;
--r-xs:3px;--r-sm:4px;--r-md:8px;--r-lg:20px;--r-pill:999px;
--ease:cubic-bezier(.16,1,.3,1);--dur:.45s;
--gutter:clamp(20px,5vw,48px);--maxw:1320px;--maxw-text:1080px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.62;letter-spacing:-.005em;text-wrap:pretty;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(255,31,143,.16);color:var(--ink)}
a{color:var(--blue);text-decoration:none;transition:color .25s}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--font-title);letter-spacing:-.03em;line-height:1.04;font-weight:500}
h3,h4{font-weight:400;line-height:1.14}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
::-webkit-scrollbar{width:0;background:transparent}

/* --- retícula --- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-t{max-width:var(--maxw-text);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:clamp(72px,10vw,140px) 0;position:relative}
.sec-alt{background:var(--paper-2)}
.sec-line{border-top:1px solid var(--rule)}
.sec-head{display:grid;gap:20px;margin-bottom:clamp(40px,5vw,64px)}
@media(min-width:820px){.sec-head{grid-template-columns:minmax(0,1.95fr) minmax(0,1fr);gap:56px;align-items:end}}
.sec-head h2{font-size:clamp(30px,3.7vw,54px)}
.sec-head>p{color:var(--ink-soft);font-size:15.5px;max-width:40ch}
.sec-head .lab{display:inline-block;margin-bottom:18px;color:var(--ink-mute)}
.sec-head .lab b{font-weight:500;color:var(--ink-soft)}
.close .lab{display:inline-block;margin-bottom:18px;color:var(--ink-mute)}
.close .lab b{font-weight:500;color:var(--ink-soft)}
.tools .lab b{font-weight:500;color:var(--ink-soft)}

/* --- tipografía utilitaria --- */
.lab{font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.lab b{font-weight:500;color:var(--blue)}
.mono{font-family:var(--font-mono);font-size:12px;color:var(--ink-mute)}
.em{font-weight:500;color:var(--blue)}
/* a escala display el énfasis va en gradiente, igual que el hero */
h1 .em,h2 .em{font-weight:500;background:linear-gradient(94deg,#f0187f,var(--art-purple) 46%,var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.dark h1 .em,.dark h2 .em,#estudio h2 .em{background:linear-gradient(94deg,var(--art-pink),var(--blue-light) 78%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.grad{background:var(--art-grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* sobre el aura: arranca en violeta, no en rosa, para no perder contraste */
.grad-deep{background:linear-gradient(94deg,var(--art-purple),var(--blue) 72%,var(--blue-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* --- efecto 01: grilla fija sobre todo el documento --- */
.fx-grid{position:fixed;inset:0;z-index:50;pointer-events:none;background-size:6rem 6rem;background-image:linear-gradient(to right,rgba(26,26,26,.026) 1px,transparent 1px),linear-gradient(to bottom,rgba(26,26,26,.026) 1px,transparent 1px)}

/* --- efecto 02: blob de gradiente a la deriva --- */
@keyframes art-drift{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.art-blob{position:absolute;pointer-events:none;z-index:0;background:var(--art-grad);background-size:300% 300%;filter:blur(64px);border-radius:50% 30% 70% 40%/40% 60% 40% 60%;animation:art-drift 22s ease-in-out infinite;will-change:background-position}
.art-host{position:relative;overflow:hidden}
.art-host>.wrap,.art-host>.wrap-t{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.art-blob{animation:none}}

/* --- efecto 03: cursor propio --- */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;transform:translate(-50%,-50%);border-radius:50%;z-index:9998;pointer-events:none;transition:width .22s var(--ease),height .22s var(--ease),background-color .22s,border-color .22s,opacity .22s}
.cur-dot{width:6px;height:6px;background:var(--ink)}
.cur-ring{width:40px;height:40px;border:1px solid rgba(26,26,26,.22);display:grid;place-items:center;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;color:transparent}
body.cur-hover .cur-dot{opacity:0}
body.cur-hover .cur-ring{width:62px;height:62px;background:rgba(26,26,26,.05);border-color:transparent;backdrop-filter:blur(3px)}
body.cur-view .cur-dot{opacity:0}
body.cur-view .cur-ring{width:80px;height:80px;background:var(--ink);border-color:transparent;color:var(--white)}
body.cur-view .cur-ring::after{content:"VER"}
html[lang="en"] body.cur-view .cur-ring::after{content:"VIEW"}
html[lang="it"] body.cur-view .cur-ring::after{content:"VEDI"}
@media(min-width:768px) and (hover:hover){
  body.has-cursor{cursor:none}
  body.has-cursor a,body.has-cursor button,body.has-cursor [data-cur="view"],body.has-cursor [data-cur="view"] *{cursor:none!important}
}
@media(max-width:767px),(hover:none){.cur-dot,.cur-ring{display:none}}

/* --- efecto 04: reveals al scrollear. El estado oculto depende de .js-reveal,
   que pone el script: si el JS falla o el viewport no se asienta, el
   contenido queda visible. --- */
.r{--d:0ms}
@media(prefers-reduced-motion:no-preference){
.r{transition:opacity .85s var(--ease) var(--d),transform .85s var(--ease) var(--d)}
html.js-reveal .r:not(.in){opacity:0;transform:translateY(20px)}
}

/* --- efecto 05: marquee --- */
.mq{display:flex;overflow:hidden;user-select:none;gap:2rem}
.mq-t{display:flex;flex-shrink:0;min-width:100%;gap:2rem;justify-content:space-around;animation:mq-x 34s linear infinite}
@keyframes mq-x{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.mq-t{animation:none}}
.mq-strip{background:var(--ink);color:var(--on-ink-soft);padding:15px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);position:relative;z-index:20}
.mq-strip .mq-t{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;align-items:center}
.mq-strip i{font-style:normal;color:var(--art-pink)}

/* --- botones --- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-size:13.5px;font-weight:600;letter-spacing:-.01em;padding:12px 22px;border-radius:var(--r-pill);border:1px solid var(--ink);color:var(--white);cursor:pointer;white-space:nowrap;background-image:linear-gradient(100deg,var(--ink) 0 48%,var(--art-purple) 58%,var(--art-pink) 100%);background-size:230% 100%;background-position:0 0;transition:background-position .7s var(--ease),border-color .3s,color .3s}
.btn:hover{background-position:100% 0;border-color:transparent;color:#fff}
.btn-o{color:var(--ink);border-color:var(--rule-strong);background-image:linear-gradient(100deg,transparent 0 48%,var(--art-purple) 58%,var(--art-pink) 100%)}
.btn-o:hover{color:#fff;border-color:transparent}
.btn-q{background:none;border-color:transparent;color:var(--blue);padding:8px 0}
.btn-q:hover{background:none;border-color:transparent;color:var(--ink)}
.btn svg{width:15px;height:15px;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

/* --- bento --- */
.bento{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.bento{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.bento-c{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform .4s cubic-bezier(.25,1,.5,1),border-color .4s ease,box-shadow .4s ease}
@media(min-width:1024px){.bento-c:hover{border-color:var(--rule-strong);box-shadow:0 16px 48px rgba(26,26,26,.05);z-index:10}}
.bento-c .in-3d{transform:translateZ(30px);transition:transform .12s ease}
.bento-c .idx{position:absolute;top:22px;right:26px;font-family:var(--font-mono);font-size:12px;color:rgba(26,26,26,.2)}
.bento-c.tint{background:var(--paper-2)}
.sec:not(.sec-alt) .bento-c{background:var(--paper-2)}
.sec:not(.sec-alt) .bento-c.tint{background:var(--white)}
.bento-c.inv{background:var(--ink);color:var(--on-ink-soft);border-color:transparent}
.bento-c.inv h3,.bento-c.inv h4{color:var(--white)}
.bento-c.inv .lab{color:var(--on-ink-mute)}
.bento-c.inv .lab b{color:var(--blue-light)}
.bento-c.inv .idx{color:rgba(247,247,248,.24)}

/* --- listas de features --- */
.fl{list-style:none;display:grid;gap:9px}
.fl li{display:grid;grid-template-columns:13px 1fr;gap:11px;font-size:14.5px;color:var(--ink-soft)}
.fl li::before{content:"";width:7px;height:7px;margin-top:8px;border:1px solid var(--blue);border-radius:50%}
.inv .fl li{color:var(--on-ink-soft)}
.inv .fl li::before{border-color:var(--blue-light)}
.meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:auto;padding-top:18px;border-top:1px solid var(--rule)}
.inv .meta{border-color:var(--rule-dark)}

/* --- figuras --- */
.fig{position:relative;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--paper-2);overflow:hidden}
.fig image-slot{display:block;width:100%;height:100%}
.fig-cap{display:flex;justify-content:space-between;gap:12px;margin-top:12px}

/* --- proceso en scroll horizontal --- */
.hs{position:relative}
.hs-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.hs-track{display:flex;gap:16px;padding:0 var(--gutter);will-change:transform;position:relative;z-index:1}
.hs-glow{top:-18%;left:-14%;width:46%;height:70%;opacity:.15}
.hs-glow-2{bottom:-26%;right:-12%;width:38%;height:58%;opacity:.11;animation-delay:-8s}
.hs-card{min-width:min(78vw,420px);background:rgba(255,255,255,.55);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.72);border-radius:var(--r-lg);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;justify-content:flex-end;min-height:min(72vh,540px);position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 20px 60px rgba(26,26,26,.06);transition:border-color .4s,background-color .4s}
@media(min-width:1024px){.hs-card:hover{background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.95)}}
.hs-card .n{position:absolute;top:26px;right:30px;font-family:var(--font-mono);font-size:34px;font-weight:500;color:rgba(26,26,26,.16);transition:color .4s}
.hs-card .tick{position:absolute;top:44px;left:30px;width:38px;height:1px;background:rgba(26,26,26,.2)}
.hs-card:nth-child(1):hover .n{color:var(--art-orange)}
.hs-card:nth-child(2):hover .n{color:var(--art-pink)}
.hs-card:nth-child(3):hover .n{color:var(--art-purple)}
.hs-card:nth-child(4):hover .n{color:var(--art-blue)}
.hs-card h3{font-size:clamp(22px,2.6vw,30px);margin-bottom:12px}
.hs-card p{color:var(--ink-soft);font-size:15px}
.hs-card .lab{margin-bottom:10px}
@media(max-width:860px){.hs{height:auto!important}.hs-sticky{position:relative;height:auto;overflow:visible;padding:0}.hs-track{flex-direction:column;padding:0;transform:none!important}.hs-card{min-width:100%;min-height:0}}

/* --- sección oscura --- */
.dark{background:var(--ink);color:var(--on-ink-soft);position:relative;overflow:hidden}
.dark h1,.dark h2,.dark h3{color:var(--white)}
.dark .lab{color:var(--on-ink-mute)}
.dark .lab b,#estudio .lab b{color:var(--on-ink-mute);font-weight:500}
.dark .sec-head>p{color:var(--on-ink-soft)}
.dark a{color:var(--blue-light)}
.dark a:hover{color:var(--white)}

/* --- pills de tecnología --- */
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:-.01em;padding:9px 16px;border:1px solid var(--rule-strong);border-radius:var(--r-pill);color:var(--ink-soft);background:var(--white);transition:border-color .25s,color .25s}
.pill:hover{border-color:var(--ink);color:var(--ink)}
.pill b{font-weight:500;color:var(--ink)}
.pill iconify-icon{font-size:15px;color:var(--ink-mute);flex-shrink:0;transition:color .25s}
.pill:hover iconify-icon{color:var(--ink)}

/* --- filas de proyecto --- */
.rows{border-top:1px solid var(--rule)}
.prow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px 22px;align-items:center;padding:20px 4px;border-bottom:1px solid var(--rule);color:inherit}
@media(min-width:760px){.prow{grid-template-columns:56px minmax(0,1fr) minmax(0,.7fr) 24px;gap:28px}}
.prow h3{font-size:clamp(18px,2vw,22px);transition:color .25s}
.prow:hover h3{color:var(--blue)}
.prow .cat{display:none}
@media(min-width:760px){.prow .cat{display:block}}
.prow .arw{width:18px;height:18px;opacity:.35;transition:transform .35s var(--ease),opacity .25s}
.prow:hover .arw{opacity:1;transform:translate(3px,-3px)}

/* --- acordeón --- */
.faq{border-top:1px solid var(--rule)}
.faq-i{border-bottom:1px solid var(--rule)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:none;border:0;padding:22px 0;text-align:left;cursor:pointer;font-family:var(--font-title);font-size:clamp(17px,2vw,21px);letter-spacing:-.025em;color:var(--ink)}
.faq-q .pm{font-family:var(--font-mono);font-size:18px;color:var(--blue);flex-shrink:0;transition:transform var(--dur) var(--ease)}
.faq-i.open .faq-q .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.faq-a p{padding:0 0 24px;font-size:15px;color:var(--ink-soft);max-width:66ch}

/* --- formularios --- */
.inp{font-family:var(--font-body);font-size:15px;padding:13px 16px;border:1px solid var(--rule-strong);border-radius:var(--r-pill);background:var(--white);color:var(--ink);width:100%}
.inp:focus{outline:none;border-color:var(--blue)}
.form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.form .inp{flex:1 1 260px;max-width:340px}

/* --- badges --- */
.badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--rule-strong);border-radius:var(--r-pill);padding:5px 12px;color:var(--ink-soft);white-space:nowrap}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}

/* --- nav --- */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in oklab,var(--paper) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px}
.mark{font-family:var(--font-title);font-size:20px;font-weight:600;letter-spacing:-.042em;display:inline-flex;align-items:baseline;color:var(--ink);white-space:nowrap}
.mark i{font-family:var(--font-mono);font-style:normal;font-size:.7em;font-weight:500;letter-spacing:-.02em;margin-left:.14em;color:currentColor}
.mark i b{font-weight:500;background:var(--logo-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mark:hover{color:var(--ink)}
.on-ink .mark,.on-ink .mark:hover{color:var(--white)}
.on-ink .mark i b{background:var(--logo-grad-light);-webkit-background-clip:text;background-clip:text}
.nav{background:rgba(255,255,255,.82)}
.nav-links{display:none;gap:26px}
@media(min-width:1120px){.nav-links{display:flex}}
.nav-links a{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;flex-shrink:0}
.nav-links a:hover,.nav-links a.on{color:var(--blue)}
.nav-right{display:flex;align-items:center;gap:12px}
.lang{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--rule-strong);border-radius:var(--r-pill);flex-shrink:0}
.lang a{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;padding:6px 11px;border-radius:var(--r-pill);color:var(--ink-mute);line-height:1}
.lang a:hover{color:var(--ink)}
.lang a.on{background:var(--ink);color:var(--white)}
@media(max-width:560px){.nav-in .btn{display:none}}

/* --- marca / logo --- */
.logo-tile{display:inline-grid;place-items:center;background:var(--ink);color:var(--white);border-radius:22%;font-family:var(--font-mono);font-weight:500;letter-spacing:-.02em;line-height:1;width:64px;height:64px;font-size:20px}
.logo-tile.inv{background:var(--white);color:var(--ink)}
.logo-tile.grad b{font-weight:500;background:var(--logo-grad-light);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.logo-tile.inv.grad b{background:var(--logo-grad);-webkit-background-clip:text;background-clip:text}

/* --- footer --- */
footer{border-top:1px solid var(--rule);padding:clamp(56px,7vw,88px) 0 0;position:relative;overflow:hidden}
.foot{display:grid;gap:36px;grid-template-columns:minmax(0,1fr);position:relative;z-index:1}
@media(min-width:800px){.foot{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px}}
.foot ul{list-style:none;display:grid;gap:9px;margin-top:14px}
.foot a{color:var(--ink-soft);font-size:14.5px}
.foot a:hover{color:var(--blue)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:44px;padding-top:20px;border-top:1px solid var(--rule);position:relative;z-index:1}
.foot-mark{margin-top:32px;display:flex;justify-content:center;user-select:none;pointer-events:none;opacity:.055}
.foot-mark span{font-family:var(--font-title);font-size:19vw;font-weight:600;letter-spacing:-.05em;line-height:.78;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px var(--ink)}


/* ============================================================
   Imagine AI — Blog & Article Extensions (Design System V3)
   ============================================================ */

/* Blog Hero */
.b-hero{position:relative;padding:clamp(48px,7vw,96px) 0 clamp(36px,5vw,56px);overflow:hidden}
.b-hero .art-blob{top:-190px;right:-10vw;width:min(560px,58vw);height:min(480px,52vh);opacity:.3}
.b-hero h1{font-size:clamp(38px,7vw,88px);letter-spacing:-.04em;line-height:.95;margin:20px 0 0;max-width:20ch}
.b-hero p.sub{margin-top:24px;font-size:clamp(16px,1.7vw,18.5px);color:var(--ink-soft);max-width:50ch}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(32px,4vw,48px);padding-top:26px;border-top:1px solid var(--rule)}
.chip{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:8px 15px;border:1px solid var(--rule-strong);border-radius:var(--r-pill);color:var(--ink-soft);background:none;cursor:pointer;transition:color .25s,border-color .25s,background-color .25s}
.chip:hover{color:var(--ink);border-color:var(--ink)}
.chip.on,.chip.chip-active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.count{margin-left:auto;align-self:center}

/* Destacado */
.feat{display:grid;gap:clamp(26px,4vw,48px);grid-template-columns:minmax(0,1fr);align-items:center;padding:clamp(24px,3vw,36px);border-radius:var(--r-lg);border:1px solid rgba(22,24,28,.07);background:var(--white);color:inherit;transition:border-color .4s,box-shadow .4s}
.feat:hover{border-color:var(--rule-strong);box-shadow:0 16px 48px rgba(26,26,26,.05);color:inherit}
@media(min-width:900px){.feat{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.feat .fig{aspect-ratio:16/11;overflow:hidden;border-radius:var(--r-md)}
.feat h2{font-size:clamp(26px,3.6vw,44px);letter-spacing:-.035em;margin:12px 0 14px;color:var(--ink);transition:color .25s}
.feat:hover h2{color:var(--blue)}
.feat p{color:var(--ink-soft);font-size:15.5px;max-width:52ch}
.feat .fl{margin-top:20px}
.feat .frow{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:26px}

/* Grilla */
.grid-posts{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:720px){.grid-posts{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(min-width:1100px){.grid-posts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{display:flex;flex-direction:column;gap:12px;color:inherit}
.card:hover{color:inherit}
.card .fig{aspect-ratio:16/10;margin:-12px 0 4px;overflow:hidden;border-radius:var(--r-md)}
.card h3{font-size:20px;letter-spacing:-.028em;transition:color .25s}
.card:hover h3{color:var(--blue)}
.card p{font-size:14.5px;color:var(--ink-soft)}
.card .pfoot{margin-top:auto;padding-top:18px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:baseline;border-top:1px solid var(--rule)}
.hide{display:none!important}

/* Newsletter */
.news{text-align:center;max-width:600px;margin:0 auto;position:relative;z-index:1}
.news h2{font-size:clamp(28px,4.4vw,52px);letter-spacing:-.035em;margin:18px 0 16px}
.news p{color:var(--ink-soft);max-width:46ch;margin:0 auto}
#newsletter .art-blob{top:4%;left:50%;width:min(700px,86vw);height:min(460px,80%);transform:translateX(-50%);opacity:.22;filter:blur(80px)}

/* Article Detail */
.prog{position:fixed;top:0;left:0;right:0;height:2px;background:var(--art-grad-text);transform:scaleX(0);transform-origin:0 50%;z-index:70;transition:transform .1s linear}
.a-hero{position:relative;padding:clamp(40px,6vw,76px) 0 0;overflow:hidden}
.a-hero .art-blob{top:-200px;right:-12vw;width:min(560px,58vw);height:min(460px,50vh);opacity:.28}
.crumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.a-hero h1{font-size:clamp(34px,5.6vw,68px);letter-spacing:-.04em;line-height:1;margin:22px 0 0;max-width:24ch}
.a-hero .lead{margin-top:24px;font-size:clamp(16.5px,1.8vw,20px);color:var(--ink-soft);max-width:56ch}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:32px;padding:20px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.byline .av{width:44px;height:44px;border-radius:50%;overflow:hidden;border:1px solid var(--rule);background:var(--paper-2);flex-shrink:0}
.byline .who{display:flex;align-items:center;gap:12px}
.byline .who b{font-weight:600;font-size:14.5px}
.cover{margin-top:clamp(28px,4vw,44px)}
.cover .fig{aspect-ratio:16/8;overflow:hidden;border-radius:var(--r-lg)}

/* Cuerpo + Índice */
.a-body{display:grid;gap:clamp(32px,4vw,64px);grid-template-columns:minmax(0,1fr);padding:clamp(44px,6vw,80px) 0}
@media(min-width:1000px){.a-body{grid-template-columns:210px minmax(0,1fr)}}
.toc{display:none}
@media(min-width:1000px){.toc{display:block;position:sticky;top:96px;align-self:start}}
.toc ul{list-style:none;display:grid;gap:11px;margin-top:16px}
.toc a{font-size:13.5px;color:var(--ink-mute);display:block;padding-left:12px;border-left:1px solid var(--rule);line-height:1.35}
.toc a:hover{color:var(--ink)}
.toc a.on,.toc a.active{color:var(--blue);border-left-color:var(--blue)}

.prose{max-width:66ch}
.prose h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.032em;margin:clamp(40px,4vw,60px) 0 14px;scroll-margin-top:100px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;margin:32px 0 10px}
.prose p{margin-bottom:18px;font-size:16.5px;color:var(--ink-soft)}
.prose p strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{margin:0 0 20px;padding-left:0;list-style:none;display:grid;gap:10px}
.prose li{display:grid;grid-template-columns:14px 1fr;gap:12px;font-size:16px;color:var(--ink-soft)}
.prose li::before{content:"";width:7px;height:7px;margin-top:9px;border:1px solid var(--blue);border-radius:50%}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n);width:auto;height:auto;margin:0;border:0;border-radius:0;font-family:var(--font-mono);font-size:12px;color:var(--blue);padding-top:4px}
.prose a{border-bottom:1px solid rgba(43,75,140,.3)}
.prose > figure{margin:clamp(28px,3vw,44px) 0}
.prose figcaption{margin-top:12px}

.pull{margin:clamp(32px,4vw,52px) 0;padding:0 0 0 24px;border-left:2px solid var(--blue)}
.pull p{font-family:var(--font-title);font-weight:400;font-size:clamp(20px,2.6vw,29px);line-height:1.25;letter-spacing:-.028em;color:var(--ink);margin:0}

.tbl,.table-wrap{margin:clamp(26px,3vw,40px) 0;border:1px solid var(--rule);border-radius:var(--r-lg);overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--white)}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;font-family:var(--font-mono);font-size:10px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);padding:14px 16px;border-bottom:1px solid var(--rule);white-space:nowrap}
td{padding:14px 16px;border-bottom:1px solid var(--rule);color:var(--ink-soft);vertical-align:top}
tr:last-child td{border-bottom:0}
td:first-child{color:var(--ink);font-weight:600}
td.n{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Callouts */
.callout-dato,.callout-cta{margin:clamp(24px,3vw,36px) 0;padding:20px 24px;border-radius:var(--r-md);background:var(--paper-2);border:1px solid var(--rule);display:flex;gap:14px;align-items:flex-start}
.callout-dato iconify-icon{font-size:22px;color:var(--blue);flex-shrink:0;margin-top:2px}
.callout-dato p{margin:0;font-size:15px;color:var(--ink-soft)}
.callout-cta{background:var(--white);border-color:var(--rule-strong);justify-content:space-between;align-items:center;flex-wrap:wrap}
.callout-cta p{margin:0;font-size:15px;font-weight:500;color:var(--ink)}

.inline-cta{margin:clamp(32px,4vw,52px) 0;padding:clamp(24px,3vw,34px);border-radius:var(--r-lg);background:var(--ink);color:var(--on-ink-soft);display:flex;flex-direction:column;gap:14px}
.inline-cta h3{color:var(--paper);font-size:clamp(21px,2.4vw,27px);letter-spacing:-.03em}
.inline-cta p{font-size:15px;max-width:48ch;margin:0}
.inline-cta .btn{align-self:flex-start;margin-top:6px;border-color:var(--paper);color:var(--ink);background-image:linear-gradient(100deg,var(--paper) 0 48%,var(--art-purple) 58%,var(--art-pink) 100%)}
.inline-cta .btn:hover{color:#fff}

.a-foot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;margin-top:clamp(36px,4vw,56px);padding-top:24px;border-top:1px solid var(--rule)}

/* Relacionadas */
.rel{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:800px){.rel{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.rel .card{display:flex;flex-direction:column;gap:10px;color:inherit}
.rel .card h3{font-size:19px;letter-spacing:-.028em;transition:color .25s}
.rel .card:hover h3{color:var(--blue)}
.rel .card p{font-size:14.5px;color:var(--ink-soft)}
.rel .card .pfoot{margin-top:auto;padding-top:16px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:10px;align-items:baseline}

/* --- Casos wcard hover y tilt --- */
.wcard{display:flex;flex-direction:column;gap:0;color:inherit;border-radius:var(--r-lg);border:1px solid var(--rule);background:var(--white);padding:clamp(14px,1.6vw,20px);transform-style:preserve-3d;transition:border-color .4s,box-shadow .4s,transform .4s cubic-bezier(.25,1,.5,1)}
.wcard:hover{border-color:var(--rule-strong);box-shadow:0 20px 50px rgba(26,26,26,.08);transform:translateY(-4px)}
.wcard .mock-win{transition:transform .4s cubic-bezier(.25,1,.5,1),box-shadow .4s cubic-bezier(.25,1,.5,1)}
.wcard:hover .mock-win{transform:translateY(-3px);box-shadow:0 8px 24px rgba(26,26,26,.06)}
.mock-body{aspect-ratio:16/10;border-top:1px solid var(--rule);overflow:hidden;position:relative;background:var(--paper-2)}
.mock-body video,
.mock-body .case-video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}

/* --- Formulario de contacto v3 --- */
.contact-card{max-width:540px;margin:34px auto 0;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(24px,3.2vw,36px);box-shadow:0 18px 48px rgba(26,26,26,.04);text-align:left;position:relative;z-index:2}
.contact-field{margin-bottom:18px}
.contact-field:last-of-type{margin-bottom:22px}
.contact-field>.lab{display:block;margin-bottom:8px;color:var(--ink-soft)}
.form-chips{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(max-width:480px){.form-chips{grid-template-columns:1fr}}
.form-chip{font-family:var(--font-mono);font-size:11px;letter-spacing:-.01em;padding:9px 12px;border:1px solid var(--rule-strong);border-radius:var(--r-md);color:var(--ink-soft);background:var(--white);cursor:pointer;text-align:center;transition:all .2s var(--ease);display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.form-chip:hover{border-color:var(--ink);color:var(--ink)}
.form-chip.on{background:var(--ink);border-color:var(--ink);color:var(--white);font-weight:500}
.form-input-white{background:#ffffff!important;border:1px solid var(--rule-strong)!important;border-radius:var(--r-md)!important;padding:12px 16px!important;color:var(--ink)!important;width:100%!important;font-size:15px;box-shadow:inset 0 1px 2px rgba(26,26,26,.03)}
.form-input-white:focus{outline:none;border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(43,75,140,.12)}
.form-textarea{min-height:92px;resize:vertical;font-family:var(--font-body);line-height:1.5}
.mail-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;padding:8px 20px;border-radius:var(--r-pill);border:1px solid var(--rule-strong);background:var(--white);color:var(--ink);box-shadow:0 4px 14px rgba(26,26,26,.04);transition:border-color .25s,transform .25s,box-shadow .25s}
.mail-pill:hover{border-color:var(--ink);transform:translateY(-1px);box-shadow:0 8px 22px rgba(26,26,26,.08);color:var(--ink)}