/* =====================================================
 * LEX GRAVITAS — Custom Components
 * Cargado via layouts/partials/extend-head.html
 *
 * Variables de referencia rápida:
 *   Acento Ice Blue  : #4AADE8
 *   Fondo body dark  : rgb(13 22 44)    neutral-900
 *   Fondo tarjeta    : rgb(24 36 58)    neutral-800
 *   Texto principal  : rgb(248 250 252) neutral-50
 *   Texto secundario : rgb(148 163 184) neutral-400
 *   Borde sutil      : rgb(42 58 82)    neutral-700
 * ===================================================== */

/* ── BACKGROUND OVERRIDE ──────────────────────────── */

html {
  background-color: #0D1B2A !important;
}
body {
  background-color: transparent !important;
}

/* ── HEADER: hide redundant site title text ───────── */

.main-menu > a.truncate {
  display: none !important;
}

/* ── ANIMATED BACKGROUND PILLS ──────────────────── */

.lex-bg-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.lex-bg-pill {
  position: absolute;
  border-radius: 9999px;
}

@keyframes lexPillFlow {
  from { transform: rotate(-40deg) translateX(130vw); }
  to   { transform: rotate(-40deg) translateX(-130vw); }
}

.lex-bg-pill.p1  { width:420px; height:72px; left:5%;   top:5%;   background:rgba(74,173,232,0.09); animation:lexPillFlow 3.6s linear infinite; animation-delay:-0.5s; }
.lex-bg-pill.p2  { width:290px; height:58px; left:20%;  top:-5%;  background:rgba(255,255,255,0.04); animation:lexPillFlow 2.6s linear infinite; animation-delay:-1.4s; }
.lex-bg-pill.p3  { width:470px; height:78px; left:35%;  top:30%;  background:rgba(74,173,232,0.10); animation:lexPillFlow 4.1s linear infinite; animation-delay:-2.1s; }
.lex-bg-pill.p4  { width:230px; height:54px; left:50%;  top:10%;  background:rgba(255,255,255,0.04); animation:lexPillFlow 3.1s linear infinite; animation-delay:-0.8s; }
.lex-bg-pill.p5  { width:360px; height:66px; left:65%;  top:55%;  background:rgba(74,173,232,0.08); animation:lexPillFlow 4.6s linear infinite; animation-delay:-2.7s; }
.lex-bg-pill.p6  { width:430px; height:73px; left:80%;  top:-10%; background:rgba(255,255,255,0.05); animation:lexPillFlow 3.4s linear infinite; animation-delay:-1.2s; }
.lex-bg-pill.p7  { width:260px; height:57px; left:90%;  top:40%;  background:rgba(255,255,255,0.04); animation:lexPillFlow 2.4s linear infinite; animation-delay:-0.3s; }
.lex-bg-pill.p8  { width:380px; height:69px; left:-10%; top:25%;  background:rgba(74,173,232,0.08); animation:lexPillFlow 3.8s linear infinite; animation-delay:-1.8s; }
.lex-bg-pill.p9  { width:460px; height:80px; left:110%; top:65%;  background:rgba(74,173,232,0.10); animation:lexPillFlow 3.5s linear infinite; animation-delay:-2.4s; }
.lex-bg-pill.p10 { width:310px; height:63px; left:0%;   top:75%;  background:rgba(255,255,255,0.04); animation:lexPillFlow 2.2s linear infinite; animation-delay:-0.9s; }
.lex-bg-pill.p11 { width:400px; height:74px; left:120%; top:50%;  background:rgba(74,173,232,0.09); animation:lexPillFlow 4.3s linear infinite; animation-delay:-3.0s; }
.lex-bg-pill.p12 { width:250px; height:56px; left:55%;  top:80%;  background:rgba(255,255,255,0.04); animation:lexPillFlow 2.9s linear infinite; animation-delay:-1.5s; }
.lex-bg-pill.p13 { width:160px; height:40px; left:15%;  top:45%;  background:rgba(255,255,255,0.03); animation:lexPillFlow 1.9s linear infinite; animation-delay:-0.4s; }
.lex-bg-pill.p14 { width:530px; height:86px; left:45%;  top:20%;  background:rgba(74,173,232,0.07); animation:lexPillFlow 5.0s linear infinite; animation-delay:-2.8s; }
.lex-bg-pill.p15 { width:140px; height:36px; left:75%;  top:85%;  background:rgba(255,255,255,0.03); animation:lexPillFlow 1.7s linear infinite; animation-delay:-0.7s; }
.lex-bg-pill.p16 { width:500px; height:82px; left:25%;  top:60%;  background:rgba(74,173,232,0.09); animation:lexPillFlow 4.7s linear infinite; animation-delay:-2.2s; }
.lex-bg-pill.p17 { width:185px; height:46px; left:60%;  top:-15%; background:rgba(255,255,255,0.03); animation:lexPillFlow 2.0s linear infinite; animation-delay:-1.1s; }
.lex-bg-pill.p18 { width:560px; height:90px; left:-20%; top:35%;  background:rgba(74,173,232,0.08); animation:lexPillFlow 5.4s linear infinite; animation-delay:-3.4s; }
.lex-bg-pill.p19 { width:130px; height:34px; left:85%;  top:15%;  background:rgba(255,255,255,0.03); animation:lexPillFlow 1.6s linear infinite; animation-delay:-0.6s; }
.lex-bg-pill.p20 { width:490px; height:80px; left:70%;  top:90%;  background:rgba(74,173,232,0.08); animation:lexPillFlow 4.4s linear infinite; animation-delay:-1.9s; }

/* ── HERO ─────────────────────────────────────────── */

.lex-hero {
  min-height: 96vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem 3rem;
  gap: 1rem;
}

.lex-hero__logo-full {
  width: clamp(160px, 26vw, 375px);
  height: auto;
  object-fit: contain;
  margin-bottom: 0.25rem;
}

.lex-hero__eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #4AADE8;
  margin: 0;
}

.lex-hero__title {
  font-size: clamp(2.75rem, 9vw, 6rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  color: rgb(248 250 252);
  margin: 0;
  line-height: 1;
  text-transform: uppercase;
}

.lex-hero__tagline {
  font-size: clamp(0.7rem, 1.5vw, 0.8rem);
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgb(148 163 184);
  margin: 0;
}

.lex-hero__divider {
  width: 40px;
  height: 1px;
  background: #4AADE8;
  opacity: 0.5;
  border: none;
  margin: 0.25rem 0;
}

.lex-hero__subtitle {
  max-width: 580px;
  font-size: clamp(0.875rem, 2vw, 1rem);
  color: rgb(148 163 184);
  line-height: 1.75;
  margin: 0;
}

.lex-hero__cta {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.65rem 2rem;
  border: 1px solid #4AADE8;
  color: #4AADE8;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  border-radius: 2px;
}

.lex-hero__cta:hover {
  background: #4AADE8;
  color: rgb(13 22 44);
  text-decoration: none;
}

/* ── CONTENT SECTION (below hero, from _index.md) ── */

.lex-content-section {
  position: relative;
  z-index: 1;
  padding: 0 0 4rem;
}

/* ── SEPARADOR DE SECCIÓN ─────────────────────────── */

.lex-section-sep {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

.lex-section-sep__line {
  flex: 1;
  height: 1px;
  background: rgb(42 58 82);
}

.lex-section-sep__label {
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgb(100 116 139);
  white-space: nowrap;
}

/* ── FEATURES ─────────────────────────────────────── */

.lex-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: rgb(42 58 82);
  max-width: 1100px;
  margin: 3rem auto;
  border: 1px solid rgb(42 58 82);
  border-radius: 4px;
  overflow: hidden;
}

.lex-feature {
  padding: 2.5rem 2rem;
  background: rgb(17 30 58);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lex-feature__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgb(42 58 82);
  border-radius: 50%;
  color: #4AADE8;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.lex-feature h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgb(226 232 240);
  margin: 0;
}

.lex-feature p {
  font-size: 0.875rem;
  color: rgb(100 116 139);
  line-height: 1.65;
  margin: 0;
}

/* ── PÁGINAS INTERNAS ─────────────────────────────── */

.lex-page {
  max-width: 720px;
  margin: 4rem auto;
  padding: 0 2rem;
}

.lex-service-block {
  border-top: 1px solid rgb(42 58 82);
  padding: 2.5rem 0;
}

.lex-service-block:last-child {
  border-bottom: 1px solid rgb(42 58 82);
}

.lex-service-block h2 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgb(226 232 240);
  margin-bottom: 0.5rem;
}

.lex-service-meta {
  font-size: 0.75rem;
  color: #4AADE8;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.lex-service-block p {
  font-size: 0.9rem;
  color: rgb(100 116 139);
  line-height: 1.7;
}

.lex-tag {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border: 1px solid rgb(42 58 82);
  border-radius: 2px;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgb(100 116 139);
  margin-right: 0.4rem;
  margin-top: 0.75rem;
}

/* ── CTA FOOTER HOMEPAGE ──────────────────────────── */

.lex-cta-section {
  text-align: center;
  padding: 5rem 2rem;
  border-top: 1px solid rgb(42 58 82);
  max-width: 600px;
  margin: 0 auto;
}

.lex-cta-section__label {
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgb(100 116 139);
  margin-bottom: 1.5rem;
}

.lex-cta-section__heading {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  color: rgb(226 232 240);
  line-height: 1.3;
  margin-bottom: 1.5rem;
}

.lex-cta-section__link {
  font-size: 0.8rem;
  color: #4AADE8;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-bottom: 1px solid rgb(42 58 82);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}

.lex-cta-section__link:hover {
  border-color: #4AADE8;
  text-decoration: none;
}

/* ── INNER PAGES ──────────────────────────────── */

.lex-inner-page {
  position: relative;
  z-index: 1;
  padding: 3rem 2rem 5rem;
}

.lex-inner-header {
  text-align: center;
  padding-bottom: 1.5rem;
}

.lex-inner-content .lex-page {
  margin-top: 1.5rem;
}

/* Prose overrides for markdown-rendered inner pages */

.lex-page h2 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgb(226 232 240);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  text-transform: none;
}

.lex-page h2:first-child {
  margin-top: 0;
}

.lex-page p {
  font-size: 0.9rem;
  color: rgb(100 116 139);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.lex-page ul,
.lex-page ol {
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
}

.lex-page li {
  font-size: 0.9rem;
  color: rgb(100 116 139);
  line-height: 1.7;
  margin-bottom: 0.3rem;
}

.lex-page hr {
  border: none;
  height: 1px;
  background: rgb(42 58 82);
  margin: 2rem 0;
}

.lex-page strong {
  color: rgb(203 213 225);
  font-weight: 600;
}

.lex-page em {
  font-style: italic;
  color: rgb(100 116 139);
  font-size: 0.85rem;
}

.lex-page a {
  color: #4AADE8;
  text-decoration: none;
}

.lex-page a:hover {
  border-bottom: 1px solid #4AADE8;
  text-decoration: none;
}