/* ==========================================================================
   GSTALTEK — hoja de estilos
   --------------------------------------------------------------------------
    1. Fuentes            7. Hero                 13. Footer
    2. Tokens             8. Servicios            14. WhatsApp flotante
    3. Base               9. Por qué elegirnos    15. Video (dialog)
    4. Utilidades        10. Portafolio           16. Animación de entrada
    5. Componentes       11. Nosotros             17. Responsive
    6. Header            12. Contacto             18. Movimiento reducido e impresión
   ========================================================================== */


/* 1. Fuentes ----------------------------------------------------------------
   Inter auto-hospedada (subconjunto latino: español completo). Sin conexiones
   a Google: carga más rápido y no envía la IP de tus visitantes a terceros. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-latin-600.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-latin-700.woff2") format("woff2");
}


/* 2. Tokens -----------------------------------------------------------------
   Todos los colores de interfaz salen de aquí. Los textos y botones cumplen
   WCAG AA (contraste 4.5:1; bordes e íconos 3:1). Cambia un valor y se
   actualiza en todo el sitio. */

:root {
  /* Marca */
  --brand-300: #22c9ff;
  --brand-400: #0ea0ff;   /* acentos sobre fondo oscuro (6.4:1) */
  --brand-500: #0c92ff;   /* azul de marca: bordes, líneas, íconos decorativos */
  --brand-600: #0a6fd8;   /* texto, enlaces y botones sobre fondo claro (4.6:1+) */
  --brand-700: #1f5fe0;   /* final del degradado de los botones (5.6:1 con blanco) */
  --cyan: #18cfff;

  /* Fondos */
  --navy-950: #020b16;
  --navy-900: #04101e;
  --navy-850: #061425;
  --navy-800: #071c31;
  --light-bg: #f5f9fd;
  --white: #fff;

  /* Texto */
  --text-on-dark: #eff7ff;
  --heading-on-dark: #f6fbff;
  --muted-on-dark: #9bb5ce;    /* 8.7:1 sobre navy */
  --text-on-light: #081a32;
  --muted-on-light: #4f6880;   /* 5.5:1 sobre fondos claros */

  /* Formulario */
  --field-text: #18314a;
  --field-bg: #fbfdff;
  --field-border: #7f93a7;     /* 3.1:1: el campo se distingue del fondo */
  --placeholder: #5c7185;      /* 5:1 */
  --error: #b83a4a;            /* 5.6:1 */
  --success: #168256;          /* 4.8:1 */

  /* Líneas */
  --line-light: rgba(20, 72, 115, .13);
  --line-dark: rgba(110, 190, 255, .15);

  /* Tipografía (rem: respeta el tamaño de letra que elija cada usuario) */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-2xs: .75rem;      /* 12px: mínimo para texto */
  --fs-xs: .8125rem;     /* 13px */
  --fs-sm: .875rem;      /* 14px */
  --fs-md: 1rem;         /* 16px */
  --fs-lg: 1.0625rem;    /* 17px */
  --fs-h3: 1.0625rem;
  --fs-h2: clamp(2.125rem, 3.5vw, 2.9375rem);
  --fs-h1: clamp(2.5rem, 4.6vw, 3.75rem);

  /* Forma y espacio */
  --radius-sm: 10px;
  --radius-md: 15px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --gutter: 28px;
  --header-h: 76px;
  --section-y: 88px;
}


/* 3. Base ------------------------------------------------------------------ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html:has(dialog[open]) {
  overflow: hidden;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text-on-dark);
  background: var(--navy-950);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
}

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

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

button {
  cursor: pointer;
}

:where(ul[role="list"]) {
  list-style: none;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important; /* única excepción: "hidden" siempre debe ocultar */
}

:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 3px;
}

.section-light :focus-visible,
.contact-form-wrap :focus-visible {
  outline-color: var(--brand-600);
}

::selection {
  background: rgba(12, 146, 255, .35);
  color: #fff;
}


/* 4. Utilidades ------------------------------------------------------------ */

.container {
  width: min(1180px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-on-light);
  font-weight: 600;
}

.skip-link:focus {
  top: 12px;
}

.sprite {
  position: absolute;
  overflow: hidden;
}

.icon {
  display: inline-block;
  flex: none;
  fill: currentColor;
  vertical-align: -.125em;
}


/* 5. Componentes ----------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #d8eafb;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 18px;
  height: 2px;
  background: var(--brand-500);
}

.eyebrow-dark {
  color: var(--muted-on-light);
}

.section-light {
  background: var(--light-bg);
  color: var(--text-on-light);
}

.section-heading h2,
.portfolio h2,
.about h2,
.why-copy h2,
.contact-copy h2 {
  margin-top: 14px;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.section-light h2 span {
  color: var(--brand-600);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.btn .icon {
  font-size: .9em;
}

.btn-primary {
  color: #fff;
  background: linear-gradient(90deg, var(--brand-600), var(--brand-700));
  box-shadow: 0 14px 35px rgba(14, 123, 255, .23);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 19px 38px rgba(14, 123, 255, .31);
}

.btn-primary:disabled {
  cursor: progress;
  opacity: .75;
  transform: none;
}

.btn-outline {
  color: #fff;
  border-color: var(--brand-500);
  background: rgba(12, 153, 255, .05);
}

.btn-outline:hover {
  background: rgba(12, 153, 255, .14);
  transform: translateY(-2px);
}

.btn-outline-light {
  color: var(--brand-600);
  border-color: var(--brand-600);
  background: transparent;
}

.btn-outline-light:hover {
  color: #fff;
  background: var(--brand-600);
}


/* 6. Header ---------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgba(2, 11, 22, .85);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(84, 159, 226, .08);
  transition: background-color .25s ease, box-shadow .25s ease;
}

.site-header.scrolled {
  background: rgba(2, 11, 22, .96);
  box-shadow: 0 15px 40px rgba(0, 0, 0, .18);
}

.nav-wrap {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

/* Logotipo según el manual de marca: cubo (SVG del sprite, versión para fondo
   oscuro) + nombre con espaciado amplio. Archivos sueltos en img/logo-*.svg */
.brand-logo {
  flex: none;
  width: auto;
  height: 44px;
}

.brand-name {
  margin-right: -.28em; /* compensa el espacio después de la última letra */
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .28em;
  line-height: 1;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: var(--fs-sm);
  color: #dbeafa;
}

.nav-link {
  position: relative;
  padding: 26px 0;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-500), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--brand-500);
  border-radius: var(--radius-pill);
  color: #fff;
  background: rgba(15, 145, 255, .04);
  transition: background-color .2s ease;
}

.nav-cta:hover {
  background: rgba(15, 145, 255, .14);
}

.nav-toggle {
  display: none;
}

.nav-toggle .icon-close,
.nav-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
  display: inline-block;
}


/* 7. Hero ------------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--header-h);
  background: linear-gradient(120deg, #030c17 0%, #071728 48%, #061424 100%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(83, 135, 180, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 135, 180, .075) 1px, transparent 1px);
  background-size: 70px 70px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .8), transparent 90%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .8), transparent 90%);
}

.hero-grid::after {
  content: "";
  position: absolute;
  top: -150px;
  right: -110px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(5, 112, 255, .3), transparent 63%);
}

.hero-inner {
  min-height: 560px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 24px;
  padding-block: 40px 56px;
}

.hero-copy {
  position: relative;
  z-index: 3;
}

.hero h1 {
  margin: 18px 0 20px;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.hero h1 span {
  display: inline-block; /* el remate se equilibra en sus propias líneas */
  color: var(--brand-400);
  text-wrap: balance;
}

.hero-lead {
  max-width: 540px;
  margin-bottom: 30px;
  color: #aec2d6;
  font-size: var(--fs-lg);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.btn-video {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: #d7e8f9;
  font-size: var(--fs-sm);
}

.btn-video-icon {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--brand-500);
  border-radius: 50%;
  background: rgba(11, 153, 255, .08);
  color: #fff;
  font-size: .75rem;
}

/* Ilustración del hero.
   Todas las medidas están en "cqw" (1% del ancho de la ilustración), así la
   composición escala completa en cualquier pantalla sin recortes ni hacks. */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 600 / 470;
  justify-self: end;
  container-type: inline-size;
  isolation: isolate;
}

.blue-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2.5cqw);
  pointer-events: none;
}

.orb-one {
  top: 3.333cqw;
  right: 11.667cqw;
  width: 41.667cqw;
  height: 41.667cqw;
  background: rgba(0, 153, 255, .18);
}

.orb-two {
  bottom: 6.667cqw;
  left: 10cqw;
  width: 30cqw;
  height: 30cqw;
  background: rgba(0, 81, 255, .12);
}

.server-tower {
  position: absolute;
  top: 15cqw;
  left: 6cqw;
  width: 28cqw;
  padding: 2.5cqw;
  border: 1px solid rgba(53, 150, 255, .35);
  border-radius: 2.5cqw;
  background: linear-gradient(155deg, rgba(16, 55, 88, .72), rgba(6, 21, 34, .94));
  box-shadow: inset 0 0 5cqw rgba(32, 138, 255, .06), 0 3.333cqw 8.333cqw rgba(0, 0, 0, .4);
}

.server-top {
  margin-bottom: 2.167cqw;
  color: #73bfff;
  font-size: 1.333cqw;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.server-row {
  display: grid;
  grid-template-columns: 1fr 2.167cqw 2.333cqw;
  gap: 1.333cqw;
  align-items: center;
  padding: 1.5cqw 0;
  border-top: 1px solid rgba(92, 175, 255, .12);
}

.server-row .bar {
  height: .667cqw;
  border-radius: 99px;
  background: linear-gradient(90deg, #177dff 0%, rgba(23, 125, 255, .15) 70%);
}

.server-row .led {
  width: 1cqw;
  height: 1cqw;
  border-radius: 50%;
  background: #42d7ff;
  box-shadow: 0 0 2.333cqw #42d7ff;
}

.server-row .port {
  width: 1.667cqw;
  height: 1cqw;
  border: 1px solid #4d83b4;
  border-radius: .5cqw;
  background: #18395c;
}

.monitor {
  position: absolute;
  top: 16.667cqw;
  right: 15cqw;
  width: 66.667cqw;
  height: 43.333cqw;
  overflow: hidden;
  border: 1.333cqw solid #273646;
  border-radius: 3.333cqw 3.333cqw 2cqw 2cqw;
  background: #05111e;
  transform: perspective(150cqw) rotateY(-8deg) rotateX(2deg);
  box-shadow: -5cqw 5cqw 13.333cqw rgba(0, 0, 0, .4), 0 0 11.667cqw rgba(0, 126, 255, .17);
}

.monitor-top {
  display: flex;
  justify-content: space-between;
  padding: 1.833cqw 2.167cqw;
  background: #0a2034;
  color: #7cc6ff;
  font-size: 1.333cqw;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.monitor-top .icon {
  color: #11a0ff;
}

.code-window {
  padding: 2.333cqw 3cqw;
  color: #b7d8f4;
  font: 1.833cqw/1.5 var(--font-mono);
}

.c1 { color: #b47cff; }
.c2 { color: #19d6ff; }
.c3 { color: #4f8cff; }
.c4 { color: #8ed16e; }

.chart {
  display: flex;
  align-items: flex-end;
  gap: 1cqw;
  height: 13.333cqw;
  padding: 2cqw 3cqw 3.667cqw;
}

.chart span {
  width: 2.167cqw;
  border-radius: .5cqw .5cqw 0 0;
  background: linear-gradient(#1db8ff, #1674ff);
  opacity: .7;
}

.chart span:nth-child(1) { height: 32%; }
.chart span:nth-child(2) { height: 55%; }
.chart span:nth-child(3) { height: 42%; }
.chart span:nth-child(4) { height: 72%; }
.chart span:nth-child(5) { height: 88%; }

.chart .chart-base {
  position: absolute;
  left: 3cqw;
  right: 3cqw;
  bottom: 3.667cqw;
  width: auto;
  height: 0;
  border-top: 1px dashed rgba(122, 180, 242, .18);
  background: none;
  opacity: 1;
}

.phone {
  position: absolute;
  right: 3.333cqw;
  bottom: 6.667cqw;
  width: 18.333cqw;
  height: 34.167cqw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.667cqw;
  border: .833cqw solid #334a63;
  border-radius: 3.667cqw;
  background:
    radial-gradient(circle at 50% 33%, rgba(27, 140, 255, .18), transparent 34%),
    linear-gradient(145deg, #061726, #0a2238);
  box-shadow: 0 5cqw 10.833cqw rgba(0, 0, 0, .45), 0 0 7.5cqw rgba(0, 124, 255, .16);
  transform: rotate(5deg);
}

.phone-camera {
  position: absolute;
  top: 1.333cqw;
  width: 5cqw;
  height: .667cqw;
  border-radius: 99px;
  background: #26445c;
}

.phone-brand {
  width: 7.5cqw;
  height: 7.5cqw;
  display: grid;
  place-items: center;
  border-radius: 2.167cqw;
  background: #0a0f1e;
  box-shadow: 0 0 5cqw rgba(47, 139, 255, .35);
}

.phone-brand svg {
  width: auto;
  height: 72%;
}

.phone strong {
  font-size: 1.833cqw;
  line-height: 1.15;
  text-align: center;
}

.phone small {
  color: #7ea6cb;
  font-size: 1.167cqw;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-side-label {
  position: absolute;
  top: 4cqw;
  right: 0;
  display: grid;
  gap: 1.667cqw;
  color: #84a2bd;
  font-size: 1.167cqw;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.hero-side-label::before {
  content: "";
  position: absolute;
  top: -.667cqw;
  left: -1.667cqw;
  width: 1px;
  height: 15cqw;
  background: linear-gradient(#11a1ff, transparent);
}


/* 8. Servicios ------------------------------------------------------------- */

.services {
  padding-block: var(--section-y);
}

.section-heading.split {
  display: grid;
  grid-template-columns: 1.1fr .8fr;
  align-items: end;
  gap: 50px;
  margin-bottom: 40px;
}

.section-heading p {
  max-width: 460px;
  justify-self: end;
  color: var(--muted-on-light);
  font-size: var(--fs-md);
  line-height: 1.6;
}

/* Pilares: una columna por área (Desarrollo, Infraestructura, Marketing, Diseño)
   con su lista de servicios. Los divisores entre columnas se dibujan con
   box-shadow y el contenedor recorta los del borde exterior: funciona con
   cualquier número de columnas o de servicios, sin reglas nth-child. */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border-top: 1px solid var(--line-light);
}

.pillar {
  padding: 32px 24px 12px;
  box-shadow: -1px 0 0 var(--line-light), 0 -1px 0 var(--line-light);
}

.pillar-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 12px;
  background: rgba(10, 111, 216, .09);
  color: var(--brand-600);
  font-size: 1.375rem;
}

.pillar h3 {
  margin-bottom: 6px;
  font-size: 1.3125rem;
  letter-spacing: -.02em;
}

.pillar-head p {
  color: var(--muted-on-light);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.pillar-services {
  margin-top: 20px;
}

.service-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line-light);
}

.service-item h4 {
  margin-bottom: 4px;
  font-size: var(--fs-md);
  line-height: 1.3;
  transition: color .2s ease;
}

.service-item p {
  color: var(--muted-on-light);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.service-item:hover h4 {
  color: var(--brand-600);
}

/* Botón "Cotizar": se ve la flecha; el texto completo es para lectores de pantalla.
   Toda la fila es clicable y el foco se dibuja alrededor de la fila completa. */
.card-link {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #c3d3e2;
  border-radius: 50%;
  color: var(--brand-600);
  font-size: .875rem;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.service-item:hover .card-link {
  border-color: var(--brand-600);
  background: var(--brand-600);
  color: #fff;
}

.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card-link:focus-visible {
  outline: none;
}

.card-link:focus-visible::after {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: 6px;
}


/* 9. Por qué elegirnos ----------------------------------------------------- */

.why-us {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y);
  background: linear-gradient(120deg, #03101f, #07192b 55%, #05111d);
}

.tech-lines {
  position: absolute;
  inset: 0;
  opacity: .17;
  background:
    radial-gradient(circle at 15% 10%, rgba(14, 134, 255, .25), transparent 22%),
    repeating-linear-gradient(160deg, transparent 0 30px, rgba(10, 150, 255, .18) 31px 32px, transparent 33px 66px);
}

.why-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .9fr 1.3fr;
  align-items: center;
  gap: 56px;
}

.why-copy h2 {
  color: var(--heading-on-dark);
}

.why-copy h2 span {
  color: var(--brand-400);
}

.why-copy p {
  max-width: 430px;
  margin: 16px 0 26px;
  color: var(--muted-on-dark);
  font-size: var(--fs-md);
  line-height: 1.6;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}

.why-item {
  min-height: 210px;
  padding: 18px 20px;
  box-shadow: -1px 0 0 var(--line-dark), 0 -1px 0 var(--line-dark);
}

.why-icon {
  margin-bottom: 24px;
  color: var(--brand-400);
  font-size: 1.75rem;
}

.why-item h3 {
  margin-bottom: 10px;
  font-size: var(--fs-h3);
  line-height: 1.2;
  text-wrap: balance;
}

.why-item p {
  color: var(--muted-on-dark);
  font-size: var(--fs-sm);
  line-height: 1.55;
}


/* 10. Portafolio ----------------------------------------------------------- */

.portfolio {
  padding-block: var(--section-y);
}

.portfolio-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 32px;
}

.portfolio-top p {
  max-width: 360px;
  margin: 14px 0 22px;
  color: var(--muted-on-light);
  font-size: var(--fs-md);
  line-height: 1.6;
}

.filters {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

html:not(.js) .filters {
  display: none; /* sin JS no pueden filtrar: mejor no mostrarlos */
}

.filter {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid #b9cad9;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--muted-on-light);
  font-size: var(--fs-sm);
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.filter:hover,
.filter[aria-pressed="true"] {
  border-color: var(--brand-600);
  color: var(--brand-600);
}

.filter[aria-pressed="true"] {
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--brand-600);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.project-card {
  overflow: hidden;
  border: 1px solid #dbe6ef;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: 0 8px 28px rgba(15, 51, 85, .04);
}

.project-media {
  position: relative;
  height: 195px;
  overflow: hidden;
}

.media-web {
  background:
    radial-gradient(circle at 70% 20%, rgba(27, 162, 255, .55), transparent 30%),
    linear-gradient(145deg, #0b1e33, #081523);
}

.media-app {
  background:
    radial-gradient(circle at 30% 20%, rgba(19, 145, 255, .45), transparent 27%),
    linear-gradient(145deg, #071527, #0b2238);
}

.media-marketing {
  background:
    radial-gradient(circle at 75% 30%, rgba(38, 100, 255, .35), transparent 30%),
    linear-gradient(145deg, #081623, #0d2742);
}

.media-branding {
  background: linear-gradient(145deg, #eef7ff, #dfeafb);
}

.fake-browser {
  position: absolute;
  inset: 20px 25px 18px;
  overflow: hidden;
  border: 1px solid rgba(111, 185, 255, .25);
  border-radius: 10px;
  background: #0c1d2f;
  box-shadow: 0 18px 35px rgba(0, 0, 0, .35);
}

.browser-bar {
  height: 20px;
  background: #132d46;
  border-bottom: 1px solid rgba(120, 185, 255, .15);
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  padding: 12px;
}

.dashboard span {
  height: 28px;
  border: 1px solid #21516f;
  border-radius: 5px;
  background: #153450;
}

.mini-chart {
  position: relative;
  grid-column: 1 / -1;
  height: 58px;
  border: 1px solid #1d4362;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(15, 132, 255, .2), rgba(15, 132, 255, .02));
}

.mini-chart::after {
  content: "";
  position: absolute;
  inset: 16px 10px 10px;
  opacity: .7;
  background: linear-gradient(135deg, transparent 0 20%, #19b8ff 21% 23%, transparent 24% 37%, #257fff 38% 40%, transparent 41% 58%, #1ab0ff 59% 61%, transparent 62%);
}

.fake-phone {
  position: absolute;
  top: 16px;
  left: 50%;
  width: 91px;
  height: 175px;
  padding: 28px 10px 10px;
  border: 5px solid #29445e;
  border-radius: 20px;
  background: #071526;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .45);
  transform: translateX(-50%) rotate(4deg);
}

.fake-phone-top {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 25px;
  height: 4px;
  border-radius: 8px;
  background: #31536d;
  transform: translateX(-50%);
}

.app-icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 13px;
  border-radius: 10px;
  background: linear-gradient(145deg, #0e95ff, #5446ff);
}

.app-row {
  height: 11px;
  margin-bottom: 8px;
  border: 1px solid #204c6b;
  border-radius: 5px;
  background: #153451;
}

.social-grid {
  position: absolute;
  inset: 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  gap: 9px;
}

.social-grid span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(56, 151, 236, .25);
  border-radius: 13px;
  background: rgba(8, 35, 56, .72);
  color: #54baff;
  font-size: 22px;
}

.growth-line {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 25px;
  height: 54px;
  border-top: 1px solid rgba(72, 157, 240, .2);
}

.growth-line::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 36px;
  opacity: .75;
  background: linear-gradient(140deg, transparent 0 5%, #3abfff 6% 8%, transparent 9% 20%, #2b80ff 21% 23%, transparent 24% 40%, #18b6ff 41% 43%, transparent 44% 60%, #2982ff 61% 63%, transparent 64%);
}

.brand-sheet {
  position: absolute;
  inset: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #c9dcef;
  border-radius: 12px;
  background: rgba(255, 255, 255, .63);
  box-shadow: 0 20px 35px rgba(48, 93, 140, .12);
  color: #0b1e35;
}

.brand-sheet-logo {
  width: auto;
  height: 56px;
  margin-bottom: 12px;
}

.brand-sheet span {
  margin-right: -.28em;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .28em;
}

.brand-sheet em {
  margin-top: 4px;
  color: #698199;
  font-size: 7px;
  font-style: normal;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.project-info {
  padding: 16px 16px 18px;
}

.project-info h3 {
  margin-bottom: 6px;
  font-size: .9375rem;
  line-height: 1.3;
}

.project-info p {
  color: var(--muted-on-light);
  font-size: var(--fs-xs);
}


/* 11. Nosotros ------------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  background: var(--navy-850);
}

.about-image {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(0, 134, 255, .38), transparent 35%),
    linear-gradient(135deg, #0a2a49, #07111f 80%);
}

.about-image::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .35;
  background:
    linear-gradient(rgba(44, 149, 255, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 149, 255, .12) 1px, transparent 1px);
  background-size: 52px 52px;
  transform: perspective(600px) rotateX(55deg) scale(1.4);
  transform-origin: center bottom;
}

.building {
  position: absolute;
  left: 10%;
  right: 14%;
  bottom: 0;
  height: 81%;
  border: 1px solid rgba(109, 200, 255, .23);
  background: linear-gradient(110deg, rgba(39, 116, 182, .35), rgba(3, 16, 30, .72));
  clip-path: polygon(16% 100%, 35% 8%, 100% 0, 100% 100%);
}

.floor {
  position: absolute;
  left: 23%;
  right: 4%;
  height: 1px;
  background: rgba(117, 202, 255, .22);
}

.floor:nth-child(1) { top: 23%; }
.floor:nth-child(2) { top: 43%; }
.floor:nth-child(3) { top: 63%; }
.floor:nth-child(4) { top: 82%; }

.building-glow {
  position: absolute;
  inset: 12% 20% auto;
  height: 170px;
  background: radial-gradient(circle, rgba(0, 157, 255, .24), transparent 70%);
  filter: blur(20px);
}

.about-watermark {
  position: absolute;
  left: 50px;
  bottom: 45px;
  color: #eaf6ff;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: .28em;
  text-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}

.about-content {
  padding-block: 72px;
  background: linear-gradient(140deg, #061425, #081a2b);
}

.narrow-about {
  width: min(640px, 100% - 2 * var(--gutter));
}

.about h2 {
  color: var(--heading-on-dark);
}

.about h2 span {
  color: var(--brand-400);
}

.about-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 28px;
}

.about-card {
  padding: 18px 20px;
  border-left: 1px solid var(--line-dark);
}

.about-icon {
  margin-bottom: 18px;
  color: var(--brand-400);
  font-size: 1.75rem;
}

.about-card h3 {
  margin-bottom: 8px;
  font-size: var(--fs-md);
}

.about-card p {
  color: var(--muted-on-dark);
  font-size: var(--fs-sm);
  line-height: 1.55;
}


/* 12. Contacto ------------------------------------------------------------- */

.contact-section {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y);
  background: linear-gradient(135deg, #061527 0%, #071c31 58%, #061423 100%);
}

.contact-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .75;
  background:
    radial-gradient(circle at 83% 18%, rgba(16, 143, 255, .18), transparent 27%),
    radial-gradient(circle at 15% 100%, rgba(30, 85, 255, .14), transparent 30%),
    repeating-linear-gradient(150deg, transparent 0 42px, rgba(37, 156, 255, .055) 43px 44px, transparent 45px 88px);
}

.contact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  align-items: start;
  gap: 64px;
}

.contact-copy {
  padding-top: 26px;
}

.contact-copy h2 {
  font-size: clamp(2.375rem, 4vw, 3.5rem);
  line-height: 1.02;
  color: var(--heading-on-dark);
}

.contact-copy h2 span {
  color: var(--brand-400);
}

.contact-copy > p {
  max-width: 470px;
  margin-top: 16px;
  color: var(--muted-on-dark);
  font-size: var(--fs-md);
  line-height: 1.65;
}

.contact-details {
  display: grid;
  gap: 14px;
  margin-top: 32px;
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: 100%;
  color: #dcefff;
}

.contact-detail-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid rgba(47, 155, 255, .28);
  border-radius: 11px;
  background: rgba(6, 27, 47, .62);
  color: #12a4ff;
  font-size: 1rem;
}

.contact-detail small {
  display: block;
  margin-bottom: 2px;
  color: #7f9cb6;
  font-size: var(--fs-2xs);
}

.contact-detail strong {
  display: block;
  color: #eaf5ff;
  font-size: .9375rem;
  font-weight: 600;
  transition: color .2s ease;
}

a.contact-detail:hover strong {
  color: #3db4ff;
}

.contact-form-wrap {
  padding: 32px;
  border: 1px solid rgba(121, 184, 229, .18);
  border-radius: 18px;
  background: var(--white);
  color: var(--text-on-light);
  box-shadow: 0 25px 70px rgba(0, 0, 0, .24);
}

.contact-form {
  display: grid;
  gap: 18px;
}

.form-required-note {
  color: var(--muted-on-light);
  font-size: var(--fs-xs);
}

.req {
  color: var(--brand-600);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-group {
  display: grid;
  align-content: start;
  gap: 7px;
}

.form-group > label:not(.form-check) {
  color: var(--field-text);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* 16px en los campos: con menos, el iPhone hace zoom al tocarlos */
.form-group input:not([type="checkbox"]),
.form-group select,
.form-group textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  color: var(--field-text);
  font-size: var(--fs-md);
  line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.form-group textarea {
  min-height: 140px;
  resize: vertical;
}

.form-group ::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

.form-group input:not([type="checkbox"]):focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--brand-600);
  background: var(--white);
  outline: 2px solid transparent; /* visible en modo de alto contraste de Windows */
  box-shadow: 0 0 0 3px rgba(10, 111, 216, .22);
}

.form-group [aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(184, 58, 74, .12);
}

.field-error {
  color: var(--error);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted-on-light);
  font-size: var(--fs-sm);
  line-height: 1.5;
  cursor: pointer;
}

.form-check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--brand-600);
}

.form-check a,
.privacy-short a,
.form-status a {
  color: var(--brand-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.privacy-short {
  color: var(--muted-on-light);
  font-size: var(--fs-2xs);
  line-height: 1.55;
}

.privacy-short strong {
  color: var(--field-text);
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-submit {
  justify-self: start;
  min-width: 210px;
}

.form-status {
  min-height: 1.5em;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.form-status:empty {
  display: none;
}

.form-status.success {
  color: var(--success);
}

.form-status.error {
  color: var(--error);
}

.form-note {
  color: var(--muted-on-light);
  font-size: var(--fs-xs);
  line-height: 1.5;
}


/* 13. Footer --------------------------------------------------------------- */

.site-footer {
  padding: 36px 0 22px;
  border-top: 1px solid rgba(88, 159, 220, .12);
  background: var(--navy-950);
}

.footer-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
}

.footer-brand .brand-logo {
  height: 40px;
}

.footer-brand .brand-name {
  font-size: 1rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  color: #a4bdd3;
  font-size: var(--fs-sm);
}

.footer-nav a {
  padding-block: 6px;
}

.footer-nav a:hover {
  color: #fff;
}

.socials {
  display: flex;
  gap: 10px;
}

.socials a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(110, 164, 213, .25);
  border-radius: 50%;
  color: #c8dced;
  font-size: .875rem;
}

.socials a:hover {
  border-color: var(--brand-400);
  color: var(--brand-400);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 20px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(110, 164, 213, .11);
  color: #6e89a1;
  font-size: var(--fs-xs);
}


/* 14. WhatsApp flotante ---------------------------------------------------- */

.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1a8f4c;
  color: #fff;
  font-size: 1.75rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  transition: transform .2s ease, opacity .2s ease, visibility .2s ease;
}

.whatsapp-float:hover {
  transform: scale(1.06);
}

.whatsapp-float.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}


/* 15. Video (dialog nativo: atrapa el foco, cierra con Esc y lo devuelve) -- */

.video-dialog {
  width: min(880px, 100% - 32px);
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(62, 157, 255, .22);
  border-radius: var(--radius-lg);
  background: var(--navy-850);
  color: var(--text-on-dark);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .45);
}

.video-dialog::backdrop {
  background: rgba(0, 7, 15, .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.video-dialog-inner {
  position: relative;
  padding: 10px;
}

.video-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
}

.video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.modal-close {
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--brand-500);
  border-radius: 50%;
  background: #061222;
  color: #fff;
  font-size: 1rem;
}


/* 16. Animación de entrada --------------------------------------------------
   Solo se ocultan si hay JS (clase .js en <html>). Sin JS, o si script.js
   falla, todo el contenido queda visible. El hero nunca se anima. */

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s ease, transform .65s ease;
}

.js .reveal.in-view {
  opacity: 1;
  transform: none;
}


/* 17. Responsive ----------------------------------------------------------- */

/* Menú: pasa a hamburguesa cuando ya no cabe en una línea */
@media (max-width: 1100px) {
  .nav-toggle {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    border: 0;
    background: none;
    color: #fff;
    font-size: 1.375rem;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: var(--gutter);
    right: var(--gutter);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    max-height: calc(100vh - var(--header-h) - 16px);
    max-height: calc(100dvh - var(--header-h) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px;
    border: 1px solid rgba(91, 158, 214, .16);
    border-radius: 14px;
    background: #061425;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .25);
    font-size: var(--fs-md);
  }

  .main-nav.open {
    display: flex;
  }

  .nav-link {
    padding: 12px;
    border-radius: 8px;
  }

  .nav-link::after {
    display: none;
  }

  .nav-link:hover,
  .nav-link.active {
    background: rgba(16, 141, 255, .1);
  }

  .nav-cta {
    justify-content: center;
    margin-top: 6px;
    padding: 12px 18px;
  }

  /* Sin JS el botón no funciona: se muestra el menú completo */
  html:not(.js) .nav-toggle {
    display: none;
  }

  html:not(.js) .site-header {
    position: relative;
  }

  html:not(.js) .hero {
    padding-top: 0;
  }

  html:not(.js) .nav-wrap {
    flex-wrap: wrap;
    padding-block: 12px;
  }

  html:not(.js) .main-nav {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    max-height: none;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .pillars {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  :root {
    --gutter: 18px;
    --header-h: 70px;
    --section-y: 72px;
  }

  .br-lg {
    display: none;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 24px;
    padding-block: 36px 48px;
  }

  .hero-visual {
    justify-self: center;
    max-width: 560px;
  }

  .section-heading.split,
  .why-inner {
    grid-template-columns: 1fr;
  }

  .section-heading.split {
    gap: 16px;
  }

  .section-heading p {
    justify-self: start;
  }

  .why-inner {
    gap: 40px;
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .about-image {
    min-height: 280px;
  }

  .about-content {
    padding-block: 56px;
  }

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

  .about-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    padding: 18px 0;
    border-left: 0;
    border-top: 1px solid var(--line-dark);
  }

  .about-card:first-child {
    border-top: 0;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .contact-copy {
    padding-top: 0;
  }

  .contact-details {
    grid-template-columns: 1fr 1fr;
  }

  .contact-detail {
    width: 100%;
  }

  .footer-nav {
    order: 3;
    width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  :root {
    --section-y: 60px;
  }

  .brand-logo {
    height: 38px;
  }

  .brand-name {
    font-size: 1rem;
  }

  .hero-lead {
    font-size: var(--fs-md);
  }

  .hero-side-label {
    display: none;
  }

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

  .pillar {
    padding: 28px 0 8px;
  }

  .why-item {
    min-height: 0;
    padding: 18px 14px 22px;
  }

  .portfolio-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .filters {
    justify-content: flex-start;
  }

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

  .project-media {
    height: 225px;
  }

  .contact-details,
  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-form-wrap {
    padding: 22px 18px;
  }

  .form-submit {
    justify-self: stretch;
    width: 100%;
  }

  .whatsapp-float {
    right: 16px;
    width: 52px;
    height: 52px;
    font-size: 1.625rem;
  }
}

@media (max-width: 359px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
}


/* 18. Movimiento reducido e impresión -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .btn:hover,
  .whatsapp-float,
  .whatsapp-float:hover,
  .card-link,
  .service-item h4 {
    transition: none;
    transform: none;
  }
}

@media print {
  .site-header,
  .whatsapp-float,
  .video-dialog,
  .hero-visual,
  .contact-form-wrap {
    display: none;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}


/* 19. Páginas simples: gracias, aviso de privacidad y errores del formulario */

.page-simple,
.page-legal {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-simple {
  background:
    radial-gradient(circle at 80% 0%, rgba(5, 112, 255, .25), transparent 45%),
    linear-gradient(120deg, #030c17 0%, #071728 48%, #061424 100%);
}

.page-header {
  padding-block: 18px;
  border-bottom: 1px solid rgba(84, 159, 226, .1);
  background: var(--navy-950);
}

.page-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 8px;
  color: #dbeafa;
  font-size: var(--fs-sm);
}

.back-link:hover {
  color: #fff;
}

.status-card {
  width: min(640px, 100% - 2 * var(--gutter));
  margin: auto;
  padding: 56px 0;
  text-align: center;
}

.status-icon {
  margin-inline: auto;
  color: var(--brand-400);
  font-size: 3rem;
}

.status-card h1 {
  margin: 18px 0 14px;
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.status-card p {
  color: var(--muted-on-dark);
  font-size: var(--fs-lg);
  line-height: 1.6;
}

.status-card p + p {
  margin-top: 10px;
}

.status-card a:not(.btn) {
  color: var(--brand-400);
  text-decoration: underline;
}

.status-errors {
  margin: 20px auto;
  padding-left: 1.2em;
  max-width: 480px;
  color: #ffc9d0;
  text-align: left;
  line-height: 1.6;
}

.status-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.page-footer {
  padding-block: 22px;
  border-top: 1px solid rgba(110, 164, 213, .11);
  background: var(--navy-950);
  color: #6e89a1;
  font-size: var(--fs-xs);
}

.page-footer a {
  color: #a4bdd3;
  text-decoration: underline;
}

.legal {
  flex: 1;
  padding-block: 56px 80px;
  background: var(--light-bg);
  color: var(--text-on-light);
}

.legal-content {
  width: min(780px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.legal h1 {
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -.04em;
}

.legal h2 {
  margin: 40px 0 12px;
  font-size: 1.25rem;
  letter-spacing: -.01em;
}

.legal p,
.legal li {
  color: #2f4a63;
  line-height: 1.7;
}

.legal p + p,
.legal ul + p,
.legal p + ul {
  margin-top: 12px;
}

.legal ul {
  margin-block: 0;
  padding-left: 1.25rem;
}

.legal a {
  color: var(--brand-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal .updated {
  margin: 8px 0 24px;
  color: var(--muted-on-light);
  font-size: var(--fs-sm);
}

.pending-note {
  margin-bottom: 32px;
  padding: 14px 18px;
  border-left: 4px solid #c2410c;
  border-radius: 8px;
  background: #fff4ec;
  color: #7c2d12;
}

.legal .pending-note {
  color: #7c2d12;
}