:root {
  color-scheme: dark;

  --ink: #1f252c;
  --panel: #2a2f36;
  --gray: #8a8f93;
  --white: #f2efea;
  --blue: #3fa9f5;
  --beige: #d8cbb8;
  --line: #52616b;

  font-family: "Montserrat", sans-serif;
  color: var(--white);
  background: var(--ink);
}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  min-height: 100vh;

  background: var(--ink);
  color: var(--white);

  font-family: "Montserrat", sans-serif;
}


button,
input,
a {
  -webkit-tap-highlight-color: transparent;
}


button,
input {
  font: inherit;
}


button,
a {
  touch-action: manipulation;
}


button {
  color: inherit;
  cursor: pointer;
}


a {
  color: inherit;
  text-decoration: none;
}


img {
  display: block;
  max-width: 100%;
}


svg {
  width: 24px;
  height: 24px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.6;

  stroke-linecap: round;
  stroke-linejoin: round;
}


button svg {
  pointer-events: none;
}


/* ACCESIBILIDAD */

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


.icon-library {
  position: absolute;

  width: 0;
  height: 0;

  overflow: hidden;
}


.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;

  overflow: hidden;

  clip-path: inset(50%);
}


.skip-link {
  position: fixed;

  top: 8px;
  left: 8px;

  z-index: 1000;

  padding: 12px 16px;

  background: var(--ink);

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

  border-radius: 8px;

  transform: translateY(-160%);
}


.skip-link:focus {
  transform: none;
}


/* CONTENEDOR */

.site-shell {
  width: 100%;
  max-width: 560px;

  margin: 0 auto;

  overflow: hidden;
}


.hub {
  padding: 0 16px 28px;

  background: var(--ink);
}


/* HERO */

.hero {
  position: relative;

  isolation: isolate;

  min-height: 400px;

  margin: 0 -16px;

  padding: 30px 28px 26px;

  overflow: hidden;
}


.hero__photo {
  position: absolute;

  inset: 0;

  z-index: -3;

  overflow: hidden;

  background: var(--ink);
}


.hero__photo img {
  display: block;

  width: 100%;
  height: auto;

  min-height: 100%;

  margin: 0;

  object-position: center top;
}


.hero__veil {
  position: absolute;

  inset: 0;

  z-index: -2;

  background:
    linear-gradient(
      90deg,
      rgba(18, 25, 32, 0.72),
      rgba(18, 25, 32, 0.22) 52%,
      rgba(18, 25, 32, 0.03) 78%
    );
}


.hero::after {
  content: "";

  position: absolute;

  inset: 61% 0 0;

  z-index: -1;

  background:
    linear-gradient(
      transparent,
      var(--ink)
    );
}


/* MARCA */

.brand-lockup {
  position: relative;

  z-index: 1;
}


.brand-name {
  display: block;

  font-size: 20px;
  font-weight: 400;

  letter-spacing: 0.42em;
}


.brand-descriptor {
  display: block;

  margin-top: 8px;

  font-size: 10px;

  line-height: 1.7;

  letter-spacing: 0.35em;
}


/* COPY HERO */

.hero__copy {
  position: relative;

  z-index: 1;

  margin-top: 40px;
}


.hero h1 {
  margin: 0;

  font-size: clamp(32px, 8.8vw, 48px);

  font-weight: 600;

  line-height: 1.04;

  letter-spacing: -0.055em;
}


.hero h1 em {
  color: var(--blue);

  font-style: normal;
}


.hero__copy p {
  margin: 17px 0 0;

  color: var(--white);

  font-size: 14px;

  line-height: 1.5;

  text-shadow:
    0 1px 10px rgba(0, 0, 0, 0.85);
}


/* REDES SOCIALES COMPACTAS */

.social-nav {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 20px;

  margin: 12px 0 18px;

  padding: 0;
}


.social-nav a {
  display: grid;

  place-items: center;

  width: 44px;
  height: 44px;

  border-radius: 50%;
}


.social-nav a[hidden] {
  display: none;
}


.social-nav span {
  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

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

  border-radius: 50%;

  background:
    rgba(42, 47, 54, 0.28);

  transition:
    border-color 0.18s ease,
    color 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease;
}


.social-nav span svg {
  width: 20px;
  height: 20px;
}


.social-nav a:hover span,
.social-nav a:focus-visible span {
  color: var(--blue);

  border-color: var(--blue);

  background:
    rgba(63, 169, 245, 0.08);

  transform: translateY(-1px);
}


/* RUTAS */

.route-list {
  position: relative;

  display: grid;

  gap: 10px;
}


/* TARJETAS */

.route-card {
  position: relative;

  isolation: isolate;

  overflow: hidden;

  display: grid;

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

  align-items: center;

  gap: 12px;

  width: 100%;

  min-height: 104px;

  padding: 13px 10px;

  text-align: left;

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

  border-radius: 13px;

  background-color: var(--ink);

  background-size: cover;

  background-position: center;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    filter 0.18s ease;
}


.route-card::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background:
    linear-gradient(
      90deg,
      rgba(18, 25, 32, 0.94),
      rgba(18, 25, 32, 0.78) 58%,
      rgba(18, 25, 32, 0.16)
    );

  transition:
    box-shadow 0.18s ease;
}


/* IMÁGENES CLOUDINARY */

.route-card--primary {
  background-image:
    url("https://res.cloudinary.com/mavt84ed/image/upload/f_auto,q_auto/v1789948270/Imagen_de_Codex_20_sept_2026_18_15_25.png");
}


.route-card--learn {
  background-image:
    url("https://res.cloudinary.com/mavt84ed/image/upload/f_auto,q_auto/v1789951329/Imagen_de_Codex_20_sept_2026_19_39_43.png");
}


.route-card--story {
  background-image:
    url("https://res.cloudinary.com/mavt84ed/image/upload/f_auto,q_auto/v1789948267/Imagen_de_Codex_20_sept_2026_18_48_14.png");
}


.route-card--explore {
  background-image:
    url("https://res.cloudinary.com/mavt84ed/image/upload/f_auto,q_auto/v1789948267/Imagen_de_Codex_20_sept_2026_18_48_21.png");
}


.route-card--talk {
  background-image:
    url("https://res.cloudinary.com/mavt84ed/image/upload/f_auto,q_auto/v1789952122/Imagen_de_Codex_20_sept_2026_19_54_22.png");
}


/* ICONOS TARJETAS */

.route-card__icon {
  display: grid;

  place-items: center;

  width: 46px;
  height: 46px;

  border-radius: 50%;

  background: #303c47;

  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}


.route-card__icon svg {
  width: 27px;
  height: 27px;
}


/* TEXTO */

.route-card__copy {
  min-width: 0;
}


.route-card__copy strong {
  display: block;

  font-size: 14px;

  font-weight: 600;

  line-height: 1.45;

  text-transform: uppercase;

  letter-spacing: 0.015em;
}


.route-card__copy small {
  display: block;

  margin-top: 4px;

  color: var(--white);

  font-size: 12px;

  line-height: 1.5;
}


/* FLECHA */

.route-card__arrow {
  display: grid;

  place-items: center;

  width: 27px;
  height: 27px;

  border: 1px solid #9da6ac;

  border-radius: 50%;

  background:
    rgba(31, 37, 44, 0.4);

  transition:
    border-color 0.18s ease;
}


.route-card__arrow svg {
  width: 16px;
  height: 16px;
}


/* INTERACCIONES */

.route-card:active {
  transform: scale(0.98);

  filter: brightness(1.14);
}


.route-card:is(
  :focus-visible,
  :active
) {
  border-color: var(--blue);
}


.route-card:is(
  :focus-visible,
  :active
)
.route-card__icon {
  background: var(--blue);

  color: #13232f;
}


.route-card:is(
  :focus-visible,
  :active
)
.route-card__arrow {
  border-color: var(--blue);
}


.route-card:is(
  :focus-visible,
  :active
)::before {
  box-shadow:
    inset 0 0 0 300px
    rgba(63, 169, 245, 0.065);
}


/* HOVER */

@media
  (hover: hover)
  and
  (pointer: fine) {

  .route-card:hover {
    transform: translateY(-2px);

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


  .route-card:hover
  .route-card__icon {
    background: var(--blue);

    color: #13232f;
  }


  .route-card:hover
  .route-card__arrow {
    border-color: var(--blue);
  }


  .route-card:hover::before {
    box-shadow:
      inset 0 0 0 300px
      rgba(63, 169, 245, 0.065);
  }


  .route-card:active {
    transform: scale(0.98);
  }

}


/* FOOTER */

.hub-footer {
  margin: 28px 18px 0;

  padding-top: 18px;

  text-align: center;

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


.signature {
  display: block;

  width: 180px;

  height: auto;

  margin: 0 auto;
}


.hub-footer p {
  margin: 4px 0 18px;

  font-size: 9px;

  line-height: 1.7;

  letter-spacing: 0.28em;
}


.hub-footer > small {
  display: block;

  color: #bbc0c4;

  font-size: 10px;

  line-height: 1.6;
}


/* MODALES */

.sheet {
  width: calc(100% - 16px);

  max-width: 640px;

  max-height: 90dvh;

  padding: 0;

  margin: auto auto 8px;

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

  border-radius: 22px;

  background: var(--ink);

  color: var(--white);
}


.sheet::backdrop {
  background:
    rgba(7, 16, 25, 0.79);

  backdrop-filter: blur(5px);
}


.sheet__surface {
  position: relative;

  max-height: 85dvh;

  overflow: auto;

  padding:
    38px
    22px
    max(
      26px,
      env(safe-area-inset-bottom)
    );
}


.sheet__close {
  position: absolute;

  top: 8px;
  right: 8px;

  display: grid;

  place-items: center;

  width: 44px;
  height: 44px;

  padding: 0;

  border: 0;

  border-radius: 50%;

  background: var(--panel);
}


.eyebrow {
  margin:
    18px
    32px
    14px
    0;

  color: var(--blue);

  font-size: 11px;

  letter-spacing: 0.14em;
}


.sheet h2 {
  margin: 0 0 20px;

  font-size: 25px;

  line-height: 1.2;
}


.lead,
.story-copy p {
  color: #d4d7d9;

  font-size: 15px;

  line-height: 1.8;
}


/* PRINCIPIOS */

.principle-grid {
  display: grid;

  gap: 12px;

  margin: 24px 0;
}


.principle-grid article {
  padding: 18px;

  background: var(--panel);

  border-radius: 12px;
}


.principle-grid span {
  color: var(--blue);

  font-size: 12px;
}


.principle-grid h3 {
  margin: 8px 0;

  font-size: 17px;
}


.principle-grid p {
  margin: 0;

  font-size: 14px;

  line-height: 1.7;
}


.editorial-quote {
  color: var(--beige);

  font-size: 18px;

  line-height: 1.6;
}


/* INTENCIONES */

.intent-list {
  display: grid;

  gap: 10px;

  padding: 0;

  margin: 24px 0;

  border: 0;
}


.intent-list label {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 16px 12px;

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

  border-radius: 10px;

  font-size: 14px;

  line-height: 1.5;

  cursor: pointer;
}


.intent-list input {
  flex-shrink: 0;

  width: 18px;
  height: 18px;

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


.intent-list label:has(
  input:checked
) {
  border-color: var(--blue);

  background:
    rgba(63, 169, 245, 0.07);
}


/* WHATSAPP */

.whatsapp-cta {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  width: 100%;

  padding: 16px;

  border: 0;

  border-radius: 10px;

  background: var(--blue);

  color: #14212b;

  font-size: 14px;

  font-weight: 600;
}


.whatsapp-cta:disabled {
  opacity: 0.5;

  cursor: not-allowed;
}


.form-note {
  color: #bbc0c4;

  font-size: 12px;

  line-height: 1.6;
}


/* CONTENIDO */

.content-list {
  font-size: 14px;

  line-height: 1.7;
}


.content-item {
  display: flex;

  align-items: center;

  gap: 14px;

  padding: 18px 0;

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


.content-item strong,
.content-item small {
  display: block;
}


.content-item small {
  color: #bbc0c4;
}


.content-item__number {
  color: var(--blue);
}


.content-item > svg {
  flex-shrink: 0;
}


/* TOAST */

.toast {
  position: fixed;

  bottom: 22px;
  left: 50%;

  z-index: 200;

  width: 400px;

  max-width:
    calc(100% - 32px);

  padding: 16px;

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

  border-radius: 12px;

  background: var(--panel);

  font-size: 14px;

  opacity: 0;

  pointer-events: none;

  transform:
    translate(-50%, 30px);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}


.toast.is-visible {
  opacity: 1;

  transform:
    translate(-50%, 0);
}


/* 430 PX */

@media (min-width: 430px) {

  .hero {
    min-height: 430px;

    padding-top: 35px;
  }


  .hero__copy {
    margin-top: 45px;
  }


  .hero__copy p {
    font-size: 16px;
  }


  .route-card {
    grid-template-columns:
      52px
      minmax(0, 1fr)
      30px;

    padding: 15px;

    gap: 16px;
  }


  .route-card__icon {
    width: 52px;
    height: 52px;
  }


  .route-card__arrow {
    width: 30px;
    height: 30px;
  }


  .route-card__copy small {
    font-size: 13px;
  }

}


/* 560 PX */

@media (min-width: 560px) {

  .hub {
    padding-right: 22px;
    padding-left: 22px;
  }


  .hero {
    min-height: 500px;

    margin: 0 -22px;

    padding: 40px 34px 28px;
  }


  .hero__copy {
    margin-top: 65px;
  }


  .brand-name {
    font-size: 23px;
  }


  .brand-descriptor {
    font-size: 12px;
  }


  .route-card {
    min-height: 112px;
  }


  .route-card__copy strong {
    font-size: 16px;
  }


  .route-card__copy small {
    font-size: 15px;
  }


  .signature {
    width: 210px;
  }

}


/* ESCRITORIO */

@media (min-width: 700px) {

  body {
    padding: 28px;
  }


  .site-shell {
    border: 1px solid #39454e;

    border-radius: 24px;

    box-shadow:
      0 24px 80px
      rgba(0, 0, 0, 0.34);
  }


  .sheet {
    margin: auto;
  }


  .principle-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }

}


/* REDUCIR MOVIMIENTO */

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

  *,
  *::before,
  *::after {
    transition: none !important;

    scroll-behavior: auto !important;
  }

}