/* ==========================================================================
   01. TIPOGRAFÍA EXTERNA
   ========================================================================== */
@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap";
/* ==========================================================================
   02. RESET GENERADO Y COMPATIBILIDAD
   ========================================================================== */
@layer properties {
  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
    *,
    :before,
    :after,
    ::backdrop {
      --tw-rotate-x:initial;
      --tw-rotate-y:initial;
      --tw-rotate-z:initial;
      --tw-skew-x:initial;
      --tw-skew-y:initial;
      --tw-border-style:solid
    }
  }
}
@layer theme {
  :root,
  :host {
    --font-sans:ui-sans-serif,
    system-ui,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
    --font-mono:ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
    --spacing:.25rem;
    --default-font-family:var(--font-sans);
    --default-mono-font-family:var(--font-mono)
  }
}
@layer base {
  *,
  :after,
  :before,
  ::backdrop {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }
  ::file-selector-button {
    box-sizing:border-box;
    border:0 solid;
    margin:0;
    padding:0
  }
  html,
  :host {
    -webkit-text-size-adjust:100%;
    tab-size:4;
    line-height:1.5;
    font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings:var(--default-font-feature-settings,normal);
    font-variation-settings:var(--default-font-variation-settings,normal);
    -webkit-tap-highlight-color:transparent
  }
  hr {
    height:0;
    color:inherit;
    border-top-width:1px
  }
  abbr:where([title]) {
    -webkit-text-decoration:underline dotted;
    text-decoration:underline dotted
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size:inherit;
    font-weight:inherit
  }
  a {
    color:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    -webkit-text-decoration:inherit;
    text-decoration:inherit
  }
  b,
  strong {
    font-weight:bolder
  }
  code,
  kbd,
  samp,
  pre {
    font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings:var(--default-mono-font-feature-settings,normal);
    font-variation-settings:var(--default-mono-font-variation-settings,normal);
    font-size:1em
  }
  small {
    font-size:80%
  }
  sub,
  sup {
    vertical-align:baseline;
    font-size:75%;
    line-height:0;
    position:relative
  }
  sub {
    bottom:-.25em
  }
  sup {
    top:-.5em
  }
  table {
    text-indent:0;
    border-color:inherit;
    border-collapse:collapse
  }
  :-moz-focusring {
    outline:auto
  }
  progress {
    vertical-align:baseline
  }
  summary {
    display:list-item
  }
  ol,
  ul,
  menu {
    list-style:none
  }
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    vertical-align:middle;
    display:block
  }
  img,
  video {
    max-width:100%;
    height:auto
  }
  button,
  input,
  select,
  optgroup,
  textarea {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0
  }
  ::file-selector-button {
    font:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    letter-spacing:inherit;
    color:inherit;
    opacity:1;
    background-color:#0000;
    border-radius:0
  }
  :where(select:is([multiple],[size])) optgroup {
    font-weight:bolder
  }
  :where(select:is([multiple],[size])) optgroup option {
    padding-inline-start:20px
  }
  ::file-selector-button {
    margin-inline-end:4px
  }
  ::placeholder {
    opacity:1
  }
  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
    ::placeholder {
      color:currentColor
    }
    @supports (color:color-mix(in lab, red, red)) {
      ::placeholder {
        color:color-mix(in oklab, currentcolor 50%, transparent)
      }
    }
  }
  textarea {
    resize:vertical
  }
  ::-webkit-search-decoration {
    -webkit-appearance:none
  }
  ::-webkit-date-and-time-value {
    min-height:1lh;
    text-align:inherit
  }
  ::-webkit-datetime-edit {
    display:inline-flex
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding:0
  }
  ::-webkit-datetime-edit {
    padding-block:0
  }
  ::-webkit-datetime-edit-year-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-month-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-day-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-hour-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-minute-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-second-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-millisecond-field {
    padding-block:0
  }
  ::-webkit-datetime-edit-meridiem-field {
    padding-block:0
  }
  ::-webkit-calendar-picker-indicator {
    line-height:1
  }
  :-moz-ui-invalid {
    box-shadow:none
  }
  button,
  input:where([type=button],[type=reset],[type=submit]) {
    appearance:button
  }
  ::file-selector-button {
    appearance:button
  }
  ::-webkit-inner-spin-button {
    height:auto
  }
  ::-webkit-outer-spin-button {
    height:auto
  }
  [hidden]:where(:not([hidden=until-found])) {
    display:none!important
  }
}
@layer components;
@layer utilities {
  .visible {
    visibility:visible
  }
  .absolute {
    position:absolute
  }
  .relative {
    position:relative
  }
  .start {
    inset-inline-start:var(--spacing)
  }
  .flex {
    display:flex
  }
  .hidden {
    display:none
  }
  .table {
    display:table
  }
  .transform {
    transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
  }
  .border {
    border-style:var(--tw-border-style);
    border-width:1px
  }
  .uppercase {
    text-transform:uppercase
  }
}
/* ==========================================================================
   03. VARIABLES DE COLOR Y DISEÑO
   ========================================================================== */
:root {
  --night:#07131d;
  --navy:#0b2232;
  --navy2:#102d40;
  --cyan:#4ee4d1;
  --teal:#16a99c;
  --violet:#886dff;
  --magenta:#e951a7;
  --coral:#ff8069;
  --mist:#eaf6f3;
  --white:#fff;
  --ink:#0b1b26;
  --muted:#647782;
  --line:#cfe2df
}
/* ==========================================================================
   04. BASE GLOBAL
   ========================================================================== */
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  color:var(--ink);
  background:#f7fbfa;
  margin:0;
  font-family:Inter,
  Arial,
  sans-serif;
  overflow-x:clip
}
body.locked {
  overflow:hidden
}
button,
a {
  font:inherit
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
svg {
  display:block
}
/* ==========================================================================
   05. CABECERA Y NAVEGACIÓN
   ========================================================================== */
.site-header {
  color:#fff;
  z-index:50;
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  background:#07131df0;
  border-bottom:1px solid #4ee4d124;
  justify-content:space-between;
  align-items:center;
  height:78px;
  padding:0 clamp(24px,5vw,78px);
  display:flex;
  position:sticky;
  top:0
}
.brand {
  letter-spacing:-.04em;
  align-items:center;
  gap:7px;
  font-size:20px;
  font-weight:500;
  display:flex
}
.brand span {
  color:var(--cyan);
  font-size:26px;
  font-weight:900
}
.brand i {
  background:#36505f;
  width:1px;
  height:23px;
  margin:0 7px
}
.brand b {
  letter-spacing:.16em;
  color:#9db5c0;
  font-size:10px
}
.site-header nav {
  color:#c7d6dc;
  gap:29px;
  font-size:12px;
  font-weight:600;
  display:flex
}
.site-header nav a:hover {
  color:var(--cyan)
}
.header-cta {
  color:var(--cyan);
  align-items:center;
  gap:9px;
  font-size:12px;
  font-weight:700;
  display:flex
}
.header-cta svg {
  width:17px
}
.header-brand-group {
  display:flex;
  align-items:center;
  gap:14px;
  min-width:max-content;
}

.aloha-isotype-link {
  width:100px;
  height:100px;
  padding:1px;
  border:1px solid #4ee4d12e;
  border-radius:50%;
  display:flex;
  flex:0 0 auto;
  transition:
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.aloha-isotype-link img {
  width:100%;
  height:100%;
  object-fit:contain;
}

.aloha-isotype-link:hover,
.aloha-isotype-link:focus-visible {
  border-color:var(--cyan);
  box-shadow:0 0 20px #4ee4d124;
  transform:translateY(-1px);
}
/* ==========================================================================
   06. HERO / PORTADA
   ========================================================================== */
.hero {
  background:radial-gradient(circle at 75% 45%,#123e4b 0,#0a2938 25%,var(--night) 58%);
  color:#fff;
  grid-template-columns:.95fr 1.05fr;
  align-items:center;
  min-height:calc(100vh - 78px);
  padding:70px clamp(24px,6vw,94px);
  display:grid;
  position:relative;
  overflow:hidden
}
.hero-grid {
  opacity:.23;
  background-image:linear-gradient(#4ee4d11a 1px,#0000 1px),
  linear-gradient(90deg,#4ee4d11a 1px,#0000 1px);
  background-size:46px 46px;
  position:absolute;
  inset:0;
  -webkit-mask-image:linear-gradient(90deg,#0000 0,#000 55%);
  mask-image:linear-gradient(90deg,#0000 0,#000 55%)
}
.hero-glow {
  filter:blur(30px);
  background:#4ee4d112;
  border-radius:50%;
  width:550px;
  height:550px;
  position:absolute;
  right:13%;
  box-shadow:0 0 120px #886dff1f
}
.hero-copy {
  z-index:2;
  max-width:730px;
  min-width:0;
  position:relative
}
.signal {
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#9bc8c5;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:700;
  display:flex
}
.signal i {
  background:var(--cyan);
  width:8px;
  height:8px;
  box-shadow:0 0 16px var(--cyan);
  border-radius:50%;
  animation:2s infinite pulse
}
.hero h1 {
  display:flex;
  flex-direction:column;
  gap:20px;

  letter-spacing:-.095em;
  margin:55px 0 42px;
  font-size:clamp(70px,7vw,126px);
  font-weight:900;
  line-height:.76;
  max-width:100%
}
.hero h1 span,
.hero h1 em {
  display:block
}

/* Separación de las letras de Helicobacter */
.hero h1 span {
  letter-spacing:-.035em;
}
.hero h1 em {
  color:#0000;
  -webkit-text-stroke:1.5px var(--cyan);
  letter-spacing:-.08em;
  font-style:normal
}
.hero h2 {
  letter-spacing:-.055em;
  margin:0 0 20px;
  font-size:clamp(28px,3vw,45px);
  line-height:1.06
}
.hero-copy>p:not(.signal) {
  color:#aabcc4;
  max-width:600px;
  font-size:16px;
  line-height:1.7
}
.hero-actions {
  align-items:center;
  gap:24px;
  margin-top:31px;
  display:flex
}
.button {
  background:var(--navy);
  color:#fff;
  border:0;
  border-radius:8px;
  align-items:center;
  gap:14px;
  padding:15px 20px;
  font-size:12px;
  font-weight:700;
  display:inline-flex
}
.button.bright {
  background:var(--cyan);
  color:var(--night);
  box-shadow:0 12px 35px #4ee4d126
}
.button:hover {
  transform:translateY(-2px)
}
.hero-actions>a:last-child {
  color:#bacbd1;
  font-size:12px;
  font-weight:600
}
.hero-metrics {
  border-top:1px solid #ffffff1f;
  gap:42px;
  margin-top:55px;
  padding-top:23px;
  display:flex
}
.hero-metrics div {
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:4px 9px;
  display:grid
}
.hero-metrics b {
  color:var(--cyan);
  font-size:21px
}
.hero-metrics span {
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#78909b;
  max-width:78px;
  font-size:9px
}
.lab-visual {
  z-index:2;
  background:#091e29b3;
  border:1px solid #4ee4d13d;
  border-radius:16px;
  margin-left:6%;
  padding:18px;
  position:relative;
  box-shadow:0 35px 100px #00000052,
  inset 0 0 60px #4ee4d106
}
.visual-head {
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#7d9ba6;
  justify-content:space-between;
  padding:0 5px 14px;
  font-size:9px;
  display:flex
}
.visual-head b {
  color:var(--cyan)
}
.petri {
  background:radial-gradient(circle at 40% 40%,#16a99c21,#0000 38%),
  radial-gradient(circle at 70% 65%,#886dff1a,#0000 32%),
  #06141d;
  border:1px solid #4ee4d129;
  border-radius:10px;
  height:430px;
  position:relative;
  overflow:hidden
}
.petri:before {
  content:"";
  border:1px solid #4ee4d126;
  border-radius:50%;
  position:absolute;
  inset:38px
}
.petri:after {
  content:"";
  border:1px dashed #4ee4d12e;
  border-radius:50%;
  position:absolute;
  inset:78px
}
.scan-line {
  z-index:5;
  background:var(--cyan);
  height:1px;
  box-shadow:0 0 22px var(--cyan);
  animation:5s linear infinite scan;
  position:absolute;
  left:0;
  right:0
}
.hp {
  border:2px solid var(--cyan);
  filter:drop-shadow(0 0 9px #4ee4d166);
  border-radius:60% 40% 55% 45%;
  width:125px;
  height:52px;
  position:absolute;
  transform:rotate(35deg)
}
.hp:before {
  content:"";
  border-top:1.5px solid var(--cyan);
  width:85px;
  height:35px;
  box-shadow:0 8px 0 -7px var(--cyan),
  0 16px 0 -15px var(--cyan);
  border-radius:50%;
  position:absolute;
  top:3px;
  right:-74px
}
.hp:after {
  content:"";
  border-radius:inherit;
  border:1px dotted #4ee4d1b3;
  position:absolute;
  inset:9px
}
.hp1 {
  top:39%;
  left:37%
}
.hp2 {
  opacity:.5;
  top:22%;
  left:20%;
  rotate:-45deg;
  scale:.45
}
.hp3 {
  opacity:.38;
  bottom:19%;
  right:17%;
  rotate:82deg;
  scale:.32
}
.target {
  border:1px solid var(--magenta);
  border-radius:50%;
  width:34px;
  height:34px;
  position:absolute;
  box-shadow:0 0 15px #e951a74d
}
.t1 {
  top:47%;
  left:31%
}
.t2 {
  top:24%;
  right:22%
}
.cross {
  color:var(--violet);
  font-size:21px;
  font-weight:300;
  position:absolute
}
.c1 {
  bottom:22%;
  left:18%
}
.c2 {
  top:15%;
  right:31%
}
.assay-row {
  border:1px solid #4ee4d121;
  border-top:0;
  grid-template-columns:1fr 1fr;
  display:grid
}
.assay-row div {
  justify-content:space-between;
  padding:14px;
  display:flex
}
.assay-row div+div {
  border-left:1px solid #4ee4d121
}
.assay-row span {
  letter-spacing:.14em;
  color:#67818c;
  font-size:8px
}
.assay-row b {
  color:#c3d4da;
  font-size:8px
}
.positive-dot {
  color:var(--cyan)!important
}
.trace {
  align-items:center;
  gap:10px;
  height:55px;
  padding:0 12px;
  display:flex
}
.trace span {
  background:var(--magenta);
  width:7px;
  height:7px;
  box-shadow:0 0 10px var(--magenta);
  border-radius:50%
}
.trace svg {
  width:100%;
  height:42px
}
.trace path {
  fill:none;
  stroke:var(--cyan);
  stroke-width:1px
}
/* ==========================================================================
   07. ESTRUCTURA COMÚN DE SECCIONES
   ========================================================================== */
.section {
  grid-template-columns:160px 1fr;
  display:grid
}
.section-side {
  border-right:1px solid var(--line);
  padding-top:8px
}
.section-side span {
  color:var(--teal);
  font-size:12px;
  font-weight:800
}
.section-side p {
  writing-mode:vertical-rl;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:#80939c;
  margin:25px auto 0;
  font-size:9px;
  font-weight:700;
  transform:rotate(180deg)
}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--teal);
  margin:0 0 21px;
  font-size:10px;
  font-weight:800
}
/* ==========================================================================
   08. ORIENTADOR CLÍNICO
   ========================================================================== */
.orienter {
  background:#fff;
  padding:85px clamp(24px,6vw,94px) 100px
}
.section-label {
  border-bottom:1px solid var(--line);
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--teal);
  justify-content:space-between;
  padding-bottom:13px;
  font-size:9px;
  display:flex
}
.section-label b {
  color:#8a9ca4
}
.orienter-head {
  grid-template-columns:1fr .7fr;
  align-items:end;
  gap:80px;
  margin:48px 0;
  display:grid
}
.orienter-head h2,
.understand h2,
.methods h2,
.journey h2,
.prep-main h2,
.library h2 {
  letter-spacing:-.075em;
  margin:0;
  font-size:clamp(40px,5vw,74px);
  font-weight:900;
  line-height:.98
}
.orienter-head p {
  color:var(--muted);
  font-size:14px;
  line-height:1.7
}
.route-track {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  grid-template-columns:repeat(6,1fr);
  display:grid
}
.route-track button {
  text-align:left;
  border:0;
  border-left:1px solid var(--line);
  min-height:240px;
  color:var(--ink);
  background:#fff;
  padding:19px 18px;
  transition:all .25s;
  position:relative
}
.route-track button:last-child {
  border-right:1px solid var(--line)
}
.route-track button:hover {
  background:var(--night);
  color:#fff;
  transform:translateY(-8px)
}
.route-track button small {
  color:var(--teal);
  font-size:8px
}
.route-icon {
  width:38px;
  height:38px;
  color:var(--teal);
  margin:33px 0 23px;
  display:block
}
.route-icon svg {
  width:100%
}
.route-track button b {
  font-size:14px;
  line-height:1.2;
  display:block
}
.route-track button p {
  color:#788a93;
  margin-top:9px;
  font-size:10px;
  line-height:1.5
}
.route-track button>i {
  color:var(--coral);
  position:absolute;
  bottom:17px;
  right:16px
}
.route-track button>i svg {
  width:16px
}
/* ==========================================================================
   09. SECCIÓN COMPRENDER
   ========================================================================== */
.understand {
  background:var(--mist);
  padding:110px clamp(24px,6vw,94px) 120px
}
.understand-main {
  padding-left:7vw
}
.big-copy {
  color:#29404c;
  max-width:1070px;
  margin:42px 0 60px;
  font-size:clamp(22px,2.2vw,33px);
  font-weight:500;
  line-height:1.48
}
.principles {
  border-top:1px solid #bad6d2;
  grid-template-columns:repeat(3,1fr);
  display:grid
}
.principles article {
  padding:25px 30px 0 0
}
.principles article+article {
  border-left:1px solid #bad6d2;
  padding-left:30px
}
.principles b {
  color:var(--teal);
  font-size:9px
}
.principles h3 {
  margin:25px 0 10px;
  font-size:17px
}
.principles p {
  color:var(--muted);
  font-size:12px;
  line-height:1.65
}
/* ==========================================================================
   10. MÉTODOS DIAGNÓSTICOS
   ========================================================================== */
.methods {
  background:var(--night);
  color:#fff;
  padding:110px clamp(24px,6vw,94px) 120px
}
.methods .section-side {
  border-color:#1d3a48
}
.methods .section-side p {
  color:#57717e
}
.methods-main {
  padding-left:7vw
}
.methods-intro {
  grid-template-columns:1fr .7fr;
  align-items:end;
  gap:80px;
  display:grid
}
.methods h2 em,
.journey h2 em {
  color:var(--cyan);
  font-style:normal
}
.methods-intro>p {
  color:#91a8b2;
  font-size:14px;
  line-height:1.7
}
.method-grid {
  border:1px solid #214050;
  grid-template-columns:repeat(4,1fr);
  margin-top:65px;
  display:grid
}
.method-grid article {
  background:linear-gradient(#16a99c0a,#0000);
  border-right:1px solid #214050;
  flex-direction:column;
  min-height:390px;
  padding:23px;
  display:flex
}
.method-grid article:last-child {
  border:0
}
.method-code {
  color:#637e8a;
  justify-content:space-between;
  font-size:9px;
  display:flex
}
.method-code i {
  width:30px;
  color:var(--cyan)
}
.method-grid article>small {
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--magenta);
  margin-top:50px;
  font-size:8px
}
.method-grid h3 {
  margin:17px 0;
  font-size:20px
}
.method-grid p {
  color:#8fa4ad;
  font-size:11px;
  line-height:1.7
}
.method-grid button,
.negative-callout button,
.article-grid a {
  color:var(--cyan);
  background:0 0;
  border:0;
  justify-content:space-between;
  align-items:center;
  margin-top:auto;
  padding:0;
  font-size:10px;
  font-weight:700;
  display:flex
}
.method-grid button svg,
.negative-callout button svg,
.article-grid a svg {
  width:15px
}
/* ==========================================================================
   11. VIAJE DEL PACIENTE
   ========================================================================== */
.journey {
  background:#fff;
  padding:115px clamp(24px,6vw,94px)
}
.journey-main {
  padding-left:7vw
}
.journey-lead {
  color:var(--muted);
  max-width:920px;
  margin:35px 0 65px;
  font-size:17px;
  line-height:1.7
}
.journey-map {
  grid-template-columns:1fr 1fr;
  gap:13px;
  display:grid;
  position:relative
}
.core {
  background:var(--navy);
  color:#fff;
  border-radius:10px;
  grid-column:1/-1;
  grid-template-columns:160px 1fr 1fr;
  align-items:center;
  padding:25px 30px;
  display:grid
}
.core span {
  color:var(--cyan);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:9px
}
.core b {
  font-size:18px
}
.core small {
  color:#8fa6b0
}
.branch {
  border:1px solid var(--line);
  grid-template-columns:46px 1fr;
  gap:17px;
  min-height:155px;
  padding:24px;
  display:grid
}
.branch>span {
  color:var(--teal)
}
.branch>span svg {
  width:32px
}
.branch small {
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--teal);
  font-size:8px
}
.branch b {
  margin:9px 0;
  font-size:15px;
  display:block
}
.branch p {
  color:var(--muted);
  font-size:11px;
  line-height:1.6
}
.branch.therapy {
  background:#f6f3ff;
  border-color:#dcd3ff
}
.branch.alert {
  background:#fff6f3;
  border-color:#ffd5cd
}
.negative-callout {
  background:var(--mist);
  border-left:4px solid var(--teal);
  grid-template-columns:.6fr 1.1fr auto;
  align-items:center;
  gap:35px;
  margin-top:13px;
  padding:25px 29px;
  display:grid
}
.negative-callout b {
  font-size:15px
}
.negative-callout p {
  color:var(--muted);
  margin:0;
  font-size:12px;
  line-height:1.6
}
.negative-callout button {
  color:var(--teal);
  gap:12px;
  margin:0
}
/* ==========================================================================
   12. PREPARACIÓN DE MUESTRA
   ========================================================================== */
.preparation {
  background:linear-gradient(120deg,var(--navy),#173f51);
  color:#fff;
  padding:110px clamp(24px,6vw,94px)
}
.preparation .section-side {
  border-color:#335365
}
.prep-main {
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:9vw;
  padding-left:7vw;
  display:grid
}
.prep-main>div>p:not(.eyebrow) {
  color:#aec1c9;
  max-width:540px;
  line-height:1.7
}
.prep-main .button {
  margin-top:25px
}
.sample-panel {
  background:#03121b4d;
  border:1px solid #4ee4d147;
  grid-template-columns:120px 1fr;
  gap:28px;
  padding:35px;
  display:grid
}
.tube {
  border:2px solid var(--cyan);
  border-radius:6px 6px 25px 25px;
  width:85px;
  height:165px;
  position:relative
}
.tube:before {
  content:"";
  border:2px solid var(--cyan);
  border-radius:4px;
  width:103px;
  height:18px;
  position:absolute;
  top:-18px;
  left:-11px
}
.tube span {
  background:linear-gradient(#e951a799,#886dff66);
  border-radius:0 0 16px 16px;
  height:55px;
  position:absolute;
  bottom:10px;
  left:8px;
  right:8px
}
.tube i {
  background:#4ee4d14d;
  width:1px;
  height:88px;
  position:absolute;
  top:35px;
  left:50%
}
.sample-panel small {
  color:var(--cyan);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:8px
}
.sample-panel h3 {
  margin:12px 0;
  font-size:24px
}
.sample-panel p,
.sample-panel li {
  color:#a7bcc5;
  font-size:11px
}
.sample-panel ul {
  columns:2;
  padding-left:17px
}
.sample-panel b {
  color:var(--coral);
  font-size:10px
}
/* ==========================================================================
   13. BIBLIOTECA CLÍNICA
   ========================================================================== */
.library {
  background:#f7fbfa;
  padding:110px clamp(24px,6vw,94px)
}
.library-main {
  padding-left:7vw
}
.library-intro {
  grid-template-columns:1fr .7fr;
  align-items:end;
  gap:80px;
  display:grid
}
.library-intro>p {
  color:var(--muted);
  font-size:14px;
  line-height:1.7
}
.article-grid {
  border-top:1px solid var(--line);
  grid-template-columns:repeat(3,1fr);
  margin-top:65px;
  display:grid
}
.article-grid article {
  flex-direction:column;
  min-height:260px;
  padding:30px 30px 20px 0;
  display:flex
}
.article-grid article+article {
  border-left:1px solid var(--line);
  padding-left:30px
}
.article-grid span {
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--magenta);
  font-size:8px;
  font-weight:700
}
.article-grid h3 {
  margin:24px 0 15px;
  font-size:21px;
  line-height:1.2
}
.article-grid p {
  color:var(--muted);
  font-size:11px;
  line-height:1.65
}
.article-grid a {
  color:var(--teal)
}
/* ==========================================================================
   14. PIE DE PÁGINA
   ========================================================================== */
footer {
  color:#fff;
  background:#06111a;
  grid-template-columns:1fr 1fr;
  gap:60px;
  padding:65px clamp(24px,6vw,94px) 30px;
  display:grid
}
.footer-mark {
  align-items:baseline;
  gap:5px;
  display:flex
}
.footer-mark b {
  color:var(--cyan);
  font-size:45px
}
.footer-mark span {
  font-size:42px;
  font-weight:900
}
.footer-mark small {
  color:#617b86;
  margin-left:15px;
  font-size:9px
}
footer>div:nth-child(2) {
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:20px;
  display:flex
}
footer>div:nth-child(2) p {
  text-align:right;
  color:#78919c;
  width:100%;
  font-size:11px
}
footer>div:nth-child(2) a {
  color:var(--cyan);
  font-size:11px;
  font-weight:700
}
footer>small {
  color:#52707d;
  border-top:1px solid #183441;
  grid-column:1/-1;
  padding-top:23px;
  font-size:9px
}
.footer-identity {
  display:flex;
  align-items:flex-start;
  gap:34px;
}

.footer-mark {
  flex:0 0 auto;
}

.footer-aloha-link {
  max-width:190px;
  padding-left:28px;
  border-left:1px solid #183441;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
  transition:
    opacity .2s ease,
    transform .2s ease;
}

.footer-aloha-link small {
  color:#617b86;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:8px;
  font-weight:700;
}

.footer-aloha-link img {
  width:175px;
  height:auto;
}

.footer-aloha-link:hover,
.footer-aloha-link:focus-visible {
  opacity:.86;
  transform:translateY(-2px);
}
/* ==========================================================================
   15. MODALES Y VENTANAS DE INFORMACIÓN
   ========================================================================== */
.modal-backdrop {
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  z-index:100;
  background:#020b11db;
  justify-content:center;
  align-items:center;
  padding:24px;
  animation:.2s fade;
  display:flex;
  position:fixed;
  inset:0
}
.modal {
  width:min(820px,100%);
  max-height:92vh;
  color:var(--ink);
  border:1px solid var(--cyan);
  background:#f7fbfa;
  padding:46px;
  position:relative;
  overflow:auto;
  box-shadow:0 0 90px #4ee4d126
}
.modal-close {
  color:#71848d;
  background:0 0;
  border:0;
  font-size:28px;
  position:absolute;
  top:14px;
  right:17px
}
.modal h2 {
  letter-spacing:-.06em;
  margin:0 45px 20px 0;
  font-size:clamp(32px,4vw,54px);
  font-weight:900;
  line-height:1
}
.modal-intro {
  color:var(--muted);
  max-width:680px;
  font-size:14px;
  line-height:1.7
}
.modal-steps {
  border-top:1px solid var(--line);
  margin:30px 0
}
.modal-steps article {
  border-bottom:1px solid var(--line);
  grid-template-columns:45px 1fr;
  padding:18px 0;
  display:grid
}
.modal-steps article>b {
  color:var(--teal);
  font-size:9px
}
.modal-steps h3 {
  margin:0 0 7px;
  font-size:15px
}
.modal-steps p {
  color:var(--muted);
  margin:0;
  font-size:11px;
  line-height:1.6
}
.modal aside {
  border-left:3px solid var(--teal);
  background:#e5f5f2;
  padding:15px;
  font-size:11px;
  line-height:1.6
}
.modal-actions {
  align-items:center;
  gap:22px;
  margin-top:28px;
  display:flex
}
.modal-actions button {
  color:var(--muted);
  background:0 0;
  border:0;
  font-size:11px
}
.modal-actions .button {
  background:var(--navy)
}
.prep-modal {
  width:min(1050px,100%)
}
.prep-columns {
  border:1px solid var(--line);
  grid-template-columns:repeat(4,1fr);
  margin-top:35px;
  display:grid
}
.prep-columns article {
  border-right:1px solid var(--line);
  padding:22px
}
.prep-columns article:last-child {
  border:0
}
.prep-columns span {
  color:var(--magenta);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:8px
}
.prep-columns h3 {
  margin:18px 0;
  font-size:15px
}
.prep-columns ul {
  padding-left:15px
}
.prep-columns li {
  color:var(--muted);
  margin-bottom:8px;
  font-size:10px;
  line-height:1.55
}
/* ==========================================================================
   16. RUTAS ESPECIALES
   ========================================================================== */
.special-routes {
  grid-template-columns:1fr 1fr;
  gap:13px;
  margin-top:13px;
  display:grid
}
.special-routes>div {
  background:var(--mist);
  border-top:3px solid var(--teal);
  grid-template-columns:36px 1fr;
  gap:18px;
  padding:25px 28px;
  display:grid
}
.special-routes>div:first-child {
  border-color:var(--coral);
  background:#fff3ef
}
.special-routes span {
  color:var(--teal)
}
.special-routes>div:first-child span {
  color:var(--coral)
}
.special-routes span svg {
  width:27px
}
.special-routes p {
  color:var(--muted);
  margin:0;
  font-size:11px;
  line-height:1.65
}
.special-routes p b {
  color:var(--ink);
  margin-bottom:8px;
  font-size:14px;
  display:block
}
.special-routes button {
  color:var(--teal);
  background:0 0;
  border:0;
  grid-column:2;
  justify-self:start;
  align-items:center;
  gap:10px;
  padding:0;
  font-size:10px;
  font-weight:700;
  display:flex
}
.special-routes>div:first-child button {
  color:var(--coral)
}
.special-routes button svg {
  width:14px
}
.library-intro {
  max-width:900px;
  display:block
}
/* ==========================================================================
   17. ANIMACIONES
   ========================================================================== */
@keyframes scan {
  0% {
    top:0
  }
  to {
    top:100%
  }
}
@keyframes pulse {
  50% {
    opacity:.5
  }
}
@keyframes fade {
  0% {
    opacity:0
  }
  to {
    opacity:1
  }
}
/* ==========================================================================
   18. RESPONSIVE: TABLET Y PANTALLAS MEDIANAS
   ========================================================================== */
@media (width<=1100px) {
  .site-header nav {
    display:none
  }
  .hero {
    grid-template-columns:1fr
  }
  .lab-visual {
    margin:60px 0 0
  }
  .route-track {
    grid-template-columns:repeat(3,1fr)
  }
  .section {
    grid-template-columns:95px 1fr
  }
  .method-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .method-grid article:nth-child(2) {
    border-right:0
  }
  .methods-intro,
  .library-intro {
    grid-template-columns:1fr
  }
  .prep-main {
    gap:5vw
  }
  .prep-columns {
    grid-template-columns:repeat(2,1fr)
  }
  .journey-map,
  .special-routes,
  .negative-callout,
  .article-grid {
    grid-template-columns:1fr
  }
  .article-grid article+article {
    border-left:0;
    border-top:1px solid var(--line);
    padding-left:0
  }
}
/* ==========================================================================
   19. RESPONSIVE: TELÉFONOS
   ========================================================================== */
@media (width<=700px) {
  .site-header {
    height:68px;
    padding:0 18px
  }
  .header-cta {
    font-size:0
  }
  .header-cta svg {
    width:22px
  }
  .hero {
    padding:65px 22px
  }
    .hero h1 {
      width:100%;
      max-width:100%;
      gap:15px;
      font-size:clamp(44px,15vw,64px);
      letter-spacing:-.09em;
      line-height:.82
    }
  .hero h2 {
    font-size:31px
  }
  .hero-actions {
    flex-direction:column;
    align-items:flex-start
  }
  .hero-metrics {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px
  }
  .hero-metrics div {
    grid-template-columns:1fr;
    align-items:start;
    gap:4px
  }
  .hero-metrics span {
    max-width:none
  }
  .lab-visual {
    display:none
  }
  .orienter {
    padding:70px 18px
  }
  .orienter-head {
    grid-template-columns:1fr;
    gap:18px
  }
  .route-track {
    grid-template-columns:1fr 1fr
  }
  .route-track button {
    min-height:200px
  }
  .section {
    padding:75px 20px;
    display:block
  }
  .section-side {
    display:none
  }
  .understand-main,
  .methods-main,
  .journey-main,
  .library-main {
    padding:0
  }
  .principles {
    grid-template-columns:1fr
  }
  .principles article+article {
    border-top:1px solid #bad6d2;
    border-left:0;
    padding-left:0
  }
  .method-grid {
    grid-template-columns:1fr
  }
  .method-grid article {
    border-bottom:1px solid #214050;
    border-right:0
  }
  .prep-main {
    grid-template-columns:minmax(0,1fr);
    padding:0
  }
  .prep-main,
  .prep-main > * {
    min-width:0
  }
  .sample-panel {
    grid-template-columns:60px minmax(0,1fr);
    gap:18px;
    margin-top:45px;
    padding:23px
  }
  .sample-panel ul {
    columns:1
  }
  .tube {
    transform-origin:0 0;
    scale:.72
  }
  .core {
    grid-template-columns:1fr;
    gap:9px
  }
  .article-grid {
    grid-template-columns:1fr
  }
  .modal {
    padding:35px 22px
  }
  .prep-columns {
    grid-template-columns:1fr
  }
  .prep-columns article {
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .modal-actions {
    flex-direction:column;
    align-items:flex-start
  }
  footer {
    grid-template-columns:1fr
  }
  .footer-mark small {
    display:none
  }
  footer>div:nth-child(2) {
    justify-content:flex-start
  }
  footer>div:nth-child(2) p {
    text-align:left
  }
}
.article-status {
  margin-top:auto;
  color:var(--teal)!important;
  letter-spacing:.08em!important;
  font-size:10px!important
}
.header-brand-group {
  gap:9px;
}

.aloha-isotype-link {
  width:30px;
  height:30px;
}
.footer-identity {
  flex-direction:column;
  gap:24px;
}

.footer-aloha-link {
  max-width:210px;
  padding-top:22px;
  padding-left:0;
  border-top:1px solid #183441;
  border-left:0;
}

.footer-aloha-link img {
  width:190px;
}
/* ==========================================================================
   20. ACCESIBILIDAD: MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    animation:none!important
  }
  html {
    scroll-behavior:auto
  }
}
/* ==========================================================================
   21. PROPIEDADES CSS GENERADAS
   ========================================================================== */
@property --tw-rotate-x {
  syntax:"*";
  inherits:false
}
@property --tw-rotate-y {
  syntax:"*";
  inherits:false
}
@property --tw-rotate-z {
  syntax:"*";
  inherits:false
}
@property --tw-skew-x {
  syntax:"*";
  inherits:false
}
@property --tw-skew-y {
  syntax:"*";
  inherits:false
}
@property --tw-border-style {
  syntax:"*";
  inherits:false;
  initial-value:solid
}