/* =====================================================================
   BLIKK · sistema visual propio
   Blikk es "mirada" en noruego. La idea: un ojo que mira a través de una
   persiana; la luz entra por las lamas horizontales.
   Tipografía: Bricolage Grotesque (títulos) · Instrument Sans (texto) ·
   JetBrains Mono (precios, etiquetas, números).
   Paleta: tinta + blanco, con tres acentos del cruce:
   rosa (diseño) · azul (informática) · verde (datos).
   ===================================================================== */
:root{
  /* Base de papel cálido: la luz que entra por la persiana. Las tarjetas son blancas. */
  --bg:#efeeea; --bg-2:#e4e2dc; --card:#ffffff; --ink:#16171a; --ink-2:#54565b; --ink-3:#666870;
  --line:#d8d6ce; --line-2:#c0bdb2;
  --rosa:#e8306f; --rosa-soft:#ffe0e9; --rosa-ink:#8a1f44;
  --azul:#0a6cff; --azul-soft:#dbe8ff; --azul-ink:#123c8a;
  --verde:#1fa34a; --verde-soft:#dcf5d8; --verde-ink:#1f5f2a;
  --tri:linear-gradient(90deg,#e8306f 0%,#0a6cff 50%,#1fa34a 100%);
  --slats:repeating-linear-gradient(180deg,rgba(17,18,20,.06) 0 1px,transparent 1px 9px);
  --r-lg:18px; --r-md:14px; --r-sm:10px;
  --display:"Bricolage Grotesque","Instrument Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --wrap:1160px;
  /* compatibilidad con nombres antiguos */
  --bg-alt:var(--bg-2); --line-soft:var(--line); --blue:var(--azul); --blue-h:#1a76ff; --link:var(--ink); --green:var(--verde);
  --radius-xl:var(--r-lg); --radius-l:var(--r-md); --radius-m:var(--r-sm); --shadow-tile:none;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block;height:auto}
[hidden]{display:none!important}
button{font:inherit}
.wrap{width:min(var(--wrap),calc(100% - 48px));margin-inline:auto}
.wrap--narrow{max-width:820px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:6px}

/* ---------- Tipografía ---------- */
h1,h2,h3,.h2,.h3{font-family:var(--display);font-variation-settings:"opsz" 96}
.h2{font-size:clamp(34px,4.8vw,58px);font-weight:700;letter-spacing:-.035em;line-height:1.02;margin:0 0 16px;text-wrap:balance}
.h3{font-size:clamp(24px,2.8vw,32px);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:0 0 12px}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--ink-2);margin:0;max-width:52ch;text-wrap:pretty}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:0 0 14px;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:14px;height:10px;flex-shrink:0;background:linear-gradient(var(--rosa) 0 2px,transparent 2px 4px,var(--azul) 4px 6px,transparent 6px 8px,var(--verde) 8px 10px)}
.grad{background:var(--tri);-webkit-background-clip:text;background-clip:text;color:transparent}
.c-rosa{color:var(--rosa);font-weight:600}
.c-azul{color:var(--azul);font-weight:600}
.c-verde{color:var(--verde);font-weight:600}
.sec{padding:clamp(80px,10vw,128px) 0}
.sec--grey{background:var(--card)}
.sec__head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:12px 56px;align-items:end;margin-bottom:clamp(36px,5vw,56px);text-align:left}
.sec__head .eyebrow{grid-column:1/-1;margin-bottom:6px}
.sec__head .h2{margin:0}
.sec__head .lead{margin:0;max-width:none;padding-bottom:8px}
@media (max-width:820px){.sec__head{grid-template-columns:1fr}.sec__head .lead{padding-bottom:0}}

/* ---------- Botones y enlaces ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#fff;border:0;border-radius:var(--r-sm);padding:13px 22px;font-size:16px;font-weight:600;letter-spacing:-.005em;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:transform .2s var(--ease),color .3s}
.btn::before{content:"";position:absolute;inset:0;background:var(--tri);transform:translateX(-101%);transition:transform .5s var(--ease-out);z-index:-1}
.btn:hover::before{transform:none}
.btn:active{transform:scale(.97)}
.btn--lg{padding:17px 30px;font-size:18px}
.btn--sm{padding:8px 14px;font-size:13px;border-radius:8px}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--ghost:hover{color:#fff}
.btn--block{width:100%}
.link{color:var(--ink);text-decoration:none;font-weight:600;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:inherit;border-bottom:1.5px solid var(--line-2);transition:border-color .25s}
.link::after{content:"\2192";transition:transform .25s var(--ease)}
.link:hover{border-color:var(--ink)}
.link:hover::after{transform:translateX(4px)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;height:64px;background:rgba(239,238,234,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav.is-scrolled{border-bottom-color:var(--line-2)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:100%}
.nav__logo{font-family:var(--display);font-weight:800;letter-spacing:-.04em;font-size:22px;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:9px}
.logo{width:36px;height:24px;flex-shrink:0}
.nav__links{display:flex;align-items:center;gap:26px}
.nav__links a{font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;opacity:.78;transition:opacity .2s}
.nav__links a:hover{opacity:1}
.nav__links .btn{opacity:1;color:#fff}
.nav__burger{display:none;width:44px;height:44px;border:0;background:transparent;flex-direction:column;justify-content:center;align-items:center;gap:6px;cursor:pointer;margin-right:-10px}
.nav__burger span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .3s var(--ease)}
.nav.is-open .nav__burger span:first-child{transform:translateY(4px) rotate(45deg)}
.nav.is-open .nav__burger span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:900px){
  .nav__burger{display:flex}
  .nav.is-open{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav__links{position:fixed;inset:64px 0 0;background:var(--bg);flex-direction:column;align-items:flex-start;padding:16px 24px 32px;gap:0;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .nav.is-open .nav__links{opacity:1;transform:none;pointer-events:auto}
  .nav__links a{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.03em;padding:16px 0;border-bottom:1px solid var(--line);width:100%;opacity:1}
  .nav__links .btn{margin-top:24px;width:auto;font-family:var(--font);font-size:17px;padding:14px 24px;border-bottom:0}
}

/* ---------- Hero ---------- */
.hero{padding:clamp(56px,8vw,96px) 0 0;position:relative;isolation:isolate;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0 0 auto;height:640px;background:var(--slats);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 92%);mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 92%);pointer-events:none;z-index:-1}
.hero__eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;animation:rise .9s var(--ease-out) both}
.hero__h1{font-size:clamp(50px,8.6vw,108px);font-weight:800;letter-spacing:-.05em;line-height:.94;margin:0 0 24px;text-wrap:balance;max-width:12ch}
.hero__h1 span{display:inline-block;animation:rise .9s var(--ease-out) both}
.hero__h1 span:nth-child(2){animation-delay:.08s}
.hero__lead{max-width:60ch;margin:0 0 32px;animation:rise .9s var(--ease-out) .16s both}
.hero__cta{display:flex;gap:26px;align-items:center;flex-wrap:wrap;animation:rise .9s var(--ease-out) .24s both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.badge-ia{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--tri) border-box;color:var(--ink);font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.badge-ia i{width:8px;height:8px;border-radius:50%;background:var(--tri)}

/* ---------- Computador ---------- */
.mac-stage{--p:0;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;perspective:2200px;width:min(1000px,92vw);margin:clamp(40px,6vw,64px) auto 0;transform:scale(calc(1 - var(--p) * .08)) translateY(calc(var(--p) * 48px));opacity:calc(1 - var(--p) * .6);will-change:transform,opacity;animation:rise 1s var(--ease-out) .3s backwards}
.mac-stage:active{cursor:grabbing}
.mac{--rx:0deg;--ry:0deg;--sx:0deg;position:relative;transform-style:preserve-3d;transform:rotateX(calc(var(--rx) + var(--sx))) rotateY(var(--ry));transition:transform .9s var(--ease-out)}
.mac.is-hover{transition:transform .18s ease-out}
.mac.is-drag{transition:none}
.mac.is-nudge{animation:nudge .7s var(--ease-out)}
.mac__float{transform-style:preserve-3d}
.mac-stage.is-live .mac__float{animation:flotar 7s ease-in-out infinite}
.mac.is-hover .mac__float,.mac.is-drag .mac__float{animation-play-state:paused}
@keyframes flotar{0%,100%{transform:translateY(0) rotateY(-2.5deg) rotateX(1deg)}50%{transform:translateY(-12px) rotateY(2.5deg) rotateX(-1deg)}}
@keyframes nudge{0%{scale:1}35%{scale:1.025}100%{scale:1}}
.mac__lid{position:relative;transform-origin:50% 100%;transform:rotateX(87deg);transition:transform 1.7s cubic-bezier(.22,.9,.2,1) .25s;transform-style:preserve-3d;z-index:2}
.mac.is-open .mac__lid{transform:rotateX(0deg)}
.mac__bezel{background:#0b0b0d;border-radius:16px 16px 3px 3px;padding:14px 14px 18px;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 40px 80px -30px rgba(0,0,0,.45)}
.mac__cam{position:absolute;top:5px;left:50%;width:6px;height:6px;border-radius:50%;background:#1a2230;transform:translateX(-50%);box-shadow:0 0 0 1.5px #2a3242}
.mac__screen{aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#0b0b0d;container-type:inline-size;cursor:pointer;position:relative}
.mac__screen::after{content:"";position:absolute;inset:0 -40% 0 -40%;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.16) 45%,rgba(255,255,255,0) 60%);pointer-events:none;transform:translateX(var(--gx,0%));transition:transform .35s ease-out;z-index:5}
.mac__boot{position:absolute;inset:0;z-index:3;pointer-events:none;display:grid;grid-template-rows:repeat(8,1fr)}
.mac__boot i{display:block;background:#0b0b0d;transition:transform .8s var(--ease-out)}
.mac__boot i:nth-child(2){transition-delay:.05s}.mac__boot i:nth-child(3){transition-delay:.1s}.mac__boot i:nth-child(4){transition-delay:.15s}
.mac__boot i:nth-child(5){transition-delay:.2s}.mac__boot i:nth-child(6){transition-delay:.25s}.mac__boot i:nth-child(7){transition-delay:.3s}.mac__boot i:nth-child(8){transition-delay:.35s}
.mac__boot svg{position:absolute;left:50%;top:50%;width:14%;transform:translate(-50%,-50%) scale(.85);opacity:0;transition:opacity .5s var(--ease),transform .6s var(--ease-out)}
.mac__screen.is-boot .mac__boot svg{opacity:1;transform:translate(-50%,-50%) scale(1)}
.mac__screen.is-on .mac__boot svg{opacity:0;transition-duration:.25s}
.mac__screen.is-on .mac__boot i{transform:translateX(102%)}
.mac__screen.is-on .mac__boot i:nth-child(even){transform:translateX(-102%)}
.mac__cursor{position:absolute;left:var(--cx,108%);top:var(--cy,108%);width:3.4cqw;z-index:4;pointer-events:none;transition:left 1s cubic-bezier(.3,.7,.2,1),top 1s cubic-bezier(.3,.7,.2,1),transform .15s,opacity .3s;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));opacity:0}
.mac__cursor.is-visible{opacity:1}
.mac__cursor.is-click{transform:scale(.8)}
.mac__base{height:15px;margin:0 -3.6%;background:linear-gradient(#ececef,#cfcfd4 50%,#a7a7ad);border-radius:0 0 12px 12px;position:relative;box-shadow:0 1px 0 rgba(0,0,0,.18);z-index:1}
.mac__base::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,#9a9aa0,#f7f7f9 50%,#9a9aa0)}
.mac__notch{position:absolute;left:50%;top:0;width:13%;height:6px;transform:translateX(-50%);background:linear-gradient(#b7b7bc,#e2e2e6);border-radius:0 0 7px 7px}
.mac__shadow{height:44px;margin:0 6%;background:radial-gradient(50% 100% at 50% 0,rgba(0,0,0,.25),transparent 70%);filter:blur(8px);transform:translateY(-2px)}

/* mini sitio dentro de la pantalla · unidades relativas a la pantalla (cqw) */
.mini{--m-bg:#fff;--m-ink:#111;--m-muted:#777;--m-accent:#111;--m-btn-ink:#fff;height:100%;background:var(--m-bg);color:var(--m-ink);display:flex;flex-direction:column;transition:background .45s var(--ease);font-family:var(--font)}
.mini__bar{display:flex;align-items:center;gap:1.4cqw;height:5.4cqw;padding:0 1.6cqw;background:#f0f0f2;border-bottom:1px solid #dcdce0;font-size:1.5cqw;color:#666;flex-shrink:0}
.mini__dots{display:inline-flex;gap:.6cqw}
.mini__dots i{width:1.15cqw;height:1.15cqw;border-radius:50%;background:#ff5f57}
.mini__dots i:nth-child(2){background:#febc2e}
.mini__dots i:nth-child(3){background:#28c840}
.mini__url{flex:1;text-align:center;background:#fff;border-radius:.9cqw;padding:.55cqw 0;font-size:1.5cqw;color:#555;margin:0 6cqw;font-family:var(--font)}
.mini__page{flex:1;padding:0 4.2cqw;display:flex;flex-direction:column;min-height:0}
.mini__top{display:flex;align-items:center;justify-content:space-between;height:7cqw;font-size:1.7cqw;flex-shrink:0}
.mini__marca{font-weight:700;font-size:2.4cqw;letter-spacing:-.02em}
.mini__nav{display:flex;gap:2.6cqw;color:var(--m-muted)}
.mini__btn{background:var(--m-accent);color:var(--m-btn-ink);padding:.7cqw 1.7cqw;border-radius:99px;font-size:1.5cqw;font-weight:600}
.mini__hero{display:grid;grid-template-columns:1.05fr 1fr;gap:3.4cqw;align-items:center;padding:2.2cqw 0 2.8cqw}
.mini__tag{font-size:4.4cqw;line-height:1.06;letter-spacing:-.026em;margin:0 0 2.2cqw;font-weight:700;text-wrap:balance;font-family:var(--font)}
.mini__cta{display:inline-block;background:var(--m-accent);color:var(--m-btn-ink);padding:1.15cqw 2.5cqw;border-radius:99px;font-size:1.75cqw;font-weight:600;transition:transform .15s,filter .15s}
.mini__cta.is-pressed{transform:scale(.94);filter:brightness(.85)}
.mini__hero-img{aspect-ratio:4/3;border-radius:1.8cqw;background:var(--m-hero);position:relative;overflow:hidden;transition:background .45s var(--ease)}
.mini__hero-img::before{content:"";position:absolute;left:14%;top:18%;width:38%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.28);filter:blur(.4cqw)}
.mini__hero-img::after{content:"";position:absolute;right:10%;bottom:12%;width:44%;aspect-ratio:1;border-radius:2cqw;background:rgba(0,0,0,.08);transform:rotate(12deg)}
.mini__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2cqw;padding-bottom:3cqw}
.mini__card{display:flex;flex-direction:column;gap:.5cqw;font-size:1.6cqw}
.mini__card-img{aspect-ratio:1/1;border-radius:1.3cqw;transition:background .45s var(--ease)}
.mini__card-img--1{background:var(--m-t1)}
.mini__card-img--2{background:var(--m-t2)}
.mini__card-img--3{background:var(--m-t3)}
.mini__card-nombre{font-weight:600;margin-top:.4cqw}
.mini__card-precio{color:var(--m-muted)}
/* construcción del mini sitio (entra por partes) */
.mini__top,.mini__hero-txt,.mini__hero-img,.mini__card{transition:opacity .45s var(--ease-out),transform .6s var(--ease-out)}
.mini.is-building .mini__top,.mini.is-building .mini__hero-txt,.mini.is-building .mini__hero-img,.mini.is-building .mini__card{opacity:0;transform:translateY(2.4cqw);transition-duration:.2s,.2s}
.mini:not(.is-building) .mini__hero-txt{transition-delay:.08s}
.mini:not(.is-building) .mini__hero-img{transition-delay:.16s}
.mini:not(.is-building) .mini__card:nth-child(1){transition-delay:.26s}
.mini:not(.is-building) .mini__card:nth-child(2){transition-delay:.34s}
.mini:not(.is-building) .mini__card:nth-child(3){transition-delay:.42s}
.mini[data-font=joyeria] .mini__marca,.mini[data-font=joyeria] .mini__tag{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;letter-spacing:-.01em}
.mini[data-font=joyeria] .mini__tag{font-size:5cqw}
.mini[data-font=ceramica] .mini__marca,.mini[data-font=ceramica] .mini__tag{font-family:"Nunito",var(--font);font-weight:800}
.mini[data-font=ropa] .mini__marca,.mini[data-font=ropa] .mini__tag{font-family:"Archivo Black",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.01em}
.mini[data-font=ropa] .mini__tag{font-size:3.9cqw}
.mini[data-font=danza] .mini__marca,.mini[data-font=danza] .mini__tag{font-family:"DM Serif Display",Georgia,serif;font-style:italic;font-weight:400}
.mini[data-font=danza] .mini__tag{font-size:5cqw}
.mini[data-font=cafe] .mini__marca,.mini[data-font=cafe] .mini__tag{font-family:"Zilla Slab",Georgia,serif;font-weight:600}

.hero__rubros{margin-top:clamp(24px,4vw,40px);display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.hero__rubros-label{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line-2);background:#fff;border-radius:8px;padding:9px 14px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);cursor:pointer;transition:background .25s var(--ease),color .25s,border-color .25s,transform .25s}
.chip:hover{border-color:var(--ink)}
.chip:active{transform:scale(.96)}
.chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.hero__nota{flex-basis:100%;font-size:13px;color:var(--ink-2);margin:2px 0 0}

/* ---------- Sitios en vivo ---------- */
.vivo{padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(48px,7vw,80px)}
.vivo__in{display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap}
.vivo__label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.vivo__list{display:flex;gap:10px;flex-wrap:wrap}
.vivo__item{font-family:var(--mono);font-size:13px;color:var(--ink);text-decoration:none;padding:7px 12px;border:1px solid var(--line-2);border-radius:8px;transition:border-color .2s,background .2s}
.vivo__item:hover{border-color:var(--ink);background:var(--bg-2)}

/* ---------- Casos ---------- */
.casos{display:grid;gap:clamp(48px,7vw,88px)}
.caso{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,5vw,56px);align-items:center}
.caso--invert .caso__media{order:2}
.caso__media{position:relative;border:1px solid var(--line);background:var(--bg-2);border-radius:var(--r-lg);padding:clamp(20px,4vw,44px) clamp(20px,4vw,44px) 0;cursor:pointer;overflow:hidden;text-align:left;display:block;width:100%;transition:transform .6s var(--ease-out),border-color .3s}
.caso__media:hover{transform:translateY(-4px);border-color:var(--line-2)}
.caso__media::after{content:"Ver el proceso \2192";position:absolute;left:50%;bottom:22px;transform:translate(-50%,8px);background:var(--ink);color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:9px 14px;border-radius:8px;opacity:0;transition:opacity .3s,transform .3s}
.caso__media:hover::after,.caso__media:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.frame--desk{display:block;border-radius:8px 8px 0 0;overflow:hidden;box-shadow:0 24px 50px -24px rgba(0,0,0,.35);border:1px solid rgba(0,0,0,.1);border-bottom:0;background:#fff}
.frame--desk img{aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%}
.frame--phone{position:absolute;right:clamp(14px,3vw,34px);bottom:-8px;width:21%;border-radius:16px;overflow:hidden;box-shadow:0 20px 40px -12px rgba(0,0,0,.45);border:3px solid #111;background:#111}
.frame--phone img{aspect-ratio:390/780;object-fit:cover;object-position:top;border-radius:12px;width:100%}
.caso__txt p{color:var(--ink-2);margin:0;line-height:1.55}
.caso__acciones{display:flex;gap:24px;flex-wrap:wrap;margin-top:22px}
@media (max-width:860px){.caso{grid-template-columns:1fr}.caso--invert .caso__media{order:0}}

/* ---------- Fotografía de producto ---------- */
.flujo{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.flujo__paso{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .5s var(--ease-out),border-color .3s}
.flujo__paso:hover{transform:translateY(-3px);border-color:var(--line-2)}
.flujo__img{aspect-ratio:4/3;overflow:hidden;background:#0a0a0a}
.flujo__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.flujo__paso:hover .flujo__img img{transform:scale(1.03)}
.flujo__img--foto img{object-position:center 55%}
.flujo__img--web img{object-position:center 28%}
.flujo__paso figcaption{padding:22px 24px 26px;display:flex;flex-direction:column;gap:6px}
.flujo__n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.flujo__paso:nth-child(1) .flujo__n{color:var(--rosa)}
.flujo__paso:nth-child(2) .flujo__n{color:var(--azul)}
.flujo__paso:nth-child(3) .flujo__n{color:var(--verde)}
.flujo__paso h3{margin:0;font-size:21px;letter-spacing:-.025em;line-height:1.2}
.flujo__paso p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.5}
.marca-card{aspect-ratio:4/3;background:#0a0a0a;color:#e6e6e6;display:flex;flex-direction:column;justify-content:space-between;padding:22px 24px;position:relative;overflow:hidden}
.marca-card__logo{font-family:var(--mono);letter-spacing:.2em;font-size:14px;text-transform:uppercase;color:#fff;position:relative;z-index:1}
.marca-card__foto{position:absolute;right:-2%;top:8%;width:50%;aspect-ratio:1;border-radius:14px;overflow:hidden;box-shadow:0 24px 50px -20px rgba(0,0,0,.9)}
.marca-card__foto img{width:100%;height:100%;object-fit:cover}
.marca-card__swatches{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.marca-card__swatches i{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.28)}
.marca-card__leyenda{font-size:12px;color:#a1a1a6;margin:0;max-width:46%;line-height:1.4}
.fotos__caso{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,48px);align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px)}
.fotos__galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fotos__galeria img{aspect-ratio:4/5;object-fit:cover;border-radius:10px;width:100%;background:#0a0a0a}
.fotos__txt p{color:var(--ink-2);margin:0;line-height:1.55}
.fotos__nota{color:var(--ink-2);font-size:15px;margin:28px 0 0}
@media (max-width:900px){.flujo{grid-template-columns:1fr}.fotos__caso{grid-template-columns:1fr}}

/* ---------- Bento (por qué) ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,30px);grid-column:span 2;display:flex;flex-direction:column;gap:14px;min-height:220px;transition:transform .5s var(--ease-out),border-color .3s}
.tile:hover{transform:translateY(-3px);border-color:var(--line-2)}
.tile--3{grid-column:span 3}
.tile--4{grid-column:span 4}
.tile__icon{width:42px;height:42px;border-radius:10px;background:var(--bg-2);display:grid;place-items:center;color:var(--ink)}
.tile__icon svg{width:22px;height:22px}
.bento .tile:nth-child(3n+1) .tile__icon{background:var(--rosa-soft);color:var(--rosa-ink)}
.bento .tile:nth-child(3n+2) .tile__icon{background:var(--azul-soft);color:var(--azul-ink)}
.bento .tile:nth-child(3n) .tile__icon{background:var(--verde-soft);color:var(--verde-ink)}
.tile h3{font-size:21px;font-weight:700;letter-spacing:-.025em;margin:0;line-height:1.2;text-wrap:balance}
.tile p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.5}
.tile .link{margin-top:auto;font-size:15px;align-self:flex-start}
.equipo{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px}
.persona{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,30px);display:flex;flex-direction:column;gap:8px}
.persona__rol{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.persona:nth-child(1) .persona__rol{color:var(--azul)}
.persona:nth-child(2) .persona__rol{color:var(--rosa)}
.persona__nombre{font-size:26px;margin:0;letter-spacing:-.03em}
.persona__desc{margin:0;font-size:15px;color:var(--ink-2);line-height:1.55}
.persona__stack{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0}
.persona__stack span{font-family:var(--mono);font-size:11.5px;padding:4px 9px;border:1px solid var(--line);border-radius:6px;color:var(--ink-2)}
.persona__links{display:flex;gap:18px;margin-top:10px;font-size:14px}
@media (max-width:900px){.tile,.tile--3,.tile--4{grid-column:span 3}.equipo{grid-template-columns:1fr}}
@media (max-width:600px){.tile,.tile--3,.tile--4{grid-column:span 6;min-height:0}}

/* ---------- El cruce (scrollytelling) ---------- */
.cruce__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:start}
.cruce__sticky{position:sticky;top:110px}
.cruce__visual{position:relative;aspect-ratio:1;max-width:520px;margin:0 auto}
.disco{position:absolute;width:48%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em;transition:transform 1.1s var(--ease-out),opacity .6s var(--ease),filter .6s;mix-blend-mode:multiply;will-change:transform}
.disco svg{width:30px;height:30px}
.disco>*{transition:opacity .4s}
.disco--d{background:#ffbfd1;color:var(--rosa-ink);left:2%;top:14%}
.disco--i{background:#b9d3ff;color:var(--azul-ink);left:50%;top:14%}
.disco--a{background:#bde9b5;color:var(--verde-ink);left:26%;top:50%}
.cruce__visual[data-step="1"] .disco--i,.cruce__visual[data-step="1"] .disco--a,
.cruce__visual[data-step="2"] .disco--d,.cruce__visual[data-step="2"] .disco--a,
.cruce__visual[data-step="3"] .disco--d,.cruce__visual[data-step="3"] .disco--i{opacity:.35}
.cruce__visual[data-step="1"] .disco--d,.cruce__visual[data-step="2"] .disco--i,.cruce__visual[data-step="3"] .disco--a{transform:scale(1.1)}
.cruce__visual[data-step="4"] .disco--d{transform:translate(30%,16%)}
.cruce__visual[data-step="4"] .disco--i{transform:translate(-30%,16%)}
.cruce__visual[data-step="4"] .disco--a{transform:translate(0,-30%)}
.cruce__visual[data-step="4"] .disco>*{opacity:0}
.cruce__centro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7);opacity:0;transition:opacity .6s var(--ease) .35s,transform .8s var(--ease-out) .35s;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.03em;background:var(--ink);color:#fff;padding:12px 22px;border-radius:10px;white-space:nowrap;z-index:2}
.cruce__visual[data-step="4"] .cruce__centro{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cruce__pasos{display:flex;flex-direction:column}
.cruce__paso{min-height:62vh;display:flex;flex-direction:column;justify-content:center;opacity:.32;transition:opacity .5s var(--ease)}
.cruce__paso.is-current{opacity:1}
.cruce__paso h3{font-size:clamp(26px,3vw,38px);letter-spacing:-.035em;margin:0 0 12px;line-height:1.05}
.cruce__paso h3 small{display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.cruce__paso[data-step="1"] h3 small{color:var(--rosa)}
.cruce__paso[data-step="2"] h3 small{color:var(--azul)}
.cruce__paso[data-step="3"] h3 small{color:var(--verde)}
.cruce__paso[data-step="4"] h3 small{background:var(--tri);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content}
.cruce__paso p{margin:0;color:var(--ink-2);font-size:18px;line-height:1.55;max-width:46ch}
@media (max-width:860px){
  .cruce__grid{grid-template-columns:1fr}
  .cruce__sticky{top:68px;z-index:1;background:linear-gradient(#fff 80%,rgba(255,255,255,0));padding-bottom:16px}
  .cruce__visual{max-width:300px}
  .disco{font-size:15px}
  .cruce__paso{min-height:0;padding:36px 0}
}

/* ---------- Etapas ---------- */
.etapas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.etapas__track{grid-column:1/-1;height:3px;background:var(--line);border-radius:3px;overflow:hidden;margin:4px 0 10px}
.etapas__bar{display:block;height:100%;width:0;background:var(--tri);transition:width 1.8s var(--ease)}
.etapas__track.is-in .etapas__bar{width:100%}
.etapa{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:22px 18px;display:flex;flex-direction:column;gap:8px}
.etapa__n{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.etapa__cuando{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.etapa:nth-of-type(3n+1) .etapa__cuando{color:var(--rosa)}
.etapa:nth-of-type(3n+2) .etapa__cuando{color:var(--azul)}
.etapa:nth-of-type(3n) .etapa__cuando{color:var(--verde)}
.etapa h3{font-size:19px;margin:0;letter-spacing:-.025em;line-height:1.15}
.etapa p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.5}
@media (max-width:1000px){.etapas{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.etapas{grid-template-columns:1fr}}

/* ---------- Potenciado con IA ---------- */
.ia__comparador{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:16px;margin-bottom:14px}
.barra{display:grid;grid-template-columns:260px 1fr 170px;gap:16px;align-items:center;font-size:14px}
.barra__label{color:var(--ink-2)}
.barra--destacada .barra__label{color:var(--ink);font-weight:600}
.barra__track{height:12px;border-radius:3px;background:#e2e2de;overflow:hidden;display:block}
.barra__fill{display:block;height:100%;width:0;border-radius:3px;transition:width 1.4s var(--ease-out) .25s}
.reveal.is-in .barra__fill{width:var(--w,0%)}
.barra__fill--gris{background:#a1a1a6}
.barra__fill--azul{background:#8fb8ff}
.barra__fill--tri{background:var(--tri)}
.barra__valor{text-align:right;font-weight:600;white-space:nowrap}
.barra--destacada .barra__valor{font-size:19px}
.ia__fuente{margin:4px 0 0;font-size:12.5px;color:var(--ink-2)}
.ia__fuente strong{color:var(--verde)}
.ia__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ia__tile{grid-column:auto;background:var(--bg-2);position:relative;overflow:hidden}
.ia__tile::before{content:"";position:absolute;inset:0 0 auto;height:4px}
.ia__tile--rosa::before{background:var(--rosa)} .ia__tile--rosa .tile__icon{background:var(--rosa-soft);color:var(--rosa-ink)}
.ia__tile--azul::before{background:var(--azul)} .ia__tile--azul .tile__icon{background:var(--azul-soft);color:var(--azul-ink)}
.ia__tile--verde::before{background:var(--verde)} .ia__tile--verde .tile__icon{background:var(--verde-soft);color:var(--verde-ink)}
.ia__nota{color:var(--ink-2);font-size:15px;margin:28px 0 0;max-width:80ch;line-height:1.55}
@media (max-width:860px){.barra{grid-template-columns:1fr;gap:6px}.barra__valor{text-align:left}.ia__tiles{grid-template-columns:1fr}}

/* ---------- Cotizador (configurador) ---------- */
.config__grid{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start}
.paso{margin-bottom:clamp(40px,5vw,56px)}
.paso__t{display:flex;align-items:center;gap:12px;font-size:26px;font-weight:700;letter-spacing:-.03em;margin:0 0 18px}
.paso__n{width:30px;height:30px;border-radius:8px;background:var(--ink);color:#fff;font-size:13px;display:grid;place-items:center;font-family:var(--mono);flex-shrink:0}
.paso__d{color:var(--ink-2);margin:-8px 0 18px;font-size:15px}
.bases{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.base{position:relative;text-align:left;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-md);padding:24px 20px 20px;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;gap:10px;transition:border-color .25s,box-shadow .25s;overflow:hidden}
.base::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--tri);opacity:0;transition:opacity .25s}
.base:hover{border-color:var(--ink-3)}
.base.is-active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.base.is-active::before{opacity:1}
.base__tag{position:static;align-self:flex-start;margin:-4px 0 2px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:6px}
.base__nombre{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.03em}
.base__para{font-size:14px;color:var(--ink-2);line-height:1.45}
.base__trae{margin:2px 0 0;padding:0;list-style:none;font-size:13px;display:grid;gap:5px}
.base__trae li{display:flex;gap:8px;align-items:center}
.base__trae li::before{content:"";width:10px;height:2px;background:var(--ink);flex-shrink:0}
.base__precio{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:1px solid var(--line)}
.base__precio .mono{font-size:22px;font-weight:600}
.base__precio small{font-size:12px;color:var(--ink-2)}
.base__sinia{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:12px;color:var(--ink-2);margin-bottom:4px}
.base__sinia s{opacity:.9}
.base__sinia em{font-style:normal;font-family:var(--mono);font-weight:500;color:var(--verde-ink);background:var(--verde-soft);padding:2px 7px;border-radius:6px;font-size:10.5px;white-space:nowrap}
.fijos{margin-top:14px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 20px}
.fijos__t{margin:0 0 8px;font-weight:600;font-size:14px}
.fijos ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--ink-2)}
.fijos li::before{content:"\2713\00a0";color:var(--verde);font-weight:700}
.opts{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden;background:#fff}
.opt{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .2s}
.opt:last-child{border-bottom:0}
.opt:hover{background:#fafaf8}
.opt.is-on{background:var(--bg-2)}
.opt__txt{display:flex;flex-direction:column;gap:2px}
.opt__nombre{font-weight:600;font-size:16px;letter-spacing:-.01em}
.opt__desc{font-size:13px;color:var(--ink-2);line-height:1.4}
.opt__der{display:flex;align-items:center;gap:16px;flex-shrink:0}
.opt__precio{font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.switch{position:relative;display:inline-block;width:46px;height:28px;flex-shrink:0}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch__pista{position:absolute;inset:0;background:#dcdcd8;border-radius:980px;transition:background .25s;cursor:pointer}
.switch__pista::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.22);transition:transform .25s var(--ease)}
.switch input:checked+.switch__pista{background:var(--ink)}
.switch input:checked+.switch__pista::after{transform:translateX(18px)}
.switch input:focus-visible+.switch__pista{outline:3px solid var(--azul);outline-offset:2px}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:#fff}
.stepper__btn{width:34px;height:30px;border:0;background:#fff;font-size:18px;cursor:pointer;color:var(--ink);line-height:1}
.stepper__btn:hover{background:var(--bg-2)}
.stepper__val{min-width:30px;text-align:center;font-family:var(--mono);font-size:14px}
.planes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.plan{text-align:left;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-md);padding:18px 16px;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:border-color .25s,box-shadow .25s}
.plan:hover{border-color:var(--ink-3)}
.plan.is-active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.plan__nombre{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.025em}
.plan__para{font-size:13px;color:var(--ink-2)}
.plan__precio .mono{font-size:18px;font-weight:600}
.plan__precio small{color:var(--ink-2);font-size:12px;margin-left:3px}
.plan__trae{margin:4px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--ink-2);display:grid;gap:4px;line-height:1.35}
.plan--sin{justify-content:center;background:var(--bg-2)}
.campos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.campos label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.campos input,.campos select{font:inherit;font-family:var(--font);font-size:16px;letter-spacing:0;text-transform:none;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff;color:var(--ink);width:100%;-webkit-appearance:none;appearance:none}
.campos select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6167' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.campos input:focus,.campos select:focus{border-color:var(--ink);outline:3px solid rgba(17,18,20,.12);outline-offset:0}
.doc{border:0;padding:0;margin:0;display:flex;gap:8px 24px;flex-wrap:wrap}
.doc legend{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px;padding:0}
.doc label{display:flex;align-items:center;gap:8px;font-size:15px;cursor:pointer}
.doc input{accent-color:var(--ink);width:18px;height:18px;margin:0}
.res{position:sticky;top:84px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:14px}
.res__label{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.res__total{margin:0;font-size:42px;font-weight:600;letter-spacing:-.03em;line-height:1}
.res__doc{margin:-6px 0 0;font-size:13px;color:var(--ink-2)}
.res__lineas,.res__extras{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px}
.res__lineas{padding-top:12px;border-top:1px solid var(--line-2)}
.res__item{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.res__item dt{font-weight:600}
.res__item dd,.res__item span:last-child{font-family:var(--mono);margin:0;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:13px}
.res__item--muted{color:var(--ink-2)}
.res__ia{display:flex;flex-direction:column;gap:6px;font-size:14px;padding-top:12px;border-top:1px solid var(--line-2)}
.res__ia .res__item:first-child span:last-child{text-decoration:line-through;color:var(--ink-2)}
.res__item--ahorro{color:var(--verde-ink);font-weight:600}
.res__split,.res__meta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.res__split{padding-top:14px;border-top:1px solid var(--line-2)}
.res__split div,.res__meta div{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--ink-2)}
.res__split strong,.res__meta strong{color:var(--ink);font-size:15px;font-weight:600}
.res__nota{margin:0;font-size:11.5px;color:var(--ink-2);line-height:1.45}
.res-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;background:var(--ink);color:#fff;border-radius:12px;padding:12px 16px;display:none;align-items:center;justify-content:space-between;gap:12px;transform:translateY(120%);transition:transform .4s var(--ease-out)}
.res-bar.is-visible{transform:none}
.res-bar span{font-size:12px;opacity:.7;display:block}
.res-bar strong{font-size:19px;font-weight:600}
.res-bar .btn{background:#fff;color:var(--ink)}
@media (max-width:980px){
  .config__grid{grid-template-columns:1fr}
  .res{position:static}
  .planes{grid-template-columns:repeat(2,1fr)}
  .bases{grid-template-columns:1fr}
  .campos{grid-template-columns:1fr}
  .res-bar{display:flex}
}
@media (max-width:560px){
  .opt{flex-direction:column;align-items:flex-start;gap:10px}
  .opt__der{width:100%;justify-content:space-between}
  .planes{grid-template-columns:1fr}
  .res__split,.res__meta{grid-template-columns:1fr}
}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-2)}
.faq__item{border-bottom:1px solid var(--line-2)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.025em}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-family:var(--mono);font-size:24px;font-weight:400;color:var(--ink-2);transition:transform .3s var(--ease);flex-shrink:0}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item p{margin:0 0 22px;color:var(--ink-2);max-width:66ch;line-height:1.55}

/* ---------- CTA final y pie ---------- */
.cta__in{display:grid;grid-template-columns:1.1fr .9fr;gap:24px 56px;align-items:center}
.cta__in .h2{margin:0}
.cta__in .lead{margin:0 0 24px}
.cta__btns{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
@media (max-width:820px){.cta__in{grid-template-columns:1fr}}
.foot{position:relative;background:var(--ink);color:rgba(255,255,255,.72);padding:56px 0 28px;font-size:14px;overflow:hidden}
.foot::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 9px);pointer-events:none}
.foot::after{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--tri)}
.foot__in{position:relative;display:grid;grid-template-columns:1fr auto;gap:28px 48px;align-items:start}
.foot__logo{display:inline-flex;align-items:center;gap:10px;color:#fff;font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.04em;text-decoration:none;border-bottom:0}
.foot__logo .logo{width:40px;height:27px;--hl:#111214}
.foot__tag{margin:10px 0 0;max-width:42ch;line-height:1.5}
.foot nav{display:flex;gap:22px;flex-wrap:wrap;padding-top:6px}
.foot a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.foot a:hover{border-color:#fff}
.foot a.foot__logo{border-bottom:0}
.foot__legal{grid-column:1/-1;font-size:12px;color:rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.12);padding-top:18px;margin:8px 0 0}
.foot p{margin:0}
@media (max-width:640px){.foot__in{grid-template-columns:1fr}}

/* ---------- Modal de caso ---------- */
.modal{border:0;padding:0;background:transparent;max-width:min(940px,calc(100vw - 24px));width:100%;margin:auto;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:visible;color:var(--ink)}
.modal::backdrop{background:rgba(17,18,20,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal[open] .modal__in{animation:modalIn .55s var(--ease-out)}
.modal__in{background:#fff;border-radius:var(--r-lg);padding:clamp(24px,5vw,56px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;position:relative;overscroll-behavior:contain}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}
.modal__cerrar{position:sticky;top:0;float:right;width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);background:#fff;font-size:22px;line-height:1;cursor:pointer;z-index:2;margin:0 0 0 12px;color:var(--ink)}
.modal__cerrar:hover{background:var(--bg-2)}
.modal__head{max-width:640px}
.modal__head .h2{font-size:clamp(30px,4vw,44px)}
.modal__hero{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(16px,3vw,28px) clamp(16px,3vw,28px) 0;overflow:hidden;margin:24px 0 0}
.modal__hero .frame--phone{right:clamp(10px,3vw,28px);width:20%}
.ficha{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0 28px;padding:0}
.ficha>div{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:14px 16px;margin:0}
.ficha dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.ficha dd{margin:6px 0 0;font-size:14px;line-height:1.4}
.chips-mini{display:flex;flex-wrap:wrap;gap:6px}
.chips-mini span{font-size:12px;background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:4px 9px;white-space:nowrap}
.pasos-caso{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.paso-caso{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-md);padding:22px 24px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.paso-caso__n{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.paso-caso__k{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.paso-caso:nth-child(3n+1) .paso-caso__k{color:var(--rosa)}
.paso-caso:nth-child(3n+2) .paso-caso__k{color:var(--azul)}
.paso-caso:nth-child(3n) .paso-caso__k{color:var(--verde)}
.paso-caso h3{margin:2px 0 4px;font-size:21px;letter-spacing:-.03em;line-height:1.15}
.paso-caso p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.5}
.paso-caso--resultado{grid-column:1/-1;background:var(--ink);border-color:var(--ink);color:#fff;padding-top:26px}
.paso-caso--resultado::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--tri)}
.paso-caso--resultado::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 9px);pointer-events:none}
.paso-caso--resultado>*{position:relative;z-index:1}
.paso-caso--resultado .paso-caso__k,.paso-caso--resultado .paso-caso__n{color:rgba(255,255,255,.72)}
.paso-caso--resultado p{color:rgba(255,255,255,.78)}
.paso-caso--resultado .link{color:#fff;border-color:rgba(255,255,255,.35);margin-top:10px;align-self:flex-start}
.modal__adapta{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding:28px;margin-top:28px}
.modal__adapta h3{margin:0 0 8px;font-size:22px;letter-spacing:-.03em}
.modal__adapta p{margin:0 0 18px;color:var(--ink-2);line-height:1.55}
@media (max-width:760px){.ficha{grid-template-columns:1fr 1fr}.pasos-caso{grid-template-columns:1fr}}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
[data-stagger]>.reveal:nth-child(2){transition-delay:.07s}
[data-stagger]>.reveal:nth-child(3){transition-delay:.14s}
[data-stagger]>.reveal:nth-child(4){transition-delay:.21s}
[data-stagger]>.reveal:nth-child(5){transition-delay:.28s}
[data-stagger]>.reveal:nth-child(6){transition-delay:.35s}
[data-stagger]>.reveal:nth-child(7){transition-delay:.42s}
[data-stagger]>.reveal:nth-child(8){transition-delay:.49s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero__eyebrow,.hero__h1 span,.hero__lead,.hero__cta,.mac-stage{animation:none}
  .mac__lid,.mac__boot i,.mac__cursor{transition:none}
  .mac-stage{transform:none;opacity:1}
  .mac-stage.is-live .mac__float{animation:none}
  .disco,.cruce__centro,.etapas__bar,.barra__fill{transition:none}
  .modal[open] .modal__in{animation:none}
  .btn::before{transition:none}
}

/* =====================================================================
   MEJORAS · navegación, jerarquía y uso en celular (sep 2026)
   Criterios de ejemplos_webs_grandes/GUIA_DE_DISENO.md:
   fondo sin blanco puro · contraste AA · una acción por pantalla ·
   zonas táctiles de 44px · texto nunca bajo 14px en celular.
   ===================================================================== */

/* ---------- Paleta: papel cálido, tarjetas blancas (sep 2026) ---------- */
:root{
  --bg:#efeeea;          /* la hoja: gris cálido, nunca blanco puro */
  --bg-2:#e4e2dc;        /* relleno suave dentro de tarjetas blancas */
  --card:#ffffff;        /* la luz que entra por la persiana */
  --ink-3:#666870;       /* 4,7:1 sobre --bg: pasa AA */
  --line:#d8d6ce;
  --line-2:#c0bdb2;
}
.nav{background:rgba(239,238,234,.84)}
@media (max-width:900px){.nav.is-open,.nav.is-open .nav__links{background:var(--bg)}}

/* ---------- Navegación: dónde estoy y cuánto falta ---------- */
.nav__progreso{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.nav__progreso i{display:block;height:100%;width:0;background:var(--tri);transition:width .12s linear}
.nav__links a[data-spy]{position:relative}
.nav__links a[data-spy].is-actual{opacity:1}
.nav__links a[data-spy].is-actual::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--ink)}
@media (min-width:901px){.nav__extra{display:none}}
@media (max-width:900px){
  .nav__links a[data-spy].is-actual::after{display:none}
  .nav__links a[data-spy].is-actual{color:var(--ink);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
}

/* ---------- Celular: legibilidad ---------- */
@media (max-width:900px){
  .sec{padding:clamp(56px,9vw,96px) 0}
  .wrap{width:min(var(--wrap),calc(100% - 36px))}
  .sec li,.modal li{font-size:14px;line-height:1.55}
  .paso-caso__k,.etapa__cuando,.res__nota,.fotos__nota,.marca-card__leyenda,.hero__rubros-nota,small{font-size:13.5px;line-height:1.5}
  .base__tag{font-size:12px}
  .eyebrow{font-size:12.5px}
  .lead{font-size:17px}
}

/* ---------- Celular: zonas táctiles de 44px ---------- */
@media (max-width:900px){
  .link{min-height:44px;align-items:center}
  .chip{min-height:44px;display:inline-flex;align-items:center;font-size:12.5px;padding:10px 16px}
  .vivo__item{min-height:44px;display:inline-flex;align-items:center;font-size:13px}
  .stepper__btn{width:44px;height:44px;font-size:20px}
  .btn--sm{padding:12px 18px;font-size:15px;border-radius:10px}
  .foot nav a,.foot__in nav a{display:inline-flex;align-items:center;min-height:44px}
  .nav__links a{padding:18px 0}
  .foot{padding-bottom:108px}
  html{scroll-padding-bottom:84px}
}

/* ---------- Celular: una acción siempre a mano ---------- */
.cta-movil{position:fixed;left:12px;right:12px;bottom:12px;z-index:39;display:none;gap:10px;transform:translateY(160%);transition:transform .45s var(--ease-out)}
.cta-movil.is-visible{transform:none}
.cta-movil__btn{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 18px;background:var(--ink);color:#fff;border-radius:13px;font-weight:600;font-size:16.5px;letter-spacing:-.01em;text-decoration:none;box-shadow:0 10px 30px rgba(17,18,20,.22)}
.cta-movil__btn:active{transform:scale(.98)}
.cta-movil__wa{width:54px;min-height:54px;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--verde);border:1px solid var(--line-2);border-radius:13px;box-shadow:0 10px 30px rgba(17,18,20,.12)}
@media (max-width:900px){.cta-movil{display:flex}}
@media (prefers-reduced-motion:reduce){.cta-movil{transition:none}.nav__progreso i{transition:none}}

/* Etiquetas y logo del pie: piso de 12px y zona táctil completa */
@media (max-width:900px){
  .badge-ia,.vivo__label,.persona__stack span,.flujo__n,.persona__rol{font-size:12px}
  .foot__logo{min-height:44px;align-items:center}
}

/* =====================================================================
   RE-DISEÑO COMERCIAL · septiembre 2026
   Menos texto, más aire. La persiana se abre y el ojo mira.
   ===================================================================== */

/* ---------- Acento en itálica serif (palabra que carga el titular) ---------- */
.acento{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.07em;letter-spacing:-.005em}
.h1-hoja{font-family:var(--display);font-size:clamp(42px,6.6vw,84px);font-weight:800;letter-spacing:-.045em;line-height:.96;margin:0 0 20px;text-wrap:balance}

/* ---------- Nav de varias páginas ---------- */
.nav__links a[aria-current="page"]{opacity:1;font-weight:600}
.nav__links a[aria-current="page"]:not(.btn)::after{content:"";display:block;height:2px;margin-top:3px;background:var(--tri)}
@media (max-width:900px){.nav__links a[aria-current="page"]:not(.btn)::after{display:none}
  .nav__links a[aria-current="page"]:not(.btn){background:linear-gradient(90deg,rgba(232,48,111,.10),transparent 60%)}}

/* ---------- Página interior: encabezado ---------- */
.hoja{padding:clamp(48px,7vw,88px) 0 clamp(28px,4vw,44px);position:relative;isolation:isolate;overflow:hidden}
.hoja::before{content:"";position:absolute;inset:0 0 auto;height:420px;background:var(--slats);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 92%);mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 92%);pointer-events:none;z-index:-1}
.hoja__volver{display:flex;width:fit-content;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;margin-bottom:22px}
.hoja__volver::before{content:"\2190";transition:transform .25s var(--ease)}
.hoja__volver:hover{color:var(--ink)}
.hoja__volver:hover::before{transform:translateX(-4px)}

/* ---------- Marquesina de servicios ---------- */
.marquesina{border-block:1px solid var(--line);background:var(--card);overflow:hidden;padding:16px 0;--vel:38s}
.marquesina__pista{display:flex;width:max-content;gap:0;animation:desfilar var(--vel) linear infinite}
.marquesina:hover .marquesina__pista{animation-play-state:paused}
.marquesina__grupo{display:flex;align-items:center;gap:0;flex-shrink:0}
.marquesina__grupo span{font-family:var(--display);font-size:clamp(20px,2.6vw,30px);font-weight:600;letter-spacing:-.03em;white-space:nowrap;padding:0 26px}
.marquesina__ojo{width:26px;height:18px;flex-shrink:0;opacity:.9}
@keyframes desfilar{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Casos: rejilla editorial tipo pegatina ---------- */
.obras{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(28px,4vw,56px) clamp(20px,3vw,40px)}
.obra{grid-column:span 6;display:block;text-decoration:none;color:inherit;transform:rotate(var(--giro,0deg));transition:transform .5s var(--ease-out)}
.obra:nth-child(1){grid-column:span 7;--giro:-.7deg}
.obra:nth-child(2){grid-column:span 5;--giro:.8deg;margin-top:clamp(0px,5vw,64px)}
.obra:nth-child(3){grid-column:span 7;--giro:.5deg;grid-column-start:4}
.obra:hover,.obra:focus-visible{transform:rotate(0deg) translateY(-4px)}
.obra__media{position:relative;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg-2);aspect-ratio:4/3;display:block}
.obra__media img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .7s var(--ease-out)}
.obra:hover .obra__media img{transform:scale(1.045)}
.obra__ver{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:9px 15px;border-radius:999px;opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease),transform .35s var(--ease-out)}
.obra:hover .obra__ver,.obra:focus-visible .obra__ver{opacity:1;transform:none}
.obra__pie{display:flex;flex-direction:column;gap:5px;padding:18px 2px 0}
.obra__cat{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.obra__nombre{font-family:var(--display);font-size:clamp(26px,3.2vw,38px);font-weight:700;letter-spacing:-.035em;line-height:1.04;margin:0}
.obra__linea{margin:0;color:var(--ink-2);font-size:16.5px;max-width:42ch;text-wrap:pretty}
@media (max-width:820px){
  .obras{grid-template-columns:1fr;gap:44px}
  .obra,.obra:nth-child(1),.obra:nth-child(2),.obra:nth-child(3){grid-column:1/-1;grid-column-start:auto;margin-top:0;--giro:0deg}
  .obra__ver{opacity:1;transform:none}
}

/* ---------- Los 5 pasos: el ojo que se abre ---------- */
.pasos__top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4vw,44px);flex-wrap:wrap}
.pasos__flechas{display:flex;gap:10px;flex-shrink:0}
.flecha{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),opacity .25s}
.flecha:hover:not(:disabled){background:var(--ink);color:var(--bg)}
.flecha:disabled{opacity:.28;cursor:default}
.flecha svg{width:17px;height:17px}

.ojo-guia{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.ojo-guia__svg{width:112px;height:75px;flex-shrink:0}
.ojo-guia__lamas rect{transition:transform .6s var(--ease-out),opacity .6s var(--ease)}
.ojo-guia__barra{flex:1;height:2px;background:var(--line-2);position:relative;overflow:hidden;border-radius:2px}
.ojo-guia__barra i{position:absolute;inset:0 auto 0 0;width:20%;background:var(--tri);border-radius:2px;transition:width .6s var(--ease-out)}
.ojo-guia__txt{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);flex-shrink:0}

.pasos__pista{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;margin-inline:calc(var(--sangria,0px) * -1);padding-inline:var(--sangria,0px)}
.pasos__pista::-webkit-scrollbar{display:none}
.paso5{flex:0 0 clamp(268px,30vw,376px);scroll-snap-align:start;padding:clamp(22px,2.6vw,34px) clamp(20px,2.4vw,32px);border-left:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;gap:16px}
.paso5:first-child{border-left:0}
.paso5__arte{height:clamp(132px,15vw,168px);display:grid;place-items:center}
.paso5__arte svg{width:100%;height:100%;overflow:visible}
.paso5 .paso5__n{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--ink-3);margin:0}
.paso5 h3{font-family:var(--display);font-size:clamp(21px,2.2vw,26px);font-weight:700;letter-spacing:-.03em;line-height:1.12;margin:0}
.paso5 h3 em{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:.92em;letter-spacing:-.005em;color:var(--ink-2);margin-top:2px}
.paso5 p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.55;text-wrap:pretty}
@media (max-width:640px){.paso5{flex-basis:82vw;border-left:0;border-top:1px solid var(--line)}.paso5:first-child{border-top:0}}

/* Animaciones de las láminas dentro de las ilustraciones */
.arte-lama{transform-box:fill-box;transform-origin:center}
.pasos__pista .paso5.is-vista .arte-lama{animation:lama-abre .9s var(--ease-out) both}
.paso5.is-vista .arte-lama:nth-of-type(5){animation-delay:.07s}
.paso5.is-vista .arte-lama:nth-of-type(6){animation-delay:.14s}
@keyframes lama-abre{from{transform:scaleY(1)}to{transform:scaleY(.18)}}
.arte-pupila{animation:parpadeo 6s ease-in-out infinite}
@keyframes parpadeo{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.06)}}

/* ---------- Agenda (Calendly) ---------- */
.agenda__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:900px){.agenda__grid{grid-template-columns:1fr}}
.agenda__pitch h2{margin-bottom:14px}
.agenda__lista{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:0}
.agenda__lista li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-top:1px solid var(--line);font-size:16.5px;color:var(--ink-2)}
.agenda__lista li:last-child{border-bottom:1px solid var(--line)}
.agenda__lista b{color:var(--ink);font-weight:600}
.agenda__tic{flex-shrink:0;width:20px;height:20px;margin-top:2px}
.agenda__caja{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden;min-height:640px}
.calendly-inline-widget{min-width:280px;height:680px}
@media (max-width:640px){.agenda__caja{min-height:900px}.calendly-inline-widget{height:940px}}
.agenda__respaldo{padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;gap:18px;align-items:flex-start;min-height:inherit;justify-content:center}
.agenda__respaldo h3{font-family:var(--display);font-size:clamp(24px,2.6vw,30px);font-weight:700;letter-spacing:-.03em;margin:0}
.agenda__respaldo p{margin:0;color:var(--ink-2);max-width:44ch}
.agenda__botones{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:6px}

/* ---------- Puente al cotizador ---------- */
.puente{background:var(--ink);color:#fff;padding:clamp(56px,7vw,88px) 0;position:relative;overflow:hidden;isolation:isolate}
.puente::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 10px);z-index:-1}
.puente__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 48px;align-items:center}
@media (max-width:820px){.puente__in{grid-template-columns:1fr}}
.puente h2{font-family:var(--display);font-size:clamp(30px,4.2vw,50px);font-weight:700;letter-spacing:-.04em;line-height:1.04;margin:0 0 10px;text-wrap:balance}
.puente p{margin:0;color:rgba(255,255,255,.72);max-width:50ch;font-size:17px}
.puente .btn{background:#fff;color:var(--ink)}
.puente .btn:hover{color:#fff}
.puente__precio{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:14px;display:block}

/* ---------- Prueba social compacta ---------- */
.confian{display:flex;align-items:center;gap:clamp(20px,4vw,52px);flex-wrap:wrap;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.confian__label{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);flex-shrink:0}
.confian__marcas{display:flex;gap:clamp(16px,3vw,38px);flex-wrap:wrap;align-items:center}
.confian__marcas a{font-family:var(--display);font-size:clamp(17px,2vw,22px);font-weight:600;letter-spacing:-.03em;color:var(--ink);text-decoration:none;opacity:.72;transition:opacity .2s}
.confian__marcas a:hover{opacity:1}

/* ---------- Fotos, versión breve ---------- */
.tira{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,20px)}
.tira img{border-radius:var(--r-md);border:1px solid var(--line);aspect-ratio:1;object-fit:cover;width:100%}
.tira figure{margin:0;transform:rotate(var(--g,0deg));transition:transform .5s var(--ease-out)}
.tira figure:nth-child(1){--g:-1.2deg}
.tira figure:nth-child(2){--g:.9deg;margin-top:clamp(0px,3vw,32px)}
.tira figure:nth-child(3){--g:-.6deg}
.tira figure:hover{transform:rotate(0) translateY(-4px)}
@media (max-width:640px){.tira{grid-template-columns:1fr 1fr}.tira figure:nth-child(3){display:none}}

/* ---------- Apertura de la persiana al cargar ---------- */
.persiana-intro{position:fixed;inset:0;z-index:200;pointer-events:none;display:grid;grid-template-rows:repeat(6,1fr)}
.persiana-intro i{background:var(--ink);transform-origin:top;transform:scaleY(0);animation:lama-sube .85s var(--ease-out) both}
.persiana-intro i:nth-child(1){animation-delay:.02s}
.persiana-intro i:nth-child(2){animation-delay:.07s}
.persiana-intro i:nth-child(3){animation-delay:.12s}
.persiana-intro i:nth-child(4){animation-delay:.17s}
.persiana-intro i:nth-child(5){animation-delay:.22s}
.persiana-intro i:nth-child(6){animation-delay:.27s}
@keyframes lama-sube{from{transform:scaleY(1)}to{transform:scaleY(0)}}

@media (prefers-reduced-motion: reduce){
  .marquesina__pista{animation:none}
  .persiana-intro{display:none}
  .arte-pupila,.paso5.is-vista .arte-lama{animation:none}
  .obra,.obra:hover,.tira figure,.tira figure:hover{transform:none;transition:none}
  .obra__ver{opacity:1;transform:none}
}

/* ---------- Remates del re-diseño ---------- */
.ojo-guia__lamas rect{transform-box:fill-box;transform-origin:center}
.ojo-guia[data-paso="2"] .ojo-guia__lamas rect:nth-child(-n+1),
.ojo-guia[data-paso="3"] .ojo-guia__lamas rect:nth-child(-n+2),
.ojo-guia[data-paso="4"] .ojo-guia__lamas rect:nth-child(-n+3),
.ojo-guia[data-paso="5"] .ojo-guia__lamas rect:nth-child(-n+4),
.ojo-guia[data-paso="5"] .ojo-guia__lamas rect:nth-child(5){transform:scaleY(.05);opacity:0}
.obra:focus-within{transform:rotate(0deg) translateY(-4px)}
.obra:focus-within .obra__ver{opacity:1;transform:none}
.obra__media:focus-visible{outline:3px solid rgba(10,108,255,.55);outline-offset:3px}
.confian .vivo__item{border:0;padding:0;background:none;font-family:var(--display);font-size:clamp(17px,2vw,22px);font-weight:600;letter-spacing:-.03em;color:var(--ink);opacity:.72;border-radius:0}
.confian .vivo__item:hover{opacity:1;background:none;border:0;color:var(--ink)}
.agenda__caja .calendly-inline-widget{width:100%}
.calendly-badge-widget{z-index:40}
@media (max-width:900px){.calendly-badge-widget{display:none!important}}
.res__acciones-nota{font-size:13px;color:var(--ink-3);text-align:center;margin:0}
@media (prefers-reduced-motion: reduce){.ojo-guia__lamas rect{transition:none}}