/* =========================================================
   ARBORTIC
   LANDING 2026

   styles.css
   TANDA 2/3 — AJUSTE FINAL DE DISEÑO

   CAMBIOS:
   - Modo normal/claro como base.
   - Dark mode corregido sección por sección.
   - Header: Light / Dark / 18 Sep.
   - 18 Sep preparado, sin efecto todavía.
   - Accesibilidad:
       Normal / Light / Dark / Rest.
   - Normal es el estado inicial local.
   - Sinergia:
       línea CSS permanente Contenido -> Conectar.
   - SVG sólo mantiene rutas superior/inferior y hover.
   - Partículas globales.
   - Sin átomos.
   - Contacto sin borde coloreado en hover.
========================================================= */


/* =========================================================
   01. DESIGN TOKENS
========================================================= */

:root {

  /* -------------------------------------------------------
     BASE
  ------------------------------------------------------- */

  --bg: #fbf8ff;
  --bg-alt: #ffffff;
  --bg-soft: #f8f5ff;

  --surface: #ffffff;
  --surface-soft: #f7f4ff;
  --surface-muted: #f1eaff;

  --text: #171b2d;
  --text-soft: #565160;
  --text-muted: #767080;

  --primary: #630ed4;
  --primary-2: #7c3aed;

  --primary-soft: #eee5ff;
  --primary-fixed: #d2bbff;

  --navy: #080d24;
  --navy-2: #11172f;

  --success: #16866f;
  --success-soft: #e9f8f3;

  --danger: #c33f55;
  --danger-soft: #fff0f3;

  --border: rgba(99, 14, 212, 0.10);
  --border-medium: rgba(99, 14, 212, 0.18);
  --border-strong: rgba(99, 14, 212, 0.30);


  /* -------------------------------------------------------
     PROCESS
  ------------------------------------------------------- */

  --stage-1: #6366f1;
  --stage-2: #d946ef;
  --stage-3: #7c3aed;
  --stage-4: #4f46e5;
  --stage-5: #14b8a6;


  /* -------------------------------------------------------
     LAYOUT
  ------------------------------------------------------- */

  --header-height: 72px;

  --container-width: 1240px;

  --page-gutter:
    clamp(
      30px,
      4.2vw,
      64px
    );

  --section-space:
    clamp(
      72px,
      7vw,
      98px
    );


  /* -------------------------------------------------------
     RADII
  ------------------------------------------------------- */

  --radius-sm: 11px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;


  /* -------------------------------------------------------
     SHADOW
  ------------------------------------------------------- */

  --shadow-soft:
    0 8px 24px
    rgba(25, 17, 43, 0.045);

  --shadow-medium:
    0 18px 42px
    rgba(41, 26, 69, 0.08);

  --shadow-large:
    0 28px 64px
    rgba(20, 13, 39, 0.115);


  /* -------------------------------------------------------
     MOTION
  ------------------------------------------------------- */

  --ease:
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );


  /* -------------------------------------------------------
     TYPOGRAPHY
  ------------------------------------------------------- */

  --font-body:
    "Roboto",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --font-display:
    "Manrope",
    "Roboto",
    system-ui,
    sans-serif;
}


/* =========================================================
   02. RESET
========================================================= */

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


html {
  background:
    var(--bg);

  scroll-behavior:
    smooth;

  scroll-padding-top:
    calc(
      var(--header-height) +
      18px
    );
}


body {
  margin: 0;

  min-width: 320px;

  overflow-x: clip;

  background:
    var(--bg);

  color:
    var(--text);

  font-family:
    var(--font-body);

  font-size: 16px;

  font-weight: 400;

  line-height: 1.58;

  text-rendering:
    optimizeLegibility;

  -webkit-font-smoothing:
    antialiased;

  -moz-osx-font-smoothing:
    grayscale;
}


button,
input,
textarea,
select {
  font: inherit;
}


button {
  cursor: pointer;
}


a {
  color: inherit;

  text-decoration: none;
}


img,
svg,
canvas {
  display: block;

  max-width: 100%;
}


img {
  height: auto;
}


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


h1,
h2,
h3 {
  font-family:
    var(--font-display);
}


address {
  font-style: normal;
}


section {
  position: relative;

  scroll-margin-top:
    calc(
      var(--header-height) +
      16px
    );
}


::selection {
  background:
    rgba(99, 14, 212, 0.18);

  color:
    var(--text);
}


/* =========================================================
   03. GLOBAL PARTICLES
========================================================= */

.site-particles {
  position: fixed;

  inset: 0;

  z-index: 2;

  width: 100%;
  height: 100%;

  overflow: hidden;

  pointer-events: none;
}


.site-particles-canvas {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  max-width: none;

  pointer-events: none;
}


.particle-section > .container,
.footer > .container {
  position: relative;

  z-index: 3;
}


/* =========================================================
   04. CONTAINERS
========================================================= */

.container {
  width: 100%;

  max-width:
    calc(
      var(--container-width) +
      var(--page-gutter) * 2
    );

  margin-inline: auto;

  padding-inline:
    var(--page-gutter);
}


.hero .container {
  max-width:
    calc(
      1240px +
      var(--page-gutter) * 2
    );
}


.capabilities .container,
.cms .container {
  max-width:
    calc(
      1210px +
      var(--page-gutter) * 2
    );
}


.process .container {
  max-width:
    calc(
      1280px +
      var(--page-gutter) * 2
    );
}


.responsive-showcase .container {
  max-width:
    calc(
      1210px +
      var(--page-gutter) * 2
    );
}


.accessibility .container,
.contact .container,
.footer .container {
  max-width:
    calc(
      1180px +
      var(--page-gutter) * 2
    );
}


.institutional .container {
  max-width:
    calc(
      1150px +
      var(--page-gutter) * 2
    );
}


/* =========================================================
   05. ACCESSIBILITY BASE
========================================================= */

:focus-visible {
  outline:
    3px solid
    rgba(124, 58, 237, 0.32);

  outline-offset: 4px;
}


.skip-link {
  position: fixed;

  top: 12px;
  left: 16px;

  z-index: 9999;

  padding:
    10px 16px;

  border-radius: 10px;

  background:
    var(--navy);

  color:
    #ffffff;

  font-size: 14px;

  font-weight: 700;

  transform:
    translateY(-160%);

  transition:
    transform
    0.22s
    var(--ease);
}


.skip-link:focus {
  transform:
    translateY(0);
}


/* =========================================================
   06. SHARED TYPOGRAPHY
========================================================= */

.eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color:
    var(--primary);

  font-size:
    clamp(
      10px,
      0.75vw,
      11px
    );

  font-weight: 700;

  letter-spacing: 0.15em;

  line-height: 1.2;

  text-transform: uppercase;
}


.eyebrow::before {
  content: "";

  width: 28px;
  height: 1px;

  flex: 0 0 auto;

  background:
    currentColor;

  opacity: 0.55;
}


.section-head {
  width:
    min(
      100%,
      820px
    );

  margin:
    0 auto 30px;

  text-align: center;
}


.section-title {
  margin:
    12px auto 0;

  font-size:
    clamp(
      34px,
      3.2vw,
      46px
    );

  font-weight: 800;

  line-height: 1.07;

  letter-spacing: -0.045em;

  text-wrap: balance;
}


.section-copy {
  width:
    min(
      100%,
      720px
    );

  margin:
    16px auto 0;

  color:
    var(--text-soft);

  font-size:
    clamp(
      15px,
      1.08vw,
      17px
    );

  line-height: 1.65;

  text-wrap: pretty;
}


/* =========================================================
   07. BUTTONS
========================================================= */

.primary-btn,
.secondary-btn {
  min-height: 46px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  padding:
    11px 18px;

  border-radius: 12px;

  font-size: 10.5px;

  font-weight: 700;

  letter-spacing: 0.065em;

  line-height: 1;

  text-transform: uppercase;

  transition:
    transform
    0.26s
    var(--ease),
    background
    0.26s ease,
    border-color
    0.26s ease,
    color
    0.26s ease,
    box-shadow
    0.26s ease;
}


.primary-btn {
  border:
    1px solid
    var(--navy);

  background:
    var(--navy);

  color:
    #ffffff;

  box-shadow:
    0 11px 24px
    rgba(8, 13, 36, 0.12);
}


.secondary-btn {
  border:
    1px solid
    var(--border);

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

  color:
    var(--text);
}


.primary-btn
.material-symbols-outlined,
.secondary-btn
.material-symbols-outlined {
  font-size: 18px;

  transition:
    transform
    0.25s
    var(--ease);
}


@media (hover: hover) {

  .primary-btn:hover:not(:disabled),
  .secondary-btn:hover:not(:disabled) {
    transform:
      translateY(-2px);
  }


  .primary-btn:hover:not(:disabled)
  .material-symbols-outlined,
  .secondary-btn:hover:not(:disabled)
  .material-symbols-outlined {
    transform:
      translateX(3px);
  }

}


/* =========================================================
   08. HEADER
========================================================= */

.site-header {
  position: fixed;

  inset:
    0 0 auto;

  z-index: 1000;

  height:
    var(--header-height);

  border-bottom:
    1px solid
    rgba(99, 14, 212, 0.055);

  background:
    rgba(251, 248, 255, 0.92);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  transition:
    background
    0.3s ease,
    border-color
    0.3s ease,
    box-shadow
    0.3s ease;
}


.site-header.scrolled {
  background:
    rgba(251, 248, 255, 0.98);

  box-shadow:
    0 7px 25px
    rgba(19, 13, 38, 0.05);
}


.nav {
  height: 100%;

  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap:
    clamp(
      22px,
      3vw,
      42px
    );
}


.brand {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  min-width: max-content;

  font-family:
    var(--font-display);

  font-size: 17px;

  font-weight: 800;

  letter-spacing: -0.025em;
}


.brand-mark {
  width: 33px;
  height: 33px;

  display: grid;

  place-items: center;

  overflow: hidden;

  border-radius: 9px;

  background:
    rgba(124, 58, 237, 0.075);
}


.brand-mark img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


.nav-links {
  display: flex;

  align-items: center;

  justify-content: center;

  gap:
    clamp(
      17px,
      2vw,
      28px
    );
}


.nav-link {
  position: relative;

  min-height: 40px;

  display: inline-flex;

  align-items: center;

  padding:
    4px 0;

  color:
    var(--text-soft);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.11em;

  text-transform: uppercase;

  transition:
    color
    0.22s ease;
}


.nav-link::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 4px;

  width: 0;
  height: 2px;

  border-radius: 999px;

  background:
    var(--primary);

  transform:
    translateX(-50%);

  transition:
    width
    0.28s
    var(--ease);
}


.nav-link:hover,
.nav-link.active {
  color:
    var(--primary);
}


.nav-link.active::after {
  width: 100%;
}


.nav-actions {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 7px;
}


/* =========================================================
   09. PAGE THEME CONTROLS
========================================================= */

.page-theme-controls {
  display: inline-flex;

  align-items: center;

  gap: 4px;

  padding: 3px;

  border:
    1px solid
    rgba(99, 14, 212, 0.08);

  border-radius: 13px;

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

  box-shadow:
    0 5px 16px
    rgba(26, 18, 43, 0.025);
}


.theme-btn,
.menu-toggle {
  width: 36px;
  height: 36px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  padding: 0;

  border:
    1px solid
    transparent;

  border-radius: 10px;

  background:
    transparent;

  color:
    var(--text-soft);

  transition:
    transform
    0.25s
    var(--ease),
    color
    0.24s ease,
    background
    0.24s ease,
    border-color
    0.24s ease,
    box-shadow
    0.24s ease;
}


.theme-btn
.material-symbols-outlined,
.menu-toggle
.material-symbols-outlined {
  font-size: 18px;
}


.theme-btn[aria-pressed="true"] {
  border-color:
    rgba(99, 14, 212, 0.11);

  background:
    var(--primary-soft);

  color:
    var(--primary);

  box-shadow:
    0 4px 10px
    rgba(99, 14, 212, 0.055);
}


.theme-btn--celebration {
  position: relative;
}


@media (hover: hover) {

  .theme-btn:hover {
    background:
      rgba(99, 14, 212, 0.055);

    color:
      var(--primary);

    transform:
      translateY(-1px);
  }

}


.menu-toggle {
  display: none;

  border-color:
    rgba(99, 14, 212, 0.10);

  background:
    rgba(255, 255, 255, 0.78);
}


.nav-primary-action {
  min-height: 42px;

  padding-inline:
    17px;
}


.mobile-menu {
  display: none;
}


/* =========================================================
   10. MAIN
========================================================= */

main {
  padding-top:
    var(--header-height);
}


.section-shell {
  padding-block:
    var(--section-space);
}


/* =========================================================
   11. HERO
========================================================= */

.hero {
  min-height:
    calc(
      100svh -
      var(--header-height)
    );

  display: flex;

  align-items: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 13% 20%,
      rgba(124, 58, 237, 0.075),
      transparent 28%
    ),
    radial-gradient(
      circle at 85% 76%,
      rgba(99, 14, 212, 0.035),
      transparent 30%
    ),
    radial-gradient(
      rgba(99, 14, 212, 0.038)
      1px,
      transparent 1px
    ),
    var(--bg);

  background-size:
    auto,
    auto,
    40px 40px,
    auto;
}


.hero-grid {
  position: relative;

  z-index: 3;

  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1.03fr)
    minmax(380px, 0.78fr);

  align-items: center;

  gap:
    clamp(
      60px,
      6vw,
      92px
    );

  padding-block:
    clamp(
      50px,
      6vh,
      74px
    );
}


.hero-copy {
  width:
    min(
      100%,
      670px
    );
}


.hero-kicker {
  width: max-content;

  margin:
    0 0 17px;

  padding:
    6px 10px;

  border-radius: 999px;

  background:
    rgba(99, 14, 212, 0.055);

  color:
    var(--primary);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}


.hero-title {
  max-width: 670px;

  margin: 0;

  font-size:
    clamp(
      42px,
      4.4vw,
      59px
    );

  font-weight: 800;

  line-height: 1.025;

  letter-spacing: -0.052em;
}


.hero-title-line {
  display: block;
}


.hero-title-line +
.hero-title-line {
  margin-top:
    -0.015em;
}


.hero .highlight {
  color:
    var(--primary);
}


.word-reveal {
  display: inline-block;

  opacity: 0;

  filter:
    blur(4px);

  transform:
    translateY(18px);
}


.word-reveal.active {
  animation:
    hero-word
    0.72s
    var(--ease)
    forwards;
}


@keyframes hero-word {

  to {
    opacity: 1;

    filter: none;

    transform: none;
  }

}


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

  margin:
    21px 0 0;

  color:
    var(--text-soft);

  font-size:
    clamp(
      15px,
      1.08vw,
      17px
    );

  line-height: 1.66;
}


.hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 24px;
}


.hero-metrics {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap:
    14px 24px;

  margin-top: 23px;
}


.hero-metric {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color:
    var(--text-soft);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.hero-metric
.material-symbols-outlined {
  color:
    var(--primary);

  font-size: 17px;
}


/* =========================================================
   12. LOGIN
========================================================= */

.login-wrap {
  position: relative;

  width:
    min(
      100%,
      455px
    );

  justify-self:
    end;
}


.login-wrap::before {
  content: "";

  position: absolute;

  inset:
    -6% -7% 7% 14%;

  border-radius: 27px;

  background:
    linear-gradient(
      145deg,
      rgba(124, 58, 237, 0.075),
      transparent
    );

  pointer-events: none;

  transition:
    transform
    0.48s
    var(--ease);
}


.login-card {
  position: relative;

  z-index: 2;

  padding:
    clamp(
      25px,
      2.4vw,
      32px
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.90);

  border-radius: 23px;

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

  color:
    var(--text);

  box-shadow:
    var(--shadow-large);

  backdrop-filter:
    blur(17px);

  -webkit-backdrop-filter:
    blur(17px);

  transition:
    background
    0.3s ease,
    color
    0.3s ease,
    border-color
    0.3s ease,
    box-shadow
    0.4s
    var(--ease);
}


@media (hover: hover) {

  .login-wrap:hover::before {
    transform:
      translate3d(
        7px,
        5px,
        0
      );
  }


  .login-wrap:hover
  .login-card {
    box-shadow:
      8px 31px 64px
      rgba(20, 13, 39, 0.12);
  }

}


.login-icon {
  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  margin-bottom: 15px;

  border-radius: 11px;

  background:
    var(--primary-soft);

  color:
    var(--primary);
}


.login-icon
.material-symbols-outlined {
  font-size: 20px;
}


.login-card h2 {
  margin:
    0 0 8px;

  color:
    var(--text);

  font-size:
    clamp(
      21px,
      1.65vw,
      25px
    );

  font-weight: 800;

  line-height: 1.09;

  letter-spacing: -0.035em;
}


.login-card h2 span {
  display: block;
}


.login-description {
  margin:
    0 0 20px;

  color:
    var(--text-soft);

  font-size: 12px;

  line-height: 1.52;
}


/* =========================================================
   13. FLOATING FIELDS
========================================================= */

.input-group {
  position: relative;

  width: 100%;

  margin-top: 21px;
}


.input-group:first-child {
  margin-top: 0;
}


.input-group input,
.input-group textarea {
  width: 100%;

  min-width: 0;

  border:
    1px solid
    rgba(69, 58, 89, 0.16);

  border-radius: 12px;

  background:
    rgba(250, 248, 253, 0.94);

  color:
    var(--text);

  font-size: 14px;

  line-height: 1.45;

  outline: 0;

  box-shadow:
    inset
    0 1px 0
    rgba(255, 255, 255, 0.55);

  transition:
    border-color
    0.28s ease,
    background
    0.28s ease,
    color
    0.28s ease,
    box-shadow
    0.28s ease;
}


.input-group input {
  height: 54px;

  padding:
    0 16px;
}


.input-group textarea {
  min-height: 122px;

  padding:
    17px 16px;

  resize: vertical;
}


.input-group input::placeholder,
.input-group textarea::placeholder {
  color:
    #777080;

  opacity: 1;

  transition:
    opacity
    0.18s ease,
    transform
    0.24s
    var(--ease);
}


.input-group input:focus::placeholder,
.input-group textarea:focus::placeholder,
.input-group.is-focused input::placeholder,
.input-group.is-focused textarea::placeholder {
  opacity: 0;

  transform:
    translateX(5px);
}


.input-group label {
  position: absolute;

  left: 12px;
  top: 0;

  z-index: 5;

  display: inline-flex;

  align-items: center;

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

  padding:
    0 6px;

  overflow: hidden;

  background:
    #ffffff;

  color:
    var(--primary);

  font-size: 10px;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.035em;

  text-overflow: ellipsis;

  white-space: nowrap;

  pointer-events: none;

  opacity: 0;

  transform:
    translateY(3px)
    scale(0.96);

  transform-origin:
    left center;

  transition:
    opacity
    0.18s ease,
    transform
    0.3s
    var(--ease),
    color
    0.24s ease,
    background
    0.24s ease;
}


.input-group:focus-within label,
.input-group.is-focused label,
.input-group.is-filled label,
.input-group.is-valid label,
.input-group.is-invalid label {
  opacity: 1;

  transform:
    translateY(-50%)
    scale(1);
}


.input-group:focus-within input,
.input-group:focus-within textarea,
.input-group.is-focused input,
.input-group.is-focused textarea {
  border-color:
    rgba(99, 14, 212, 0.58);

  background:
    #ffffff;

  box-shadow:
    0 0 0 3px
    rgba(99, 14, 212, 0.055);
}


.input-group.is-valid input,
.input-group.is-valid textarea {
  border-color:
    rgba(22, 134, 111, 0.45);
}


.input-group.is-valid label {
  color:
    var(--success);
}


.input-group.is-invalid input,
.input-group.is-invalid textarea {
  border-color:
    rgba(195, 63, 85, 0.54);

  box-shadow:
    0 0 0 3px
    rgba(195, 63, 85, 0.045);
}


.input-group.is-invalid label {
  color:
    var(--danger);
}


.field-message {
  min-height: 15px;

  display: block;

  margin:
    6px 4px 0;

  color:
    var(--danger);

  font-size: 10.5px;

  font-weight: 500;

  line-height: 1.4;

  opacity: 0;

  transform:
    translateY(-3px);

  transition:
    opacity
    0.2s ease,
    transform
    0.2s
    var(--ease);
}


.input-group.is-invalid
.field-message {
  opacity: 1;

  transform: none;
}


/* =========================================================
   14. LOGIN STATES + OTP
========================================================= */

.login-button {
  width: 100%;

  margin-top: 18px;
}


.login-button.is-loading
.material-symbols-outlined {
  animation:
    login-loading
    0.9s
    linear
    infinite;
}


@keyframes login-loading {

  to {
    transform:
      rotate(360deg);
  }

}


.login-button.is-success {
  border-color:
    var(--success);

  background:
    var(--success);
}


.login-status {
  max-height: 0;

  margin: 0;

  overflow: hidden;

  opacity: 0;

  color:
    var(--primary);

  font-size: 11px;

  font-weight: 700;

  transition:
    max-height
    0.35s
    var(--ease),
    opacity
    0.25s ease,
    margin
    0.25s ease;
}


.login-status.show {
  max-height: 60px;

  margin-bottom: 15px;

  opacity: 1;
}


.credential-fields {
  transition:
    opacity
    0.3s ease,
    transform
    0.34s
    var(--ease);
}


.credential-fields.compact {
  opacity: 0.76;

  transform:
    translateY(-2px);
}


.otp-area {
  display: grid;

  grid-template-rows:
    0fr;

  opacity: 0;

  transition:
    grid-template-rows
    0.4s
    var(--ease),
    opacity
    0.25s ease;
}


.otp-area.active {
  grid-template-rows:
    1fr;

  opacity: 1;
}


.otp-inner {
  overflow: hidden;

  padding-top: 13px;
}


.otp-label {
  display: block;

  color:
    var(--text-soft);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.otp-inputs {
  display: grid;

  grid-template-columns:
    repeat(
      6,
      minmax(0, 1fr)
    );

  gap: 7px;

  margin-top: 9px;
}


.otp-input {
  width: 100%;
  height: 43px;

  padding: 0;

  border:
    1px solid
    rgba(99, 14, 212, 0.14);

  border-radius: 9px;

  background:
    var(--bg-soft);

  color:
    var(--text);

  text-align: center;

  font-size: 15px;

  font-weight: 700;

  opacity: 0;

  outline: 0;

  transform:
    translateY(6px);

  transition:
    opacity
    0.26s ease,
    transform
    0.3s
    var(--ease),
    border-color
    0.2s ease,
    background
    0.2s ease,
    box-shadow
    0.2s ease;
}


.otp-input.show {
  opacity: 1;

  transform: none;
}


.otp-input:focus {
  border-color:
    var(--primary);

  background:
    #ffffff;

  box-shadow:
    0 0 0 3px
    rgba(99, 14, 212, 0.07);
}


/* =========================================================
   15. IDENTIDAD ARBORTIC
========================================================= */

.capabilities {
  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fdfbff 100%
    );
}


.capabilities::before {
  content: "";

  position: absolute;

  top: 17%;
  right: -160px;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(124, 58, 237, 0.045),
      transparent 67%
    );

  pointer-events: none;
}


.cap-identity-head {
  width:
    min(
      100%,
      720px
    );

  margin-bottom:
    clamp(
      34px,
      4vw,
      48px
    );
}


.cap-identity-head h2 {
  max-width: 670px;

  margin:
    11px 0 15px;

  font-size:
    clamp(
      34px,
      3vw,
      44px
    );

  font-weight: 800;

  line-height: 1.06;

  letter-spacing: -0.045em;
}


.cap-identity-head h2 span {
  display: block;

  color:
    var(--primary);
}


.cap-identity-head > p {
  max-width: 650px;

  margin: 0;

  color:
    var(--text-soft);

  font-size:
    clamp(
      14.5px,
      1.03vw,
      16px
    );

  line-height: 1.64;
}


.cap-identity-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.42fr)
    minmax(320px, 0.90fr);

  gap:
    clamp(
      18px,
      1.8vw,
      24px
    );

  align-items: stretch;
}


.identity-card-stack {
  display: grid;

  grid-template-rows:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    clamp(
      18px,
      1.8vw,
      24px
    );
}


.identity-card {
  position: relative;

  isolation: isolate;

  overflow: hidden;

  border:
    1px solid
    rgba(99, 14, 212, 0.09);

  border-radius: 18px;

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

  box-shadow:
    0 12px 32px
    rgba(28, 18, 47, 0.05);

  transition:
    transform
    0.34s
    var(--ease),
    border-color
    0.3s ease,
    background
    0.3s ease,
    box-shadow
    0.3s ease;
}


.identity-card-index {
  position: absolute;

  top: 18px;
  right: 20px;

  color:
    rgba(99, 14, 212, 0.10);

  font-family:
    var(--font-display);

  font-size: 20px;

  font-weight: 800;
}


.identity-card-icon {
  width: 47px;
  height: 47px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  border:
    1px solid
    rgba(99, 14, 212, 0.06);

  border-radius: 12px;

  background:
    var(--primary-soft);

  color:
    var(--primary);

  box-shadow:
    0 8px 18px
    rgba(99, 14, 212, 0.055);

  transition:
    transform
    0.34s
    var(--ease),
    background
    0.28s ease,
    color
    0.28s ease;
}


.identity-card-icon
.material-symbols-outlined {
  font-size: 22px;
}


.identity-card-heading {
  display: grid;

  gap: 3px;

  min-width: 0;

  margin-left: 3px;
}


.identity-card-label,
.identity-card-kicker {
  color:
    var(--primary);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.identity-card-meta {
  color:
    var(--text-muted);

  font-size: 9px;

  line-height: 1.3;
}


.identity-card-content h3 {
  margin:
    0 0 10px;

  font-weight: 800;

  line-height: 1.12;

  letter-spacing: -0.035em;
}


.identity-card-content p {
  margin: 0;

  line-height: 1.62;
}


/* ---------------------------------------------------------
   ABOUT
--------------------------------------------------------- */

.identity-card--about {
  min-height: 444px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding:
    clamp(
      32px,
      3vw,
      42px
    );

  border-color:
    rgba(255, 255, 255, 0.055);

  background:
    linear-gradient(
      145deg,
      #080d24 0%,
      #10162e 58%,
      #161834 100%
    );

  color:
    #ffffff;

  box-shadow:
    0 24px 54px
    rgba(8, 13, 36, 0.17);
}


.identity-card--about::before {
  content: "";

  position: absolute;

  right: -115px;
  bottom: -130px;

  z-index: -2;

  width: 330px;
  height: 330px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(124, 58, 237, 0.20),
      rgba(124, 58, 237, 0.07) 40%,
      transparent 70%
    );
}


.identity-card-top,
.identity-card-row {
  display: flex;

  align-items: center;

  gap: 18px;
}


.identity-card--about
.identity-card-label,
.identity-card--about
.identity-card-kicker {
  color:
    var(--primary-fixed);
}


.identity-card--about
.identity-card-meta {
  color:
    rgba(255, 255, 255, 0.42);
}


.identity-card--about
.identity-card-icon {
  border-color:
    rgba(255, 255, 255, 0.09);

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

  color:
    var(--primary-fixed);
}


.identity-card--about
.identity-card-content {
  max-width: 600px;

  margin-top:
    clamp(
      45px,
      5vw,
      72px
    );
}


.identity-card--about
.identity-card-content h3 {
  max-width: 580px;

  color:
    #ffffff;

  font-size:
    clamp(
      28px,
      2.55vw,
      37px
    );
}


.identity-card--about
.identity-card-content p {
  max-width: 565px;

  color:
    rgba(255, 255, 255, 0.66);

  font-size:
    clamp(
      13px,
      1vw,
      15px
    );
}


.identity-card-orbit {
  position: absolute;

  top: 31px;
  right: 76px;

  width: 150px;
  height: 80px;

  opacity: 0.62;

  pointer-events: none;
}


.identity-card-orbit-line {
  position: absolute;

  top: 34px;
  left: 0;

  width: 104px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(210, 187, 255, 0.34),
      rgba(210, 187, 255, 0.08)
    );
}


.identity-card-orbit-line::after {
  content: "";

  position: absolute;

  top: 0;
  right: -23px;

  width: 48px;
  height: 1px;

  background:
    rgba(210, 187, 255, 0.17);

  transform:
    rotate(-42deg);

  transform-origin:
    left center;
}


.identity-card-orbit-node {
  position: absolute;

  top: 30px;
  left: 59px;

  width: 8px;
  height: 8px;

  border:
    2px solid
    rgba(210, 187, 255, 0.50);

  border-radius: 50%;

  background:
    var(--navy);
}


.identity-card-orbit-node--second {
  top: 7px;
  left: 118px;

  width: 6px;
  height: 6px;
}


.identity-signature {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 32px;

  color:
    rgba(255, 255, 255, 0.42);

  font-size: 8.5px;

  font-weight: 700;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.identity-signature i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    rgba(210, 187, 255, 0.42);
}


.identity-signature strong {
  color:
    var(--primary-fixed);
}


/* ---------------------------------------------------------
   MISSION / VISION
--------------------------------------------------------- */

.identity-card--mission,
.identity-card--vision {
  min-height: 210px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding:
    25px 26px;
}


.identity-card--mission {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fdfaff
    );
}


.identity-card--vision {
  background:
    linear-gradient(
      145deg,
      #fbf8ff,
      #f6f0ff
    );
}


.identity-card--mission
.identity-card-content,
.identity-card--vision
.identity-card-content {
  max-width: 440px;

  padding-right: 38px;
}


.identity-card--mission
.identity-card-content h3,
.identity-card--vision
.identity-card-content h3 {
  font-size:
    clamp(
      17px,
      1.45vw,
      21px
    );
}


.identity-card--mission
.identity-card-content p,
.identity-card--vision
.identity-card-content p {
  max-width: 390px;

  color:
    var(--text-soft);

  font-size: 12px;
}


.identity-floating-detail {
  position: absolute;

  right: 17px;
  bottom: 16px;

  padding:
    5px 8px;

  border:
    1px solid
    rgba(99, 14, 212, 0.08);

  border-radius: 7px;

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

  color:
    rgba(99, 14, 212, 0.52);

  font-size: 7.5px;

  font-weight: 700;

  letter-spacing: 0.09em;

  text-transform: uppercase;

  box-shadow:
    0 8px 18px
    rgba(28, 18, 47, 0.035);

  transform:
    rotate(-2deg);
}


.identity-card--vision
.identity-floating-detail {
  transform:
    rotate(2deg);
}


@media (hover: hover) {

  .identity-card:hover {
    transform:
      translateY(-4px);

    border-color:
      rgba(99, 14, 212, 0.17);

    box-shadow:
      0 18px 42px
      rgba(99, 14, 212, 0.08);
  }


  .identity-card:hover
  .identity-card-icon {
    transform:
      translateY(-3px)
      rotate(-3deg);
  }

}


/* =========================================================
   16. SINERGIA ESTRUCTURAL
========================================================= */

.cms {
  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      var(--bg),
      #faf7ff
    );
}


.ecosystem {
  padding-block:
    clamp(
      72px,
      7vw,
      88px
    );
}


.ecosystem-head {
  width:
    min(
      100%,
      730px
    );

  margin:
    0 auto 38px;

  text-align: center;
}


.ecosystem-head
.eyebrow {
  justify-content: center;
}


.ecosystem-head h2 {
  margin:
    10px auto 12px;

  font-size:
    clamp(
      33px,
      3vw,
      43px
    );

  font-weight: 800;

  line-height: 1.06;

  letter-spacing: -0.045em;
}


.ecosystem-head h2 span {
  color:
    var(--primary);
}


.ecosystem-head p {
  max-width: 650px;

  margin:
    0 auto;

  color:
    var(--text-soft);

  font-size:
    clamp(
      14px,
      1vw,
      15.5px
    );

  line-height: 1.6;
}


.ecosystem-board {
  position: relative;

  width:
    min(
      100%,
      1090px
    );

  height: 405px;

  margin-inline:
    auto;
}


/* =========================================================
   CONTENIDO -> CONECTAR
   SOLUCIÓN ESTRUCTURAL FINAL
========================================================= */

.ecosystem-content-connect-line {
  position: absolute;

  /*
   * Las columnas miden 238px.
   * El punto está 4px fuera de la card.
   *
   * Empieza y termina exactamente
   * donde se encuentran los nodos centrales.
   */

  left:
    238px;

  right:
    238px;

  top:
    50%;

  z-index: 2;

  height: 1.5px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(124, 58, 237, 0.32),
      rgba(99, 14, 212, 0.72) 35%,
      rgba(99, 14, 212, 0.72) 65%,
      rgba(124, 58, 237, 0.32)
    );

  transform:
    translateY(-50%);

  transform-origin:
    center;

  box-shadow:
    0 0 8px
    rgba(99, 14, 212, 0.035);
}


/*
 * Terminal dots belonging to the direct route
 * stay visually above the line.
 */

[data-eco-route="content-connect"]
.eco-terminal-node {
  z-index: 8;
}


/* =========================================================
   SVG ROUTES
========================================================= */

.ecosystem-circuit {
  position: absolute;

  inset: 0;

  z-index: 1;

  width: 100%;
  height: 100%;

  overflow: visible;

  pointer-events: none;
}


#eco-paths-base path {
  fill: none;

  stroke:
    url(#eco-line-gradient);

  stroke-width: 1.45;

  stroke-linecap: round;

  stroke-linejoin: round;

  opacity: 0.68;

  vector-effect:
    non-scaling-stroke;
}


/*
 * La base de content-connect ya NO se dibuja
 * aquí. Esta capa queda disponible únicamente
 * para un posible overlay activo.
 */

#eco-path-content-connect path {
  fill: none;

  stroke:
    url(#eco-active-gradient);

  stroke-width: 2;

  stroke-linecap: round;

  opacity: 0;

  vector-effect:
    non-scaling-stroke;
}


#eco-paths-active path {
  fill: none;

  stroke:
    url(#eco-active-gradient);

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

  opacity: 0;

  vector-effect:
    non-scaling-stroke;

  transition:
    opacity
    0.22s ease;
}


#eco-paths-active
path.is-active {
  opacity: 1;
}


#eco-path-nodes circle {
  fill:
    #ffffff;

  stroke:
    rgba(124, 58, 237, 0.40);

  stroke-width: 2;
}


/* =========================================================
   ECOSYSTEM COLUMNS
========================================================= */

.ecosystem-column {
  position: absolute;

  top: 50%;

  z-index: 3;

  width: 238px;

  display: grid;

  gap: 15px;

  transform:
    translateY(-50%);
}


.ecosystem-column--inputs {
  left: 0;
}


.ecosystem-column--outputs {
  right: 0;
}


.eco-terminal {
  position: relative;

  min-height: 88px;

  display: grid;

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

  align-items: center;

  gap: 11px;

  padding: 14px;

  border:
    1px solid
    rgba(99, 14, 212, 0.10);

  border-radius: 17px;

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

  box-shadow:
    0 12px 32px
    rgba(28, 18, 47, 0.05);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  outline: none;

  transition:
    transform
    0.28s
    var(--ease),
    border-color
    0.26s ease,
    background
    0.26s ease,
    color
    0.26s ease,
    box-shadow
    0.26s ease,
    opacity
    0.26s ease;
}


.eco-terminal-icon {
  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  border-radius: 11px;

  background:
    var(--primary-soft);

  color:
    var(--primary);

  transition:
    transform
    0.28s
    var(--ease),
    background
    0.26s ease,
    color
    0.26s ease;
}


.eco-terminal-icon
.material-symbols-outlined {
  font-size: 19px;
}


.eco-terminal-copy {
  min-width: 0;
}


.eco-terminal-label {
  display: block;

  margin-bottom: 3px;

  color:
    var(--text);

  font-family:
    var(--font-display);

  font-size: 12px;

  font-weight: 800;
}


.eco-terminal-copy strong {
  display: block;

  overflow: hidden;

  color:
    var(--text-soft);

  font-size: 9.5px;

  font-weight: 500;

  line-height: 1.35;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.eco-terminal-badge {
  position: absolute;

  top: 8px;
  right: 9px;

  z-index: 2;

  padding:
    4px 6px;

  border:
    1px solid
    rgba(99, 14, 212, 0.08);

  border-radius: 7px;

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

  color:
    rgba(99, 14, 212, 0.60);

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.eco-terminal-node {
  position: absolute;

  top: 50%;

  z-index: 6;

  width: 8px;
  height: 8px;

  border:
    2px solid
    rgba(124, 58, 237, 0.40);

  border-radius: 50%;

  background:
    #ffffff;

  transform:
    translateY(-50%);

  transition:
    background
    0.2s ease,
    border-color
    0.2s ease,
    box-shadow
    0.2s ease;
}


.eco-terminal--input
.eco-terminal-node {
  right: -5px;
}


.eco-terminal--output
.eco-terminal-node {
  left: -5px;
}


.eco-terminal:focus-visible,
.eco-terminal.is-active {
  border-color:
    rgba(99, 14, 212, 0.28);

  background:
    #ffffff;

  box-shadow:
    0 18px 42px
    rgba(99, 14, 212, 0.08);
}


.eco-terminal.is-active
.eco-terminal-node {
  border-color:
    var(--primary);

  background:
    var(--primary);

  box-shadow:
    0 0 0 4px
    rgba(99, 14, 212, 0.08);
}


.eco-terminal.is-active
.eco-terminal-icon {
  background:
    var(--primary);

  color:
    #ffffff;
}


.eco-terminal.is-dimmed {
  opacity: 0.48;
}


@media (hover: hover) {

  .eco-terminal:hover {
    transform:
      translateY(-3px);

    border-color:
      rgba(99, 14, 212, 0.18);

    box-shadow:
      0 18px 42px
      rgba(99, 14, 212, 0.08);
  }


  .eco-terminal:hover
  .eco-terminal-icon {
    transform:
      translateY(-2px)
      rotate(-3deg);
  }

}


/* =========================================================
   ECOSYSTEM CORE
========================================================= */

.ecosystem-core-wrap {
  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 5;

  width: 250px;
  height: 238px;

  display: grid;

  place-items: center;

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


.ecosystem-core {
  position: relative;

  z-index: 7;

  width: 192px;
  height: 158px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding:
    22px 20px;

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius:
    36px 22px 38px 20px;

  background:
    linear-gradient(
      145deg,
      #080d24,
      #10162e 58%,
      #151832
    );

  color:
    #ffffff;

  text-align: center;

  box-shadow:
    0 24px 54px
    rgba(8, 13, 36, 0.17);
}


.ecosystem-core-mark {
  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  margin-bottom: 10px;

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius: 12px;

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

  color:
    var(--primary-fixed);
}


.ecosystem-core-mark
.material-symbols-outlined {
  font-size: 21px;
}


.ecosystem-core-brand strong {
  display: block;

  color:
    #ffffff;

  font-size: 17px;

  font-weight: 800;
}


.ecosystem-core-brand strong span {
  color:
    var(--primary-fixed);
}


.ecosystem-core-brand > span {
  display: block;

  margin-top: 2px;

  color:
    rgba(255, 255, 255, 0.55);

  font-size: 8px;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.ecosystem-core small {
  max-width: 140px;

  display: block;

  margin-top: 10px;

  color:
    rgba(255, 255, 255, 0.48);

  font-size: 8px;

  line-height: 1.35;
}


.ecosystem-core-structure {
  position: absolute;

  z-index: 4;

  pointer-events: none;
}


.ecosystem-core-structure--one {
  width: 222px;
  height: 192px;

  border-top:
    1px solid
    rgba(124, 58, 237, 0.23);

  border-right:
    1px solid
    rgba(124, 58, 237, 0.12);

  border-bottom:
    1px solid
    rgba(124, 58, 237, 0.17);

  border-radius:
    48px 22px 54px 30px;

  transform:
    rotate(-5deg);
}


.ecosystem-core-structure--two {
  width: 236px;
  height: 205px;

  border-left:
    1px solid
    rgba(99, 14, 212, 0.10);

  border-top:
    1px solid
    rgba(99, 14, 212, 0.14);

  border-radius:
    35px 52px 31px 42px;

  transform:
    rotate(7deg);
}


.ecosystem-core-caption {
  position: absolute;

  z-index: 8;

  padding:
    4px 6px;

  border-radius: 6px;

  background:
    rgba(251, 248, 255, 0.94);

  color:
    rgba(99, 14, 212, 0.55);

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.ecosystem-core-caption--top {
  top: 13px;
  left: 27px;
}


.ecosystem-core-caption--bottom {
  right: 20px;
  bottom: 15px;
}


.ecosystem-flow {
  width:
    min(
      100%,
      720px
    );

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 8px;

  margin:
    26px auto 0;

  color:
    var(--text-muted);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}


.ecosystem-flow i {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    rgba(99, 14, 212, 0.22);
}


.ecosystem-flow strong,
.ecosystem-flow-icon {
  color:
    var(--primary);
}


/* =========================================================
   17. PROCESS
========================================================= */

.process {
  overflow: hidden;

  padding:
    clamp(
      70px,
      6vw,
      88px
    )
    0
    clamp(
      64px,
      5.8vw,
      80px
    );

  background:
    radial-gradient(
      rgba(74, 68, 85, 0.025)
      1px,
      transparent 1px
    ),
    var(--bg);

  background-size:
    24px 24px,
    auto;
}


.process-container {
  display: flex;

  flex-direction: column;
}


.process-timeline {
  position: relative;

  width:
    min(
      100%,
      1200px
    );

  height: 365px;

  margin-inline: auto;
}


.process-axis {
  position: absolute;

  left: 7.5%;
  right: 7.5%;

  top: 50%;

  z-index: 1;

  height: 2px;

  overflow: hidden;

  transform:
    translateY(-50%);
}


.process-axis-base {
  position: absolute;

  inset: 0;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(148, 163, 184, 0.38)
      0 5px,
      transparent
      5px 11px
    );
}


.process-axis-progress {
  position: absolute;

  inset:
    0 auto 0 -24%;

  width: 24%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(124, 58, 237, 0.8),
      transparent
    );

  animation:
    process-flow
    10s
    linear
    infinite;
}


@keyframes process-flow {

  to {
    transform:
      translateX(520%);
  }

}


.process-steps {
  position: relative;

  z-index: 2;

  width: 100%;
  height: 100%;

  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  margin: 0;

  padding: 0;

  list-style: none;
}


.process-step {
  --stage-color:
    var(--primary);

  position: relative;

  height: 100%;

  display: flex;

  justify-content: center;
}


.process-step[data-stage="1"] {
  --stage-color:
    var(--stage-1);
}


.process-step[data-stage="2"] {
  --stage-color:
    var(--stage-2);
}


.process-step[data-stage="3"] {
  --stage-color:
    var(--stage-3);
}


.process-step[data-stage="4"] {
  --stage-color:
    var(--stage-4);
}


.process-step[data-stage="5"] {
  --stage-color:
    var(--stage-5);
}


.process-card {
  position: absolute;

  width:
    min(
      176px,
      calc(
        100% -
        18px
      )
    );

  min-height: 122px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 15px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--stage-color)
      19%,
      transparent
    );

  border-radius: 15px;

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

  color:
    var(--text);

  text-align: center;

  box-shadow:
    0 7px 17px
    rgba(23, 27, 45, 0.03);

  transition:
    transform
    0.28s
    var(--ease),
    background
    0.3s ease,
    color
    0.3s ease,
    border-color
    0.3s ease,
    box-shadow
    0.3s ease;
}


.process-step--top
.process-card {
  top: 0;
}


.process-step--bottom
.process-card {
  bottom: 0;
}


.process-icon {
  width: 37px;
  height: 37px;

  display: grid;

  place-items: center;

  margin-bottom: 6px;

  color:
    var(--stage-color);
}


.process-icon
.material-symbols-outlined {
  font-size: 22px;
}


.process-card h3 {
  margin:
    0 0 5px;

  color:
    var(--text);

  font-size: 11.5px;

  font-weight: 800;

  text-transform: uppercase;
}


.process-card p {
  max-width: 148px;

  margin: 0;

  color:
    var(--text-soft);

  font-size: 10px;

  line-height: 1.42;
}


.process-step--featured
.process-card {
  border:
    2px solid
    rgba(124, 58, 237, 0.43);
}


.process-step--featured
.process-icon {
  width: 44px;
  height: 44px;

  margin-bottom: 7px;

  border-radius: 50%;

  background:
    var(--stage-3);

  color:
    #ffffff;
}


.process-connector {
  position: absolute;

  left: 50%;

  z-index: 1;

  width: 1px;

  transform:
    translateX(-50%);

  background:
    repeating-linear-gradient(
      to bottom,
      color-mix(
        in srgb,
        var(--stage-color)
        31%,
        transparent
      )
      0 4px,
      transparent
      4px 8px
    );
}


.process-step--top
.process-connector {
  top: 122px;

  height:
    calc(
      50% -
      122px
    );
}


.process-step--bottom
.process-connector {
  top: 50%;

  height:
    calc(
      50% -
      122px
    );
}


.process-node {
  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 5;

  width: 29px;
  height: 29px;

  display: grid;

  place-items: center;

  border:
    2px solid
    var(--stage-color);

  border-radius: 50%;

  background:
    var(--bg);

  color:
    var(--stage-color);

  box-shadow:
    0 0 0 5px
    var(--bg);

  font-size: 8.5px;

  font-weight: 700;

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


.process-step--featured
.process-node {
  width: 40px;
  height: 40px;

  background:
    var(--stage-3);

  color:
    #ffffff;
}


.process-continuity {
  position: absolute;

  right: 0;

  top:
    calc(
      50% +
      39px
    );

  display: inline-flex;

  align-items: center;

  gap: 5px;

  color:
    var(--stage-5);

  font-size: 9px;

  font-weight: 700;
}


/* =========================================================
   18. AGILE
========================================================= */

.agile-wrap {
  display: flex;

  flex-direction: column;

  align-items: center;

  margin-top: 13px;
}


.agile-card {
  width:
    min(
      100%,
      590px
    );

  min-height: 47px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  padding:
    8px 17px;

  border:
    1px solid
    rgba(74, 68, 85, 0.075);

  border-radius: 13px;

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

  box-shadow:
    0 6px 19px
    rgba(26, 18, 43, 0.032);

  transition:
    background
    0.3s ease,
    border-color
    0.3s ease,
    color
    0.3s ease;
}


.agile-title {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  color:
    var(--stage-3);

  font-size: 10px;

  font-weight: 700;

  text-transform: uppercase;
}


.agile-separator {
  width: 1px;
  height: 18px;

  background:
    rgba(74, 68, 85, 0.14);
}


.agile-flow {
  display: flex;

  align-items: center;

  gap: 7px;

  color:
    var(--text);

  font-size: 10px;
}


.agile-step {
  display: inline-flex;

  align-items: center;

  gap: 5px;
}


.agile-dot {
  width: 5px;
  height: 5px;

  border-radius: 50%;
}


.agile-dot.stage-1 {
  background:
    var(--stage-1);
}


.agile-dot.stage-2 {
  background:
    var(--stage-2);
}


.agile-dot.stage-4 {
  background:
    var(--stage-4);
}


.agile-dot.stage-5 {
  background:
    var(--stage-5);
}


.agile-note {
  margin:
    7px 0 0;

  color:
    var(--text-muted);

  font-size: 8px;
}


/* =========================================================
   19. RESPONSIVE SHOWCASE
========================================================= */

.responsive-showcase {
  overflow: hidden;

  padding:
    clamp(
      72px,
      7vw,
      96px
    )
    0;

  background:
    radial-gradient(
      circle at 78% 48%,
      rgba(124, 58, 237, 0.06),
      transparent 30%
    ),
    var(--bg);
}


.responsive-grid {
  display: grid;

  grid-template-columns:
    minmax(320px, 0.82fr)
    minmax(0, 1.18fr);

  align-items: center;

  gap:
    clamp(
      62px,
      6.5vw,
      92px
    );
}


.responsive-copy {
  max-width: 470px;
}


.responsive-copy h2,
.contact-copy h2 {
  margin:
    11px 0 15px;

  font-size:
    clamp(
      31px,
      2.7vw,
      40px
    );

  font-weight: 800;

  line-height: 1.075;

  letter-spacing: -0.043em;
}


.responsive-copy h2 span,
.contact-copy h2 span {
  display: block;

  color:
    var(--primary);
}


.responsive-copy > p,
.contact-copy > p {
  margin-bottom: 0;

  color:
    var(--text-soft);

  font-size:
    clamp(
      14.5px,
      1.03vw,
      16px
    );

  line-height: 1.64;
}


.device-selector {
  display: inline-grid;

  grid-template-columns:
    repeat(
      3,
      auto
    );

  gap: 4px;

  margin-top: 22px;

  padding: 4px;

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

  border-radius: 13px;

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

  box-shadow:
    var(--shadow-soft);

  transition:
    background
    0.3s ease,
    border-color
    0.3s ease;
}


.device-selector-btn {
  min-height: 41px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  padding:
    7px 12px;

  border: 0;

  border-radius: 9px;

  background:
    transparent;

  color:
    var(--text-soft);

  font-size: 11px;

  font-weight: 500;
}


.device-selector-btn.active {
  background:
    var(--primary);

  color:
    #ffffff;

  font-weight: 700;
}


.responsive-features {
  display: grid;

  gap: 9px;

  margin:
    20px 0 0;

  padding: 0;

  list-style: none;
}


.responsive-features li {
  display: grid;

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

  align-items: start;

  gap: 8px;

  color:
    var(--text-soft);

  font-size: 12px;
}


.responsive-features
.material-symbols-outlined {
  color:
    var(--primary);

  font-size: 16px;
}


.responsive-stage {
  position: relative;

  width: 100%;
  height: 450px;

  display: grid;

  place-items: center;
}


.responsive-device {
  position: relative;

  width: 100%;
  height: 100%;

  display: grid;

  place-items: center;
}


.responsive-device-frame {
  position: relative;

  width:
    min(
      100%,
      620px
    );

  height: 350px;

  overflow: hidden;

  border:
    1px solid
    rgba(99, 14, 212, 0.12);

  border-radius: 22px;

  background:
    #ffffff;

  box-shadow:
    0 23px 54px
    rgba(26, 18, 45, 0.095);

  transition:
    width
    0.48s
    var(--ease),
    height
    0.48s
    var(--ease),
    border-radius
    0.48s
    var(--ease),
    background
    0.3s ease,
    border-color
    0.3s ease;
}


.responsive-device[data-device="tablet"]
.responsive-device-frame {
  width: 420px;
  height: 375px;
}


.responsive-device[data-device="mobile"]
.responsive-device-frame {
  width: 260px;
  height: 408px;

  border-radius: 26px;
}


.responsive-demo-header {
  height: 52px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  padding:
    0 17px;

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

  background:
    rgba(251, 248, 255, 0.87);

  transition:
    background
    0.3s ease;
}


.responsive-demo-brand {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color:
    var(--text);

  font-size: 10px;
}


.responsive-demo-brand-icon {
  width: 21px;
  height: 21px;

  border-radius: 6px;

  background:
    var(--primary-soft);
}


.responsive-demo-nav {
  display: flex;

  gap: 8px;
}


.responsive-demo-nav i {
  width: 30px;
  height: 5px;

  border-radius: 999px;

  background:
    rgba(93, 87, 105, 0.17);
}


.responsive-demo-menu {
  display: none;
}


.responsive-demo-body {
  height:
    calc(
      100% -
      52px
    );

  display: grid;

  grid-template-columns:
    1.05fr
    0.95fr;

  align-items: center;

  gap: 25px;

  padding: 28px;
}


.responsive-demo-kicker {
  width: 78px;
  height: 6px;

  display: block;

  margin-bottom: 16px;

  border-radius: 999px;

  background:
    rgba(99, 14, 212, 0.24);
}


.responsive-demo-title {
  display: grid;

  gap: 7px;
}


.responsive-demo-title i {
  height: 16px;

  border-radius: 5px;

  background:
    var(--navy);
}


.responsive-demo-title i:last-child {
  width: 72%;

  background:
    var(--primary);
}


.responsive-demo-lines {
  display: grid;

  gap: 6px;

  margin-top: 16px;
}


.responsive-demo-lines i,
.responsive-demo-card > i {
  height: 6px;

  border-radius: 999px;

  background:
    rgba(93, 87, 105, 0.15);
}


.responsive-demo-button,
.responsive-demo-card-button {
  display: block;

  border-radius: 8px;

  background:
    var(--navy);
}


.responsive-demo-button {
  width: 96px;
  height: 28px;

  margin-top: 18px;
}


.responsive-demo-card {
  min-height: 195px;

  padding: 20px;

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

  border-radius: 18px;

  background:
    var(--surface-soft);

  box-shadow:
    var(--shadow-soft);

  transition:
    background
    0.3s ease,
    border-color
    0.3s ease;
}


.responsive-demo-card-icon {
  width: 34px;
  height: 34px;

  display: block;

  margin-bottom: 17px;

  border-radius: 10px;

  background:
    var(--primary-soft);
}


.responsive-demo-card > i {
  display: block;

  margin-top: 7px;
}


.responsive-demo-card-button {
  height: 26px;

  margin-top: 24px;
}


.responsive-status {
  position: absolute;

  right: 7%;
  bottom: 4px;

  max-width: 215px;

  display: flex;

  align-items: center;

  gap: 8px;

  padding:
    8px 10px;

  border:
    1px solid
    rgba(99, 14, 212, 0.09);

  border-radius: 10px;

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

  color:
    var(--text);

  box-shadow:
    var(--shadow-soft);

  transition:
    background
    0.3s ease,
    color
    0.3s ease;
}


.responsive-status
.material-symbols-outlined {
  color:
    var(--primary);

  font-size: 16px;
}


.responsive-status strong,
.responsive-status span {
  display: block;
}


.responsive-status strong {
  font-size: 9px;
}


.responsive-status div span {
  color:
    var(--text-muted);

  font-size: 8px;
}


/* =========================================================
   20. ACCESSIBILITY
   NORMAL = BASE
========================================================= */

.accessibility {
  --acc-bg: #111427;

  --acc-text: #ffffff;

  --acc-text-soft:
    rgba(255, 255, 255, 0.72);

  --acc-text-muted:
    rgba(255, 255, 255, 0.56);

  --acc-accent:
    #d2bbff;

  --acc-panel:
    rgba(255, 255, 255, 0.055);

  --acc-panel-border:
    rgba(255, 255, 255, 0.11);

  --acc-line:
    rgba(255, 255, 255, 0.11);

  --acc-ring:
    rgba(210, 187, 255, 0.22);

  --acc-center:
    rgba(255, 255, 255, 0.07);

  --acc-center-border:
    rgba(255, 255, 255, 0.13);

  width:
    calc(
      100% -
      clamp(
        40px,
        5vw,
        82px
      )
    );

  max-width: 1480px;

  display: flex;

  align-items: center;

  margin:
    clamp(
      32px,
      4vw,
      54px
    )
    auto;

  overflow: hidden;

  border-radius:
    clamp(
      26px,
      2.4vw,
      36px
    );

  background:
    var(--acc-bg);

  color:
    var(--acc-text);

  transition:
    background
    0.42s ease,
    color
    0.42s ease;
}


/* ---------------------------------------------------------
   NORMAL
--------------------------------------------------------- */

.accessibility[data-access-theme="normal"] {
  --acc-bg:
    #111427;

  --acc-text:
    #ffffff;

  --acc-text-soft:
    rgba(255, 255, 255, 0.72);

  --acc-text-muted:
    rgba(255, 255, 255, 0.56);

  --acc-accent:
    #d2bbff;

  --acc-panel:
    rgba(255, 255, 255, 0.055);

  --acc-panel-border:
    rgba(255, 255, 255, 0.11);

  --acc-line:
    rgba(255, 255, 255, 0.11);

  --acc-ring:
    rgba(210, 187, 255, 0.22);

  --acc-center:
    rgba(255, 255, 255, 0.07);

  --acc-center-border:
    rgba(255, 255, 255, 0.13);
}


/* ---------------------------------------------------------
   LIGHT
--------------------------------------------------------- */

.accessibility[data-access-theme="light"] {
  --acc-bg:
    #f3efff;

  --acc-text:
    #171b2d;

  --acc-text-soft:
    #4c465a;

  --acc-text-muted:
    #66606f;

  --acc-accent:
    #630ed4;

  --acc-panel:
    rgba(255, 255, 255, 0.92);

  --acc-panel-border:
    rgba(99, 14, 212, 0.15);

  --acc-line:
    rgba(99, 14, 212, 0.16);

  --acc-ring:
    rgba(99, 14, 212, 0.16);

  --acc-center:
    #ffffff;

  --acc-center-border:
    rgba(99, 14, 212, 0.15);
}


/* ---------------------------------------------------------
   DARK
--------------------------------------------------------- */

.accessibility[data-access-theme="dark"] {
  --acc-bg:
    #080d24;

  --acc-text:
    #ffffff;

  --acc-text-soft:
    rgba(255, 255, 255, 0.74);

  --acc-text-muted:
    rgba(255, 255, 255, 0.60);

  --acc-accent:
    #d2bbff;

  --acc-panel:
    rgba(255, 255, 255, 0.055);

  --acc-panel-border:
    rgba(255, 255, 255, 0.11);

  --acc-line:
    rgba(255, 255, 255, 0.11);

  --acc-ring:
    rgba(210, 187, 255, 0.22);

  --acc-center:
    rgba(255, 255, 255, 0.07);

  --acc-center-border:
    rgba(255, 255, 255, 0.13);
}


/* ---------------------------------------------------------
   REST
--------------------------------------------------------- */

.accessibility[data-access-theme="rest"] {
  --acc-bg:
    #f7f3eb;

  --acc-text:
    #25242e;

  --acc-text-soft:
    #4c4850;

  --acc-text-muted:
    #676169;

  --acc-accent:
    #76519f;

  --acc-panel:
    rgba(255, 253, 249, 0.94);

  --acc-panel-border:
    rgba(76, 69, 82, 0.15);

  --acc-line:
    rgba(76, 69, 82, 0.16);

  --acc-ring:
    rgba(118, 81, 159, 0.16);

  --acc-center:
    #fffdfa;

  --acc-center-border:
    rgba(76, 69, 82, 0.15);
}


.access-grid {
  position: relative;

  z-index: 3;

  width: 100%;

  min-height: 520px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(320px, 0.76fr);

  align-items: center;

  gap:
    clamp(
      64px,
      7vw,
      100px
    );

  padding-block:
    clamp(
      60px,
      6vw,
      78px
    );
}


.access-copy {
  width:
    min(
      100%,
      610px
    );
}


.access-eyebrow {
  color:
    var(--acc-accent);
}


.access-title {
  max-width: 610px;

  margin:
    14px 0 18px;

  color:
    var(--acc-text);

  font-size:
    clamp(
      35px,
      3.4vw,
      46px
    );

  font-weight: 800;

  line-height: 1.07;

  letter-spacing: -0.043em;
}


.access-title-line {
  display: block;
}


.access-title-accent {
  color:
    var(--acc-accent);
}


.access-copy > p {
  max-width: 560px;

  margin: 0;

  color:
    var(--acc-text-soft);

  font-size:
    clamp(
      15px,
      1.08vw,
      17px
    );

  line-height: 1.65;
}


/* =========================================================
   ACCESS SWITCHER
========================================================= */

.access-switcher {
  width:
    min(
      100%,
      480px
    );

  margin-top: 24px;

  padding:
    17px 18px;

  border:
    1px solid
    var(--acc-panel-border);

  border-radius: 17px;

  background:
    var(--acc-panel);

  backdrop-filter:
    blur(9px);

  -webkit-backdrop-filter:
    blur(9px);
}


.access-switcher > strong {
  display: block;

  color:
    var(--acc-text);

  font-size: 13px;

  font-weight: 700;
}


.access-switcher-track {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 2px;

  margin-top: 15px;
}


.access-switcher-track::before {
  content: "";

  position: absolute;

  left: 12%;
  right: 12%;

  top: 19px;

  height: 1px;

  background:
    var(--acc-line);
}


.access-theme {
  position: relative;

  z-index: 2;

  min-height: 65px;

  display: grid;

  justify-items: center;

  align-content: start;

  gap: 7px;

  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    var(--acc-text-muted);

  font-size: 10px;

  transition:
    color
    0.25s ease;
}


.access-theme-dot {
  width: 39px;
  height: 39px;

  display: grid;

  place-items: center;

  border:
    2px solid
    var(--acc-panel-border);

  border-radius: 50%;

  background:
    color-mix(
      in srgb,
      var(--acc-bg)
      91%,
      var(--acc-text)
      9%
    );

  transition:
    border-color
    0.25s ease,
    box-shadow
    0.25s ease,
    background
    0.25s ease,
    transform
    0.25s
    var(--ease);
}


.access-theme-dot::after {
  content: "";

  width: 11px;
  height: 11px;

  border-radius: 50%;

  background:
    currentColor;
}


/*
 * Normal gets a hollow center.
 * This separates "default" from
 * deliberate light/dark/rest preferences.
 */

.access-theme-dot--normal::after {
  width: 12px;
  height: 12px;

  border:
    2px solid
    currentColor;

  background:
    transparent;
}


.access-theme.active {
  color:
    var(--acc-accent);

  font-weight: 700;
}


.access-theme.active
.access-theme-dot {
  border-color:
    var(--acc-accent);

  background:
    color-mix(
      in srgb,
      var(--acc-bg)
      88%,
      var(--acc-accent)
      12%
    );

  box-shadow:
    0 0 15px
    color-mix(
      in srgb,
      var(--acc-accent)
      27%,
      transparent
    );

  transform:
    translateY(-1px);
}


/* =========================================================
   ACCESS VISUAL
========================================================= */

.access-visual {
  position: relative;

  z-index: 4;

  width:
    min(
      330px,
      31vw
    );

  aspect-ratio: 1;

  display: grid;

  place-items: center;

  margin-inline: auto;
}


.access-ring,
.access-wave {
  position: absolute;

  left: 50%;
  top: 50%;

  border-radius: 50%;

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


.access-ring {
  border:
    1px solid
    var(--acc-ring);
}


.access-ring--1 {
  width: 48%;
  height: 48%;
}


.access-ring--2 {
  width: 72%;
  height: 72%;

  opacity: 0.68;
}


.access-ring--3 {
  width: 96%;
  height: 96%;

  opacity: 0.42;
}


.access-wave {
  width: 29%;
  height: 29%;

  border:
    1.5px solid
    var(--acc-accent);

  opacity: 0;

  pointer-events: none;
}


.access-visual:hover
.access-wave,
.access-visual:focus-visible
.access-wave {
  animation:
    accessibility-wave
    6s
    linear
    infinite;
}


@keyframes accessibility-wave {

  0% {
    width: 29%;
    height: 29%;

    opacity: 0;
  }

  5% {
    opacity: 0.86;
  }

  20%,
  28% {
    width: 48%;
    height: 48%;

    opacity: 0.78;
  }

  48%,
  56% {
    width: 72%;
    height: 72%;

    opacity: 0.58;
  }

  76%,
  84% {
    width: 96%;
    height: 96%;

    opacity: 0.38;
  }

  100% {
    width: 96%;
    height: 96%;

    opacity: 0;
  }

}


.access-center {
  position: relative;

  z-index: 5;

  width: 96px;
  height: 96px;

  display: grid;

  place-items: center;

  border:
    1px solid
    var(--acc-center-border);

  border-radius: 50%;

  background:
    var(--acc-center);

  color:
    var(--acc-text);

  box-shadow:
    0 18px 42px
    rgba(0, 0, 0, 0.10);
}


.access-center
.material-symbols-outlined {
  font-size: 38px;
}


/* =========================================================
   21. INSTITUTIONAL
========================================================= */

.institutional {
  padding:
    clamp(
      46px,
      4.5vw,
      64px
    )
    0;

  background:
    linear-gradient(
      90deg,
      rgba(99, 14, 212, 0.032),
      transparent 52%,
      rgba(20, 184, 166, 0.022)
    ),
    var(--bg);
}


.institutional-grid {
  display: grid;

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

  align-items: center;

  gap:
    clamp(
      28px,
      3.5vw,
      44px
    );

  padding:
    30px 0;

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

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


.institutional-icon {
  width: 50px;
  height: 50px;

  display: grid;

  place-items: center;

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

  border-radius: 14px;

  background:
    var(--primary-soft);

  color:
    var(--primary);
}


.institutional-copy h2 {
  margin:
    8px 0 0;

  font-size:
    clamp(
      26px,
      2.3vw,
      35px
    );

  font-weight: 800;

  line-height: 1.085;

  letter-spacing: -0.04em;
}


.institutional-copy h2 span {
  color:
    var(--primary);
}


.institutional-copy p {
  max-width: 670px;

  margin:
    10px 0 0;

  color:
    var(--text-soft);

  font-size: 13px;
}


/* =========================================================
   22. CONTACT
========================================================= */

.contact {
  overflow: hidden;

  background:
    radial-gradient(
      circle at 86% 20%,
      rgba(124, 58, 237, 0.055),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      var(--bg),
      #faf7ff
    );
}


.contact-grid {
  display: grid;

  grid-template-columns:
    minmax(320px, 0.88fr)
    minmax(0, 1.12fr);

  align-items: center;

  gap:
    clamp(
      70px,
      7vw,
      106px
    );
}


.contact-copy {
  max-width: 500px;
}


.contact-helper {
  margin:
    13px 0 0;

  color:
    var(--text-muted);

  font-size: 12px;
}


.contact-info {
  width:
    min(
      100%,
      440px
    );

  display: grid;

  gap: 11px;

  margin-top: 27px;
}


.contact-info-item {
  min-height: 70px;

  display: grid;

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

  align-items: center;

  gap: 13px;

  padding:
    11px 13px;

  border:
    1px solid
    rgba(99, 14, 212, 0.085);

  border-radius: 14px;

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

  box-shadow:
    0 8px 24px
    rgba(28, 18, 47, 0.035);

  transition:
    transform
    0.3s
    var(--ease),
    background
    0.3s ease,
    box-shadow
    0.3s ease;
}


.contact-info-icon {
  position: relative;

  width: 44px;
  height: 44px;

  display: grid;

  place-items: center;

  overflow: hidden;

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      #f3edff,
      #e9ddff
    );

  color:
    var(--primary);
}


.contact-info-item--schedule
.contact-info-icon {
  background:
    linear-gradient(
      145deg,
      #eef8f7,
      #e4f4f1
    );

  color:
    var(--success);
}


.contact-info-icon-glow {
  position: absolute;

  right: -13px;
  bottom: -14px;

  width: 34px;
  height: 34px;

  border-radius: 50%;

  background:
    currentColor;

  opacity: 0.08;

  filter:
    blur(4px);
}


.contact-info-copy small,
.contact-info-copy a,
.contact-info-copy > span {
  display: block;
}


.contact-info-copy small {
  color:
    var(--text-muted);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


.contact-info-copy a,
.contact-info-copy > span {
  margin-top: 2px;

  color:
    var(--text);

  font-size: 12px;

  font-weight: 600;
}


.contact-info-arrow {
  color:
    rgba(99, 14, 212, 0.32);

  font-size: 18px;
}


.contact-info-state {
  padding:
    5px 7px;

  border-radius: 7px;

  background:
    var(--success-soft);

  color:
    var(--success);

  font-size: 7.5px;

  font-weight: 700;

  text-transform: uppercase;
}


@media (hover: hover) {

  .contact-info-item:hover {
    /*
     * NO border-color aquí.
     */

    transform:
      translateX(4px);

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

    box-shadow:
      0 14px 32px
      rgba(31, 20, 51, 0.075);
  }


  .contact-info-item:hover
  .contact-info-icon {
    background:
      var(--primary);

    color:
      #ffffff;

    transform:
      translateY(-2px)
      rotate(-3deg);
  }


  .contact-info-item--schedule:hover
  .contact-info-icon {
    background:
      var(--success);

    color:
      #ffffff;
  }

}


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

.contact-form {
  width: 100%;

  max-width: 580px;

  justify-self: end;

  padding:
    clamp(
      28px,
      2.8vw,
      36px
    );

  border:
    1px solid
    rgba(99, 14, 212, 0.10);

  border-radius: 22px;

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

  box-shadow:
    0 22px 54px
    rgba(31, 20, 51, 0.09);

  transition:
    background
    0.3s ease,
    color
    0.3s ease,
    transform
    0.4s
    var(--ease),
    box-shadow
    0.4s ease;
}


.contact-form-head {
  display: flex;

  align-items: center;

  gap: 13px;

  margin-bottom: 26px;

  padding-bottom: 19px;

  border-bottom:
    1px solid
    rgba(99, 14, 212, 0.07);
}


.contact-form-emblem {
  width: 48px;
  height: 48px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    var(--navy);

  color:
    #ffffff;

  box-shadow:
    0 10px 22px
    rgba(8, 13, 36, 0.15);

  transition:
    transform
    0.36s
    var(--ease),
    background
    0.36s ease;
}


.contact-form-intro > span {
  display: block;

  color:
    var(--text);

  font-family:
    var(--font-display);

  font-size: 14px;

  font-weight: 800;
}


.contact-form-intro p {
  margin:
    2px 0 0;

  color:
    var(--text-muted);

  font-size: 10.5px;
}


.contact-submit {
  width: 100%;

  margin-top: 18px;
}


.contact-form-status {
  min-height: 18px;

  margin:
    9px 2px 0;

  color:
    var(--primary);

  font-size: 11px;
}

/* =========================================================
   23. FOOTER
========================================================= */

.footer {
  position: relative;

  width:
    calc(
      100% -
      clamp(
        32px,
        4.5vw,
        72px
      )
    );

  max-width: 1480px;

  margin:
    0 auto;

  padding:
    clamp(
      48px,
      5vw,
      64px
    )
    0
    24px;

  overflow: hidden;

  border-radius:
    30px 30px 0 0;

  background:
    linear-gradient(
      145deg,
      #080d24 0%,
      #0b1029 55%,
      #0c112b 100%
    );

  color:
    #ffffff;
}


/* ---------------------------------------------------------
   SUTIL PROFUNDIDAD DE FONDO
--------------------------------------------------------- */

.footer::before {
  content: "";

  position: absolute;

  top: -220px;
  left: 23%;

  width: 520px;
  height: 520px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(124, 58, 237, 0.09),
      transparent 68%
    );

  pointer-events: none;
}


.footer::after {
  content: "";

  position: absolute;

  right: -160px;
  bottom: -220px;

  width: 460px;
  height: 460px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(99, 14, 212, 0.055),
      transparent 68%
    );

  pointer-events: none;
}


/* ---------------------------------------------------------
   GRID PRINCIPAL

   3 COLUMNAS REALES:
   IDENTIDAD | NAVEGACIÓN | CONTACTO
--------------------------------------------------------- */

.footer-grid {
  position: relative;

  z-index: 3;

  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(180px, 0.58fr)
    minmax(300px, 0.92fr);

  align-items: start;

  gap:
    clamp(
      46px,
      5vw,
      78px
    );
}


/* =========================================================
   IDENTIDAD
========================================================= */

.footer-intro {
  max-width: 540px;
}


.footer-brand {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color:
    #ffffff;

  font-family:
    var(--font-display);

  font-size: 17px;

  font-weight: 800;

  letter-spacing: -0.025em;
}


.footer-brand-mark {
  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.07);

  border-radius: 11px;

  background:
    rgba(210, 187, 255, 0.12);
}


.footer-brand-mark img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


.footer-intro h2 {
  max-width: 530px;

  margin:
    24px 0 12px;

  color:
    #ffffff;

  font-size:
    clamp(
      25px,
      2.15vw,
      34px
    );

  font-weight: 800;

  line-height: 1.08;

  letter-spacing: -0.04em;

  text-wrap: balance;
}


.footer-intro p {
  max-width: 510px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.54);

  font-size: 12.5px;

  line-height: 1.65;
}


/* ---------------------------------------------------------
   CTA PEQUEÑO
--------------------------------------------------------- */

.footer-project-link {
  width: max-content;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 22px;

  padding-bottom: 5px;

  border-bottom:
    1px solid
    rgba(210, 187, 255, 0.25);

  color:
    var(--primary-fixed);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.04em;

  transition:
    color
    0.25s ease,
    border-color
    0.25s ease;
}


.footer-project-link
.material-symbols-outlined {
  font-size: 15px;

  transition:
    transform
    0.28s
    var(--ease);
}


@media (hover: hover) {

  .footer-project-link:hover {
    color:
      #ffffff;

    border-color:
      rgba(255, 255, 255, 0.45);
  }


  .footer-project-link:hover
  .material-symbols-outlined {
    transform:
      translateX(4px);
  }

}


/* =========================================================
   TITULOS DE COLUMNAS
========================================================= */

.footer-column-label {
  display: block;

  margin-bottom: 18px;

  color:
    var(--primary-fixed);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.14em;

  line-height: 1.2;

  text-transform: uppercase;
}


/* =========================================================
   NAVEGACIÓN
========================================================= */

.footer-nav {
  min-width: 0;
}


.footer-nav-links {
  display: grid;

  gap: 4px;
}


.footer-nav-links a {
  width: 100%;

  min-height: 34px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding:
    5px 0;

  color:
    rgba(255, 255, 255, 0.58);

  font-size: 11.5px;

  transition:
    color
    0.24s ease,
    transform
    0.28s
    var(--ease);
}


.footer-nav-links
.material-symbols-outlined {
  font-size: 13px;

  opacity: 0;

  transform:
    translate(
      -5px,
      3px
    );

  transition:
    opacity
    0.22s ease,
    transform
    0.28s
    var(--ease);
}


@media (hover: hover) {

  .footer-nav-links a:hover {
    color:
      #ffffff;

    transform:
      translateX(3px);
  }


  .footer-nav-links a:hover
  .material-symbols-outlined {
    opacity: 0.65;

    transform:
      translate(
        0,
        0
      );
  }

}


/* =========================================================
   CONTACTO
========================================================= */

.footer-contact {
  min-width: 0;
}


.footer-contact-list {
  display: grid;

  gap: 8px;
}


.footer-contact-item {
  position: relative;

  min-width: 0;

  min-height: 58px;

  display: grid;

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

  align-items: center;

  gap: 11px;

  padding:
    8px 10px;

  border:
    1px solid
    rgba(255, 255, 255, 0.055);

  border-radius: 12px;

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

  transition:
    transform
    0.3s
    var(--ease),
    background
    0.25s ease,
    border-color
    0.25s ease;
}


.footer-contact-icon {
  width: 36px;
  height: 36px;

  display: grid;

  place-items: center;

  border-radius: 9px;

  background:
    rgba(210, 187, 255, 0.08);

  color:
    rgba(255, 255, 255, 0.72);

  font-size: 15px;

  transition:
    background
    0.26s ease,
    color
    0.26s ease,
    transform
    0.3s
    var(--ease);
}


.footer-contact-copy {
  min-width: 0;
}


.footer-contact-copy small,
.footer-contact-copy strong {
  display: block;
}


.footer-contact-copy small {
  margin-bottom: 1px;

  color:
    rgba(255, 255, 255, 0.34);

  font-size: 7.5px;

  font-weight: 700;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.footer-contact-copy strong {
  overflow: hidden;

  color:
    rgba(255, 255, 255, 0.72);

  font-size: 10.5px;

  font-weight: 500;

  line-height: 1.35;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.footer-contact-arrow {
  color:
    rgba(255, 255, 255, 0.22);

  font-size: 14px;

  transition:
    color
    0.25s ease,
    transform
    0.3s
    var(--ease);
}


/* ---------------------------------------------------------
   HOVER POR RED
--------------------------------------------------------- */

@media (hover: hover) {

  .footer-contact-item:hover {
    transform:
      translateX(3px);

    border-color:
      rgba(255, 255, 255, 0.09);

    background:
      rgba(255, 255, 255, 0.045);
  }


  .footer-contact-item:hover
  .footer-contact-arrow {
    color:
      rgba(255, 255, 255, 0.64);

    transform:
      translate(
        2px,
        -2px
      );
  }


  /* EMAIL */

  .footer-contact-item--email:hover
  .footer-contact-icon {
    background:
      rgba(210, 187, 255, 0.16);

    color:
      #d2bbff;

    transform:
      rotate(-3deg);
  }


  /* WHATSAPP */

  .footer-contact-item--whatsapp:hover
  .footer-contact-icon {
    background:
      #25d366;

    color:
      #ffffff;

    transform:
      rotate(-3deg);
  }


  /* INSTAGRAM */

  .footer-contact-item--instagram:hover
  .footer-contact-icon {
    background:
      linear-gradient(
        135deg,
        #833ab4,
        #fd1d1d,
        #fcb045
      );

    color:
      #ffffff;

    transform:
      rotate(-3deg);
  }

}


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

.footer-bottom {
  position: relative;

  z-index: 3;

  min-width: 0;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  margin-top:
    clamp(
      36px,
      4vw,
      50px
    );

  padding-top: 20px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.065);

  color:
    rgba(255, 255, 255, 0.30);

  font-size: 8px;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}


.footer-bottom-meta {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 8px;
}


.footer-bottom-dot {
  width: 3px;
  height: 3px;

  display: inline-block;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    rgba(210, 187, 255, 0.42);
}


/* =========================================================
   24. REVEAL
========================================================= */

.reveal {
  opacity: 0;

  transform:
    translateY(18px);

  transition:
    opacity
    0.58s ease,
    transform
    0.68s
    var(--ease);
}


.reveal.active {
  opacity: 1;

  transform: none;
}


/* =========================================================
   25. DARK MODE
   SECCIÓN POR SECCIÓN
========================================================= */

html[data-page-theme="dark"] {

  --bg: #0b0e1f;
  --bg-alt: #0e1225;
  --bg-soft: #15182d;

  --surface: #15182d;
  --surface-soft: #191c32;
  --surface-muted: #1d2037;

  --text: #f4f1fb;
  --text-soft: #bdb6c9;
  --text-muted: #8f899b;

  --border:
    rgba(210, 187, 255, 0.10);

  --border-medium:
    rgba(210, 187, 255, 0.18);

  --border-strong:
    rgba(210, 187, 255, 0.28);
}


html[data-page-theme="dark"],
html[data-page-theme="dark"] body {
  background:
    #0b0e1f;

  color:
    var(--text);
}


/* ---------------------------------------------------------
   DARK HEADER
--------------------------------------------------------- */

html[data-page-theme="dark"]
.site-header {
  border-bottom-color:
    rgba(210, 187, 255, 0.075);

  background:
    rgba(11, 14, 31, 0.91);
}


html[data-page-theme="dark"]
.site-header.scrolled {
  background:
    rgba(11, 14, 31, 0.98);

  box-shadow:
    0 7px 28px
    rgba(0, 0, 0, 0.20);
}


html[data-page-theme="dark"]
.page-theme-controls {
  border-color:
    rgba(210, 187, 255, 0.08);

  background:
    rgba(255, 255, 255, 0.035);
}


html[data-page-theme="dark"]
.theme-btn,
html[data-page-theme="dark"]
.menu-toggle {
  color:
    #aaa4b7;
}


html[data-page-theme="dark"]
.theme-btn[aria-pressed="true"] {
  border-color:
    rgba(210, 187, 255, 0.12);

  background:
    rgba(124, 58, 237, 0.18);

  color:
    #d8c5ff;
}


/* ---------------------------------------------------------
   DARK HERO
--------------------------------------------------------- */

html[data-page-theme="dark"]
.hero {
  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(124, 58, 237, 0.11),
      transparent 29%
    ),
    radial-gradient(
      circle at 87% 78%,
      rgba(99, 14, 212, 0.07),
      transparent 32%
    ),
    radial-gradient(
      rgba(210, 187, 255, 0.035)
      1px,
      transparent 1px
    ),
    #0b0e1f;

  background-size:
    auto,
    auto,
    40px 40px,
    auto;
}


html[data-page-theme="dark"]
.hero-title {
  color:
    #f7f3ff;
}


html[data-page-theme="dark"]
.hero-description,
html[data-page-theme="dark"]
.hero-metric {
  color:
    #bdb7c9;
}


html[data-page-theme="dark"]
.hero-kicker {
  background:
    rgba(124, 58, 237, 0.10);
}


/* ---------------------------------------------------------
   DARK LOGIN

   Corrige la card blanca de la captura.
--------------------------------------------------------- */

html[data-page-theme="dark"]
.login-wrap::before {
  background:
    linear-gradient(
      145deg,
      rgba(124, 58, 237, 0.16),
      transparent
    );
}


html[data-page-theme="dark"]
.login-card {
  border-color:
    rgba(210, 187, 255, 0.10);

  background:
    rgba(18, 21, 42, 0.96);

  color:
    #f5f1fb;

  box-shadow:
    0 28px 64px
    rgba(0, 0, 0, 0.28);
}


html[data-page-theme="dark"]
.login-card h2 {
  color:
    #f7f3ff;
}


html[data-page-theme="dark"]
.login-description {
  color:
    #aaa4b7;
}


html[data-page-theme="dark"]
.login-icon {
  background:
    rgba(124, 58, 237, 0.16);

  color:
    #c8a9ff;
}


html[data-page-theme="dark"]
.input-group label {
  background:
    #12152a;
}


html[data-page-theme="dark"]
.input-group input,
html[data-page-theme="dark"]
.input-group textarea {
  border-color:
    rgba(210, 187, 255, 0.13);

  background:
    #0d1021;

  color:
    #f4f1fb;

  box-shadow:
    none;
}


html[data-page-theme="dark"]
.input-group input::placeholder,
html[data-page-theme="dark"]
.input-group textarea::placeholder {
  color:
    #777184;
}


html[data-page-theme="dark"]
.input-group:focus-within input,
html[data-page-theme="dark"]
.input-group:focus-within textarea {
  border-color:
    rgba(160, 106, 255, 0.56);

  background:
    #101428;

  box-shadow:
    0 0 0 3px
    rgba(124, 58, 237, 0.08);
}


html[data-page-theme="dark"]
.otp-input {
  border-color:
    rgba(210, 187, 255, 0.12);

  background:
    #0d1021;

  color:
    #ffffff;
}


/* ---------------------------------------------------------
   DARK CAPABILITIES
--------------------------------------------------------- */

html[data-page-theme="dark"]
.capabilities {
  background:
    linear-gradient(
      180deg,
      #0e1124,
      #0c1021
    );
}


html[data-page-theme="dark"]
.capabilities::before {
  background:
    radial-gradient(
      circle,
      rgba(124, 58, 237, 0.09),
      transparent 67%
    );
}


html[data-page-theme="dark"]
.identity-card--mission,
html[data-page-theme="dark"]
.identity-card--vision {
  border-color:
    rgba(210, 187, 255, 0.09);

  background:
    linear-gradient(
      145deg,
      #15182d,
      #181b31
    );

  color:
    #f4f1fb;

  box-shadow:
    0 14px 34px
    rgba(0, 0, 0, 0.14);
}


html[data-page-theme="dark"]
.identity-card--mission
.identity-card-content p,
html[data-page-theme="dark"]
.identity-card--vision
.identity-card-content p,
html[data-page-theme="dark"]
.identity-card-meta {
  color:
    #aaa4b7;
}


html[data-page-theme="dark"]
.identity-floating-detail {
  border-color:
    rgba(210, 187, 255, 0.08);

  background:
    #20233a;

  color:
    #bba0ee;
}


/* ---------------------------------------------------------
   DARK SINERGIA
--------------------------------------------------------- */

html[data-page-theme="dark"]
.cms {
  background:
    linear-gradient(
      180deg,
      #0b0e1f,
      #0c1021
    );
}


html[data-page-theme="dark"]
.eco-terminal {
  border-color:
    rgba(210, 187, 255, 0.09);

  background:
    rgba(20, 23, 43, 0.96);

  box-shadow:
    0 12px 32px
    rgba(0, 0, 0, 0.13);
}


html[data-page-theme="dark"]
.eco-terminal-label {
  color:
    #f4f1fb;
}


html[data-page-theme="dark"]
.eco-terminal-copy strong {
  color:
    #aaa4b7;
}


html[data-page-theme="dark"]
.eco-terminal-badge {
  border-color:
    rgba(210, 187, 255, 0.08);

  background:
    #ebe6f4;

  color:
    #7752b2;
}


html[data-page-theme="dark"]
.eco-terminal-node {
  border-color:
    rgba(173, 122, 255, 0.62);

  background:
    #0c1021;
}


html[data-page-theme="dark"]
.ecosystem-content-connect-line {
  background:
    linear-gradient(
      90deg,
      rgba(155, 101, 247, 0.46),
      rgba(124, 58, 237, 0.92) 35%,
      rgba(124, 58, 237, 0.92) 65%,
      rgba(155, 101, 247, 0.46)
    );

  box-shadow:
    0 0 10px
    rgba(124, 58, 237, 0.08);
}


/* ---------------------------------------------------------
   DARK PROCESS
--------------------------------------------------------- */

html[data-page-theme="dark"]
.process {
  background:
    radial-gradient(
      rgba(210, 187, 255, 0.028)
      1px,
      transparent 1px
    ),
    #0b0e1f;

  background-size:
    24px 24px,
    auto;
}


html[data-page-theme="dark"]
.process-card {
  border-color:
    color-mix(
      in srgb,
      var(--stage-color)
      26%,
      transparent
    );

  background:
    rgba(20, 23, 43, 0.96);

  box-shadow:
    0 9px 24px
    rgba(0, 0, 0, 0.12);
}


html[data-page-theme="dark"]
.process-card h3 {
  color:
    #f4f1fb;
}


html[data-page-theme="dark"]
.process-card p {
  color:
    #aaa4b7;
}


html[data-page-theme="dark"]
.process-node {
  background:
    #0b0e1f;

  box-shadow:
    0 0 0 5px
    #0b0e1f;
}


html[data-page-theme="dark"]
.process-step--featured
.process-node {
  background:
    var(--stage-3);
}


html[data-page-theme="dark"]
.agile-card {
  border-color:
    rgba(210, 187, 255, 0.08);

  background:
    rgba(20, 23, 43, 0.94);

  color:
    #f4f1fb;
}


html[data-page-theme="dark"]
.agile-flow {
  color:
    #c2bccb;
}


/* ---------------------------------------------------------
   DARK RESPONSIVE
--------------------------------------------------------- */

html[data-page-theme="dark"]
.responsive-showcase {
  background:
    radial-gradient(
      circle at 78% 48%,
      rgba(124, 58, 237, 0.09),
      transparent 31%
    ),
    #0b0e1f;
}


html[data-page-theme="dark"]
.device-selector {
  border-color:
    rgba(210, 187, 255, 0.09);

  background:
    rgba(255, 255, 255, 0.045);
}


html[data-page-theme="dark"]
.device-selector-btn {
  color:
    #847e90;
}


html[data-page-theme="dark"]
.device-selector-btn.active {
  background:
    var(--primary);

  color:
    #ffffff;
}


html[data-page-theme="dark"]
.responsive-device-frame {
  border-color:
    rgba(210, 187, 255, 0.10);

  background:
    #15182d;

  box-shadow:
    0 24px 58px
    rgba(0, 0, 0, 0.20);
}


html[data-page-theme="dark"]
.responsive-demo-header {
  border-bottom-color:
    rgba(210, 187, 255, 0.08);

  background:
    #e4e0eb;
}


html[data-page-theme="dark"]
.responsive-demo-header
.responsive-demo-brand {
  color:
    #ffffff;
}


html[data-page-theme="dark"]
.responsive-demo-body {
  background:
    #15182d;
}


html[data-page-theme="dark"]
.responsive-demo-title i:first-child,
html[data-page-theme="dark"]
.responsive-demo-button,
html[data-page-theme="dark"]
.responsive-demo-card-button {
  background:
    #090d20;
}


html[data-page-theme="dark"]
.responsive-demo-lines i,
html[data-page-theme="dark"]
.responsive-demo-card > i {
  background:
    rgba(255, 255, 255, 0.065);
}


html[data-page-theme="dark"]
.responsive-demo-card {
  border-color:
    rgba(210, 187, 255, 0.10);

  background:
    #191c32;
}


html[data-page-theme="dark"]
.responsive-status {
  border-color:
    rgba(210, 187, 255, 0.08);

  background:
    #171a30;

  color:
    #ffffff;
}


html[data-page-theme="dark"]
.responsive-status div span {
  color:
    #8f899b;
}


/* ---------------------------------------------------------
   DARK INSTITUTIONAL
--------------------------------------------------------- */

html[data-page-theme="dark"]
.institutional {
  background:
    linear-gradient(
      90deg,
      rgba(124, 58, 237, 0.035),
      transparent 52%,
      rgba(20, 184, 166, 0.018)
    ),
    #0b0e1f;
}


/* ---------------------------------------------------------
   DARK CONTACT
--------------------------------------------------------- */

html[data-page-theme="dark"]
.contact {
  background:
    radial-gradient(
      circle at 86% 20%,
      rgba(124, 58, 237, 0.08),
      transparent 28%
    ),
    #0b0e1f;
}


html[data-page-theme="dark"]
.contact-info-item {
  border-color:
    rgba(210, 187, 255, 0.08);

  background:
    rgba(20, 23, 43, 0.78);

  box-shadow:
    0 8px 24px
    rgba(0, 0, 0, 0.10);
}


html[data-page-theme="dark"]
.contact-info-copy a,
html[data-page-theme="dark"]
.contact-info-copy > span {
  color:
    #f2eff9;
}


html[data-page-theme="dark"]
.contact-form {
  border-color:
    rgba(210, 187, 255, 0.09);

  background:
    #14172b;

  box-shadow:
    0 22px 54px
    rgba(0, 0, 0, 0.18);
}


html[data-page-theme="dark"]
.contact-form-intro > span {
  color:
    #f4f1fb;
}


html[data-page-theme="dark"]
.contact-form-head {
  border-bottom-color:
    rgba(210, 187, 255, 0.08);
}


/* =========================================================
   26. CELEBRATION
   SIN EFECTO TODAVÍA
========================================================= */

html[data-celebration="true"]
.theme-btn--celebration {
  border-color:
    rgba(99, 14, 212, 0.14);

  background:
    var(--primary-soft);

  color:
    var(--primary);
}


html[data-page-theme="dark"][data-celebration="true"]
.theme-btn--celebration {
  border-color:
    rgba(210, 187, 255, 0.14);

  background:
    rgba(124, 58, 237, 0.18);

  color:
    #d8c5ff;
}

/* =========================================================
   27. RESPONSIVE SYSTEM — ARBORTIC 2026

   BREAKPOINTS PRINCIPALES

   <= 479px
   Celular pequeño

   480px - 768px
   Celular grande

   769px - 1024px
   Tablet

   1025px - 1439px
   Notebook / Desktop

   >= 1440px
   Monitor grande

   PRINCIPIOS

   - Desktop conserva la composición editorial horizontal.
   - Tablet reorganiza grids que dejan de ser cómodos.
   - Mobile utiliza altura natural.
   - No forzar 100svh en móvil.
   - Ningún contenido se extiende a ancho completo.
   - Sinergia desktop no se comprime en tablet/mobile.
   - Touch targets >= 44px donde corresponde.
   - Se evita overflow horizontal.
========================================================= */


/* =========================================================
   27.1 DESKTOP BASE
   1025px EN ADELANTE
========================================================= */

@media (min-width: 1025px) {

  :root {
    --page-gutter:
      clamp(
        30px,
        4vw,
        64px
      );

    --section-space:
      clamp(
        68px,
        6.2vw,
        94px
      );
  }


  .container {
    width: 100%;

    margin-inline: auto;
  }


  /*
   * Las secciones principales pueden aprovechar
   * el viewport, pero nunca quedan obligadas a
   * desbordarlo si el contenido necesita crecer.
   */

  .hero {
    min-height:
      calc(
        100svh -
        var(--header-height)
      );
  }


  .capabilities,
  .cms,
  .process,
  .responsive-showcase,
  .contact {
    min-height: auto;
  }


  /*
   * Desktop = navegación completa.
   */

  .nav-links {
    display: flex;
  }


  .menu-toggle {
    display: none;
  }


  .mobile-menu {
    display: none !important;
  }


  /*
   * SINERGIA:
   * mantiene diagrama horizontal.
   */

  .ecosystem-board {
    display: block;

    height: 405px;
  }


  .ecosystem-circuit {
    display: block;
  }


  .ecosystem-content-connect-line {
    display: block;
  }


  .ecosystem-column {
    position: absolute;

    top: 50%;

    width: 238px;

    grid-template-columns: 1fr;

    transform:
      translateY(-50%);
  }


  .ecosystem-column--inputs {
    left: 0;
  }


  .ecosystem-column--outputs {
    right: 0;
  }


  .ecosystem-core-wrap {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 250px;
    height: 238px;

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


  .eco-terminal-node {
    display: block;
  }

}


/* =========================================================
   27.2 NOTEBOOK / DESKTOP
   1025px - 1439px
========================================================= */

@media
  (min-width: 1025px)
  and
  (max-width: 1439px) {

  :root {
    --page-gutter:
      clamp(
        28px,
        3.4vw,
        48px
      );

    --section-space:
      clamp(
        64px,
        5.6vw,
        82px
      );
  }


  /* -------------------------------------------------------
     HEADER
  ------------------------------------------------------- */

  .nav {
    gap:
      clamp(
        18px,
        2vw,
        28px
      );
  }


  .nav-links {
    gap:
      clamp(
        14px,
        1.45vw,
        21px
      );
  }


  .nav-link {
    font-size: 8.5px;
  }


  .nav-primary-action {
    padding-inline: 14px;
  }


  /* -------------------------------------------------------
     HERO
  ------------------------------------------------------- */

  .hero-grid {
    grid-template-columns:
      minmax(0, 1.04fr)
      minmax(350px, 0.78fr);

    gap:
      clamp(
        40px,
        4.5vw,
        68px
      );

    padding-block:
      clamp(
        44px,
        5vh,
        62px
      );
  }


  .hero-title {
    font-size:
      clamp(
        41px,
        4.25vw,
        56px
      );
  }


  .login-wrap {
    width:
      min(
        100%,
        430px
      );
  }


  /* -------------------------------------------------------
     IDENTIDAD
  ------------------------------------------------------- */

  .cap-identity-grid {
    grid-template-columns:
      minmax(0, 1.35fr)
      minmax(300px, 0.92fr);
  }


  .identity-card--about {
    min-height: 420px;
  }


  .identity-card--mission,
  .identity-card--vision {
    min-height: 198px;
  }


  /* -------------------------------------------------------
     SINERGIA
  ------------------------------------------------------- */

  .ecosystem {
    padding-block:
      clamp(
        62px,
        5.5vw,
        78px
      );
  }


  .ecosystem-head {
    margin-bottom: 30px;
  }


  .ecosystem-board {
    width:
      min(
        100%,
        1030px
      );

    height: 390px;
  }


  .ecosystem-column {
    width: 225px;
  }


  .ecosystem-content-connect-line {
    left: 225px;
    right: 225px;
  }


  .ecosystem-core-wrap {
    transform:
      translate(
        -50%,
        -50%
      )
      scale(0.94);
  }


  /* -------------------------------------------------------
     PROCESS
  ------------------------------------------------------- */

  .process {
    padding:
      62px
      0
      66px;
  }


  .process-timeline {
    height: 350px;
  }


  .process-card {
    width:
      min(
        168px,
        calc(
          100% -
          16px
        )
      );
  }


  /* -------------------------------------------------------
     RESPONSIVE SHOWCASE
  ------------------------------------------------------- */

  .responsive-grid {
    gap:
      clamp(
        42px,
        5vw,
        68px
      );
  }


  .responsive-stage {
    height: 430px;
  }


  /* -------------------------------------------------------
     ACCESSIBILITY
  ------------------------------------------------------- */

  .access-grid {
    min-height: 500px;

    gap:
      clamp(
        48px,
        5vw,
        74px
      );

    padding-block:
      clamp(
        54px,
        5vw,
        68px
      );
  }


  .access-visual {
    width:
      min(
        300px,
        27vw
      );
  }


  /* -------------------------------------------------------
     CONTACT
  ------------------------------------------------------- */

  .contact-grid {
    gap:
      clamp(
        48px,
        5vw,
        76px
      );
  }

}


/* =========================================================
   27.3 MONITORES GRANDES
   >= 1440px
========================================================= */

@media (min-width: 1440px) {

  :root {
    --container-width: 1240px;

    --page-gutter:
      clamp(
        44px,
        4vw,
        68px
      );

    --section-space:
      clamp(
        76px,
        6vw,
        98px
      );
  }


  /*
   * Nunca estirar contenido editorial
   * al ancho completo del monitor.
   */

  .container {
    max-width:
      calc(
        var(--container-width) +
        var(--page-gutter) * 2
      );
  }


  .hero .container {
    max-width:
      calc(
        1240px +
        var(--page-gutter) * 2
      );
  }


  .capabilities .container,
  .cms .container {
    max-width:
      calc(
        1210px +
        var(--page-gutter) * 2
      );
  }


  .process .container {
    max-width:
      calc(
        1280px +
        var(--page-gutter) * 2
      );
  }


  .responsive-showcase .container {
    max-width:
      calc(
        1210px +
        var(--page-gutter) * 2
      );
  }


  .accessibility .container,
  .contact .container,
  .footer .container {
    max-width:
      calc(
        1180px +
        var(--page-gutter) * 2
      );
  }


  .institutional .container {
    max-width:
      calc(
        1150px +
        var(--page-gutter) * 2
      );
  }


  /* -------------------------------------------------------
     HERO
  ------------------------------------------------------- */

  .hero-grid {
    gap:
      clamp(
        70px,
        6vw,
        94px
      );
  }


  .hero-title {
    font-size:
      clamp(
        48px,
        4vw,
        59px
      );
  }


  /*
   * Evita que en pantallas muy grandes
   * el login quede excesivamente lejos.
   */

  .login-wrap {
    max-width: 455px;
  }


  /* -------------------------------------------------------
     SINERGIA
  ------------------------------------------------------- */

  .ecosystem-board {
    max-width: 1090px;
  }


  /* -------------------------------------------------------
     PROCESS
  ------------------------------------------------------- */

  .process-timeline {
    max-width: 1200px;
  }


  /* -------------------------------------------------------
     ACCESSIBILITY
  ------------------------------------------------------- */

  .accessibility {
    max-width: 1480px;
  }

}


/* =========================================================
   28. TABLET
   769px - 1024px

   Aquí dejamos de intentar comprimir desktop.

   SINERGIA:
   INPUTS
        ↓
   ARBORTIC
        ↓
   OUTPUTS
========================================================= */

@media
  (min-width: 769px)
  and
  (max-width: 1024px) {

  :root {
    --header-height: 70px;

    --page-gutter:
      clamp(
        28px,
        4.2vw,
        42px
      );

    --section-space:
      clamp(
        62px,
        7vw,
        78px
      );
  }


  /* =======================================================
     GLOBAL
  ======================================================= */

  section {
    min-height: auto;
  }


  .section-shell {
    padding-block:
      var(--section-space);
  }


  /* =======================================================
     HEADER
  ======================================================= */

  .nav {
    grid-template-columns:
      auto
      1fr
      auto;

    gap: 18px;
  }


  .nav-links {
    display: none;
  }


  .menu-toggle {
    display: grid;

    width: 40px;
    height: 40px;
  }


  .nav-primary-action {
    display: inline-flex;
  }


  /*
   * El menú desplegable también debe existir
   * en tablet, no sólo en celulares.
   */

  .mobile-menu {
    position: fixed;

    top:
      calc(
        var(--header-height) +
        10px
      );

    right:
      var(--page-gutter);

    left: auto;

    z-index: 1001;

    width:
      min(
        360px,
        calc(
          100vw -
          var(--page-gutter) * 2
        )
      );

    display: none;

    gap: 3px;

    padding: 10px;

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

    border-radius: 16px;

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

    box-shadow:
      var(--shadow-large);

    backdrop-filter:
      blur(18px);

    -webkit-backdrop-filter:
      blur(18px);
  }


  .mobile-menu.open {
    display: grid;
  }


  .mobile-menu a {
    min-height: 46px;

    display: flex;

    align-items: center;

    padding:
      10px 12px;

    border-radius: 10px;

    color:
      var(--text-soft);

    font-size: 13px;

    font-weight: 500;
  }


  html[data-page-theme="dark"]
  .mobile-menu {
    border-color:
      rgba(210, 187, 255, 0.10);

    background:
      rgba(21, 24, 45, 0.985);
  }


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

  .hero {
    min-height: auto;

    align-items: initial;
  }


  .hero-grid {
    grid-template-columns: 1fr;

    gap:
      clamp(
        44px,
        6vw,
        64px
      );

    padding-block:
      clamp(
        58px,
        7vw,
        76px
      );
  }


  .hero-copy {
    width:
      min(
        100%,
        760px
      );
  }


  .hero-title {
    max-width: 760px;

    font-size:
      clamp(
        44px,
        6.1vw,
        58px
      );
  }


  .hero-description {
    max-width: 650px;
  }


  .hero-actions {
    margin-top: 26px;
  }


  .login-wrap {
    width:
      min(
        100%,
        600px
      );

    justify-self: start;
  }


  .login-card {
    padding:
      clamp(
        28px,
        4vw,
        34px
      );
  }


  /* =======================================================
     IDENTIDAD
  ======================================================= */

  .cap-identity-head {
    width:
      min(
        100%,
        720px
      );
  }


  .cap-identity-grid {
    grid-template-columns: 1fr;

    gap: 20px;
  }


  .identity-card--about {
    min-height: 390px;
  }


  .identity-card--about
  .identity-card-content {
    margin-top: 52px;
  }


  .identity-card-stack {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    grid-template-rows: auto;

    gap: 20px;
  }


  .identity-card--mission,
  .identity-card--vision {
    min-height: 230px;
  }


  .identity-card--mission
  .identity-card-content,
  .identity-card--vision
  .identity-card-content {
    padding-right: 20px;
  }


  /* =======================================================
     SINERGIA ESTRUCTURAL

     No SVG desktop.
     3 entradas + núcleo + 3 salidas.
  ======================================================= */

  .ecosystem {
    padding-block:
      var(--section-space);
  }


  .ecosystem-head {
    margin-bottom: 36px;
  }


  .ecosystem-board {
    width: 100%;

    height: auto;

    display: grid;

    grid-template-columns: 1fr;

    gap: 28px;

    margin-inline: auto;
  }


  .ecosystem-circuit,
  .ecosystem-content-connect-line {
    display: none;
  }


  .ecosystem-column {
    position: relative;

    inset: auto;

    width: 100%;

    display: grid;

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

    gap:
      clamp(
        12px,
        2vw,
        18px
      );

    transform: none;
  }


  .ecosystem-column--inputs {
    order: 1;
  }


  .ecosystem-core-wrap {
    position: relative;

    inset: auto;

    order: 2;

    width: 100%;
    height: 220px;

    transform: none;
  }


  /*
   * Línea vertical estructural de tablet.
   */

  .ecosystem-core-wrap::before,
  .ecosystem-core-wrap::after {
    content: "";

    position: absolute;

    left: 50%;

    z-index: 1;

    width: 1px;
    height: 30px;

    background:
      linear-gradient(
        180deg,
        transparent,
        rgba(99, 14, 212, 0.34),
        transparent
      );

    transform:
      translateX(-50%);
  }


  .ecosystem-core-wrap::before {
    top: -29px;
  }


  .ecosystem-core-wrap::after {
    bottom: -29px;
  }


  .ecosystem-column--outputs {
    order: 3;
  }


  .eco-terminal {
    min-height: 104px;

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

    padding:
      15px 14px;
  }


  .eco-terminal-copy strong {
    white-space: normal;

    text-overflow: clip;
  }


  .eco-terminal-node {
    display: none;
  }


  .ecosystem-flow {
    margin-top: 28px;
  }


  /* =======================================================
     PROCESS
  ======================================================= */

  .process {
    min-height: auto;

    padding:
      68px
      0
      72px;
  }


  .process
  .section-head {
    margin-bottom: 42px;
  }


  .process-timeline {
    height: auto;

    max-width: 760px;
  }


  .process-axis {
    display: none;
  }


  .process-steps {
    height: auto;

    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 18px;

    padding-left: 0;
  }


  .process-step {
    min-height: 150px;

    display: grid;

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

    align-items: center;
  }


  /*
   * Última etapa ocupa ancho disponible,
   * evitando una quinta card huérfana.
   */

  .process-step:nth-child(5) {
    grid-column:
      1 / -1;

    width:
      min(
        100%,
        calc(
          50% -
          9px
        )
      );

    justify-self: center;
  }


  .process-card,
  .process-step--top
  .process-card,
  .process-step--bottom
  .process-card {
    position: relative;

    inset: auto;

    grid-column: 2;
    grid-row: 1;

    width: 100%;

    min-height: 132px;

    padding: 18px;
  }


  .process-node,
  .process-step--featured
  .process-node {
    position: relative;

    inset: auto;

    grid-column: 1;
    grid-row: 1;

    justify-self: center;

    transform: none;
  }


  .process-connector {
    display: none;
  }


  .process-continuity {
    position: static;

    justify-content: center;

    margin-top: 20px;
  }


  .agile-wrap {
    margin-top: 30px;
  }


  /* =======================================================
     RESPONSIVE SHOWCASE
  ======================================================= */

  .responsive-showcase {
    min-height: auto;

    padding:
      68px
      0
      74px;
  }


  .responsive-grid {
    grid-template-columns: 1fr;

    gap: 42px;
  }


  .responsive-copy {
    max-width: 680px;
  }


  .responsive-stage {
    height: 430px;
  }


  .responsive-device-frame {
    width:
      min(
        100%,
        610px
      );
  }


  .responsive-status {
    right:
      clamp(
        18px,
        4vw,
        46px
      );
  }


  /* =======================================================
     ACCESSIBILITY
  ======================================================= */

  .accessibility {
    width:
      calc(
        100% -
        32px
      );

    margin:
      30px auto;

    border-radius: 30px;
  }


  .access-grid {
    min-height: auto;

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

    gap:
      clamp(
        34px,
        5vw,
        54px
      );

    padding-block:
      58px;
  }


  .access-title {
    font-size:
      clamp(
        34px,
        4.8vw,
        43px
      );
  }


  .access-switcher {
    max-width: 500px;
  }


  .access-visual {
    width:
      min(
        280px,
        32vw
      );
  }


  /* =======================================================
     INSTITUTIONAL
  ======================================================= */

  .institutional {
    padding:
      50px
      0;
  }


  .institutional-grid {
    grid-template-columns:
      auto
      minmax(0, 1fr);

    gap:
      24px;

    padding:
      28px 0;
  }


  .institutional-action {
    grid-column: 2;

    justify-self: start;
  }


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

  .contact-grid {
    grid-template-columns: 1fr;

    gap: 46px;
  }


  .contact-copy {
    max-width: 680px;
  }


  .contact-info {
    max-width: 560px;
  }


  .contact-form {
    width:
      min(
        100%,
        680px
      );

    justify-self: start;
  }


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

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

.footer-grid {
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(160px, 0.58fr);

  gap:
    42px
    48px;
}


.footer-contact {
  grid-column:
    1 / -1;
}


.footer-contact-list {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 10px;
}


.footer-bottom {
  align-items: flex-start;
}


.footer-bottom-meta {
  max-width: 360px;

  text-align: right;
}

}


/* =========================================================
   29. MOBILE BASE
   <= 768px

   - Altura natural.
   - Una sola columna.
   - Padding vertical controlado.
   - Controles touch cómodos.
========================================================= */

@media (max-width: 768px) {

  :root {
    --header-height: 66px;

    --page-gutter:
      clamp(
        20px,
        5vw,
        28px
      );

    --section-space:
      clamp(
        58px,
        13vw,
        76px
      );
  }


  /* =======================================================
     GLOBAL
  ======================================================= */

  section {
    min-height: auto;
  }


  .section-shell {
    padding-block:
      var(--section-space);
  }


  .container {
    width: 100%;

    padding-inline:
      var(--page-gutter);
  }


  .section-head {
    width: 100%;

    margin-bottom: 34px;

    text-align: left;
  }


  .section-title {
    margin-left: 0;
    margin-right: 0;

    font-size:
      clamp(
        31px,
        8vw,
        40px
      );

    text-wrap: pretty;
  }


  .section-copy {
    margin-left: 0;
    margin-right: 0;

    font-size: 15px;
  }


  /* =======================================================
     HEADER
  ======================================================= */

  .nav {
    grid-template-columns:
      auto
      1fr
      auto;

    gap: 10px;
  }


  .nav-links {
    display: none;
  }


  .nav-actions {
    gap: 5px;
  }


  .page-theme-controls {
    gap: 2px;

    padding: 2px;
  }


  .theme-btn {
    width: 32px;
    height: 32px;

    border-radius: 8px;
  }


  .theme-btn
  .material-symbols-outlined {
    font-size: 16px;
  }


  .nav-primary-action {
    display: none;
  }


  .menu-toggle {
    width: 38px;
    height: 38px;

    display: grid;
  }


  .mobile-menu {
    position: fixed;

    top:
      calc(
        var(--header-height) +
        8px
      );

    left:
      var(--page-gutter);

    right:
      var(--page-gutter);

    z-index: 1001;

    display: none;

    gap: 3px;

    padding: 10px;

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

    border-radius: 16px;

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

    box-shadow:
      var(--shadow-large);

    backdrop-filter:
      blur(18px);

    -webkit-backdrop-filter:
      blur(18px);
  }


  .mobile-menu.open {
    display: grid;
  }


  .mobile-menu a {
    min-height: 46px;

    display: flex;

    align-items: center;

    padding:
      10px 12px;

    border-radius: 10px;

    color:
      var(--text-soft);

    font-size: 13px;

    font-weight: 500;
  }


  html[data-page-theme="dark"]
  .mobile-menu {
    border-color:
      rgba(210, 187, 255, 0.10);

    background:
      rgba(21, 24, 45, 0.985);
  }


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

  .hero {
    min-height: auto;

    display: block;
  }


  .hero-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap:
      clamp(
        42px,
        11vw,
        58px
      );

    padding-block:
      clamp(
        48px,
        11vw,
        68px
      );
  }


  .hero-copy {
    width: 100%;
  }


  .hero-kicker {
    margin-bottom: 15px;
  }


  .hero-title {
    max-width: 650px;

    font-size:
      clamp(
        36px,
        9vw,
        48px
      );

    line-height: 1.04;

    letter-spacing: -0.048em;
  }


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

    margin-top: 19px;

    font-size: 15px;
  }


  .hero-actions {
    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 10px;

    margin-top: 23px;
  }


  .hero-actions
  .primary-btn,
  .hero-actions
  .secondary-btn {
    width: 100%;

    min-height: 48px;
  }


  .hero-metrics {
    display: flex;

    align-items: flex-start;

    gap:
      14px
      20px;

    margin-top: 22px;
  }


  .login-wrap {
    width: 100%;

    max-width: 560px;

    justify-self: stretch;
  }


  .login-wrap::before {
    inset:
      -4%
      -3%
      6%
      8%;
  }


  .login-card {
    width: 100%;

    padding:
      clamp(
        22px,
        5vw,
        28px
      );

    border-radius: 20px;
  }


  .login-description {
    font-size: 12.5px;
  }


  .input-group input {
    height: 56px;

    font-size: 16px;
  }


  .input-group textarea {
    min-height: 132px;

    font-size: 16px;
  }


  /* =======================================================
     IDENTIDAD
  ======================================================= */

  .capabilities::before {
    right: -230px;
  }


  .cap-identity-head {
    width: 100%;

    margin-bottom: 32px;
  }


  .cap-identity-head h2 {
    font-size:
      clamp(
        31px,
        8vw,
        40px
      );
  }


  .cap-identity-grid {
    grid-template-columns: 1fr;

    gap: 18px;
  }


  .identity-card-stack {
    grid-template-columns: 1fr;

    grid-template-rows: auto;

    gap: 18px;
  }


  .identity-card--about {
    min-height: auto;

    padding:
      clamp(
        27px,
        6vw,
        34px
      );
  }


  .identity-card--about
  .identity-card-content {
    margin-top:
      clamp(
        52px,
        12vw,
        72px
      );
  }


  .identity-card--about
  .identity-card-content h3 {
    font-size:
      clamp(
        27px,
        7vw,
        35px
      );
  }


  .identity-card--mission,
  .identity-card--vision {
    min-height: 215px;

    padding:
      23px
      22px;
  }


  .identity-card--mission
  .identity-card-content,
  .identity-card--vision
  .identity-card-content {
    padding-right: 22px;
  }


  /* =======================================================
     SINERGIA ESTRUCTURAL — MOBILE

     INPUTS
       ↓
     CORE
       ↓
     OUTPUTS
  ======================================================= */

  .ecosystem {
    padding-block:
      var(--section-space);
  }


  .ecosystem-head {
    width: 100%;

    margin:
      0
      auto
      36px;

    text-align: left;
  }


  .ecosystem-head
  .eyebrow {
    justify-content: flex-start;
  }


  .ecosystem-head h2 {
    margin-left: 0;
    margin-right: 0;

    font-size:
      clamp(
        31px,
        8vw,
        39px
      );
  }


  .ecosystem-head p {
    margin-left: 0;
    margin-right: 0;

    font-size: 14.5px;
  }


  .ecosystem-board {
    width: 100%;

    height: auto;

    display: grid;

    grid-template-columns: 1fr;

    gap: 24px;
  }


  /*
   * Desktop SVG fuera de mobile.
   */

  .ecosystem-circuit,
  .ecosystem-content-connect-line {
    display: none;
  }


  .ecosystem-column {
    position: relative;

    inset: auto;

    width: 100%;

    display: grid;

    grid-template-columns: 1fr;

    gap: 12px;

    transform: none;
  }


  .ecosystem-column--inputs {
    order: 1;
  }


  .ecosystem-core-wrap {
    position: relative;

    inset: auto;

    order: 2;

    width: 100%;
    height: 215px;

    transform: none;
  }


  /*
   * Conectores verticales discretos.
   */

  .ecosystem-core-wrap::before,
  .ecosystem-core-wrap::after {
    content: "";

    position: absolute;

    left: 50%;

    z-index: 1;

    width: 1px;
    height: 25px;

    background:
      linear-gradient(
        180deg,
        transparent,
        rgba(99, 14, 212, 0.32),
        transparent
      );

    transform:
      translateX(-50%);
  }


  .ecosystem-core-wrap::before {
    top: -24px;
  }


  .ecosystem-core-wrap::after {
    bottom: -24px;
  }


  .ecosystem-column--outputs {
    order: 3;
  }


  .eco-terminal {
    width: 100%;

    min-height: 82px;

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

    gap: 12px;

    padding:
      13px
      14px;

    border-radius: 15px;
  }


  .eco-terminal-copy strong {
    white-space: normal;

    text-overflow: clip;

    overflow: visible;
  }


  .eco-terminal-node {
    display: none;
  }


  .ecosystem-core {
    width: 180px;
    height: 150px;
  }


  .ecosystem-core-structure--one {
    width: 206px;
    height: 180px;
  }


  .ecosystem-core-structure--two {
    width: 218px;
    height: 194px;
  }


  .ecosystem-flow {
    max-width: 100%;

    gap:
      7px
      8px;

    margin-top: 28px;

    line-height: 1.5;
  }


  /* =======================================================
     PROCESS
  ======================================================= */

  .process {
    min-height: auto;

    padding:
      var(--section-space)
      0;
  }


  .process
  .section-head {
    margin:
      0
      0
      38px;

    text-align: left;
  }


  .process-timeline {
    width: 100%;

    height: auto;
  }


  .process-axis {
    display: none;
  }


  .process-steps {
    width: 100%;
    height: auto;

    display: grid;

    grid-template-columns: 1fr;

    gap: 14px;

    margin: 0;
  }


  .process-step {
    min-height: 110px;

    display: grid;

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

    align-items: center;
  }


  .process-card,
  .process-step--top
  .process-card,
  .process-step--bottom
  .process-card {
    position: relative;

    inset: auto;

    grid-column: 2;
    grid-row: 1;

    width: 100%;

    min-height: 104px;

    align-items: flex-start;

    padding:
      17px
      18px;

    text-align: left;
  }


  .process-icon {
    justify-items: start;

    margin-bottom: 7px;
  }


  .process-card p {
    max-width: none;
  }


  .process-node,
  .process-step--featured
  .process-node {
    position: relative;

    inset: auto;

    grid-column: 1;
    grid-row: 1;

    justify-self: center;

    transform: none;
  }


  .process-connector {
    display: none;
  }


  .process-continuity {
    position: static;

    justify-content: center;

    margin-top: 20px;
  }


  .agile-wrap {
    margin-top: 30px;
  }


  .agile-card {
    width: 100%;

    flex-wrap: wrap;

    justify-content: flex-start;

    gap:
      12px
      14px;

    padding:
      14px
      16px;
  }


  .agile-separator {
    display: none;
  }


  .agile-flow {
    width: 100%;

    justify-content: flex-start;

    flex-wrap: wrap;

    gap:
      8px
      10px;
  }


  /* =======================================================
     RESPONSIVE SHOWCASE
  ======================================================= */

  .responsive-showcase {
    min-height: auto;

    padding:
      var(--section-space)
      0;
  }


  .responsive-grid {
    grid-template-columns: 1fr;

    gap: 38px;
  }


  .responsive-copy {
    max-width: 100%;
  }


  .responsive-copy h2 {
    font-size:
      clamp(
        30px,
        8vw,
        39px
      );
  }


  .device-selector {
    width: 100%;

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

    margin-top: 22px;
  }


  .device-selector-btn {
    min-width: 0;

    padding:
      8px
      8px;

    font-size: 10px;
  }


  .responsive-stage {
    height: 430px;

    overflow: hidden;
  }


  /*
   * La demo mantiene proporción interna.
   * Se escala como unidad, no se aplasta.
   */

  .responsive-device-frame {
    width: 520px;
    height: 330px;

    max-width: none;

    transform:
      scale(0.68);

    transform-origin:
      center;
  }


  .responsive-device[data-device="tablet"]
  .responsive-device-frame {
    width: 410px;
    height: 375px;

    transform:
      scale(0.78);
  }


  .responsive-device[data-device="mobile"]
  .responsive-device-frame {
    width: 255px;
    height: 405px;

    transform:
      scale(0.91);
  }


  .responsive-status {
    left: 50%;
    right: auto;

    bottom: 2px;

    width:
      min(
        calc(
          100% -
          32px
        ),
        220px
      );

    transform:
      translateX(-50%);
  }


  /* =======================================================
     ACCESSIBILITY
  ======================================================= */

  .accessibility {
    width:
      calc(
        100% -
        20px
      );

    min-height: auto;

    margin:
      18px
      auto;

    border-radius: 25px;
  }


  .access-grid {
    min-height: auto;

    grid-template-columns: 1fr;

    gap: 34px;

    padding-block:
      clamp(
        48px,
        11vw,
        62px
      );
  }


  .access-copy {
    width: 100%;
  }


  .access-title {
    max-width: 600px;

    font-size:
      clamp(
        31px,
        8vw,
        40px
      );
  }


  .access-copy > p {
    font-size: 15px;
  }


  .access-switcher {
    width: 100%;

    max-width: 520px;

    padding:
      16px
      12px;
  }


  .access-switcher-track {
    gap: 0;
  }


  .access-theme {
    min-height: 62px;

    font-size: 9px;
  }


  .access-theme-dot {
    width: 36px;
    height: 36px;
  }


  .access-visual {
    width:
      min(
        280px,
        76vw
      );
  }


  .access-center {
    width: 84px;
    height: 84px;
  }


  /* =======================================================
     INSTITUTIONAL
  ======================================================= */

  .institutional {
    min-height: auto;

    padding:
      clamp(
        42px,
        10vw,
        58px
      )
      0;
  }


  .institutional-grid {
    grid-template-columns: 1fr;

    gap: 17px;

    padding:
      26px
      0;
  }


  .institutional-icon {
    width: 48px;
    height: 48px;
  }


  .institutional-copy h2 {
    font-size:
      clamp(
        27px,
        7vw,
        34px
      );
  }


  .institutional-copy p {
    max-width: 620px;
  }


  .institutional-action {
    grid-column: 1;

    width:
      min(
        100%,
        240px
      );

    margin-top: 3px;
  }


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

  .contact {
    min-height: auto;
  }


  .contact-grid {
    grid-template-columns: 1fr;

    gap: 42px;
  }


  .contact-copy {
    max-width: 100%;
  }


  .contact-copy h2 {
    font-size:
      clamp(
        31px,
        8vw,
        40px
      );
  }


  .contact-info {
    width: 100%;

    max-width: 520px;

    margin-top: 24px;
  }


  .contact-form {
    width: 100%;

    padding:
      clamp(
        22px,
        5vw,
        28px
      );
  }


  .contact-submit {
    min-height: 50px;
  }


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

  .footer {
    width:
      calc(
        100% -
        12px
      );

    margin:
      0
      auto;

    padding:
      46px
      0
      24px;

    border-radius:
      26px
      26px
      0
      0;
  }


  .footer-grid {
    grid-template-columns: 1fr;

    gap: 38px;
  }


  .footer-links {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 30px;
  }


  .footer-bottom {
    flex-direction: column;

    align-items: flex-start;

    gap: 8px;
  }

}


/* =========================================================
   30. CELULARES GRANDES
   480px - 768px
========================================================= */

@media
  (min-width: 480px)
  and
  (max-width: 768px) {

  :root {
    --page-gutter:
      clamp(
        22px,
        5.2vw,
        30px
      );
  }


  /* -------------------------------------------------------
     HEADER
  ------------------------------------------------------- */

  .brand-name {
    display: inline;
  }


  /*
   * Caben los tres controles de tema + menú.
   */

  .theme-btn {
    width: 32px;
    height: 32px;
  }


  /* -------------------------------------------------------
     HERO
  ------------------------------------------------------- */

  .hero-title {
    font-size:
      clamp(
        38px,
        8.2vw,
        48px
      );
  }


  .hero-actions {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  /*
   * Mantener métricas horizontales mientras
   * haya espacio suficiente.
   */

  .hero-metrics {
    display: flex;
  }


  /* -------------------------------------------------------
     IDENTIDAD
  ------------------------------------------------------- */

  .identity-card-orbit {
    transform:
      scale(0.88);

    transform-origin:
      top right;
  }


  /* -------------------------------------------------------
     PROCESS
  ------------------------------------------------------- */

  .process-card {
    min-height: 108px;
  }


  /* -------------------------------------------------------
     RESPONSIVE SHOWCASE
  ------------------------------------------------------- */

  .responsive-stage {
    height: 440px;
  }


  .responsive-device-frame {
    transform:
      scale(0.72);
  }


  .responsive-device[data-device="tablet"]
  .responsive-device-frame {
    transform:
      scale(0.81);
  }


  .responsive-device[data-device="mobile"]
  .responsive-device-frame {
    transform:
      scale(0.94);
  }


  /* -------------------------------------------------------
     CONTACT
  ------------------------------------------------------- */

  .contact-info-item {
    grid-template-columns:
      46px
      minmax(0, 1fr)
      auto;
  }

}


/* =========================================================
   31. CELULARES PEQUEÑOS
   <= 479px
========================================================= */

@media (max-width: 479px) {

  :root {
    --header-height: 64px;

    --page-gutter:
      clamp(
        17px,
        5vw,
        21px
      );

    --section-space:
      clamp(
        54px,
        15vw,
        68px
      );
  }


  /* =======================================================
     GLOBAL
  ======================================================= */

  .eyebrow {
    font-size: 9px;

    letter-spacing: 0.13em;
  }


  .eyebrow::before {
    width: 22px;
  }


  /* =======================================================
     HEADER
  ======================================================= */

  .brand {
    gap: 7px;

    font-size: 15px;
  }


  .brand-mark {
    width: 31px;
    height: 31px;
  }


  .brand-name {
    display: none;
  }


  .nav {
    gap: 6px;
  }


  .nav-actions {
    gap: 4px;
  }


  .page-theme-controls {
    gap: 1px;
  }


  .theme-btn {
    width: 30px;
    height: 30px;
  }


  .theme-btn
  .material-symbols-outlined {
    font-size: 15px;
  }


  .menu-toggle {
    width: 36px;
    height: 36px;
  }


  .mobile-menu {
    left: 12px;
    right: 12px;
  }


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

  .hero-grid {
    gap: 40px;

    padding-block:
      44px
      58px;
  }


  .hero-kicker {
    max-width: 100%;

    white-space: normal;
  }


  .hero-title {
    font-size:
      clamp(
        33px,
        10.2vw,
        41px
      );

    line-height: 1.045;
  }


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


  .hero-actions {
    grid-template-columns: 1fr;
  }


  .hero-metrics {
    display: grid;

    grid-template-columns: 1fr;

    gap: 11px;
  }


  .login-wrap::before {
    inset:
      -2%
      -1%
      5%
      5%;
  }


  .login-card {
    padding:
      22px
      18px;

    border-radius: 18px;
  }


  .login-card h2 {
    font-size:
      clamp(
        21px,
        6vw,
        25px
      );
  }


  .otp-inputs {
    gap: 4px;
  }


  .otp-input {
    height: 40px;

    font-size: 14px;
  }


  /* =======================================================
     IDENTIDAD
  ======================================================= */

  .cap-identity-head h2 {
    font-size:
      clamp(
        29px,
        9vw,
        36px
      );
  }


  .identity-card--about {
    padding:
      26px
      20px;
  }


  .identity-card-top,
  .identity-card-row {
    gap: 14px;
  }


  .identity-card-icon {
    width: 43px;
    height: 43px;
  }


  .identity-card-index {
    top: 16px;
    right: 17px;
  }


  .identity-card-orbit {
    top: 28px;
    right: 42px;

    transform:
      scale(0.72);

    transform-origin:
      top right;
  }


  .identity-card--about
  .identity-card-content {
    margin-top: 64px;
  }


  .identity-card--about
  .identity-card-content h3 {
    font-size:
      clamp(
        25px,
        8vw,
        31px
      );
  }


  .identity-signature {
    gap: 6px;

    margin-top: 26px;

    font-size: 7.8px;
  }


  .identity-card--mission,
  .identity-card--vision {
    min-height: 215px;

    padding:
      22px
      18px;
  }


  .identity-card--mission
  .identity-card-content,
  .identity-card--vision
  .identity-card-content {
    padding-right: 0;
  }


  /* =======================================================
     SINERGIA
  ======================================================= */

  .ecosystem-head h2 {
    font-size:
      clamp(
        29px,
        9vw,
        36px
      );
  }


  .eco-terminal {
    min-height: 84px;

    padding:
      13px
      12px;
  }


  .eco-terminal-icon {
    width: 39px;
    height: 39px;
  }


  .eco-terminal-label {
    font-size: 11.5px;
  }


  .eco-terminal-copy strong {
    padding-right: 3px;

    font-size: 9px;
  }


  .eco-terminal-badge {
    top: 7px;
    right: 8px;
  }


  .ecosystem-core-wrap {
    height: 205px;
  }


  .ecosystem-core {
    width: 168px;
    height: 146px;

    padding:
      20px
      17px;
  }


  .ecosystem-core-structure--one {
    width: 194px;
    height: 174px;
  }


  .ecosystem-core-structure--two {
    width: 207px;
    height: 185px;
  }


  .ecosystem-flow {
    font-size: 7.4px;
  }


  /* =======================================================
     PROCESS
  ======================================================= */

  .process
  .section-head {
    margin-bottom: 32px;
  }


  .process-steps {
    gap: 12px;
  }


  .process-step {
    grid-template-columns:
      40px
      minmax(0, 1fr);

    min-height: 108px;
  }


  .process-node,
  .process-step--featured
  .process-node {
    width: 31px;
    height: 31px;

    font-size: 8px;
  }


  .process-step--featured
  .process-node {
    width: 35px;
    height: 35px;
  }


  .process-card,
  .process-step--top
  .process-card,
  .process-step--bottom
  .process-card {
    min-height: 104px;

    padding:
      16px
      15px;
  }


  .process-icon {
    width: 34px;
    height: 34px;
  }


  .agile-card {
    padding:
      13px
      14px;
  }


  .agile-flow {
    display: grid;

    grid-template-columns:
      auto
      auto
      auto;

    justify-content: start;
  }


  /*
   * En celular muy angosto las flechas
   * no aportan suficiente información.
   */

  .agile-arrow {
    opacity: 0.55;
  }


  /* =======================================================
     RESPONSIVE SHOWCASE
  ======================================================= */

  .responsive-copy h2 {
    font-size:
      clamp(
        29px,
        9vw,
        36px
      );
  }


  .device-selector {
    gap: 2px;

    padding: 3px;
  }


  .device-selector-btn {
    min-height: 42px;

    gap: 4px;

    padding:
      7px
      5px;

    font-size: 9px;
  }


  .device-selector-btn
  .material-symbols-outlined {
    font-size: 15px;
  }


  .responsive-stage {
    height: 405px;
  }


  .responsive-device-frame {
    transform:
      scale(0.59);
  }


  .responsive-device[data-device="tablet"]
  .responsive-device-frame {
    transform:
      scale(0.69);
  }


  .responsive-device[data-device="mobile"]
  .responsive-device-frame {
    transform:
      scale(0.83);
  }


  .responsive-status {
    width:
      min(
        90%,
        200px
      );
  }


  /* =======================================================
     ACCESSIBILITY
  ======================================================= */

  .accessibility {
    width:
      calc(
        100% -
        12px
      );

    margin:
      12px
      auto;

    border-radius: 22px;
  }


  .access-grid {
    gap: 28px;

    padding-block:
      46px;
  }


  .access-title {
    font-size:
      clamp(
        29px,
        9vw,
        36px
      );
  }


  .access-title-line {
    display: inline;
  }


  .access-switcher {
    padding:
      15px
      7px;
  }


  .access-switcher-track {
    margin-top: 13px;
  }


  .access-switcher-track::before {
    left: 10%;
    right: 10%;

    top: 17px;
  }


  .access-theme {
    min-height: 58px;

    gap: 6px;

    font-size: 8px;
  }


  .access-theme-dot {
    width: 34px;
    height: 34px;
  }


  .access-theme-dot::after {
    width: 9px;
    height: 9px;
  }


  .access-theme-dot--normal::after {
    width: 10px;
    height: 10px;
  }


  .access-visual {
    width:
      min(
        255px,
        78vw
      );
  }


  .access-center {
    width: 78px;
    height: 78px;
  }


  .access-center
  .material-symbols-outlined {
    font-size: 33px;
  }


  /* =======================================================
     INSTITUTIONAL
  ======================================================= */

  .institutional-grid {
    padding:
      23px
      0;
  }


  .institutional-copy h2 {
    font-size:
      clamp(
        26px,
        8vw,
        32px
      );
  }


  .institutional-action {
    width: 100%;
  }


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

  .contact-copy h2 {
    font-size:
      clamp(
        29px,
        9vw,
        36px
      );
  }


  .contact-info {
    gap: 9px;
  }


  .contact-info-item {
    min-height: 68px;

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

    gap: 11px;

    padding:
      10px
      11px;
  }


  .contact-info-icon {
    width: 40px;
    height: 40px;
  }


  .contact-info-copy {
    min-width: 0;
  }


  .contact-info-copy a,
  .contact-info-copy > span {
    overflow-wrap: anywhere;
  }


  .contact-info-arrow,
  .contact-info-state {
    display: none;
  }


  .contact-form {
    padding:
      22px
      17px;
  }


  .contact-form-head {
    gap: 12px;
  }


  .contact-form-emblem {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;
  }


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

  .footer {
    width:
      calc(
        100% -
        8px
      );

    padding:
      42px
      0
      22px;

    border-radius:
      23px
      23px
      0
      0;
  }


  .footer-grid {
    gap: 32px;
  }


  .footer-links {
    grid-template-columns: 1fr;

    gap: 26px;
  }

}


/* =========================================================
   32. EXTRA SMALL
   <= 359px

   No constituye un breakpoint estructural nuevo.
   Sólo evita desbordes en dispositivos muy estrechos.
========================================================= */

@media (max-width: 359px) {

  :root {
    --page-gutter: 16px;
  }


  .theme-btn {
    width: 28px;
    height: 28px;
  }


  .menu-toggle {
    width: 34px;
    height: 34px;
  }


  .hero-title {
    font-size:
      clamp(
        31px,
        10vw,
        35px
      );
  }


  .otp-inputs {
    gap: 3px;
  }


  .otp-input {
    height: 38px;
  }


  .device-selector-btn
  .material-symbols-outlined {
    display: none;
  }


  .access-theme {
    font-size: 7.5px;
  }


  .access-theme-dot {
    width: 32px;
    height: 32px;
  }

}


/* =========================================================
   33. SHORT NOTEBOOK / DESKTOP HEIGHT

   Se mantiene separado del ancho porque resuelve
   un problema distinto: altura disponible.

   No afecta móvil ni tablet.
========================================================= */

@media
  (min-width: 1025px)
  and
  (max-height: 760px) {

  .hero-grid {
    padding-block:
      34px;
  }


  .hero-title {
    font-size:
      clamp(
        38px,
        4vw,
        50px
      );
  }


  .hero-description {
    margin-top: 17px;
  }


  .hero-actions {
    margin-top: 19px;
  }


  .hero-metrics {
    margin-top: 18px;
  }


  .section-shell {
    padding-block: 58px;
  }


  .identity-card--about {
    min-height: 390px;
  }


  .identity-card--mission,
  .identity-card--vision {
    min-height: 185px;
  }


  .ecosystem {
    padding-block: 56px;
  }


  .ecosystem-head {
    margin-bottom: 25px;
  }


  .ecosystem-board {
    height: 370px;
  }


  .ecosystem-flow {
    margin-top: 20px;
  }


  .process {
    padding:
      52px
      0
      56px;
  }


  .process
  .section-head {
    margin-bottom: 22px;
  }


  .process-timeline {
    height: 340px;
  }


  .responsive-showcase {
    padding:
      54px
      0;
  }


  .responsive-stage {
    height: 410px;
  }


  .access-grid {
    min-height: 450px;

    padding-block: 46px;
  }


  .institutional {
    padding:
      38px
      0;
  }


  .contact.section-shell {
    padding-block: 58px;
  }

}


/* =========================================================
   34. LANDSCAPE MOBILE

   Evita secciones absurdamente altas cuando el celular
   está girado.
========================================================= */

@media
  (max-width: 768px)
  and
  (orientation: landscape)
  and
  (max-height: 520px) {

  .hero-grid {
    padding-block:
      38px
      48px;
  }


  .hero-title {
    font-size:
      clamp(
        32px,
        6.5vw,
        40px
      );
  }


  .accessibility {
    margin:
      10px
      auto;
  }


  .access-grid {
    padding-block: 42px;
  }


  .access-visual {
    width:
      min(
        230px,
        45vw
      );
  }

}


/* =========================================================
   35. REDUCED MOTION
========================================================= */

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

  html {
    scroll-behavior: auto;
  }


  .word-reveal,
  .reveal {
    opacity: 1;

    filter: none;

    transform: none;

    animation: none;
  }


  .process-axis-progress,
  .access-wave,
  .login-button.is-loading
  .material-symbols-outlined {
    animation: none;
  }


  .site-particles {
    opacity: 0.22;
  }


  .login-card,
  .identity-card,
  .identity-card-icon,
  .eco-terminal,
  .eco-terminal-icon,
  .eco-terminal-node,
  .process-card,
  .process-icon,
  .responsive-device-frame,
  .contact-form,
  .contact-info-item,
  .contact-form-emblem,
  .access-center,
  .theme-btn,
  .input-group label,
  .input-group input,
  .input-group textarea,
  .field-message,
  .credential-fields,
  .otp-area,
  .otp-input {
    transition: none;
  }


  .process-card:hover
  .process-icon,
  .process-card:hover
  .process-icon
  .material-symbols-outlined,
  .contact-form-head:hover
  .contact-form-emblem,
  .contact-form-head:hover
  .contact-form-emblem
  .material-symbols-outlined {
    transform: none;
  }

}

/* =========================================================
   32. AJUSTES FINALES — DISEÑO / DARK MODE / VALIDACIÓN

   Mantiene intacta la base anterior y añade:
   - Botones del hero corregidos en dark mode.
   - Campos vacíos visualmente neutrales hasta submit.
   - Sinergia refinada en dark mode.
   - Hover de proceso con card estable e icono desplazándose.
   - Hover del emblema "Cuéntanos tu idea".
   - Responsive demo corregido en dark mode.
   - CTA institucional corregido en dark mode.
========================================================= */


/* =========================================================
   32.1 HERO — BOTONES EN DARK MODE
========================================================= */

html[data-page-theme="dark"]
.hero-primary-action {
  border-color:
    rgba(139, 84, 245, 0.74);

  background:
    linear-gradient(
      135deg,
      #5e12c5 0%,
      #7118df 56%,
      #7c3aed 100%
    );

  color:
    #ffffff;

  box-shadow:
    0 12px 30px
    rgba(99, 14, 212, 0.24);
}


html[data-page-theme="dark"]
.hero-secondary-action {
  border-color:
    rgba(210, 187, 255, 0.17);

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

  color:
    #ddd6e9;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.03);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);
}


@media (hover: hover) {

  html[data-page-theme="dark"]
  .hero-primary-action:hover {
    border-color:
      rgba(177, 132, 255, 0.72);

    background:
      linear-gradient(
        135deg,
        #6813d6 0%,
        #7b20e7 55%,
        #8a4af0 100%
      );

    box-shadow:
      0 16px 34px
      rgba(99, 14, 212, 0.31);
  }


  html[data-page-theme="dark"]
  .hero-secondary-action:hover {
    border-color:
      rgba(210, 187, 255, 0.30);

    background:
      rgba(124, 58, 237, 0.10);

    color:
      #f4effc;

    box-shadow:
      0 10px 24px
      rgba(0, 0, 0, 0.10);
  }

}


/* =========================================================
   32.2 VALIDACIÓN — VACÍO EN BLUR = NEUTRAL

   El JS final debe usar .is-submit-invalid cuando el error
   obligatorio proviene del botón de envío.

   Si el campo está vacío y el usuario sólo entra/sale:
   - no borde rojo;
   - no mensaje rojo;
   - no label rojo.
========================================================= */

.input-group.is-invalid:not(.is-submit-invalid):has(input:placeholder-shown),
.input-group.is-invalid:not(.is-submit-invalid):has(textarea:placeholder-shown) {
  --field-empty-invalid: 1;
}


.input-group.is-invalid:not(.is-submit-invalid):has(input:placeholder-shown)
input,
.input-group.is-invalid:not(.is-submit-invalid):has(textarea:placeholder-shown)
textarea {
  border-color:
    rgba(69, 58, 89, 0.16);

  background:
    rgba(250, 248, 253, 0.94);

  box-shadow:
    none;
}


.input-group.is-invalid:not(.is-submit-invalid):has(input:placeholder-shown)
label,
.input-group.is-invalid:not(.is-submit-invalid):has(textarea:placeholder-shown)
label {
  color:
    var(--primary);
}


.input-group.is-invalid:not(.is-submit-invalid):has(input:placeholder-shown)
.field-message,
.input-group.is-invalid:not(.is-submit-invalid):has(textarea:placeholder-shown)
.field-message {
  min-height: 0;

  margin-top: 0;

  opacity: 0;

  transform:
    translateY(-3px);
}


html[data-page-theme="dark"]
.input-group.is-invalid:not(.is-submit-invalid):has(input:placeholder-shown)
input,
html[data-page-theme="dark"]
.input-group.is-invalid:not(.is-submit-invalid):has(textarea:placeholder-shown)
textarea {
  border-color:
    rgba(210, 187, 255, 0.13);

  background:
    #0d1021;

  box-shadow:
    none;
}


html[data-page-theme="dark"]
.input-group.is-invalid:not(.is-submit-invalid):has(input:placeholder-shown)
label,
html[data-page-theme="dark"]
.input-group.is-invalid:not(.is-submit-invalid):has(textarea:placeholder-shown)
label {
  color:
    #a983ef;
}


.field-message:empty {
  min-height: 0;

  margin-top: 0;
}


.input-group.is-invalid
.field-message:not(:empty) {
  min-height: 15px;

  margin-top: 6px;
}


/* =========================================================
   32.3 SINERGIA ESTRUCTURAL — DARK MODE REFINADO

   NO modifica la geometría de las conexiones.
========================================================= */

html[data-page-theme="dark"]
.cms.ecosystem {
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(124, 58, 237, 0.055),
      transparent 29%
    ),
    linear-gradient(
      180deg,
      #0c0f21 0%,
      #0e1227 48%,
      #0b0f21 100%
    );
}


html[data-page-theme="dark"]
.ecosystem-head h2 {
  color:
    #f5f1fb;
}


html[data-page-theme="dark"]
.ecosystem-head h2 span {
  color:
    #7e2ce6;
}


html[data-page-theme="dark"]
.ecosystem-head p {
  color:
    #bbb5c6;
}


html[data-page-theme="dark"]
.eco-terminal {
  border-color:
    rgba(210, 187, 255, 0.105);

  background:
    linear-gradient(
      145deg,
      rgba(20, 24, 45, 0.98),
      rgba(18, 21, 40, 0.98)
    );

  box-shadow:
    0 12px 32px
    rgba(0, 0, 0, 0.15),
    inset 0 1px 0
    rgba(255, 255, 255, 0.022);
}


html[data-page-theme="dark"]
.eco-terminal-icon {
  border:
    1px solid
    rgba(195, 164, 255, 0.10);

  background:
    rgba(124, 58, 237, 0.14);

  color:
    #c8a9ff;
}


html[data-page-theme="dark"]
.eco-terminal-label {
  color:
    #f4f1fb;
}


html[data-page-theme="dark"]
.eco-terminal-copy strong {
  color:
    #aaa4b7;
}


html[data-page-theme="dark"]
.eco-terminal-badge {
  border-color:
    rgba(210, 187, 255, 0.10);

  background:
    rgba(233, 224, 247, 0.94);

  color:
    #7450af;

  box-shadow:
    0 5px 14px
    rgba(0, 0, 0, 0.10);
}


html[data-page-theme="dark"]
.eco-terminal-node {
  border-color:
    rgba(166, 110, 255, 0.78);

  background:
    #11152b;

  box-shadow:
    0 0 0 2px
    rgba(124, 58, 237, 0.04);
}


html[data-page-theme="dark"]
.ecosystem-core {
  border-color:
    rgba(210, 187, 255, 0.12);

  background:
    linear-gradient(
      145deg,
      #11152d 0%,
      #12172f 58%,
      #171a36 100%
    );

  box-shadow:
    0 24px 54px
    rgba(0, 0, 0, 0.25),
    0 0 0 1px
    rgba(124, 58, 237, 0.025);
}


html[data-page-theme="dark"]
.ecosystem-core-caption {
  border:
    1px solid
    rgba(210, 187, 255, 0.08);

  background:
    rgba(31, 34, 57, 0.96);

  color:
    #b89be8;

  box-shadow:
    0 7px 17px
    rgba(0, 0, 0, 0.09);
}


html[data-page-theme="dark"]
.ecosystem-core-structure--one {
  border-top-color:
    rgba(139, 79, 241, 0.26);

  border-right-color:
    rgba(139, 79, 241, 0.13);

  border-bottom-color:
    rgba(139, 79, 241, 0.17);
}


html[data-page-theme="dark"]
.ecosystem-core-structure--two {
  border-left-color:
    rgba(139, 79, 241, 0.13);

  border-top-color:
    rgba(139, 79, 241, 0.16);
}


html[data-page-theme="dark"]
.ecosystem-content-connect-line {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(137, 75, 235, 0.34),
      rgba(119, 44, 222, 0.72) 34%,
      rgba(119, 44, 222, 0.72) 66%,
      rgba(137, 75, 235, 0.34)
    );

  box-shadow:
    0 0 8px
    rgba(124, 58, 237, 0.06);
}


html[data-page-theme="dark"]
#eco-paths-base path {
  opacity: 0.54;
}


html[data-page-theme="dark"]
#eco-path-nodes circle {
  fill:
    #11152b;

  stroke:
    rgba(166, 110, 255, 0.62);
}


html[data-page-theme="dark"]
.ecosystem-flow {
  color:
    #7e788a;
}


html[data-page-theme="dark"]
.ecosystem-flow i {
  background:
    rgba(173, 122, 255, 0.24);
}


html[data-page-theme="dark"]
.ecosystem-flow strong,
html[data-page-theme="dark"]
.ecosystem-flow-icon {
  color:
    #a56cef;
}


html[data-page-theme="dark"]
.eco-terminal:focus-visible,
html[data-page-theme="dark"]
.eco-terminal.is-active {
  border-color:
    rgba(166, 110, 255, 0.34);

  background:
    linear-gradient(
      145deg,
      rgba(29, 32, 56, 0.99),
      rgba(24, 27, 49, 0.99)
    );

  box-shadow:
    0 18px 42px
    rgba(0, 0, 0, 0.20),
    0 0 0 1px
    rgba(124, 58, 237, 0.055);
}


html[data-page-theme="dark"]
.eco-terminal.is-active
.eco-terminal-icon {
  background:
    #6e1bd0;

  color:
    #ffffff;
}


@media (hover: hover) {

  html[data-page-theme="dark"]
  .eco-terminal:hover {
    border-color:
      rgba(166, 110, 255, 0.20);

    background:
      linear-gradient(
        145deg,
        rgba(24, 27, 49, 0.99),
        rgba(20, 23, 44, 0.99)
      );

    box-shadow:
      0 18px 42px
      rgba(0, 0, 0, 0.17);
  }

}


/* =========================================================
   32.4 PROCESO — CARD QUIETA / ICONO CON MOVIMIENTO LEVE
========================================================= */

.process-icon {
  transition:
    transform
    0.34s
    var(--ease),
    color
    0.28s ease,
    background
    0.28s ease,
    box-shadow
    0.28s ease;
}


.process-icon
.material-symbols-outlined {
  transition:
    transform
    0.34s
    var(--ease);
}


/*
 * Evita que reglas anteriores desplacen
 * la card completa.
 */

.process-card {
  transform: none;
}


@media (hover: hover) {

  .process-card:hover {
    transform: none;

    border-color:
      color-mix(
        in srgb,
        var(--stage-color)
        34%,
        transparent
      );

    box-shadow:
      0 12px 30px
      rgba(27, 18, 46, 0.065);
  }


  .process-card:hover
  .process-icon {
    transform:
      translateX(5px);
  }


  .process-card:hover
  .process-icon
  .material-symbols-outlined {
    transform:
      translateX(1px);
  }


  .process-step--featured
  .process-card:hover
  .process-icon {
    box-shadow:
      0 8px 18px
      rgba(124, 58, 237, 0.18);
  }


  html[data-page-theme="dark"]
  .process-card:hover {
    border-color:
      color-mix(
        in srgb,
        var(--stage-color)
        42%,
        transparent
      );

    background:
      rgba(24, 27, 49, 0.98);

    box-shadow:
      0 14px 32px
      rgba(0, 0, 0, 0.17);
  }

}


/* =========================================================
   32.5 CONTACTO — HOVER EMBLEMA "CUÉNTANOS TU IDEA"
========================================================= */

.contact-form-emblem {
  transform:
    translate3d(
      0,
      0,
      0
    );
}


.contact-form-emblem
.material-symbols-outlined {
  transition:
    transform
    0.34s
    var(--ease);
}


@media (hover: hover) {

  .contact-form-head:hover
  .contact-form-emblem,
  .contact-form-emblem:hover {
    background:
      linear-gradient(
        135deg,
        var(--primary),
        var(--primary-2)
      );

    color:
      #ffffff;

    transform:
      translateY(-3px)
      rotate(-3deg);

    box-shadow:
      0 14px 28px
      rgba(99, 14, 212, 0.20);
  }


  .contact-form-head:hover
  .contact-form-emblem
  .material-symbols-outlined,
  .contact-form-emblem:hover
  .material-symbols-outlined {
    transform:
      translateX(2px)
      rotate(-5deg);
  }

}


html[data-page-theme="dark"]
.contact-form-emblem {
  border:
    1px solid
    rgba(210, 187, 255, 0.10);

  background:
    #090d20;

  color:
    #d7c1ff;
}


/* =========================================================
   32.6 RESPONSIVE SHOWCASE — DARK MODE DEL DISPOSITIVO
========================================================= */

html[data-page-theme="dark"]
.responsive-device-frame {
  border-color:
    rgba(210, 187, 255, 0.105);

  background:
    #14172b;

  box-shadow:
    0 24px 58px
    rgba(0, 0, 0, 0.23);
}


html[data-page-theme="dark"]
.responsive-demo-header {
  border-bottom-color:
    rgba(210, 187, 255, 0.075);

  background:
    #24283f;
}


html[data-page-theme="dark"]
.responsive-demo-brand,
html[data-page-theme="dark"]
[data-responsive-demo-brand] {
  color:
    #f6f2fc;
}


html[data-page-theme="dark"]
.responsive-demo-brand strong,
html[data-page-theme="dark"]
[data-responsive-demo-brand] strong {
  color:
    #f6f2fc;
}


html[data-page-theme="dark"]
.responsive-demo-brand-icon {
  border:
    1px solid
    rgba(210, 187, 255, 0.10);

  background:
    rgba(124, 58, 237, 0.24);

  box-shadow:
    inset 0 0 0 4px
    rgba(210, 187, 255, 0.10);
}


html[data-page-theme="dark"]
.responsive-demo-nav i {
  background:
    rgba(232, 226, 241, 0.22);
}


html[data-page-theme="dark"]
.responsive-demo-menu {
  color:
    #d7d0e1;
}


html[data-page-theme="dark"]
.responsive-demo-body {
  background:
    #14172b;
}


html[data-page-theme="dark"]
.responsive-demo-kicker {
  background:
    rgba(151, 93, 246, 0.30);
}


html[data-page-theme="dark"]
.responsive-demo-title i:first-child {
  background:
    #090d20;
}


html[data-page-theme="dark"]
.responsive-demo-title i:last-child {
  background:
    linear-gradient(
      90deg,
      #6612d1,
      #7c3aed
    );
}


html[data-page-theme="dark"]
.responsive-demo-lines i,
html[data-page-theme="dark"]
.responsive-demo-card > i {
  background:
    rgba(235, 229, 245, 0.075);
}


html[data-page-theme="dark"]
.responsive-demo-card {
  border-color:
    rgba(210, 187, 255, 0.09);

  background:
    #1a1e35;

  box-shadow:
    0 13px 30px
    rgba(0, 0, 0, 0.12);
}


html[data-page-theme="dark"]
.responsive-demo-card-icon {
  background:
    rgba(124, 58, 237, 0.18);
}


html[data-page-theme="dark"]
.responsive-demo-button,
html[data-page-theme="dark"]
.responsive-demo-card-button {
  background:
    #090d20;
}


html[data-page-theme="dark"]
.responsive-status {
  border-color:
    rgba(210, 187, 255, 0.09);

  background:
    #181b31;

  color:
    #f4f1fb;

  box-shadow:
    0 11px 26px
    rgba(0, 0, 0, 0.12);
}


html[data-page-theme="dark"]
.responsive-status strong {
  color:
    #f4f1fb;
}


html[data-page-theme="dark"]
.responsive-status div span {
  color:
    #918a9d;
}


/* =========================================================
   32.7 INSTITUCIONAL — DARK MODE + CTA
========================================================= */

html[data-page-theme="dark"]
.institutional {
  background:
    radial-gradient(
      circle at 7% 42%,
      rgba(124, 58, 237, 0.055),
      transparent 27%
    ),
    #0b0e1f;
}


html[data-page-theme="dark"]
.institutional-grid {
  border-top-color:
    rgba(210, 187, 255, 0.09);

  border-bottom-color:
    rgba(210, 187, 255, 0.09);
}


html[data-page-theme="dark"]
.institutional-icon {
  border-color:
    rgba(210, 187, 255, 0.10);

  background:
    rgba(124, 58, 237, 0.16);

  color:
    #c9adff;
}


html[data-page-theme="dark"]
.institutional-copy h2 {
  color:
    #f4f1fb;
}


html[data-page-theme="dark"]
.institutional-copy p {
  color:
    #aaa4b7;
}


html[data-page-theme="dark"]
.institutional-action {
  border-color:
    rgba(210, 187, 255, 0.18);

  background:
    rgba(124, 58, 237, 0.085);

  color:
    #eee8f7;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.025);
}


html[data-page-theme="dark"]
.institutional-action
.material-symbols-outlined {
  color:
    #c7a7ff;
}


@media (hover: hover) {

  html[data-page-theme="dark"]
  .institutional-action:hover {
    border-color:
      rgba(180, 139, 252, 0.34);

    background:
      rgba(124, 58, 237, 0.15);

    color:
      #ffffff;

    box-shadow:
      0 11px 26px
      rgba(0, 0, 0, 0.12);
  }

}


/* =========================================================
   32.8 DARK CONTACT — CAMPOS / FLOATING LABEL
========================================================= */

html[data-page-theme="dark"]
.contact-form
.input-group label {
  background:
    #14172b;
}


html[data-page-theme="dark"]
.contact-form
.input-group:focus-within label,
html[data-page-theme="dark"]
.contact-form
.input-group.is-focused label,
html[data-page-theme="dark"]
.contact-form
.input-group.is-filled label,
html[data-page-theme="dark"]
.contact-form
.input-group.is-invalid label,
html[data-page-theme="dark"]
.contact-form
.input-group.is-valid label {
  background:
    #14172b;
}


/* =========================================================
   32.9 DARK MODE — CONTACT INFO HOVER SIN BORDE COLOREADO
========================================================= */

@media (hover: hover) {

  html[data-page-theme="dark"]
  .contact-info-item:hover {
    border-color:
      rgba(210, 187, 255, 0.08);

    background:
      rgba(24, 27, 49, 0.92);

    box-shadow:
      0 14px 32px
      rgba(0, 0, 0, 0.15);
  }

}


/* =========================================================
   32.10 REDUCED MOTION — NUEVAS MICROINTERACCIONES
========================================================= */

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

  .process-icon,
  .process-icon
  .material-symbols-outlined,
  .contact-form-emblem,
  .contact-form-emblem
  .material-symbols-outlined,
  .hero-primary-action,
  .hero-secondary-action,
  .institutional-action {
    transition: none;
  }


  .process-card:hover
  .process-icon,
  .process-card:hover
  .process-icon
  .material-symbols-outlined,
  .contact-form-head:hover
  .contact-form-emblem,
  .contact-form-head:hover
  .contact-form-emblem
  .material-symbols-outlined {
    transform: none;
  }

}


/* =========================================================
   32.11 CONTENT -> CONNECT — ACTIVE STATE
========================================================= */

.ecosystem-content-connect-line {
  transition:
    height
    0.24s ease,
    filter
    0.24s ease,
    box-shadow
    0.24s ease,
    opacity
    0.24s ease;
}


.ecosystem-content-connect-line.is-active {
  height: 2px;

  opacity: 1;

  filter:
    saturate(1.2)
    brightness(1.08);

  box-shadow:
    0 0 12px
    rgba(99, 14, 212, 0.16);
}
/* =========================================================
   36. RESPONSIVE HOTFIX — ARBORTIC 2026
   AJUSTE FINAL PARA EVITAR:
   - scroll horizontal;
   - elementos cortados lateralmente;
   - espacios verticales excesivos;
   - demos escaladas con dimensiones "fantasma";
   - grids que conservan mínimos de desktop en mobile/tablet.

   IMPORTANTE:
   Este bloque está al final intencionalmente para sobrescribir
   únicamente el comportamiento responsive sin eliminar la base.
========================================================= */


/* =========================================================
   36.1 PROTECCIÓN GLOBAL DE ANCHO
========================================================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  position: relative;
}

main,
section,
header,
footer,
.container,
.hero-grid,
.cap-identity-grid,
.ecosystem-board,
.process-container,
.process-timeline,
.process-steps,
.responsive-grid,
.responsive-stage,
.responsive-device,
.access-grid,
.institutional-grid,
.contact-grid,
.footer-grid {
  min-width: 0;
  max-width: 100%;
}

.container {
  width: min(
    100%,
    calc(
      var(--container-width) +
      var(--page-gutter) * 2
    )
  );
}

img,
svg,
canvas,
video,
iframe {
  max-width: 100%;
}


/* =========================================================
   36.2 DESKTOP
   >= 1025px
========================================================= */

@media (min-width: 1025px) {

  .container {
    width: 100%;
    max-width:
      calc(
        var(--container-width) +
        var(--page-gutter) * 2
      );
  }

  .hero {
    min-height:
      calc(
        100svh -
        var(--header-height)
      );
  }

  .hero-grid,
  .cap-identity-grid,
  .responsive-grid,
  .access-grid,
  .contact-grid {
    min-width: 0;
  }

  .hero-grid > *,
  .cap-identity-grid > *,
  .responsive-grid > *,
  .access-grid > *,
  .contact-grid > * {
    min-width: 0;
  }

  .responsive-device-frame {
    max-width: 100%;
  }
}


/* =========================================================
   36.3 TABLET
   769px - 1024px
========================================================= */

@media
  (min-width: 769px)
  and
  (max-width: 1024px) {

  :root {
    --page-gutter:
      clamp(
        26px,
        4vw,
        38px
      );

    --section-space:
      clamp(
        58px,
        6.5vw,
        72px
      );
  }

  section {
    min-height: auto;
  }

  .container {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--page-gutter);
  }

  .hero-grid,
  .cap-identity-grid,
  .responsive-grid,
  .access-grid,
  .contact-grid,
  .footer-grid {
    min-width: 0;
  }

  .hero-grid > *,
  .cap-identity-grid > *,
  .responsive-grid > *,
  .access-grid > *,
  .contact-grid > *,
  .footer-grid > * {
    min-width: 0;
  }

  /* -------------------------------------------------------
     PROCESS
     Evita alturas artificiales y columnas que se desborden.
  ------------------------------------------------------- */

  .process {
    padding:
      62px
      0
      58px;
  }

  .process-timeline,
  .process-steps {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .process-step {
    width: 100%;
    min-width: 0;
  }

  .process-step:nth-child(5) {
    width:
      min(
        100%,
        370px
      );
  }

  .process-card {
    min-width: 0;
    max-width: 100%;
  }

  .agile-wrap {
    margin-top: 24px;
  }

  /* -------------------------------------------------------
     RESPONSIVE SHOWCASE
     El frame ocupa espacio real, sin transform:scale.
  ------------------------------------------------------- */

  .responsive-showcase {
    padding:
      62px
      0
      66px;
  }

  .responsive-stage {
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .responsive-device {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .responsive-device-frame,
  .responsive-device[data-device="tablet"] .responsive-device-frame,
  .responsive-device[data-device="mobile"] .responsive-device-frame {
    transform: none;
    transform-origin: center;
    max-width: 100%;
  }

  .responsive-device-frame {
    width:
      min(
        100%,
        610px
      );
    height:
      clamp(
        320px,
        48vw,
        350px
      );
  }

  .responsive-device[data-device="tablet"]
  .responsive-device-frame {
    width:
      min(
        100%,
        420px
      );
    height: 375px;
  }

  .responsive-device[data-device="mobile"]
  .responsive-device-frame {
    width:
      min(
        100%,
        260px
      );
    height: 408px;
  }

  .responsive-status {
    position: relative;
    inset: auto;
    width:
      min(
        100%,
        230px
      );
    margin:
      14px
      auto
      0;
    transform: none;
  }

  /* -------------------------------------------------------
     ACCESSIBILIDAD
  ------------------------------------------------------- */

  .accessibility {
    width:
      calc(
        100% -
        24px
      );
  }

  .access-grid {
    width: 100%;
    min-width: 0;
  }

  .access-switcher {
    max-width: 100%;
  }
}


/* =========================================================
   36.4 MOBILE BASE
   <= 768px
========================================================= */

@media (max-width: 768px) {

  :root {
    --page-gutter:
      clamp(
        18px,
        5vw,
        26px
      );

    --section-space:
      clamp(
        50px,
        11vw,
        64px
      );
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  section {
    width: 100%;
    min-height: auto;
    max-width: 100%;
    overflow-x: clip;
  }

  .section-shell {
    padding-block: var(--section-space);
  }

  .container {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--page-gutter);
  }

  .hero-grid,
  .cap-identity-grid,
  .identity-card-stack,
  .ecosystem-board,
  .ecosystem-column,
  .process-steps,
  .responsive-grid,
  .access-grid,
  .institutional-grid,
  .contact-grid,
  .footer-grid {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .hero-grid > *,
  .cap-identity-grid > *,
  .identity-card-stack > *,
  .ecosystem-board > *,
  .ecosystem-column > *,
  .process-steps > *,
  .responsive-grid > *,
  .access-grid > *,
  .institutional-grid > *,
  .contact-grid > *,
  .footer-grid > * {
    min-width: 0;
    max-width: 100%;
  }

  /* -------------------------------------------------------
     HEADER
  ------------------------------------------------------- */

  .site-header,
  .nav {
    width: 100%;
    max-width: 100%;
  }

  .nav {
    min-width: 0;
  }

  .brand,
  .nav-actions,
  .page-theme-controls {
    min-width: 0;
  }

  .mobile-menu {
    max-width:
      calc(
        100vw -
        var(--page-gutter) * 2
      );
  }

  /* -------------------------------------------------------
     HERO
  ------------------------------------------------------- */

  .hero {
    min-height: auto;
    overflow: hidden;
  }

  .hero-grid {
    padding-block:
      clamp(
        44px,
        10vw,
        58px
      );
  }

  .hero-title,
  .hero-description,
  .hero-copy,
  .login-wrap,
  .login-card {
    max-width: 100%;
  }

  .hero-title {
    overflow-wrap: anywhere;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-actions > * {
    min-width: 0;
  }

  .login-wrap::before {
    right: 0;
    left: 4%;
  }

  /* -------------------------------------------------------
     IDENTIDAD
  ------------------------------------------------------- */

  .identity-card,
  .identity-card--about,
  .identity-card--mission,
  .identity-card--vision {
    width: 100%;
    max-width: 100%;
  }

  .identity-card-orbit {
    max-width: 42%;
  }

  /* -------------------------------------------------------
     SINERGIA
  ------------------------------------------------------- */

  .ecosystem-board,
  .ecosystem-column {
    overflow: visible;
  }

  .eco-terminal {
    width: 100%;
    min-width: 0;
  }

  .eco-terminal-copy,
  .eco-terminal-label,
  .eco-terminal-copy strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .ecosystem-core-wrap {
    max-width: 100%;
  }

  .ecosystem-core-structure--one,
  .ecosystem-core-structure--two {
    max-width:
      calc(
        100vw -
        var(--page-gutter) * 2 -
        20px
      );
  }

  /* -------------------------------------------------------
     PROCESS
     Quita espacio sobrante entre cards, agile y siguiente sección.
  ------------------------------------------------------- */

  .process {
    padding:
      var(--section-space)
      0
      clamp(
        42px,
        9vw,
        54px
      );
  }

  .process .section-head {
    margin-bottom:
      clamp(
        28px,
        7vw,
        34px
      );
  }

  .process-timeline,
  .process-steps {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .process-steps {
    gap: 12px;
  }

  .process-step {
    width: 100%;
    min-width: 0;
    min-height: 0;
  }

  .process-card,
  .process-step--top .process-card,
  .process-step--bottom .process-card {
    width: 100%;
    min-width: 0;
    min-height: 100px;
  }

  .process-continuity {
    margin-top: 16px;
  }

  .agile-wrap {
    margin-top: 20px;
  }

  .agile-card {
    min-height: 0;
  }

  .agile-note {
    margin-top: 6px;
  }

  /* -------------------------------------------------------
     RESPONSIVE SHOWCASE

     CORRECCIÓN PRINCIPAL:
     transform:scale() reducía visualmente el dispositivo,
     pero conservaba el ancho/alto original en el layout.
     Eso generaba huecos y riesgo de scroll horizontal.
  ------------------------------------------------------- */

  .responsive-showcase {
    padding:
      clamp(
        50px,
        11vw,
        62px
      )
      0;
  }

  .responsive-grid {
    gap:
      clamp(
        28px,
        7vw,
        38px
      );
  }

  .responsive-stage {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .responsive-device {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .responsive-device-frame,
  .responsive-device[data-device="tablet"] .responsive-device-frame,
  .responsive-device[data-device="mobile"] .responsive-device-frame {
    position: relative;
    max-width: 100%;
    transform: none;
    transform-origin: center;
  }

  .responsive-device-frame {
    width: 100%;
    height:
      clamp(
        230px,
        68vw,
        320px
      );
    border-radius:
      clamp(
        16px,
        4vw,
        22px
      );
  }

  .responsive-device[data-device="tablet"]
  .responsive-device-frame {
    width:
      min(
        100%,
        410px
      );
    height:
      clamp(
        310px,
        92vw,
        375px
      );
  }

  .responsive-device[data-device="mobile"]
  .responsive-device-frame {
    width:
      min(
        78vw,
        255px
      );
    height:
      min(
        405px,
        124vw
      );
    min-height: 350px;
    border-radius: 24px;
  }

  .responsive-status {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;

    width:
      min(
        100%,
        220px
      );

    margin:
      14px
      auto
      0;

    transform: none;
  }

  .responsive-demo-body {
    min-width: 0;
  }

  .responsive-demo-body > * {
    min-width: 0;
  }

  /* El contenido de la demo se adapta sin crear ancho fantasma. */
  .responsive-device-frame:not([style]) .responsive-demo-body,
  .responsive-device[data-device="desktop"] .responsive-demo-body {
    gap:
      clamp(
        14px,
        4vw,
        25px
      );

    padding:
      clamp(
        16px,
        4vw,
        28px
      );
  }

  /* -------------------------------------------------------
     ACCESSIBILITY
  ------------------------------------------------------- */

  .accessibility {
    width:
      calc(
        100% -
        12px
      );
    max-width:
      calc(
        100% -
        12px
      );
    overflow: hidden;
  }

  .access-grid {
    width: 100%;
    max-width: 100%;
  }

  .access-copy,
  .access-switcher,
  .access-visual {
    max-width: 100%;
  }

  .access-switcher {
    overflow: hidden;
  }

  .access-switcher-track {
    width: 100%;
    min-width: 0;
  }

  .access-theme {
    min-width: 0;
  }

  /* -------------------------------------------------------
     INSTITUTIONAL
  ------------------------------------------------------- */

  .institutional {
    padding:
      clamp(
        38px,
        9vw,
        50px
      )
      0;
  }

  .institutional-grid {
    min-width: 0;
  }

  /* -------------------------------------------------------
     CONTACT
  ------------------------------------------------------- */

  .contact-grid,
  .contact-copy,
  .contact-info,
  .contact-form {
    min-width: 0;
    max-width: 100%;
  }

  .contact-info-copy,
  .contact-form-intro {
    min-width: 0;
  }

  .contact-info-copy a,
  .contact-info-copy > span,
  .contact-form-intro p {
    overflow-wrap: anywhere;
  }

  /* -------------------------------------------------------
     FOOTER
  ------------------------------------------------------- */

  .footer {
    max-width:
      calc(
        100% -
        8px
      );
    overflow: hidden;
  }

  .footer-links,
  .footer-links > div {
    min-width: 0;
  }

  .footer-links a {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}


/* =========================================================
   36.5 CELULARES GRANDES
   480px - 768px
========================================================= */

@media
  (min-width: 480px)
  and
  (max-width: 768px) {

  .responsive-device-frame {
    height:
      clamp(
        260px,
        57vw,
        320px
      );
  }

  .responsive-device[data-device="tablet"]
  .responsive-device-frame {
    width:
      min(
        82vw,
        410px
      );
    height:
      min(
        375px,
        75vw
      );
  }

  .responsive-device[data-device="mobile"]
  .responsive-device-frame {
    width:
      min(
        255px,
        48vw
      );
    height:
      min(
        405px,
        76vw
      );
    min-height: 360px;
  }

  .process {
    padding-bottom: 48px;
  }
}


/* =========================================================
   36.6 CELULARES PEQUEÑOS
   <= 479px
========================================================= */

@media (max-width: 479px) {

  :root {
    --page-gutter:
      clamp(
        16px,
        4.8vw,
        20px
      );

    --section-space:
      clamp(
        46px,
        12vw,
        58px
      );
  }

  .hero-grid {
    padding-block:
      40px
      50px;
  }

  .identity-card-orbit {
    right: 24px;
    max-width: 40%;
  }

  .process {
    padding:
      var(--section-space)
      0
      42px;
  }

  .process-step {
    grid-template-columns:
      36px
      minmax(0, 1fr);
  }

  .process-card,
  .process-step--top .process-card,
  .process-step--bottom .process-card {
    padding:
      15px
      14px;
  }

  .agile-wrap {
    margin-top: 16px;
  }

  .responsive-showcase {
    padding:
      48px
      0
      52px;
  }

  .responsive-grid {
    gap: 28px;
  }

  .responsive-stage {
    height: auto;
  }

  .responsive-device-frame {
    width: 100%;
    height:
      clamp(
        215px,
        67vw,
        285px
      );
  }

  .responsive-device[data-device="tablet"]
  .responsive-device-frame {
    width:
      min(
        100%,
        340px
      );
    height:
      min(
        350px,
        98vw
      );
  }

  .responsive-device[data-device="mobile"]
  .responsive-device-frame {
    width:
      min(
        76vw,
        245px
      );
    height:
      min(
        390px,
        121vw
      );
    min-height: 330px;
  }

  .responsive-status {
    margin-top: 12px;
  }

  .responsive-demo-header {
    padding-inline: 12px;
  }

  .responsive-demo-body {
    gap: 13px;
    padding: 16px;
  }

  .responsive-demo-card {
    padding: 14px;
  }

  .accessibility {
    width:
      calc(
        100% -
        8px
      );
    max-width:
      calc(
        100% -
        8px
      );
  }

  .access-switcher {
    padding-inline: 6px;
  }

  .access-theme {
    font-size: 7.5px;
  }

  .footer {
    width:
      calc(
        100% -
        6px
      );
    max-width:
      calc(
        100% -
        6px
      );
  }
}


/* =========================================================
   36.7 EXTRA SMALL
   <= 359px
========================================================= */

@media (max-width: 359px) {

  :root {
    --page-gutter: 14px;
  }

  .page-theme-controls {
    transform:
      scale(0.94);
    transform-origin:
      right center;
  }

  .process-step {
    grid-template-columns:
      34px
      minmax(0, 1fr);
  }

  .responsive-device[data-device="mobile"]
  .responsive-device-frame {
    width:
      min(
        74vw,
        225px
      );
    min-height: 320px;
  }

  .access-theme {
    font-size: 7px;
  }
}


/* =========================================================
   36.8 LANDSCAPE MOBILE
========================================================= */

@media
  (max-width: 768px)
  and
  (orientation: landscape)
  and
  (max-height: 520px) {

  .responsive-device-frame {
    height:
      min(
        300px,
        65vh
      );
  }

  .responsive-device[data-device="tablet"]
  .responsive-device-frame {
    height:
      min(
        340px,
        76vh
      );
  }

  .responsive-device[data-device="mobile"]
  .responsive-device-frame {
    height:
      min(
        380px,
        88vh
      );
    min-height: 0;
  }
}

/* =========================================================
   37. AJUSTE FINAL PUNTUAL — PROCESO + HOVER CONTACTO

   IMPORTANTE:
   - No modifica ninguna otra sección.
   - Conserva íntegro el responsive anterior.
   - Corrige únicamente:
       1) Desarrollo / icono destacado.
       2) Trabajo ágil en mobile.
       3) Hover de iconos del proceso.
       4) Hover de iconos de contacto sin desplazamiento lateral.
========================================================= */


/* =========================================================
   37.1 PROCESO — ICONOS
   Movimiento sobre su propio eje, sin desplazamiento.
========================================================= */

.process-icon,
.process-icon .material-symbols-outlined {
  transform-origin: center;
}


@media (hover: hover) {

  .process-card:hover
  .process-icon {
    transform:
      rotate(4deg);
  }


  .process-card:hover
  .process-icon
  .material-symbols-outlined {
    transform: none;
  }


  .process-step--featured
  .process-card:hover
  .process-icon {
    transform:
      rotate(4deg);

    box-shadow:
      0 8px 18px
      rgba(124, 58, 237, 0.18);
  }

}


/* =========================================================
   37.2 PROCESO — DESARROLLO
   La etapa destacada mantiene la misma geometría
   que las demás y el icono queda contenido.
========================================================= */

.process-step--featured
.process-card {
  overflow: hidden;
}


.process-step--featured
.process-icon {
  flex: 0 0 auto;

  display: grid;

  place-items: center;

  transform-origin: center;
}


.process-step--featured
.process-icon
.material-symbols-outlined {
  display: block;

  line-height: 1;
}


/* =========================================================
   37.3 CONTACTO — HOVER SIN DESPLAZAMIENTO
   La card permanece exactamente en su posición.
   Sólo el icono se inclina levemente hacia la derecha.
========================================================= */

.contact-info-icon {
  transform-origin: center;

  transition:
    transform
    0.32s
    var(--ease),
    background
    0.3s ease,
    color
    0.3s ease,
    box-shadow
    0.3s ease;
}


@media (hover: hover) {

  .contact-info-item:hover {
    transform: none;
  }


  .contact-info-item:hover
  .contact-info-icon {
    transform:
      rotate(4deg);
  }


  .contact-info-item--schedule:hover
  .contact-info-icon {
    transform:
      rotate(4deg);
  }

}


/* =========================================================
   37.4 TABLET
   769px - 1024px
========================================================= */

@media
  (min-width: 769px)
  and
  (max-width: 1024px) {

  /*
   * La etapa Desarrollo conserva el mismo ancho
   * de las demás cards.
   */

  .process-step--featured
  .process-card {
    width: 100%;
    min-width: 0;
  }


  .process-step--featured
  .process-icon {
    width: 42px;
    height: 42px;

    margin-bottom: 7px;
  }


  /*
   * Trabajo ágil permanece compacto y no genera
   * un bloque vertical innecesario.
   */

  .agile-wrap {
    width: 100%;

    margin-top: 22px;
  }


  .agile-card {
    width:
      min(
        100%,
        590px
      );

    min-width: 0;

    flex-wrap: wrap;

    justify-content: center;

    gap:
      10px
      12px;

    padding:
      12px
      16px;
  }


  .agile-flow {
    min-width: 0;

    flex-wrap: wrap;

    justify-content: center;
  }

}


/* =========================================================
   37.5 MOBILE BASE
   <= 768px
========================================================= */

@media (max-width: 768px) {

  /*
   * Desarrollo:
   * misma alineación visual que el resto.
   */

  .process-step--featured
  .process-card {
    width: 100%;

    min-width: 0;

    overflow: hidden;
  }


  .process-step--featured
  .process-icon {
    width: 40px;
    height: 40px;

    margin:
      0
      0
      8px;

    place-items: center;

    align-self: flex-start;

    transform: none;
  }


  .process-step--featured
  .process-icon
  .material-symbols-outlined {
    font-size: 21px;
  }


  /*
   * En dispositivos táctiles no dejamos
   * transformaciones heredadas de hover.
   */

  .process-card:hover
  .process-icon,
  .process-step--featured
  .process-card:hover
  .process-icon {
    transform: none;
  }


  /*
   * Trabajo ágil:
   * ancho real, sin overflow y sin distribución
   * de grid que separaba Backlog / Ciclo / Revisión / Mejora.
   */

  .agile-wrap {
    width: 100%;

    max-width: 100%;

    align-items: stretch;

    margin-top:
      clamp(
        16px,
        5vw,
        22px
      );
  }


  .agile-card {
    width: 100%;

    max-width: 100%;

    min-width: 0;
    min-height: 0;

    display: grid;

    grid-template-columns: 1fr;

    align-items: start;

    justify-items: start;

    gap: 10px;

    padding:
      13px
      14px;

    overflow: hidden;
  }


  .agile-title {
    width: 100%;

    min-width: 0;

    justify-content: flex-start;
  }


  .agile-title
  .material-symbols-outlined {
    flex: 0 0 auto;

    font-size: 17px;
  }


  .agile-separator {
    display: none;
  }


  .agile-flow {
    width: 100%;

    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    flex-wrap: wrap;

    gap:
      7px
      8px;

    line-height: 1.35;
  }


  .agile-step {
    min-width: 0;

    flex: 0 0 auto;
  }


  .agile-arrow {
    flex: 0 0 auto;

    opacity: 0.55;
  }


  .agile-note {
    width: 100%;

    margin-top: 5px;

    text-align: left;
  }


  /*
   * Contacto en mobile/touch:
   * nunca desplazar la card.
   */

  .contact-info-item,
  .contact-info-item:hover {
    transform: none;
  }


  .contact-info-icon,
  .contact-info-item:hover
  .contact-info-icon,
  .contact-info-item--schedule:hover
  .contact-info-icon {
    transform: none;
  }

}


/* =========================================================
   37.6 CELULARES GRANDES
   480px - 768px
========================================================= */

@media
  (min-width: 480px)
  and
  (max-width: 768px) {

  .agile-card {
    padding:
      13px
      16px;
  }


  .agile-flow {
    gap:
      8px
      9px;
  }

}


/* =========================================================
   37.7 CELULARES PEQUEÑOS
   <= 479px
========================================================= */

@media (max-width: 479px) {

  /*
   * Sobrescribe la antigua distribución en 3 columnas
   * que era la causa de los saltos y cortes de Trabajo ágil.
   */

  .agile-flow {
    display: flex;

    grid-template-columns: none;

    flex-wrap: wrap;

    align-items: center;

    justify-content: flex-start;

    gap:
      7px
      7px;
  }


  .agile-card {
    gap: 9px;

    padding:
      12px
      13px;
  }


  .agile-title {
    font-size: 9.5px;
  }


  .agile-step {
    font-size: 9px;
  }


  .agile-arrow {
    font-size: 9px;

    opacity: 0.48;
  }


  .process-step--featured
  .process-icon {
    width: 38px;
    height: 38px;
  }


  .process-step--featured
  .process-icon
  .material-symbols-outlined {
    font-size: 20px;
  }

}


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

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

  .process-icon,
  .process-icon
  .material-symbols-outlined,
  .contact-info-icon {
    transition: none;
  }


  .process-card:hover
  .process-icon,
  .process-step--featured
  .process-card:hover
  .process-icon,
  .contact-info-item:hover
  .contact-info-icon,
  .contact-info-item--schedule:hover
  .contact-info-icon {
    transform: none;
  }

}

/* =========================================================
   38. PARTÍCULAS GLOBALES — RESTAURACIÓN FINAL

   Objetivo:
   - Mantener UNA sola capa de partículas para toda la página.
   - Hacerla visible sobre los fondos de todas las secciones.
   - Mantener el contenido, cards, formularios y textos por encima.
   - No alterar ningún layout ni responsive ya aprobado.
========================================================= */


/* ---------------------------------------------------------
   CAPA GLOBAL
--------------------------------------------------------- */

.site-particles {
  position: fixed;

  inset: 0;

  z-index: 6;

  width: 100vw;
  height: 100dvh;

  overflow: hidden;

  pointer-events: none;

  opacity: 1;

  filter:
    saturate(1.12)
    contrast(1.06);

  transform:
    translateZ(0);

  contain:
    strict;
}


.site-particles-canvas {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  max-width: none;

  pointer-events: none;
}


/* ---------------------------------------------------------
   FONDOS DE SECCIÓN ABAJO / CONTENIDO ARRIBA

   Las partículas quedan:
   fondo de sección
        ↓
   partículas
        ↓
   contenido real
--------------------------------------------------------- */

.particle-section {
  position: relative;

  z-index: 0;
}


.particle-section > .container,
.footer > .container {
  position: relative;

  z-index: 7;
}


/*
 * Algunos bloques usan contenido directo o wrappers
 * con z-index propio. Se mantienen sobre el canvas.
 */

.hero-grid,
.cap-identity-head,
.cap-identity-grid,
.ecosystem-head,
.ecosystem-board,
.ecosystem-flow,
.process-container,
.responsive-grid,
.access-grid,
.institutional-grid,
.contact-grid,
.footer-grid,
.footer-bottom {
  position: relative;

  z-index: 7;
}


/* ---------------------------------------------------------
   HEADER SIEMPRE POR ENCIMA
--------------------------------------------------------- */

.site-header {
  z-index: 1000;
}


.mobile-menu {
  z-index: 1001;
}


.skip-link {
  z-index: 9999;
}


/* ---------------------------------------------------------
   DARK MODE

   El canvas ya cambia de paleta desde JS.
   Aquí sólo evitamos perder definición visual.
--------------------------------------------------------- */

html[data-page-theme="dark"]
.site-particles {
  filter:
    saturate(1.08)
    contrast(1.04);
}


/* ---------------------------------------------------------
   MOBILE / TABLET

   No cambia geometría ni breakpoints.
   Únicamente asegura que el canvas cubra el viewport real.
--------------------------------------------------------- */

@media (max-width: 1024px) {

  .site-particles {
    width: 100vw;

    height: 100dvh;
    min-height: 100svh;
  }

}


/* ---------------------------------------------------------
   REDUCED MOTION

   Se conserva la preferencia existente.
   El JS detiene movimiento y CSS mantiene baja presencia.
--------------------------------------------------------- */

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

  .site-particles {
    opacity: 0.22;

    filter: none;
  }

}
/* =========================================================
   39. TANDA CONTACTO + LOGIN BLOQUEADO
   AJUSTE FINAL SOBRE LA BASE EXISTENTE

   OBJETIVOS:
   - conservar íntegro el diseño previo;
   - mantener login + OTP preparados;
   - representar visualmente que Continuar está bloqueado;
   - preparar el formulario de contacto en 2 columnas:
       Nombre / Empresa / Institución | Rubro
       Correo                         | Teléfono
       Mensaje (ancho completo)
   - integrar select, teléfono, validación visual,
     dark mode, tablet, móvil y reduced motion.

   NOTA:
   El bloqueo funcional contra manipulación desde DevTools
   se reforzará en app.js en la siguiente tanda.
========================================================= */


/* =========================================================
   39.1 LOGIN — ESTADO BLOQUEADO
========================================================= */

#login-form[data-login-enabled="false"]
.login-button,
.login-button[data-login-lock="true"],
.login-button--disabled {
  position: relative;

  overflow: hidden;

  border-color:
    rgba(67, 69, 82, 0.16);

  background:
    linear-gradient(
      135deg,
      #8b8d98 0%,
      #777985 100%
    );

  color:
    rgba(255, 255, 255, 0.90);

  box-shadow:
    0 8px 18px
    rgba(24, 26, 38, 0.075);

  cursor:
    not-allowed;

  opacity:
    0.78;

  filter:
    saturate(0.56);

  transform:
    none;
}


#login-form[data-login-enabled="false"]
.login-button::before,
.login-button[data-login-lock="true"]::before,
.login-button--disabled::before {
  content: "";

  position: absolute;

  inset:
    0;

  pointer-events: none;

  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255, 255, 255, 0.10) 45%,
      transparent 70%
    );

  transform:
    translateX(-100%);
}


#login-form[data-login-enabled="false"]
.login-button
.material-symbols-outlined,
.login-button[data-login-lock="true"]
.material-symbols-outlined,
.login-button--disabled
.material-symbols-outlined {
  color:
    rgba(255, 255, 255, 0.78);

  transform:
    none;
}


#login-form[data-login-enabled="false"]
.login-button:focus-visible,
.login-button[data-login-lock="true"]:focus-visible,
.login-button--disabled:focus-visible {
  outline:
    3px solid
    rgba(99, 14, 212, 0.18);

  outline-offset:
    3px;
}


@media (hover: hover) {

  #login-form[data-login-enabled="false"]
  .login-button:hover,
  .login-button[data-login-lock="true"]:hover,
  .login-button--disabled:hover {
    border-color:
      rgba(67, 69, 82, 0.16);

    background:
      linear-gradient(
        135deg,
        #8b8d98 0%,
        #777985 100%
      );

    color:
      rgba(255, 255, 255, 0.90);

    box-shadow:
      0 8px 18px
      rgba(24, 26, 38, 0.075);

    transform:
      none;
  }


  #login-form[data-login-enabled="false"]
  .login-button:hover
  .material-symbols-outlined,
  .login-button[data-login-lock="true"]:hover
  .material-symbols-outlined,
  .login-button--disabled:hover
  .material-symbols-outlined {
    transform:
      none;
  }

}


/* =========================================================
   39.2 CONTACTO — CARD Y GRID PRINCIPAL
========================================================= */

.contact-form {
  max-width:
    620px;
}


.contact-form-grid {
  width:
    100%;

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  column-gap:
    clamp(
      14px,
      1.5vw,
      18px
    );

  row-gap:
    18px;
}


.contact-form-grid
.contact-form-field,
.contact-form-grid
.input-group {
  min-width:
    0;

  margin-top:
    0;
}


.contact-form-field--full {
  grid-column:
    1 / -1;
}


.contact-form-grid
.input-group--textarea {
  margin-top:
    1px;
}


/* =========================================================
   39.3 CONTACTO — INPUT / SELECT / TEXTAREA UNIFICADOS
========================================================= */

.contact-form
.input-group input,
.contact-form
.input-group textarea,
.contact-form
.input-group select {
  width:
    100%;

  min-width:
    0;

  border:
    1px solid
    rgba(69, 58, 89, 0.16);

  border-radius:
    12px;

  background:
    rgba(250, 248, 253, 0.94);

  color:
    var(--text);

  font-size:
    13.5px;

  line-height:
    1.45;

  outline:
    0;

  box-shadow:
    inset
    0 1px 0
    rgba(255, 255, 255, 0.55);

  transition:
    border-color
    0.28s ease,
    background
    0.28s ease,
    color
    0.28s ease,
    box-shadow
    0.28s ease;
}


.contact-form
.input-group input,
.contact-form
.input-group select {
  height:
    54px;
}


.contact-form
.input-group input {
  padding:
    0 15px;
}


.contact-form
.input-group select {
  padding:
    0 43px
    0 15px;

  appearance:
    none;

  -webkit-appearance:
    none;

  cursor:
    pointer;
}


.contact-form
.input-group textarea {
  min-height:
    126px;

  padding:
    17px 15px;

  resize:
    vertical;
}


.contact-form
.input-group input::placeholder,
.contact-form
.input-group textarea::placeholder {
  color:
    #777080;

  opacity:
    1;
}


.contact-form
.contact-select-field select:invalid {
  color:
    #777080;
}


.contact-form
.contact-select-field select:valid {
  color:
    var(--text);
}


/* =========================================================
   39.4 SELECT — ICONO Y FLOATING LABEL
========================================================= */

.contact-select-field {
  position:
    relative;
}


.contact-select-icon {
  position:
    absolute;

  top:
    27px;

  right:
    14px;

  z-index:
    4;

  color:
    var(--text-muted);

  font-size:
    18px;

  line-height:
    1;

  pointer-events:
    none;

  transform:
    translateY(-50%);

  transition:
    color
    0.24s ease,
    transform
    0.28s
    var(--ease);
}


.contact-select-field:focus-within
.contact-select-icon {
  color:
    var(--primary);

  transform:
    translateY(-50%)
    rotate(180deg);
}


.contact-select-field:focus-within
label,
.contact-select-field:has(select:valid)
label,
.contact-select-field.is-focused
label,
.contact-select-field.is-filled
label,
.contact-select-field.is-valid
label,
.contact-select-field.is-invalid
label {
  opacity:
    1;

  transform:
    translateY(-50%)
    scale(1);
}


.contact-select-field:focus-within
select {
  border-color:
    rgba(99, 14, 212, 0.58);

  background:
    #ffffff;

  box-shadow:
    0 0 0 3px
    rgba(99, 14, 212, 0.055);
}


.contact-select-field.is-valid
select,
.contact-select-field:has(select:valid)
select {
  border-color:
    rgba(22, 134, 111, 0.45);
}


.contact-select-field.is-valid
label,
.contact-select-field:has(select:valid)
label {
  color:
    var(--success);
}


.contact-select-field.is-invalid
select {
  border-color:
    rgba(195, 63, 85, 0.54);

  box-shadow:
    0 0 0 3px
    rgba(195, 63, 85, 0.045);
}


.contact-select-field.is-invalid
label {
  color:
    var(--danger);
}


/* =========================================================
   39.5 TELÉFONO — AYUDA DE FORMATO
========================================================= */

.contact-phone-field {
  padding-bottom:
    0;
}


.contact-phone-format {
  display:
    block;

  min-height:
    14px;

  margin:
    5px 4px 0;

  color:
    var(--text-muted);

  font-size:
    9px;

  font-weight:
    500;

  line-height:
    1.35;

  letter-spacing:
    0.015em;

  transition:
    color
    0.22s ease,
    opacity
    0.22s ease;
}


.contact-phone-field:focus-within
.contact-phone-format {
  color:
    var(--primary);
}


.contact-phone-field.is-invalid
.contact-phone-format {
  color:
    rgba(195, 63, 85, 0.76);
}


.contact-phone-field.is-valid
.contact-phone-format {
  color:
    rgba(22, 134, 111, 0.82);
}


/* =========================================================
   39.6 CONTACTO — ESPACIADO / CABECERA / BOTÓN
========================================================= */

.contact-form-head {
  margin-bottom:
    24px;
}


.contact-submit {
  margin-top:
    20px;
}


.contact-form-status {
  min-height:
    18px;

  margin:
    9px 2px 0;
}


/* =========================================================
   39.7 CONTACTO — HOVER AMABLE
========================================================= */

@media (hover: hover) {

  .contact-form
  .input-group:not(.is-invalid):hover
  input,
  .contact-form
  .input-group:not(.is-invalid):hover
  textarea,
  .contact-form
  .input-group:not(.is-invalid):hover
  select {
    border-color:
      rgba(99, 14, 212, 0.25);
  }


  .contact-select-field:hover
  .contact-select-icon {
    color:
      var(--primary);
  }

}


/* =========================================================
   39.8 DARK MODE — LOGIN BLOQUEADO
========================================================= */

html[data-page-theme="dark"]
#login-form[data-login-enabled="false"]
.login-button,
html[data-page-theme="dark"]
.login-button[data-login-lock="true"],
html[data-page-theme="dark"]
.login-button--disabled {
  border-color:
    rgba(218, 213, 228, 0.10);

  background:
    linear-gradient(
      135deg,
      #343744 0%,
      #2a2d39 100%
    );

  color:
    rgba(239, 235, 246, 0.64);

  box-shadow:
    0 9px 20px
    rgba(0, 0, 0, 0.12);

  opacity:
    0.82;

  filter:
    saturate(0.55);
}


html[data-page-theme="dark"]
#login-form[data-login-enabled="false"]
.login-button
.material-symbols-outlined,
html[data-page-theme="dark"]
.login-button[data-login-lock="true"]
.material-symbols-outlined,
html[data-page-theme="dark"]
.login-button--disabled
.material-symbols-outlined {
  color:
    rgba(239, 235, 246, 0.55);
}


@media (hover: hover) {

  html[data-page-theme="dark"]
  #login-form[data-login-enabled="false"]
  .login-button:hover,
  html[data-page-theme="dark"]
  .login-button[data-login-lock="true"]:hover,
  html[data-page-theme="dark"]
  .login-button--disabled:hover {
    border-color:
      rgba(218, 213, 228, 0.10);

    background:
      linear-gradient(
        135deg,
        #343744 0%,
        #2a2d39 100%
      );

    color:
      rgba(239, 235, 246, 0.64);

    box-shadow:
      0 9px 20px
      rgba(0, 0, 0, 0.12);

    transform:
      none;
  }

}


/* =========================================================
   39.9 DARK MODE — CONTACTO
========================================================= */

html[data-page-theme="dark"]
.contact-form
.input-group input,
html[data-page-theme="dark"]
.contact-form
.input-group textarea,
html[data-page-theme="dark"]
.contact-form
.input-group select {
  border-color:
    rgba(210, 187, 255, 0.13);

  background:
    #0d1021;

  color:
    #f4f1fb;

  box-shadow:
    inset
    0 1px 0
    rgba(255, 255, 255, 0.018);
}


html[data-page-theme="dark"]
.contact-form
.input-group input::placeholder,
html[data-page-theme="dark"]
.contact-form
.input-group textarea::placeholder,
html[data-page-theme="dark"]
.contact-form
.contact-select-field select:invalid {
  color:
    #8e8799;
}


html[data-page-theme="dark"]
.contact-form
.contact-select-field select:valid {
  color:
    #f4f1fb;
}


html[data-page-theme="dark"]
.contact-form
.input-group:focus-within input,
html[data-page-theme="dark"]
.contact-form
.input-group:focus-within textarea,
html[data-page-theme="dark"]
.contact-form
.input-group:focus-within select,
html[data-page-theme="dark"]
.contact-form
.input-group.is-focused input,
html[data-page-theme="dark"]
.contact-form
.input-group.is-focused textarea {
  border-color:
    rgba(169, 131, 239, 0.56);

  background:
    #101429;

  box-shadow:
    0 0 0 3px
    rgba(124, 58, 237, 0.08);
}


html[data-page-theme="dark"]
.contact-form
.contact-select-icon {
  color:
    #918a9d;
}


html[data-page-theme="dark"]
.contact-form
.contact-select-field:focus-within
.contact-select-icon {
  color:
    #c9adff;
}


html[data-page-theme="dark"]
.contact-form
.contact-phone-format {
  color:
    #777184;
}


html[data-page-theme="dark"]
.contact-form
.contact-phone-field:focus-within
.contact-phone-format {
  color:
    #b998f5;
}


html[data-page-theme="dark"]
.contact-form
.contact-select-field.is-valid
select,
html[data-page-theme="dark"]
.contact-form
.contact-select-field:has(select:valid)
select {
  border-color:
    rgba(49, 177, 149, 0.42);
}


html[data-page-theme="dark"]
.contact-form
.contact-select-field.is-valid
label,
html[data-page-theme="dark"]
.contact-form
.contact-select-field:has(select:valid)
label {
  color:
    #54c8ae;
}


html[data-page-theme="dark"]
.contact-form
.contact-select-field.is-invalid
select {
  border-color:
    rgba(226, 99, 121, 0.52);

  box-shadow:
    0 0 0 3px
    rgba(226, 99, 121, 0.055);
}


/* =========================================================
   39.10 TABLET — CONTACTO
========================================================= */

@media
  (min-width: 768px)
  and
  (max-width: 1024px) {

  .contact-form {
    width:
      min(
        100%,
        680px
      );

    max-width:
      680px;

    justify-self:
      center;
  }


  .contact-form-grid {
    column-gap:
      14px;

    row-gap:
      17px;
  }

}


/* =========================================================
   39.11 MÓVIL — CONTACTO
========================================================= */

@media (max-width: 767px) {

  .contact-form {
    max-width:
      100%;

    padding:
      clamp(
        22px,
        6vw,
        28px
      );
  }


  .contact-form-grid {
    grid-template-columns:
      minmax(0, 1fr);

    row-gap:
      17px;
  }


  .contact-form-field--full {
    grid-column:
      auto;
  }


  .contact-form
  .input-group input,
  .contact-form
  .input-group select {
    height:
      52px;
  }


  .contact-form
  .input-group textarea {
    min-height:
      132px;
  }


  .contact-select-icon {
    top:
      26px;
  }


  .contact-phone-format {
    font-size:
      8.8px;
  }

}


/* =========================================================
   39.12 CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 479px) {

  .contact-form {
    padding:
      21px
      18px;
  }


  .contact-form-head {
    gap:
      11px;

    margin-bottom:
      22px;
  }


  .contact-form-emblem {
    width:
      43px;

    height:
      43px;
  }


  .contact-form
  .input-group input,
  .contact-form
  .input-group textarea,
  .contact-form
  .input-group select {
    font-size:
      13px;
  }


  .contact-form
  .input-group select {
    padding-right:
      40px;
  }


  .contact-select-icon {
    right:
      12px;
  }

}


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

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

  #login-form[data-login-enabled="false"]
  .login-button,
  .login-button[data-login-lock="true"],
  .login-button--disabled,
  .contact-form
  .input-group select,
  .contact-select-icon,
  .contact-phone-format {
    transition:
      none;
  }


  .contact-select-field:focus-within
  .contact-select-icon {
    transform:
      translateY(-50%);
  }

}

/* =========================================================
   37. FOOTER — AJUSTE FINAL 3 COLUMNAS
   ÚNICO AJUSTE NUEVO DE ESTA VERSIÓN

   ESTRUCTURA:
   01. Identidad ArborTIC
   02. Explorar
   03. Contacto y redes

   Este bloque se mantiene al final para asegurar que
   únicamente el footer sobrescriba reglas responsive
   heredadas de la versión anterior.
========================================================= */


/* =========================================================
   37.1 FOOTER — BASE / DESKTOP
========================================================= */

.footer {
  position: relative;

  width:
    calc(
      100% -
      clamp(
        32px,
        4.5vw,
        72px
      )
    );

  max-width: 1480px;

  margin:
    0 auto;

  padding:
    clamp(
      48px,
      5vw,
      64px
    )
    0
    24px;

  overflow: hidden;

  border-radius:
    30px 30px 0 0;

  background:
    linear-gradient(
      145deg,
      #080d24 0%,
      #0b1029 55%,
      #0c112b 100%
    );

  color:
    #ffffff;
}


.footer::before {
  content: "";

  position: absolute;

  top: -220px;
  left: 23%;

  width: 520px;
  height: 520px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(124, 58, 237, 0.09),
      transparent 68%
    );

  pointer-events: none;
}


.footer::after {
  content: "";

  position: absolute;

  right: -160px;
  bottom: -220px;

  width: 460px;
  height: 460px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(99, 14, 212, 0.055),
      transparent 68%
    );

  pointer-events: none;
}


.footer-grid {
  position: relative;

  z-index: 3;

  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(170px, 0.56fr)
    minmax(290px, 0.90fr);

  align-items: start;

  gap:
    clamp(
      42px,
      4.6vw,
      72px
    );
}


/* ---------------------------------------------------------
   IDENTIDAD
--------------------------------------------------------- */

.footer-intro {
  min-width: 0;

  max-width: 540px;
}


.footer-brand {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color:
    #ffffff;

  font-family:
    var(--font-display);

  font-size: 17px;

  font-weight: 800;

  letter-spacing: -0.025em;
}


.footer-brand-mark {
  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.07);

  border-radius: 11px;

  background:
    rgba(210, 187, 255, 0.12);
}


.footer-brand-mark img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


.footer-intro h2 {
  max-width: 530px;

  margin:
    24px 0 12px;

  color:
    #ffffff;

  font-size:
    clamp(
      25px,
      2.15vw,
      34px
    );

  font-weight: 800;

  line-height: 1.08;

  letter-spacing: -0.04em;

  text-wrap: balance;
}


.footer-intro p {
  max-width: 510px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.54);

  font-size: 12.5px;

  line-height: 1.65;
}


.footer-project-link {
  width: max-content;

  max-width: 100%;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 22px;

  padding-bottom: 5px;

  border-bottom:
    1px solid
    rgba(210, 187, 255, 0.25);

  color:
    var(--primary-fixed);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.04em;

  transition:
    color
    0.25s ease,
    border-color
    0.25s ease;
}


.footer-project-link
.material-symbols-outlined {
  font-size: 15px;

  transition:
    transform
    0.28s
    var(--ease);
}


/* ---------------------------------------------------------
   TÍTULOS DE COLUMNAS
--------------------------------------------------------- */

.footer-column-label {
  display: block;

  margin-bottom: 18px;

  color:
    var(--primary-fixed);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.14em;

  line-height: 1.2;

  text-transform: uppercase;
}


/* ---------------------------------------------------------
   NAVEGACIÓN
--------------------------------------------------------- */

.footer-nav {
  min-width: 0;
}


.footer-nav-links {
  display: grid;

  gap: 4px;
}


.footer-nav-links a {
  width: 100%;

  min-height: 34px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding:
    5px 0;

  color:
    rgba(255, 255, 255, 0.58);

  font-size: 11.5px;

  transition:
    color
    0.24s ease,
    transform
    0.28s
    var(--ease);
}


.footer-nav-links
.material-symbols-outlined {
  flex: 0 0 auto;

  font-size: 13px;

  opacity: 0;

  transform:
    translate(
      -5px,
      3px
    );

  transition:
    opacity
    0.22s ease,
    transform
    0.28s
    var(--ease);
}


/* ---------------------------------------------------------
   CONTACTO Y REDES
--------------------------------------------------------- */

.footer-contact {
  min-width: 0;
}


.footer-contact-list {
  display: grid;

  gap: 8px;
}


.footer-contact-item {
  position: relative;

  min-width: 0;

  min-height: 58px;

  display: grid;

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

  align-items: center;

  gap: 11px;

  padding:
    8px 10px;

  border:
    1px solid
    rgba(255, 255, 255, 0.055);

  border-radius: 12px;

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

  transition:
    transform
    0.3s
    var(--ease),
    background
    0.25s ease,
    border-color
    0.25s ease;
}


.footer-contact-icon {
  width: 36px;
  height: 36px;

  display: grid;

  place-items: center;

  border-radius: 9px;

  background:
    rgba(210, 187, 255, 0.08);

  color:
    rgba(255, 255, 255, 0.72);

  font-size: 15px;

  transition:
    background
    0.26s ease,
    color
    0.26s ease,
    transform
    0.3s
    var(--ease);
}


.footer-contact-copy {
  min-width: 0;
}


.footer-contact-copy small,
.footer-contact-copy strong {
  display: block;
}


.footer-contact-copy small {
  margin-bottom: 1px;

  color:
    rgba(255, 255, 255, 0.34);

  font-size: 7.5px;

  font-weight: 700;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.footer-contact-copy strong {
  min-width: 0;

  overflow: hidden;

  color:
    rgba(255, 255, 255, 0.72);

  font-size: 10.5px;

  font-weight: 500;

  line-height: 1.35;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.footer-contact-arrow {
  flex: 0 0 auto;

  color:
    rgba(255, 255, 255, 0.22);

  font-size: 14px;

  transition:
    color
    0.25s ease,
    transform
    0.3s
    var(--ease);
}


/* ---------------------------------------------------------
   HOVERS
--------------------------------------------------------- */

@media (hover: hover) {

  .footer-project-link:hover {
    color:
      #ffffff;

    border-color:
      rgba(255, 255, 255, 0.45);
  }


  .footer-project-link:hover
  .material-symbols-outlined {
    transform:
      translateX(4px);
  }


  .footer-nav-links a:hover {
    color:
      #ffffff;

    transform:
      translateX(3px);
  }


  .footer-nav-links a:hover
  .material-symbols-outlined {
    opacity: 0.65;

    transform:
      translate(
        0,
        0
      );
  }


  .footer-contact-item:hover {
    transform:
      translateX(3px);

    border-color:
      rgba(255, 255, 255, 0.09);

    background:
      rgba(255, 255, 255, 0.045);
  }


  .footer-contact-item:hover
  .footer-contact-arrow {
    color:
      rgba(255, 255, 255, 0.64);

    transform:
      translate(
        2px,
        -2px
      );
  }


  .footer-contact-item--email:hover
  .footer-contact-icon {
    background:
      rgba(210, 187, 255, 0.16);

    color:
      #d2bbff;

    transform:
      rotate(-3deg);
  }


  .footer-contact-item--whatsapp:hover
  .footer-contact-icon {
    background:
      #25d366;

    color:
      #ffffff;

    transform:
      rotate(-3deg);
  }


  .footer-contact-item--instagram:hover
  .footer-contact-icon {
    background:
      linear-gradient(
        135deg,
        #833ab4,
        #fd1d1d,
        #fcb045
      );

    color:
      #ffffff;

    transform:
      rotate(-3deg);
  }

}


/* ---------------------------------------------------------
   BARRA INFERIOR
--------------------------------------------------------- */

.footer-bottom {
  position: relative;

  z-index: 3;

  min-width: 0;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  margin-top:
    clamp(
      36px,
      4vw,
      50px
    );

  padding-top: 20px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.065);

  color:
    rgba(255, 255, 255, 0.30);

  font-size: 8px;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}


.footer-bottom-meta {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 8px;
}


.footer-bottom-dot {
  width: 3px;
  height: 3px;

  display: inline-block;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    rgba(210, 187, 255, 0.42);
}


/* =========================================================
   37.2 FOOTER — NOTEBOOK / DESKTOP
   1025px - 1439px
========================================================= */

@media
  (min-width: 1025px)
  and
  (max-width: 1439px) {

  .footer-grid {
    grid-template-columns:
      minmax(0, 1.20fr)
      minmax(150px, 0.50fr)
      minmax(270px, 0.88fr);

    gap:
      clamp(
        32px,
        3.6vw,
        52px
      );
  }


  .footer-intro h2 {
    font-size:
      clamp(
        24px,
        2.25vw,
        31px
      );
  }

}


/* =========================================================
   37.3 FOOTER — TABLET
   769px - 1024px
========================================================= */

@media
  (min-width: 769px)
  and
  (max-width: 1024px) {

  .footer {
    width:
      calc(
        100% -
        24px
      );

    padding:
      48px
      0
      24px;

    border-radius:
      28px 28px 0 0;
  }


  .footer-grid {
    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(170px, 0.58fr);

    gap:
      42px
      48px;
  }


  .footer-intro {
    max-width: 560px;
  }


  .footer-contact {
    grid-column:
      1 / -1;
  }


  .footer-contact-list {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    gap: 10px;
  }


  .footer-contact-item {
    min-height: 62px;
  }


  .footer-contact-copy strong {
    white-space: normal;

    overflow-wrap: anywhere;
  }


  .footer-bottom {
    align-items: flex-start;
  }


  .footer-bottom-meta {
    max-width: 360px;

    text-align: right;
  }

}


/* =========================================================
   37.4 FOOTER — MOBILE
   <= 768px
========================================================= */

@media (max-width: 768px) {

  .footer {
    width:
      calc(
        100% -
        12px
      );

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

    margin:
      0 auto;

    padding:
      46px
      0
      24px;

    border-radius:
      26px 26px 0 0;
  }


  .footer-grid {
    width: 100%;

    grid-template-columns: 1fr;

    gap: 38px;
  }


  .footer-intro,
  .footer-nav,
  .footer-contact {
    width: 100%;

    max-width: 100%;

    min-width: 0;
  }


  .footer-intro h2 {
    max-width: 560px;

    font-size:
      clamp(
        25px,
        7vw,
        32px
      );
  }


  .footer-intro p {
    max-width: 540px;
  }


  .footer-project-link {
    max-width: 100%;
  }


  .footer-nav-links {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      4px
      22px;
  }


  .footer-nav-links a {
    min-width: 0;

    max-width: 100%;
  }


  .footer-contact-list {
    grid-template-columns: 1fr;

    gap: 8px;
  }


  .footer-contact-item {
    width: 100%;

    max-width: 100%;
  }


  .footer-contact-copy strong {
    white-space: normal;

    overflow-wrap: anywhere;
  }


  .footer-bottom {
    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

    margin-top: 36px;
  }


  .footer-bottom-meta {
    justify-content: flex-start;

    text-align: left;
  }

}


/* =========================================================
   37.5 FOOTER — CELULARES PEQUEÑOS
   <= 479px
========================================================= */

@media (max-width: 479px) {

  .footer {
    width:
      calc(
        100% -
        8px
      );

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

    padding:
      42px
      0
      22px;

    border-radius:
      23px 23px 0 0;
  }


  .footer-grid {
    gap: 32px;
  }


  .footer-nav-links {
    grid-template-columns: 1fr;

    gap: 3px;
  }


  .footer-contact-item {
    grid-template-columns:
      36px
      minmax(0, 1fr)
      auto;

    gap: 10px;

    padding:
      8px 9px;
  }


  .footer-bottom-meta {
    display: grid;

    justify-items: start;

    gap: 5px;
  }


  .footer-bottom-dot {
    display: none;
  }

}


/* =========================================================
   37.6 FOOTER — EXTRA SMALL
   <= 359px
========================================================= */

@media (max-width: 359px) {

  .footer-contact-item {
    grid-template-columns:
      34px
      minmax(0, 1fr);

    gap: 9px;
  }


  .footer-contact-arrow {
    display: none;
  }


  .footer-contact-icon {
    width: 34px;
    height: 34px;
  }


  .footer-project-link {
    width: 100%;

    justify-content: space-between;
  }

}


/* =========================================================
   37.7 FOOTER — REDUCED MOTION
========================================================= */

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

  .footer-project-link,
  .footer-project-link
  .material-symbols-outlined,
  .footer-nav-links a,
  .footer-nav-links
  .material-symbols-outlined,
  .footer-contact-item,
  .footer-contact-icon,
  .footer-contact-arrow {
    transition: none;
  }


  .footer-project-link:hover
  .material-symbols-outlined,
  .footer-nav-links a:hover,
  .footer-nav-links a:hover
  .material-symbols-outlined,
  .footer-contact-item:hover,
  .footer-contact-item:hover
  .footer-contact-icon,
  .footer-contact-item:hover
  .footer-contact-arrow {
    transform: none;
  }

}