/* ============================================================
   OWLNOTE — Landing
   Estructura de diseño tomada de "Baseline", identidad OWLNOTE.
   Todo lo de aquí vive bajo html.landing-mode: el dashboard usa px
   y no debe verse afectado por la rejilla rem.
   ============================================================ */

/* ---------- Lenis (scroll suave) ---------- */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
html.is-locked{ overflow:hidden; }

/* ---------- Rejilla rem adaptativa (base de diseño 1920) ---------- */
/* Cada banda vuelve a 16px en su extremo superior y encoge hacia el inferior.
   Los topes evitan los dos extremos de esa sierra: sin el max() el cuerpo baja a
   10px al final de una banda, y sin el min() la banda móvil (calibrada a 360px)
   llegaría a 28px de raíz en 640, con el hero en 910px de alto.
   El suelo es 14px porque el texto más pequeño de la página es .875rem: por debajo
   de esa raíz las descripciones bajarían de 12px. */
html.landing-mode{ font-size:16px; }
@media (max-width:1920px){ html.landing-mode{ font-size:max(0.833333vw, 14px); } }
@media (max-width:1440px){ html.landing-mode{ font-size:max(1.111111vw, 14px); } }
@media (max-width:1024px){ html.landing-mode{ font-size:max(1.5625vw, 14px); } }
@media (max-width:640px){  html.landing-mode{ font-size:min(4.444444vw, 16px); } }

/* La app hereda de body, no de la raíz: así la rejilla no la toca */
html.landing-mode body{ background:var(--white); }

/* ---------- Tokens propios de la landing ---------- */
#landing, #l-loader, #l-menu, #login-screen{
  --ghost:#d9dfe9;
  --nav-radius:2rem;
  --r-card:1.5rem;
  --r-card-lg:2rem;
  --r-pill:62.5rem;
  --r-xl:.75rem;
}

#landing{
  position:relative;
  padding:.5rem;
  background:var(--white);
  color:var(--ink-900);
  overflow-x:clip;
}
@media (min-width:641px){ #landing{ padding:.75rem; } }

/* ============================================================
   1. Loader
   ============================================================ */
.l-loader{
  position:fixed; inset:0; z-index:200;
  background:var(--blue-900);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.25rem;
  transform:translateY(0);
  transition:transform 850ms cubic-bezier(.65,0,.35,1);
  /* Red de seguridad: si el JS no llegara a ejecutarse, la cortina se retira sola */
  animation:l-loader-bailout 0s linear 4.5s forwards;
}
.l-loader.is-out{ transform:translateY(-105%); }
@keyframes l-loader-bailout{ to{ visibility:hidden; pointer-events:none; } }

.l-loader-mark{
  display:flex; align-items:center; gap:.85rem;
  opacity:0; transform:translateY(1.25rem);
  animation:l-loader-in 700ms cubic-bezier(.16,1,.3,1) 80ms forwards;
}
.l-loader-mark img{ width:2.75rem; height:2.75rem; object-fit:contain; }
.l-loader-mark span{
  font-size:1.5rem; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--white);
}
@keyframes l-loader-in{ to{ opacity:1; transform:none; } }

.l-loader-track{
  width:10rem; height:1px; background:rgba(255,255,255,.22); overflow:hidden;
}
.l-loader-fill{
  display:block; height:100%; background:var(--white);
  transform:scaleX(0); transform-origin:left;
  animation:l-loader-fill 1280ms cubic-bezier(.65,0,.35,1) 120ms forwards;
}
@keyframes l-loader-fill{ to{ transform:scaleX(1); } }

/* ============================================================
   2. Primitivas de revelado
   ============================================================ */
.l-clip{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.14em; }
.l-clip-line{ display:block; }
/* Sin JS no hay data-split: el texto se ve tal cual */
[data-split] .l-clip-i{
  display:inline-block;
  transform:translateY(115%);
  opacity:0;
  transition-property:transform,opacity;
  transition-duration:950ms;
  transition-timing-function:cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
[data-split].is-in .l-clip-i{ transform:none; opacity:1; }

/* ============================================================
   3. Componentes compartidos
   ============================================================ */
.l-eyebrow{
  display:inline-flex; align-items:center; gap:.375rem;
  font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.22em;
  color:var(--ink-500);
}
.l-eyebrow::before{
  content:""; width:.375rem; height:.375rem; border-radius:50%;
  background:var(--blue-700); flex:none;
}
.l-on-dark .l-eyebrow, .l-eyebrow.is-light{ color:rgba(255,255,255,.7); }
.l-on-dark .l-eyebrow::before, .l-eyebrow.is-light::before{ background:var(--blue-400); }

.l-pill{
  display:inline-flex; align-items:center; gap:.625rem;
  padding:.875rem 1.75rem; border-radius:var(--r-pill);
  font-size:.875rem; font-weight:600; line-height:1;
  border:1px solid transparent; text-decoration:none;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.l-pill svg{ width:1rem; height:1rem; flex:none; }
.l-pill-arrow{ display:inline-flex; }
.l-pill-light{ background:var(--white); color:var(--blue-900); }
.l-pill-light:hover{ background:var(--blue-50); }
.l-pill-solid{ background:var(--blue-700); color:var(--white); }
.l-pill-solid:hover{ background:var(--blue-900); }
.l-pill-outline{ background:transparent; color:currentColor; border-color:currentColor; }
.l-on-dark .l-pill-outline:hover{ background:rgba(255,255,255,.1); }

.l-arrow-btn{
  width:3rem; height:3rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border); color:var(--ink-900);
  transition:background .3s ease, border-color .3s ease;
}
.l-arrow-btn:hover{ background:var(--surface); border-color:var(--ink-300); }
.l-arrow-btn svg{ width:1.125rem; height:1.125rem; }
.l-arrow-btn.is-prev svg{ transform:scaleX(-1); }

.l-dots{ display:flex; align-items:center; gap:.5rem; }
.l-dot{
  background:none; border:none; padding:.375rem .125rem; line-height:0;
}
.l-dot i{
  display:block; width:.375rem; height:.375rem; border-radius:var(--r-pill);
  background:var(--ink-300); opacity:.5;
  transition:width .45s cubic-bezier(.16,1,.3,1), opacity .3s ease, background .3s ease;
}
.l-dot.is-on i{ width:1.25rem; opacity:1; background:var(--blue-700); }
.l-dots.is-light .l-dot i{ background:rgba(255,255,255,.55); }
.l-dots.is-light .l-dot.is-on i{ background:var(--white); }

/* ============================================================
   4. Mockups de la interfaz (sustituyen a las fotos)
   El interior va en em: basta con fijar font-size en el contenedor.
   ============================================================ */
.mk{
  position:absolute; inset:0;
  background:var(--white);
  overflow:hidden;
  font-size:1rem;
  --l1:#e8edf5; --l2:#dbe4f0; --l3:#cbd8ea;
}
.mk *{ box-sizing:border-box; }
.mk-line{ height:.42em; border-radius:.21em; background:var(--l1); }
.mk-line.is-dark{ background:var(--l3); }
.mk-line.is-blue{ background:var(--blue-200); }

/* --- Dashboard completo (héroe) --- */
.mk-app{ display:flex; }
.mk-side{
  width:21%; height:100%; flex:none; padding:1.1em .9em;
  background:var(--blue-900); display:flex; flex-direction:column; gap:1.1em;
}
.mk-side-brand{ display:flex; align-items:center; gap:.5em; }
.mk-side-brand i{
  width:1.5em; height:1.5em; border-radius:.45em; flex:none;
  background:linear-gradient(135deg,var(--blue-400),var(--blue-700));
}
.mk-side-brand b{ flex:1; height:.45em; border-radius:.22em; background:rgba(255,255,255,.55); }
.mk-side-nav{ display:flex; flex-direction:column; gap:.55em; }
.mk-side-nav span{
  height:1.5em; border-radius:.45em; background:rgba(255,255,255,.08);
  display:flex; align-items:center; gap:.45em; padding:0 .5em;
}
.mk-side-nav span::before{
  content:""; width:.6em; height:.6em; border-radius:.18em; background:rgba(255,255,255,.35); flex:none;
}
.mk-side-nav span::after{ content:""; flex:1; height:.35em; border-radius:.18em; background:rgba(255,255,255,.22); }
.mk-side-nav span.is-on{ background:var(--blue-700); }
.mk-side-nav span.is-on::before{ background:var(--white); }
.mk-side-nav span.is-on::after{ background:rgba(255,255,255,.75); }

.mk-main{ flex:1; padding:1.1em 1.2em; display:flex; flex-direction:column; gap:1em; background:var(--surface); }
.mk-top{ display:flex; align-items:center; gap:.7em; }
.mk-top .mk-line:first-child{ width:32%; height:.6em; background:var(--l3); }
.mk-top-sp{ flex:1; }
.mk-chip{ height:1.3em; width:4em; border-radius:var(--r-pill); background:var(--blue-700); }
.mk-avatar{ width:1.3em; height:1.3em; border-radius:50%; background:var(--l3); }

.mk-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7em; }
.mk-stat{
  background:var(--white); border:1px solid var(--border); border-radius:.6em;
  padding:.7em; display:flex; flex-direction:column; gap:.45em;
}
.mk-stat b{ display:block; height:.9em; width:45%; border-radius:.2em; background:var(--blue-700); }
.mk-stat i{ display:block; height:.35em; width:80%; border-radius:.18em; background:var(--l1); }

.mk-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.7em; flex:1; }
.mk-card{
  background:var(--white); border:1px solid var(--border); border-radius:.6em;
  padding:.7em; display:flex; flex-direction:column; gap:.45em; overflow:hidden;
}
.mk-card em{ display:block; height:.3em; width:2.2em; border-radius:.15em; background:var(--blue-400); }
.mk-card .mk-line{ width:100%; }
.mk-card .mk-line:nth-child(3){ width:70%; }

/* --- Editor de texto --- */
.mk-editor{ display:flex; flex-direction:column; background:var(--surface); }
.mk-ribbon{
  display:flex; align-items:center; gap:.35em; flex-wrap:wrap;
  padding:.7em .8em; background:var(--white); border-bottom:1px solid var(--border);
}
.mk-ribbon i{ width:1.15em; height:1.15em; border-radius:.28em; background:var(--l1); flex:none; }
.mk-ribbon i.is-on{ background:var(--blue-200); }
.mk-ribbon i.is-wide{ width:2.6em; }
.mk-page{
  flex:1; margin:.9em; padding:1.1em 1.2em; background:var(--white);
  border-radius:.4em; box-shadow:0 .15em .6em rgba(30,58,95,.08);
  display:flex; flex-direction:column; gap:.55em;
}
.mk-page h4{ margin:0; height:.95em; width:62%; border-radius:.24em; background:var(--ink-900); }
.mk-page .mk-line:nth-child(4){ width:92%; }
.mk-page .mk-line:nth-child(5){ width:97%; }
.mk-page .mk-line:nth-child(6){ width:74%; }
.mk-quote{
  border-left:.25em solid var(--blue-400); padding-left:.6em;
  display:flex; flex-direction:column; gap:.35em;
}
.mk-bullets{ display:flex; flex-direction:column; gap:.4em; }
.mk-bullets span{ display:flex; align-items:center; gap:.45em; }
.mk-bullets span::before{ content:""; width:.3em; height:.3em; border-radius:50%; background:var(--blue-700); flex:none; }
.mk-bullets span::after{ content:""; flex:1; height:.35em; border-radius:.18em; background:var(--l1); }
.mk-bullets span:nth-child(2)::after{ max-width:72%; }

/* --- Tablero kanban --- */
.mk-board{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6em; padding:.9em; background:var(--surface); }
.mk-col{ display:flex; flex-direction:column; gap:.5em; }
.mk-col-head{ display:flex; align-items:center; gap:.4em; }
.mk-col-head i{ width:.45em; height:.45em; border-radius:50%; flex:none; background:var(--ink-300); }
.mk-col:nth-child(1) .mk-col-head i{ background:var(--amber); }
.mk-col:nth-child(2) .mk-col-head i{ background:var(--blue-700); }
.mk-col:nth-child(3) .mk-col-head i{ background:var(--green); }
.mk-col-head b{ flex:1; height:.38em; border-radius:.19em; background:var(--l3); max-width:3.4em; }
.mk-task{
  background:var(--white); border:1px solid var(--border); border-radius:.45em;
  padding:.55em; display:flex; flex-direction:column; gap:.35em;
}
.mk-task .mk-line{ height:.34em; }
.mk-task .mk-line:last-child{ width:55%; }
.mk-task-tag{ height:.55em; width:2.1em; border-radius:var(--r-pill); background:var(--blue-100); }

/* --- Lista de actividades --- */
.mk-tasks{ padding:.9em; display:flex; flex-direction:column; gap:.5em; background:var(--white); }
.mk-row{
  display:flex; align-items:center; gap:.6em;
  border:1px solid var(--border); border-radius:.45em; padding:.6em .7em;
}
.mk-row i{ width:.85em; height:.85em; border-radius:.22em; border:.11em solid var(--ink-300); flex:none; }
.mk-row.is-done i{ background:var(--green); border-color:var(--green); }
.mk-row.is-done b{ background:var(--l1); }
.mk-row b{ flex:1; height:.4em; border-radius:.2em; background:var(--l3); }
.mk-row em{ width:2.4em; height:.75em; border-radius:var(--r-pill); background:var(--blue-100); flex:none; }
.mk-row.is-late em{ background:#fde8d3; }

/* --- Rejilla de clases --- */
.mk-classes{ padding:.9em; display:grid; grid-template-columns:repeat(2,1fr); gap:.6em; background:var(--white); }
.mk-class{
  border:1px solid var(--border); border-radius:.5em; padding:.65em;
  display:flex; flex-direction:column; gap:.4em; position:relative; overflow:hidden;
}
.mk-class::before{ content:""; position:absolute; inset:0 auto 0 0; width:.28em; }
.mk-class:nth-child(1)::before{ background:var(--blue-700); }
.mk-class:nth-child(2)::before{ background:var(--green); }
.mk-class:nth-child(3)::before{ background:var(--amber); }
.mk-class:nth-child(4)::before{ background:var(--blue-400); }
.mk-class b{ height:.45em; width:70%; border-radius:.22em; background:var(--l3); margin-left:.5em; }
.mk-class .mk-line{ height:.3em; margin-left:.5em; }

/* ============================================================
   5. Hero
   ============================================================ */
.l-hero{
  position:relative;
  height:calc(100svh - 1rem);
  min-height:36rem;
  border-radius:var(--r-card-lg);
  overflow:hidden;
  background:var(--blue-900);
  color:var(--white);
  display:flex; flex-direction:column; justify-content:flex-end;
  isolation:isolate;
}
@media (min-width:641px){ .l-hero{ height:calc(100svh - 1.5rem); } }

.l-hero-plate{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.l-hero-plate-inner{
  position:absolute; left:0; right:0; top:-16%; height:132%;
  will-change:transform;
}
.l-hero-plate-inner .mk{ font-size:1.7rem; }
.l-hero-veil{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(15,47,99,.65), rgba(15,47,99,.35), rgba(15,47,99,.78));
}

/* --- Cabecera --- */
.l-head{
  position:absolute; top:0; left:0; right:0; z-index:5;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:1.5rem 2.5rem;
  color:var(--white);
}
.l-head-nav{ display:flex; align-items:center; gap:2rem; }
.l-head-nav a{
  color:rgba(255,255,255,.78); text-decoration:none; font-size:.8125rem;
  font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  transition:color .3s ease;
}
.l-head-nav a:hover{ color:var(--white); }
.l-head-brand{ display:flex; align-items:center; gap:.6rem; justify-self:center; }
.l-head-brand img{ width:2rem; height:2rem; object-fit:contain; }
.l-head-brand span{
  font-size:1rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
}
.l-head-right{ display:flex; align-items:center; gap:.75rem; justify-self:end; }
.l-burger{
  width:3rem; height:3rem; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:transparent; display:none; flex-direction:column; align-items:center;
  justify-content:center; gap:.3rem;
}
.l-burger i{ display:block; width:1.1rem; height:1px; background:var(--white); }

/* --- Cuerpo del hero --- */
.l-hero-body{ position:relative; z-index:2; padding:0 2.5rem 2.5rem; }
.l-hero-title{
  margin:0 0 1.75rem;
  font-size:12.5vw; font-weight:500; line-height:.85; letter-spacing:-.02em;
  text-transform:uppercase; white-space:nowrap;
}
.l-hero-row{
  display:grid; grid-template-columns:1fr auto; gap:2.5rem; align-items:flex-end;
}
.l-hero-tag{
  margin:0; font-size:2.4rem; line-height:1.1; font-weight:400;
  color:rgba(255,255,255,.92); max-width:22ch;
}
.l-hero-cluster{ display:flex; align-items:flex-end; gap:1.25rem; }

/* Carrusel de módulos del hero */
.l-slider-wrap{ width:24rem; }
.l-slider{ position:relative; height:6.5rem; }
.l-slide{
  position:absolute; inset:0;
  display:flex; align-items:center; gap:1rem;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-card); padding:1rem;
  backdrop-filter:blur(6px);
  will-change:transform,opacity;
}
.l-slide-thumb{
  position:relative; width:4.5rem; height:4.5rem; flex:none;
  border-radius:var(--r-xl); overflow:hidden; background:var(--white);
}
.l-slide-thumb .mk{ font-size:.34rem; }
.l-slide-txt{ flex:1; min-width:0; }
.l-slide-txt small{
  display:block; font-size:.6875rem; text-transform:uppercase; letter-spacing:.18em;
  color:rgba(255,255,255,.6); margin-bottom:.35rem;
}
.l-slide-txt strong{ display:block; font-size:1.125rem; font-weight:600; }
.l-slider-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:1rem; }
.l-slider-foot .l-eyebrow{ color:rgba(255,255,255,.6); }
.l-slider-foot .l-eyebrow::before{ background:var(--blue-400); }

/* Tarjeta de dato */
.l-fact{
  width:15rem; background:var(--white); color:var(--ink-900);
  border-radius:var(--r-card); padding:1.25rem;
  display:flex; gap:1rem; align-items:center;
}
.l-fact-mock{
  position:relative; width:4rem; aspect-ratio:3/4; flex:none;
  border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--border);
}
.l-fact-mock .mk{ font-size:.32rem; }
.l-fact b{ display:block; font-size:1.75rem; font-weight:700; line-height:1; letter-spacing:-.02em; }
.l-fact span{ display:block; font-size:.75rem; color:var(--ink-500); margin-top:.35rem; line-height:1.35; }

/* ============================================================
   6. Secciones genéricas
   ============================================================ */
.l-sec{ max-width:88rem; margin:0 auto; padding:7rem 2.5rem; }
.l-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:3.5rem; }
.l-sec-title{
  margin:.75rem 0 0; font-size:3.5rem; font-weight:500; line-height:1.05; letter-spacing:-.02em;
}
.l-sec-lead{ margin:0; font-size:1.0625rem; line-height:1.6; color:var(--ink-500); max-width:34ch; }

/* ============================================================
   7. Módulos: palabras fantasma + carrusel
   ============================================================ */
.l-trust{ background:var(--surface); border-radius:var(--r-card-lg); margin-top:.75rem; }
.l-ghost{ max-width:88rem; margin:0 auto; }
.l-ghost-row{ display:flex; align-items:baseline; justify-content:space-between; }
.l-ghost-w{
  font-size:8.2vw; font-weight:500; line-height:.92; letter-spacing:-.03em;
  text-transform:uppercase; color:var(--ghost);
  will-change:transform;
}
.l-ghost-row:last-child .l-ghost-w:first-child .l-clip-i{ color:var(--ink-900); }

.l-trust-mid{
  display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;
  padding:3rem 0;
}
.l-mod-stage{ position:relative; height:32rem; }
.l-mod-slide{
  position:absolute; inset:0;
  display:grid; grid-template-columns:1fr auto; gap:3rem; align-items:center;
  will-change:transform,opacity;
}
.l-mod-copy h3{ margin:.9rem 0 .75rem; font-size:2.5rem; font-weight:500; letter-spacing:-.02em; line-height:1.1; }
.l-mod-copy p{ margin:0 0 1.5rem; font-size:1rem; line-height:1.65; color:var(--ink-500); max-width:36ch; }
.l-mod-list{ list-style:none; margin:0 0 2rem; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.l-mod-list li{
  position:relative; padding-left:1.5rem; font-size:.9375rem; color:var(--ink-700);
}
.l-mod-list li::before{
  content:""; position:absolute; left:0; top:.5rem;
  width:.5rem; height:.5rem; border-radius:50%; background:var(--blue-700);
}
.l-mod-card{
  position:relative; width:24rem; aspect-ratio:3/4; flex:none;
  border-radius:var(--r-card-lg); overflow:hidden;
  box-shadow:0 2rem 4rem rgba(30,58,95,.18);
  border:1px solid var(--border);
  will-change:transform;
}
.l-mod-card .mk{ font-size:1.15rem; }
.l-mod-ctrl{ display:flex; align-items:center; gap:1rem; }

/* ============================================================
   8. Lista numerada 01–04
   ============================================================ */
.l-prog-list{ border-top:1px solid var(--border); }
.l-prog{
  display:grid; grid-template-columns:5rem 1fr 1fr 4rem;
  gap:2rem; align-items:center;
  padding:2.25rem 0; border-bottom:1px solid var(--border);
  text-decoration:none; color:inherit;
  will-change:transform;
}
.l-prog-num{ font-size:.875rem; font-weight:600; color:var(--ink-300); letter-spacing:.08em; }
.l-prog-name{ margin:0; font-size:2rem; font-weight:500; letter-spacing:-.02em; }
.l-prog-desc{ margin:0; font-size:.9375rem; line-height:1.6; color:var(--ink-500); }
.l-prog-go{
  justify-self:end; width:2.75rem; height:2.75rem; border-radius:50%;
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  transition:background .35s ease, border-color .35s ease;
}
.l-prog:hover .l-prog-go{ background:var(--blue-700); border-color:var(--blue-700); color:var(--white); }
.l-prog-arrow{ display:inline-flex; opacity:.55; }
.l-prog-arrow svg{ width:1.125rem; height:1.125rem; }

/* ============================================================
   9. Vistas: dos tarjetas inclinadas
   ============================================================ */
.l-views{ margin-top:-2.5rem; }
.l-views-intro{ max-width:34rem; margin-bottom:3rem; }
.l-views-icon{
  width:4rem; height:4rem; border-radius:var(--r-xl);
  background:var(--blue-50); border:1px solid var(--blue-100);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem;
  will-change:transform;
}
.l-views-icon img{ width:2.4rem; height:2.4rem; object-fit:contain; }
.l-views-title{ margin:0 0 1.25rem; font-size:3.25rem; font-weight:500; line-height:1.05; letter-spacing:-.02em; }
.l-views-body{ margin:0; font-size:1.0625rem; line-height:1.65; color:var(--ink-500); }
.l-views-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; align-items:start; }
.l-view-tile{ will-change:transform; }
.l-view-tile:nth-child(2){ margin-bottom:2rem; }
.l-view-shot{
  position:relative; aspect-ratio:3/4; border-radius:var(--r-card-lg);
  overflow:hidden; border:1px solid var(--border);
  box-shadow:0 1.5rem 3rem rgba(30,58,95,.12);
  will-change:transform;
}
.l-view-shot .mk{ font-size:1.3rem; }
.l-view-tile h3{ margin:1.5rem 0 .5rem; font-size:1.375rem; font-weight:600; }
.l-view-tile p{ margin:0; font-size:.9375rem; line-height:1.6; color:var(--ink-500); max-width:38ch; }

/* ============================================================
   10. Banda de cifras
   ============================================================ */
.l-stats{
  margin-top:.75rem; background:var(--blue-900); color:var(--white);
  border-radius:var(--r-card-lg);
}
.l-stats-inner{ max-width:88rem; margin:0 auto; padding:5rem 2.5rem; }
.l-stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:3rem 2.5rem; margin-top:3rem; }
.l-stat{ border-top:1px solid rgba(255,255,255,.2); padding-top:1.5rem; will-change:transform; }
.l-stat b{ display:block; font-size:4rem; font-weight:500; line-height:1; letter-spacing:-.03em; }
.l-stat span{ display:block; margin-top:.75rem; font-size:.9375rem; color:rgba(255,255,255,.65); line-height:1.5; }

/* ============================================================
   11. Cómo se usa
   ============================================================ */
.l-flow-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.l-flow{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-card); padding:2rem;
  display:flex; flex-direction:column; gap:1rem;
  will-change:transform;
}
.l-flow-step{
  width:2.5rem; height:2.5rem; border-radius:50%;
  background:var(--blue-700); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:.875rem; font-weight:700;
}
.l-flow h3{ margin:0; font-size:1.25rem; font-weight:600; }
.l-flow p{ margin:0; font-size:.9375rem; line-height:1.65; color:var(--ink-500); }

/* ============================================================
   12. Footer
   ============================================================ */
.l-foot{
  margin-top:.75rem; background:var(--blue-900); color:var(--white);
  border-radius:var(--r-card-lg);
}
.l-foot-inner{ max-width:88rem; margin:0 auto; padding:5rem 2.5rem 2.5rem; }
.l-foot-cta{
  display:flex; align-items:flex-end; justify-content:space-between; gap:3rem;
  padding-bottom:4rem; border-bottom:1px solid rgba(255,255,255,.15);
}
.l-foot-cta h2{ margin:.75rem 0 0; font-size:4rem; font-weight:500; line-height:1; letter-spacing:-.03em; }
.l-foot-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding-top:2rem; flex-wrap:wrap;
}
.l-foot-brand{ display:flex; align-items:center; gap:.7rem; }
.l-foot-brand img{ width:2.25rem; height:2.25rem; object-fit:contain; }
.l-foot-brand span{ font-size:1rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.l-foot-links{ display:flex; gap:2rem; }
.l-foot-links a, .l-foot-links button{
  background:none; border:none; padding:0;
  color:rgba(255,255,255,.7); text-decoration:none; font-size:.875rem;
  transition:color .3s ease;
}
.l-foot-links a:hover, .l-foot-links button:hover{ color:var(--white); }
.l-foot-legal{ font-size:.8125rem; color:rgba(255,255,255,.45); }

/* ============================================================
   13. Menú a pantalla completa
   ============================================================ */
.l-menu{ position:fixed; inset:0; z-index:120; display:none; }
.l-menu.is-open{ display:block; }
.l-menu-back{
  position:absolute; inset:0; border:none; padding:0;
  background:rgba(15,28,49,.5); backdrop-filter:blur(4px); opacity:0;
}
.l-menu-panel{
  position:absolute; inset:.75rem;
  background:var(--blue-900); color:var(--white);
  border-radius:var(--r-card-lg);
  padding:2.5rem; display:flex; flex-direction:column;
  will-change:transform,opacity;
}
.l-menu-top{ display:flex; align-items:center; justify-content:space-between; }
.l-menu-close{
  width:3rem; height:3rem; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:transparent; color:var(--white); display:flex; align-items:center; justify-content:center;
}
.l-menu-close svg{ width:1.25rem; height:1.25rem; }
.l-menu-nav{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:.5rem; }
.l-menu-link{
  color:var(--white); text-decoration:none;
  font-size:4.5rem; font-weight:500; line-height:1.1; letter-spacing:-.02em;
  will-change:transform,opacity;
}
.l-menu-link:hover{ color:var(--blue-400); }
.l-menu-foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }

/* ============================================================
   14. Responsive
   ============================================================ */
@media (max-width:1024px){
  .l-hero-row{ grid-template-columns:1fr; gap:2rem; }
  .l-hero-cluster{ flex-wrap:wrap; }
  .l-slider-wrap{ width:100%; max-width:26rem; }
  .l-mod-slide{ grid-template-columns:1fr; gap:2rem; }
  .l-mod-stage{ height:auto; min-height:44rem; }
  .l-mod-card{ width:100%; max-width:20rem; }
  .l-views-grid{ gap:1.25rem; }
  .l-prog{ grid-template-columns:4rem 1fr 3rem; }
  .l-prog-desc{ grid-column:2 / 4; }
}

@media (max-width:768px){
  .l-head{ padding:1rem 1.25rem; grid-template-columns:auto 1fr auto; }
  .l-head-nav{ display:none; }
  .l-head-brand{ justify-self:start; }
  .l-head-cta{ display:none; }
  .l-burger{ display:flex; }
  .l-hero-body{ padding:0 1.25rem 1.75rem; }
  .l-hero-tag{ font-size:1.75rem; }
  .l-sec{ padding:4.5rem 1.25rem; }
  .l-sec-head{ flex-direction:column; align-items:flex-start; gap:1rem; margin-bottom:2.5rem; }
  .l-sec-title{ font-size:2.5rem; }
  .l-views-title{ font-size:2.25rem; }
  .l-views{ margin-top:0; }
  .l-views-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .l-view-tile:nth-child(2){ margin-bottom:0; }
  .l-flow-grid{ grid-template-columns:1fr; }
  .l-stats-inner, .l-foot-inner{ padding-left:1.25rem; padding-right:1.25rem; }
  .l-stat b{ font-size:3rem; }
  .l-foot-cta{ flex-direction:column; align-items:flex-start; gap:2rem; }
  .l-foot-cta h2{ font-size:2.5rem; }
  .l-menu-link{ font-size:3rem; }
  .l-menu-panel{ padding:1.5rem; }
  .l-trust-mid{ padding:2rem 0; }
  .l-prog{ grid-template-columns:3rem 1fr 2.75rem; gap:1rem; padding:1.75rem 0; }
  .l-prog-name{ font-size:1.5rem; }
  .l-prog-desc{ font-size:.875rem; }
  .l-mod-copy h3{ font-size:1.75rem; }
}

@media (max-width:640px){
  .l-hero{ min-height:32rem; }
  .l-fact{ width:100%; }
  .l-slider{ height:7rem; }
  .l-ghost-row{ justify-content:flex-start; gap:.4em; }
}