/* ═══════════ HERO — sistema de unidad de diseño ═══════════ */
.hero{
  --u: min(100vw / 1280, 100vh / 800);
  position:relative; height:100vh; min-height:calc(560*var(--u));
  overflow:hidden; background:#0B1018; isolation:isolate;
}
@supports (height:100dvh){ .hero{ --u: min(100vw / 1280, 100dvh / 800); height:100dvh; } }

.hero .hero-media{ position:absolute; inset:0; z-index:0; }
.hero .hero-media video{
  position:absolute; left:-2px; top:-2px;
  width:calc(100% + 4px); height:calc(100% + 4px);
  object-fit:cover; transform:scale(1.002);
  filter:saturate(.5) contrast(1.05) brightness(.9) !important;
  animation:none !important;
}
.hero .hero-media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(11,16,24,.93) 0%, rgba(11,16,24,.62) 40%, rgba(11,16,24,.10) 74%, rgba(11,16,24,0) 100%),
    linear-gradient(180deg, rgba(11,16,24,.62) 0%, rgba(11,16,24,0) 24%, rgba(11,16,24,.28) 66%, rgba(11,16,24,.92) 100%) !important;
}
.hero .hero-grain{ z-index:2; opacity:.22; }

/* escenario */
.stage{
  position:absolute; inset:0; z-index:3;
  padding:calc(96*var(--u)) calc(68*var(--u)) calc(52*var(--u));
  display:grid;
  grid-template-columns: minmax(0,1fr) calc(300*var(--u));
  grid-template-rows: 1fr auto;
  column-gap:calc(56*var(--u)); row-gap:calc(34*var(--u));
  align-items:center;
}
.st-copy{ grid-column:1; grid-row:1; align-self:center; }
.panel  { grid-column:2; grid-row:1; align-self:center; }
.st-foot{ grid-column:1 / -1; grid-row:2; display:flex; gap:calc(14*var(--u)); flex-wrap:wrap; align-items:center; }

/* tipografía del hero */
.hero .eyebrow{
  font-size:calc(15*var(--u)); font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:#8FB4F2; margin:0 0 calc(26*var(--u));
  font-family:'IBM Plex Mono',monospace;
}
.hero h1{
  margin:0; font-weight:300;
  font-size:calc(74*var(--u)); line-height:calc(80*var(--u));
  letter-spacing:-0.03em; color:#fff;
}
.hero h1 .ln{ display:block; }
.hero h1 .ln.em{ font-weight:600; color:#fff; }

.tagrow{ display:flex; align-items:center; gap:calc(16*var(--u)); margin-top:calc(34*var(--u)); }
.play{
  width:calc(50*var(--u)); height:calc(50*var(--u)); border-radius:50%;
  background:#fff; display:flex; align-items:center; justify-content:center; flex:none;
  box-shadow:0 calc(6*var(--u)) calc(18*var(--u)) rgba(0,0,0,.35);
}
.play svg{ width:calc(13*var(--u)); height:calc(14*var(--u)); }
.tag{
  font-size:calc(19*var(--u)); font-weight:400; line-height:1.45;
  letter-spacing:-0.01em; color:rgba(255,255,255,.88); max-width:calc(470*var(--u));
}

/* panel de vidrio */
.panel{
  position:relative; width:calc(300*var(--u)); height:auto;
  display:flex; flex-direction:column;
  border-radius:calc(26*var(--u));
  background:linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
  border:calc(1*var(--u)) solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(calc(34*var(--u))) saturate(115%);
  backdrop-filter:blur(calc(34*var(--u))) saturate(115%);
  box-shadow:
    inset calc(1*var(--u)) calc(1*var(--u)) 0 rgba(255,255,255,.34),
    0 calc(18*var(--u)) calc(44*var(--u)) rgba(0,0,0,.34);
  padding:calc(28*var(--u));
}
.p-title{
  font-family:'IBM Plex Mono',monospace; font-size:calc(12*var(--u));
  letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.p-dot{
  position:absolute; right:calc(28*var(--u)); top:calc(31*var(--u));
  width:calc(9*var(--u)); height:calc(9*var(--u)); border-radius:50%; background:#8FB4F2;
}
.p-units{ list-style:none; padding:0; margin:calc(22*var(--u)) 0 0; }
.p-units li{
  padding:calc(13*var(--u)) 0; border-top:calc(1*var(--u)) solid rgba(255,255,255,.22);
  display:flex; flex-direction:column; gap:calc(4*var(--u));
}
.p-units b{ font-size:calc(18*var(--u)); font-weight:600; color:#fff; letter-spacing:-0.01em; }
.p-units span{ font-size:calc(13*var(--u)); color:rgba(255,255,255,.66); }
.p-foot{
  margin-top:calc(20*var(--u)); padding-top:calc(16*var(--u));
  border-top:calc(1*var(--u)) solid rgba(255,255,255,.22);
  font-size:calc(11.5*var(--u)); color:rgba(255,255,255,.62);
  font-family:'IBM Plex Mono',monospace; letter-spacing:.06em; line-height:1.4;
}

/* píldoras con perilla */
.pill{
  position:relative; display:inline-flex; align-items:center;
  height:calc(68*var(--u)); padding:0 calc(76*var(--u)) 0 calc(14*var(--u));
  border-radius:999px; text-decoration:none;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), background .3s ease;
}
.pill b{ font-size:calc(16*var(--u)); font-weight:500; letter-spacing:-0.01em; }
.pill .knob{
  position:absolute; right:calc(9*var(--u)); top:calc(9*var(--u));
  width:calc(50*var(--u)); height:calc(50*var(--u)); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.pill .knob svg{ width:calc(16*var(--u)); height:calc(16*var(--u)); }
@media (prefers-reduced-motion:no-preference){
  .pill:hover{ transform:translateY(calc(-2*var(--u))); }
}
.pill.wa{ background:#fff; color:#0B1018; padding-left:calc(16*var(--u)); }
.pill.wa:hover{ background:#EAF0F8; }
.pill.wa .pill-ico{
  width:calc(38*var(--u)); height:calc(38*var(--u)); border-radius:50%; background:#1B3F8B;
  display:flex; align-items:center; justify-content:center; margin-right:calc(12*var(--u)); flex:none;
}
.pill.wa .pill-ico svg{ width:calc(22*var(--u)); height:calc(22*var(--u)); fill:#fff; }
.pill.wa .knob{ background:#1B3F8B; }
.pill.ghost{
  background:rgba(255,255,255,.10); color:#fff;
  border:calc(1*var(--u)) solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(calc(24*var(--u))); backdrop-filter:blur(calc(24*var(--u)));
  padding-left:calc(26*var(--u));
}
.pill.ghost:hover{ background:rgba(255,255,255,.18); }
.pill.ghost .knob{ background:rgba(255,255,255,.22); }

/* ── compacto / vertical ── */
@media (max-aspect-ratio: 1/1), (max-width: 900px){
  .hero{ --u: min(100vw / 720, 100vh / 1160); height:auto; min-height:100vh; }
  @supports (height:100dvh){ .hero{ --u: min(100vw / 720, 100dvh / 1160); min-height:100dvh; } }
  .stage{
    position:relative; display:flex; flex-direction:column; justify-content:center;
    gap:calc(34*var(--u)); padding:calc(120*var(--u)) calc(40*var(--u)) calc(56*var(--u));
    min-height:100vh;
  }
  @supports (height:100dvh){ .stage{ min-height:100dvh; } }
  .hero h1{ font-size:calc(62*var(--u)); line-height:calc(68*var(--u)); }
  .tag{ font-size:calc(18*var(--u)); max-width:100%; }
  .panel{ width:100%; }
  .st-foot{ flex-direction:column; align-items:stretch; }
  .pill{ justify-content:flex-start; }
}
@media (max-width: 640px){
  /* --u compone (atado al ancho: el titular nunca desborda)
     --t lee (con piso: el texto no baja de tamaño legible ni el botón de táctil) */
  .hero{ --u: min(100vw / 520, 100vh / 1020);
         --t: max(var(--u), min(0.92px, 100vh / 760)); }
  @supports (height:100dvh){ .hero{ --u: min(100vw / 520, 100dvh / 1020);
         --t: max(var(--u), min(0.92px, 100dvh / 760)); } }
  .hero h1{ font-size:calc(46*var(--u)); line-height:calc(52*var(--u)); letter-spacing:-0.02em; }
  .stage{ padding:calc(108*var(--u)) calc(30*var(--u)) calc(44*var(--u)); gap:calc(26*var(--u)); }
  .hero .eyebrow{ font-size:calc(13*var(--t)); letter-spacing:.13em; margin-bottom:calc(20*var(--u)); }
  .tagrow{ margin-top:calc(26*var(--u)); gap:calc(13*var(--t)); }
  .play{ width:calc(46*var(--t)); height:calc(46*var(--t)); flex:none; }
  .play svg{ width:calc(12*var(--t)); height:calc(13*var(--t)); }
  .tag{ font-size:calc(15.5*var(--t)); line-height:1.5; }
  .panel{ padding:calc(24*var(--t)); border-radius:calc(20*var(--t)); }
  .p-units{ margin-top:calc(18*var(--t)); }
  .p-units li{ padding:calc(12*var(--t)) 0; }
  .p-units b{ font-size:calc(16*var(--t)); }
  .p-units span{ font-size:calc(12.5*var(--t)); }
  .pill{ width:100%; height:calc(58*var(--t)); padding-right:calc(64*var(--t)); padding-left:calc(14*var(--t)); }
  .pill b{ font-size:calc(15*var(--t)); }
  .pill .knob{ width:calc(44*var(--t)); height:calc(44*var(--t)); top:calc(7*var(--t)); right:calc(7*var(--t)); }
  .pill.wa .pill-ico{ width:calc(34*var(--t)); height:calc(34*var(--t)); margin-right:calc(10*var(--t)); }
  .pill.wa .pill-ico svg{ width:calc(19*var(--t)); height:calc(19*var(--t)); }
  .p-title{ font-size:calc(11.5*var(--t)); }
  .p-foot{ font-size:calc(11*var(--t)); }
  .wa-float{ width:50px; height:50px; right:14px; bottom:14px; }
}
/* apaisado muy bajo (teléfono rotado) */
@media (max-height: 520px) and (min-aspect-ratio: 1/1){
  .hero{ --u: min(100vw / 1180, 100vh / 560);
         --t: max(var(--u), min(0.9px, 100vw / 980)); }
  @supports (height:100dvh){ .hero{ --u: min(100vw / 1180, 100dvh / 560);
         --t: max(var(--u), min(0.9px, 100vw / 980)); } }
  .tag{ font-size:calc(15*var(--t)); }
  .pill{ height:calc(56*var(--t)); }
  .pill b{ font-size:calc(14.5*var(--t)); }
  .pill .knob{ width:calc(42*var(--t)); height:calc(42*var(--t)); top:calc(7*var(--t)); }
  .stage{ padding:calc(80*var(--u)) calc(44*var(--u)) calc(34*var(--u)); }
  .hero h1{ font-size:calc(52*var(--u)); line-height:calc(56*var(--u)); }
}

/* ── entrada ── */
html.pre .hero .eyebrow, html.pre .tagrow, html.pre .panel, html.pre .st-foot{ opacity:0; }
html.pre .hero h1 .ln{ clip-path:inset(100% 0 -14% 0); }
html.pre .p-dot{ scale:0; }