/* ============================================================
   B.link · Base compartida por todas las páginas
   Azul marino = lo físico (lo que se toca). Blanco = lo digital
   (lo que se ve). Cian = la señal NFC. Violeta = los puntos del logo.
   ============================================================ */
@property --near{syntax:"<number>";inherits:true;initial-value:0}
:root{
  --navy:#14213D; --navy-2:#1D2D52; --navy-3:#0E1630; --mesa:#1A2A4C;
  --blanco:#FFFFFF; --niebla:#F4F6FA; --gris:#4F5A73; --gris-d:#A9B3C9; --borde:#DDE1EA;
  --cian:#00B4D8; --violeta:#7B2FF7; --violeta-d:#9A63FF; --violeta-t:#5B1FC2; --violeta-bg:#EFE6FE;
  --display:"Unbounded",system-ui,sans-serif; --body:"Manrope",system-ui,sans-serif;
  --split:56%; --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;font-family:var(--body);font-size:16px;line-height:1.5;color:var(--navy);background:var(--blanco);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{margin:0}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--cian);outline-offset:3px}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:#fff;color:var(--navy);padding:12px 18px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:26px;border:1.5px solid transparent;font:700 16px/1.1 var(--body);text-align:center;text-decoration:none;cursor:pointer;transition:transform .15s,background .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn.sm{min-height:44px;padding:0 18px;font-size:15px}
.btn.light{background:#fff;color:var(--navy)}
.btn.light:hover{background:#E3F6FB}
.btn.line{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.btn.line:hover{border-color:var(--cian)}
.btn.navy{background:var(--navy);color:#fff}
.btn.navy:hover{background:var(--navy-2)}
.btn.ghost{border-color:var(--navy);color:var(--navy);background:transparent}
.btn.ghost:hover{background:var(--niebla)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- Marca ---------- */
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.brand .iso{flex:none}
.brand b{display:block;font:700 22px/1 var(--display);letter-spacing:-.01em}
.brand small{display:block;margin-top:6px;font:700 9px/1 var(--body);letter-spacing:.32em;text-transform:uppercase;color:var(--gris-d);white-space:nowrap}

/* ---------- Secciones y textos ---------- */
.sec{padding:clamp(88px,11vw,150px) 0}
.sec.navy{background:var(--navy);color:#F4F6FA}
.sec-head{max-width:820px}
.sec h2,.h2{font:600 clamp(34px,5vw,68px)/1.04 var(--display);letter-spacing:-.03em;margin-bottom:22px;text-wrap:balance}
.lead{margin:0;font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--gris);max-width:60ch}
.navy .lead{color:var(--gris-d)}
.h-top .l{display:block;font:600 clamp(30px,3.6vw,54px)/1.06 var(--display);letter-spacing:-.025em;color:#F4F6FA}
.tag{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;line-height:1.2}
.tag::before{content:"";width:18px;height:1.5px;background:currentColor;opacity:.7}
.tag.d{color:var(--gris-d)}
.tag.l{color:var(--gris)}

/* ---------- Barra superior ---------- */
.bar{position:fixed;inset:0 0 auto;z-index:60;background:rgba(20,33,61,.95);border-bottom:1px solid rgba(255,255,255,.08);transform:translateY(-102%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
@supports (backdrop-filter:blur(8px)){.bar{background:rgba(20,33,61,.86);backdrop-filter:blur(12px)}}
.bar.on{transform:none}
.bar.fijo{position:sticky;top:0;transform:none}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px;max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.bar .brand b{font-size:19px}
.bar-menu{display:flex;align-items:center;gap:26px}
.bar-menu a:not(.btn){color:#DDE3EF;font-weight:600;font-size:15px;text-decoration:none;text-underline-offset:6px;text-decoration-thickness:2px}
.bar-menu a:not(.btn):hover,.bar-menu a[aria-current="page"]{color:#fff;text-decoration-line:underline;text-decoration-color:var(--cian)}

/* ---------- Palabra grande partida en dos colores ----------
   El espaciado compensa el peso: la palabra engorda sin cambiar de ancho. */
.big{position:relative;height:var(--bigfs,120px);--cut:50%}
/* la caja sube .3em para que las tildes (Pruébalas) no queden recortadas */
.big .t{position:absolute;inset:-.3em 0 0;padding:.3em 0 0 var(--pad);font-family:var(--display);font-size:var(--bigfs,120px);line-height:1;white-space:nowrap;
  font-weight:calc(250 + var(--near) * 350);letter-spacing:calc(.023em - var(--near) * .042em);
  transition:font-weight .6s cubic-bezier(.2,.9,.3,1.15),letter-spacing .6s cubic-bezier(.2,.9,.3,1.15)}
.big .w{color:#F4F6FA;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.big .n{color:var(--navy);clip-path:inset(0 0 0 var(--split))}
.big.done .t{font-weight:900;letter-spacing:-.045em}
.measure{position:absolute;left:-9999px;top:0;visibility:hidden;font:900 100px/1 var(--display);letter-spacing:-.045em;white-space:nowrap}
/* el punto final son los tres puntos del isotipo */
.dots{display:inline-block;position:relative;width:.74em;height:.64em;vertical-align:baseline;margin-left:.03em}
.dots i{position:absolute;border-radius:50%;background:var(--violeta);transition:transform .5s cubic-bezier(.3,1.7,.5,1),width .4s,height .4s}
.big .w .dots i{background:var(--violeta-d)}
.dots i:nth-child(1){left:.03em;bottom:0;width:calc(.11em + var(--near) * .06em);height:calc(.11em + var(--near) * .06em)}
.dots i:nth-child(2){left:.24em;bottom:.17em;width:.21em;height:.21em;transform:scale(0)}
.dots i:nth-child(3){left:.48em;bottom:.38em;width:.25em;height:.25em;transform:scale(0)}
.big.done .dots i:nth-child(1){width:.17em;height:.17em}
.big.done .dots i:nth-child(2){transform:none;transition-delay:.25s}
.big.done .dots i:nth-child(3){transform:none;transition-delay:.42s}

/* ---------- Corte: azul a la izquierda, blanco a la derecha, la palabra en medio ---------- */
.corte{display:grid;grid-template-columns:var(--split) minmax(0,1fr);padding:clamp(88px,11vw,150px) 0 clamp(72px,9vw,120px);
  background:linear-gradient(90deg,var(--navy) var(--split),var(--blanco) 0)}
.corte .h-top{grid-column:1;padding:0 var(--pad) clamp(8px,1.5vw,18px)}
.corte .big{grid-column:1/-1}
.corte-l{grid-column:1;padding:clamp(28px,4vw,48px) var(--pad) 0}
.corte-l .lead{color:var(--gris-d);max-width:34em}
.corte-r{grid-column:2;padding:clamp(28px,4vw,48px) var(--pad) 0 clamp(24px,4vw,56px)}

/* ---------- Pie ---------- */
.pie{background:var(--navy-3);color:var(--gris-d);padding:48px 0 calc(48px + env(safe-area-inset-bottom))}
.pie-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.pie-menu{display:flex;flex-wrap:wrap;gap:8px 24px}
.pie a:not(.brand){color:#DDE3EF;text-decoration:none;font-weight:600;font-size:15px}
.pie a:not(.brand):hover{color:#fff;text-decoration:underline;text-decoration-color:var(--cian);text-underline-offset:5px}
.pie p{margin:0;font-size:14px}
.pie-redes{display:flex;gap:10px}
.pie .pie-redes a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.22);color:#fff;transition:border-color .2s}
.pie .pie-redes a:hover{border-color:var(--cian);text-decoration:none}
.pie-redes svg{width:20px;height:20px}

/* ---------- Isotipo: los eslabones se dibujan y los puntos crecen en secuencia ---------- */
.iso.draw .l1,.iso.draw .l2{stroke-dasharray:110;stroke-dashoffset:110;animation:draw 1.2s ease forwards}
.iso.draw .l2{animation-delay:.35s}
.iso.draw circle{opacity:0;transform-box:fill-box;transform-origin:center;animation:pop .4s ease forwards}
.iso.draw circle:nth-of-type(1){animation-delay:1.1s}.iso.draw circle:nth-of-type(2){animation-delay:1.25s}.iso.draw circle:nth-of-type(3){animation-delay:1.4s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}

/* ---------- Celular y tableta (< 1080 px): lo físico arriba, lo digital abajo ---------- */
@media (max-width:1079px){
  .bar-menu a:not(.btn){display:none}
  .brand small{letter-spacing:.2em}
  .h-top .l{font-size:clamp(28px,7.6vw,52px)}
  /* corte horizontal a media altura de la palabra (.3em de margen + .5em) */
  .big .w{clip-path:inset(0 0 calc(100% - .8em) 0)}
  .big .n{clip-path:inset(.8em 0 0 0)}

  .corte{display:flex;flex-direction:column;padding:0;background:var(--blanco)}
  .corte .h-top{order:1;background:var(--navy);padding:clamp(56px,12vw,96px) var(--pad) 0}
  .corte-l{order:2;background:var(--navy);padding:20px var(--pad) 40px}
  .corte .big{order:3;background:linear-gradient(180deg,var(--navy) var(--cut),var(--blanco) 0)}
  .corte-r{order:4;padding:32px var(--pad) 72px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bar,.big .t,.dots i{transition:none!important}
  .iso.draw .l1,.iso.draw .l2,.iso.draw circle{animation:none;stroke-dashoffset:0;opacity:1}
}