/* =====================================================================
   lata. · Área de clientes
   Lenguaje visual tomado de las grillas en HTML que el equipo arma por
   cliente (Proindar · Octubre 2026): portada oscura con panel de acento,
   teléfonos simulados, calendario, vitrina con tira de láminas y brillo
   ambiental. Aquí convertido en una app navegable en vez de diapositivas.
   --v (acento) lo define el layout con el color de marca del cliente.
   ===================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --v:#541CFF;
  --v2:color-mix(in oklab,var(--v) 78%,#000);
  --v3:color-mix(in oklab,var(--v) 55%,#fff);
  --soft:color-mix(in oklab,var(--v) 9%,#fff);
  --softb:color-mix(in oklab,var(--v) 22%,#fff);
  --ink:#1F1A33;--ink2:#15112A;--muted:#5C6080;--faint:#8A8EA8;
  --line:#DFE2EE;--alt:#F4F5FB;
  --ok:#2F8A5B;--okbg:#E7F5EC;--okb:#A6D8BB;
  --warn:#B04A70;--warnbg:#FBEAF0;--warnb:#E8AFC3;
  --dark1:#1E1838;--dark2:#15112A;--dark3:#0D0A1E;
  --ease:cubic-bezier(.2,.8,.2,1);
  --r:14px;
  --sh:0 8px 22px rgba(60,55,120,.08);
  --gut:clamp(16px,4vw,64px);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:#E6E9F4}
body{font-family:Montserrat,system-ui,sans-serif;color:var(--ink);background:#EEF0F8;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
body.page-light{background:linear-gradient(180deg,#EEF0F8 0%,#E6E9F4 100%)}
a{color:inherit}
img,video{max-width:100%}
button{font:inherit;color:inherit}
svg{display:block}
.wrap{width:100%;max-width:1280px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.spread{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
[hidden]{display:none!important}

/* ---------- Animaciones de entrada (las del referente) ---------- */
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{opacity:0;transform:scale(.9)}70%{opacity:1;transform:scale(1.02)}100%{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes panel{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(-2deg)}}
.an{opacity:0}
.on .an{animation:up .75s var(--ease) var(--d,0s) both}
.on .an.fade{animation-name:fade}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease) var(--rd,0s),transform .8s var(--ease) var(--rd,0s)}
.reveal.is-in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
.rule{width:42px;height:5px;background:var(--v);border-radius:3px;margin:14px 0 16px;transform-origin:left}
.on .rule.an,.reveal.is-in .rule,.reveal.is-in.rule{animation:grow .55s var(--ease) .1s both}

/* ---------- Tipografía ---------- */
.eb{font-size:12px;font-weight:800;letter-spacing:.22em;color:var(--v);text-transform:uppercase}
.light-eb{color:var(--v3)}
.h1{font-size:clamp(40px,6vw,64px);font-weight:900;line-height:1;letter-spacing:-.035em}
.h2{font-size:clamp(28px,3.6vw,42px);font-weight:900;line-height:1.05;letter-spacing:-.025em}
.h3{font-size:22px;font-weight:800;letter-spacing:-.01em}
.lead{font-size:16px;line-height:1.55;color:var(--muted);margin-top:10px;max-width:680px}
.note{font-size:13px;color:var(--v2);font-style:italic;margin-top:14px}
.pc{font-weight:900;color:var(--v)}
.linkbtn{background:none;border:0;padding:0;color:var(--v2);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-style:normal}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;border:0;border-radius:12px;padding:14px 20px;font-weight:800;font-size:14px;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s;white-space:nowrap}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn--v{background:var(--v);color:#fff;box-shadow:0 12px 26px color-mix(in oklab,var(--v) 38%,transparent)}
.btn--v:hover{transform:translateY(-2px);box-shadow:0 16px 32px color-mix(in oklab,var(--v) 48%,transparent)}
.btn--ok{background:var(--ok);color:#fff;box-shadow:0 12px 24px rgba(47,138,91,.28)}
.btn--ok:hover{transform:translateY(-2px)}
.btn--warn{background:var(--warn);color:#fff;margin-top:10px}
.btn--ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--v);color:var(--v2)}
.btn--wide{width:100%;justify-content:center;margin-top:18px}
.btn:focus-visible,.th:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--v3);outline-offset:3px}
.ca-iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink);text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.ca-iconbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ca-iconbtn:hover{background:var(--v);border-color:var(--v);color:#fff}
.ca-iconbtn.is-off{opacity:.35;pointer-events:none}
.ca-iconbtn--sm{width:32px;height:32px;border-radius:8px}
.ca-iconbtn.is-done{background:var(--ok);border-color:var(--ok);color:#fff}

/* ---------- Pills de estado ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;border-radius:999px;padding:6px 12px;border:1px solid}
.st--pending{color:var(--muted);background:#fff;border-color:var(--line)}
.st--approved{color:var(--ok);background:var(--okbg);border-color:var(--okb)}
.st--changes_requested{color:var(--warn);background:var(--warnbg);border-color:var(--warnb)}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85}
.pf{font-size:11.5px;font-weight:800;color:var(--v2);background:var(--soft);border:1px solid var(--v);border-radius:999px;padding:6px 14px;white-space:nowrap}

/* ---------- Barra superior ---------- */
.ca-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:20px;padding:14px var(--gut);background:rgba(238,240,248,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(200,205,225,.5)}
.ca-top--dark{background:rgba(21,17,42,.95);border-bottom-color:rgba(255,255,255,.08);color:#fff}
.ca-cobrand{font-size:19px;font-weight:900;text-decoration:none;white-space:nowrap;letter-spacing:-.01em}
.ca-cobrand .sep,.auth__brand .sep{color:color-mix(in oklab,currentColor 35%,transparent);margin:0 9px;font-weight:400}
.ca-cobrand .logo2,.auth__brand .logo2{color:var(--v)}
.ca-top--dark .ca-cobrand .logo2{color:var(--v3)}
.ca-top__nav{display:flex;gap:4px;margin:0 auto}
.ca-top__nav a{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;font-size:13px;font-weight:700;text-decoration:none;color:inherit;opacity:.7;transition:opacity .2s,background .2s}
.ca-top__nav a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.ca-top__nav a:hover{opacity:1}
.ca-top__nav a.is-on{opacity:1;background:var(--soft);color:var(--v2)}
.ca-top--dark .ca-top__nav a.is-on{background:rgba(255,255,255,.1);color:#fff}
.ca-top__me{display:flex;align-items:center;gap:10px;margin-left:auto}
.ca-top__nav+.ca-top__me{margin-left:0}
.ca-me{font-size:12.5px;font-weight:700;opacity:.8;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-top--dark .ca-iconbtn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}
@media (max-width:640px){.ca-me,.ca-top__nav a span{display:none}.ca-top{gap:10px}.ca-cobrand{font-size:16px}}

.ca-preview-bar{background:#FFEC00;color:#241D36;font-size:13px;padding:9px var(--gut);text-align:center;position:relative;z-index:50}
.ca-preview-bar a{font-weight:800;margin-left:8px}

.ca-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--dark2);color:#fff;font-size:13.5px;font-weight:700;padding:12px 18px;border-radius:12px;z-index:60;box-shadow:0 18px 40px rgba(0,0,0,.25);animation:toast 5s .2s forwards;max-width:calc(100% - 32px)}
@keyframes toast{0%{opacity:0;transform:translate(-50%,16px)}8%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;visibility:hidden;transform:translate(-50%,8px)}}

/* ---------- Superficies ---------- */
.dark{background:linear-gradient(140deg,var(--dark1) 0%,var(--dark2) 60%,var(--dark3) 100%);color:#fff;position:relative;overflow:hidden}
.light{position:relative;overflow:hidden}
.band{padding:clamp(56px,8vw,96px) 0}
.band--tight{padding:clamp(40px,5vw,64px) 0}
.band.light::before{content:"";position:absolute;right:-180px;top:-220px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--v) 18%,transparent),transparent 70%);pointer-events:none}
.band.light>.wrap{position:relative}
.vglow{position:absolute;right:-160px;top:-160px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--v) 45%,transparent),transparent 68%);pointer-events:none}
.band--cta{padding:48px 0}

/* =====================================================================
   ACCESO
   ===================================================================== */
.auth{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);min-height:100vh;background:linear-gradient(140deg,var(--dark1),var(--dark2) 60%,var(--dark3));color:#fff}
.auth__l{display:flex;flex-direction:column;padding:44px var(--gut) 32px;position:relative;z-index:2}
.auth__brand{font-size:19px;font-weight:900}
.auth__brand .logo2{color:var(--v3)}
.auth__main{margin:auto 0;max-width:560px;padding:48px 0}
.auth .eb{color:var(--v3)}
.auth__title{font-size:clamp(40px,5.4vw,68px);font-weight:900;line-height:.98;letter-spacing:-.04em;margin-top:16px}
.auth__title em{font-style:normal;color:var(--v3)}
.auth__lead{font-size:16px;line-height:1.55;color:#C3C6E0;margin-top:22px;padding-left:16px;border-left:4px solid var(--v);max-width:470px}
.auth__lead b{color:#fff}
.auth__form{margin-top:34px}
.auth__label{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9EA2C4;margin-bottom:10px}
.auth__row{display:flex;gap:10px;flex-wrap:wrap}
.auth__input{flex:1;min-width:220px;height:54px;border-radius:12px;border:1.5px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;font:600 16px Montserrat,sans-serif;padding:0 18px;transition:border-color .2s,background .2s}
.auth__input::placeholder{color:#7D80A3}
.auth__input:focus{outline:none;border-color:var(--v3);background:rgba(255,255,255,.1)}
.auth__row .btn{height:54px}
.is-bad{border-color:#E57FA3!important}
.auth__err{color:#FF9DBF;font-size:13.5px;font-weight:600;margin-top:10px}
.auth__ok{color:#9FF0C4;font-size:13.5px;font-weight:600;margin-top:10px}
.auth__hint{font-size:12.5px;color:#8C90B3;margin-top:14px}
.auth__check{display:flex;align-items:center;gap:9px;font-size:13px;color:#C3C6E0;margin-top:18px;cursor:pointer}
.auth__check input{width:17px;height:17px;accent-color:var(--v)}
.auth__alt{display:flex;gap:10px;align-items:center;font-size:13px;color:#8C90B3;margin-top:22px}
.auth__alt a,.auth__alt .linkbtn{color:#C9C2FF}
.auth__foot{font-size:12px;color:#7D80A3}
.auth__foot a{color:#B9B2F0}
.otp{display:flex;gap:10px}
.otp__cell{width:clamp(44px,8vw,60px);height:clamp(54px,9vw,68px);border-radius:12px;border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font:800 28px Montserrat,sans-serif;text-align:center;font-variant-numeric:tabular-nums;transition:border-color .2s,background .2s,transform .2s}
.otp__cell:focus{outline:none;border-color:var(--v3);background:rgba(255,255,255,.12);transform:translateY(-2px)}
.otp__cell.has{border-color:var(--v)}
.otp.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}

.auth__r{position:relative;overflow:hidden}
.auth__r .vpanel{position:absolute;inset:0;background:linear-gradient(160deg,var(--v),var(--v2))}
.on .auth__r .vpanel{animation:panel 1s cubic-bezier(.7,0,.2,1) both}
.auth__r .vglow{left:-200px;right:auto;top:auto;bottom:-260px;opacity:.6}
.auth-card{position:absolute;left:12%;top:16%;width:250px;background:#fff;color:var(--ink);border-radius:16px;box-shadow:0 40px 80px rgba(0,0,0,.4);padding:20px;z-index:3;transform:rotate(-2deg)}
.on .auth-card{animation:pop .7s var(--ease) .75s both,float 6s ease-in-out 1.8s infinite}
.auth-phone{position:absolute;right:12%;bottom:-40px;z-index:2;transform:rotate(4deg)}
.cc-row{display:flex;gap:5px;margin-bottom:14px}
.dot{width:8px;height:8px;border-radius:50%;background:#E4E7F2;display:block}.dot.g{background:var(--v3)}.dot.y{background:#C9CEE6}
.cc-big{font-size:36px;font-weight:900;line-height:.95;color:var(--v);letter-spacing:-.03em}
.cc-lab{font-size:13px;font-weight:700;color:var(--muted);margin-top:4px}
.cc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:16px 0 12px}
.cc-grid i{height:22px;border-radius:4px;background:var(--soft);border:1px solid var(--softb)}
.cc-grid i.on{background:var(--okbg);border-color:var(--okb)}
.cc-foot{font-size:11.5px;color:var(--faint);font-weight:700;border-top:1px solid var(--line);padding-top:10px;display:flex;align-items:center;gap:6px}
.okdot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth__r{display:none}
  .auth__main{padding:40px 0}
}

/* =====================================================================
   INICIO
   ===================================================================== */
.home,.metrics{padding-top:clamp(36px,6vw,72px);padding-bottom:96px}
.home__head{margin-bottom:34px}
.hero-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:22px;overflow:hidden;text-decoration:none;color:#fff;background:linear-gradient(140deg,var(--dark1),var(--dark2) 60%,var(--dark3));box-shadow:0 30px 60px rgba(30,24,70,.25);position:relative;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.hero-card:hover{transform:translateY(-4px);box-shadow:0 40px 80px rgba(30,24,70,.32)}
.hero-card__l{padding:clamp(28px,4vw,52px);position:relative;z-index:2;container-type:inline-size;min-width:0}
.hero-card__month{font-size:clamp(40px,calc(100cqi / (var(--len,7) * .6)),104px);white-space:nowrap;font-weight:900;line-height:.9;letter-spacing:-.045em;margin-top:14px}
.hero-card__year{font-size:clamp(26px,3vw,36px);font-weight:900;color:var(--v3);margin-top:8px}
.hero-card .rv-prog{margin:22px 0 26px;max-width:380px}
.hero-card__r{position:relative;background:linear-gradient(160deg,var(--v),var(--v2));min-height:320px;overflow:hidden}
.stack{position:absolute;inset:0;display:grid;place-items:center}
.stack img{position:absolute;width:42%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;border:3px solid #fff;box-shadow:0 24px 44px rgba(0,0,0,.35);transform:translateX(calc((var(--i) - (var(--n) - 1) / 2) * 34%)) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 6deg)) translateY(calc(var(--i) * 0px));transition:transform .55s var(--ease)}
.hero-card:hover .stack img{transform:translateX(calc((var(--i) - (var(--n) - 1) / 2) * 44%)) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 8deg)) translateY(-8px)}
.stack__empty{font-weight:800;color:rgba(255,255,255,.75)}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.g-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;text-decoration:none;box-shadow:var(--sh);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.g-card:hover{transform:translateY(-4px);border-color:var(--v);box-shadow:0 18px 36px rgba(60,55,120,.14)}
.g-card__month{font-size:28px;font-weight:900;letter-spacing:-.02em}
.g-card__month span{color:var(--v)}
.g-card__meta{font-size:13px;color:var(--muted);margin:4px 0 14px}
@media (max-width:820px){.hero-card{grid-template-columns:1fr}.hero-card__r{min-height:260px}}

/* Progreso de revisión */
.rv-prog__bar{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--line);gap:2px}
.rv-prog--dark .rv-prog__bar{background:rgba(255,255,255,.14)}
.rv-prog__bar i{display:block;height:100%;transform-origin:left;animation:grow 1s var(--ease) .9s both}
.rv-prog__bar i.ok{background:var(--ok)}
.rv-prog__bar i.warn{background:var(--warn)}
.rv-prog--dark .rv-prog__bar i.ok{background:#5BD195}
.rv-prog--dark .rv-prog__bar i.warn{background:#F08AAE}
.rv-prog__lab{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;font-weight:700;color:var(--muted);margin-top:9px}
.rv-prog--dark .rv-prog__lab{color:#A9ADCF}
.rv-prog__lab span{display:flex;align-items:center;gap:6px}
.rv-prog__lab i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.rv-prog--dark .rv-prog__lab i{background:rgba(255,255,255,.25)}
.rv-prog__lab i.ok{background:var(--ok)}.rv-prog--dark .rv-prog__lab i.ok{background:#5BD195}
.rv-prog__lab i.warn{background:var(--warn)}.rv-prog--dark .rv-prog__lab i.warn{background:#F08AAE}

/* =====================================================================
   GRILLA · portada
   ===================================================================== */
.cover{min-height:min(820px,calc(100vh - 66px));display:flex;align-items:center}
.cover .vpanel{position:absolute;right:0;top:0;width:33%;height:100%;background:linear-gradient(160deg,var(--v),var(--v2))}
.on .cover .vpanel{animation:panel 1s cubic-bezier(.7,0,.2,1) both}
.cover__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);align-items:center;gap:40px;padding-top:56px;padding-bottom:72px}
.c-main{container-type:inline-size;min-width:0}
/* El mes se ajusta a su largo y al ancho de la columna: "Mayo" llega al
   máximo y "Septiembre" se achica en vez de montarse sobre los teléfonos.
   --len es la cantidad de letras; 0.6em es el ancho medio por letra de
   Montserrat Black con el tracking negativo. */
.c-title{font-size:clamp(48px,calc(100cqi / (var(--len,7) * .6)),148px);font-weight:900;line-height:.88;letter-spacing:-.05em;margin-top:16px;white-space:nowrap}
.c-year{font-size:clamp(30px,4vw,44px);font-weight:900;color:var(--v3);margin-top:10px}
.c-tag{font-size:17px;color:#C3C6E0;margin-top:26px;padding-left:16px;border-left:4px solid var(--v);max-width:460px;line-height:1.45}
.c-stat{font-size:14px;font-weight:700;color:#9195BD;margin-top:20px}
.c-stat b{color:#fff;font-weight:900;font-size:18px}
.cover__phones{position:relative;height:560px}
.p3d{position:absolute;z-index:2}
.p3d--a{left:4%;top:20px}
.p3d--b{right:2%;top:96px}
.p3d--solo{left:50%;top:30px;transform:translateX(-50%)}
.c-card{position:absolute;left:50%;top:70px;margin-left:-125px;width:250px;background:#fff;color:var(--ink);border-radius:16px;box-shadow:0 40px 80px rgba(0,0,0,.45);padding:20px;z-index:3;transform:rotate(-2deg)}
.on .c-card{animation:pop .7s var(--ease) .75s both,float 6s ease-in-out 1.8s infinite}
@media (max-width:1020px){
  .cover__in{grid-template-columns:1fr}
  .cover .vpanel{width:100%;height:46%;top:auto;bottom:0}
  .cover__phones{height:520px;max-width:520px;width:100%;margin:0 auto}
}
@media (max-width:560px){
  .cover__phones{height:440px}
  .cover__phones .phone{--pw:180px!important}
  .p3d--a{left:0}.p3d--b{right:0;top:70px}
}

/* ---------- Intro ---------- */
.intro{font-size:clamp(18px,2vw,22px);line-height:1.55;max-width:860px;font-weight:500;color:var(--ink)}

/* ---------- Calendario ---------- */
.cal{margin-top:28px}
.cal-h{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:10px}
.cal-h div{text-align:center;font-size:12.5px;font-weight:800;color:var(--v)}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cd{min-height:96px;border-radius:12px;background:#fff;border:1px solid var(--line);padding:10px 12px;position:relative;overflow:hidden;text-decoration:none;display:block}
.cd.empty{background:transparent;border:0}
.cd.on{background:var(--soft);border:1.5px solid var(--v);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.cd.on:hover{transform:translateY(-4px);box-shadow:0 14px 28px color-mix(in oklab,var(--v) 22%,transparent);z-index:2}
.cd.fer{background:var(--warnbg);border-color:var(--warnb)}
.dn{font-size:15px;font-weight:900;position:relative;z-index:2}
.cd-th{position:absolute;right:8px;top:8px;width:42%;max-width:64px;aspect-ratio:4/5;object-fit:cover;border-radius:7px;box-shadow:0 6px 14px rgba(40,30,90,.22);transition:transform .35s var(--ease)}
.cd.on:hover .cd-th{transform:scale(1.06) rotate(2deg)}
.dl{position:absolute;left:12px;bottom:9px;font-size:11px;font-weight:800;color:var(--v2);z-index:2}
.dl.f{color:var(--warn)}
.cd-st{position:absolute;left:12px;top:32px;width:8px;height:8px;border-radius:50%;background:var(--line)}
.cd.st-approved .cd-st{background:var(--ok)}
.cd.st-changes_requested .cd-st{background:var(--warn)}
.leg{margin-top:16px;display:flex;gap:22px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.lg{display:flex;align-items:center;gap:8px}
.sw{width:15px;height:15px;border-radius:4px;display:inline-block}
.sw.on{background:var(--soft);border:1.5px solid var(--v)}
.sw.ok{background:var(--ok);border-radius:50%;width:9px;height:9px}
.sw.warn{background:var(--warn);border-radius:50%;width:9px;height:9px}
.sw.fer{background:var(--warnbg);border:1.5px solid var(--warnb)}
@media (max-width:760px){
  .cal-h,.cal-g{gap:4px}
  .cd{min-height:58px;padding:6px 7px;border-radius:8px}
  .dn{font-size:12.5px}
  .cd-th,.dl{display:none}
  .cd-st{left:auto;right:7px;top:7px}
}

/* ---------- Abanico ---------- */
.fan{padding:clamp(56px,8vw,96px) 0}
.fan .vglow{right:-60px;top:auto;bottom:-300px;width:820px;height:820px}
.fan__in{position:relative;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:40px;align-items:center}
.d-title{font-size:clamp(44px,6vw,74px);font-weight:900;letter-spacing:-.035em;line-height:1;margin-top:14px}
.fp{margin-top:24px;font-size:15px;color:#C3C6E0;line-height:1.5;padding-left:16px;border-left:4px solid var(--v);max-width:380px}
.fanz{position:relative;height:420px}
.fi2{position:absolute;left:calc(50% - 75px);bottom:70px;transform-origin:50% 100%;text-decoration:none;opacity:0;transform:translateX(calc(var(--k) * 150px)) translateY(calc(var(--k) * var(--k) * 12px + 90px)) rotate(calc(var(--k) * 4deg))}
.fanz.is-in .fi2{animation:fanIn 1s var(--ease) var(--d) both}
@keyframes fanIn{to{opacity:1;transform:translateX(calc(var(--k) * 150px)) translateY(calc(var(--k) * var(--k) * 12px)) rotate(calc(var(--k) * 4deg))}}
.fh{position:relative;transition:transform .45s var(--ease)}
.fi2:hover{z-index:5}
.fi2:hover .fh{transform:translateY(-18px)}
.flab{position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:800;color:#fff;background:color-mix(in oklab,var(--v) 28%,transparent);border:1px solid color-mix(in oklab,var(--v) 60%,transparent);padding:5px 10px;border-radius:99px}
@media (max-width:1100px){.fan__in{grid-template-columns:1fr}.fanz{height:400px}}
@media (max-width:760px){
  .fanz{height:auto;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 52px;margin:0 calc(var(--gut) * -1);padding-left:var(--gut)}
  .fi2,.fanz.is-in .fi2{position:relative;left:auto;bottom:auto;transform:none;opacity:1;animation:none;flex:none;scroll-snap-align:center}
}

/* ---------- Publicaciones ---------- */
.filters{display:flex;gap:6px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px}
.filters button{border:0;background:none;padding:9px 13px;border-radius:9px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.filters button b{font-weight:800;margin-left:4px;color:var(--faint)}
.filters button.is-on{background:var(--v);color:#fff}
.filters button.is-on b{color:rgba(255,255,255,.75)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:30px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;box-shadow:var(--sh);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s,opacity .8s var(--ease) var(--rd,0s)}
.pcard:hover{transform:translateY(-6px);box-shadow:0 24px 44px rgba(60,55,120,.16);border-color:var(--v)}
.pcard.reveal.is-in:hover{transform:translateY(-6px)}
.pcard__media{position:relative;aspect-ratio:4/5;background:#11101e;overflow:hidden}
.pcard__media img,.pcard__media video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.pcard:hover .pcard__media img,.pcard:hover .pcard__media video{transform:scale(1.05)}
.pcard__n{position:absolute;right:10px;top:10px;background:rgba(18,18,24,.72);color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:99px}
.pcard__play{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);display:grid;place-items:center}
.pcard__play svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8}
.pcard__media .pill{position:absolute;left:10px;bottom:10px}
.pcard__body{padding:16px 18px 18px}
.pcard__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pcard__top .pc{font-size:13px}
.pcard__top .pf{padding:4px 10px;font-size:11px}
.pcard__title{font-size:16px;font-weight:800;line-height:1.25;margin-top:8px}
.pcard__meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--faint);margin-top:8px;font-weight:600}
.pcard__c{display:flex;align-items:center;gap:4px;color:var(--v2)}
.pcard__c svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.empty-filter{margin-top:24px;color:var(--muted)}

/* Pieza en producción */
.ph-prod{width:100%;height:100%;display:grid;place-items:center;background:repeating-linear-gradient(135deg,var(--soft) 0 14px,#fff 14px 28px);background-size:200% 200%;animation:stripes 8s linear infinite}
.ph-prod span{font-size:.85em;font-weight:800;color:var(--v2);background:#fff;border:1px solid var(--softb);padding:.5em .9em;border-radius:99px;text-align:center}
.ph-prod--dark{background:repeating-linear-gradient(135deg,#1c1836 0 14px,#25204a 14px 28px);background-size:200% 200%}
.ph-prod--dark span{background:rgba(0,0,0,.4);color:#fff;border-color:rgba(255,255,255,.2)}
.pcard .ph-prod{font-size:14px}
/* Publicación sin piezas: se muestra el gancho/copy, que es lo que ya se puede revisar */
.pcard__media.is-copy{background:linear-gradient(150deg,var(--soft),#fff 70%);display:flex;flex-direction:column;justify-content:space-between;padding:20px 20px 52px}
.pcard__copy{font-size:19px;font-weight:800;line-height:1.25;letter-spacing:-.01em;color:var(--ink);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.pcard__copy--sm{font-size:14px;font-weight:600;line-height:1.5;color:var(--muted);-webkit-line-clamp:8}
.pcard__prod{align-self:flex-start;font-size:11px;font-weight:800;color:var(--v2);background:#fff;border:1px dashed var(--v);padding:5px 10px;border-radius:99px;margin-bottom:12px}
@media (max-width:640px){.pcard__media.is-copy{aspect-ratio:auto;min-height:220px}}
@keyframes stripes{to{background-position:100% 100%}}

.foot-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;font-weight:700;color:var(--faint);padding-top:28px;padding-bottom:28px}
.foot-bar .brand{color:var(--ink)}.foot-bar .brand span{color:var(--faint);margin:0 4px}

/* =====================================================================
   PUBLICACIÓN · vitrina
   ===================================================================== */
.post-nav{display:flex;justify-content:space-between;align-items:center;padding-top:22px;padding-bottom:4px;position:relative;z-index:5}
.post-nav__back{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:800;text-decoration:none;color:var(--muted)}
.post-nav__back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4}
.post-nav__back:hover{color:var(--v2)}
.post-nav__pager{display:flex;align-items:center;gap:8px}
.cnt{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--muted);min-width:52px;text-align:center}

.show{position:relative;overflow:hidden;padding:24px 0 72px}
.show__in{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:40px;align-items:center;min-height:700px}
.sh-l{max-width:600px}
.ph{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ph .pc{font-size:clamp(20px,2.4vw,26px)}
.ph .pn{font-size:clamp(20px,2.4vw,26px);font-weight:900;letter-spacing:-.01em}
.sh-l>.pill{margin-top:14px}
.sh-t{font-size:clamp(32px,4.2vw,48px);font-weight:900;line-height:1.06;letter-spacing:-.025em;margin-top:26px;text-wrap:balance}
.show .lead{font-size:16px}
.chips{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.chip{background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 12px;font-size:12px;color:var(--muted)}
.chip b{color:var(--ink);font-weight:800;margin-right:6px}
.strip{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap;--dur:2800ms}
.th{position:relative;width:78px;aspect-ratio:4/5;border-radius:10px;overflow:hidden;border:0;padding:0;cursor:pointer;background:#cfd3e6;box-shadow:0 8px 18px rgba(50,60,120,.16);transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .45s;opacity:.5}
.th img{width:100%;height:100%;object-fit:cover;display:block}
.th span{position:absolute;left:5px;top:5px;width:18px;height:18px;border-radius:5px;background:rgba(255,255,255,.94);color:var(--v);font-size:10.5px;font-weight:900;display:grid;place-items:center}
.th .pb{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--v);transform:scaleX(0);transform-origin:left}
.th:hover{opacity:.85}
.th.a{opacity:1;transform:translateY(-8px);box-shadow:0 0 0 3px var(--v),0 18px 30px color-mix(in oklab,var(--v) 30%,transparent)}
.th.a .pb{animation:pbar var(--dur) linear forwards}
@keyframes pbar{to{transform:scaleX(1)}}
.sh-r{position:relative;display:flex;flex-direction:column;align-items:center;padding-bottom:40px}
.plab{margin-top:22px;white-space:nowrap;font-size:11.5px;font-weight:800;color:var(--v2);background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 13px;box-shadow:0 6px 16px rgba(80,95,150,.12)}
.amb{position:absolute;right:calc(50% - 640px + 20px);top:60px;width:600px;height:600px;border-radius:50%;overflow:hidden;filter:blur(52px) saturate(1.6);opacity:.55;transition:opacity .35s;z-index:0;pointer-events:none}
.amb img{width:100%;height:100%;object-fit:cover}
.amb.fadeo{opacity:.15}
.amb.glow{background:radial-gradient(circle,color-mix(in oklab,var(--v) 70%,transparent),transparent 70%);filter:blur(20px)}
.orbit{position:absolute;right:calc(50% - 640px + 20px);top:50px;width:620px;height:620px;border-radius:50%;border:1.6px dashed color-mix(in oklab,var(--v) 38%,transparent);z-index:1;pointer-events:none}
.on .orbit{animation:ringin 1.4s var(--ease) both,rot 80s linear 1.4s infinite}
@keyframes ringin{from{opacity:0;transform:scale(.6) rotate(-40deg)}to{opacity:1;transform:none}}
@keyframes rot{to{transform:rotate(360deg)}}
@media (max-width:1280px){.amb,.orbit{right:20px}}
@media (max-width:1000px){
  .show__in{grid-template-columns:1fr;min-height:0}
  .sh-r{order:-1}
  .amb,.orbit{right:50%;margin-right:-300px;top:10px}
  .sh-r .phone{--pw:250px!important}
}
@media (max-width:420px){.sh-r .phone{--pw:224px!important}.amb,.orbit{width:420px;height:420px;margin-right:-210px}}

/* ---------- Copy ---------- */
.cols{display:grid;gap:16px;margin-top:6px;align-items:start}
.cols--2{grid-template-columns:1fr 1.12fr}
.cols--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.cols--2,.cols--3{grid-template-columns:1fr}}
.col{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--sh)}
.col__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ct{font-size:13.5px;font-weight:900;color:var(--v)}
.ct--linkedin{color:#2F6FC4}
.ct--tiktok{color:#C2185B}
.cb{font-size:14px;line-height:1.6;white-space:pre-line}

/* ---------- Revisión y conversación ---------- */
.review{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px;align-items:start}
@media (max-width:900px){.review{grid-template-columns:1fr}}
.review__decide,.review__thread{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--sh)}
.decided{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:12px;margin-bottom:18px}
.decided b{display:block;font-size:15px}
.decided span{font-size:12.5px;color:var(--muted)}
.decided--ok{background:var(--okbg)}.decided--ok b{color:var(--ok)}
.decided--warn{background:var(--warnbg)}.decided--warn b{color:var(--warn)}
.decided__ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:#fff}
.decided__ic svg{width:20px;height:20px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.decided--ok .decided__ic svg{stroke:var(--ok)}.decided--warn .decided__ic svg{stroke:var(--warn)}
/* Revision por etapas */
.stages__intro{font-size:13.5px;color:var(--muted);line-height:1.5;margin-bottom:16px}
.stages__intro b{color:var(--ink)}
.stages{list-style:none;display:flex;flex-direction:column;gap:10px;counter-reset:none}
.stage{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#fff;transition:border-color .2s,box-shadow .2s}
.stage.is-current{border-color:var(--v);box-shadow:0 0 0 3px var(--soft)}
.stage--approved{background:#FAFDFB;border-color:var(--okb)}
.stage--changes_requested{border-color:var(--warnb);background:#FFFBFC}
.stage.is-locked{background:var(--alt);border-style:dashed}
.stage__head{display:flex;gap:12px;align-items:center}
.stage__n{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;font-weight:900;font-size:13px;background:var(--soft);color:var(--v);border:1px solid var(--softb)}
.stage__n svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.stage--approved .stage__n{background:var(--ok);border-color:var(--ok);color:#fff}
.stage--changes_requested .stage__n{background:var(--warn);border-color:var(--warn);color:#fff}
.stage.is-locked .stage__n{background:#fff;color:var(--faint);border-color:var(--line)}
.stage__t{flex:1;min-width:0}
.stage__t b{display:block;font-size:15px;font-weight:800}
.stage__t span{display:block;font-size:12px;color:var(--muted);line-height:1.4}
.stage .pill{flex:none}
.stage__meta{font-size:12px;color:var(--faint);margin:8px 0 0 42px}
.stage__lock{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--muted);margin:10px 0 0 42px;line-height:1.45}
.stage__lock svg{width:14px;height:14px;flex:none;margin-top:2px;fill:none;stroke:var(--faint);stroke-width:2}
.stage .decide{margin:12px 0 0 42px}
.stage .decide__changes{margin-top:12px}
@media (max-width:560px){.stage__meta,.stage__lock,.stage .decide{margin-left:0}.stage .pill{display:none}}
.stage-dots{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}
.stage-dot{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;font-size:12px;font-weight:700;background:rgba(255,255,255,.7);border:1px solid var(--line);color:var(--muted)}
.stage-dot i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.stage-dot--approved{color:var(--ok);border-color:var(--okb)}.stage-dot--approved i{background:var(--ok)}
.stage-dot--changes_requested{color:var(--warn);border-color:var(--warnb)}.stage-dot--changes_requested i{background:var(--warn)}
.pcard__stages{display:flex;gap:4px;margin-top:8px}
.pcard__stages i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.pcard__stages i.is-approved{background:var(--ok)}
.pcard__stages i.is-changes_requested{background:var(--warn)}

.decide__btns{display:flex;gap:10px;flex-wrap:wrap}
.decide__changes{margin-top:18px;animation:up .45s var(--ease) both}
.decide__changes .auth__label{color:var(--muted)}
.field{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;font:500 14.5px/1.5 Montserrat,sans-serif;color:var(--ink);background:#fff;resize:vertical;transition:border-color .2s,box-shadow .2s}
.field:focus{outline:none;border-color:var(--v);box-shadow:0 0 0 4px var(--soft)}
.thread{display:flex;flex-direction:column;gap:14px;max-height:560px;overflow:auto;padding-right:4px}
.thread__empty{font-size:14px;color:var(--muted);background:var(--alt);border-radius:12px;padding:16px}
.msg{display:flex;gap:10px;align-items:flex-start;animation:up .5s var(--ease) both}
.msg__av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:13px;font-weight:900;background:var(--soft);color:var(--v2)}
.msg--team .msg__av{background:var(--dark2);color:#fff}
.msg__bubble{background:var(--alt);border-radius:4px 14px 14px 14px;padding:11px 14px;min-width:0;flex:1}
.msg--team .msg__bubble{background:var(--soft)}
.msg--approved .msg__bubble{background:var(--okbg)}
.msg--changes_requested .msg__bubble{background:var(--warnbg)}
.msg__meta{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:11.5px;color:var(--faint)}
.msg__meta b{font-size:13px;color:var(--ink)}
.tag{font-size:10px;font-weight:800;background:var(--dark2);color:#fff;padding:2px 6px;border-radius:5px}
.msg__kind{font-size:12.5px;font-weight:800;margin-top:4px}
.msg--approved .msg__kind{color:var(--ok)}.msg--changes_requested .msg__kind{color:var(--warn)}.msg--new_version .msg__kind{color:var(--v2)}
.msg__del{margin-left:auto}
.msg__del button{border:0;background:none;font:700 11.5px Montserrat,sans-serif;color:var(--faint);cursor:pointer;padding:0;opacity:0;transition:opacity .2s,color .2s}
.msg:hover .msg__del button,.msg__del button:focus-visible{opacity:1}
.msg__del button:hover{color:var(--warn)}
@media (hover:none){.msg__del button{opacity:1}}
.msg--unapproved .msg__bubble,.msg--reopened .msg__bubble{background:#FFF6E5}
.msg--unapproved .msg__kind,.msg--reopened .msg__kind{color:#9A6400}
.msg__body{font-size:14px;line-height:1.55;margin-top:4px;white-space:pre-line;overflow-wrap:anywhere}
.composer{margin-top:18px;display:flex;flex-direction:column;gap:10px;align-items:flex-end}

.post-foot{display:flex;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:72px}
.post-foot__a{display:flex;flex-direction:column;gap:3px;text-decoration:none;max-width:48%;padding:14px 18px;border-radius:14px;background:#fff;border:1px solid var(--line);transition:border-color .2s,transform .3s var(--ease)}
.post-foot__a:hover{border-color:var(--v);transform:translateY(-3px)}
.post-foot__a small{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--v)}
.post-foot__a b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-foot__a--r{text-align:right;margin-left:auto}

/* ---------- Visor ---------- */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(10,8,24,.92);backdrop-filter:blur(8px);display:grid;grid-template-columns:64px 1fr 64px;align-items:center;animation:fade .3s both}
.lightbox__stage{display:grid;place-items:center;height:100vh;padding:48px 0}
.lightbox__stage img{max-height:calc(100vh - 96px);max-width:100%;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:pop .4s var(--ease) both}
.lightbox__x{position:absolute;right:18px;top:14px;width:44px;height:44px;border-radius:12px;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:28px;cursor:pointer}
.lightbox__nav{width:48px;height:48px;border-radius:12px;border:0;background:rgba(255,255,255,.1);display:grid;place-items:center;cursor:pointer;justify-self:center}
.lightbox__nav svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.2}
.lightbox__nav:hover,.lightbox__x:hover{background:var(--v)}
.lightbox__cnt{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);color:#fff;font-size:13px;font-weight:800}
@media (max-width:600px){.lightbox{grid-template-columns:44px 1fr 44px}.lightbox__nav{width:38px;height:38px}}

/* ---------- Modal de confirmación ---------- */
body.has-modal{overflow:hidden}
.cmodal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px}
.cmodal__back{position:absolute;inset:0;background:rgba(13,10,30,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .22s ease}
.cmodal__card{position:relative;width:min(440px,100%);background:#fff;border-radius:22px;padding:30px 28px 24px;box-shadow:0 40px 90px rgba(13,10,30,.35);text-align:center;opacity:0;transform:translateY(18px) scale(.96);transition:opacity .22s ease,transform .32s var(--ease)}
.cmodal.is-open .cmodal__back{opacity:1}
.cmodal.is-open .cmodal__card{opacity:1;transform:none}
.cmodal__ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;margin:0 auto 16px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--softb)}
.cmodal__ic svg{width:28px;height:28px;fill:none;stroke:var(--v);stroke-width:2.2;stroke-linecap:round}
.cmodal.is-open .cmodal__ic{animation:pop .5s var(--ease) .08s both}
.cmodal__t{font-size:21px;font-weight:900;letter-spacing:-.015em;line-height:1.2}
.cmodal__x{font-size:14.5px;line-height:1.55;color:var(--muted);margin-top:8px}
.cmodal__btns{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.cmodal__btns .btn{flex:1;justify-content:center;min-width:140px}
.cmodal__btns .btn--warn{margin-top:0}
@media (max-width:480px){.cmodal{align-items:end;padding:0}.cmodal__card{border-radius:22px 22px 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom));transform:translateY(40px)}.cmodal__btns{flex-direction:column-reverse}}

/* =====================================================================
   INDICACIONES (brief del mes)
   ===================================================================== */
.brief{padding-top:clamp(36px,6vw,72px);padding-bottom:120px}
.brief__month{font-style:normal;color:var(--v)}
.months{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;margin-bottom:22px;scrollbar-width:thin}
.months__i{flex:none;display:flex;flex-direction:column;gap:3px;min-width:132px;padding:12px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);text-decoration:none;transition:border-color .2s,transform .3s var(--ease),box-shadow .3s}
.months__i:hover{border-color:var(--v);transform:translateY(-2px)}
.months__i.is-on{border-color:var(--v);box-shadow:0 0 0 3px var(--soft),0 10px 24px color-mix(in oklab,var(--v) 16%,transparent)}
.months__i b{font-size:15px;font-weight:800}
.months__st{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--faint)}
.months__st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line)}
.months__st--draft{color:#9A6400}.months__st--draft::before{background:#E9B44C}
.months__st--sent{color:var(--v2)}.months__st--sent::before{background:var(--v)}
.months__st--received{color:var(--ok)}.months__st--received::before{background:var(--ok)}

.brief-state{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:16px;margin-bottom:20px;background:var(--soft);border:1px solid var(--softb)}
.brief-state b{display:block;font-size:15px}
.brief-state span{font-size:13px;color:var(--muted)}
.brief-state__ic{width:42px;height:42px;border-radius:12px;background:#fff;display:grid;place-items:center;flex:none}
.brief-state__ic svg{width:20px;height:20px;fill:none;stroke:var(--v);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.brief-state--received{background:var(--okbg);border-color:var(--okb)}
.brief-state--received .brief-state__ic svg{stroke:var(--ok)}
.brief-state--error{background:var(--warnbg);border-color:var(--warnb)}
.brief-state--error .brief-state__ic svg{stroke:var(--warn)}

.brief__grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
@media (max-width:1000px){.brief__grid{grid-template-columns:1fr}}
.brief__form{display:flex;flex-direction:column;gap:16px;min-width:0}
.bcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px;box-shadow:var(--sh);min-width:0}
.bcard__head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.bcard__n{width:32px;height:32px;border-radius:10px;background:var(--soft);border:1px solid var(--v);color:var(--v);display:grid;place-items:center;font-weight:900;font-size:14px;flex:none}
.bcard__head h2{font-size:18px;font-weight:800;letter-spacing:-.01em}
.bcard__head p{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.45}
.bcard-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.bcard-pair{grid-template-columns:1fr}}

.rows-ed{display:flex;flex-direction:column;gap:10px}
.row-ed{display:grid;gap:10px;align-items:center;animation:up .35s var(--ease) both}
.row-ed--prio{grid-template-columns:minmax(0,1fr) auto minmax(0,1.3fr) 32px}
.row-ed--date{grid-template-columns:170px minmax(0,1fr) 32px}
@media (max-width:760px){
  .row-ed--prio{grid-template-columns:1fr 32px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--alt)}
  .row-ed--prio .seg,.row-ed--prio input:nth-of-type(2){grid-column:1}
  .row-ed--prio .row-ed__x{grid-row:1;grid-column:2}
  .row-ed--date{grid-template-columns:1fr 32px}
  .row-ed--date input[type=text]{grid-column:1}
  .row-ed--date .row-ed__x{grid-row:1;grid-column:2}
}
.field--sm{padding:11px 13px;font-size:14px;border-radius:10px}
.row-ed__x{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--faint);font-size:18px;line-height:1;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.row-ed__x:hover{color:var(--warn);border-color:var(--warnb);background:var(--warnbg)}
.seg{display:inline-flex;background:var(--alt);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.seg__o{position:relative;cursor:pointer}
.seg__o input{position:absolute;opacity:0;pointer-events:none}
.seg__o span{display:block;padding:7px 11px;border-radius:7px;font-size:12.5px;font-weight:700;color:var(--muted);transition:background .2s,color .2s}
.seg__o input:checked+span{background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(40,30,90,.12)}
.seg__o--alta input:checked+span{background:var(--v);color:#fff}
.seg__o input:focus-visible+span{outline:2px solid var(--v3);outline-offset:1px}
.addrow{display:inline-flex;align-items:center;gap:8px;margin-top:12px;border:1.5px dashed var(--softb);background:none;color:var(--v2);font-weight:700;font-size:13px;padding:10px 14px;border-radius:12px;cursor:pointer;transition:border-color .2s,background .2s}
.addrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.addrow:hover{border-color:var(--v);background:var(--soft)}

.brief-bar{position:sticky;bottom:16px;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px 14px 20px;border-radius:18px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 18px 40px rgba(40,30,90,.16)}
.brief-bar__st{display:flex;flex-direction:column;gap:2px}
.brief-bar__st small{font-size:11.5px;color:var(--faint)}
.brief-bar__btns{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:560px){.brief-bar__btns{width:100%}.brief-bar__btns .btn{flex:1;justify-content:center}}

.brief__aside{position:sticky;top:90px;display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:1000px){.brief__aside{position:static}}
.tips{position:relative;background:linear-gradient(150deg,var(--dark1),var(--dark2));color:#fff;border-radius:18px;padding:22px 22px 20px;overflow:hidden}
.tips::after{content:"";position:absolute;right:-90px;top:-90px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--v) 55%,transparent),transparent 70%)}
.tips .eb{color:var(--v3)}
.tips h3{font-size:18px;font-weight:800;margin:8px 0 12px;position:relative;z-index:1}
.tips ul{list-style:none;display:flex;flex-direction:column;gap:9px;position:relative;z-index:1}
.tips li{font-size:13px;line-height:1.45;color:#C9CBE4;padding-left:16px;position:relative}
.tips li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--v3)}
.tips li b{color:#fff}
.tips p{font-size:12px;color:#9A9DC0;margin-top:14px;position:relative;z-index:1}
@media (max-width:1000px){.tips{position:relative;top:0}.tips ul{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}}
@media (max-width:560px){.tips ul{grid-template-columns:1fr}}

/* ---------- Sub-pestañas de Indicaciones ---------- */
.subtabs{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:#fff;border:1px solid var(--line);margin:0 0 18px;max-width:100%;overflow-x:auto}
.subtabs a{display:inline-flex;align-items:center;gap:0;padding:9px 16px;border-radius:10px;font-size:13.5px;font-weight:700;color:var(--muted);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.subtabs a svg{width:16px;height:16px;margin-right:8px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.subtabs a:hover{color:var(--v)}
@media (max-width:560px){.subtabs{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.subtabs a{justify-content:center;padding:10px 6px;font-size:13px}.subtabs a svg{margin-right:6px}.subtabs__x{display:none}}
.subtabs a.is-on{background:var(--v);color:#fff;box-shadow:0 6px 16px color-mix(in oklab,var(--v) 30%,transparent)}

.tips--minutes h3{margin-bottom:8px}
.tips__min{display:block;position:relative;z-index:1;padding:11px 0;border-top:1px solid rgba(255,255,255,.1);text-decoration:none;color:#fff}
.tips__min:first-of-type{border-top:0;margin-top:6px}
.tips__min small{display:block;font-size:11px;font-weight:700;color:var(--v3);letter-spacing:.04em}
.tips__min b{display:block;font-size:13.5px;margin-top:2px}
.tips__min span{display:block;font-size:12px;color:#B5B8D8;margin-top:3px;line-height:1.4}
.tips__min:hover b{color:var(--v3)}
.tips--minutes .linkbtn{position:relative;z-index:1;color:#fff;font-size:12.5px;margin-top:8px;display:inline-block}

/* ---------- Minutas ---------- */
.mlist{display:flex;flex-direction:column;gap:14px;min-width:0}
.minute{display:grid;grid-template-columns:76px minmax(0,1fr);gap:20px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px;box-shadow:var(--sh);scroll-margin-top:100px;transition:border-color .3s}
.minute:target{border-color:var(--v);box-shadow:0 0 0 3px var(--soft),var(--sh)}
.minute__date{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:12px 6px 10px;border-radius:14px;background:var(--soft);border:1px solid var(--softb);height:max-content;text-align:center}
.minute__date b{font-size:30px;font-weight:900;line-height:1;color:var(--v);letter-spacing:-.03em}
.minute__date span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;margin-top:4px}
.minute__date small{font-size:11px;color:var(--faint);margin-top:2px}
.minute__head h2{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.minute__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:6px;font-size:12.5px;color:var(--muted)}
.minute__meta span:first-letter{text-transform:uppercase}
.minute__who{display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;background:#F1F2F8;font-weight:700;color:var(--ink,#16182B);font-size:11.5px}
.minute__who.is-team{background:var(--v);color:#fff}
.minute__meta .msg__del{margin-left:auto}
.minute__eb{margin:18px 0 8px}
.agree{list-style:none;display:flex;flex-direction:column;gap:8px}
.agree li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5}
.agree svg{width:18px;height:18px;flex:none;margin-top:2px;padding:3px;border-radius:6px;background:var(--okbg);fill:none;stroke:var(--ok);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.attach{display:flex;align-items:center;gap:12px;margin-top:16px;padding:10px 14px 10px 10px;border-radius:14px;border:1px solid var(--line);background:#FAFAFD;text-decoration:none;max-width:420px;transition:border-color .2s,transform .3s var(--ease)}
.attach:hover{border-color:var(--v);transform:translateY(-2px)}
.attach__ext{width:44px;height:44px;border-radius:10px;background:var(--v);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:900;letter-spacing:.04em;flex:none}
.attach__name{min-width:0;flex:1}
.attach__name b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attach__name small{font-size:12px;color:var(--muted)}
.attach>svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--v);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mempty{text-align:center;padding:44px 28px}
.mempty__ic{width:56px;height:56px;border-radius:16px;background:var(--soft);display:inline-grid;place-items:center;margin-bottom:14px}
.mempty__ic svg{width:26px;height:26px;fill:none;stroke:var(--v);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mempty h2{font-size:19px;font-weight:800}
.mempty p{font-size:14px;color:var(--muted);max-width:420px;margin:6px auto 0;line-height:1.5}

.mform{display:flex;flex-direction:column}
.mform .bcard__head{margin-bottom:8px}
.mform .bcard__n svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.mform .auth__label{margin-top:12px;margin-bottom:6px}
.mform .auth__label small{font-weight:600;color:var(--faint);text-transform:none;letter-spacing:0;margin-left:4px}
.mform textarea{resize:vertical;min-height:120px}
.mform__go{margin-top:16px;justify-content:center}
.mform__note{text-align:center;margin-top:8px;font-size:12px}
.drop{position:relative;display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px;border-radius:14px;border:1.5px dashed var(--line);cursor:pointer;transition:border-color .2s,background .2s}
.drop:hover,.drop.is-over{border-color:var(--v);background:var(--soft)}
.drop.has-file{border-style:solid;border-color:var(--v);background:var(--soft)}
.drop.is-bad{border-color:var(--warn);background:var(--warnbg)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop>svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--v);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.drop span{min-width:0}
.drop b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drop small{font-size:11.5px;color:var(--muted)}
@media (max-width:1000px){.minutes__grid .brief__aside{order:-1}}
@media (max-width:560px){.minute{grid-template-columns:1fr;gap:12px;padding:18px}.minute__date{flex-direction:row;gap:8px;align-items:baseline;justify-content:flex-start;padding:8px 12px;width:max-content}.minute__date b{font-size:20px}.minute__date span,.minute__date small{margin-top:0}}

/* ---------- Resumen de indicaciones ---------- */
.ov{margin-top:28px}
.ov__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.ov__head h2{font-size:24px;font-weight:900;letter-spacing:-.02em}
.ov__head p{font-size:14px;color:var(--muted);margin-top:4px}
.ov__btns{display:flex;gap:8px;flex-wrap:wrap}
.btn--sm{padding:10px 16px;font-size:13px}
.btn--sm svg{width:15px;height:15px}
.mcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.mcard{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px 20px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);text-decoration:none;transition:border-color .2s,transform .3s var(--ease),box-shadow .3s}
.mcard:hover{border-color:var(--v);transform:translateY(-3px)}
.mcard.is-next{border-color:var(--v);box-shadow:0 0 0 3px var(--soft),var(--sh)}
.mcard--none{background:#FBFBFE;border-style:dashed;box-shadow:none}
.mcard__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.mcard__m{display:block;font-size:19px;font-weight:900;letter-spacing:-.01em;line-height:1.1}
.mcard__top small{font-size:12px;color:var(--faint)}
.mcard__prios{list-style:none;display:flex;flex-direction:column;gap:7px}
.mcard__prios li{display:flex;gap:8px;align-items:center;font-size:13.5px;min-width:0}
.mcard__prios li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvl{flex:none;font-style:normal;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:99px;background:#F1F2F8;color:var(--muted)}
.lvl--alta{background:var(--v);color:#fff}
.lvl--media{background:var(--soft);color:var(--v2)}
.mcard__foot,.mcard__empty{font-size:12.5px;color:var(--muted);line-height:1.45}
.mcard__go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--v)}
.mcard__go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.mcard:hover .mcard__go svg{transform:translateX(3px)}
.ov__past{margin-top:16px}
.ov__past summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--muted);padding:8px 0;list-style:none}
.ov__past summary::before{content:"▸ ";color:var(--v)}
.ov__past[open] summary::before{content:"▾ "}
.ov__past .mcards{margin-top:8px}
.mini-min{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:820px){.mini-min{grid-template-columns:1fr}}
.mm{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;padding:18px 20px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);text-decoration:none;transition:border-color .2s,transform .3s var(--ease)}
.mm:hover{border-color:var(--v);transform:translateY(-3px)}
.mm .minute__date b{font-size:24px}
.mm__body>b{display:block;font-size:16px;font-weight:800;line-height:1.3}
.mm__meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--muted);margin-top:5px}
.mm__meta i{font-style:normal}
@media (max-width:560px){.mm{grid-template-columns:1fr;gap:10px}.mcard--none .mcard__empty{display:none}.mcard--none{gap:6px}}
.agree--sm{margin-top:10px;gap:6px}
.agree--sm li{font-size:13px}
.agree--sm svg{width:16px;height:16px}

/* Minuta pegada */
.minutes .mform{margin-bottom:20px;padding:0}
.mform__sum{display:flex;gap:14px;align-items:center;padding:20px 24px;cursor:pointer;list-style:none}
.mform__sum::-webkit-details-marker{display:none}
.mform__sum h2{font-size:18px;font-weight:800}
.mform__sum p{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.45}
.mform__sum>div{flex:1;min-width:0}
.mform__tog{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;flex:none;transition:transform .3s var(--ease)}
.mform__tog svg{width:16px;height:16px;fill:none;stroke:var(--v);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mform[open] .mform__tog{transform:rotate(90deg)}
.mform__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;padding:4px 24px 24px;border-top:1px solid var(--line)}
.mform__grid .auth__label{margin-top:16px}
.mform__main,.mform__side{display:flex;flex-direction:column;min-width:0}
.mform__paste{flex:1;min-height:340px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.55;resize:vertical}
.mform__count{margin-top:8px;font-size:12px}
@media (max-width:900px){.mform__grid{grid-template-columns:1fr}.mform__paste{min-height:240px}}
.minute__auto{font-size:10.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--faint);margin-left:6px}
.minute__full{margin-top:16px;border:1px solid var(--line);border-radius:14px;background:#FAFAFD}
.minute__full summary{cursor:pointer;padding:12px 16px;font-size:13.5px;font-weight:800;color:var(--v);list-style:none}
.minute__full summary::-webkit-details-marker{display:none}
.minute__full summary::before{content:"▸ "}
.minute__full[open] summary::before{content:"▾ "}
.minute__full summary small{font-weight:600;color:var(--faint);margin-left:6px}
.prose{padding:2px 18px 16px;font-size:14px;line-height:1.65;color:var(--ink,#16182B);max-height:560px;overflow:auto;overflow-wrap:anywhere}
.prose>*+*{margin-top:.7em}
.prose h1,.prose h2,.prose h3,.prose h4{font-size:15px;font-weight:800;margin-top:1.2em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.25em}
.prose a{color:var(--v)}
.prose code{font-size:12.5px;background:#EEF;padding:1px 5px;border-radius:5px}
.prose table{border-collapse:collapse;font-size:13px}
.prose td,.prose th{border:1px solid var(--line);padding:4px 8px}

/* Saludo con clima */
.wx{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:clamp(16px,1.6vw,19px);font-weight:700;color:var(--v2);line-height:1.4;max-width:760px}
.wx__ic{width:34px;height:34px;flex:none;border-radius:10px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);display:grid;place-items:center}
.wx__ic::before{font-size:18px;line-height:1}
.wx__ic--sun::before{content:"☀️"}.wx__ic--cloud::before{content:"⛅"}.wx__ic--rain::before{content:"🌧️"}
.wx__ic--cold::before{content:"🧣"}.wx__ic--snow::before{content:"❄️"}.wx__ic--moon::before{content:"🌙"}
.askname{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,280px) auto;gap:12px;align-items:center;margin:0 0 22px;padding:18px 22px;border-radius:18px;background:#fff;border:1px solid var(--v);box-shadow:0 0 0 3px var(--soft),var(--sh)}
.askname b{display:block;font-size:16px;font-weight:800}
.askname span{font-size:13px;color:var(--muted)}
.askname .auth__err{grid-column:1/-1}
@media (max-width:760px){.askname{grid-template-columns:1fr}}

.brief-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:22px;padding:22px 24px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);text-decoration:none;transition:border-color .2s,transform .3s var(--ease)}
.brief-cta:hover{border-color:var(--v);transform:translateY(-3px)}
.brief-cta b{display:block;font-size:17px;font-weight:800}
.brief-cta span{font-size:13.5px;color:var(--muted)}

/* =====================================================================
   ESTRATEGIA
   ===================================================================== */
.sx-hero{padding:clamp(56px,8vw,104px) 0 clamp(48px,6vw,80px)}
.sx-hero__glow{position:absolute;right:-12%;top:-30%;width:70vw;max-width:900px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--v) 55%,transparent),transparent 65%);opacity:.55;pointer-events:none}
.sx-hero__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:end}
.sx-hero__t{font-size:clamp(38px,5.4vw,76px);font-weight:900;line-height:.98;letter-spacing:-.04em;margin-top:16px;text-wrap:balance}
.sx-hero__sub{font-size:clamp(18px,1.8vw,24px);font-weight:700;color:var(--v3);margin-top:18px;line-height:1.3;max-width:620px}
.sx-hero__sum{font-size:15px;color:#B9BCDA;margin-top:10px;max-width:620px;line-height:1.55}
.sx-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:26px;font-size:12.5px;color:#A6A9CC;font-weight:600}
.sx-chip{display:inline-flex;padding:5px 12px;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;font-weight:700}
.sx-hero__idx{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px)}
.sx-hero__idx a{display:flex;gap:10px;align-items:baseline;padding:6px 0;text-decoration:none;color:#D6D8EE;font-size:12.5px;font-weight:600;line-height:1.3;border-bottom:1px solid rgba(255,255,255,.06);transition:color .2s}
.sx-hero__idx a:hover{color:#fff}
.sx-hero__idx i{font-style:normal;font-size:10.5px;font-weight:900;color:var(--v3);flex:none;width:18px}
@media (max-width:960px){.sx-hero__in{grid-template-columns:1fr}.sx-hero__idx{display:flex;gap:8px;overflow-x:auto;padding:4px 0 6px;background:none;border:0;backdrop-filter:none;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding-left:var(--gut);padding-right:var(--gut)}.sx-hero__idx a{flex:none;border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:7px 12px;background:rgba(255,255,255,.06);white-space:nowrap}.sx-hero__idx a span{max-width:220px;overflow:hidden;text-overflow:ellipsis}}

.sx-body{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,4vw,56px);padding-top:clamp(36px,5vw,64px);padding-bottom:96px}
.sx-nav{position:sticky;top:86px;align-self:start;display:flex;flex-direction:column;gap:1px;max-height:calc(100vh - 110px);overflow:auto;padding-right:6px;scrollbar-width:thin}
.sx-nav .eb{margin-bottom:10px}
.sx-nav a{display:flex;gap:10px;align-items:baseline;padding:7px 10px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;line-height:1.3;transition:background .2s,color .2s}
.sx-nav a span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sx-nav a i{font-style:normal;font-size:10.5px;font-weight:900;color:var(--faint);width:18px;flex:none}
.sx-nav a:hover{color:var(--ink);background:rgba(255,255,255,.6)}
.sx-nav a.is-on{color:var(--v2);background:#fff;box-shadow:var(--sh)}
.sx-nav a.is-on i{color:var(--v)}
@media (max-width:1100px){.sx-body{grid-template-columns:1fr}.sx-nav{display:none}}

.sx-main{min-width:0;display:flex;flex-direction:column;gap:clamp(48px,6vw,80px)}
.sx-sec{scroll-margin-top:90px}
.sx-sec__eb{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--v)}
.sx-sec__eb b{display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 8px;border-radius:8px;background:var(--v);color:#fff;letter-spacing:.04em;font-size:12px}
.sx-sec__t{font-size:clamp(26px,3.2vw,40px);font-weight:900;letter-spacing:-.03em;line-height:1.08;margin-top:14px;text-wrap:balance}
.sx-sec__sub{font-size:16px;color:var(--muted);margin-top:8px;line-height:1.5;max-width:760px}
.sx-sec__head{margin-bottom:24px}
.sx-label{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--v)}

.sx-stats{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:14px}
.sx-stats--2{--n:2}.sx-stats--3{--n:3}.sx-stats--4{--n:4}
@media (max-width:900px){.sx-stats{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.sx-stats{grid-template-columns:1fr}}
.sx-stat{container-type:inline-size;position:relative;overflow:hidden;background:linear-gradient(150deg,var(--dark1),var(--dark2));color:#fff;border-radius:18px;padding:24px 22px 22px}
.sx-stat::after{content:"";position:absolute;right:-50px;top:-50px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--v) 60%,transparent),transparent 70%)}
.sx-stat b{position:relative;z-index:1;display:block;white-space:nowrap;font-size:clamp(22px,calc(100cqi / (var(--len,6) * .62)),42px);font-weight:900;letter-spacing:-.03em;line-height:1;color:#fff}
.sx-stat p{position:relative;z-index:1;font-size:13px;line-height:1.5;color:#C4C6E2;margin-top:12px}

.sx-cols{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:16px}
.sx-cols--1{--n:1}.sx-cols--2{--n:2}.sx-cols--3{--n:3}.sx-cols--4{--n:4}
@media (max-width:900px){.sx-cols{grid-template-columns:1fr}}
.sx-col{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--sh);display:flex;flex-direction:column}
.sx-col h3{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-top:6px}
.sx-col .sx-list,.sx-col .sx-metrics{margin-top:16px}
.sx-col__foot{margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:700;color:var(--v2)}
.sx-tone--accent{background:linear-gradient(150deg,var(--dark1),var(--dark2));color:#fff;border-color:transparent}
.sx-tone--accent .sx-label{color:var(--v3)}
.sx-tone--accent .sx-list li span{color:#D2D4EC}
.sx-tone--accent .sx-list li::before{background:var(--v3)}
.sx-tone--accent .sx-col__foot{color:var(--v3)}
.sx-tone--ok .sx-label{color:var(--ok)}
.sx-tone--ok .sx-list li::before{background:var(--ok)}
.sx-tone--warn .sx-label{color:var(--warn)}
.sx-tone--warn .sx-list li::before{background:var(--warn)}
.sx-tone--muted{background:#F7F8FC}
.sx-tone--muted .sx-label{color:var(--faint)}
.sx-tone--muted .sx-list li::before{background:var(--faint)}
.sx-list{list-style:none;display:flex;flex-direction:column;gap:11px}
.sx-list li{position:relative;padding-left:18px;font-size:14px;line-height:1.5}
.sx-list li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px;background:var(--v)}
.sx-list li b{display:block;font-weight:800}
.sx-list li b+span{display:block;color:var(--muted);font-size:13.5px;margin-top:1px}
.sx-list--sm li{font-size:13px}
.sx-metrics{list-style:none;display:flex;flex-direction:column}
.sx-metrics li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px}
.sx-metrics li:first-child{border-top:0}
.sx-metrics li span{color:var(--muted)}
.sx-metrics li b{font-weight:900;color:var(--v2);text-align:right;max-width:55%}
.sx-metrics li span{flex:1}
.sx-cols--timeline .sx-col{position:relative;padding-top:28px}
.sx-cols--timeline .sx-col::before{content:"";position:absolute;left:24px;right:24px;top:0;height:4px;border-radius:0 0 4px 4px;background:var(--v)}
.sx-cols--timeline .sx-col:nth-child(2)::before{background:var(--v2)}
.sx-cols--timeline .sx-col:nth-child(3)::before{background:var(--dark1)}
.sx-cols--timeline .sx-label{font-size:22px;letter-spacing:-.02em;text-transform:none;font-weight:900}

.sx-cards{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:14px}
.sx-cards--1{--n:1}.sx-cards--2{--n:2}.sx-cards--3{--n:3}.sx-cards--4{--n:4}.sx-cards--5{--n:5}
@media (max-width:1280px){.sx-cards--5{--n:3}}
@media (max-width:1100px){.sx-cards--4{--n:2}}
@media (max-width:820px){.sx-cards--3,.sx-cards--5{--n:2}}
@media (max-width:560px){.sx-cards{grid-template-columns:1fr}}
.sx-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:8px;transition:transform .35s var(--ease),border-color .2s}
.sx-card:hover{transform:translateY(-3px);border-color:var(--softb)}
.sx-card__n{font-size:13px;font-weight:900;color:var(--v);letter-spacing:.04em}
.sx-card__k{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.sx-card h3{font-size:17px;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.sx-card p{font-size:13.5px;line-height:1.55;color:var(--muted)}
.sx-cards--feature .sx-card{background:linear-gradient(160deg,#fff 0%,var(--soft) 100%)}
.sx-cards--feature .sx-card__n{font-size:34px;letter-spacing:-.03em;line-height:1;color:var(--softb);-webkit-text-stroke:1.4px var(--v);color:transparent}
.sx-cards--feature .sx-card h3{font-size:19px}
.sx-fields{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.sx-fields div{font-size:13px;line-height:1.5}
.sx-fields dt{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--v)}
.sx-fields dd{color:var(--ink);margin-top:1px}
.sx-tags{display:flex;flex-wrap:wrap;gap:6px}
.sx-tags span{display:inline-flex;padding:5px 11px;border-radius:99px;background:#fff;border:1px solid var(--line);font-size:12.5px;font-weight:600}
.sx-tags--sm{margin-top:auto;padding-top:6px}
.sx-tags--sm span{font-size:11.5px;padding:3px 9px;background:var(--alt);border-color:transparent;color:var(--muted)}

.sx-table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh)}
.sx-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:760px}
.sx-table th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:14px 16px;border-bottom:1px solid var(--line);background:#FAFAFD}
.sx-table td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45;color:var(--muted)}
.sx-table td b{color:var(--ink)}
.sx-table tr:last-child td{border-bottom:0}
.sx-table tr.is-hl td{background:var(--soft);color:var(--ink)}
.sx-table tr.is-hl td:first-child{box-shadow:inset 4px 0 0 var(--v)}
.sx-table tr.is-hl td b{color:var(--v2)}
.sx-bar{display:flex;align-items:center;gap:8px;min-width:110px}
.sx-bar i{display:block;height:8px;border-radius:4px;background:var(--v);flex:none}
.sx-bar b{font-weight:900;color:var(--ink)}
@media (max-width:700px){
  .sx-table{min-width:0}.sx-table thead{display:none}
  .sx-table tr{display:block;padding:14px 16px;border-bottom:1px solid var(--line)}
  .sx-table td{display:block;padding:3px 0;border:0}
  .sx-table td:first-child{font-size:15px;margin-bottom:4px}
  .sx-table td:not(:first-child)::before{content:attr(data-th) ": ";font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
  .sx-table tr.is-hl td{background:none}.sx-table tr.is-hl{background:var(--soft)}.sx-table tr.is-hl td:first-child{box-shadow:none}
}

.sx-flow{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:14px;counter-reset:fl}
.sx-flow--2{--n:2}.sx-flow--3{--n:3}.sx-flow--4{--n:4}.sx-flow--5{--n:5}
@media (max-width:1000px){.sx-flow{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sx-flow{grid-template-columns:1fr}}
.sx-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--sh);display:flex;flex-direction:column}
.sx-step:not(:last-child)::after{content:"";position:absolute;right:-12px;top:34px;width:10px;height:10px;border-top:2.4px solid var(--v);border-right:2.4px solid var(--v);transform:rotate(45deg);z-index:2}
@media (max-width:1000px){.sx-step::after{display:none}}
.sx-step__h{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.sx-step__h i{font-style:normal;width:30px;height:30px;border-radius:9px;background:var(--v);color:#fff;display:grid;place-items:center;font-weight:900;font-size:13px;flex:none}
.sx-step__h b{display:block;font-size:16px;font-weight:800;line-height:1.2}
.sx-step__h span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.sx-step:nth-child(2) .sx-step__h i{background:var(--v2)}
.sx-step:nth-child(3) .sx-step__h i{background:color-mix(in oklab,var(--v) 55%,var(--dark1))}
.sx-step:nth-child(4) .sx-step__h i{background:var(--dark1)}

.sx-budget{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:14px;align-items:stretch}
.sx-budget--2{--n:2}.sx-budget--3{--n:3}
@media (max-width:900px){.sx-budget{grid-template-columns:1fr}}
.sx-plan{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--sh);display:flex;flex-direction:column}
.sx-plan.is-featured{background:linear-gradient(155deg,var(--dark1),var(--dark2));color:#fff;border-color:transparent;box-shadow:0 26px 50px rgba(30,24,70,.28);transform:translateY(-6px)}
.sx-plan__tag{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--v)}
.sx-plan__tag em{font-style:normal;letter-spacing:.04em;text-transform:none;font-size:11px;padding:3px 9px;border-radius:99px;background:var(--v);color:#fff}
.is-featured .sx-plan__tag{color:var(--v3)}
.sx-plan__name{font-size:15px;font-weight:700;color:var(--muted);margin-top:6px}
.is-featured .sx-plan__name{color:#C4C6E2}
.sx-plan__total{font-size:clamp(28px,2.8vw,36px);font-weight:900;letter-spacing:-.03em;margin-top:12px}
.sx-plan__sub{font-size:12.5px;color:var(--faint)}
.is-featured .sx-plan__sub{color:#A6A9CC}
.sx-plan__lines{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.sx-line__top{display:flex;justify-content:space-between;font-size:13px}
.sx-line__top b{font-weight:800}
.sx-line__bar{height:7px;border-radius:4px;background:var(--alt);margin-top:6px;overflow:hidden}
.is-featured .sx-line__bar{background:rgba(255,255,255,.1)}
.sx-line__bar i{display:block;height:100%;border-radius:4px;background:var(--v)}
.is-featured .sx-line__bar i{background:var(--v3)}
.sx-line small{font-size:11px;color:var(--faint);font-weight:700}
.is-featured .sx-col__foot{color:var(--v3)}

.sx-groups{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px;box-shadow:var(--sh)}
.sx-groups__g{display:grid;gap:14px;margin-top:12px}
.sx-group{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;align-items:start}
.sx-group b{font-size:13.5px;font-weight:800;padding-top:5px}
.sx-group.sx-tone--ok b{color:var(--ok)}
.sx-group.sx-tone--muted b{color:var(--faint)}
.sx-group.sx-tone--muted .sx-tags span{color:var(--muted);background:var(--alt);border-color:transparent}
@media (max-width:640px){.sx-group{grid-template-columns:1fr;gap:6px}}

.sx-note{display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding:18px 20px;border-radius:16px;background:var(--soft);border:1px solid var(--softb)}
.sx-note svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--v);stroke-width:2;margin-top:1px}
.sx-note p{font-size:14.5px;line-height:1.55;color:var(--ink)}
.sx-note b{color:var(--v2)}
.sx-text{padding:0;max-height:none}
.sx-top{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--v);text-decoration:none}
.sx-top svg{width:14px;height:14px;transform:rotate(90deg);fill:none;stroke:currentColor;stroke-width:2.4}

/* Tarjeta de estrategia en el inicio */
.sx-cta{display:flex;align-items:center;gap:18px;margin:0 0 22px;padding:18px 22px;border-radius:18px;background:linear-gradient(140deg,var(--dark1),var(--dark2));color:#fff;text-decoration:none;position:relative;overflow:hidden;transition:transform .3s var(--ease)}
.sx-cta:hover{transform:translateY(-3px)}
.sx-cta::after{content:"";position:absolute;right:-60px;top:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--v) 55%,transparent),transparent 70%)}
.sx-cta__ic{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:none}
.sx-cta__ic svg{width:22px;height:22px;fill:none;stroke:var(--v3);stroke-width:2}
.sx-cta>div{flex:1;min-width:0;position:relative;z-index:1}
.sx-cta b{display:block;font-size:16px;font-weight:800}
.sx-cta span{font-size:13px;color:#B9BCDA}
.sx-cta>svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.4;position:relative;z-index:1}

/* =====================================================================
   MÉTRICAS
   ===================================================================== */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--sh)}
.kpi__n{font-size:clamp(28px,3.4vw,40px);font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi__l{font-size:13px;font-weight:800;color:var(--v2);margin-top:2px}
.kpi__s{font-size:11.5px;color:var(--faint);margin-top:4px}
.top-post{display:flex;gap:20px;align-items:center;margin-top:18px;background:linear-gradient(140deg,var(--dark1),var(--dark2));color:#fff;border-radius:18px;padding:16px;text-decoration:none;transition:transform .35s var(--ease)}
.top-post:hover{transform:translateY(-3px)}
.top-post img,.top-post video,.top-post .ph-prod{width:88px;aspect-ratio:4/5;object-fit:cover;border-radius:10px;flex:none}
.top-post .eb{color:var(--v3)}
.top-post__t{font-size:18px;font-weight:800;margin-top:6px}
.top-post__t .pc{color:var(--v3)}
.top-post__m{font-size:13px;color:#B5B8D8;margin-top:4px}
.charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.charts--2{grid-template-columns:.9fr 1.1fr}
.charts--2:has(> :only-child){grid-template-columns:1fr}
@media (max-width:980px){.charts,.charts--2{grid-template-columns:1fr}}
.chart-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--sh);margin-top:0;min-width:0}
.metrics>.chart-card{margin-top:18px}
.chart-card figcaption b{display:block;font-size:15px;font-weight:800}
.chart-card figcaption span{display:block;font-size:12px;color:var(--faint);margin-top:2px}
.chart{min-height:300px;margin-top:8px}
.chart--sm{min-height:220px}
.mtable-wrap{overflow-x:auto;margin-top:12px}
.mtable{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:12px;font-variant-numeric:tabular-nums}
.mtable th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:8px 10px;border-bottom:1.5px solid var(--line);white-space:nowrap}
.mtable td{padding:10px;border-bottom:1px solid var(--line);color:var(--muted);white-space:nowrap}
.mtable td b{color:var(--ink)}
.mtable tr:hover td{background:var(--alt)}
.empty-state{background:#fff;border:1px dashed var(--line);border-radius:18px;padding:48px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.empty-state svg{width:40px;height:40px;fill:none;stroke:var(--v);stroke-width:1.8}
.empty-state p{max-width:460px;color:var(--muted);line-height:1.55}
.apexcharts-tooltip{font-family:Montserrat,sans-serif!important;border-radius:10px!important;box-shadow:0 12px 28px rgba(30,24,70,.18)!important;border:1px solid var(--line)!important}

/* =====================================================================
   TELÉFONOS SIMULADOS (del referente)
   ===================================================================== */
.tiltw{position:relative}
.phone{position:relative;width:var(--pw);height:calc(var(--pw) * 2.1667);border-radius:calc(var(--pw) * .165);background:linear-gradient(150deg,#3a3f62 0%,#0c0e1b 38%,#161a2e 70%,#2b3052 100%);padding:calc(var(--pw) * .034);box-shadow:inset 0 0 0 1.5px #474d74,inset 0 0 0 3px #0a0c16,0 60px 90px -30px color-mix(in oklab,var(--v) 55%,transparent),0 22px 34px -14px rgba(8,10,30,.55);flex:none}
.phone::before{content:"";position:absolute;right:-2.5px;top:25%;width:3px;height:12%;background:linear-gradient(#2c3150,#1a1d31);border-radius:0 3px 3px 0}
.phone::after{content:"";position:absolute;left:-2.5px;top:19%;width:3px;height:6%;background:#23273f;border-radius:3px 0 0 3px;box-shadow:0 calc(var(--pw) * .15) 0 #23273f,0 calc(var(--pw) * .27) 0 #23273f}
.scr{position:relative;width:100%;height:100%;border-radius:calc(var(--pw) * .133);overflow:hidden;background:#fff;isolation:isolate;font-size:calc(var(--pw) * .045);font-family:Montserrat,system-ui,sans-serif}
.island{position:absolute;left:50%;top:calc(var(--pw) * .06);width:31%;height:calc(var(--pw) * .085);transform:translateX(-50%);background:#04050a;border-radius:99px;z-index:30}
.glare{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 22%);pointer-events:none;z-index:40}
.phone.in{opacity:0}
.on .phone.in{animation:phoneIn 1s var(--ease) var(--d,0s) both}
@keyframes phoneIn{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}
.p3d--a .phone.in{animation-name:phoneInA}
.p3d--b .phone.in{animation-name:phoneInB}
@keyframes phoneInA{from{opacity:0;transform:translateY(70px) rotate(-4deg)}to{opacity:1;transform:rotate(-4deg)}}
@keyframes phoneInB{from{opacity:0;transform:translateY(70px) rotate(3deg)}to{opacity:1;transform:rotate(3deg)}}
.sbar{height:3.3em;display:flex;align-items:flex-end;justify-content:space-between;padding:0 2em .45em 2.2em;font-weight:800;font-size:.88em;flex:none;position:relative;z-index:3}
.sbar--light{position:absolute;left:0;right:0;top:0;color:#fff}
.sbi{width:4.3em;height:1em;fill:currentColor}
.av{display:inline-grid;place-items:center;flex:none;width:2.3em;height:2.3em;border-radius:50%;background:var(--v) center/cover;color:#fff;font-weight:900;font-size:1em;overflow:hidden}
.av.ring{box-shadow:0 0 0 1.5px #fff,0 0 0 3px var(--v)}
.av.sq{border-radius:.35em}
.av--brand{background:linear-gradient(135deg,var(--v),var(--v3))}

/* instagram */
.ig{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;color:#111}
.igh{display:flex;align-items:center;gap:.65em;padding:.5em .9em .55em;flex:none}
.igh b{font-size:.95em}
.igh .more{width:1.3em;height:1.3em;margin-left:auto;fill:#111}
.car{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#0b0c18;flex:none}
.trk{display:flex;height:100%;transition:transform .7s cubic-bezier(.3,.75,.12,1)}
.trk img{width:100%;height:100%;flex:none;object-fit:cover;display:block;user-select:none}
.trk .ph-prod{flex:none}
.cnum{position:absolute;right:.7em;top:.7em;background:rgba(18,18,24,.72);color:#fff;font-size:.74em;font-weight:700;padding:.28em .65em;border-radius:99px;font-variant-numeric:tabular-nums}
.finger{position:absolute;right:10%;top:56%;width:2.8em;height:2.8em;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 0 .5em rgba(255,255,255,.22),0 4px 14px rgba(0,0,0,.3);opacity:0;pointer-events:none}
.finger.go{animation:swipe .75s ease-in-out}
.finger.go-loop{animation:swipe .9s ease-in-out 2s infinite}
@keyframes swipe{0%{opacity:0;transform:translateX(0) scale(.6)}22%{opacity:1;transform:translateX(0) scale(1)}100%{opacity:0;transform:translateX(-10em) scale(.85)}}
.burst{position:absolute;left:50%;top:50%;width:6.5em;height:6.5em;margin:-3.25em 0 0 -3.25em;fill:#fff;opacity:0;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35));pointer-events:none}
.burst.go{animation:burst 1.1s var(--ease)}
@keyframes burst{0%{opacity:0;transform:scale(.2)}22%{opacity:1;transform:scale(1.18)}40%{transform:scale(.94)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-.8em) scale(1.08)}}
.acts{position:relative;display:flex;align-items:center;gap:1em;padding:.7em .9em .35em;flex:none}
.acts svg{width:1.7em;height:1.7em;fill:none;stroke:#111;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;display:block}
.acts .sv{margin-left:auto}
.lk.liked svg{fill:#ED4956;stroke:#ED4956;animation:likepop .5s var(--ease)}
@keyframes likepop{40%{transform:scale(1.3)}}
.dots{position:absolute;left:50%;top:50%;transform:translate(-50%,-10%);display:flex;gap:.3em}
.dots i{width:.42em;height:.42em;border-radius:50%;background:#cfd2da;transition:background .3s,transform .3s}
.dots i.a{background:#0095F6;transform:scale(1.2)}
.cap{padding:.25em .9em 0;font-size:.86em;line-height:1.38;flex:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cap b{margin-right:.35em}
.mu{color:#8a8d96}
.when{padding:.35em .9em;font-size:.7em;color:#8a8d96;flex:none}
.addc{display:flex;align-items:center;gap:.6em;padding:.25em .9em .4em;font-size:.76em;color:#8a8d96;flex:none}
.addc .av{width:1.9em;height:1.9em;font-size:.8em}
.nav{margin-top:auto;height:3.7em;display:flex;justify-content:space-around;align-items:flex-start;padding-top:.75em;border-top:1px solid #eee;flex:none;background:inherit}
.nav svg{width:1.6em;height:1.6em;fill:none;stroke:#111;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.ph-art{width:100%;height:100%;flex:none;display:flex;flex-direction:column;justify-content:flex-end;padding:1.4em;background:radial-gradient(circle at 70% 25%,color-mix(in oklab,var(--v) 60%,#fff),transparent 55%),linear-gradient(160deg,var(--v),var(--dark2));color:#fff}
.ph-art b{font-size:1.6em;font-weight:900;line-height:1.05}
.ph-art span{font-size:1.6em;font-weight:900;line-height:1.05;color:#FFEC00}

/* linkedin */
.lin{position:absolute;inset:0;display:flex;flex-direction:column;background:#EEF0F3;color:#1d1d1f}
.lin .sbar{background:#fff}
.lbar{display:flex;align-items:center;gap:.6em;padding:.1em .9em .55em;background:#fff;flex:none}
.lbar .av{width:1.9em;height:1.9em;font-size:.8em}
.lbar>svg{width:1.5em;height:1.5em;fill:none;stroke:#555;stroke-width:1.8}
.lsearch{flex:1;display:flex;align-items:center;gap:.4em;background:#EDF3F8;border-radius:.4em;padding:.4em .6em;font-size:.8em;color:#666}
.lsearch svg{width:1.2em;height:1.2em;fill:none;stroke:#666;stroke-width:2}
.lpost{background:#fff;margin-top:.45em;flex:none}
.lph{display:flex;gap:.6em;padding:.7em .9em .3em;align-items:flex-start}
.lph .av{width:2.6em;height:2.6em}
.lph b{display:block;font-size:.9em}
.lph small{display:block;font-size:.7em;color:#777;line-height:1.3}
.lfollow{margin-left:auto;color:#0A66C2;font-weight:800;font-size:.8em}
.ltxt{padding:.2em .9em .6em;font-size:.8em;line-height:1.38;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.car.doc .cnum{right:auto;left:.7em;top:auto;bottom:1.1em}
.dprog{position:absolute;left:0;right:0;bottom:0;height:.3em;background:rgba(255,255,255,.35)}
.dprog b{display:block;height:100%;background:#0A66C2;transition:width .6s var(--ease)}
.lacts{display:flex;justify-content:space-around;padding:.5em .3em .55em;border-top:1px solid #eee;margin-top:.25em}
.lacts span{display:flex;flex-direction:column;align-items:center;gap:.15em;font-size:.62em;font-weight:700;color:#555}
.lacts svg{width:2.1em;height:2.1em;fill:none;stroke:#555;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.lin .nav{background:#fff}
.lin .nav svg{stroke:#666}

/* reel */
.reel{position:absolute;inset:0;background:#000;color:#fff}
.reel .rv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel .rv--still{animation:kenburns 14s ease-in-out infinite alternate}
@keyframes kenburns{to{transform:scale(1.12) translate(-3%,-2%)}}
.reel .shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.4),transparent 17%,transparent 58%,rgba(0,0,0,.7));pointer-events:none}
.rtop{position:absolute;top:3.9em;left:1.1em;font-weight:900;font-size:1.2em;z-index:3}
.camk{position:absolute;top:3.7em;right:1em;z-index:3}
.camk svg{width:1.7em;height:1.7em;fill:none;stroke:#fff;stroke-width:1.8}
.mute{position:absolute;top:3.5em;right:.9em;width:2.6em;height:2.6em;border-radius:50%;border:0;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);display:grid;place-items:center;cursor:pointer;z-index:6;font-size:inherit;animation:mpulse 2.2s ease-in-out infinite}
.mute svg{width:1.35em;height:1.35em;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}
.mute .onn{display:none}.mute.on .onn{display:block}.mute.on .off{display:none}.mute.on{animation:none;background:var(--v)}
@keyframes mpulse{50%{box-shadow:0 0 0 .5em rgba(255,255,255,.18)}}
.rail{position:absolute;right:.55em;bottom:5.2em;display:flex;flex-direction:column;gap:1em;align-items:center;z-index:3}
.rail span{display:flex;flex-direction:column;align-items:center;gap:.25em;font-size:.66em;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.rail svg{width:2.4em;height:2.4em;fill:none;stroke:#fff;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.rail span:nth-child(4) svg{fill:#fff;stroke:none}
.rail .lk.liked svg{fill:#ED4956;stroke:#ED4956}
.disc{width:1.9em!important;height:1.9em!important;font-size:.9em!important;box-shadow:0 0 0 2px #fff;animation:spin 5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hearts{position:absolute;right:.9em;bottom:14em;width:3em;height:1em;pointer-events:none;z-index:4}
.hearts .ht{position:absolute;bottom:0;left:50%;width:1.7em;height:1.7em;fill:#ED4956;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));animation:rise 2.6s ease-out forwards}
@keyframes rise{0%{opacity:0;transform:translate(-50%,0) scale(.3)}14%{opacity:1;transform:translate(-50%,-1em) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-12em) scale(.75) rotate(var(--rt))}}
.rbot{position:absolute;left:.95em;right:4.4em;bottom:1.5em;z-index:3;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.rwho{display:flex;align-items:center;gap:.55em;font-weight:800;font-size:.9em}
.rwho .av{width:2.1em;height:2.1em;box-shadow:0 0 0 1.5px #fff;font-size:.85em}
.follow{border:1.2px solid rgba(255,255,255,.85);border-radius:.5em;padding:.18em .65em;font-size:.84em}
.rcap{font-size:.84em;margin-top:.55em;line-height:1.3}
.music{display:flex;gap:.4em;align-items:center;font-size:.76em;margin-top:.5em}
.music svg{width:1.2em;height:1.2em;fill:none;stroke:#fff;stroke-width:2;flex:none}
.mqw{overflow:hidden;white-space:nowrap;flex:1;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent)}
.mq{display:inline-block;animation:mq 9s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.rprog{position:absolute;left:0;right:0;bottom:0;height:.25em;background:rgba(255,255,255,.28);z-index:5}
.rprog i{display:block;height:100%;width:0;background:#fff}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .an,.reveal,.phone.in,.fi2{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}
@media (prefers-reduced-motion:reduce) and (min-width:761px){.fanz .fi2{transform:translateX(calc(var(--k) * 150px)) translateY(calc(var(--k) * var(--k) * 12px)) rotate(calc(var(--k) * 4deg))!important}}