/* =========================================================
   LIBRANTEK
   Persistent Technical Navigation
   Compact Revision
   Safe Content Alignment
   ========================================================= */


:root {
  --background: #ffffff;

  --surface: #fafafa;
  --surface-hover: #f7f7f7;

  --text: #111111;
  --text-soft: #393939;

  --muted: #858585;
  --muted-light: #b3b3b3;

  --line: rgba(17, 17, 17, 0.10);
  --line-strong: rgba(17, 17, 17, 0.22);

  --accent: #5945c7;

  --accent-soft: rgba(89, 69, 199, 0.05);
  --accent-line: rgba(89, 69, 199, 0.28);

  --sidebar-width: 192px;

  --max-width: 1160px;

  --content-gap: 28px;

  --transition:
    180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  min-width: 320px;

  background: var(--background);

  color: var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


a {
  color: inherit;

  text-decoration: none;
}


button {
  color: inherit;

  font: inherit;
}


img {
  display: block;

  max-width: 100%;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
  position: fixed;

  top: 0;
  bottom: 0;
  left: 0;

  z-index: 50;

  width: var(--sidebar-width);

  padding:
    18px
    10px
    16px;

  background:
    rgba(255, 255, 255, 0.985);

  border: 0;

  box-shadow: none;

  overflow-y: auto;

  scrollbar-width: none;
}


.sidebar::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   RAIL TÉCNICO
   ========================================================= */

.sidebar-rail {
  position: absolute;

  top: 70px;
  bottom: 36px;

  left: 22px;

  width: 1px;

  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(89, 69, 199, 0.25) 5%,
      rgba(89, 69, 199, 0.25) 95%,
      transparent 100%
    );

  pointer-events: none;
}


.sidebar-rail::before {
  content: "";

  position: absolute;

  top: -7px;
  left: -2px;

  width: 5px;
  height: 5px;

  background: var(--accent);
}


/* =========================================================
   SIDEBAR LOGO
   ========================================================= */

.sidebar-brand {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  min-height: 48px;

  padding-left: 7px;

  margin-bottom: 3px;
}


.sidebar-logo {
  width: 94px;

  max-height: 43px;

  object-fit: contain;

  object-position: left center;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.sidebar-navigation {
  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  gap: 0;
}


/* =========================================================
   MENU ENTRY
   ========================================================= */

.menu-entry {
  position: relative;

  display: grid;

  grid-template-columns:
    23px
    minmax(0, 1fr);

  align-items: center;

  width: 100%;

  min-height: 31px;

  padding: 0;

  border: 0;

  background: transparent;

  text-align: left;

  cursor: pointer;
}


/* =========================================================
   NODE
   ========================================================= */

.rail-node {
  position: relative;

  z-index: 4;

  display: block;

  width: 7px;
  height: 7px;

  justify-self: center;

  background: #ffffff;

  border:
    1px solid
    rgba(89, 69, 199, 0.40);

  transition:
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
}


/* =========================================================
   MENU PANEL
   ========================================================= */

.menu-panel {
  position: relative;

  display: grid;

  grid-template-columns:
    1fr
    auto;

  align-items: center;

  gap: 6px;

  min-height: 27px;

  padding:
    0
    9px
    0
    10px;

  clip-path:
    polygon(
      0 0,
      calc(100% - 8px) 0,
      100% 8px,
      100% calc(100% - 8px),
      calc(100% - 6px) 100%,
      0 100%
    );

  border:
    1px solid
    rgba(89, 69, 199, 0.09);

  background:
    rgba(255, 255, 255, 0);

  transition:
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
}


/* =========================================================
   INDIVIDUAL HOVER
   ========================================================= */

.menu-entry:hover
.menu-panel {
  background:
    var(--accent-soft);

  border-color:
    rgba(89, 69, 199, 0.34);

  transform:
    translateX(2px);
}


.menu-entry:hover
.rail-node {
  background:
    var(--accent);

  border-color:
    var(--accent);

  transform:
    scale(1.08);
}


/* =========================================================
   ACTIVE
   ========================================================= */

.menu-entry-direct.active
.rail-node {
  background:
    var(--accent);

  border-color:
    var(--accent);
}


.menu-entry-direct.active
.menu-panel {
  border-color:
    rgba(89, 69, 199, 0.24);
}


/* =========================================================
   MENU TEXT
   ========================================================= */

.menu-name {
  color: #707070;

  font-size: 8.5px;

  font-weight: 600;

  letter-spacing: 0.07em;

  text-transform: uppercase;

  white-space: nowrap;

  transition:
    color var(--transition);
}


.menu-entry:hover
.menu-name,
.menu-group.open
.menu-name,
.menu-entry-direct.active
.menu-name {
  color: #332a65;
}


/* =========================================================
   INDICATOR
   ========================================================= */

.menu-indicator {
  color:
    rgba(89, 69, 199, 0.43);

  font-size: 9px;

  line-height: 1;

  transition:
    color var(--transition),
    transform var(--transition);
}


.menu-entry:hover
.menu-indicator {
  color:
    var(--accent);
}


.menu-group.open
.menu-indicator {
  color:
    var(--accent);

  transform:
    rotate(45deg);
}


/* =========================================================
   SUBMENUS
   ========================================================= */

.submenu {
  display: grid;

  grid-template-rows: 0fr;

  margin-left: 23px;

  opacity: 0;

  transition:
    grid-template-rows var(--transition),
    opacity var(--transition);
}


.submenu-inner {
  min-height: 0;

  overflow: hidden;

  padding-left: 9px;
}


.menu-group.open
.submenu {
  grid-template-rows: 1fr;

  opacity: 1;
}


.menu-group.open
.submenu-inner {
  padding:
    2px
    0
    4px
    9px;
}


.submenu a {
  display: block;

  padding:
    5px
    8px;

  border-left:
    1px solid
    rgba(89, 69, 199, 0.16);

  color:
    #737373;

  font-size: 10.5px;

  font-weight: 450;

  line-height: 1.25;

  letter-spacing: 0.015em;

  transition:
    color var(--transition),
    background var(--transition),
    border-color var(--transition),
    padding-left var(--transition);
}


.submenu a:hover {
  padding-left: 11px;

  background:
    rgba(89, 69, 199, 0.04);

  border-color:
    rgba(89, 69, 199, 0.40);

  color:
    #413579;
}


/* =========================================================
   SIDEBAR FOOTER
   ========================================================= */

.sidebar-footer {
  position: relative;

  z-index: 2;

  margin:
    4px
    0
    0
    31px;

  padding-top: 6px;

  color:
    var(--muted-light);

  font-size: 6.5px;

  letter-spacing: 0.15em;
}


/* =========================================================
   PAGE SHELL
   ========================================================= */

/*
 * Reservamos espacio real para el menú.
 * La página nunca entra debajo del sidebar.
 */

.page-shell {
  min-height: 100vh;

  padding-left:
    calc(
      var(--sidebar-width) + var(--content-gap)
    );

  padding-right:
    var(--content-gap);
}


/* =========================================================
   MAIN WIDTH
   ========================================================= */

/*
 * El contenido se centra dentro del espacio disponible
 * a la derecha del sidebar.
 *
 * Ya NO usamos transform.
 */

main,
.site-footer {
  width:
    min(
      100%,
      var(--max-width)
    );

  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
  display: flex;

  min-height: 100vh;

  align-items: center;

  padding:
    65px
    0
    92px;
}


.hero-inner {
  display: flex;

  width: 100%;

  flex-direction: column;

  align-items: center;

  text-align: center;
}


/* =========================================================
   HERO LOGO
   ========================================================= */

.hero-main-logo {
  width:
    clamp(
      220px,
      27vw,
      390px
    );

  max-height: 200px;

  margin-bottom: 44px;

  object-fit: contain;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.eyebrow {
  margin:
    0
    0
    20px;

  color:
    var(--muted);

  font-size: 9px;

  font-weight: 650;

  letter-spacing: 0.27em;
}


h1,
h2,
h3,
p {
  margin-top: 0;
}


h1 {
  max-width: 990px;

  margin-bottom: 24px;

  font-size:
    clamp(
      49px,
      6vw,
      90px
    );

  font-weight: 500;

  line-height: 0.96;

  letter-spacing: -0.058em;
}


h1 span {
  display: block;

  color:
    #939393;
}


h2 {
  margin-bottom: 21px;

  font-size:
    clamp(
      38px,
      4.7vw,
      65px
    );

  font-weight: 450;

  line-height: 1;

  letter-spacing: -0.05em;
}


h3 {
  margin-bottom: 11px;

  font-size: 20px;

  font-weight: 500;
}


.hero-description {
  max-width: 710px;

  margin-bottom: 32px;

  color:
    var(--muted);

  font-size: 15px;

  line-height: 1.7;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.hero-actions {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 9px;
}


.button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 45px;

  padding:
    0
    19px;

  border:
    1px solid
    var(--line-strong);

  font-size: 9px;

  font-weight: 650;

  letter-spacing: 0.055em;

  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition),
    transform var(--transition);
}


.button:hover {
  transform:
    translateY(-2px);
}


.button-primary {
  background:
    #111111;

  color:
    #ffffff;

  border-color:
    #111111;
}


.button-secondary {
  background:
    #ffffff;

  color:
    var(--text);
}


.button-secondary:hover {
  background:
    var(--surface);
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section {
  padding:
    110px
    0;

  border-top:
    1px solid
    var(--line);
}


.section-heading {
  max-width:
    760px;

  margin-bottom:
    48px;
}


.section-description {
  max-width:
    600px;

  color:
    var(--muted);

  font-size:
    14px;

  line-height:
    1.7;
}


/* =========================================================
   CARDS
   ========================================================= */

.cards {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:
    12px;
}


.card {
  display:
    flex;

  min-height:
    245px;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding:
    24px;

  border:
    1px solid
    var(--line);

  background:
    #ffffff;

  transition:
    background var(--transition),
    transform var(--transition);
}


.card:hover {
  background:
    var(--surface);

  transform:
    translateY(-3px);
}


.card-top {
  display:
    flex;

  justify-content:
    space-between;

  color:
    var(--muted);

  font-size:
    8px;
}


.card p:last-child {
  margin-bottom:
    0;

  color:
    var(--muted);

  font-size:
    13px;
}


/* =========================================================
   SPLIT SECTIONS
   ========================================================= */

.section-split {
  display:
    grid;

  grid-template-columns:
    0.8fr
    1.2fr;

  gap:
    80px;
}


.large-copy {
  max-width:
    700px;

  color:
    var(--text-soft);

  font-size:
    clamp(
      24px,
      3vw,
      37px
    );

  line-height:
    1.35;

  letter-spacing:
    -0.03em;
}


.technical-note {
  color:
    var(--muted);

  font-size:
    8px;

  letter-spacing:
    0.16em;
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact {
  text-align:
    center;
}


.contact h2 {
  max-width:
    790px;

  margin:
    0
    auto
    34px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    30px
    0
    44px;

  border-top:
    1px solid
    var(--line);

  color:
    var(--muted);

  font-size:
    8px;
}


/* =========================================================
   MEDIUM SCREENS
   ========================================================= */

@media (max-width: 1250px) {

  :root {
    --content-gap: 22px;
  }


  .page-shell {
    padding-left:
      calc(
        var(--sidebar-width) + var(--content-gap)
      );

    padding-right:
      var(--content-gap);
  }


  main,
  .site-footer {
    width: 100%;

    margin:
      0
      auto;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  :root {
    --sidebar-width:
      165px;

    --content-gap:
      18px;
  }


  .sidebar {
    padding-right:
      7px;
  }


  .sidebar-logo {
    width:
      82px;
  }


  .menu-panel {
    padding-right:
      6px;
  }


  .menu-name {
    font-size:
      7.5px;
  }


  .page-shell {
    padding-left:
      calc(
        var(--sidebar-width) + var(--content-gap)
      );

    padding-right:
      var(--content-gap);
  }


  main,
  .site-footer {
    width:
      100%;

    margin:
      0
      auto;
  }


  .cards {
    grid-template-columns:
      1fr;
  }


  .section-split {
    grid-template-columns:
      1fr;

    gap:
      40px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

  :root {
    --sidebar-width:
      54px;

    --content-gap:
      12px;
  }


  .sidebar {
    padding:
      14px
      5px;
  }


  .sidebar-brand {
    min-height:
      40px;

    padding:
      0;

    justify-content:
      center;
  }


  .sidebar-logo {
    width:
      36px;
  }


  .sidebar-rail {
    left:
      50%;
  }


  .menu-entry {
    display:
      flex;

    min-height:
      30px;

    align-items:
      center;

    justify-content:
      center;
  }


  .rail-node {
    position:
      absolute;

    left:
      50%;

    transform:
      translateX(-50%);
  }


  .menu-panel,
  .submenu,
  .sidebar-footer {
    display:
      none;
  }


  .page-shell {
    padding-left:
      calc(
        var(--sidebar-width) + var(--content-gap)
      );

    padding-right:
      var(--content-gap);
  }


  main,
  .site-footer {
    width:
      100%;

    margin:
      0
      auto;
  }


  .hero {
    min-height:
      auto;

    padding:
      48px
      0
      78px;
  }


  .hero-main-logo {
    width:
      min(
        250px,
        72vw
      );

    margin-bottom:
      36px;
  }


  h1 {
    font-size:
      clamp(
        40px,
        11vw,
        60px
      );
  }


  h2 {
    font-size:
      clamp(
        34px,
        9vw,
        49px
      );
  }


  .hero-description {
    font-size:
      14px;
  }


  .hero-actions {
    width:
      100%;

    flex-direction:
      column;
  }


  .button {
    width:
      100%;
  }


  .section {
    padding:
      78px
      0;
  }


  .site-footer {
    flex-direction:
      column;

    gap:
      4px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

  :root {
    --sidebar-width:
      48px;

    --content-gap:
      10px;
  }


  .sidebar-logo {
    width:
      31px;
  }


  .hero-main-logo {
    width:
      min(
        220px,
        70vw
      );
  }


  h1 {
    font-size:
      clamp(
        36px,
        10.5vw,
        54px
      );
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }


  *,
  *::before,
  *::after {
    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;
  }

}