:root{
  --void:    #070708;
  --surface: #0E0E10;
  --line:    #1C1C1F;
  --line-2:  #2A2A2E;
  --text:    #E6E6E3;
  --dim:     #888884;
  --faint:   #3A3A3E;   /* decorative only (numbers, separators) — sub-AA on --void */
  --note:    #9A9A96;   /* readable small print — passes AA 4.5:1 on --void */
  --signal:  #9DB4C0;
  --signal-d: rgba(157, 180, 192, 0.16);
  --mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  --maxw:    640px;
  --pad:     22px;
}

*, *::before, *::after{ margin: 0; padding: 0; box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }
html, body{
  background: var(--void); color: var(--text);
  font-family: var(--mono);
  font-size: 14px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body{ position: relative; min-height: 100vh; overflow-x: hidden; }
::selection{ background: var(--signal); color: var(--void); }

/* ===== Atmosphere =====
   mobile: lightweight cropped still (no drift, no blend) so low-end phones
           don't pay for it. desktop: high-res @2x banner with screen blend
           and slow drift. assets fall back to the original omen-banner.webp
           until the optimized files land (see asset names below). */
#atmos{ position: fixed; inset: 0; pointer-events: none; z-index: 0; display: block; }
#atmos .wave{
  position: absolute; inset: 0;
  /* mobile default: cropped, lighter, static */
  background: image-set(
      url('assets/omen-banner-mobile.webp') type('image/webp'),
      url('assets/omen-banner.webp') type('image/webp')
    ) center right / cover no-repeat;
  background: -webkit-image-set(
      url('assets/omen-banner-mobile.webp') 1x,
      url('assets/omen-banner.webp') 1x
    ) center right / cover no-repeat;
  opacity: 0.14;
}
@media (min-width: 760px){
  #atmos .wave{
    inset: 0 -6% 0 30%;
    background:
      image-set(
        url('assets/omen-banner@2x.webp') type('image/webp'),
        url('assets/omen-banner.webp') type('image/webp')
      ) right center / cover no-repeat;
    background-position: 120% center;
    opacity: 0.20; mix-blend-mode: screen;
    filter: contrast(1.04) brightness(1.04);
    animation: waveDrift 34s ease-in-out infinite alternate;
  }
}
#atmos .mask{
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--void) 0%, rgba(7,7,8,.9) 38%, rgba(7,7,8,.5) 62%, rgba(7,7,8,.1) 88%, rgba(7,7,8,0) 100%),
    radial-gradient(ellipse 70% 90% at 100% 50%, transparent 35%, rgba(7,7,8,.4) 100%);
}
#atmos .grain{
  position: absolute; inset: 0; opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 256px 256px;
}
@keyframes waveDrift{ from{ transform: translateX(0) scale(1); } to{ transform: translateX(-2%) scale(1.04); } }
@media (prefers-reduced-motion: reduce){ #atmos .wave{ animation: none; } }

@keyframes blink{ 0%,49%{ opacity: 1; } 50%,100%{ opacity: 0; } }
@media (prefers-reduced-motion: reduce){ [class*="cur"]{ animation: none !important; } }

/* ===== Shell ===== */
.wrap{ position: relative; z-index: 1; }
.col{ width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ===== Header (sticky) ===== */
header{
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(var(--void) 62%, rgba(7,7,8,0));
  backdrop-filter: blur(2px);
}
header .col{ display: flex; align-items: center; justify-content: space-between; padding-top: 20px; padding-bottom: 20px; }
.brand{ display: flex; align-items: center; gap: 11px; user-select: none; }
.brand .sigil{
  width: 34px; height: 34px; display: block; flex-shrink: 0;
  object-fit: contain;

}
.brand .name{ font-weight: 600; font-size: 13px; letter-spacing: 0.42em; text-transform: uppercase; }
.brand .cur{ display: inline-block; width: 6px; height: 13px; background: var(--signal); margin-left: 2px; animation: blink 1.05s steps(1) infinite; }
#skip{
  background: none; border: 0; cursor: pointer; font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.24em; color: var(--faint); text-transform: lowercase;
  padding: 6px 2px; transition: color .2s, opacity .4s;
}
#skip:hover, #skip:focus-visible{ color: var(--signal); outline: none; }
#skip.hide{ opacity: 0; pointer-events: none; }

/* ===== Section rhythm ===== */
section{ padding: clamp(56px, 12vh, 104px) 0; }
.eyebrow{
  color: var(--dim); font-size: 10.5px; letter-spacing: 0.34em; text-transform: uppercase;
  display: flex; align-items: center; gap: 14px; margin-bottom: 34px;
}
.eyebrow .dash{ flex: 0 0 26px; height: 1px; background: var(--line-2); }

/* ===== Hero ===== */
#hero{ padding-top: clamp(24px, 6vh, 56px); padding-bottom: clamp(64px, 14vh, 120px); min-height: 78vh; display: flex; align-items: center; }
#hero .inner{ width: 100%; }
.h1{
  font-weight: 500; color: var(--text);
  font-size: clamp(25px, 7.4vw, 46px);
  line-height: 1.28; letter-spacing: -0.005em;
  text-wrap: pretty; min-height: 1.28em;
}
.h1 .lo{ color: var(--dim); }
.sub{
  margin-top: 26px; color: var(--dim);
  font-size: clamp(14px, 3.6vw, 16px); line-height: 1.8; max-width: 46ch;
  min-height: 1.8em;
}
.sub .t{ color: var(--text); }
.typecur{ display: inline-block; width: 0.55em; height: 1.05em; background: var(--signal); vertical-align: -0.16em; margin-left: 3px; box-shadow: 0 0 14px var(--signal); animation: blink 1.05s steps(1) infinite; }
.cta{
  margin-top: 40px; display: inline-flex; align-items: center; gap: 13px;
  color: var(--signal); font-family: var(--mono); font-size: 12px; letter-spacing: 0.3em; text-transform: lowercase;
  background: none; border: 0; cursor: pointer; padding: 4px 0; text-decoration: none;
  opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease;
}
.cta.show{ opacity: 1; transform: none; }
.cta .tri{ color: var(--signal); }
.cta .arrow{ position: relative; display: inline-block; width: 26px; height: 1px; background: var(--signal); transition: width .28s cubic-bezier(.2,.7,.2,1); }
.cta .arrow::after{ content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--signal); border-right: 1px solid var(--signal); transform: rotate(45deg) translate(-1px,1px); }
.cta:hover .arrow, .cta:focus-visible .arrow{ width: 48px; outline: none; }

/* ===== Misión / Visión ===== */
#manifiesto{ position: relative; overflow: hidden; }
#manifiesto .mv-bh{
  position: absolute; right: -48px; top: 50%; transform: translateY(-50%);
  width: 280px; height: 280px; color: var(--signal);
  opacity: 0.05; pointer-events: none; z-index: 0;
}
#manifiesto .col{ position: relative; z-index: 1; }
.mv{ display: flex; flex-direction: column; gap: 48px; }
.mv .eyebrow{ color: var(--signal); margin-bottom: 18px; }
.mv .eyebrow .dash{ background: var(--signal); opacity: 0.5; }
.mv-body{
  color: var(--text); font-size: clamp(15px, 4vw, 18px);
  line-height: 1.85; max-width: 54ch; text-wrap: pretty; min-height: 1.85em;
}
@media (min-width: 760px){
  .mv{ flex-direction: row; gap: 56px; }
  .mv-block{ flex: 1; }
  #manifiesto .mv-bh{ width: 360px; height: 360px; right: -64px; }
}
@media (prefers-reduced-motion: reduce){ #manifiesto .mv-bh{ opacity: 0.04; } }

/* ===== Qué hacemos ===== */
.offer{ display: flex; flex-direction: column; gap: 38px; }
.offer .item{ display: grid; grid-template-columns: 34px 1fr; gap: 18px; align-items: start; }
.offer .glyph{ width: 30px; height: 30px; margin-top: 2px; color: var(--text); }
.offer .glyph svg{ display: block; width: 100%; height: 100%; }
.offer .item h3{ font-weight: 600; font-size: 15px; letter-spacing: 0.02em; text-transform: lowercase; margin-bottom: 8px; }
.offer .item p{ color: var(--dim); font-size: 13.5px; line-height: 1.75; max-width: 48ch; }

/* ===== Cómo funciona ===== */
.steps{ display: flex; flex-direction: column; }
.steps .step{ display: grid; grid-template-columns: 40px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.steps .step:first-child{ border-top: 0; padding-top: 0; }
.steps .num{ color: var(--faint); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; padding-top: 1px; }
.steps .step h3{ font-weight: 600; font-size: 15px; letter-spacing: 0.01em; text-transform: lowercase; margin-bottom: 7px; }
.steps .step p{ color: var(--dim); font-size: 13.5px; line-height: 1.7; max-width: 46ch; }

/* ===== Tu caso (chat) ===== */
#caso{ background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.caso-grid{ display: flex; flex-direction: column; gap: 28px; }

.stream{
  border: 1px solid var(--line); background: var(--void);
  padding: 20px; min-height: 200px;
  display: flex; flex-direction: column; gap: 18px;
}
.msg{ white-space: pre-wrap; word-break: break-word; font-size: 13.5px; line-height: 1.7; animation: msgIn .35s ease; }
.msg.omen{ color: var(--text); }
.msg.user{ color: var(--dim); }
.msg.user::before{ content: '› '; color: var(--signal); }
.msg .cur-type{ display: inline-block; width: 7px; height: 1em; background: var(--signal); vertical-align: -2px; margin-left: 2px; animation: blink 1.05s steps(1) infinite; }
@keyframes msgIn{ from{ opacity: 0; transform: translateY(4px); } to{ opacity: 1; transform: none; } }

.field-input{ display: flex; flex-direction: column; gap: 9px; }
.field-input .label{ color: var(--signal); font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; }
.inbox{
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--signal-d); background: color-mix(in oklab, var(--signal) 4%, transparent);
  padding: 13px 14px; transition: border-color .2s, box-shadow .2s;
}
.inbox:focus-within{ border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal-d); }
.inbox .pre{ color: var(--signal); flex-shrink: 0; user-select: none; }
.inbox input{
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  color: var(--text); font: inherit; font-family: var(--mono); caret-color: var(--signal);
}
.inbox input::placeholder{ color: var(--dim); opacity: 0.55; }
.inbox input:disabled{ opacity: 0.4; }
.send{
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid var(--line-2); color: var(--text);
  font: inherit; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: lowercase;
  padding: 8px 13px; cursor: pointer; transition: all .18s ease;
}
.send:hover, .send:focus-visible{ border-color: var(--signal); color: var(--signal); outline: none; }
.send:disabled{ opacity: 0.4; cursor: default; }
.note{ color: var(--note); font-size: 11px; letter-spacing: 0.02em; line-height: 1.6; }
.note a{ color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.note a:hover{ color: var(--signal); border-color: var(--signal); }

/* Ledger */
.ledger{ border: 1px solid var(--line); }
.ledger .lhead{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; cursor: pointer; user-select: none;
  background: none; border: 0; width: 100%; font: inherit; font-family: var(--mono); color: inherit; text-align: left;
}
.ledger .lhead .lbl{ color: var(--faint); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; }
.ledger .lhead .right{ display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 10px; letter-spacing: 0.16em; }
.ledger .lhead .chev{ transition: transform .25s ease; color: var(--faint); }
.ledger.open .lhead .chev{ transform: rotate(180deg); }
.ledger .list{ display: none; flex-direction: column; border-top: 1px solid var(--line); }
.ledger.open .list{ display: flex; }
.ledger .field{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--line); }
.ledger .field:first-child{ border-top: 0; }
.ledger .field .k{ color: var(--dim); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; flex-shrink: 0; }
.ledger .field .v{ color: var(--faint); font-size: 12.5px; letter-spacing: 0.02em; text-align: right; word-break: break-word; transition: color .3s ease; }
.ledger .field.filled .v{ color: var(--text); }
.ledger .field.active .k{ color: var(--signal); }
.ledger .field.active .v::after{ content: '▍'; color: var(--signal); margin-left: 4px; animation: blink 1.05s steps(1) infinite; }

/* ===== Footer ===== */
footer{ padding: 44px 0 56px; }
footer .col{ display: flex; flex-direction: column; gap: 16px; }
footer .frow{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer a{ color: var(--text); text-decoration: none; font-size: 13px; letter-spacing: 0.04em; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
footer a:hover{ color: var(--signal); border-color: var(--signal); }
footer .meta{ color: var(--faint); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; }
footer .reg{ color: var(--dim); font-size: 12px; letter-spacing: 0.06em; }

a:focus-visible, button:focus-visible, input:focus-visible{ outline: 1px solid var(--signal); outline-offset: 3px; }

/* ===== Desktop ===== */
@media (min-width: 760px){
  :root{ --maxw: 940px; --pad: 40px; }
  body{ font-size: 14px; }
  .narrow{ max-width: 660px; }
  .offer{ flex-direction: row; gap: 30px; }
  .offer .item{ flex: 1; grid-template-columns: 1fr; gap: 16px; }
  .offer .glyph{ width: 34px; height: 34px; }
  .caso-grid{ display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 44px; align-items: start; }
  .ledger{ position: sticky; top: 96px; }
  .ledger .list{ display: flex; }            /* always open on desktop */
  .ledger .lhead{ cursor: default; }
  .ledger .lhead .chev{ display: none; }
}

/* mayúscula al inicio de cada párrafo */
p::first-letter {
  text-transform: uppercase;
}

/* mayúscula al inicio de títulos y subtítulos */
h1::first-letter,
h2::first-letter,
h3::first-letter {
  text-transform: uppercase;
}