/* =========================================================================
   SoyWilfred · Portafolio de Marca
   Sistema de diseño compartido  ·  branding.soywilfred.com
   Tema oscuro premium · escala metálica marfil → negro
   ========================================================================= */

/* ---- Fuente: Helvetica Neue (Apple) con Inter como respaldo fiel ---- */
@font-face{
  font-family:'InterVar';
  font-style:normal;font-weight:100 900;font-display:swap;
  src:url('https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}

:root{
  --bg:#050607;          /* Negro    */
  --bg-2:#070809;         /* fondo alterno de sección */
  --carbon:#1a1e24;       /* Carbón   */
  --plomo:#626a73;        /* Plomo    */
  --plata:#9ea6af;        /* Plata    */
  --perla:#d4d8dd;        /* Perla    */
  --marfil:#f5f3ea;       /* Marfil (texto) */

  --card:#0e1116;
  --card-2:#15191f;
  --line:rgba(245,243,234,.08);
  --line-strong:rgba(245,243,234,.13);
  --muted:#7a828b;
  --muted-2:#5f6770;
  --muted-3:#454b53;

  --ease:cubic-bezier(.2,.8,.2,1);
  --nav-h:64px;
  --font:'Helvetica Neue','Helvetica','InterVar','Inter',Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{min-height:100%}
body{
  background:var(--bg);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  color:var(--marfil);
}
::selection{background:var(--plata);color:var(--bg)}
input{font-family:inherit}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
img{max-width:100%}
section{scroll-margin-top:var(--nav-h)}

/* Scrollbar premium (WebKit) */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#23282f;border:3px solid var(--bg);border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:#33393f}

/* Accesibilidad: foco visible */
:focus-visible{outline:2px solid var(--plata);outline-offset:3px}

/* Grano global */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.45;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* =========================================================================
   ANIMACIONES
   ========================================================================= */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes sheen{0%{transform:translateX(-130%)}55%,100%{transform:translateX(240%)}}
@keyframes scrollcue{0%{transform:scaleY(0);transform-origin:top;opacity:0}40%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}}
@keyframes revIn{0%{opacity:0;transform:translateY(30px) scale(.985);filter:blur(5px)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes pieceTop{0%{opacity:0;transform:translate(46px,-104px) rotate(-9deg) scale(.82)}70%{opacity:1}100%{opacity:1;transform:none}}
@keyframes pieceLeft{0%{opacity:0;transform:translate(-108px,18px) scale(.82)}70%{opacity:1}100%{opacity:1;transform:none}}
@keyframes pieceBot{0%{opacity:0;transform:translate(-46px,108px) scale(.82)}70%{opacity:1}100%{opacity:1;transform:none}}
@keyframes pieceArrow{0%{opacity:0;transform:scale(0) rotate(-40deg)}55%{opacity:1;transform:scale(1.32) rotate(4deg)}78%{transform:scale(.94)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes glyphIn{0%{opacity:0;transform:translateY(13px) scale(.9)}100%{opacity:1;transform:none}}
@keyframes heroSheen{0%{transform:translateX(-70%) skewX(-16deg);opacity:0}12%{opacity:.55}45%{opacity:.55}72%,100%{transform:translateX(380%) skewX(-16deg);opacity:0}}
@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
@keyframes screenIn{0%{opacity:0}100%{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================================================================
   APP / TRANSICIONES DE PANTALLA
   ========================================================================= */
.screen{display:none}
.screen.is-active{display:block;animation:screenIn .5s var(--ease) both}
.login.is-active,.selector.is-active{display:flex}

/* Boot loader */
#boot{position:fixed;inset:0;z-index:400;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .5s ease}
#boot.hide{opacity:0;pointer-events:none}
#boot .ring{width:30px;height:30px;border:2px solid rgba(245,243,234,.18);border-top-color:var(--marfil);border-radius:50%;animation:spin .8s linear infinite}

/* =========================================================================
   LOGIN
   ========================================================================= */
.login{position:fixed;inset:0;overflow:hidden;background:#050607}
.login__visual{position:relative;flex:1.15;min-width:0;overflow:hidden;
  background:radial-gradient(120% 120% at 25% 18%,#1a1e24 0%,#0c0e11 55%,#070809 100%)}
.login__visual::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 60%,rgba(7,8,9,.9) 100%)}
.login__mark{position:absolute;top:50%;left:50%;width:min(74%,540px);transform:translate(-50%,-56%);opacity:.07;pointer-events:none}
.login__mark svg{width:100%;height:auto;fill:var(--marfil)}
.login__visual-cap{position:absolute;left:clamp(28px,4vw,56px);right:clamp(28px,4vw,56px);bottom:clamp(32px,5vh,52px);z-index:1;animation:fadeUp .9s var(--ease) both}
.login__quote{font-size:clamp(19px,2.1vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.22;color:var(--marfil);max-width:560px;margin-top:14px;text-wrap:pretty}
.login__panel{flex:none;width:min(50%,540px);display:flex;flex-direction:column;justify-content:center;position:relative;
  padding:clamp(32px,5vw,72px);border-left:1px solid rgba(245,243,234,.08);
  background:radial-gradient(130% 100% at 50% 0%,#1a1e24 0%,#0e1116 60%,#0a0c0f 100%)}
.login__box{position:relative;width:100%;max-width:360px;animation:fadeUp .7s var(--ease) both}
.login__brand{display:flex;align-items:center;margin-bottom:48px}
.login__brand svg{width:168px;height:auto;fill:var(--marfil)}
.eyebrow{font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--muted-2)}
.login h1{font-size:clamp(30px,5vw,38px);font-weight:600;letter-spacing:-.025em;line-height:1.04;margin:16px 0 42px}
.lbl{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:9px}
.fld{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line-strong);color:var(--marfil);
  font-size:15px;padding:15px 16px;outline:none;transition:border-color .25s,box-shadow .25s}
.fld:focus{border-color:var(--plata);box-shadow:0 0 0 3px rgba(158,166,175,.10)}
.fld::placeholder{color:#3f454c}
.field-gap{margin-bottom:22px}
.err{height:20px;font-size:12px;color:#c8868b;margin-bottom:14px}
.btn-ingresar{width:100%;background:var(--marfil);color:var(--bg);border:none;font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;padding:17px;transition:background .25s,transform .2s}
.btn-ingresar:hover{background:#fff;transform:translateY(-1px)}
.demo-card{width:100%;text-align:left;margin-top:26px;padding:15px 16px;border:1px dashed rgba(245,243,234,.12);
  background:rgba(255,255,255,.015);font-size:12px;line-height:1.7;color:#7a828b;
  transition:border-color .25s,background .25s}
.demo-card:hover{border-color:rgba(158,166,175,.5);background:rgba(255,255,255,.04)}
.demo-card b{color:#9ea6af;letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:400}
.demo-card .pw{color:#c3cad2}
.login__foot{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.2em;color:var(--muted-3);text-transform:uppercase}

/* =========================================================================
   SELECTOR
   ========================================================================= */
.selector{position:fixed;inset:0;flex-direction:column;overflow:auto;
  background:radial-gradient(120% 90% at 50% -10%,#16191f 0%,#070809 60%,#050607 100%)}
.selector__top{display:flex;align-items:center;justify-content:space-between;padding:24px 40px}
.selector__top svg{width:140px;height:auto;fill:var(--marfil)}
.btn-ghost{background:none;border:1px solid rgba(245,243,234,.16);color:var(--plata);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;padding:9px 16px;transition:all .25s}
.btn-ghost:hover{border-color:var(--plata);color:var(--marfil)}
.selector__body{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:1080px;width:100%;margin:0 auto;padding:0 40px 60px}
.selector__body h1{font-size:clamp(38px,6vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1;margin:18px 0 12px}
.selector__body .lead{font-size:16px;color:var(--muted);margin-bottom:50px}
.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,360px));gap:22px}

.brand-card{text-align:left;background:linear-gradient(160deg,#1a1e24,#0c0e11);border:1px solid rgba(245,243,234,.1);
  padding:0;overflow:hidden;position:relative;display:block;
  transition:transform .4s var(--ease),border-color .4s,box-shadow .4s;animation:fadeUp .6s var(--ease) both}
.brand-card:hover{transform:translateY(-7px);border-color:rgba(158,166,175,.55);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.brand-card[disabled]{opacity:.5;pointer-events:none;cursor:default}
.brand-card__art{height:220px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  background:radial-gradient(80% 80% at 50% 38%,#262b32,#0c0e11)}
.brand-card__art svg,.brand-card__art img{position:relative;z-index:1}
.brand-card__sheen{position:absolute;top:-10%;left:-30%;width:30%;height:120%;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-16deg);opacity:0}
.brand-card:hover .brand-card__sheen{animation:sheen 1.1s var(--ease)}
.brand-card__meta{padding:24px}
.brand-card__row{display:flex;align-items:center;justify-content:space-between}
.brand-card__name{font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--marfil)}
.brand-card__arrow{font-size:18px;color:var(--plata);transition:transform .35s var(--ease)}
.brand-card:hover .brand-card__arrow{transform:translateX(5px)}
.brand-card__sub{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-top:7px}
.brand-card__badge{position:absolute;top:14px;right:14px;z-index:3;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--plata);border:1px solid rgba(158,166,175,.3);padding:4px 8px;background:rgba(5,6,7,.4)}
.brand-card--soon .brand-card__name{color:var(--muted)}

/* =========================================================================
   PRESENTACIÓN · chrome (nav, progreso, dot-rail, menú móvil)
   ========================================================================= */
.pres{position:relative;width:100%;overflow-x:clip;background:var(--bg)}

.pres-nav{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:0 clamp(20px,4vw,40px);height:var(--nav-h);
  background:rgba(5,6,7,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(245,243,234,.07)}
.pres-nav__brand{display:flex;align-items:center;gap:12px;flex:none}
.pres-nav__brand svg{width:15px;height:auto;fill:var(--marfil)}
.pres-nav__brand .bl{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pres-nav__brand .bl .a{color:var(--muted-3)}.pres-nav__brand .bl .b{color:var(--perla)}
.navlinks{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}
.navlink{font-size:11px;letter-spacing:.1em;color:var(--muted);transition:color .25s}
.navlink:hover,.navlink.is-active{color:var(--marfil)}
.pres-nav__right{display:flex;align-items:center;gap:12px;flex:none}
.navmenu-btn{display:none;flex-direction:column;gap:4px;background:none;border:none;padding:6px}
.navmenu-btn span{width:20px;height:1.5px;background:var(--perla);display:block}

.progress{position:fixed;top:var(--nav-h);left:0;right:0;height:1.5px;z-index:118;background:rgba(255,255,255,.05)}
.progress__bar{height:100%;width:0;background:linear-gradient(90deg,var(--plata),var(--marfil))}

.mobile-menu{position:fixed;inset:0;z-index:130;background:rgba(5,6,7,.97);backdrop-filter:blur(10px);
  display:none;flex-direction:column;padding:24px clamp(24px,7vw,48px)}
.mobile-menu.is-open{display:flex;animation:fadeUp .3s var(--ease)}
.mobile-menu__top{display:flex;align-items:center;justify-content:space-between;height:40px;margin-bottom:40px}
.mobile-menu__top .ml{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.mobile-menu__close{background:none;border:none;color:var(--marfil);font-size:26px;line-height:1}
.mobile-menu a{font-size:30px;font-weight:600;letter-spacing:-.02em;padding:13px 0;border-bottom:1px solid rgba(245,243,234,.07)}

.dotrail{position:fixed;right:28px;top:50%;transform:translateY(-50%);z-index:110;display:flex;flex-direction:column;gap:16px}
.dotrail a{display:flex;align-items:center;gap:10px;justify-content:flex-end;color:#5a616a;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;transition:color .3s}
.dotrail .dot-label{opacity:0;transition:opacity .3s}
.dotrail .dot{width:7px;height:7px;border-radius:50%;border:1px solid currentColor;transition:all .3s}
.dotrail a.is-active{color:var(--marfil)}
.dotrail a.is-active .dot{background:var(--marfil);transform:scale(1.3)}
.dotrail a.is-active .dot-label{opacity:1}

/* Reveal helper: contenido visible por defecto; la animación es realce */
.rv{will-change:opacity,transform}

/* Toast copiar HEX */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);z-index:140;
  background:var(--marfil);color:var(--bg);font-size:12px;letter-spacing:.06em;padding:11px 20px;opacity:0;
  transition:all .3s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Utilidad de padding lateral */
.pad-x{}

/* =========================================================================
   ESTADOS HOVER de componentes de presentación
   ========================================================================= */
.swatch{text-align:left;border:none;padding:0;background:none}
.swatch .chip{transition:transform .35s}
.swatch:hover .chip{transform:translateY(-7px)}

.dl{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;background:var(--card);
  border:1px solid var(--line);transition:border-color .25s,background .25s,transform .25s}
.dl:hover{border-color:rgba(158,166,175,.5);background:var(--card-2);transform:translateY(-2px)}
.dl--feature{background:linear-gradient(145deg,#1a1e24,#0e1116);border:1px solid rgba(158,166,175,.3)}
.dl--feature:hover{border-color:rgba(158,166,175,.6)}
.anatomy-card{transition:border-color .3s,transform .3s}
.anatomy-card:hover{border-color:rgba(158,166,175,.4);transform:translateY(-3px)}

/* ---- Login Google ---- */
.login__sub{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 26px;max-width:330px}
.gbtn{min-height:44px;display:flex;justify-content:flex-start}
.gbtn-note{font-size:12px;line-height:1.6;color:var(--muted);border:1px dashed var(--line-strong);padding:14px 16px;border-radius:10px}
.gbtn-note code{color:var(--plata);font-size:11px}

/* ---- Tarjeta de marca con portada ---- */
.brand-card__art--cover{background:#0a0c0f;padding:0}
.brand-card__cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
.brand-card:hover .brand-card__cover{transform:scale(1.04)}
.brand-card__art--cover::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,6,7,.05) 40%,rgba(5,6,7,.55));z-index:1}

/* ---- Centro de descargas: previews ---- */
.dl{display:flex;align-items:center;gap:16px}
.dl__prev{flex:none;width:50px;height:50px;border-radius:9px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dl__prev img{max-width:80%;max-height:62%;object-fit:contain}
.dl__prev--light{background:#f5f3ea}
.dl__prev--dark{background:#0a0c0f;border:1px solid rgba(245,243,234,.1)}
.dl__prev--mid{background:#9ea6af}
.dl__prev--doc{background:linear-gradient(150deg,#262b32,#0e1116);border:1px solid rgba(158,166,175,.3);
  font-size:9px;letter-spacing:.06em;font-weight:700;color:var(--plata)}
.dl__meta{flex:1;min-width:0;display:flex;flex-direction:column}
.dl__name{font-size:14px;color:var(--marfil);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl__fmt{font-size:10px;color:var(--muted-2);letter-spacing:.14em;text-transform:uppercase;margin-top:5px}
.dl__dl{flex:none;font-size:15px;color:var(--plata);transition:transform .25s}
.dl:hover .dl__dl{transform:translateY(2px)}

/* ---- Hero cinematográfico ---- */
.hero-bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:0;transform:scale(1.06);transition:opacity 1.4s ease,transform 8s ease-out;z-index:0}
.hero-bg.in{opacity:.42;transform:scale(1)}
.hero-grad{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 95% at 50% 42%,rgba(5,6,7,.30) 0%,rgba(5,6,7,.74) 58%,#050607 100%)}
.hero-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,6,7,.55) 0%,transparent 22% 70%,#050607 100%)}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1180px){ .dotrail{display:none!important} }
@media (max-width:920px){
  .navlinks{display:none!important}
  .navmenu-btn{display:flex!important}
  .grid-2{grid-template-columns:1fr!important}
  .ver-primary{grid-template-columns:1fr!important}
  .apps-row{grid-template-columns:1fr 1fr!important}
  .type-2{grid-template-columns:1fr!important}
  .anatomy-3{grid-template-columns:1fr!important}
  .concept-grid{grid-template-columns:1fr!important;gap:30px!important}
}
@media (max-width:560px){
  .grid-6{grid-template-columns:1fr 1fr!important}
  .ver-mono{grid-template-columns:1fr!important}
  .misuse-4{grid-template-columns:1fr 1fr!important}
  .apps-row{grid-template-columns:1fr!important}
  .selector__top{padding:20px 24px}
  .selector__body{padding:0 24px 48px}
}

/* Login split-screen → apilado en pantallas chicas */
@media (max-width:820px){
  .login__visual{display:none}
  .login__panel{width:100%;flex:1;border-left:none;align-items:center;
    background:radial-gradient(120% 90% at 50% 0%,#16191f 0%,#070809 55%,#050607 100%)}
}

/* Respeto a usuarios con movimiento reducido */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}