/* =========================================================================
   OLUX · Estilos de la parte pública (landing + páginas legales).
   Extraído del <style> inline de pages/public_home.html para poder
   reutilizarlo desde pages/public_base.html en varias páginas.
   ========================================================================= */

/* =========================================================
   TOKENS
   ========================================================= */
:root {
  /* Dark, contrasty mesh palette — purples to blues */
  --c-bg:        #050616;     /* near-black with violet bias */
  --c-bg-deep:   #03040D;     /* page edges / footer */
  --c-violet:    #2A1456;     /* deep violet */
  --c-indigo:    #161F58;     /* indigo */
  --c-blue:      #0E2B6E;     /* deep blue */
  --c-magenta:   #4A1A5C;     /* desaturated magenta highlight */
  --c-glow:      #6B7BE8;     /* UV blue accent */
  --c-glow-soft: #A8B5FF;     /* lighter blue accent */
  --c-uv:        #7C5BFF;     /* signature violet */

  --ink:        #F4F3FF;      /* primary text */
  --ink-soft:   rgba(244,243,255,0.74);
  --ink-mute:   rgba(244,243,255,0.50);
  --ink-faint:  rgba(244,243,255,0.32);

  --line:       rgba(255,255,255,0.08);
  --line-2:     rgba(255,255,255,0.16);

  /* Glass surfaces */
  --glass:        rgba(255,255,255,0.045);
  --glass-strong: rgba(255,255,255,0.075);
  --glass-edge:   rgba(255,255,255,0.10);
  --glass-edge-2: rgba(255,255,255,0.18);

  --display: "General Sans", -apple-system, "Helvetica Neue", sans-serif;
  --serif:   "Instrument Serif", "Times New Roman", serif;

  --maxw: 1280px;
  --pad:  clamp(20px, 4vw, 56px);
}

/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--c-bg);
  overflow-x: hidden;
  position: relative;
  letter-spacing: -0.005em;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
::selection { background: rgba(124,91,255,0.35); color: #fff; }

/* =========================================================
   STATIC MESH GRADIENT BACKGROUND
   No noise / pattern. Layered radial gradients form a smooth
   purple→blue field. A single very-soft pointer-tracked glow
   adds quiet life without disturbing legibility.
   ========================================================= */
.bg {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(80vw 60vh at 12% 8%,  rgba(124, 80, 200, 0.55), transparent 62%),
    radial-gradient(70vw 70vh at 92% 18%, rgba(60, 40, 160, 0.42),   transparent 60%),
    radial-gradient(80vw 80vh at 78% 92%, rgba(20, 60, 170, 0.48),   transparent 64%),
    radial-gradient(70vw 70vh at 8% 95%,  rgba(50, 20, 110, 0.55),   transparent 60%),
    radial-gradient(120vw 80vh at 50% 50%, rgba(20, 14, 60, 0.55),   transparent 70%),
    linear-gradient(180deg, #06061B 0%, #04051A 50%, #03040F 100%);
}
.bg::after {
  /* extra desaturation veil at the edges so headlines read crisp */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120vw 90vh at 50% 50%, transparent 30%, rgba(0,0,0,0.55) 100%);
}
.bg-glow {
  /* Cursor-tracked soft halo. Very subtle — never compromises text contrast. */
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(420px 420px at var(--mx, 50%) var(--my, 30%),
              rgba(124,91,255,0.18), transparent 70%);
  transition: background-position 0.4s ease;
  mix-blend-mode: screen;
}

/* =========================================================
   PAGE WRAP
   ========================================================= */
.page { position: relative; z-index: 1; }
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* =========================================================
   NAVIGATION (glass pill, sticky)
   ========================================================= */
.nav-rail {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 18px var(--pad) 0;
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 10px 22px;
  border-radius: 999px;
  background: rgba(10, 10, 28, 0.55);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 12px 40px rgba(0,0,0,0.35);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 14px;
}
.brand .logo-img { display: block; transition: opacity .35s ease, transform .35s ease; }
.brand {
  position: relative;
  height: 22px;
  min-width: 32px;
}
.brand .logo-full {
  height: clamp(18px, 1.45vw, 22px);
  opacity: 1;
}
.brand .logo-mark {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scale(.9);
  height: 22px;
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 760px){
  /* `display: none`, no solo `opacity: 0`: con opacity el wordmark seguía
     ocupando su ancho (~130px) dentro del nav aunque no se viera, y en móvil
     eso empujaba las acciones de la derecha hasta partir la barra en dos
     líneas. Escondido de verdad, .brand queda en sus 32px y cabe todo. */
  .brand .logo-full {
    display: none;
  }
  .brand .logo-mark {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}
.brand .mark {
  width: 26px; height: 26px;
  display: none; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #C9C0FF, #7C5BFF 55%, #2A1456 100%);
  box-shadow: 0 0 18px rgba(124,91,255,0.55), inset 0 0 8px rgba(255,255,255,0.35);
}
.brand .mark::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #06061B;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.85);
}
.brand .word { color: var(--ink); }
.brand .word strong { font-weight: 600; letter-spacing: 0.18em; }
.brand .word span { font-weight: 400; letter-spacing: 0.18em; opacity: 0.75; margin-left: 4px;}

.nav-links {
  display: flex;
  gap: 4px;
  align-items: center;
}
.nav-links a {
  font-size: 13.5px;
  color: var(--ink-soft);
  padding: 8px 14px;
  border-radius: 999px;
  transition: color .25s, background .25s;
}
.nav-links a:hover { color: var(--ink); background: rgba(255,255,255,0.05); }

.nav-cta {
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 9px 16px 9px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.04));
  border: 1px solid var(--glass-edge-2);
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink);
  transition: transform .25s, background .25s;
}
.nav-cta:hover { background: rgba(255,255,255,0.10); transform: translateY(-1px); }

@media (max-width: 880px) {
  .nav-links { display: none; }
}

/* =========================================================
   GLOBAL TYPE
   ========================================================= */
h1, h2, h3, h4, h5 { font-family: var(--display); font-weight: 500; margin: 0; letter-spacing: -0.025em; line-height: 1.05; }
.serif-italic { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--ink-mute);
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.005em;
  transition: transform .25s, background .25s, border-color .25s, box-shadow .25s;
  white-space: nowrap;
}
.btn-primary {
  color: #FFFFFF;
  background: linear-gradient(180deg, #8E7BFF 0%, #5B47E0 100%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 0 0 1px rgba(124,91,255,0.35),
    0 18px 40px -12px rgba(124,91,255,0.55),
    inset 0 1px 0 rgba(255,255,255,0.30);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(124,91,255,0.5), 0 22px 50px -10px rgba(124,91,255,0.75), inset 0 1px 0 rgba(255,255,255,0.35); }
.btn-ghost {
  color: var(--ink);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255,255,255,0.09); border-color: var(--glass-edge-2); }

.section { padding: clamp(96px, 14vh, 160px) 0; }
.section-tight { padding: clamp(72px, 10vh, 120px) 0; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  padding-top: clamp(48px, 8vh, 96px);
  padding-bottom: clamp(96px, 14vh, 160px);
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.35fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
  min-height: clamp(620px, 84vh, 920px);
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
}

.hero h1 {
  font-size: clamp(46px, 7vw, 96px);
  font-weight: 400;
  line-height: 0.97;
  letter-spacing: -0.035em;
  margin: 22px 0 0;
}
.hero h1 .serif-italic { font-size: 1.04em; letter-spacing: -0.02em; }
.hero-lede {
  margin: 28px 0 0;
  font-size: clamp(15px, 1.18vw, 18px);
  color: var(--ink-soft);
  max-width: 520px;
  line-height: 1.55;
  font-weight: 400;
}
.hero-actions {
  margin-top: 36px;
  display: flex; flex-wrap: wrap; gap: 12px;
}

.hero-meta {
  margin-top: 56px;
  display: flex; gap: 28px; align-items: center;
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint);
  flex-wrap: wrap;
}
.hero-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: #5BFF98; box-shadow: 0 0 12px #5BFF98; display: inline-block; }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }

/* ---- Hero device — transparent render floating on gradient ---- */
.hero-stage {
  position: relative;
  aspect-ratio: 6 / 5;
  isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  margin: 0 -4% 0 -2%;
}
@media (max-width: 980px) {
  .hero-stage { margin: 0; aspect-ratio: 5 / 4; }
}
/* big radial glow behind the device, fused with the page gradient */
.hero-stage .halo {
  position: absolute;
  inset: -14% -10%;
  z-index: 0;
  background:
    radial-gradient(50% 42% at 52% 56%, rgba(124,91,255,0.48), rgba(124,91,255,0) 70%),
    radial-gradient(72% 58% at 50% 60%, rgba(91,127,255,0.24), rgba(91,127,255,0) 75%);
  filter: blur(2px);
  pointer-events: none;
  transition: opacity .8s ease, filter .8s ease;
}
/* secondary UV-A halo (revealed on toggle) */
.hero-stage .halo-uv {
  position: absolute;
  inset: 4% 6%;
  z-index: 0;
  background:
    radial-gradient(36% 30% at 50% 56%, rgba(124,91,255,0.85), rgba(124,91,255,0) 70%),
    radial-gradient(56% 42% at 50% 56%, rgba(180,94,232,0.32), rgba(180,94,232,0) 80%);
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
  mix-blend-mode: screen;
}
.hero-stage.is-revealing .halo-uv { opacity: 1; }
.hero-stage img {
  position: relative;
  z-index: 1;
  width: 112%;
  height: 112%;
  object-fit: contain;
  transition: opacity 0.9s cubic-bezier(.22,.61,.36,1), transform 1.6s ease, filter .9s ease;
  filter: drop-shadow(0 36px 70px rgba(0,0,0,0.6)) drop-shadow(0 10px 30px rgba(0,0,0,0.45));
  animation: deviceFloat 7s ease-in-out infinite;
}
.hero-stage .img-uv {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.02);
}
.hero-stage.is-revealing .img-solid { opacity: 0; }
.hero-stage.is-revealing .img-uv     { opacity: 1; transform: scale(1); }
@keyframes deviceFloat {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stage img { animation: none; }
}

.stage-toggle {
  position: absolute;
  bottom: 8px; right: 0;
  z-index: 4;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: rgba(8,10,28,0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-edge);
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.stage-toggle:hover { color: var(--ink); border-color: var(--glass-edge-2); }
.stage-toggle .led {
  width: 9px; height: 9px; border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 8px rgba(255,255,255,0.6);
  transition: background .3s, box-shadow .3s;
}
.stage-toggle.uv-on .led {
  background: #7C5BFF;
  box-shadow: 0 0 14px #7C5BFF, 0 0 0 3px rgba(124,91,255,0.22);
}

/* =========================================================
   QUOTE / STATEMENT BAND
   ========================================================= */
.statement {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(72px, 10vh, 120px) 0;
}
.statement p {
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--ink);
  max-width: 1080px;
  margin: 0;
}
.statement p .mute { color: var(--ink-faint); }
.statement p .serif-italic { font-size: 1.03em; }

/* =========================================================
   SECTION HEADERS
   ========================================================= */
.s-head {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(56px, 8vh, 96px);
}
@media (max-width: 760px) {
  .s-head { grid-template-columns: 1fr; gap: 24px; }
}
.s-head .num {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
}
.s-head h2 {
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.0;
  max-width: 22ch;
}
.s-head .lede {
  margin: 22px 0 0;
  color: var(--ink-soft);
  max-width: 56ch;
  font-size: 16.5px;
}

/* =========================================================
   PRODUCT SHOWCASE (Apple-style, large hero card + 4 angles)
   ========================================================= */
.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 18px;
}
@media (max-width: 880px) { .product { grid-template-columns: 1fr; } }

.card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(124,91,255,0.18) 0%, rgba(124,91,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%),
    linear-gradient(180deg, rgba(20,12,52,0.55), rgba(8,8,28,0.7));
  backdrop-filter: blur(8px) saturate(120%);
  isolation: isolate;
  transition: transform .5s cubic-bezier(.22,.61,.36,1), border-color .35s, box-shadow .5s;
  min-height: 280px;
}
.card:hover { transform: translateY(-4px); border-color: var(--glass-edge-2); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55); }
.card .media { position: relative; width: 100%; height: 100%; min-height: inherit; display:flex; align-items:center; justify-content:center; }
.card .media img { width: 100%; height: 100%; object-fit: cover; }
.card.contain .media img {
  width: 86%; height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.55)) drop-shadow(0 6px 14px rgba(0,0,0,0.4));
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.card.contain:hover .media img { transform: translateY(-4px) scale(1.02); }
.card.contain .scrim { display: none; }
.card .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,6,22,0) 50%, rgba(5,6,22,0.85) 100%);
  pointer-events: none;
}
.card .copy {
  position: absolute;
  left: 28px; right: 28px; bottom: 24px;
  z-index: 2;
}
.card .copy .kicker {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-glow-soft);
  margin-bottom: 8px;
  display: block;
}
.card .copy h3 {
  font-size: clamp(20px, 1.9vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.card .copy h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.card .copy p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  max-width: 50ch;
  font-size: 14.5px;
}

.card.large {
  grid-column: span 2;
  min-height: 540px;
}
.card.large .copy { left: 40px; right: 40px; bottom: 36px; }
.card.large .copy h3 { font-size: clamp(28px, 3vw, 44px); max-width: 18ch; }

.card.tall { min-height: 420px; }
.card.wide { grid-column: span 2; min-height: 360px; }
@media (max-width: 880px) { .card.wide { grid-column: span 1; } }

@media (max-width: 880px) {
  .card.large { grid-column: span 1; min-height: 360px; }
}

/* =========================================================
   TECHNOLOGY (3 numbered steps, Neuralink-style)
   ========================================================= */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  counter-reset: step;
}
@media (max-width: 880px) { .tech-grid { grid-template-columns: 1fr; } }

.step {
  position: relative;
  padding: 32px 28px 36px;
  border-radius: 24px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column;
  min-height: 380px;
  overflow: hidden;
  isolation: isolate;
}
.step::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 0% 0%, rgba(124,91,255,0.10), transparent 50%);
  pointer-events: none;
  z-index: -1;
}
.step .step-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 64px;
  line-height: 1;
  color: var(--ink);
  opacity: 0.92;
  letter-spacing: -0.03em;
}
.step .step-num small {
  font-family: var(--display);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.22em;
  vertical-align: super;
  margin-left: 6px;
  color: var(--ink-mute);
}
.step h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 24px 0 10px;
  line-height: 1.2;
  max-width: 18ch;
}
.step p {
  color: var(--ink-soft);
  margin: 0 0 24px;
  font-size: 15px;
  flex-grow: 1;
}
.step .visual {
  position: relative;
  height: 56px;
  margin-top: auto;
  display: flex;
  align-items: center;
}

/* Step-specific visual treatments */
.viz-uv {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, #5B7FFF 35%, #7C5BFF 55%, #C063FF 75%, transparent 100%);
  filter: blur(1px);
  border-radius: 3px;
  position: relative;
}
.viz-uv::after {
  content: "365 nm UV-A";
  position: absolute;
  top: -22px; right: 0;
  font-size: 10px; letter-spacing: 0.18em; color: var(--ink-mute);
}
.viz-eye {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 3px;
  height: 28px;
  align-items: center;
}
.viz-eye span {
  height: 100%;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  display: block;
}
.viz-eye span.hi { background: linear-gradient(180deg, #C063FF, #7C5BFF); box-shadow: 0 0 8px rgba(124,91,255,0.55);}
.viz-eye span.med { background: linear-gradient(180deg, rgba(124,91,255,0.55), rgba(91,127,255,0.4)); }
.viz-graph {
  width: 100%;
  height: 56px;
  position: relative;
}
.viz-graph svg { width: 100%; height: 100%; display: block; }

/* =========================================================
   APPLICATION BLOCK (myopia + child)
   ========================================================= */
.app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: stretch;
}
@media (max-width: 880px) { .app-grid { grid-template-columns: 1fr; } }
.app-img {
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--glass-edge);
  min-height: 460px;
  isolation: isolate;
}
.app-img img { width: 100%; height: 100%; object-fit: cover; min-height: 460px;}
.app-img.uv-stage { isolation: isolate; }
.app-img.uv-stage img {
  position: absolute; inset: 0;
  transition: opacity 0.9s cubic-bezier(.22,.61,.36,1), transform 1.6s ease;
}
.app-img.uv-stage .img-uv { opacity: 0; transform: scale(1.04); }
.app-img.uv-stage.is-revealing .img-solid { opacity: 0; }
.app-img.uv-stage.is-revealing .img-uv    { opacity: 1; transform: scale(1); }
.app-img.uv-stage::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: radial-gradient(60% 50% at 60% 45%, rgba(124,91,255,0.0), transparent 70%);
  transition: background .8s ease;
  pointer-events: none;
}
.app-img.uv-stage.is-revealing::before {
  background: radial-gradient(60% 50% at 60% 45%, rgba(124,91,255,0.45), transparent 70%);
  mix-blend-mode: screen;
}
.stage-toggle.inset {
  position: absolute;
  z-index: 4;
  bottom: 22px; right: 22px;
}
.app-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(5,6,22,0.45) 0%, transparent 50%);
}
.app-img .tag {
  position: absolute;
  z-index: 2;
  top: 22px; left: 22px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase;
  background: rgba(8,10,28,0.55);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(12px);
  color: var(--ink-soft);
}
.app-copy h3 {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
  max-width: 18ch;
}
.app-copy h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.app-copy p {
  color: var(--ink-soft);
  margin: 22px 0 0;
  max-width: 56ch;
  font-size: 16px;
}
.stat-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.stat {
  padding: 20px 22px;
  border-radius: 18px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
}
.stat .v {
  font-family: var(--serif);
  font-style: italic;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stat .v small {
  font-family: var(--display);
  font-style: normal;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-left: 4px;
}
.stat .l {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  max-width: 22ch;
}

/* =========================================================
   BIOMARCADOR · COMPARATIVA DE OJOS
   Two natural-light eyes side-by-side. Hover (or click)
   reveals the CUVAF / UV-A fluorescence view of the same eye.
   ========================================================= */
.compare-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 80px);
  align-items: end;
  margin-bottom: 32px;
}
@media (max-width: 880px) { .compare-intro { grid-template-columns: 1fr; gap: 16px; } }
.compare-intro .legend {
  font-size: 13.5px;
  color: var(--ink-mute);
  letter-spacing: 0.01em;
  max-width: 48ch;
}
.compare-intro .legend strong { color: var(--ink); font-weight: 500; }

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 880px) { .compare { grid-template-columns: 1fr; } }

.eye-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  border: 1px solid var(--glass-edge);
  background: #050616;
  cursor: pointer;
  isolation: isolate;
  transition: border-color .35s, transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s;
}
.eye-card:hover {
  border-color: var(--glass-edge-2);
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55);
}
.eye-card .eye-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 1.0s cubic-bezier(.22,.61,.36,1), transform 2.4s ease;
}
.eye-card .img-uv { opacity: 0; transform: scale(1.06); }
.eye-card.is-revealing .img-natural { opacity: 0; transform: scale(1.04); }
.eye-card.is-revealing .img-uv      { opacity: 1; transform: scale(1); }

/* sweep of UV-A light that crosses the eye on reveal */
.eye-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(118deg,
    transparent 30%,
    rgba(168,181,255,0.18) 46%,
    rgba(124,91,255,0.45) 50%,
    rgba(168,181,255,0.18) 54%,
    transparent 70%);
  opacity: 0;
  transform: translateX(-110%);
  transition: opacity .25s ease, transform 1.5s cubic-bezier(.22,.61,.36,1);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
}
.eye-card.is-revealing::after { opacity: 1; transform: translateX(110%); }

/* gradient scrim so text always reads */
.eye-card .scrim-eye {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,6,22,0.55) 0%, rgba(5,6,22,0) 28%, rgba(5,6,22,0) 55%, rgba(5,6,22,0.85) 100%);
  pointer-events: none;
  z-index: 1;
}

/* corner chip — sun / moon condition */
.eye-card .chip {
  position: absolute;
  top: 22px; left: 22px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: rgba(8,10,28,0.6);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft);
}
.eye-card .chip .sun {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFE6A8, #FFB54A 65%, #B97819 100%);
  box-shadow: 0 0 14px rgba(255,181,74,0.65);
}
.eye-card .chip .moon {
  width: 12px; height: 12px; border-radius: 50%;
  background:
    radial-gradient(circle at 70% 40%, #2a2d44 0%, #2a2d44 38%, transparent 39%),
    radial-gradient(circle at 35% 50%, #cdd2e6 0%, #6a7090 75%);
  box-shadow: 0 0 10px rgba(120,130,180,0.35);
}

/* state hint chip top-right */
.eye-card .hint {
  position: absolute;
  top: 22px; right: 22px;
  z-index: 3;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  background: rgba(8,10,28,0.6);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .3s, border-color .3s, background .3s;
}
.eye-card .hint .led {
  width: 9px; height: 9px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 0 8px rgba(255,255,255,0.6);
  transition: background .3s, box-shadow .3s;
}
.eye-card.is-revealing .hint { color: #fff; border-color: rgba(124,91,255,0.45); }
.eye-card.is-revealing .hint .led {
  background: #7C5BFF;
  box-shadow: 0 0 14px #7C5BFF, 0 0 0 3px rgba(124,91,255,0.22);
}
.eye-card .hint .label-on  { display: none; }
.eye-card.is-revealing .hint .label-on  { display: inline; }
.eye-card.is-revealing .hint .label-off { display: none; }

/* caption block at bottom */
.eye-card .eye-cap {
  position: absolute;
  left: 26px; right: 26px; bottom: 22px;
  z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px;
}
.eye-card .eye-cap .ttl {
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.18;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
  max-width: 24ch;
}
.eye-card .eye-cap .ttl em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.eye-card .eye-cap .area {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7);
  position: relative;
  text-align: right;
  flex-shrink: 0;
}
.eye-card .eye-cap .area small {
  display: block;
  font-family: var(--display);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 8px;
  font-weight: 500;
}

/* small exposure bar (visual cue under the area number) */
.eye-card .meter {
  position: absolute;
  left: 26px; right: 26px;
  bottom: 86px;
  z-index: 3;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s ease .15s, transform .6s ease .15s;
}
.eye-card.is-revealing .meter { opacity: 1; transform: translateY(0); }
.eye-card .meter span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #5B7FFF, #7C5BFF 55%, #C063FF);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(124,91,255,0.55);
  width: 0;
  transition: width 1.2s cubic-bezier(.22,.61,.36,1) .25s;
}
.eye-card.is-revealing .meter span { width: var(--exp, 50%); }

.compare-foot {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--ink-mute);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.compare-foot .axis {
  flex: 1; max-width: 420px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(124,91,255,0.55), rgba(124,91,255,0.95));
}

/* =========================================================
   RESEARCH (paper list with hover)
   ========================================================= */
.papers {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.paper {
  display: grid;
  grid-template-columns: 80px 1fr auto 50px;
  gap: 28px;
  align-items: center;
  padding: 28px 4px;
  border-bottom: 1px solid var(--line);
  transition: background .3s, padding .3s;
}
.paper:hover { background: rgba(255,255,255,0.025); padding-left: 16px; padding-right: 16px; }
.paper .p-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: var(--ink-mute);
  letter-spacing: -0.02em;
}
.paper:hover .p-num { color: var(--c-glow-soft); }
.paper .p-title {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
  max-width: 64ch;
}
.paper .p-meta {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.paper .p-arrow {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-edge);
  color: var(--ink-soft);
  transition: transform .3s, color .3s, background .3s;
}
.paper:hover .p-arrow {
  background: linear-gradient(180deg, #8E7BFF, #5B47E0);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
  transform: rotate(-45deg);
}
@media (max-width: 720px) {
  .paper { grid-template-columns: 50px 1fr 32px; gap: 18px; }
  .paper .p-meta { display: none; }
  .paper .p-arrow { width: 32px; height: 32px; }
}

/* =========================================================
   PRESS / RESOURCES
   ========================================================= */
.press {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 880px) { .press { grid-template-columns: 1fr; } }
.press .item {
  padding: 28px;
  border-radius: 22px;
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  display: flex; flex-direction: column;
  min-height: 240px;
  transition: transform .4s, border-color .3s;
}
.press .item:hover { transform: translateY(-3px); border-color: var(--glass-edge-2);}
.press .src {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c-glow-soft);
  margin-bottom: auto;
}
.press h4 {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 20px 0 8px;
  line-height: 1.25;
}
.press p { color: var(--ink-soft); margin: 0 0 20px; font-size: 14px; }
.press .item .read {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--ink);
}
.press .item .read svg { transition: transform .3s; }
.press .item:hover .read svg { transform: translateX(4px); }

/* =========================================================
   TEAM
   ========================================================= */
.team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 1080px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .team { grid-template-columns: 1fr; } }
.member {
  padding: 20px 22px 24px;
  border-radius: 22px;
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  /* Fixed-row grid so role / name / description align across cards */
  display: grid;
  grid-template-rows: auto 28px 56px 1fr;
  gap: 0;
}
.member .avatar {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, rgba(124,91,255,0.35) 0%, rgba(44,64,160,0.4) 100%);
  display: grid; place-items: center;
  font-size: 22px; font-weight: 500; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.5);
  margin-bottom: 22px;
}
.member .avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.member .role {
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.25;
  display: flex; align-items: flex-start;
}
.member h4 {
  font-size: 17.5px; font-weight: 500; letter-spacing: -0.012em;
  margin: 6px 0 0;
  line-height: 1.18;
  display: flex; align-items: flex-start;
}
.member p { color: var(--ink-soft); font-size: 13px; margin: 8px 0 0; line-height: 1.45; }

/* =========================================================
   CTA + FOOTER
   ========================================================= */
.cta {
  margin: clamp(48px, 8vh, 96px) 0 0;
  padding: clamp(48px, 7vh, 80px) clamp(28px, 4vw, 64px);
  border-radius: 32px;
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(124,91,255,0.20), transparent 65%),
    radial-gradient(70% 80% at 100% 100%, rgba(40,80,200,0.16), transparent 65%),
    rgba(255,255,255,0.03);
  border: 1px solid var(--glass-edge);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 32px;
}
@media (max-width: 880px) { .cta { grid-template-columns: 1fr; } }
.cta h3 {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: 22ch;
}
.cta h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.cta p { color: var(--ink-soft); margin: 18px 0 0; max-width: 50ch; }
.cta .actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.cta .small { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
@media (max-width: 880px) { .cta .actions { align-items: flex-start; } }

footer {
  margin-top: clamp(72px, 10vh, 120px);
  border-top: 1px solid var(--line);
  background: var(--c-bg-deep);
  padding: 56px 0 28px;
  position: relative;
  z-index: 1;
}
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h5 {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 16px;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-grid ul a { font-size: 14px; color: var(--ink-soft); transition: color .25s; }
.foot-grid ul a:hover { color: var(--ink); }
.foot-blurb { color: var(--ink-mute); font-size: 13px; max-width: 38ch; margin: 18px 0 0; }
.foot-bot {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between;
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint);
  flex-wrap: wrap; gap: 16px;
}

/* =========================================================
   REVEAL ON SCROLL
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s cubic-bezier(.22,.61,.36,1), transform 0.9s cubic-bezier(.22,.61,.36,1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.10s; }
.reveal[data-d="2"] { transition-delay: 0.20s; }
.reveal[data-d="3"] { transition-delay: 0.30s; }
.reveal[data-d="4"] { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .stage-label .dot { animation: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   NAV — acciones (Iniciar sesión / Panel + CTA)
   ========================================================= */
.nav-actions { display: inline-flex; align-items: center; gap: 8px; }
.nav-login {
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 9px 16px;
  border-radius: 999px;
  color: var(--ink-soft);
  border: 1px solid var(--glass-edge);
  background: rgba(255,255,255,0.03);
  white-space: nowrap;
  transition: color .25s, background .25s, border-color .25s, transform .25s;
}
.nav-login:hover { color: var(--ink); background: rgba(255,255,255,0.08); border-color: var(--glass-edge-2); transform: translateY(-1px); }

/* Etiqueta larga / corta del botón de sesión. En móvil el nav tiene que hacer
   sitio al selector de idioma y "Iniciar sesión" es lo más largo que hay ahí,
   así que se cambia por "Entrar" (ver public_base.html). */
.nav-login .txt-min { display: none; }

@media (max-width: 540px) {
  .nav-login, .nav-cta { padding: 8px 12px; font-size: 12px; }
  .nav-cta svg { display: none; } /* ahorra ancho en móvil */
  .nav-login .txt-full { display: none; }
  .nav-login .txt-min { display: inline; }
  /* Red de seguridad: si aun así no cupiera (tipografías de fallback más
     anchas, zoom de texto del sistema), las acciones bajan de línea en vez de
     desbordar el nav. Con el radio de 24px la barra se lee igual de bien en
     una fila que en dos. En un iPhone normal no debería llegar a saltar. */
  .nav { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px; border-radius: 24px; }
  .nav-actions { gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
}

/* Móviles estrechos (SE y similares): último apretón para que quepa todo en
   una sola fila. */
@media (max-width: 380px) {
  .nav { padding: 10px; }
  .nav-actions { gap: 4px; }
  .nav-login, .nav-cta { padding: 8px 10px; font-size: 11.5px; }
}

/* =========================================================
   SELECTOR DE IDIOMA (ES / EN) — solo en la landing
   Pastilla segmentada; se usa en el nav y en el footer
   (components/lang_switch.html).
   ========================================================= */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--glass-edge);
  background: rgba(255,255,255,0.03);
}
.lang-switch a {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  transition: color .25s, background .25s;
}
.lang-switch a:hover { color: var(--ink); background: rgba(255,255,255,0.06); }
.lang-switch a.is-on {
  color: var(--ink);
  background: rgba(124,91,255,0.28);
  box-shadow: inset 0 0 0 1px rgba(168,181,255,0.28);
}
.lang-switch .sep { width: 1px; height: 12px; background: var(--line); }

/* Footer: mismo componente, un punto más apagado y sin borde de caja. */
.lang-switch--foot { padding: 2px; border-color: transparent; background: transparent; }
.lang-switch--foot a { font-size: 11px; letter-spacing: 0.16em; }

/* Tablet/móvil ancho: en el nav ya no cabe la pastilla entera junto a
   "Iniciar sesión" y el CTA, así que se oculta la opción activa y queda solo
   la otra, que actúa de botón "cambiar de idioma". */
@media (max-width: 620px) {
  .nav-actions .lang-switch .sep,
  .nav-actions .lang-switch a.is-on { display: none; }
  .nav-actions .lang-switch { padding: 0; border-color: transparent; background: transparent; }
  .nav-actions .lang-switch a {
    padding: 8px 10px;
    border: 1px solid var(--glass-edge);
    background: rgba(255,255,255,0.03);
  }
}
/* En móvil el chip se queda (es donde más falta hace), solo se aprieta un poco
   más. El hueco lo dan la etiqueta corta del botón de sesión y el logotipo
   reducido a la marca, arriba. */
@media (max-width: 540px) {
  .nav-actions .lang-switch a { padding: 8px; letter-spacing: 0.1em; }
}
@media (max-width: 380px) {
  .nav-actions .lang-switch a { padding: 8px 7px; }
}

/* =========================================================
   PÁGINAS LEGALES (privacidad / términos / cookies)
   ========================================================= */
.legal-hero { padding: clamp(120px, 18vh, 200px) 0 clamp(28px, 6vh, 56px); }
.legal-hero h1 { font-size: clamp(34px, 5vw, 60px); font-weight: 400; letter-spacing: -0.03em; margin-top: 18px; }
.legal-hero .updated { margin-top: 18px; color: var(--ink-mute); font-size: 13px; letter-spacing: 0.04em; }

.legal { padding-bottom: clamp(80px, 12vh, 140px); }
.legal-grid { display: grid; grid-template-columns: 240px 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 880px) { .legal-grid { grid-template-columns: 1fr; } }

/* Índice lateral (TOC) */
.legal-toc { position: sticky; top: 96px; }
.legal-toc h4 { font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 12px; font-family: var(--display); font-weight: 600; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; }
.legal-toc li { margin: 2px 0; }
.legal-toc a { display: block; padding: 7px 12px; border-radius: 10px; font-size: 13.5px; color: var(--ink-soft); border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; }
.legal-toc a:hover { background: var(--glass); color: var(--ink); border-color: var(--glass-edge); }
@media (max-width: 880px) { .legal-toc { position: static; margin-bottom: 24px; } }

/* Cuerpo del documento */
.legal-body { max-width: 760px; }
.legal-card { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 22px; padding: clamp(24px, 4vw, 44px); }
.legal-body section { scroll-margin-top: 100px; }
.legal-body section + section { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.legal-body h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; letter-spacing: -0.02em; display: flex; gap: 12px; align-items: baseline; }
.legal-body h2 .n { font-family: var(--serif); font-style: italic; color: var(--c-glow-soft); font-size: 0.9em; }
.legal-body h3 { font-size: 16px; font-weight: 600; margin: 22px 0 8px; color: var(--ink); }
.legal-body p, .legal-body li { color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.legal-body p { margin: 12px 0; }
.legal-body ul, .legal-body ol { margin: 12px 0; padding-left: 22px; }
.legal-body li { margin: 6px 0; }
.legal-body a { color: var(--c-glow-soft); text-decoration: underline; text-underline-offset: 3px; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.legal-body th, .legal-body td { text-align: left; padding: 10px 12px; border: 1px solid var(--line-2); color: var(--ink-soft); vertical-align: top; }
.legal-body th { color: var(--ink); font-weight: 600; background: rgba(255,255,255,0.03); }

/* Marcador "rellenar" — visible para no olvidar completar datos reales */
.todo { background: rgba(255, 210, 90, 0.18); border-bottom: 1px dashed rgba(255, 210, 90, 0.85); color: #FFE39A; padding: 0 4px; border-radius: 3px; font-style: normal; }
.legal-note { margin: 8px 0; display: flex; gap: 12px; align-items: flex-start; background: rgba(255, 210, 90, 0.08); border: 1px solid rgba(255, 210, 90, 0.25); border-radius: 14px; padding: 14px 16px; color: #FFE39A; font-size: 13.5px; line-height: 1.55; }