/* ==================================================
   1. BASE Y VARIABLES DE MARCA
   ================================================== */

.uds-site {
  /* Colores de marca */
  --uds-cyan: #00d4f5;
  --uds-blue: #075acb;
  --uds-purple: #7134df;
  --uds-magenta: #d92cff;

  /* Tema claro */
  --uds-background: #ffffff;
  --uds-text: #101736;
  --uds-text-muted: #57617d;
  --uds-border: rgba(16, 23, 54, 0.12);
  --uds-card-background: #ffffff;
  --uds-glass-background: rgba(255, 255, 255, 0.82);

  /* Degradados con tonos legibles sobre blanco */
  --uds-gradient-button: linear-gradient(
    110deg,
    #00718f 0%,
    #2458d4 45%,
    #7434d7 100%
  );

  --uds-gradient-text: linear-gradient(
    100deg,
    #00768f 0%,
    #075acb 35%,
    #7134df 70%,
    #b321c3 100%
  );

  /* Tipografía */
  --uds-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
    sans-serif;

  /* Dimensiones */
  --uds-content-width: 1200px;
  --uds-gutter: clamp(20px, 4vw, 40px);
  --uds-section-space: clamp(56px, 8vw, 112px);
  --uds-grid-gap: clamp(16px, 2.5vw, 28px);

  /* Acabados */
  --uds-radius-small: 12px;
  --uds-radius-medium: 20px;
  --uds-radius-large: 28px;
  --uds-shadow: 0 16px 48px rgba(16, 23, 54, 0.07);
  --uds-ease: cubic-bezier(0.22, 1, 0.36, 1);

  color: var(--uds-text);
  background-color: var(--uds-background);
  font-family: var(--uds-font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

.uds-site :where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--uds-blue);
  outline-offset: 4px;
}


/* ==================================================
   2. CONTENEDORES Y SECCIONES
   ================================================== */

.uds-container {
  width: 100%;
  max-width: calc(
    var(--uds-content-width) + var(--uds-gutter) * 2
  );
  margin-inline: auto;
  padding-inline: var(--uds-gutter);
}

.uds-section {
  position: relative;
  padding-block: var(--uds-section-space);
  color: var(--uds-text);
  background-color: var(--uds-background);
}

/* Las variables se heredan dentro de cada sección oscura. */
.uds-section--dark {
  --uds-background: #070b14;
  --uds-text: #f5f7ff;
  --uds-text-muted: #b4bfd5;
  --uds-border: rgba(221, 231, 255, 0.16);
  --uds-card-background: #111827;
  --uds-glass-background: rgba(17, 24, 39, 0.82);
  --uds-shadow: 0 20px 56px rgba(0, 0, 0, 0.22);

  --uds-gradient-text: linear-gradient(
    100deg,
    #00d4f5 0%,
    #7bb5ff 35%,
    #b09aff 70%,
    #ef87ff 100%
  );
}


/* ==================================================
   3. TIPOGRAFÍA
   ================================================== */

.uds-eyebrow {
  display: block;
  margin: 0 0 14px;
  color: var(--uds-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.uds-title {
  margin: 0;
  color: var(--uds-text);
  font-family: var(--uds-font);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -0.035em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.uds-title--large {
  font-size: clamp(40px, 6.5vw, 76px);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.uds-description {
  max-width: 62ch;
  margin: 20px 0 0;
  color: var(--uds-text-muted);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.75;
  text-wrap: pretty;
}

.uds-text-gradient {
  color: var(--uds-text);
}

@supports (
  (background-clip: text) or
  (-webkit-background-clip: text)
) {
  .uds-text-gradient {
    background-image: var(--uds-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}


/* ==================================================
   4. BOTONES
   Aplicar estas clases directamente al <a> o <button>.
   ================================================== */

.uds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  max-width: 100%;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--uds-radius-small);
  appearance: none;
  color: var(--uds-text);
  background: transparent;
  font-family: var(--uds-font);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    transform 240ms var(--uds-ease),
    box-shadow 240ms ease,
    border-color 240ms ease,
    background-color 240ms ease;
}

.uds-button--primary,
.uds-button--primary:visited,
.uds-button--primary:hover,
.uds-button--primary:focus-visible {
  color: #ffffff;
  background-image: var(--uds-gradient-button);
  background-color: var(--uds-purple);
}

.uds-button--primary {
  box-shadow: 0 6px 20px rgba(113, 52, 223, 0.18);
}

.uds-button--outline,
.uds-button--outline:visited {
  color: var(--uds-text);
  border-color: var(--uds-border);
  background-color: transparent;
}

.uds-button svg {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.uds-button:active:not(:disabled) {
  transform: scale(0.98);
}

.uds-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.uds-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-block-start: 28px;
}

@media (hover: hover) {
  .uds-button:hover:not(:disabled) {
    transform: translateY(-2px);
  }

  .uds-button--primary:hover:not(:disabled) {
    box-shadow:
      0 10px 28px rgba(113, 52, 223, 0.26),
      0 4px 16px rgba(0, 212, 245, 0.12);
  }

  .uds-button--outline:hover:not(:disabled) {
    color: var(--uds-text);
    border-color: var(--uds-cyan);
    background-color: rgba(0, 212, 245, 0.06);
  }
}


/* ==================================================
   5. TARJETAS
   ================================================== */

.uds-card {
  min-width: 0;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--uds-border);
  border-radius: var(--uds-radius-medium);
  color: var(--uds-text);
  background-color: var(--uds-card-background);
  box-shadow: var(--uds-shadow);
}

/* Mantiene un fondo sólido si el navegador no admite blur. */
@supports (
  (backdrop-filter: blur(16px)) or
  (-webkit-backdrop-filter: blur(16px))
) {
  .uds-card--glass {
    background-color: var(--uds-glass-background);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }
}


/* ==================================================
   6. CUADRÍCULAS RESPONSIVE
   ================================================== */

.uds-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--uds-grid-gap);
}

.uds-grid > * {
  min-width: 0;
}

@media (min-width: 48rem) {
  .uds-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .uds-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .uds-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* ==================================================
   7. ACCESIBILIDAD
   ================================================== */

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

@media (prefers-reduced-motion: reduce) {
  .uds-button {
    transition: none;
  }

  .uds-site .uds-button:hover,
  .uds-site .uds-button:active {
    transform: none;
  }
}

@media (forced-colors: active) {
  .uds-text-gradient {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }

  .uds-button {
    border: 1px solid ButtonText;
    color: ButtonText;
    background: ButtonFace;
    box-shadow: none;
  }
}

.uds-site {
  /* Paleta principal */
  --uds-cyan: #00d4f5;
  --uds-blue: #075acb;
  --uds-purple: #7134df;
  --uds-violet: #a17aff;
  --uds-magenta: #d92cff;

  /* Colores sobre fondos claros */
  --uds-ink: #101736;
  --uds-muted: #57617d;

  /* Tema predeterminado */
  --uds-background: #ffffff;
  --uds-text: var(--uds-ink);
  --uds-text-muted: var(--uds-muted);
  --uds-border: rgba(16, 23, 54, 0.12);
  --uds-card-background: #ffffff;
  --uds-glass-background: rgba(255, 255, 255, 0.82);

  /* Botones: estado normal */
  --uds-gradient-button: linear-gradient(
    110deg,
    #00718f 0%,
    var(--uds-blue) 45%,
    var(--uds-purple) 100%
  );

  /* Botón del header: hover */
  --uds-gradient-header-hover: linear-gradient(
    110deg,
    var(--uds-cyan) 0%,
    var(--uds-violet) 100%
  );

  --uds-header-hover-text: var(--uds-ink);

  /* Degradado para texto sobre fondo blanco */
  --uds-gradient-text: linear-gradient(
    100deg,
    #00768f 0%,
    var(--uds-blue) 35%,
    var(--uds-purple) 70%,
    #b321c3 100%
  );

  /* Tipografía compartida */
  --uds-font: "Segoe UI", system-ui, -apple-system,
    BlinkMacSystemFont, sans-serif;

  /* Dimensiones compartidas */
  --uds-content-width: 1200px;
  --uds-gutter: clamp(20px, 4vw, 40px);
  --uds-section-space: clamp(56px, 8vw, 112px);
  --uds-grid-gap: clamp(16px, 2.5vw, 28px);

  /* Acabados */
  --uds-radius-small: 12px;
  --uds-radius-medium: 20px;
  --uds-radius-large: 28px;
  --uds-shadow: 0 16px 48px rgba(16, 23, 54, 0.07);
  --uds-ease: cubic-bezier(0.22, 1, 0.36, 1);

  color: var(--uds-text);
  background-color: var(--uds-background);
  font-family: var(--uds-font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* HEADER */ 

/* ==================================================
   1. VARIABLES GENERALES
   Modifica aquí la identidad visual de UDS.
   ================================================== */

:root {
  /* Marca */
  --uds-cyan: #00d4f5;
  --uds-blue: #075acb;
  --uds-purple: #7134df;
  --uds-violet: #a17aff;
  --uds-magenta: #d92cff;

  /* Texto */
  --uds-ink: #101736;
  --uds-muted: #57617d;
  --uds-text: var(--uds-ink);
  --uds-text-muted: var(--uds-muted);

  /* Superficies */
  --uds-background: #ffffff;
  --uds-border: rgba(16, 23, 54, 0.12);
  --uds-card-background: #ffffff;
  --uds-glass-background: rgba(255, 255, 255, 0.82);

  /* Header */
  --uds-header-height: 76px;
  --uds-header-background: rgba(255, 255, 255, 0.97);
  --uds-header-glass: rgba(255, 255, 255, 0.82);
  --uds-header-panel: rgba(255, 255, 255, 0.97);
  --uds-header-border: rgba(28, 48, 100, 0.09);

  /* Tipografía */
  --uds-font: "Segoe UI", system-ui, -apple-system,
    BlinkMacSystemFont, sans-serif;

  /* Dimensiones */
  --uds-content-width: 1200px;
  --uds-gutter: clamp(20px, 4vw, 40px);
  --uds-section-space: clamp(56px, 8vw, 112px);
  --uds-grid-gap: clamp(16px, 2.5vw, 28px);

  /* Bordes */
  --uds-radius-small: 12px;
  --uds-radius-medium: 20px;
  --uds-radius-large: 28px;

  /* Sombras y movimiento */
  --uds-shadow: 0 16px 48px rgba(16, 23, 54, 0.07);
  --uds-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Botones: estado normal */
  --uds-gradient-button: linear-gradient(
    110deg,
    #00718f 0%,
    var(--uds-blue) 45%,
    var(--uds-purple) 100%
  );

  /* Header: hover cian y violeta */
  --uds-gradient-header-hover: linear-gradient(
    110deg,
    var(--uds-cyan) 0%,
    var(--uds-violet) 100%
  );

  --uds-header-hover-text: var(--uds-ink);

  /* Texto con degradado */
  --uds-gradient-text: linear-gradient(
    100deg,
    #00768f 0%,
    var(--uds-blue) 35%,
    var(--uds-purple) 70%,
    #b321c3 100%
  );

  /* Detalles decorativos */
  --uds-gradient-accent: linear-gradient(
    90deg,
    var(--uds-cyan),
    var(--uds-purple),
    var(--uds-magenta)
  );
}


/* ==================================================
   2. BASE
   ================================================== */

.uds-site {
  color: var(--uds-text);
  background-color: var(--uds-background);
  font-family: var(--uds-font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.uds-site,
.uds-site *,
.uds-site *::before,
.uds-site *::after,
.uds-header,
.uds-header *,
.uds-header *::before,
.uds-header *::after {
  box-sizing: border-box;
}

.uds-site :where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--uds-blue);
  outline-offset: 4px;
}


/* ==================================================
   3. CONTENEDORES Y SECCIONES
   ================================================== */

.uds-container {
  width: 100%;
  max-width: calc(
    var(--uds-content-width) + var(--uds-gutter) * 2
  );
  margin-inline: auto;
  padding-inline: var(--uds-gutter);
}

.uds-section {
  position: relative;
  padding-block: var(--uds-section-space);
  color: var(--uds-text);
  background-color: var(--uds-background);
}

.uds-section--dark {
  --uds-background: #070b14;
  --uds-text: #f5f7ff;
  --uds-text-muted: #b4bfd5;
  --uds-border: rgba(221, 231, 255, 0.16);
  --uds-card-background: #111827;
  --uds-glass-background: rgba(17, 24, 39, 0.82);
  --uds-shadow: 0 20px 56px rgba(0, 0, 0, 0.22);

  --uds-gradient-text: linear-gradient(
    100deg,
    #00d4f5 0%,
    #7bb5ff 35%,
    #b09aff 70%,
    #ef87ff 100%
  );

  color: var(--uds-text);
  background-color: var(--uds-background);
}


/* ==================================================
   4. TIPOGRAFÍA REUTILIZABLE
   ================================================== */

.uds-eyebrow {
  display: block;
  margin: 0 0 14px;
  color: var(--uds-text-muted);
  font-family: var(--uds-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.uds-title {
  margin: 0;
  color: var(--uds-text);
  font-family: var(--uds-font);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -0.035em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.uds-title--large {
  font-size: clamp(40px, 6.5vw, 76px);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

.uds-description {
  max-width: 62ch;
  margin: 20px 0 0;
  color: var(--uds-text-muted);
  font-family: var(--uds-font);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.75;
  text-wrap: pretty;
}

.uds-text-gradient {
  color: var(--uds-text);
}

@supports (
  (background-clip: text) or
  (-webkit-background-clip: text)
) {
  .uds-text-gradient {
    background-image: var(--uds-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}


/* ==================================================
   5. BOTONES REUTILIZABLES
   Aplicar directamente sobre <a> o <button>.
   ================================================== */

.uds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  max-width: 100%;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--uds-radius-small);
  appearance: none;
  color: var(--uds-text);
  background: transparent;
  font-family: var(--uds-font);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    transform 240ms var(--uds-ease),
    box-shadow 240ms ease,
    border-color 240ms ease,
    background-color 240ms ease;
}

.uds-button--primary,
.uds-button--primary:visited,
.uds-button--primary:hover,
.uds-button--primary:focus-visible {
  color: #ffffff;
  background-color: var(--uds-purple);
  background-image: var(--uds-gradient-button);
}

.uds-button--primary {
  box-shadow: 0 6px 20px color-mix(
    in srgb,
    var(--uds-purple) 18%,
    transparent
  );
}

.uds-button--outline,
.uds-button--outline:visited {
  color: var(--uds-text);
  border-color: var(--uds-border);
  background-color: transparent;
}

.uds-button svg {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.uds-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.uds-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-block-start: 28px;
}


/* ==================================================
   6. TARJETAS
   ================================================== */

.uds-card {
  min-width: 0;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--uds-border);
  border-radius: var(--uds-radius-medium);
  color: var(--uds-text);
  background-color: var(--uds-card-background);
  font-family: var(--uds-font);
  box-shadow: var(--uds-shadow);
}


/* ==================================================
   7. CUADRÍCULAS
   ================================================== */

.uds-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--uds-grid-gap);
}

.uds-grid > * {
  min-width: 0;
}


/* ==================================================
   8. HEADER
   ================================================== */

.uds-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 1000;
  isolation: isolate;
  width: 100%;
  color: var(--uds-ink);
  background: transparent;
  border-block-end: 1px solid transparent;
  font-family: var(--uds-font);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease;
}

.uds-header--scrolled,
.uds-header--open {
  background: var(--uds-header-background);
  border-block-end-color: var(--uds-header-border);
  box-shadow: 0 8px 32px rgba(20, 31, 70, 0.06);
}

.uds-header__container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 24px;
  width: 100%;
  max-width: calc(
    var(--uds-content-width) + var(--uds-gutter) * 2
  );
  min-height: var(--uds-header-height);
  margin-inline: auto;
  padding: 12px var(--uds-gutter);
}


/* ==================================================
   9. LOGO DEL HEADER
   ================================================== */

.uds-header__brand,
.uds-header__brand:visited {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--uds-ink);
  text-decoration: none;
}

.uds-header__logo {
  display: block;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.uds-header__wordmark {
  display: grid;
  gap: 2px;
}

.uds-header__name {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.2px;
}

.uds-header__tagline {
  color: var(--uds-muted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.02em;
}


/* ==================================================
   10. NAVEGACIÓN
   Visible por defecto si JavaScript no está disponible.
   ================================================== */

.uds-header__nav {
  display: flex;
  flex: 1 0 100%;
  flex-direction: column;
  gap: 16px;
  margin-block-start: 16px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--uds-header-border);
  border-radius: var(--uds-radius-medium);
}

.uds-header__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uds-header__list > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.uds-header__link,
.uds-header__link:visited {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--uds-ink);
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
  transition:
    color 180ms ease,
    background-color 180ms ease;
}

.uds-header__link::after {
  position: absolute;
  inset-inline: 12px;
  inset-block-end: 5px;
  height: 2px;
  border-radius: 999px;
  background: var(--uds-gradient-accent);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--uds-ease);
}

.uds-header__link:focus-visible {
  color: var(--uds-blue);
}

.uds-header__link:focus-visible::after {
  transform: scaleX(1);
}


/* ==================================================
   11. CTA DEL HEADER
   ================================================== */

.uds-header__cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--uds-radius-small);
  color: #ffffff;
  background-color: var(--uds-purple);
  background-image: var(--uds-gradient-button);
  box-shadow:
    0 5px 16px color-mix(
      in srgb,
      var(--uds-purple) 18%,
      transparent
    ),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  font-family: var(--uds-font);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  transition:
    color 240ms ease,
    transform 240ms var(--uds-ease),
    box-shadow 240ms ease;
}

.uds-header__cta:visited {
  color: #ffffff;
}

/* Capa de degradado para animar el hover suavemente. */
.uds-header__cta::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-image: var(--uds-gradient-header-hover);
  opacity: 0;
  pointer-events: none;
  content: "";
  transition: opacity 280ms ease;
}

.uds-header__cta > span,
.uds-header__cta > svg {
  position: relative;
  z-index: 1;
}

.uds-header__cta svg {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  transition: transform 240ms var(--uds-ease);
}

.uds-header__cta:focus-visible {
  color: var(--uds-header-hover-text);
}

.uds-header__cta:focus-visible::before {
  opacity: 1;
}


/* ==================================================
   12. BOTÓN HAMBURGUESA
   ================================================== */

.uds-header .uds-header__toggle {
  display: none;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--uds-header-border);
  border-radius: var(--uds-radius-small);
  appearance: none;
  color: var(--uds-ink);
  background: rgba(255, 255, 255, 0.65);
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
}

.uds-header__toggle-line {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition:
    transform 240ms var(--uds-ease),
    opacity 180ms ease;
}

.uds-header--ready .uds-header__toggle {
  display: inline-flex;
}

.uds-header--open .uds-header__toggle-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.uds-header--open .uds-header__toggle-line:nth-child(2) {
  opacity: 0;
}

.uds-header--open .uds-header__toggle-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ==================================================
   13. PANEL MÓVIL
   ================================================== */

.uds-header--ready .uds-header__nav {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: var(--uds-gutter);
  width: min(360px, calc(100% - var(--uds-gutter) * 2));
  max-height: calc(100vh - var(--uds-header-height) - 24px);
  max-height: calc(100dvh - var(--uds-header-height) - 24px);
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--uds-header-panel);
  box-shadow: 0 20px 60px rgba(20, 31, 70, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity 220ms ease,
    transform 260ms var(--uds-ease),
    visibility 220ms;
}

.uds-header--open .uds-header__nav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}


/* ==================================================
   14. EFECTOS GLASS
   ================================================== */

@supports (
  (backdrop-filter: blur(16px)) or
  (-webkit-backdrop-filter: blur(16px))
) {
  .uds-card--glass {
    background-color: var(--uds-glass-background);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }

  .uds-header--scrolled,
  .uds-header--open {
    background: var(--uds-header-glass);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }

  .uds-header--ready .uds-header__nav {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
}


/* ==================================================
   15. HOVER
   Solo se aplica a dispositivos con hover real.
   ================================================== */

@media (hover: hover) {
  .uds-button--primary:hover:not(:disabled) {
    box-shadow:
      0 10px 28px color-mix(
        in srgb,
        var(--uds-purple) 26%,
        transparent
      ),
      0 4px 16px color-mix(
        in srgb,
        var(--uds-cyan) 12%,
        transparent
      );
  }

  .uds-button--outline:hover:not(:disabled) {
    color: var(--uds-text);
    border-color: var(--uds-cyan);
    background-color: color-mix(
      in srgb,
      var(--uds-cyan) 6%,
      transparent
    );
  }

  .uds-header__link:hover {
    color: var(--uds-blue);
    background-color: color-mix(
      in srgb,
      var(--uds-blue) 5%,
      transparent
    );
  }

  .uds-header__link:hover::after {
    transform: scaleX(1);
  }

  .uds-header__cta:hover {
    color: var(--uds-header-hover-text);
    box-shadow:
      0 8px 26px color-mix(
        in srgb,
        var(--uds-cyan) 25%,
        transparent
      ),
      0 5px 20px color-mix(
        in srgb,
        var(--uds-violet) 24%,
        transparent
      );
  }

  .uds-header__cta:hover::before {
    opacity: 1;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .uds-button:hover:not(:disabled):not(:active),
  .uds-header__cta:hover:not(:active) {
    transform: translateY(-2px);
  }

  .uds-header__cta:hover svg {
    transform: translateX(3px);
  }
}

.uds-button:active:not(:disabled),
.uds-header__cta:active {
  transform: scale(0.98);
}


/* ==================================================
   16. RESPONSIVE: TABLET
   ================================================== */

@media (min-width: 48rem) {
  .uds-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ==================================================
   17. RESPONSIVE: ESCRITORIO
   ================================================== */

@media (min-width: 64rem) {
  :root {
    --uds-header-height: 84px;
  }

  .uds-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .uds-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .uds-header__container {
    flex-wrap: nowrap;
  }

  .uds-header--ready .uds-header__toggle {
    display: none;
  }

  .uds-header .uds-header__nav {
    position: static;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(20px, 3vw, 40px);
    width: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .uds-header__list {
    flex-direction: row;
    align-items: center;
    gap: clamp(12px, 1.5vw, 22px);
  }

  .uds-header__link,
  .uds-header__link:visited {
    padding-inline: 0;
    white-space: nowrap;
  }

  .uds-header__link::after {
    inset-inline: 0;
  }
}


/* ==================================================
   18. ACCESIBILIDAD
   ================================================== */

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

.uds-section--dark :where(
  a,
  button,
  input,
  textarea,
  select
):focus-visible {
  outline-color: var(--uds-cyan);
}

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

@media (prefers-reduced-motion: reduce) {
  .uds-header,
  .uds-header *,
  .uds-header *::before,
  .uds-header *::after,
  .uds-button {
    transition: none !important;
  }

  .uds-button:active:not(:disabled),
  .uds-header__cta:active {
    transform: none;
  }
}

@media (forced-colors: active) {
  .uds-text-gradient {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }

  .uds-site .uds-button,
  .uds-header .uds-header__cta {
    color: ButtonText;
    background: ButtonFace;
    border: 1px solid ButtonText;
    box-shadow: none;
  }

  .uds-header__cta::before {
    display: none;
  }

  .uds-header__link::after {
    background: LinkText;
  }
}

/* Logo oficial del header */
.uds-header .uds-header__brand-image {
  display: block;
  width: 120px;
  max-width: 100%;
  height: auto;
  max-height: 56px;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 600px) {
  .uds-header .uds-header__brand-image {
    width: 150px;
    max-height: 48px;
  }
}

/* Ajuste tamaño logo header */
header img,
.elementor-location-header img,
.site-header img,
.custom-logo,
.elementor-widget-theme-site-logo img,
.elementor-widget-image img {
  max-width: 180px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Si el logo está dentro de un contenedor muy alto */
header,
.elementor-location-header,
.site-header {
  min-height: auto !important;
}

/* Ajuste específico para desktop */
@media (min-width: 1025px) {
  header img,
  .elementor-location-header img,
  .site-header img,
  .custom-logo,
  .elementor-widget-theme-site-logo img {
    max-width: 170px !important;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  header img,
  .elementor-location-header img,
  .site-header img,
  .custom-logo,
  .elementor-widget-theme-site-logo img {
    max-width: 140px !important;
  }
}

/* Móvil */
@media (max-width: 767px) {
  header img,
  .elementor-location-header img,
  .site-header img,
  .custom-logo,
  .elementor-widget-theme-site-logo img {
    max-width: 115px !important;
  }
}


/* ==================================================
   UDS · HERO
   ================================================== */

.uds-hero {
  --uds-h-ink: var(--uds-ink, #111735);
  --uds-h-muted: var(--uds-muted, #596480);
  --uds-h-font: var(--uds-font, "Segoe UI", system-ui, sans-serif);
  --uds-h-gradient: linear-gradient(105deg, #0960d8, #7738ef, #bd25f0);

  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  overflow: clip;

  color: var(--uds-h-ink);
  background: #fff;
  font-family: var(--uds-h-font);

  scroll-margin-top: calc(var(--uds-header-height, 84px) + 20px);
}

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

/* El fondo general permanece blanco hasta sus bordes. */
.uds-hero::before,
.uds-hero::after {
  content: none;
}

.uds-hero .uds-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 38px;

  width: min(
    var(--uds-content-width, 1280px),
    calc(100% - 2 * var(--uds-gutter, 24px))
  );

  max-width: none;
  margin-inline: auto;
  padding: clamp(32px, 4vw, 64px) 0;
}

.uds-hero__copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 42rem;
  min-width: 0;
  margin-inline: auto;
}

.uds-hero .uds-hero__eyebrow {
  margin: 0 0 18px;
  color: var(--uds-h-muted);
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.uds-hero .uds-hero__title {
  margin: 0;
  color: var(--uds-h-ink);
  font-family: var(--uds-h-font);
  font-size: clamp(2rem, 5.6vw, 3.6rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.045em;
  overflow-wrap: break-word;
}

.uds-hero .uds-hero__title,
.uds-hero .uds-hero__title span {
  text-transform: none;
}

.uds-hero__title > .uds-hero__line {
  display: block;
}

.uds-hero .uds-text-gradient {
  color: #713aeb;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .uds-hero .uds-text-gradient {
    background: var(--uds-h-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.uds-hero .uds-hero__description {
  max-width: 49ch;
  margin: 24px 0 0;
  color: var(--uds-h-muted);
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 400;
  line-height: 1.7;
  text-transform: none;
  text-wrap: pretty;
}

/* BOTONES */

.uds-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

.uds-hero .uds-hero__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-height: 52px;
  padding: 13px clamp(18px, 2vw, 28px);

  border: 1px solid #b7cafa;
  border-radius: 12px;
  background: #fff;
  color: var(--uds-h-ink);

  font: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
  text-transform: none;
  text-decoration: none;
}

.uds-hero__button > svg {
  flex-shrink: 0;
}

.uds-hero .uds-hero__button--primary {
  isolation: isolate;
  overflow: hidden;
  border: 0;
  color: #fff;

  background: linear-gradient(
    110deg,
    #087c9e,
    #6239e8 72%,
    #a32cec
  );

  box-shadow: 0 9px 25px #7b3bef22;
  transition: color 0.25s ease, box-shadow 0.3s ease;
}

.uds-hero__button--primary::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 0;

  border-radius: 10px;
  background: #fff;
  pointer-events: none;

  clip-path: circle(
    0% at var(--uds-fill-x, 50%) var(--uds-fill-y, 50%)
  );

  transition: clip-path 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.uds-hero__button--primary > * {
  position: relative;
  z-index: 1;
}

.uds-hero .uds-hero__button--primary:focus-visible {
  color: var(--uds-h-ink);
}

.uds-hero__button--primary:focus-visible::before {
  clip-path: circle(
    150% at var(--uds-fill-x, 50%) var(--uds-fill-y, 50%)
  );
}

.uds-hero__arrow {
  transition: transform 0.3s ease;
}

/* CIFRAS */

.uds-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: 460px;
  margin: 36px 0 0;
  padding: 0;
}

.uds-hero__stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}

.uds-hero__stat + .uds-hero__stat {
  padding-inline-start: clamp(10px, 1.5vw, 20px);
  border-inline-start: 1px solid #d4def6;
}

.uds-hero .uds-hero__stat dt {
  margin: 0;
  color: var(--uds-h-muted);
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
}

.uds-hero .uds-hero__stat dd {
  margin: 0;
  color: var(--uds-blue, #075acb);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.uds-hero :is(a, button):focus-visible {
  outline: 3px solid #0787d8;
  outline-offset: 5px;
}

@media (hover: hover) {
  .uds-hero .uds-hero__button--primary:hover {
    color: var(--uds-h-ink);
    box-shadow: 0 10px 28px #773ced1c, 0 5px 18px #00c8ee1c;
  }

  .uds-hero__button--primary:hover::before {
    clip-path: circle(
      150% at var(--uds-fill-x, 50%) var(--uds-fill-y, 50%)
    );
  }

  .uds-hero__button:hover .uds-hero__arrow {
    transform: translateX(4px);
  }
}

@media (max-width: 35rem) {
  .uds-hero__actions {
    align-items: stretch;
    gap: 12px;
  }

  .uds-hero .uds-hero__button {
    width: 100%;
  }
}

@media (min-width: 64rem) {
  .uds-hero .uds-hero__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.03fr);
    gap: clamp(24px, 3vw, 44px);
  }

  .uds-hero__copy {
    max-width: none;
    margin: 0;
  }

  .uds-hero .uds-hero__title {
    font-size: clamp(2.35rem, 3.4vw, 3.65rem);
  }
}

/* ==================================================
   COMPOSICIÓN DERECHA
   ================================================== */

.uds-hero-lab {
  container-type: inline-size;
  container-name: uds-lab;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 760px;
  min-width: 0;
  margin-inline: auto;
  color: #111735;
  font-family: var(--uds-h-font);
  line-height: 1.35;
}

/* Luces localizadas, con transparencia antes de los bordes. */
.uds-hero-lab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse 50% 42% at 40% 43%,
      #00d4f524,
      transparent 72%
    ),
    radial-gradient(
      ellipse 48% 38% at 61% 60%,
      #9653ee24,
      transparent 75%
    );
}

.uds-lab__scene {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(12px, 3cqw, 24px);
  align-items: center;
  padding: 18px 16px 24px;
}

.uds-hero-lab .uds-lab__piece {
  --uds-turn: 0deg;
  --uds-rx: 0deg;
  --uds-ry: 0deg;
  --uds-lift: 0px;

  position: relative;
  display: block;
  min-width: 0;
  isolation: isolate;
  border-radius: 20px;
  color: #111735;
  text-decoration: none;

  transform:
    perspective(900px)
    translateY(var(--uds-lift))
    rotateX(var(--uds-rx))
    rotateY(var(--uds-ry))
    rotateZ(var(--uds-turn));

  transition: transform 0.35s ease;
}

.uds-lab__piece::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;

  background:
    radial-gradient(
      circle at var(--uds-x, 30%) var(--uds-y, 30%),
      #00d4f563,
      transparent 58%
    ),
    radial-gradient(
      circle at 80% 80%,
      #963cff50,
      transparent 65%
    );

  filter: blur(14px);
  transition: opacity 0.3s ease;
}

.uds-hero-lab .uds-lab__piece:focus-visible {
  outline: 3px solid #0787d8;
  outline-offset: 7px;
}

.uds-lab__piece:is(:hover, :focus-visible)::before {
  opacity: 1;
}

.uds-hero-lab .uds-lab__piece--web {
  grid-column: 1;
  grid-row: 1;
  --uds-turn: -3deg;
}

.uds-hero-lab .uds-lab__piece--brand {
  grid-column: 1;
  grid-row: 2;
  --uds-turn: -4deg;
}

.uds-hero-lab .uds-lab__piece--social {
  grid-column: 2;
  grid-row: 1 / 3;
  --uds-turn: 5deg;
}

/* ==================================================
   UDS HERO · CORRECCIÓN DE TAMAÑOS Y DISTRIBUCIÓN
   Pegar al final de uds.css
   ================================================== */

/* El hero toma únicamente la altura de su contenido. */
.uds-hero[data-uds-hero] {
  height: auto !important;
  min-height: 0 !important;
}

.uds-hero[data-uds-hero] .uds-hero__layout {
  min-height: 0 !important;
  padding-block: clamp(28px, 3vw, 48px) !important;
}

/* Tamaño máximo de toda la composición interactiva. */
.uds-hero[data-uds-hero] .uds-hero-lab {
  display: flex;
  flex-direction: column;

  width: 100% !important;
  max-width: 580px !important;

  height: auto !important;
  min-height: 0 !important;

  margin-inline: auto;
}

/* Cuadrícula que mantiene juntos los tres objetos. */
.uds-hero[data-uds-hero] .uds-lab__scene {
  position: relative !important;
  display: grid !important;

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

  grid-template-rows: auto auto;
  align-items: center;
  gap: 18px;

  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;

  padding: 16px 12px 20px !important;
  flex: 0 0 auto;
}

/*
 * Anula los desplazamientos de la composición anterior.
 * Las inclinaciones y animaciones siguen funcionando.
 */
.uds-hero[data-uds-hero] .uds-lab__scene > .uds-lab__piece {
  position: relative !important;
  inset: auto !important;

  width: 100% !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  align-self: center;

  --uds-zoom: 1;
}

/* Web: arriba a la izquierda. */
.uds-hero[data-uds-hero] .uds-lab__piece--web {
  grid-column: 1 !important;
  grid-row: 1 !important;

  --uds-turn: -2deg;
}

/* Manual y tarjetas: debajo de la web. */
.uds-hero[data-uds-hero] .uds-lab__piece--brand {
  grid-column: 1 !important;
  grid-row: 2 !important;

  --uds-turn: -4deg;
}

/* Teléfono: ocupa las dos filas de la derecha. */
.uds-hero[data-uds-hero] .uds-lab__piece--social {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;

  --uds-turn: 3deg;
}

/* Movimiento moderado para evitar superposiciones. */
.uds-hero[data-uds-hero] .uds-lab__scene > .uds-lab__piece--active {
  --uds-lift: -3px;
  --uds-zoom: 1.015;
}

/* Ventana de la miniweb; conserva el desplazamiento interior. */
.uds-hero[data-uds-hero] .uds-lab__web-viewport {
  height: clamp(175px, 34cqw, 205px) !important;
  max-height: none !important;
}

/* Proporciones del conjunto de branding. */
.uds-hero[data-uds-hero] .uds-lab__identity {
  aspect-ratio: 1.55;
}

/* Selector independiente: deja de cubrir los objetos. */
.uds-hero[data-uds-hero] .uds-lab__dock {
  position: relative !important;
  inset: auto !important;

  width: auto !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 8px 0 0;
  padding: 14px;

  flex: 0 0 auto;
}

/* ==================================================
   COMPOSICIÓN EN ESPACIOS PEQUEÑOS
   ================================================== */

@container uds-lab (max-width: 460px) {
  .uds-hero[data-uds-hero] .uds-lab__scene {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;

    padding: 12px 8px 18px !important;
  }

  /* La web ocupa toda la primera fila. */
  .uds-hero[data-uds-hero] .uds-lab__piece--web {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;

    --uds-turn: -1deg;
  }

  /* Branding y teléfono quedan juntos debajo. */
  .uds-hero[data-uds-hero] .uds-lab__piece--brand {
    grid-column: 1 !important;
    grid-row: 2 !important;

    --uds-turn: -3deg;
  }

  .uds-hero[data-uds-hero] .uds-lab__piece--social {
    grid-column: 2 !important;
    grid-row: 2 !important;

    --uds-turn: 2deg;
  }

  .uds-hero[data-uds-hero] .uds-lab__web-viewport {
    height: 55cqw !important;
  }

  .uds-hero[data-uds-hero] .uds-lab__identity {
    aspect-ratio: 0.77;
  }

  /* Controles accesibles antes de los objetos en móvil. */
  .uds-hero[data-uds-hero] .uds-lab__dock {
    order: -1;

    margin: 0 0 12px;
    padding: 12px;
  }
}

/* ACCESOS SOBRE LOS OBJETOS */

.uds-lab__cta {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  width: max-content;
  max-width: calc(100% - 12px);
  min-height: 44px;
  padding: 10px 16px;

  border: 1px solid transparent;
  border-radius: 999px;

  background:
    linear-gradient(#fffffff2, #fffffff2) padding-box,
    linear-gradient(110deg, #00d4f5, #963cff) border-box;

  box-shadow: 0 8px 24px #10173520;
  color: #111735;
  font-size: clamp(12px, 2cqw, 14px);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;

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

  transform: translateX(-50%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.uds-lab__cta > span {
  color: #7541e8;
  font-size: 18px;
}

/* ==================================================
   MINIATURA WEB
   ================================================== */

.uds-lab__browser {
  overflow: hidden;
  border: 1px solid #d7deed;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 18px 40px #1017351c, 0 2px 4px #10173512;
}

.uds-lab__browser-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: #11182c;
  color: #bdc6dc;
  font-size: clamp(6px, 1.25cqw, 9px);
}

.uds-lab__dots {
  display: flex;
  gap: 4px;
}

.uds-lab__dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #bd69ff;
}

.uds-lab__dots i:nth-child(2) { background: #00d4f5; }
.uds-lab__dots i:nth-child(3) { background: #b2e7f2; }

.uds-lab__web-page {
  padding: 4cqw 3cqw 3cqw;
}

.uds-lab__web-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4cqw;
}

.uds-lab__web-nav b {
  font-size: clamp(12px, 3cqw, 22px);
  letter-spacing: -0.06em;
}

.uds-lab__web-nav > span {
  font-size: clamp(5px, 0.8cqw, 7px);
  letter-spacing: 0.06em;
}

.uds-lab__web-nav > i {
  width: 6cqw;
  height: 2cqw;
  border-radius: 3px;
  background: linear-gradient(110deg, #00ccef, #963cff);
}

.uds-lab__web-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 2cqw;
  align-items: center;
}

.uds-lab__web-copy small {
  display: block;
  margin-bottom: 1.7cqw;
  font-size: clamp(5px, 0.9cqw, 8px);
  letter-spacing: 0.13em;
}

.uds-lab__web-copy > strong {
  display: block;
  font-size: clamp(17px, 4.2cqw, 32px);
  line-height: 1.06;
  letter-spacing: -0.05em;
}

.uds-lab__web-copy em {
  color: #7740e9;
  font-style: normal;
}

.uds-lab__mini-cta {
  display: inline-block;
  margin-top: 2.5cqw;
  padding: 1.2cqw 1.4cqw;
  border-radius: 4px;
  background: #12182f;
  color: #fff;
  font-size: clamp(6px, 1cqw, 9px);
}

.uds-lab__architecture {
  position: relative;
  min-height: 25cqw;
  overflow: hidden;
  border-radius: 8px;

  background:
    radial-gradient(circle at 15% 10%, #c7ffff, transparent 58%),
    linear-gradient(140deg, #25caf0, #7975f5 58%, #e1c7ff);
}

.uds-lab__architecture > i {
  position: absolute;
  bottom: -12%;
  left: 12%;
  width: 29%;
  height: 78%;
  transform: skewY(-22deg);

  background: linear-gradient(
    90deg, #151d4b, #3355b0 60%, #879bff 61%, #2b358c
  );

  box-shadow: 10px 10px 20px #18318740;
}

.uds-lab__architecture > i:nth-child(2) {
  left: 38%;
  height: 100%;
  background: linear-gradient(
    90deg, #506eef, #c9d5ff 60%, #7256df 61%, #442b91
  );
}

.uds-lab__architecture > i:nth-child(3) {
  left: 63%;
  height: 55%;
  background: linear-gradient(
    90deg, #ac58f3, #d7a8ff 60%, #582b9f 61%
  );
}

.uds-lab__architecture > span {
  position: absolute;
  top: 9%;
  right: 8%;
  color: #fff;
  font-size: clamp(6px, 1.1cqw, 9px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.07em;
}

.uds-lab__web-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2cqw;
  margin-top: 3cqw;
}

.uds-lab__web-strip i {
  height: 3cqw;
  border-radius: 3px;
  background: #ecf1fb;
}

.uds-lab__web-strip i:nth-child(2) {
  background: #e9e1ff;
}

/* ==================================================
   MANUAL, PAPELERÍA Y PALETA
   ================================================== */

.uds-lab__identity {
  position: relative;
  aspect-ratio: 1.55;
}

.uds-lab__book {
  position: absolute;
  left: 7%;
  top: 0;
  width: 53%;
  height: 91%;

  display: flex;
  flex-direction: column;
  padding: 8% 7%;

  border: 1px solid #455071;
  border-left: 6px solid #080f23;
  border-radius: 3px 8px 8px 3px;

  background:
    radial-gradient(ellipse at 95% 10%, #6041a060, transparent 60%),
    repeating-linear-gradient(
      135deg, transparent 0 33px, #ffffff08 34px 35px
    ),
    #11172c;

  box-shadow:
    7px 9px 0 -3px #d7deeb,
    10px 14px 0 -5px #a5aec2,
    0 20px 24px #151e3824;

  color: #fff;
}

.uds-lab__book-top {
  font-size: clamp(5px, 0.85cqw, 7px);
  letter-spacing: 0.09em;
  color: #b1bcd5;
}

.uds-lab__book > strong {
  margin-top: 8%;
  font-size: clamp(27px, 7cqw, 51px);
  letter-spacing: -0.07em;
  line-height: 1.1;
}

.uds-lab__book-title {
  margin-top: auto;
  font-size: clamp(12px, 2.4cqw, 18px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.uds-lab__book-line {
  display: block;
  width: 60%;
  height: 2px;
  margin-top: 8%;
  background: linear-gradient(90deg, #00d4f5, #a445ff);
}

.uds-lab__business-card {
  position: absolute;
  right: 1%;
  top: 27%;
  width: 48%;
  aspect-ratio: 1.6;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5%;

  transform: rotate(13deg);
  border: 1px solid #fff;
  border-radius: 4px;
  background: linear-gradient(125deg, #fff, #f2f5ff);
  box-shadow: 0 9px 24px #15254c26;
}

.uds-lab__business-card strong {
  font-size: clamp(16px, 3.5cqw, 26px);
  letter-spacing: -0.06em;
}

.uds-lab__business-card > span {
  font-size: clamp(6px, 1cqw, 8px);
  line-height: 1.4;
  color: #596280;
}

.uds-lab__swatches {
  position: absolute;
  bottom: 7%;
  right: 1%;
  display: flex;
  gap: 5px;
  transform: rotate(10deg);
}

.uds-lab__swatches i {
  display: block;
  width: 4.6cqw;
  height: 5.8cqw;
  border: 1px solid #ffffff55;
  border-radius: 3px;
  background: #10172e;
  box-shadow: 0 5px 8px #10173520;
}

.uds-lab__swatches i:nth-child(2) { background: #00d4f5; }
.uds-lab__swatches i:nth-child(3) { background: #8041f5; }
.uds-lab__swatches i:nth-child(4) { background: #d637f6; }

/* ==================================================
   TELÉFONO Y PUBLICACIONES
   ================================================== */

.uds-lab__phone {
  position: relative;
  overflow: hidden;
  padding: 15% 5% 7%;
  border: 5px solid #131b2d;
  border-radius: 30px;
  background: #fff;

  box-shadow:
    0 0 0 1px #aab4ca,
    inset 0 0 0 1px #e2e8f3,
    0 22px 36px #15213d26;
}

.uds-lab__phone-camera {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 32%;
  height: 9px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: #101626;
}

.uds-lab__phone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(9px, 1.9cqw, 14px);
}

.uds-lab__profile {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  margin: 3cqw 0;
}

.uds-lab__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 5cqw;
  height: 5cqw;
  border-radius: 50%;
  background: #12182c;
  color: #fff;
  font-size: clamp(10px, 2.4cqw, 18px);
  font-weight: 800;
}

.uds-lab__profile b {
  display: block;
  font-size: clamp(6px, 1.2cqw, 9px);
}

.uds-lab__profile small {
  display: block;
  margin-top: 3px;
  color: #66718b;
  font-size: clamp(4px, 0.65cqw, 6px);
}

.uds-lab__posts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.uds-lab__post {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 12%;
  background: #10162b;
  color: #fff;
}

.uds-lab__post--type {
  font-size: clamp(9px, 2cqw, 15px);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.uds-lab__post em {
  color: #50dfff;
  font-style: normal;
}

.uds-lab__post--orb {
  background: linear-gradient(150deg, #ddfaff, #eee6ff);
}

.uds-lab__post--orb i {
  width: 90%;
  aspect-ratio: 1;
  margin: auto;
  border-radius: 50%;

  background: radial-gradient(
    circle at 30% 25%,
    #e1ffff,
    #00c9ec 25%,
    #7954fa 57%,
    #151b48 85%
  );

  box-shadow: 8px 12px 12px #34298433;
}

.uds-lab__post--light {
  background: #e5f8fc;
  color: #12182d;
  font-size: clamp(12px, 2.7cqw, 20px);
  letter-spacing: -0.06em;
  line-height: 1.05;
}

.uds-lab__post--light b { color: #7435d5; }
.uds-lab__post--ribbon { background: #12152f; }

.uds-lab__post--ribbon i {
  position: absolute;
  inset: 10% 20%;
  border: 12px solid #ae62ff;
  border-left-color: #00d4f5;
  border-radius: 50%;
  transform: rotate(-32deg) scale(1.15);

  box-shadow:
    0 0 22px #9060ff80,
    inset 0 0 15px #00d4f54a;
}

.uds-lab__post--brand {
  background: linear-gradient(145deg, #5044d8, #963cf0);
}

.uds-lab__post--brand b {
  font-size: clamp(16px, 3.5cqw, 26px);
  letter-spacing: -0.06em;
}

.uds-lab__post--brand span {
  margin-top: 4px;
  font-size: clamp(4px, 0.7cqw, 6px);
  letter-spacing: 0.06em;
}

.uds-lab__phone-footer {
  display: flex;
  justify-content: space-around;
  padding-top: 3cqw;
  font-size: clamp(13px, 2.8cqw, 21px);
}

/* INTERACCIÓN CON MOUSE */

@media (hover: hover) and (pointer: fine) {
  .uds-lab__cta {
    opacity: 0;
    transform: translate(-50%, 8px);
  }

  .uds-hero-lab .uds-lab__piece:is(:hover, :focus-visible) {
    --uds-lift: -7px;
    z-index: 3;
  }

  .uds-lab__piece:is(:hover, :focus-visible) .uds-lab__cta {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* ADAPTACIÓN DE LOS OBJETOS */

@container (max-width: 460px) {
  .uds-lab__scene {
    grid-template-columns: 1fr 1fr;
    gap: 18px 14px;
    padding: 10px 8px 18px;
  }

  .uds-hero-lab .uds-lab__piece--web {
    grid-column: 1 / -1;
    grid-row: 1;
    --uds-turn: -1deg;
  }

  .uds-hero-lab .uds-lab__piece--brand {
    grid-column: 1;
    grid-row: 2;
    --uds-turn: -3deg;
  }

  .uds-hero-lab .uds-lab__piece--social {
    grid-column: 2;
    grid-row: 2;
    --uds-turn: 3deg;
  }

  .uds-lab__identity { aspect-ratio: 0.77; }

  .uds-lab__book {
    left: 2%;
    top: 2%;
    width: 85%;
    height: 74%;
    padding: 11% 8%;
  }

  .uds-lab__book > strong { font-size: 10cqw; }
  .uds-lab__book-title { font-size: 4cqw; }
  .uds-lab__book-top { font-size: 1.4cqw; }

  .uds-lab__business-card {
    top: 49%;
    right: 0;
    width: 75%;
    padding: 7%;
  }

  .uds-lab__business-card strong { font-size: 5cqw; }
  .uds-lab__business-card > span { font-size: 1.8cqw; }
  .uds-lab__swatches { bottom: 7%; right: 5%; }
  .uds-lab__swatches i { width: 6cqw; height: 8cqw; }

  .uds-lab__phone {
    border-width: 4px;
    border-radius: 24px;
  }

  .uds-lab__phone-header { font-size: 3cqw; }
  .uds-lab__profile b { font-size: 2cqw; }
  .uds-lab__profile small { font-size: 1.15cqw; }

  .uds-lab__avatar {
    width: 7cqw;
    height: 7cqw;
    font-size: 3cqw;
  }

  .uds-lab__post--type { font-size: 3.4cqw; }
  .uds-lab__post--light { font-size: 4.2cqw; }
  .uds-lab__post--brand b { font-size: 5cqw; }
  .uds-lab__post--brand span { font-size: 1.2cqw; }
  .uds-lab__phone-footer { padding-top: 5cqw; }

  .uds-lab__cta {
    gap: 6px;
    padding: 8px 10px;
    font-size: 12px;
    white-space: normal;
    text-align: center;
  }
}

/* ==================================================
   ESTADO INTERACTIVO
   ================================================== */

.uds-hero-lab--studio {
  display: flex;
  flex-direction: column;
}

.uds-lab__dock[hidden] {
  display: none !important;
}

.uds-hero-lab--studio .uds-lab__scene {
  position: relative;
  isolation: isolate;
}

.uds-hero-lab--studio .uds-lab__piece {
  --uds-zoom: 0.98;
  opacity: 0.88;
  animation: none;

  transform:
    perspective(1000px)
    translateY(var(--uds-lift))
    rotateX(var(--uds-rx))
    rotateY(var(--uds-ry))
    rotateZ(var(--uds-turn))
    scale(var(--uds-zoom));

  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease;
}

.uds-hero-lab--studio .uds-lab__piece.uds-lab__piece--active {
  --uds-lift: -6px;
  --uds-zoom: 1.025;
  opacity: 1;
  z-index: 4;
}

.uds-hero-lab--studio .uds-lab__piece--active::before {
  opacity: 0.85;
}

.uds-hero-lab--studio .uds-lab__piece--active .uds-lab__cta {
  opacity: 1;
  transform: translate(-50%, 0);
}

.uds-hero-lab--studio .uds-lab__browser {
  border-color: #b7c5e1;
  box-shadow: 0 24px 55px #16294b1f, 0 2px 4px #16294b12;
}

/* RECORRIDO DE LA MINIWEB */

.uds-lab__web-viewport {
  height: 42cqw;
  max-height: 330px;
  overflow: hidden;
  background: #fff;
}

.uds-lab__web-extra {
  margin-top: 4cqw;
  padding: 3cqw 0 1cqw;
  border-top: 1px solid #e7eafa;
}

.uds-lab__web-extra > strong {
  display: block;
  margin-bottom: 2cqw;
  color: #141b35;
  font-size: clamp(12px, 2.8cqw, 21px);
  letter-spacing: -0.04em;
}

.uds-lab__web-examples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5cqw;
}

.uds-lab__web-examples span {
  display: flex;
  align-items: end;
  min-height: 15cqw;
  padding: 1.5cqw;
  border-radius: 6px;

  background:
    radial-gradient(circle at 65% 30%, #03dbf4, transparent 48%),
    #171d42;

  color: #fff;
  font-size: clamp(7px, 1.25cqw, 10px);
  font-weight: 600;
}

.uds-lab__web-examples span:nth-child(2) {
  background:
    radial-gradient(circle at 25% 25%, #d599ff, transparent 60%),
    #713deb;
}

.uds-lab__web-examples span:nth-child(3) {
  background: linear-gradient(135deg, #cbf7ff, #c7b3ff);
  color: #22234c;
}

/* INTERIOR DEL MANUAL */

.uds-lab__brand-page {
  position: absolute;
  left: 7%;
  top: 0;
  width: 53%;
  height: 91%;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7%;

  border: 1px solid #d3ddf1;
  border-radius: 3px 8px 8px 3px;
  background: linear-gradient(110deg, #e5eaf4, #fff 35%, #f5f1ff);
  box-shadow: 4px 8px 12px #17243b15;
}

.uds-lab__brand-page > small {
  color: #6e7590;
  font-size: clamp(5px, 1cqw, 8px);
  letter-spacing: 0.05em;
}

.uds-lab__brand-page > b {
  align-self: end;
  color: #6232c4;
  font-size: clamp(15px, 3.5cqw, 26px);
  letter-spacing: -0.06em;
}

.uds-lab__brand-palette {
  display: flex;
  align-self: end;
  gap: 3px;
}

.uds-lab__brand-palette i {
  width: 2cqw;
  height: 6cqw;
  border-radius: 2px;
  background: #00d4f5;
}

.uds-lab__brand-palette i:nth-child(2) { background: #7850f6; }
.uds-lab__brand-palette i:nth-child(3) { background: #c437f3; }

.uds-hero-lab--studio .uds-lab__book {
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.uds-hero-lab--studio
.uds-lab__piece--brand.uds-lab__piece--active
.uds-lab__book {
  transform: perspective(600px) rotateY(-63deg);
}

.uds-hero-lab--studio .uds-lab__business-card {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.uds-hero-lab--studio
.uds-lab__piece--brand.uds-lab__piece--active
.uds-lab__business-card {
  transform: translate(7%, 5%) rotate(8deg);
}

.uds-lab__feed {
  overflow: hidden;
}

.uds-hero-lab--studio .uds-lab__posts {
  transform: translateY(0);
}

/* ===== UDS · HERO · ANIMACIONES DE ENTRADA ===== */
@media (prefers-reduced-motion: no-preference) {
  html.uds-js .uds-hero [data-uds-reveal]:not(.is-in) { opacity: 0; }

  html.uds-js .uds-hero [data-uds-reveal].is-in {
    animation-duration: var(--uds-dur, 0.9s);
    animation-delay: var(--uds-delay, 0s);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: backwards;
  }

  html.uds-js .uds-hero [data-uds-reveal="eyebrow"].is-in { animation-name: uds-eyebrow-in; }
  html.uds-js .uds-hero [data-uds-reveal="line"].is-in    { animation-name: uds-line-in; animation-duration: 1s; }
  html.uds-js .uds-hero [data-uds-reveal="fade-up"].is-in { animation-name: uds-fade-up; }
  html.uds-js .uds-hero [data-uds-reveal="pop"].is-in     { animation-name: uds-pop-in; animation-duration: 1.1s; }

  @keyframes uds-line-in {
    from { opacity: 0; translate: 0 0.55em; filter: blur(10px); }
    to   { opacity: 1; translate: 0 0; filter: blur(0); }
  }
  @keyframes uds-eyebrow-in {
    from { opacity: 0; letter-spacing: 0.45em; }
    to   { opacity: 1; letter-spacing: 0.2em; }
  }
  @keyframes uds-fade-up {
    from { opacity: 0; translate: 0 26px; }
    to   { opacity: 1; translate: 0 0; }
  }
  @keyframes uds-pop-in {
    from { opacity: 0; translate: var(--uds-mx, 0px) var(--uds-my, 40px); scale: 0.9; filter: blur(8px); }
    to   { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
  }

  .uds-hero .uds-hero__stat dd { font-variant-numeric: tabular-nums; }
}

/* ==================================================
   UDS · HERO · ALTURA (versión corregida)
   La altura se aplica al contenedor interno, no al hero,
   así se conservan el ancho y los márgenes originales.
   ================================================== */
.uds-hero[data-uds-hero] {
  --uds-hero-min: clamp(680px, calc(100vh - var(--uds-header-height, 84px)), 920px);
}

@supports (height: 100svh) {
  .uds-hero[data-uds-hero] {
    --uds-hero-min: clamp(680px, calc(100svh - var(--uds-header-height, 84px)), 920px);
  }
}

.uds-hero[data-uds-hero] .uds-hero__layout {
  min-height: 680px !important;                 /* respaldo */
  min-height: var(--uds-hero-min) !important;
  align-items: center;                          /* centra en vertical */
}

/* En móvil el hero mide lo que ocupa su contenido */
@media (max-width: 767px) {
  .uds-hero[data-uds-hero] .uds-hero__layout {
    min-height: 0 !important;
  }
}


/* ==================================================
   SELECTOR GLASS
   ================================================== */

.uds-lab__dock {
  position: relative;
  z-index: 5;
  margin: 12px 8px 0;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: 22px;

  background:
    linear-gradient(#fffffff2, #f8fbfff2) padding-box,
    linear-gradient(115deg, #00d4f566, #8a44ed50, #fff) border-box;

  box-shadow: 0 12px 36px #1829580d, inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.uds-lab__dock-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: #65718e;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.uds-lab__dock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00b6d7;
  box-shadow: 0 0 0 4px #00d4f514;
}

.uds-lab__choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid #e8eaf5;
  border-radius: 14px;
  background: #edf1f880;
}

.uds-hero-lab .uds-lab__choices button {
  appearance: none;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 9px 5px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #56617e;

  font-family: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;

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

.uds-hero-lab .uds-lab__choices button[aria-pressed="true"] {
  border-color: #fff;
  background: #fff;
  color: #6331c6;
  box-shadow: 0 3px 12px #152e6314;
}

.uds-hero-lab .uds-lab__choices button:hover {
  color: #5731b5;
}

.uds-lab__dock-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 13px;
}

.uds-lab__dock-detail p {
  margin: 0;
  min-height: 3em;
  color: #616d86;
  font-size: 12px;
  line-height: 1.5;
}

.uds-hero-lab .uds-lab__dock-detail a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: #272144;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.uds-lab__dock-detail a span {
  color: #8740e8;
  font-size: 18px;
}

.uds-lab__dock :is(a, button):focus-visible {
  outline: 2px solid #0787d8;
  outline-offset: 3px;
}

/* COMPOSICIÓN AMPLIA */

@container uds-lab (min-width: 461px) {
  .uds-hero-lab--studio .uds-lab__scene {
    display: block;
    aspect-ratio: 1.22;
    padding: 0;
  }

  .uds-hero-lab--studio .uds-lab__piece {
    position: absolute;
  }

  .uds-hero-lab--studio .uds-lab__piece--web {
    width: 76%;
    left: 3%;
    top: 4%;
    --uds-turn: -4deg;
  }

  .uds-hero-lab--studio .uds-lab__piece--brand {
    width: 46%;
    left: 5%;
    bottom: 3%;
    --uds-turn: -9deg;
  }

  .uds-hero-lab--studio .uds-lab__piece--social {
    width: 27%;
    right: 3%;
    top: 25%;
    --uds-turn: 7deg;
  }

  .uds-hero-lab--studio .uds-lab__post--type {
    font-size: clamp(8px, 1.6cqw, 12px);
  }

  .uds-hero-lab--studio .uds-lab__post--light {
    font-size: clamp(11px, 2.1cqw, 16px);
  }

  .uds-hero-lab--studio .uds-lab__profile b {
    font-size: clamp(5px, 1cqw, 8px);
  }

  .uds-hero-lab--studio .uds-lab__profile small {
    font-size: clamp(4px, 0.55cqw, 5px);
  }
}

/* SELECTOR ARRIBA EN MÓVIL */

@container uds-lab (max-width: 460px) {
  .uds-hero-lab--studio .uds-lab__web-viewport {
    height: 55cqw;
    max-height: none;
  }

  .uds-lab__brand-page {
    left: 2%;
    top: 2%;
    width: 85%;
    height: 74%;
    padding: 10%;
  }

  .uds-lab__brand-palette i {
    width: 3cqw;
    height: 9cqw;
  }

  .uds-lab__dock {
    order: -1;
    margin: 0 0 18px;
    padding: 13px;
  }

  .uds-lab__dock-detail {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .uds-lab__dock-detail a {
    justify-self: start;
  }
}

/* ==================================================
   ACCESIBILIDAD
   ================================================== */

:is(
  #uds-servicio-web,
  #uds-servicio-branding,
  #uds-servicio-redes
) {
  scroll-margin-top: calc(var(--uds-header-height, 84px) + 24px);
}

@media (prefers-reduced-motion: reduce) {
  .uds-hero .uds-hero__button,
  .uds-hero .uds-hero__button::before,
  .uds-hero .uds-hero__arrow,
  .uds-hero .uds-lab__piece,
  .uds-hero .uds-lab__piece::before,
  .uds-hero .uds-lab__cta,
  .uds-hero-lab--studio .uds-lab__book,
  .uds-hero-lab--studio .uds-lab__business-card,
  .uds-lab__choices button {
    transition: none;
    animation: none;
  }

  .uds-hero .uds-hero__arrow {
    transform: none;
  }

  .uds-hero-lab--studio .uds-lab__piece {
    transform: rotate(var(--uds-turn));
  }
}

@media (forced-colors: active) {
  .uds-hero,
  .uds-lab__dock {
    background: Canvas;
    color: CanvasText;
  }

  .uds-hero-lab::before,
  .uds-lab__piece::before,
  .uds-hero__button--primary::before {
    display: none;
  }

  .uds-hero .uds-text-gradient {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }

  .uds-hero .uds-hero__button,
  .uds-lab__cta,
  .uds-lab__dock {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
  }

  .uds-hero .uds-lab__choices button[aria-pressed="true"] {
    outline: 2px solid Highlight;
  }
}


/* =========================================
   UDS · SERVICIOS GLASS
   ========================================= */

.uds-services {
  /* Fotografía actual */
  --uds-services-photo: url("https://urds.mx/wp-content/uploads/2026/09/exec-cb4284d6-7645-47dd-8d6b-002ea6a524b7.png");

  /* Dimensiones */
  --uds-services-width: 1440px;
  --uds-services-radius: 20px;
  --uds-services-border-size: 2px;

  /* Colores */
  --uds-services-cyan: #00d4f5;
  --uds-services-blue: #5577ff;
  --uds-services-violet: #a13cff;
  --uds-services-text: #f7faff;
  --uds-services-muted: #dce6f5;

  /* Controles del cristal */
  --uds-services-overlay: 0.30;
  --uds-services-background-blur: 1px;
  --uds-services-card-opacity: 0.22;
  --uds-services-card-blur: 12px;

  /* Sombra que sigue al cursor */
  --uds-services-shadow-size: 760px;
  --uds-services-shadow-opacity: 0.34;

  --uds-services-ease: cubic-bezier(.22, 1, .36, 1);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(56px, 6vw, 88px);

  color: var(--uds-services-text);
  background: #040811;

  font-family: var(
    --uds-font,
    "Segoe UI", system-ui, -apple-system, sans-serif
  );

  scroll-margin-top: calc(var(--uds-header-height, 80px) + 20px);
}

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

/* =========================================
   FOTOGRAFÍA Y CAPAS
   ========================================= */

.uds-services::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: 0;

  background-image: var(--uds-services-photo);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  filter: blur(var(--uds-services-background-blur));
  pointer-events: none;
}

.uds-services::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background: rgba(0, 0, 0, var(--uds-services-overlay));
  pointer-events: none;
}

/* Sombra ambiental añadida por JS */

.uds-services .uds-services__cursor-shadow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;

  width: var(--uds-services-shadow-size);
  height: var(--uds-services-shadow-size);
  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(0, 0, 0, var(--uds-services-shadow-opacity)) 0%,
    rgba(0, 0, 0, .18) 30%,
    rgba(0, 0, 0, .06) 52%,
    transparent 72%
  );

  opacity: 0;
  pointer-events: none;
  transform: translate3d(-2000px, -2000px, 0);
  transition: opacity .4s ease;
}

.uds-services--pointer-active > .uds-services__cursor-shadow {
  opacity: 1;
  will-change: transform;
}

/* Contenido por encima de las capas */

.uds-services .uds-services__container {
  position: relative;
  z-index: 3;

  width: 100%;
  max-width: calc(
    var(--uds-services-width) + var(--uds-gutter, 24px) * 2
  );

  margin-inline: auto;
  padding-inline: var(--uds-gutter, 24px);
}

.uds-services .uds-services__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.uds-services .uds-services__stop--cyan {
  stop-color: var(--uds-services-cyan);
}

.uds-services .uds-services__stop--blue {
  stop-color: var(--uds-services-blue);
}

.uds-services .uds-services__stop--violet {
  stop-color: var(--uds-services-violet);
}

/* =========================================
   ENCABEZADO
   ========================================= */

.uds-services .uds-services__heading {
  max-width: 1050px;
  margin: 0 auto 40px;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

.uds-services .uds-services__eyebrow {
  margin: 0 0 14px;
  color: #e1eafa;
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.uds-services .uds-services__title {
  margin: 0;
  color: var(--uds-services-text);
  font-family: inherit;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -.035em;
  text-transform: none;
  text-wrap: balance;
}

.uds-services .uds-services__intro {
  max-width: 70ch;
  margin: 16px auto 0;
  color: var(--uds-services-muted);
  font-family: inherit;
  font-size: clamp(18px, 1.2vw, 17px);
  line-height: 1.7;
  text-transform: none;
  text-wrap: pretty;
}

/* =========================================
   CUADRÍCULA
   ========================================= */

.uds-services .uds-services__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;

  margin: 0;
  padding: 0;
  list-style: none;
}

.uds-services .uds-services__item {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =========================================
   TARJETAS DE CRISTAL
   ========================================= */

.uds-services .uds-service-card {
  --uds-glow-a: var(--uds-services-cyan);
  --uds-glow-b: var(--uds-services-violet);
  --uds-ring-size: var(--uds-services-border-size);

  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;

  width: 100%;
  min-width: 0;
  min-height: 350px;
  padding: 25px 20px 24px;

  overflow: hidden;
  border: 0;
  border-radius: var(--uds-services-radius);

  /* Transparencia mediante colores, sin bajar la opacidad del texto */
  background:
    linear-gradient(
      150deg,
      rgba(235, 248, 255, .14),
      rgba(225, 240, 255, .035) 42%,
      rgba(4, 13, 28, .24)
    ),
    rgba(14, 31, 53, var(--uds-services-card-opacity));

  -webkit-backdrop-filter:
    blur(var(--uds-services-card-blur))
    saturate(140%);

  backdrop-filter:
    blur(var(--uds-services-card-blur))
    saturate(140%);

  box-shadow:
    inset 0 0 0 1px rgba(101, 202, 245, .5),
    0 16px 34px rgba(0, 0, 0, .2),
    -3px -2px 15px rgba(0, 212, 245, .09),
    3px 3px 15px rgba(161, 60, 255, .11);

  color: var(--uds-services-text);
  font-family: inherit;
  text-align: center;
  text-decoration: none;

  transition:
    transform .4s var(--uds-services-ease),
    box-shadow .4s ease;
}

.uds-services .uds-services__item:nth-child(even) .uds-service-card {
  --uds-glow-a: var(--uds-services-violet);
  --uds-glow-b: var(--uds-services-cyan);
}

.uds-services .uds-service-card:visited {
  color: var(--uds-services-text);
}

/* Reflejos y segunda línea interior del cristal */

.uds-services .uds-service-card::after {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 0;

  border: 1px solid rgba(225, 245, 255, .12);
  border-radius: calc(var(--uds-services-radius) - 4px);

  background:
    linear-gradient(
      125deg,
      rgba(255, 255, 255, .13),
      transparent 26%,
      rgba(255, 255, 255, .025) 48%,
      transparent 68%
    ),
    radial-gradient(
      ellipse at 0% 0%,
      rgba(0, 212, 245, .07),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 100% 100%,
      rgba(161, 60, 255, .07),
      transparent 55%
    );

  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .13),
    inset -1px -1px 0 rgba(198, 213, 255, .07);

  pointer-events: none;
}

/* =========================================
   BORDES DEGRADADOS
   La máscara deja transparente el centro.
   ========================================= */

.uds-services .uds-service-card::before,
.uds-services .uds-service-card__bubble::before,
.uds-services .uds-service-card__arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;

  padding: var(--uds-ring-size, 1.5px);
  border-radius: inherit;

  background: linear-gradient(
    135deg,
    var(--uds-glow-a) 0%,
    #5975ff 35%,
    var(--uds-glow-b) 65%,
    var(--uds-glow-a) 100%
  );

  pointer-events: none;
}

@supports (
  (mask-composite: exclude) or
  (-webkit-mask-composite: xor)
) {
  .uds-services .uds-service-card::before,
  .uds-services .uds-service-card__bubble::before,
  .uds-services .uds-service-card__arrow::before {
    display: block;

    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);

    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}

/* =========================================
   REFLEJO QUE SIGUE AL CURSOR
   ========================================= */

.uds-services .uds-service-card > .uds-service-card__light {
  position: absolute;
  inset: 2px;
  z-index: 0;
  display: block;

  border-radius: calc(var(--uds-services-radius) - 2px);

  background: radial-gradient(
    230px circle at
      var(--uds-glass-x, 50%)
      var(--uds-glass-y, 30%),
    rgba(232, 248, 255, .16),
    rgba(100, 207, 255, .07) 35%,
    transparent 72%
  );

  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.uds-services .uds-service-card >
:not(.uds-service-card__light) {
  position: relative;
  z-index: 1;
}

/* =========================================
   BURBUJAS GLASS
   ========================================= */

.uds-services .uds-service-card__bubble,
.uds-services .uds-service-card__arrow {
  --uds-ring-size: 1.5px;

  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex-shrink: 0;

  border: 0;
  border-radius: 50%;

  background:
    radial-gradient(
      circle at 27% 18%,
      rgba(255, 255, 255, .2),
      transparent 58%
    ),
    linear-gradient(
      145deg,
      rgba(161, 218, 250, .09),
      rgba(28, 50, 91, .22)
    );

  box-shadow:
    inset 0 0 0 1px rgba(125, 196, 237, .45),
    inset 2px 2px 7px rgba(255, 255, 255, .08),
    inset -3px -4px 9px rgba(5, 13, 35, .15),
    0 7px 16px rgba(0, 0, 0, .12);

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

  transition:
    transform .35s var(--uds-services-ease),
    box-shadow .35s ease;
}

.uds-services .uds-service-card__bubble {
  width: 64px;
  height: 64px;
  margin-bottom: 15px;
}

/* Reflejo superior de las burbujas */

.uds-services .uds-service-card__bubble::after,
.uds-services .uds-service-card__arrow::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 0;

  border-top: 1px solid rgba(245, 252, 255, .45);
  border-left: 1px solid rgba(245, 252, 255, .12);
  border-radius: 50%;

  transform: rotate(-24deg);
  pointer-events: none;
}

.uds-services .uds-service-card__icon {
  position: relative;
  z-index: 1;
  display: block;

  width: 35px;
  height: 35px;
  margin: 0;

  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;

  filter: drop-shadow(0 0 6px rgba(83, 160, 255, .16));
}

/* =========================================
   TÍTULOS Y DESCRIPCIONES
   ========================================= */

.uds-services .uds-service-card__title {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 2.5em;
  margin: 0;

  color: var(--uds-services-text);
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.025em;
  text-transform: none;
  text-wrap: balance;

  text-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}

.uds-services .uds-service-card__description {
  flex: 1;
  width: 100%;
  max-width: 29ch;
  margin: 10px 0 21px;

  color: var(--uds-services-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  text-transform: none;
  text-wrap: pretty;

  text-shadow: 0 1px 8px rgba(0, 0, 0, .32);
}

/* Flecha inferior */

.uds-services .uds-service-card__arrow {
  width: 44px;
  height: 44px;
  margin-top: auto;
  color: #39e7ff;
}

.uds-services .uds-service-card__arrow svg {
  position: relative;
  z-index: 1;

  width: 21px;
  height: 21px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform .3s var(--uds-services-ease);
}

/* =========================================
   INTERACCIÓN
   ========================================= */

.uds-services .uds-service-card:focus-visible {
  outline: 2px solid var(--uds-services-cyan);
  outline-offset: 5px;
}

.uds-services .uds-service-card:focus-visible >
.uds-service-card__light {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .uds-services .uds-service-card:hover {
    color: var(--uds-services-text);
    text-decoration: none;

    box-shadow:
      inset 0 0 0 1px rgba(147, 224, 255, .55),
      0 22px 42px rgba(0, 0, 0, .27),
      -4px -2px 22px rgba(0, 212, 245, .16),
      4px 3px 22px rgba(161, 60, 255, .18);
  }

  .uds-services .uds-service-card:hover >
  .uds-service-card__light {
    opacity: 1;
  }

  .uds-services .uds-service-card:hover .uds-service-card__arrow {
    box-shadow:
      inset 0 0 0 1px rgba(137, 226, 255, .5),
      inset 2px 2px 8px rgba(255, 255, 255, .1),
      0 0 18px rgba(0, 212, 245, .18);
  }
}

@media
  (hover: hover) and
  (pointer: fine) and
  (prefers-reduced-motion: no-preference) {

  .uds-services .uds-service-card:hover {
    transform: translateY(-6px);
  }

  .uds-services .uds-service-card:hover .uds-service-card__bubble {
    transform: translateY(-2px);
  }

  .uds-services .uds-service-card:hover .uds-service-card__arrow svg {
    transform: translateX(2px);
  }
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (min-width: 40rem) {
  .uds-services .uds-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .uds-services .uds-services__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 90rem) {
  .uds-services .uds-services__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
  }

  .uds-services .uds-service-card {
    padding-inline: 18px;
  }

  .uds-services .uds-service-card__title {
    font-size: 17px;
  }
}

@media (max-width: 39.99rem) {
  .uds-services {
    --uds-services-card-opacity: 0.30;
    --uds-services-card-blur: 10px;
  }

  .uds-services::before {
    background-position: 45% center;
  }
}

/* Respaldo cuando el navegador no admite desenfoque */

@supports not (
  (backdrop-filter: blur(1px)) or
  (-webkit-backdrop-filter: blur(1px))
) {
  .uds-services .uds-service-card {
    background: rgba(10, 24, 43, .88);
  }
}

/* =========================================
   ACCESIBILIDAD
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  .uds-services .uds-services__cursor-shadow,
  .uds-services .uds-service-card > .uds-service-card__light {
    display: none;
  }

  .uds-services .uds-service-card,
  .uds-services .uds-service-card__bubble,
  .uds-services .uds-service-card__arrow,
  .uds-services .uds-service-card__arrow svg {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .uds-services {
    background: Canvas;
    color: CanvasText;
  }

  .uds-services::before,
  .uds-services::after,
  .uds-services .uds-services__cursor-shadow,
  .uds-services .uds-service-card::before,
  .uds-services .uds-service-card::after,
  .uds-services .uds-service-card__bubble::before,
  .uds-services .uds-service-card__bubble::after,
  .uds-services .uds-service-card__arrow::before,
  .uds-services .uds-service-card__arrow::after,
  .uds-services .uds-service-card > .uds-service-card__light {
    display: none;
  }

  .uds-services .uds-services__eyebrow,
  .uds-services .uds-services__title,
  .uds-services .uds-services__intro {
    color: CanvasText;
    text-shadow: none;
  }

  .uds-services .uds-service-card,
  .uds-services .uds-service-card__bubble,
  .uds-services .uds-service-card__arrow {
    border: 1px solid LinkText;
    background: Canvas;
    color: LinkText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .uds-services .uds-service-card__title,
  .uds-services .uds-service-card__description {
    color: LinkText;
    text-shadow: none;
  }

  .uds-services .uds-service-card__icon {
    stroke: LinkText;
    filter: none;
  }
}

/* =========================================
   SERVICIOS · LUZ CIAN / VIOLETA
   ========================================= */

.uds-services .uds-service-card > .uds-service-card__light {
  background:
    radial-gradient(
      210px circle at
        calc(var(--uds-glass-x, 50%) - 35px)
        var(--uds-glass-y, 35%),
      rgba(0, 212, 245, .30),
      rgba(0, 169, 234, .12) 38%,
      transparent 62%
    ),
    radial-gradient(
      210px circle at
        calc(var(--uds-glass-x, 50%) + 40px)
        calc(var(--uds-glass-y, 35%) + 12px),
      rgba(161, 60, 255, .30),
      rgba(112, 60, 238, .12) 38%,
      transparent 62%
    );

  transition: opacity .45s ease;
}

/* =========================================
   TÍTULOS MÁS VISIBLES
   ========================================= */

.uds-services .uds-service-card__title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 3em;
  margin: 0;
  padding-bottom: 12px;

  color: #ffffff;
  -webkit-text-fill-color: currentColor;

  font-family: inherit;
  font-size: clamp(18px, 1.2vw, 21px);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -.025em;
  text-align: center;
  text-transform: none;
  text-wrap: balance;

  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

/* Acento de marca debajo de cada título */

.uds-services .uds-service-card__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;

  width: 44px;
  height: 2px;
  border-radius: 999px;

  background: linear-gradient(
    90deg,
    #00d4f5,
    #5577ff,
    #a13cff
  );

  box-shadow:
    -5px 0 10px rgba(0, 212, 245, .16),
    5px 0 10px rgba(161, 60, 255, .16);

  transform: translateX(-50%);
}

/* =========================================
   BOTÓN CIRCULAR · HOVER
   ========================================= */

.uds-services .uds-service-card__arrow {
  cursor: pointer;

  transition:
    transform .35s var(--uds-services-ease),
    box-shadow .35s ease,
    color .35s ease;
}

.uds-services .uds-service-card__arrow svg {
  transition: transform .35s var(--uds-services-ease);
}

/* Estado accesible al seleccionar la card con teclado */

.uds-services .uds-service-card:focus-visible
.uds-service-card__arrow {
  color: #ffffff;

  box-shadow:
    inset 0 0 0 1px rgba(137, 226, 255, .55),
    -4px 0 18px rgba(0, 212, 245, .25),
    4px 0 18px rgba(161, 60, 255, .25);
}

@media (hover: hover) and (pointer: fine) {
  .uds-services .uds-service-card
  .uds-service-card__arrow:hover {
    color: #ffffff;

    background:
      radial-gradient(
        circle at 20% 20%,
        rgba(0, 212, 245, .28),
        transparent 75%
      ),
      radial-gradient(
        circle at 85% 80%,
        rgba(161, 60, 255, .28),
        transparent 75%
      ),
      rgba(12, 26, 48, .45);

    box-shadow:
      inset 0 0 0 1px rgba(137, 226, 255, .55),
      -5px 0 20px rgba(0, 212, 245, .28),
      5px 0 20px rgba(161, 60, 255, .28);
  }
}

/* Movimiento únicamente cuando está permitido */

@media
  (hover: hover) and
  (pointer: fine) and
  (prefers-reduced-motion: no-preference) {

  .uds-services .uds-service-card
  .uds-service-card__arrow:hover {
    transform: translateY(-2px) scale(1.1);
  }

  .uds-services .uds-service-card
  .uds-service-card__arrow:hover svg {
    transform: translateX(3px);
  }

  .uds-services .uds-service-card
  .uds-service-card__arrow:hover::before {
    animation: uds-service-ring-turn 2.8s linear infinite;
  }
}

/* Gira el degradado del aro, no la flecha */

@keyframes uds-service-ring-turn {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .uds-services .uds-service-card__arrow,
  .uds-services .uds-service-card__arrow::before,
  .uds-services .uds-service-card__arrow svg {
    animation: none !important;
    transition: none !important;
  }
}

/* ==================================================
   UDS · SERVICIOS · ANIMACIONES DE ENTRADA
   ================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* ---------- Estado inicial (solo si el JS lo preparó) ---------- */
  .uds-services.uds-svc-prep:not(.uds-svc-in) .uds-services__eyebrow,
  .uds-services.uds-svc-prep:not(.uds-svc-in) .uds-services__title,
  .uds-services.uds-svc-prep:not(.uds-svc-in) .uds-services__intro,
  .uds-services.uds-svc-prep:not(.uds-svc-in) .uds-service-card__bubble,
  .uds-services.uds-svc-prep:not(.uds-svc-in) .uds-service-card__title,
  .uds-services.uds-svc-prep:not(.uds-svc-in) .uds-service-card__description,
  .uds-services.uds-svc-prep:not(.uds-svc-in) .uds-service-card__arrow {
    opacity: 0;
  }

  /* La tarjeta NO usa opacity, para no romper el backdrop-filter */
  .uds-services.uds-svc-prep:not(.uds-svc-in) .uds-service-card {
    translate: 0 48px;
    scale: 0.94;
  }

  .uds-services.uds-svc-prep:not(.uds-svc-in)::before {
    scale: 1.08;
  }

  /* Retraso base de cada tarjeta (--i lo pone el JS) */
  .uds-services .uds-service-card {
    --svc-d: calc(0.5s + var(--i, 0) * 0.12s);
  }

  /* ---------- Animaciones ---------- */
  .uds-services.uds-svc-prep.uds-svc-in::before {
    animation: uds-svc-bg 2.2s var(--uds-services-ease) backwards;
  }

  .uds-services.uds-svc-prep.uds-svc-in .uds-services__eyebrow {
    animation: uds-svc-eyebrow 1s var(--uds-services-ease) backwards;
  }

  .uds-services.uds-svc-prep.uds-svc-in .uds-services__title {
    animation: uds-svc-blur-up 0.95s var(--uds-services-ease) 0.12s backwards;
  }

  .uds-services.uds-svc-prep.uds-svc-in .uds-services__intro {
    animation: uds-svc-fade-up 0.9s var(--uds-services-ease) 0.3s backwards;
  }

  .uds-services.uds-svc-prep.uds-svc-in .uds-service-card {
    animation: uds-svc-card-in 1s var(--uds-services-ease) var(--svc-d) backwards;
  }

  .uds-services.uds-svc-prep.uds-svc-in .uds-service-card__bubble {
    animation: uds-svc-pop 0.8s var(--uds-services-ease)
      calc(var(--svc-d) + 0.25s) backwards;
  }

  .uds-services.uds-svc-prep.uds-svc-in .uds-service-card__title {
    animation: uds-svc-blur-up 0.7s var(--uds-services-ease)
      calc(var(--svc-d) + 0.38s) backwards;
  }

  .uds-services.uds-svc-prep.uds-svc-in .uds-service-card__title::after {
    animation: uds-svc-line 0.7s var(--uds-services-ease)
      calc(var(--svc-d) + 0.65s) backwards;
  }

  .uds-services.uds-svc-prep.uds-svc-in .uds-service-card__description {
    animation: uds-svc-fade-up 0.7s var(--uds-services-ease)
      calc(var(--svc-d) + 0.5s) backwards;
  }

  .uds-services.uds-svc-prep.uds-svc-in .uds-service-card__arrow {
    animation: uds-svc-pop 0.7s var(--uds-services-ease)
      calc(var(--svc-d) + 0.7s) backwards;
  }

  /* ---------- Keyframes ---------- */
  @keyframes uds-svc-bg {
    from { scale: 1.08; }
    to   { scale: 1; }
  }

  @keyframes uds-svc-eyebrow {
    from { opacity: 0; letter-spacing: 0.5em; }
    to   { opacity: 1; letter-spacing: 0.26em; }
  }

  @keyframes uds-svc-blur-up {
    from { opacity: 0; translate: 0 0.5em; filter: blur(8px); }
    to   { opacity: 1; translate: 0 0; filter: blur(0); }
  }

  @keyframes uds-svc-fade-up {
    from { opacity: 0; translate: 0 16px; }
    to   { opacity: 1; translate: 0 0; }
  }

  @keyframes uds-svc-card-in {
    from { translate: 0 48px; scale: 0.94; }
    to   { translate: 0 0; scale: 1; }
  }

  @keyframes uds-svc-pop {
    from { opacity: 0; translate: 0 10px; scale: 0.5; }
    to   { opacity: 1; translate: 0 0; scale: 1; }
  }

  @keyframes uds-svc-line {
    from { scale: 0 1; }
    to   { scale: 1 1; }
  }
}


/* ==================================================
   PROCESO UDS
   Añadir al final de uds.css.
   ================================================== */

.uds-process {
  --uds-process-bubble-size: 108px;
  --uds-process-gap: 112px;
  --uds-process-radius: 24px;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(60px, 6vw, 88px);
  color: var(--uds-ink);
  background: #ffffff;
  font-family: var(--uds-font);
  scroll-margin-top: calc(var(--uds-header-height) + 20px);
}

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

.uds-process::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      ellipse at 16% 48%,
      color-mix(in srgb, var(--uds-cyan) 6%, transparent),
      transparent 32%
    ),
    radial-gradient(
      ellipse at 83% 52%,
      color-mix(in srgb, var(--uds-violet) 7%, transparent),
      transparent 34%
    );
  pointer-events: none;
  content: "";
}

.uds-process__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.uds-process__stop--cyan {
  stop-color: var(--uds-cyan);
}

.uds-process__stop--blue {
  stop-color: var(--uds-blue);
}

.uds-process__stop--purple {
  stop-color: var(--uds-purple);
}

.uds-process__stop--violet {
  stop-color: var(--uds-violet);
}

.uds-process__stop--magenta {
  stop-color: var(--uds-magenta);
}


/* ==================================================
   ENCABEZADO
   ================================================== */

.uds-process__heading {
  max-width: 1100px;
  margin-inline: auto;
  text-align: center;
}

.uds-process .uds-process__eyebrow {
  margin: 0 0 16px;
  color: var(--uds-purple);
  font-family: var(--uds-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.uds-process .uds-process__title {
  margin: 0;
  color: var(--uds-ink);
  font-family: var(--uds-font);
  font-size: clamp(28px, 3.15vw, 44px);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.04em;
  text-transform: none;
  text-wrap: balance;
}

.uds-process .uds-process__intro {
  max-width: 65ch;
  margin: 18px auto 0;
  color: var(--uds-muted);
  font-family: var(--uds-font);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
  text-transform: none;
  text-wrap: pretty;
}


/* ==================================================
   DISTRIBUCIÓN DE LOS PASOS
   ================================================== */

.uds-process__journey {
  position: relative;
  isolation: isolate;
  max-width: 520px;
  margin:
    calc(var(--uds-process-bubble-size) / 2 + 40px)
    auto
    0;
}

.uds-process__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--uds-process-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.uds-process__step {
  --uds-process-accent: var(--uds-blue);
  --uds-process-tint: var(--uds-cyan);

  position: relative;
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uds-process__step--connect {
  --uds-process-accent: var(--uds-purple);
  --uds-process-tint: var(--uds-magenta);
}

.uds-process__step--convert {
  --uds-process-accent: var(--uds-purple);
  --uds-process-tint: var(--uds-violet);
}


/* ==================================================
   TARJETAS
   ================================================== */

.uds-process-card {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding:
    calc(var(--uds-process-bubble-size) / 2 + 28px)
    clamp(20px, 2.5vw, 28px)
    28px;
  border: 1px solid color-mix(
    in srgb,
    var(--uds-process-accent) 13%,
    #ffffff
  );
  border-radius: var(--uds-process-radius);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.62),
    rgba(255, 255, 255, 0.96)
  );
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(28, 57, 110, 0.045);
  text-align: center;
  transition:
    border-color 300ms ease,
    box-shadow 300ms ease;
}

.uds-process .uds-process-card__title {
  margin: 0;
  color: var(--uds-ink);
  font-family: var(--uds-font);
  font-size: clamp(27px, 2.5vw, 32px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.035em;
  text-transform: none;
}

.uds-process .uds-process-card__description {
  flex: 1;
  max-width: 30ch;
  margin: 16px 0 24px;
  color: var(--uds-muted);
  font-family: var(--uds-font);
  font-size: 16px;
  line-height: 1.65;
  text-transform: none;
  text-wrap: pretty;
}

.uds-process-card__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  width: 100%;
  margin: auto 0 0;
  padding: 20px 0 0;
  border-block-start: 1px solid color-mix(
    in srgb,
    var(--uds-process-accent) 12%,
    #ffffff
  );
  list-style: none;
}

.uds-process-card__tools li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: var(--uds-muted);
  font-family: var(--uds-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  list-style: none;
  text-transform: none;
  white-space: nowrap;
}

.uds-process-card__tools li:not(:last-child)::after {
  color: var(--uds-process-accent);
  content: "·";
}


/* ==================================================
   NÚMEROS
   ================================================== */

.uds-process__number {
  position: absolute;
  inset-block-start: -22px;
  inset-inline-start: 20px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(
    in srgb,
    var(--uds-process-tint) 48%,
    #ffffff
  );
  border-radius: 50%;
  color: var(--uds-process-accent);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 1px 2px #ffffff;
  font-family: var(--uds-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}


/* ==================================================
   BURBUJAS GLASS
   ================================================== */

.uds-process__bubble {
  position: absolute;
  inset-block-start: calc(var(--uds-process-bubble-size) / -2);
  inset-inline-start: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: var(--uds-process-bubble-size);
  height: var(--uds-process-bubble-size);
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 29% 20%,
      rgba(255, 255, 255, 0.98),
      rgba(255, 255, 255, 0.38) 30%,
      transparent 58%
    ),
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--uds-process-tint) 18%,
        #ffffff
      ),
      rgba(255, 255, 255, 0.7) 48%,
      color-mix(
        in srgb,
        var(--uds-process-accent) 15%,
        #ffffff
      )
    );
  box-shadow:
    inset 3px 4px 7px rgba(255, 255, 255, 0.95),
    inset -4px -6px 12px color-mix(
      in srgb,
      var(--uds-process-accent) 16%,
      transparent
    ),
    0 10px 30px color-mix(
      in srgb,
      var(--uds-process-tint) 12%,
      transparent
    ),
    0 0 0 1px color-mix(
      in srgb,
      var(--uds-process-tint) 28%,
      transparent
    );
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
  transform: translateX(-50%);
  transition:
    transform 450ms var(--uds-ease),
    box-shadow 450ms ease;
}

/* Reflejo superior del cristal */
.uds-process__bubble::before {
  position: absolute;
  inset: 6px;
  border-block-start: 2px solid rgba(255, 255, 255, 0.96);
  border-inline-start: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  pointer-events: none;
  content: "";
  transform: rotate(-28deg);
}

/* Reflejo inferior */
.uds-process__bubble::after {
  position: absolute;
  inset-block-end: 11%;
  inset-inline-start: 28%;
  width: 44%;
  height: 10%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  filter: blur(4px);
  pointer-events: none;
  content: "";
}

.uds-process__icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 56%;
  height: 56%;
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(
    0 3px 5px
    color-mix(
      in srgb,
      var(--uds-process-accent) 18%,
      transparent
    )
  );
}


/* ==================================================
   CONEXIONES ENTRE PASOS
   ================================================== */

/* En móvil, el recorrido es vertical. */
.uds-process__step:not(:last-child)::after {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  z-index: 1;
  width: 2px;
  height: var(--uds-process-gap);
  background: linear-gradient(
    180deg,
    var(--uds-process-tint),
    var(--uds-process-accent)
  );
  pointer-events: none;
  content: "";
  transform: translateX(-50%);
}

.uds-process__connector {
  display: none;
  pointer-events: none;
}

.uds-process__connector-path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.uds-process__connector-arrow {
  position: absolute;
  inset-block-start: calc(100% + 32px);
  inset-inline-start: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(
    in srgb,
    var(--uds-process-tint) 40%,
    #ffffff
  );
  border-radius: 50%;
  color: var(--uds-process-accent);
  background: rgba(255, 255, 255, 0.97);
  transform: translate(-50%, -50%);
}

.uds-process__connector-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(90deg);
}


/* ==================================================
   ENLACE FINAL
   ================================================== */

.uds-process__footer {
  margin-block-start: 40px;
  text-align: center;
}

.uds-process .uds-process__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding-block: 10px;
  color: var(--uds-ink);
  font-family: var(--uds-font);
  font-size: 16px;
  font-weight: 550;
  line-height: 1.5;
  text-decoration: none;
  text-transform: none;
  transition: color 220ms ease;
}

.uds-process__cta::after {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--uds-gradient-accent);
  content: "";
}

.uds-process__cta svg {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 250ms var(--uds-ease);
}

.uds-process .uds-process__cta:focus-visible {
  outline: 3px solid var(--uds-blue);
  outline-offset: 5px;
}


/* ==================================================
   MICROINTERACCIONES
   ================================================== */

@media (hover: hover) {
  .uds-process__step:hover .uds-process-card {
    border-color: color-mix(
      in srgb,
      var(--uds-process-accent) 25%,
      #ffffff
    );
    box-shadow: 0 20px 48px color-mix(
      in srgb,
      var(--uds-process-accent) 8%,
      transparent
    );
  }

  .uds-process .uds-process__cta:hover {
    color: var(--uds-blue);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .uds-process__step:hover .uds-process__bubble {
    transform: translateX(-50%) translateY(-4px) scale(1.025);
  }

  .uds-process__cta:hover svg {
    transform: translateX(4px);
  }
}


/* ==================================================
   RESPONSIVE
   ================================================== */

@media (max-width: 35rem) {
  .uds-process {
    --uds-process-bubble-size: 96px;
  }

  .uds-process__number {
    inset-inline-start: 16px;
  }

  .uds-process-card__tools {
    column-gap: 8px;
  }
}

@media (min-width: 60rem) {
  .uds-process {
    --uds-process-gap: clamp(32px, 4vw, 64px);
  }

  .uds-process__journey {
    max-width: none;
  }

  .uds-process__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .uds-process__step:not(:last-child)::after {
    display: none;
  }

  .uds-process__connector {
    position: absolute;
    inset-block-start: -30px;
    inset-inline-start: 50%;
    z-index: 1;
    display: block;
    width: calc(100% + var(--uds-process-gap));
    max-width: none;
    height: 60px;
    overflow: visible;
  }

  .uds-process__connector-arrow {
    inset-block-start: 21px;
    inset-inline-start: calc(
      100% + var(--uds-process-gap) / 2
    );
  }

  .uds-process__connector-arrow svg {
    transform: none;
  }
}


/* ==================================================
   ACCESIBILIDAD
   ================================================== */

@media (prefers-reduced-motion: reduce) {
  .uds-process-card,
  .uds-process__bubble,
  .uds-process__cta,
  .uds-process__cta svg {
    transition: none !important;
  }

  .uds-process__connector-path {
    stroke-dasharray: none;
  }
}

@media (forced-colors: active) {
  .uds-process {
    color: CanvasText;
    background: Canvas;
  }

  .uds-process::before,
  .uds-process__bubble::before,
  .uds-process__bubble::after {
    display: none;
  }

  .uds-process-card,
  .uds-process__bubble,
  .uds-process__number,
  .uds-process__connector-arrow {
    color: CanvasText;
    background: Canvas;
    border: 1px solid CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .uds-process__icon,
  .uds-process__connector-path {
    stroke: CanvasText;
    filter: none;
  }

  .uds-process__icon rect {
    fill: CanvasText;
  }

  .uds-process__step:not(:last-child)::after,
  .uds-process__cta::after {
    background: CanvasText;
  }
}

/* UDS · Corregir las conexiones entre las tarjetas */
.uds-process .uds-process__connector-path {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==================================================
   UDS · PROCESO CON SCROLL NATURAL
   ================================================== */

.uds-process {
  --uds-process-scroll-ready: 2;
}

/* Neutraliza el contenedor de la versión anterior,
   si todavía existe durante la actualización. */
.uds-process-scroll {
  height: auto !important;
  min-height: 0 !important;
}

.uds-process-scroll > .uds-process {
  position: relative !important;
  top: auto !important;
}

/* ==================================================
   APARICIÓN DE LAS TARJETAS
   ================================================== */

.uds-process--sequence .uds-process-card {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 650ms ease,
    transform 800ms cubic-bezier(.22, 1, .36, 1),
    border-color 300ms ease,
    box-shadow 300ms ease;
}

.uds-process--sequence .uds-process__bubble {
  opacity: 1;
  transition:
    opacity 650ms ease,
    transform 850ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 450ms ease;
}

.uds-process--sequence .uds-process__number {
  opacity: 1;
  transition: opacity 500ms ease;
}

.uds-process--sequence
.uds-process__step:not(.uds-process__step--shown)
> .uds-process-card {
  opacity: 0;
  transform: translateY(22px);
  pointer-events: none;
}

.uds-process--sequence
.uds-process__step:not(.uds-process__step--shown)
> .uds-process__bubble {
  opacity: 0;
  transform: translateX(-50%) translateY(10px) scale(.92);
  pointer-events: none;
}

.uds-process--sequence
.uds-process__step:not(.uds-process__step--shown)
> .uds-process__number {
  opacity: 0;
  pointer-events: none;
}

/* ==================================================
   LÍNEAS CONTINUAS Y PROGRESIVAS
   ================================================== */

.uds-process .uds-process__connector-path {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Escritorio: revelar de izquierda a derecha. */
.uds-process--sequence .uds-process__connector {
  clip-path: inset(
    -4px
    var(--uds-process-line-cut, 100%)
    -4px
    0
  );
}

/* Móvil: crecimiento vertical. */
.uds-process--sequence
.uds-process__step:not(:last-child)::after {
  transform-origin: top center;
  transform:
    translateX(-50%)
    scaleY(var(--uds-process-line-scale, 0));
}

.uds-process--sequence .uds-process__connector-arrow {
  opacity: var(--uds-process-arrow-shown, 0);
  transition: opacity 220ms ease;
}

/* ==================================================
   ACCESIBILIDAD
   ================================================== */

@media (prefers-reduced-motion: reduce), print {
  .uds-process--sequence .uds-process-card,
  .uds-process--sequence .uds-process__bubble,
  .uds-process--sequence .uds-process__number,
  .uds-process--sequence .uds-process__connector-arrow {
    opacity: 1 !important;
    transition: none !important;
    pointer-events: auto !important;
  }

  .uds-process--sequence .uds-process-card {
    transform: none !important;
  }

  .uds-process--sequence .uds-process__bubble {
    transform: translateX(-50%) !important;
  }

  .uds-process--sequence .uds-process__connector {
    clip-path: none !important;
  }

  .uds-process--sequence
  .uds-process__step:not(:last-child)::after {
    transform: translateX(-50%) !important;
  }
}

/* UDS · Animación del subrayado del botón de Proceso */

.uds-process .uds-process__cta::after {
  background-image: linear-gradient(
    90deg,
    var(--uds-cyan, #00d4f5) 0%,
    var(--uds-blue, #075acb) 25%,
    var(--uds-purple, #7134df) 50%,
    var(--uds-blue, #075acb) 75%,
    var(--uds-cyan, #00d4f5) 100%
  );
  background-size: 200% 100%;
  background-repeat: repeat-x;
  background-position: 0% 50%;
}

/* Movimiento continuo hacia la izquierda, sin cortes. */
@keyframes uds-process-underline-left {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 200% 50%;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .uds-process .uds-process__cta:hover::after {
    animation: uds-process-underline-left 1.8s linear infinite;
  }
}

/* También funciona al seleccionar el enlace con el teclado. */
@media (prefers-reduced-motion: no-preference) {
  .uds-process .uds-process__cta:focus-visible::after {
    animation: uds-process-underline-left 1.8s linear infinite;
  }
}


/* ==================================================
   UDS · PORTAFOLIO CON VISOR INTERACTIVO
   ================================================== */

.uds-portfolio {
  /* Controles principales */
  --uds-pf-cyan: #00d4f5;
  --uds-pf-violet: #a148ff;
  --uds-pf-text: #f5f7ff;
  --uds-pf-muted: #b2bed0;

  --uds-pf-border: linear-gradient(
    125deg,
    #00d4f5,
    #4175da 48%,
    #a148ff
  );

  --uds-pf-height: clamp(520px, 37vw, 600px);

  position: relative;
  isolation: isolate;
  padding: clamp(36px, 4vw, 60px) 0;

  color: var(--uds-pf-text);

  background:
    radial-gradient(
      ellipse at 0 10%,
      #00d4f511,
      transparent 45%
    ),
    radial-gradient(
      ellipse at 100% 80%,
      #843cf31a,
      transparent 48%
    ),
    #050a12;

  font-family: var(
    --uds-font,
    "Segoe UI",
    system-ui,
    sans-serif
  );

  line-height: 1.5;
  scroll-margin-top: calc(var(--uds-header-height, 80px) + 20px);
}

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

.uds-portfolio [hidden] {
  display: none !important;
}

.uds-portfolio :is(h2, h3, p) {
  margin: 0;
  font-family: inherit;
  text-transform: none;
}

.uds-portfolio button {
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.uds-portfolio a {
  color: inherit;
  text-decoration: none;
}

.uds-portfolio :is(a, button):focus-visible {
  outline: 2px solid var(--uds-pf-cyan);
  outline-offset: 4px;
}

.uds-portfolio .uds-pf__container {
  width: min(1480px, calc(100% - 48px));
  margin-inline: auto;
}

/* Encabezado */

.uds-portfolio .uds-pf__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

.uds-portfolio .uds-pf__header > div {
  flex: 1 1 660px;
  min-width: 0;
}

.uds-portfolio .uds-pf__eyebrow {
  color: #b6d4e7;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .23em;
  text-transform: uppercase;
}

.uds-portfolio .uds-pf__title {
  margin-top: 14px;
  color: var(--uds-pf-text);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 750;
  line-height: 1.13;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.uds-portfolio .uds-pf__title span {
  color: var(--uds-pf-cyan);
}

.uds-portfolio .uds-pf__title em {
  color: #a451ff;
  font-style: normal;
}

.uds-portfolio .uds-pf__intro {
  margin-top: 14px;
  color: var(--uds-pf-muted);
  font-size: 16px;
}

/* Botones */

.uds-portfolio .uds-pf__button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-height: 46px;
  margin: 0;
  padding: 12px 20px;

  border: 1px solid transparent;
  border-radius: 999px;

  background:
    linear-gradient(#09101c, #09101c) padding-box,
    var(--uds-pf-border) border-box;

  color: #f5f7ff;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  text-align: center;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.uds-portfolio .uds-pf__button--primary {
  background:
    linear-gradient(
      110deg,
      #007993,
      #643bdd 68%,
      #9523d0
    ) padding-box,
    var(--uds-pf-border) border-box;
}

.uds-portfolio .uds-pf__button--small {
  flex-shrink: 0;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 12px;
}

.uds-portfolio .uds-pf__button span {
  font-size: 19px;
  transition: transform .25s ease;
}

.uds-portfolio .uds-pf__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  min-height: 44px;

  font-size: 13px;
  white-space: nowrap;
}

/* Distribución de los dos paneles */

.uds-portfolio .uds-pf__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.uds-portfolio .uds-pf__info,
.uds-portfolio .uds-pf__viewer {
  border: 1px solid transparent;
  border-radius: 22px;

  background:
    linear-gradient(
      140deg,
      #0b1722,
      #080d19 65%,
      #111025
    ) padding-box,
    var(--uds-pf-border) border-box;

  box-shadow: 0 20px 50px #00000024;
}

/* Ficha del cliente */

.uds-portfolio .uds-pf__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 2.5vw, 38px);
  touch-action: pan-y;
}

.uds-portfolio .uds-pf__name {
  margin-top: 20px;
  color: #fff;
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 750;
  line-height: 1.03;
  letter-spacing: -.045em;
  overflow-wrap: break-word;
}

.uds-portfolio .uds-pf__category {
  margin-top: 12px;
  color: #b9d2e5;
  font-size: 16px;
}

.uds-portfolio .uds-pf__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.uds-portfolio .uds-pf__tags span {
  padding: 6px 11px;
  border: 1px solid #7f97c040;
  border-radius: 999px;
  color: #e5eefa;
  font-size: 11px;
}

.uds-portfolio .uds-pf__description {
  margin-top: 18px;
  color: var(--uds-pf-muted);
  font-size: 15px;
  line-height: 1.65;
}

.uds-portfolio .uds-pf__focus {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #accfff24;
}

.uds-portfolio .uds-pf__focus ul {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.uds-portfolio .uds-pf__focus li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ced9e9;
  font-size: 14px;
}

.uds-portfolio .uds-pf__focus li::before {
  content: "↗";

  display: grid;
  place-items: center;
  flex-shrink: 0;

  width: 32px;
  height: 32px;

  border: 1px solid transparent;
  border-radius: 10px;

  background:
    linear-gradient(#0b1523, #0b1523) padding-box,
    var(--uds-pf-border) border-box;

  color: #81eaff;
  font-size: 18px;
}

.uds-portfolio .uds-pf__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;

  margin-top: auto;
  padding-top: 24px;
}

/* Visor del sitio */

.uds-portfolio .uds-pf__viewer-slot {
  min-width: 0;
  height: var(--uds-pf-height);
}

.uds-portfolio .uds-pf__viewer {
  position: relative;
  inset: auto;

  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;

  margin: 0;
  padding: 0;
  overflow: hidden;

  color: var(--uds-pf-text);
  font: inherit;
}

.uds-portfolio .uds-pf__viewer[open] {
  display: flex;
  flex-direction: column;
}

.uds-portfolio .uds-pf__toolbar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;

  min-height: 60px;
  padding: 10px 14px;
}

.uds-portfolio .uds-pf__browser-dots {
  display: flex;
  gap: 5px;
  padding-inline: 3px;
}

.uds-portfolio .uds-pf__browser-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff666c;
}

.uds-portfolio .uds-pf__browser-dots i:nth-child(2) {
  background: #ffce4d;
}

.uds-portfolio .uds-pf__browser-dots i:nth-child(3) {
  background: #48d7a0;
}

.uds-portfolio .uds-pf__address {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;

  border: 1px solid #8fa4d125;
  border-radius: 9px;
  background: #728bcc14;

  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uds-portfolio .uds-pf__embed {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0 12px;
  overflow: hidden;
  background: #fff;
}

.uds-portfolio .uds-pf__embed iframe {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;

  margin: 0;
  border: 0;
  border-radius: 0;

  background: #fff;
}

/* Portada antes de cargar */

.uds-portfolio .uds-pf__cover {
  position: absolute;
  inset: 0;
  overflow: hidden;

  background: radial-gradient(
    ellipse at top left,
    #16485a,
    #1a1439 80%
  );
}

.uds-portfolio .uds-pf__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uds-portfolio .uds-pf__cover::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    transparent 35%,
    #06101ce6
  );

  pointer-events: none;
}

.uds-portfolio .uds-pf__cover-caption {
  position: absolute;
  z-index: 1;
  left: 24px;
  right: 24px;
  bottom: 24px;

  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.uds-portfolio .uds-pf__cover-caption strong {
  color: #fff;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.1;
}

/* Estado de carga */

.uds-portfolio .uds-pf__loading {
  position: absolute;
  z-index: 2;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  background: #f6f8fc;
  color: #28324b;
  font-size: 14px;
  pointer-events: none;
}

.uds-portfolio .uds-pf__spinner {
  width: 22px;
  height: 22px;
  border: 2px solid #d7ddeb;
  border-top-color: #7450ed;
  border-radius: 50%;
  animation: uds-pf-spin .8s linear infinite;
}

@keyframes uds-pf-spin {
  to {
    transform: rotate(360deg);
  }
}

.uds-portfolio .uds-pf__viewer-footer {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  min-height: 46px;
  padding: 0 18px;

  color: #bdcde2;
  font-size: 11px;
}

.uds-portfolio .uds-pf__viewer-footer a {
  color: #a7ecff;
  font-size: 12px;
}

/* Selector de proyectos */

.uds-portfolio .uds-pf__navigation {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;

  margin-top: 24px;
  padding-top: 20px;

  border-top: 1px solid #b0c7f02b;
}

.uds-portfolio .uds-pf__counter {
  color: #c6d9e9;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.uds-portfolio .uds-pf__thumbs {
  grid-column: 1 / -1;
  grid-row: 2;

  display: flex;
  gap: 12px;
  min-width: 0;

  padding: 5px 4px 12px;
  overflow-x: auto;

  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #6f45b2 #101723;
}

.uds-portfolio .uds-pf__thumb {
  appearance: none;
  flex: 0 0 130px;
  width: 130px;
  min-width: 0;

  margin: 0;
  padding: 4px;

  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;

  color: #b8c5d7;
  line-height: 1.3;
  text-align: center;

  scroll-snap-align: center;

  transition:
    color .2s ease,
    background .2s ease;
}

.uds-portfolio .uds-pf__thumb-visual {
  display: block;
  height: 64px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, #193d52, #352452);
}

.uds-portfolio .uds-pf__thumb img {
  display: block;
  width: 100%;
  height: 100%;

  border: 0;
  border-radius: 0;

  object-fit: cover;
  opacity: .7;

  transition: opacity .2s ease;
}

.uds-portfolio .uds-pf__thumb-label {
  display: block;
  min-height: 2.6em;
  margin-top: 8px;
  font-size: 11px;
}

.uds-portfolio .uds-pf__thumb[aria-current="true"] {
  color: #fff;

  background:
    linear-gradient(#0a1220, #0a1220) padding-box,
    var(--uds-pf-border) border-box;
}

.uds-portfolio .uds-pf__thumb[aria-current="true"] img {
  opacity: 1;
}

.uds-portfolio .uds-pf__arrows,
.uds-portfolio .uds-pf__modal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.uds-portfolio .uds-pf__icon-button {
  appearance: none;
  display: grid;
  place-items: center;
  flex-shrink: 0;

  width: 46px;
  height: 46px;
  margin: 0;
  padding: 0;

  border: 1px solid transparent;
  border-radius: 50%;

  background:
    linear-gradient(#0a1220, #0a1220) padding-box,
    var(--uds-pf-border) border-box;

  color: #fff;
  font-size: 24px;
  line-height: 1;
}

.uds-portfolio .uds-pf__hint {
  margin-top: 12px;
  color: #9baec5;
  font-size: 12px;
  text-align: center;
}

/* Vista ampliada */

.uds-portfolio .uds-pf__modal-nav {
  font-size: 12px;
  white-space: nowrap;
}

.uds-portfolio .uds-pf__modal-nav .uds-pf__icon-button {
  width: 40px;
  height: 40px;
  font-size: 20px;
}

.uds-portfolio .uds-pf__viewer--expanded {
  position: fixed;
  inset: 12px;

  width: calc(100vw - 24px);
  height: calc(100vh - 24px);
  height: calc(100dvh - 24px);

  max-width: none;
  max-height: none;
  margin: 0;
}

.uds-portfolio .uds-pf__viewer::backdrop {
  background: #020611d9;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Accesibilidad y respaldo sin JavaScript */

.uds-portfolio .uds-pf__sr {
  position: absolute;
  width: 1px;
  height: 1px;

  margin: -1px;
  padding: 0;
  border: 0;

  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.uds-portfolio .uds-pf__fallback {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 20px;
}

/* Escritorio */

@media (min-width: 1024px) {
  .uds-portfolio .uds-pf__stage {
    grid-template-columns:
      minmax(300px, 1fr)
      minmax(0, 2.1fr);
  }

  .uds-portfolio .uds-pf__info {
    min-height: var(--uds-pf-height);
  }

  .uds-portfolio .uds-pf__viewer-slot {
    height: auto;
    min-height: var(--uds-pf-height);
  }

  .uds-portfolio .uds-pf__navigation {
    grid-template-columns: 70px minmax(0, 1fr) auto;
  }

  .uds-portfolio .uds-pf__thumbs {
    grid-column: auto;
    grid-row: auto;
  }

  .uds-portfolio .uds-pf__thumb {
    flex: 1 0 104px;
    width: auto;
  }
}

/* Móvil */

@media (max-width: 599px) {
  .uds-portfolio {
    --uds-pf-height: 490px;
    padding-block: 36px;
  }

  .uds-portfolio .uds-pf__container {
    width: calc(100% - 28px);
  }

  .uds-portfolio .uds-pf__intro {
    font-size: 14px;
  }

  .uds-portfolio .uds-pf__info {
    padding: 24px;
  }

  .uds-portfolio .uds-pf__toolbar {
    flex-wrap: wrap;
    gap: 8px;
    min-height: 56px;
    padding: 8px;
  }

  .uds-portfolio .uds-pf__browser-dots {
    display: none;
  }

  .uds-portfolio .uds-pf__embed {
    margin-inline: 6px;
  }

  .uds-portfolio .uds-pf__viewer-footer {
    gap: 8px;
    padding-inline: 10px;
  }

  .uds-portfolio .uds-pf__viewer-footer > span {
    max-width: 140px;
  }

  .uds-portfolio .uds-pf__viewer--expanded {
    inset: 6px;

    width: calc(100vw - 12px);
    height: calc(100vh - 12px);
    height: calc(100dvh - 12px);

    border-radius: 16px;
  }

  .uds-portfolio .uds-pf__viewer--expanded .uds-pf__address {
    flex-basis: calc(100% - 110px);
  }

  .uds-portfolio .uds-pf__modal-nav {
    order: 3;
    justify-content: center;
    width: 100%;
  }
}

/* Microinteracciones */

@media (hover: hover) and (pointer: fine) {
  .uds-portfolio .uds-pf__button:hover {
    transform: translateY(-2px);

    box-shadow:
      -5px 0 22px #00d4f51a,
      5px 0 22px #a148ff26;
  }

  .uds-portfolio .uds-pf__button:hover span {
    transform: translate(2px, -2px);
  }

  .uds-portfolio .uds-pf__link:hover {
    color: #82eaff;
  }

  .uds-portfolio .uds-pf__thumb:hover img {
    opacity: 1;
  }

  .uds-portfolio .uds-pf__icon-button:hover {
    color: #82eaff;
    box-shadow: 0 0 18px #00d4f524;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uds-portfolio *,
  .uds-portfolio *::before,
  .uds-portfolio *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .uds-portfolio,
  .uds-portfolio .uds-pf__info,
  .uds-portfolio .uds-pf__viewer {
    background: Canvas;
    color: CanvasText;
  }

  .uds-portfolio :is(
    .uds-pf__button,
    .uds-pf__icon-button,
    .uds-pf__thumb[aria-current="true"]
  ) {
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}

/* ==================================================
   UDS · PORTADAS DE PROYECTOS
   La web solo aparece en la vista ampliada
   ================================================== */

.uds-portfolio .uds-pf__viewer:not(.uds-pf__viewer--expanded) .uds-pf__embed {
  background: #081321;
}

.uds-portfolio .uds-pf__cover {
  cursor: zoom-in;
}

.uds-portfolio .uds-pf__cover img {
  object-fit: cover;
  object-position: center;

  transform: scale(1.001);

  transition:
    transform .65s cubic-bezier(.22, 1, .36, 1),
    filter .65s ease;
}

/* Oscurecimiento inferior para facilitar la lectura */

.uds-portfolio .uds-pf__cover::after {
  background: linear-gradient(
    180deg,
    #030a1205 30%,
    #030a1240 60%,
    #030a12e8 100%
  );
}

.uds-portfolio .uds-pf__cover-caption {
  left: clamp(20px, 3vw, 36px);
  right: clamp(20px, 3vw, 36px);
  bottom: clamp(22px, 3vw, 36px);

  align-items: end;
  gap: 20px;
}

.uds-portfolio .uds-pf__cover-caption strong {
  max-width: 65%;

  color: #fff;
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 750;
  line-height: 1.06;
  letter-spacing: -.035em;

  text-shadow: 0 3px 20px #00000040;
}

.uds-portfolio .uds-pf__cover-caption strong::before {
  content: "PROYECTO UDS";

  display: block;
  margin-bottom: 12px;

  color: #d5eafa;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: .2em;
}

/* Botón sobre la portada */

.uds-portfolio .uds-pf__cover [data-uds-pf="load"] {
  min-height: 48px;

  background:
    linear-gradient(#081321d9, #081321d9) padding-box,
    var(--uds-pf-border) border-box;

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

.uds-portfolio .uds-pf__cover:focus-within {
  outline: 2px solid var(--uds-pf-cyan);
  outline-offset: -4px;
}

/* Acercamiento suave al pasar el cursor */

@media (hover: hover) and (pointer: fine) {
  .uds-portfolio .uds-pf__cover:hover img {
    transform: scale(1.035);
    filter: brightness(1.04);
  }
}

/* Móvil */

@media (max-width: 599px) {
  .uds-portfolio .uds-pf__cover-caption {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .uds-portfolio .uds-pf__cover-caption strong {
    max-width: 100%;
  }
}

/* Movimiento reducido */

@media (prefers-reduced-motion: reduce) {
  .uds-portfolio .uds-pf__cover img {
    transform: none;
    transition: none;
  }

  .uds-portfolio .uds-pf__cover:hover img {
    transform: none;
  }
}

/* =========================================
   UDS · ANIMACIÓN DE BOTONES DE PROYECTOS
   ========================================= */

@property --uds-pf-ring-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.uds-portfolio {
  /* Más segundos = movimiento más lento */
  --uds-pf-ring-speed: 3.4s;
  --uds-pf-fill-speed: 2.6s;
}

/* CONTORNO DEGRADADO:
   CTA, botones de portada y flechas */

.uds-portfolio .uds-pf__button,
.uds-portfolio .uds-pf__icon-button,
.uds-portfolio .uds-pf__cover [data-uds-pf="load"] {
  --uds-pf-button-fill: linear-gradient(#09101c, #09101c);

  border-color: transparent;
  background-color: #09101c;

  background-image:
    var(--uds-pf-button-fill),
    conic-gradient(
      from var(--uds-pf-ring-angle, 0deg),
      #00d4f5 0deg,
      #5570ff 85deg,
      #a148ff 165deg,
      #c647ff 210deg,
      #00d4f5 300deg,
      #00d4f5 360deg
    );

  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 100% 100%;
  background-position: 50% 50%, 50% 50%;
  background-repeat: no-repeat;

  animation:
    uds-pf-ring-sway
    var(--uds-pf-ring-speed)
    ease-in-out
    infinite;

  animation-play-state: paused;

  transition:
    transform .25s ease,
    box-shadow .3s ease;
}

/* BOTÓN SOBRE LA IMAGEN:
   conserva el acabado glass */

.uds-portfolio .uds-pf__cover [data-uds-pf="load"] {
  --uds-pf-button-fill:
    linear-gradient(#081321ed, #081321ed);
}

/* BOTONES RELLENOS:
   degradado interior en movimiento */

.uds-portfolio .uds-pf__button.uds-pf__button--primary {
  --uds-pf-button-fill: linear-gradient(
    110deg,
    #007d98 0%,
    #593ade 28%,
    #a62fce 50%,
    #593ade 72%,
    #007d98 100%
  );

  background-size: 250% 100%, 100% 100%;
  background-position: 0% 50%, 50% 50%;

  animation:
    uds-pf-ring-sway
      var(--uds-pf-ring-speed)
      ease-in-out
      infinite,
    uds-pf-fill-sway
      var(--uds-pf-fill-speed)
      ease-in-out
      infinite;

  animation-play-state: paused;
}

/* MOVIMIENTO OSCILATORIO DEL BORDE */

@keyframes uds-pf-ring-sway {
  0%, 100% {
    --uds-pf-ring-angle: 0deg;
  }

  50% {
    --uds-pf-ring-angle: 240deg;
  }
}

/* DESPLAZAMIENTO DEL DEGRADADO INTERIOR */

@keyframes uds-pf-fill-sway {
  0%, 100% {
    background-position: 0% 50%, 50% 50%;
  }

  50% {
    background-position: 100% 50%, 50% 50%;
  }
}

/* ACTIVACIÓN CON TECLADO */

.uds-portfolio :is(
  .uds-pf__button,
  .uds-pf__icon-button
):focus-visible {
  animation-play-state: running;
  transform: translateY(-2px);

  box-shadow:
    -5px 0 22px #00d4f52b,
    5px 0 26px #a148ff38;
}

/* ACTIVACIÓN CON MOUSE */

@media (hover: hover) and (pointer: fine) {
  .uds-portfolio :is(
    .uds-pf__button,
    .uds-pf__icon-button
  ):hover {
    animation-play-state: running;
    transform: translateY(-2px);

    box-shadow:
      -5px 0 22px #00d4f52b,
      5px 0 26px #a148ff38;
  }
}

/* RESPUESTA AL PULSAR, TAMBIÉN EN MÓVIL */

.uds-portfolio :is(
  .uds-pf__button,
  .uds-pf__icon-button
):active {
  transform: translateY(0) scale(.98);
}

/* RESPETA LA PREFERENCIA DE MOVIMIENTO REDUCIDO */

@media (prefers-reduced-motion: reduce) {
  .uds-portfolio .uds-pf__button,
  .uds-portfolio .uds-pf__button span,
  .uds-portfolio .uds-pf__icon-button,
  .uds-portfolio .uds-pf__cover [data-uds-pf="load"] {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* MODO DE CONTRASTE ALTO */

@media (forced-colors: active) {
  .uds-portfolio .uds-pf__button,
  .uds-portfolio .uds-pf__icon-button,
  .uds-portfolio .uds-pf__cover [data-uds-pf="load"] {
    animation: none !important;
    background: ButtonFace;
    border-color: ButtonText;
    color: ButtonText;
    box-shadow: none;
  }
}

/* ==================================================
   UDS · PROYECTOS · ANIMACIONES DE ENTRADA
   ================================================== */
@media (prefers-reduced-motion: no-preference) {

  .uds-portfolio { --pf-ease: cubic-bezier(.22, 1, .36, 1); }

  /* Evita scroll horizontal mientras los paneles entran de lado */
  .uds-portfolio.uds-pf-prep { overflow-x: clip; }

  /* Estado inicial: todo el bloque oculto hasta que lo vean */
  .uds-portfolio .uds-pf-pre { visibility: hidden; }

  /* ---------- 1. ENCABEZADO ---------- */
  .uds-portfolio .uds-pf__header.uds-pf-go .uds-pf__eyebrow {
    animation: uds-pf-in-eyebrow 1s var(--pf-ease) var(--pf-base, 0s) backwards;
  }
  .uds-portfolio .uds-pf__header.uds-pf-go .uds-pf__title {
    animation: uds-pf-in-blur .95s var(--pf-ease) calc(var(--pf-base, 0s) + .12s) backwards;
  }
  .uds-portfolio .uds-pf__header.uds-pf-go .uds-pf__intro {
    animation: uds-pf-in-up .9s var(--pf-ease) calc(var(--pf-base, 0s) + .3s) backwards;
  }

  /* El botón tiene su propia animación de contorno,
     así que entra con transition (no con animation) */
  .uds-portfolio .uds-pf__header.uds-pf-pre > .uds-pf__button,
  .uds-portfolio .uds-pf__header.uds-pf-go  > .uds-pf__button {
    transition:
      transform .25s ease,
      box-shadow .3s ease,
      opacity .9s var(--pf-ease) calc(var(--pf-base, 0s) + .45s),
      translate .9s var(--pf-ease) calc(var(--pf-base, 0s) + .45s);
  }
  .uds-portfolio .uds-pf__header.uds-pf-pre > .uds-pf__button {
    opacity: 0;
    translate: 0 18px;
  }

  /* ---------- 2. FICHA DEL CLIENTE ---------- */
  .uds-portfolio .uds-pf__info.uds-pf-go {
    animation: uds-pf-in-left 1s var(--pf-ease) var(--pf-base, 0s) backwards;
  }

  /* Cada bloque interno entra en cascada (--k = posición) */
  .uds-portfolio .uds-pf__info.uds-pf-go > * {
    animation: uds-pf-in-up .8s var(--pf-ease)
      calc(var(--pf-base, 0s) + .45s + var(--k, 0) * .09s) backwards;
  }
  .uds-portfolio .uds-pf__info.uds-pf-go > .uds-pf__name {
    animation-name: uds-pf-in-blur;
  }
  .uds-portfolio .uds-pf__info.uds-pf-go > :nth-child(2) { --k: 1; }
  .uds-portfolio .uds-pf__info.uds-pf-go > :nth-child(3) { --k: 2; }
  .uds-portfolio .uds-pf__info.uds-pf-go > :nth-child(4) { --k: 3; }
  .uds-portfolio .uds-pf__info.uds-pf-go > :nth-child(5) { --k: 4; }
  .uds-portfolio .uds-pf__info.uds-pf-go > :nth-child(6) { --k: 5; }
  .uds-portfolio .uds-pf__info.uds-pf-go > :nth-child(7) { --k: 6; }

  /* Etiquetas y puntos del enfoque, uno por uno */
  .uds-portfolio .uds-pf__info.uds-pf-go .uds-pf__tags span,
  .uds-portfolio .uds-pf__info.uds-pf-go .uds-pf__focus li {
    animation: uds-pf-in-up .7s var(--pf-ease)
      calc(var(--pf-base, 0s) + 1s + var(--j, 0) * .1s) backwards;
  }
  .uds-portfolio .uds-pf__info.uds-pf-go :is(.uds-pf__tags span, .uds-pf__focus li):nth-child(2) { --j: 1; }
  .uds-portfolio .uds-pf__info.uds-pf-go :is(.uds-pf__tags span, .uds-pf__focus li):nth-child(3) { --j: 2; }
  .uds-portfolio .uds-pf__info.uds-pf-go :is(.uds-pf__tags span, .uds-pf__focus li):nth-child(4) { --j: 3; }

  /* ---------- 3. VISOR ---------- */
  .uds-portfolio .uds-pf__viewer-slot.uds-pf-go {
    animation: uds-pf-in-right 1.1s var(--pf-ease) calc(var(--pf-base, 0s) + .15s) backwards;
  }
  .uds-portfolio .uds-pf__viewer-slot.uds-pf-go .uds-pf__toolbar {
    animation: uds-pf-in-down .8s var(--pf-ease) calc(var(--pf-base, 0s) + .75s) backwards;
  }
  .uds-portfolio .uds-pf__viewer-slot.uds-pf-go .uds-pf__embed {
    animation: uds-pf-in-wipe 1.2s var(--pf-ease) calc(var(--pf-base, 0s) + .7s) backwards;
  }
  .uds-portfolio .uds-pf__viewer-slot.uds-pf-go .uds-pf__cover img {
    animation: uds-pf-in-zoom 1.8s var(--pf-ease) calc(var(--pf-base, 0s) + .7s) backwards;
  }
  .uds-portfolio .uds-pf__viewer-slot.uds-pf-go .uds-pf__cover-caption {
    animation: uds-pf-in-up .9s var(--pf-ease) calc(var(--pf-base, 0s) + 1.35s) backwards;
  }
  .uds-portfolio .uds-pf__viewer-slot.uds-pf-go .uds-pf__viewer-footer {
    animation: uds-pf-in-fade .8s ease calc(var(--pf-base, 0s) + 1.45s) backwards;
  }

  /* ---------- 4. SELECTOR ---------- */
  .uds-portfolio .uds-pf__navigation.uds-pf-go {
    animation: uds-pf-in-fade .8s ease var(--pf-base, 0s) backwards;
  }
  .uds-portfolio .uds-pf__navigation.uds-pf-go .uds-pf__counter {
    animation: uds-pf-in-up .7s var(--pf-ease) calc(var(--pf-base, 0s) + .15s) backwards;
  }
  .uds-portfolio .uds-pf__navigation.uds-pf-go .uds-pf__thumb {
    animation: uds-pf-in-thumb .7s var(--pf-ease)
      calc(var(--pf-base, 0s) + .25s + var(--k, 0) * .08s) backwards;
  }
  .uds-portfolio .uds-pf__navigation.uds-pf-go .uds-pf__thumb:nth-child(2) { --k: 1; }
  .uds-portfolio .uds-pf__navigation.uds-pf-go .uds-pf__thumb:nth-child(3) { --k: 2; }
  .uds-portfolio .uds-pf__navigation.uds-pf-go .uds-pf__thumb:nth-child(4) { --k: 3; }
  .uds-portfolio .uds-pf__navigation.uds-pf-go .uds-pf__thumb:nth-child(5) { --k: 4; }
  .uds-portfolio .uds-pf__navigation.uds-pf-go .uds-pf__thumb:nth-child(6) { --k: 5; }
  .uds-portfolio .uds-pf__navigation.uds-pf-go .uds-pf__thumb:nth-child(7) { --k: 6; }
  .uds-portfolio .uds-pf__navigation.uds-pf-go .uds-pf__thumb:nth-child(8) { --k: 7; }

  /* Las flechas tienen animación propia: se anima su contenedor */
  .uds-portfolio .uds-pf__navigation.uds-pf-go .uds-pf__arrows {
    animation: uds-pf-in-up .7s var(--pf-ease) calc(var(--pf-base, 0s) + .8s) backwards;
  }
  .uds-portfolio .uds-pf__hint.uds-pf-go {
    animation: uds-pf-in-up .8s var(--pf-ease) calc(var(--pf-base, 0s) + .9s) backwards;
  }

  /* ---------- KEYFRAMES ---------- */
  @keyframes uds-pf-in-eyebrow {
    from { opacity: 0; letter-spacing: .5em; }
    to   { opacity: 1; letter-spacing: .23em; }
  }
  @keyframes uds-pf-in-blur {
    from { opacity: 0; translate: 0 .5em; filter: blur(8px); }
    to   { opacity: 1; translate: 0 0; filter: blur(0); }
  }
  @keyframes uds-pf-in-up {
    from { opacity: 0; translate: 0 18px; }
    to   { opacity: 1; translate: 0 0; }
  }
  @keyframes uds-pf-in-down {
    from { opacity: 0; translate: 0 -12px; }
    to   { opacity: 1; translate: 0 0; }
  }
  @keyframes uds-pf-in-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes uds-pf-in-left {
    from { opacity: 0; translate: -40px 24px; scale: .97; }
    to   { opacity: 1; translate: 0 0; scale: 1; }
  }
  @keyframes uds-pf-in-right {
    from { opacity: 0; translate: 40px 24px; scale: .97; }
    to   { opacity: 1; translate: 0 0; scale: 1; }
  }
  @keyframes uds-pf-in-wipe {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }
  @keyframes uds-pf-in-zoom {
    from { scale: 1.18; }
    to   { scale: 1; }
  }
  @keyframes uds-pf-in-thumb {
    from { opacity: 0; scale: .8; }
    to   { opacity: 1; scale: 1; }
  }
}


/* =========================================
   UDS · PLANES
   ========================================= */

.uds-pricing {
  --uds-pricing-width: 1200px;
  --uds-pricing-cyan: #00d4f5;
  --uds-pricing-violet: #943cff;
  --uds-pricing-ink: #101735;
  --uds-pricing-muted: #62718f;
  --uds-pricing-ease: cubic-bezier(.22, 1, .36, 1);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(52px, 6vw, 86px);

  color: var(--uds-pricing-ink);
  font-family: var(
    --uds-font,
    "Segoe UI", system-ui, -apple-system, sans-serif
  );

  background:
    radial-gradient(
      ellipse at 0% 55%,
      rgba(0, 212, 245, .08),
      transparent 45%
    ),
    radial-gradient(
      ellipse at 100% 8%,
      rgba(148, 60, 255, .065),
      transparent 40%
    ),
    #ffffff;

  scroll-margin-top: calc(var(--uds-header-height, 80px) + 20px);
}

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

/* Arcos decorativos discretos */

.uds-pricing::before,
.uds-pricing::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
}

.uds-pricing::before {
  top: -360px;
  right: -260px;
  border: 1px solid rgba(148, 60, 255, .16);
}

.uds-pricing::after {
  bottom: -330px;
  left: -360px;
  border: 1px solid rgba(0, 177, 221, .2);
}

.uds-pricing .uds-pricing__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.uds-pricing .uds-pricing__container {
  width: min(
    var(--uds-pricing-width),
    calc(100% - 40px)
  );
  margin-inline: auto;
}

/* Encabezado */

.uds-pricing .uds-pricing__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 34px;
}

.uds-pricing .uds-pricing__eyebrow {
  margin: 0 0 12px;
  color: var(--uds-pricing-violet);
  font-family: inherit;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.uds-pricing .uds-pricing__title {
  margin: 0;
  color: var(--uds-pricing-ink);
  font-family: inherit;
  font-size: clamp(32px, 3.7vw, 48px);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-transform: none;
}

.uds-pricing .uds-pricing__title span {
  display: block;
  color: #5946e8;

  background: linear-gradient(
    100deg,
    #00afd8,
    #386dff 43%,
    #9131f3 90%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.uds-pricing .uds-pricing__intro {
  margin: 15px 0 0;
  color: var(--uds-pricing-muted);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
}

/* Selector mensual / anual */

.uds-pricing .uds-pricing__billing {
  flex-shrink: 0;
  max-width: 100%;
}

.uds-pricing .uds-pricing__switch {
  display: flex;
  align-items: center;
  gap: 4px;

  min-inline-size: 0;
  margin: 0;
  padding: 6px;

  border: 1px solid #e0e7f5;
  border-radius: 999px;

  background: rgba(246, 249, 255, .75);
  box-shadow:
    0 8px 22px rgba(50, 76, 125, .05),
    inset 0 1px 0 #fff;

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

.uds-pricing .uds-pricing__option {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.uds-pricing .uds-pricing__option > span {
  display: grid;
  place-items: center;

  min-height: 42px;
  padding: 9px 19px;
  border-radius: 999px;

  color: #62718f;
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;

  transition:
    color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.uds-pricing .uds-pricing__option input:checked + span {
  color: var(--uds-pricing-ink);
  background: #fff;

  box-shadow:
    0 3px 10px rgba(65, 102, 168, .12),
    inset 0 1px 0 #fff;
}

.uds-pricing .uds-pricing__option input:focus-visible + span {
  outline: 2px solid #2779e8;
  outline-offset: 2px;
}

.uds-pricing .uds-pricing__discount {
  display: grid;
  place-items: center;

  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;

  color: #7530dc;
  background: linear-gradient(120deg, #e4ecff, #eee1ff);

  font-size: 13px;
  font-weight: 750;
  line-height: 1.3;
  white-space: nowrap;
}

.uds-pricing .uds-pricing__billing-hint {
  margin: 9px 0 0;
  color: var(--uds-pricing-muted);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

/* Cuadrícula */

.uds-pricing .uds-pricing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;

  max-width: 440px;
  margin-inline: auto;
}

/* Tarjetas */

.uds-pricing .uds-plan {
  --uds-plan-text: #101735;
  --uds-plan-muted: #64738f;
  --uds-plan-rule: rgba(70, 106, 169, .17);

  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;

  padding: 48px clamp(22px, 2.2vw, 28px) 24px;
  border: 1px solid transparent;
  border-radius: 24px;

  background:
    linear-gradient(
      150deg,
      rgba(255, 255, 255, .98),
      rgba(248, 251, 255, .97)
    ) padding-box,

    linear-gradient(
      135deg,
      #b7eaff,
      #dedcff 58%,
      #c5e6ff
    ) border-box;

  box-shadow:
    0 14px 32px rgba(35, 66, 119, .045),
    inset 0 1px 0 #fff;

  color: var(--uds-plan-text);

  transition:
    transform .4s var(--uds-pricing-ease),
    box-shadow .4s ease;
}

/* Growth */

.uds-pricing .uds-plan--featured {
  --uds-plan-text: #f7f9ff;
  --uds-plan-muted: #b8c5df;
  --uds-plan-rule: rgba(199, 217, 255, .25);

  border-width: 1.5px;

  background:
    radial-gradient(
      ellipse at 100% 0%,
      rgba(143, 55, 242, .23),
      transparent 53%
    ) padding-box,

    radial-gradient(
      ellipse at 0% 100%,
      rgba(0, 212, 245, .14),
      transparent 60%
    ) padding-box,

    linear-gradient(
      145deg,
      #101831,
      #091323
    ) padding-box,

    linear-gradient(
      135deg,
      #00d4f5,
      #3c86ff 25%,
      #a13dff 55%,
      #773aff 78%,
      #00d4f5
    ) border-box;

  box-shadow:
    0 16px 32px rgba(28, 31, 89, .12),
    0 0 18px rgba(115, 74, 255, .07);
}

.uds-pricing .uds-plan__badge {
  position: absolute;
  top: 13px;
  right: 17px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 5px 10px;
  border: 1px solid rgba(202, 166, 255, .4);
  border-radius: 999px;

  background: linear-gradient(
    110deg,
    rgba(158, 63, 232, .75),
    rgba(83, 56, 215, .85)
  );

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

  color: #fff;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
}

/* Cabecera de cada plan */

.uds-pricing .uds-plan__header {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  min-height: 78px;
}

.uds-pricing .uds-plan__identity {
  min-width: 0;
}

.uds-pricing .uds-plan__stage {
  margin: 0 0 7px;
  color: var(--uds-plan-muted);
  font-family: inherit;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.uds-pricing .uds-plan__name {
  margin: 0;
  color: var(--uds-plan-text);
  font-family: inherit;
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -.035em;
  text-transform: none;
}

.uds-pricing .uds-plan__description {
  margin: 7px 0 0;
  color: var(--uds-plan-muted);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
}

/* Burbujas glass */

.uds-pricing .uds-plan__bubble {
  position: relative;
  display: grid;
  place-items: center;

  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 50%;

  background:
    radial-gradient(
      circle at 28% 20%,
      rgba(255, 255, 255, .98),
      transparent 50%
    ),
    linear-gradient(145deg, #f0faff, #f5f1ff);

  box-shadow:
    inset 3px 3px 8px rgba(255, 255, 255, .95),
    inset -3px -4px 8px rgba(110, 133, 210, .17),
    0 7px 16px rgba(84, 140, 207, .09);

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

  transition: transform .4s var(--uds-pricing-ease);
}

.uds-pricing .uds-plan__bubble::before {
  content: "";
  position: absolute;
  inset: 5px;

  border-top: 1px solid rgba(255, 255, 255, .9);
  border-left: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;

  transform: rotate(-25deg);
  pointer-events: none;
}

.uds-pricing .uds-plan--featured .uds-plan__bubble {
  border-color: rgba(172, 225, 255, .24);

  background:
    radial-gradient(
      circle at 25% 15%,
      rgba(170, 237, 255, .3),
      transparent 60%
    ),
    linear-gradient(
      145deg,
      rgba(0, 212, 245, .15),
      rgba(80, 58, 160, .12)
    );

  box-shadow:
    inset 2px 2px 8px rgba(201, 241, 255, .1),
    inset -3px -4px 8px rgba(0, 0, 0, .18),
    0 5px 20px rgba(0, 0, 0, .14);
}

.uds-pricing .uds-plan__icon {
  position: relative;
  width: 29px;
  height: 29px;
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Precios */

.uds-pricing .uds-plan__pricing {
  margin-top: 24px;
}

.uds-pricing .uds-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;

  margin: 0;
  color: var(--uds-plan-text);
  font-family: inherit;
  font-size: clamp(40px, 3.6vw, 48px);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -.055em;
  font-variant-numeric: lining-nums tabular-nums;
}

.uds-pricing .uds-plan__unit {
  color: var(--uds-plan-muted);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
}

.uds-pricing .uds-plan__billing-note {
  min-height: 3em;
  margin: 9px 0 0;
  color: var(--uds-plan-muted);
  font-family: inherit;
  font-size: 11px;
  line-height: 1.5;
}

/* Beneficios */

.uds-pricing .uds-plan__features {
  display: grid;
  align-content: start;
  gap: 14px;

  margin: 15px 0 26px;
  padding: 23px 0 0;
  border-top: 1px solid var(--uds-plan-rule);
  list-style: none;
}

.uds-pricing .uds-plan__features li {
  position: relative;
  margin: 0;
  padding: 0 0 0 25px;
  list-style: none;

  color: var(--uds-plan-text);
  font-size: 14px;
  line-height: 1.55;
}

/* Check dibujado con CSS */

.uds-pricing .uds-plan__features li::before {
  content: "";
  position: absolute;
  top: .28em;
  left: 4px;

  width: 7px;
  height: 12px;
  border: solid #00b9df;
  border-width: 0 2px 2px 0;

  transform: rotate(45deg);
}

/* Botones */

.uds-pricing .uds-plan__button {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-height: 48px;
  margin-top: auto;
  padding: 12px 14px;

  border: 1px solid transparent;
  border-radius: 13px;

  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(
      105deg,
      #00c9ed,
      #557aff 48%,
      #a037ff
    ) border-box;

  color: var(--uds-pricing-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;

  transition:
    color .35s ease,
    transform .35s var(--uds-pricing-ease),
    box-shadow .35s ease;
}

.uds-pricing .uds-plan__button > span,
.uds-pricing .uds-plan__button > svg {
  position: relative;
  z-index: 1;
}

.uds-pricing .uds-plan__button svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uds-pricing .uds-plan__button--primary {
  color: #fff;

  background:
    linear-gradient(
      105deg,
      #007f9c,
      #1558e7 48%,
      #8731e7
    ) padding-box,
    linear-gradient(
      105deg,
      #00d4f5,
      #597aff,
      #b148ff
    ) border-box;

  box-shadow: 0 7px 18px rgba(28, 64, 172, .18);
}

/* Interior blanco que se expande en hover */

.uds-pricing .uds-plan__button--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 11px;
  background: #fff;

  transform: scaleX(0);
  transform-origin: center;

  transition: transform .45s var(--uds-pricing-ease);
}

/* Franja inferior */

.uds-pricing .uds-pricing__support {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;

  max-width: 440px;
  margin: 20px auto 0;
  padding: 19px 22px;

  border: 1px solid #dce9fa;
  border-radius: 19px;
  background: rgba(255, 255, 255, .75);

  box-shadow: inset 0 1px 0 #fff;

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

.uds-pricing .uds-pricing__support-text {
  display: flex;
  align-items: center;
  gap: 13px;

  margin: 0;
  color: var(--uds-pricing-muted);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
}

.uds-pricing .uds-pricing__spark {
  flex-shrink: 0;
  color: #7c47ed;
  font-size: 27px;
  line-height: 1;

  background: linear-gradient(135deg, #00d4f5, #923cff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.uds-pricing .uds-pricing__contact {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;

  min-height: 44px;
  color: var(--uds-pricing-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;

  transition: color .25s ease;
}

.uds-pricing .uds-pricing__contact svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Accesibilidad */

.uds-pricing .uds-pricing__sr-only,
.uds-pricing .uds-pricing__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.uds-pricing .uds-plan__button:focus-visible,
.uds-pricing .uds-pricing__contact:focus-visible {
  outline: 2px solid #2589dd;
  outline-offset: 4px;
}

/* Hover */

@media (hover: hover) and (pointer: fine) {
  .uds-pricing .uds-plan:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(35, 66, 119, .09);
  }

  .uds-pricing .uds-plan--featured:hover {
    box-shadow:
      0 20px 38px rgba(28, 31, 89, .17),
      0 0 22px rgba(115, 74, 255, .1);
  }

  .uds-pricing .uds-plan:hover .uds-plan__bubble {
    transform: translateY(-3px);
  }

  .uds-pricing .uds-plan__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(65, 106, 196, .12);
  }

  .uds-pricing .uds-plan__button--primary:hover {
    color: var(--uds-pricing-ink);
  }

  .uds-pricing .uds-plan__button--primary:hover::before {
    transform: scaleX(1);
  }

  .uds-pricing .uds-pricing__contact:hover {
    color: #7531db;
  }
}

/* Tres columnas en pantallas amplias */

@media (min-width: 900px) {
  .uds-pricing .uds-pricing__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 38px;
  }

  .uds-pricing .uds-pricing__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }

  .uds-pricing .uds-pricing__support {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    max-width: none;
    gap: 24px;
    padding-block: 12px;
  }

  .uds-pricing .uds-pricing__contact {
    padding-left: 24px;
    border-left: 1px solid #dce5f4;
  }
}

/* Movimiento reducido */

@media (prefers-reduced-motion: reduce) {
  .uds-pricing *,
  .uds-pricing *::before,
  .uds-pricing *::after {
    animation: none !important;
    transition: none !important;
  }

  .uds-pricing .uds-plan,
  .uds-pricing .uds-plan__bubble,
  .uds-pricing .uds-plan__button {
    transform: none !important;
  }
}


/* =========================================
   UDS · ACOMPAÑAMIENTO INTERACTIVO
   Sustituye el CSS anterior de esta sección.
   ========================================= */

@property --uds-fu-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.uds-followup {
  --fu-cyan: #00d4f5;
  --fu-violet: #a14cff;
  --fu-muted: #b5c4db;
  --fu-border: linear-gradient(
    120deg,
    #00d4f5,
    #4277df 45%,
    #a14cff
  );
  --fu-progress: 1;

  position: relative;
  isolation: isolate;
  padding: clamp(48px, 5vw, 80px) 0;
  color: #f4f7ff;

  background:
    radial-gradient(
      ellipse at 0 100%,
      #00cfe51c,
      transparent 48%
    ),
    radial-gradient(
      ellipse at 100% 0,
      #8a35ed24,
      transparent 48%
    ),
    #050a13;

  font-family: var(
    --uds-font,
    "Segoe UI",
    system-ui,
    sans-serif
  );
  line-height: 1.5;

  scroll-margin-top:
    calc(var(--uds-header-height, 80px) + 20px);
}

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

.uds-followup :is(h2, h3, h4, p) {
  margin: 0;
  font-family: inherit;
}

.uds-followup :is(h2, h3, h4) {
  color: inherit;
  text-transform: none;
}

.uds-followup button {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}

.uds-followup :is(button, a, input):focus-visible {
  outline: 2px solid #67e9ff;
  outline-offset: 4px;
}

/* Distribución */

.uds-followup .uds-fu-layout {
  width: min(1480px, calc(100% - 48px));
  margin-inline: auto;
  display: grid;
  align-items: center;
  gap: 40px;
}

.uds-followup .uds-fu-copy {
  min-width: 0;
  max-width: 640px;
}

.uds-followup .uds-fu-eyebrow {
  margin-bottom: 18px;
  color: var(--fu-cyan);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.uds-followup .uds-fu-title {
  font-size: clamp(32px, 3.15vw, 49px);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -.045em;
}

.uds-followup .uds-fu-title > span {
  display: block;
  width: fit-content;
  color: #65dfff;
  background: linear-gradient(
    100deg,
    #00d4f5,
    #547dff,
    #ad42ff
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.uds-followup .uds-fu-intro {
  max-width: 44ch;
  margin-top: 22px;
  color: var(--fu-muted);
  font-size: 16px;
  line-height: 1.75;
}

/* Beneficios conectados */

.uds-followup .uds-fu-benefits {
  position: relative;
  display: grid;
  gap: 14px;
  margin: 30px 0;
}

.uds-followup .uds-fu-benefits::before {
  content: "";
  position: absolute;
  left: 39px;
  top: 32px;
  bottom: 32px;
  width: 1px;
  background: linear-gradient(#00d4f5, #a14cff);
}

.uds-followup .uds-fu-benefit {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 17px;
  width: 100%;
  padding: 14px 12px;
  border: 1px solid #6984b42b;
  border-radius: 16px;
  background: linear-gradient(
    115deg,
    #0d2030ed,
    #101124ed
  );
  text-align: left;
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.uds-followup .uds-fu-benefit[aria-pressed="true"] {
  border-color: transparent;
  background:
    linear-gradient(110deg, #0b2432, #19132e) padding-box,
    var(--fu-border) border-box;
  box-shadow:
    -5px 0 22px #00d4f516,
    5px 0 22px #a14cff18;
}

.uds-followup .uds-fu-benefit strong {
  display: block;
  font-size: 18px;
  line-height: 1.3;
}

.uds-followup .uds-fu-benefit small {
  display: block;
  margin-top: 4px;
  color: var(--fu-muted);
  font-size: 13px;
  line-height: 1.5;
}

.uds-followup .uds-fu-chevron {
  color: #79e5ff;
  transition: transform .25s;
}

.uds-followup .uds-fu-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid transparent;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 25% 15%,
      #203e56,
      #081322 75%
    ) padding-box,
    var(--fu-border) border-box;
  box-shadow:
    inset 0 2px 5px #d9f9ff1c,
    0 5px 14px #0003;
}

.uds-followup .uds-fu-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #62e2ff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* CTA con borde oscilatorio */

.uds-followup .uds-fu-cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  max-width: 100%;
  min-height: 52px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 999px;

  background:
    linear-gradient(#081321, #081321) padding-box,
    conic-gradient(
      from var(--uds-fu-angle),
      #00d4f5,
      #7851ff,
      #bd42ff,
      #00d4f5
    ) border-box;

  color: #f4f7ff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;

  animation: uds-fu-ring 3.4s ease-in-out infinite paused;

  transition:
    transform .25s,
    box-shadow .25s;
}

.uds-followup .uds-fu-cta span {
  font-size: 23px;
  line-height: 1;
}

/* Panel */

.uds-followup .uds-fu-lab {
  --fu-x: 50%;
  --fu-y: 20%;

  position: relative;
  isolation: isolate;
  min-width: 0;
  width: 100%;
  padding: clamp(16px, 1.7vw, 26px);
  border: 1px solid transparent;
  border-radius: 25px;

  background:
    linear-gradient(
      135deg,
      #071725,
      #14132a 60%,
      #07121d
    ) padding-box,
    var(--fu-border) border-box;

  box-shadow: 0 24px 55px #0003;
}

.uds-followup .uds-fu-lab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    360px circle at var(--fu-x) var(--fu-y),
    #00d4f516,
    transparent 65%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}

.uds-followup .uds-fu-lab > * {
  position: relative;
}

.uds-followup .uds-fu-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.uds-followup .uds-fu-heading h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 23px;
  line-height: 1.25;
  font-weight: 700;
}

.uds-followup .uds-fu-heading p {
  margin-top: 6px;
  color: var(--fu-muted);
  font-size: 13px;
}

.uds-followup .uds-fu-dot {
  flex: 0 0 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--fu-cyan);
  box-shadow: 0 0 17px #00d4f599;
}

.uds-followup .uds-fu-badge {
  padding: 5px 10px;
  border: 1px solid #ac7cfa66;
  border-radius: 99px;
  color: #ded7ff;
  font-size: 10px;
  white-space: nowrap;
}

/* Etapas */

.uds-followup .uds-fu-stages {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 22px 0 18px;
}

.uds-followup .uds-fu-stages::before,
.uds-followup .uds-fu-stages::after {
  content: "";
  position: absolute;
  left: 16.666%;
  width: 66.666%;
  top: 19px;
  height: 2px;
  background: #293650;
  pointer-events: none;
}

.uds-followup .uds-fu-stages::after {
  background: var(--fu-border);
  transform: scaleX(var(--fu-progress));
  transform-origin: left;
  transition: transform .45s ease;
}

.uds-followup .uds-fu-stages button {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 63px;
  color: var(--fu-muted);
  font-size: 12px;
  border-radius: 10px;
}

.uds-followup .uds-fu-stages button > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #344664;
  border-radius: 50%;
  background: #0b1626;
  font-size: 12px;
  font-weight: 700;
  transition:
    border-color .3s,
    box-shadow .3s;
}

.uds-followup .uds-fu-stages button[aria-pressed="true"] {
  color: #fff;
}

.uds-followup .uds-fu-stages button[aria-pressed="true"] > span {
  border-color: var(--fu-cyan);
  color: #74eaff;
  box-shadow: 0 0 20px #00d4f535;
}

/* Miniweb */

.uds-followup .uds-fu-browser {
  border: 1px solid #708ba877;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 25px #0003;
}

.uds-followup .uds-fu-browserbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: #d5deeb;
  background: #121e31;
  font-size: 10px;
}

.uds-followup .uds-fu-dots {
  display: flex;
  gap: 5px;
}

.uds-followup .uds-fu-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff677e;
}

.uds-followup .uds-fu-dots i:nth-child(2) {
  background: #ffc55d;
}

.uds-followup .uds-fu-dots i:nth-child(3) {
  background: #44d6bb;
}

.uds-followup .uds-fu-canvas {
  --fu-split: 38%;

  position: relative;
  container-type: inline-size;
  height: 320px;
  overflow: hidden;
  background: #f8faff;
  color: #111a36;
}

.uds-followup .uds-fu-site {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #f9fbff;
}

.uds-followup .uds-fu-site--after {
  background:
    radial-gradient(
      ellipse at 0 90%,
      #d9dcff,
      transparent 65%
    ),
    #fcfdff;
}

.uds-followup .uds-fu-site--after::before {
  content: "";
  position: absolute;
  right: 2%;
  top: 27%;
  width: 28%;
  height: 61%;
  background: repeating-linear-gradient(
    100deg,
    #12c8ea33 0 16%,
    #7760ea2b 16% 32%,
    #b670e51a 32% 48%
  );
  clip-path: polygon(
    0 30%,
    40% 15%,
    40% 0,
    74% 0,
    74% 27%,
    100% 10%,
    100% 100%,
    0 100%
  );
  pointer-events: none;
}

.uds-followup .uds-fu-site--before {
  z-index: 1;
  background: #e9ecf1;
  color: #626c7e;
  clip-path: inset(
    0 calc(100% - var(--fu-split)) 0 0
  );
}

.uds-followup .uds-fu-site-nav {
  position: absolute;
  top: 44px;
  left: 5%;
  right: 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
  padding: 4px;
  border-radius: 5px;
}

.uds-followup .uds-fu-site-nav strong {
  font-size: 13px;
}

.uds-followup .uds-fu-site-nav > span {
  font-size: 9px;
}

.uds-followup .uds-fu-site-copy {
  position: absolute;
  top: 89px;
  left: 44%;
  width: 51%;
  padding: 5px;
  border-radius: 8px;
}

.uds-followup .uds-fu-site-copy > small {
  display: block;
  margin-bottom: 8px;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.uds-followup .uds-fu-site-title {
  display: block;
  font-size: clamp(19px, 3.6cqw, 29px);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 800;
}

.uds-followup .uds-fu-site-title em {
  color: #7336de;
  font-style: normal;
}

.uds-followup .uds-fu-site-copy > p {
  margin: 10px 0;
  font-size: 10px;
  line-height: 1.55;
}

.uds-followup .uds-fu-fakebutton {
  display: inline-block;
  padding: 10px 12px;
  border-radius: 99px;
  color: #fff;
  background: linear-gradient(100deg, #087b9d, #743bea);
  font-size: 9px;
  font-weight: 650;
}

/* Ilustración construida con CSS */

.uds-followup .uds-fu-art {
  position: absolute;
  left: 5%;
  top: 100px;
  width: 31%;
  height: 160px;
  filter: drop-shadow(0 14px 14px #4455a63b);
}

.uds-followup .uds-fu-art i {
  position: absolute;
  bottom: 0;
  width: 38%;
  height: 65%;
  border: 1px solid #b2f8ff99;
  border-radius: 7px;
  background: linear-gradient(
    135deg,
    #b4fdffbb,
    #0fbcf0c9 45%,
    #574cf5e6
  );
  transform: skewY(-14deg);
  box-shadow: inset -12px 0 15px #5137bf33;
}

.uds-followup .uds-fu-art i:nth-child(2) {
  left: 32%;
  height: 100%;
}

.uds-followup .uds-fu-art i:nth-child(3) {
  left: 64%;
  height: 79%;
  background: linear-gradient(
    130deg,
    #a3c4ff,
    #af60f2bb,
    #5926d1
  );
}

.uds-followup .uds-fu-site--before .uds-fu-site-copy {
  left: 5%;
  width: 52%;
}

.uds-followup .uds-fu-site--before .uds-fu-art {
  left: 65%;
  width: 26%;
  opacity: .3;
  filter: grayscale(1);
}

.uds-followup .uds-fu-site--before .uds-fu-fakebutton {
  background: #bbc2ce;
  color: #39445a;
}

.uds-followup .uds-fu-site-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  gap: 6px;
  padding: 13px 9px;
  border-top: 1px solid #879fce24;
  background: #fff8;
  font-size: 9px;
}

/* Etiquetas y divisor */

.uds-followup .uds-fu-version-labels {
  position: absolute;
  z-index: 2;
  inset: 9px 12px auto;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.uds-followup .uds-fu-version-labels span {
  padding: 4px 10px;
  border-radius: 99px;
  color: #fff;
  background: #4e586d;
  font-size: 9px;
}

.uds-followup .uds-fu-version-labels span + span {
  background: linear-gradient(100deg, #007ba5, #7634df);
}

.uds-followup .uds-fu-divider {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: var(--fu-split);
  width: 2px;
  background: #00c8ed;
  pointer-events: none;
  box-shadow: 0 0 14px #00d4f566;
}

.uds-followup .uds-fu-handle {
  position: absolute;
  top: 45%;
  left: 0;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #70dfff;
  border-radius: 50%;
  background: #fff;
  color: #203562;
  box-shadow: 0 4px 18px #009fc344;
  font-size: 22px;
  font-weight: 700;
  pointer-events: auto;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
}

/* Puntos interactivos */

.uds-followup .uds-fu-hotspot {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.uds-followup .uds-fu-hotspot > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid #008cb8;
  border-radius: 50%;
  color: #075475;
  background: #effdff;
  font-size: 10px;
  font-weight: 750;
  box-shadow: 0 3px 10px #095b7522;
}

.uds-followup .uds-fu-hotspot[aria-pressed="true"] > span {
  color: #fff;
  background: #007eaa;
  box-shadow: 0 0 0 5px #00c6eb24;
}

.uds-followup .uds-fu-hotspot--nav {
  top: 36px;
  right: 2%;
}

.uds-followup .uds-fu-hotspot--message {
  top: 82px;
  left: 39%;
}

.uds-followup .uds-fu-hotspot--contact {
  bottom: 34px;
  right: 3%;
}

.uds-followup .uds-fu-tooltip {
  position: absolute;
  z-index: 3;
  bottom: 46px;
  left: 8%;
  max-width: 34%;
  padding: 7px 10px;
  border: 1px solid #3fbde76b;
  border-radius: 9px;
  background: #071c30ed;
  color: #fff;
  font-size: 10px;
  pointer-events: none;
}

.uds-followup [data-fu-zone="navigation"] .uds-fu-site-nav,
.uds-followup [data-fu-zone="message"] .uds-fu-site-copy,
.uds-followup [data-fu-zone="contact"] .uds-fu-fakebutton {
  outline: 1px solid #00aacf;
  outline-offset: 3px;
}

/* Barrido al entrar en Medir */

.uds-followup .uds-fu-scan {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    #00d4f526,
    #00d4f594
  );
  opacity: 0;
  transform: translateX(-100%);
}

.uds-followup[data-fu-stage="measure"] .uds-fu-scan {
  animation: uds-fu-scan 1.5s ease-out;
}

/* Control inferior del comparador */

.uds-followup .uds-fu-compare {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 14px 0;
}

.uds-followup .uds-fu-slider-label {
  display: grid;
  gap: 0;
  flex: 1 1 180px;
  color: #9defff;
  font-size: 11px;
}

.uds-followup .uds-fu-range {
  appearance: none;
  display: block;
  width: 100%;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: ew-resize;
}

.uds-followup .uds-fu-range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 8px;
  background: var(--fu-border);
}

.uds-followup .uds-fu-range::-moz-range-track {
  height: 3px;
  border-radius: 8px;
  background: var(--fu-border);
}

.uds-followup .uds-fu-range::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7.5px;
  border: 3px solid #7cecff;
  border-radius: 50%;
  background: #0b1930;
}

.uds-followup .uds-fu-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 3px solid #7cecff;
  border-radius: 50%;
  background: #0b1930;
}

.uds-followup .uds-fu-presets {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid #50628766;
  border-radius: 99px;
}

.uds-followup .uds-fu-presets button {
  min-height: 38px;
  padding: 7px 12px;
  border-radius: 99px;
  color: #c0cde1;
  font-size: 11px;
}

.uds-followup .uds-fu-presets button[aria-pressed="true"] {
  background: linear-gradient(
    100deg,
    #08798e66,
    #8448d66b
  );
  color: #fff;
}

/* Explicación contextual */

.uds-followup .uds-fu-insight {
  padding: 14px 16px;
  border: 1px solid #689bcf38;
  border-radius: 14px;
  background: #06162688;
}

.uds-followup .uds-fu-kicker {
  color: #74e6f7;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.uds-followup .uds-fu-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 7px 0 9px;
}

.uds-followup .uds-fu-chips button {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid #6b84b345;
  border-radius: 99px;
  font-size: 11px;
  color: #bfd0e5;
}

.uds-followup .uds-fu-chips button[aria-pressed="true"] {
  border-color: #32bbd3;
  background: #06c9e416;
  color: #9ff3ff;
}

.uds-followup .uds-fu-explanation {
  min-height: 66px;
}

.uds-followup .uds-fu-explanation h4 {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.uds-followup .uds-fu-explanation p {
  margin-top: 4px;
  color: var(--fu-muted);
  font-size: 12px;
  line-height: 1.65;
}

.uds-followup .uds-fu-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.uds-followup .uds-fu-footer > span {
  color: #98aecb;
  font-size: 10px;
}

.uds-followup .uds-fu-footer button {
  min-height: 44px;
  color: #82eaff;
  font-size: 12px;
  font-weight: 650;
}

/* Estados completos de la comparación */

.uds-followup
.uds-fu-canvas[data-fu-view="after"]
.uds-fu-version-labels > span:first-child,

.uds-followup
.uds-fu-canvas[data-fu-view="before"]
.uds-fu-version-labels > span:last-child {
  visibility: hidden;
}

.uds-followup
.uds-fu-canvas:is(
  [data-fu-view="before"],
  [data-fu-view="after"]
)
.uds-fu-divider {
  display: none;
}

/* Animaciones */

@keyframes uds-fu-ring {
  0%, 100% {
    --uds-fu-angle: 0deg;
  }
  50% {
    --uds-fu-angle: 240deg;
  }
}

@keyframes uds-fu-scan {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

.uds-followup .uds-fu-cta:focus-visible {
  animation-play-state: running;
}

@media (hover: hover) and (pointer: fine) {
  .uds-followup .uds-fu-lab:hover::before {
    opacity: 1;
  }

  .uds-followup .uds-fu-benefit:hover {
    transform: translateX(3px);
    box-shadow: 0 6px 22px #00d4f512;
  }

  .uds-followup .uds-fu-benefit:hover .uds-fu-chevron {
    transform: translate(2px, -2px);
  }

  .uds-followup .uds-fu-cta:hover {
    animation-play-state: running;
    transform: translateY(-2px);
    box-shadow: 0 0 24px #00d4f51f;
  }

  .uds-followup .uds-fu-hotspot:hover > span {
    background: #c6f6ff;
    color: #07374d;
  }
}

/* Escritorio */

@media (min-width: 1100px) {
  .uds-followup .uds-fu-layout {
    grid-template-columns:
      minmax(0, .78fr)
      minmax(0, 1.22fr);

    gap: clamp(30px, 4vw, 62px);
  }
}

/* Móvil */

@media (max-width: 599px) {
  .uds-followup .uds-fu-layout {
    width: calc(100% - 28px);
    gap: 32px;
  }

  .uds-followup .uds-fu-lab {
    padding: 14px;
    border-radius: 20px;
  }

  .uds-followup .uds-fu-heading h3 {
    font-size: 20px;
  }

  .uds-followup .uds-fu-title {
    font-size: 34px;
  }

  .uds-followup .uds-fu-benefit {
    gap: 10px;
  }

  .uds-followup .uds-fu-benefit strong {
    font-size: 16px;
  }

  .uds-followup .uds-fu-canvas {
    height: 350px;
  }

  .uds-followup .uds-fu-site-nav > span {
    display: none;
  }

  .uds-followup .uds-fu-site-copy {
    left: 44%;
    width: 53%;
    top: 91px;
  }

  .uds-followup .uds-fu-site--before .uds-fu-site-copy {
    width: 67%;
  }

  .uds-followup .uds-fu-site-title {
    font-size: 19px;
  }

  .uds-followup .uds-fu-art {
    width: 22%;
    left: 4%;
    top: 120px;
    height: 135px;
    opacity: .7;
  }

  .uds-followup .uds-fu-site-copy > small {
    font-size: 7px;
  }

  .uds-followup .uds-fu-site-bottom {
    font-size: 8px;
  }

  .uds-followup .uds-fu-tooltip {
    display: none;
  }

  .uds-followup .uds-fu-compare {
    justify-content: center;
  }

  .uds-followup .uds-fu-slider-label {
    flex-basis: 100%;
  }

  .uds-followup .uds-fu-insight {
    padding: 13px 11px;
  }

  .uds-followup .uds-fu-footer {
    flex-wrap: wrap;
  }
}

/* Movimiento reducido */

@media (prefers-reduced-motion: reduce) {
  .uds-followup *,
  .uds-followup *::before,
  .uds-followup *::after {
    animation: none !important;
    transition: none !important;
  }

  .uds-followup .uds-fu-benefit:hover,
  .uds-followup .uds-fu-cta:hover {
    transform: none;
  }
}

/* ==================================================
   UDS · ACOMPAÑAMIENTO · ANIMACIONES DE ENTRADA
   ================================================== */

/* Permite animar el divisor del comparador (barrido Antes → Con UDS) */
@property --fu-split {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 38%;
}

@media (prefers-reduced-motion: no-preference) {

  .uds-followup { --fu-e: cubic-bezier(.22, 1, .36, 1); }

  /* ---------- ESTADO INICIAL (lo pone el JS) ---------- */
  .uds-followup .uds-fu-copy.uds-fu-pre > * { opacity: 0; }
  .uds-followup .uds-fu-copy.uds-fu-pre > .uds-fu-cta { translate: 0 16px; }
  .uds-followup .uds-fu-lab.uds-fu-pre { opacity: 0; }

  /* ==================================================
     COLUMNA IZQUIERDA
     ================================================== */
  .uds-followup .uds-fu-copy.uds-fu-go .uds-fu-eyebrow {
    animation: uds-fu-in-eyebrow 1s var(--fu-e) var(--fu-b, 0s) backwards;
  }
  .uds-followup .uds-fu-copy.uds-fu-go .uds-fu-title {
    animation: uds-fu-in-blur 1s var(--fu-e) calc(var(--fu-b, 0s) + .12s) backwards;
  }
  /* "continúa." se revela con un barrido */
  .uds-followup .uds-fu-copy.uds-fu-go .uds-fu-title > span {
    animation: uds-fu-in-wipe 1s var(--fu-e) calc(var(--fu-b, 0s) + .65s) backwards;
  }
  .uds-followup .uds-fu-copy.uds-fu-go .uds-fu-intro {
    animation: uds-fu-in-up .9s var(--fu-e) calc(var(--fu-b, 0s) + .35s) backwards;
  }

  /* Tarjetas de beneficios en cascada */
  .uds-followup .uds-fu-copy.uds-fu-go .uds-fu-benefit {
    animation: uds-fu-in-left .8s var(--fu-e)
      calc(var(--fu-b, 0s) + .5s + var(--k, 0) * .12s) backwards;
  }
  .uds-followup .uds-fu-copy.uds-fu-go .uds-fu-benefit:nth-child(1) { --k: 0; }
  .uds-followup .uds-fu-copy.uds-fu-go .uds-fu-benefit:nth-child(2) { --k: 1; }
  .uds-followup .uds-fu-copy.uds-fu-go .uds-fu-benefit:nth-child(3) { --k: 2; }

  .uds-followup .uds-fu-copy.uds-fu-go .uds-fu-benefit .uds-fu-icon {
    animation: uds-fu-in-pop .7s var(--fu-e)
      calc(var(--fu-b, 0s) + .75s + var(--k, 0) * .12s) backwards;
  }

  /* Línea que conecta las tarjetas: se dibuja de arriba hacia abajo */
  .uds-followup .uds-fu-copy.uds-fu-go .uds-fu-benefits::before {
    transform-origin: top;
    animation: uds-fu-in-line-y .9s var(--fu-e) calc(var(--fu-b, 0s) + .9s) backwards;
  }

  /* El botón ya tiene su animación de contorno: entra con transition */
  .uds-followup .uds-fu-copy.uds-fu-pre > .uds-fu-cta,
  .uds-followup .uds-fu-copy.uds-fu-go  > .uds-fu-cta {
    transition:
      transform .25s,
      box-shadow .25s,
      opacity .8s var(--fu-e) calc(var(--fu-b, 0s) + 1s),
      translate .8s var(--fu-e) calc(var(--fu-b, 0s) + 1s);
  }

  /* ==================================================
     PANEL DERECHO
     ================================================== */
  .uds-followup .uds-fu-lab.uds-fu-go {
    animation: uds-fu-in-panel .9s var(--fu-e) var(--fu-b, 0s) backwards;
  }

  /* Encabezado */
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-heading h3 {
    animation: uds-fu-in-blur .8s var(--fu-e) calc(var(--fu-b, 0s) + .3s) backwards;
  }
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-dot {
    animation: uds-fu-in-pop .6s var(--fu-e) calc(var(--fu-b, 0s) + .5s) backwards;
  }
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-heading p {
    animation: uds-fu-in-up .8s var(--fu-e) calc(var(--fu-b, 0s) + .42s) backwards;
  }
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-badge {
    animation: uds-fu-in-pop .7s var(--fu-e) calc(var(--fu-b, 0s) + .52s) backwards;
  }

  /* Línea de etapas: se dibuja y luego se llena de color.
     Se usa "scale" para no pisar el "transform" del progreso. */
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-stages::before {
    transform-origin: left;
    animation: uds-fu-in-line-x .8s var(--fu-e) calc(var(--fu-b, 0s) + .5s) backwards;
  }
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-stages::after {
    animation: uds-fu-in-line-x .9s var(--fu-e) calc(var(--fu-b, 0s) + .8s) backwards;
  }
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-stages button {
    animation: uds-fu-in-pop .6s var(--fu-e)
      calc(var(--fu-b, 0s) + .55s + var(--k, 0) * .12s) backwards;
  }
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-stages button:nth-child(1) { --k: 0; }
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-stages button:nth-child(2) { --k: 1; }
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-stages button:nth-child(3) { --k: 2; }

  /* Miniweb */
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-browser {
    animation: uds-fu-in-panel .9s var(--fu-e) calc(var(--fu-b, 0s) + .6s) backwards;
  }
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-browserbar {
    animation: uds-fu-in-down .7s var(--fu-e) calc(var(--fu-b, 0s) + .85s) backwards;
  }
  /* El lienzo aparece y el divisor barre desde "Antes" hasta su posición */
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-canvas {
    animation:
      uds-fu-in-fade .8s ease calc(var(--fu-b, 0s) + .85s) backwards,
      uds-fu-in-split 1.5s var(--fu-e) calc(var(--fu-b, 0s) + 1.05s) backwards;
  }
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-version-labels span {
    animation: uds-fu-in-pop .6s var(--fu-e)
      calc(var(--fu-b, 0s) + 1.9s + var(--k, 0) * .1s) backwards;
  }
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-version-labels span:nth-child(2) { --k: 1; }

  /* Puntos numerados, con un pulso de invitación */
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-hotspot {
    animation: uds-fu-in-pop .6s var(--fu-e)
      calc(var(--fu-b, 0s) + 2.1s + var(--k, 0) * .12s) backwards;
  }
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-hotspot--message { --k: 1; }
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-hotspot--contact { --k: 2; }

  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-hotspot::after {
    content: "";
    position: absolute;
    inset: 9px;
    border: 2px solid #00b4dc;
    border-radius: 50%;
    pointer-events: none;
    animation: uds-fu-in-ping 1.4s ease-out
      calc(var(--fu-b, 0s) + 2.5s + var(--k, 0) * .12s) 2 backwards;
  }

  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-tooltip {
    animation: uds-fu-in-fade .7s ease calc(var(--fu-b, 0s) + 2.6s) backwards;
  }

  /* Control del comparador */
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-slider-label {
    animation: uds-fu-in-up .8s var(--fu-e) calc(var(--fu-b, 0s) + 1.4s) backwards;
  }
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-presets {
    animation: uds-fu-in-up .8s var(--fu-e) calc(var(--fu-b, 0s) + 1.5s) backwards;
  }

  /* Explicación contextual.
     No se anima ".uds-fu-explanation": el JS ya lo hace al cambiar de etapa. */
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-insight {
    animation: uds-fu-in-up .8s var(--fu-e) calc(var(--fu-b, 0s) + 1.7s) backwards;
  }
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-kicker {
    animation: uds-fu-in-fade .7s ease calc(var(--fu-b, 0s) + 1.85s) backwards;
  }
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-chips button {
    animation: uds-fu-in-pop .6s var(--fu-e)
      calc(var(--fu-b, 0s) + 1.95s + var(--k, 0) * .07s) backwards;
  }
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-chips button:nth-child(2) { --k: 1; }
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-chips button:nth-child(3) { --k: 2; }

  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-explanation h4 {
    animation: uds-fu-in-blur .7s var(--fu-e) calc(var(--fu-b, 0s) + 2.15s) backwards;
  }
  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-explanation p {
    animation: uds-fu-in-up .7s var(--fu-e) calc(var(--fu-b, 0s) + 2.25s) backwards;
  }

  .uds-followup .uds-fu-lab.uds-fu-go .uds-fu-footer {
    animation: uds-fu-in-fade .8s ease calc(var(--fu-b, 0s) + 2.45s) backwards;
  }

  /* ---------- KEYFRAMES ---------- */
  @keyframes uds-fu-in-eyebrow {
    from { opacity: 0; letter-spacing: .5em; }
  }
  @keyframes uds-fu-in-blur {
    from { opacity: 0; translate: 0 .5em; filter: blur(8px); }
  }
  @keyframes uds-fu-in-up {
    from { opacity: 0; translate: 0 18px; }
  }
  @keyframes uds-fu-in-down {
    from { opacity: 0; translate: 0 -12px; }
  }
  @keyframes uds-fu-in-left {
    from { opacity: 0; translate: -26px 0; }
  }
  @keyframes uds-fu-in-fade {
    from { opacity: 0; }
  }
  @keyframes uds-fu-in-pop {
    from { opacity: 0; scale: .5; }
  }
  @keyframes uds-fu-in-panel {
    from { opacity: 0; translate: 0 36px; scale: .97; }
  }
  @keyframes uds-fu-in-wipe {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }
  @keyframes uds-fu-in-line-x {
    from { scale: 0 1; }
  }
  @keyframes uds-fu-in-line-y {
    from { scale: 1 0; }
  }
  @keyframes uds-fu-in-split {
    from { --fu-split: 100%; }
  }
  @keyframes uds-fu-in-ping {
    from { opacity: .8; scale: 1; }
    to   { opacity: 0; scale: 2.1; }
  }
}


/* =========================================
   UDS · FOOTER GLASS ANIMADO
   Sustituye el CSS anterior y sus ajustes.
   ========================================= */

@property --uds-footer-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.uds-footer {
  --uds-footer-ink: #101735;
  --uds-footer-muted: #52617d;
  --uds-footer-line: #819dd633;
  --uds-footer-border:
    linear-gradient(110deg, #00cfee, #7183ff, #b04bfa);

  position: relative;
  padding: 22px 0 20px;
  color: var(--uds-footer-ink);
  background: #fff;
  font-family: var(--uds-font, "Segoe UI", system-ui, sans-serif);
  line-height: 1.5;
}

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

.uds-footer [hidden] {
  display: none !important;
}

.uds-footer :is(h2, h3, p, ul) {
  margin: 0;
  font-family: inherit;
}

.uds-footer :is(h2, h3) {
  color: inherit;
  text-transform: none;
}

.uds-footer ul,
.uds-footer li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.uds-footer a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.uds-footer a:focus-visible {
  outline: 2px solid #385be0;
  outline-offset: 4px;
}

.uds-footer svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uds-footer .uds-footer__icon-fill {
  fill: currentColor;
  stroke: none;
}

.uds-footer .uds-footer__container {
  width: calc(100% - 32px);
  margin-inline: auto;
}

.uds-footer .uds-footer__shell {
  padding: clamp(22px, 3vw, 48px);
  border: 1px solid transparent;
  border-radius: 30px;

  background:
    radial-gradient(
      ellipse at 0 0,
      #00d4f50c,
      transparent 50%
    ) padding-box,
    radial-gradient(
      ellipse at 100% 100%,
      #a13cff10,
      transparent 50%
    ) padding-box,
    linear-gradient(125deg, #fff, #fdfcff) padding-box,
    var(--uds-footer-border) border-box;

  box-shadow:
    -8px 14px 30px #00b5dd0a,
    8px 14px 30px #8c42d80d;
}

/* MARCA Y MENSAJE */

.uds-footer .uds-footer__top {
  display: grid;
  align-items: center;
  gap: 24px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--uds-footer-line);
}

.uds-footer .uds-footer__brand {
  display: flex;
  align-items: center;
  justify-self: start;
  min-width: 0;
  max-width: 230px;
  border-radius: 4px;
}

.uds-footer .uds-footer__logo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 230px;
  max-height: 100px;
  object-fit: contain;
  object-position: left center;
  border: 0;
}

.uds-footer .uds-footer__logo-fallback {
  display: grid;
  gap: 7px;
}

.uds-footer .uds-footer__logo-fallback strong {
  font-size: clamp(46px, 3.5vw, 64px);
  line-height: 1;
  letter-spacing: -.065em;
  font-weight: 850;
}

.uds-footer .uds-footer__logo-fallback small {
  color: var(--uds-footer-muted);
  font-size: 12px;
}

.uds-footer .uds-footer__message {
  min-width: 0;
}

.uds-footer .uds-footer__eyebrow {
  margin-bottom: 10px;
  color: #8038d2;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 750;
}

.uds-footer .uds-footer__title {
  font-size: clamp(27px, 2.5vw, 42px);
  line-height: 1.12;
  letter-spacing: -.04em;
  font-weight: 750;
}

.uds-footer .uds-footer__title > span {
  display: block;
  width: fit-content;
  color: #3960d6;
  background: linear-gradient(100deg, #008cae, #405ee0, #932edf);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.uds-footer .uds-footer__description {
  margin-top: 12px;
  color: var(--uds-footer-muted);
  font-size: 15px;
  line-height: 1.65;
}

/* CTA CON DEGRADADO MÓVIL */

.uds-footer .uds-footer__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  justify-self: start;
  gap: 16px;

  max-width: 100%;
  min-height: 60px;
  padding: 7px 7px 7px 22px;
  border: 1px solid #ffffffb3;
  border-radius: 999px;

  background: linear-gradient(
    110deg,
    #007f9e,
    #414bd9 28%,
    #812ccd 52%,
    #414bd9 76%,
    #007f9e
  );
  background-size: 240% 100%;
  background-position: 0% 50%;

  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;

  box-shadow:
    -6px 10px 25px #00a9ce24,
    6px 10px 25px #8b3fe826,
    inset 0 1px 0 #fff5;

  animation: uds-footer-fill 3s ease-in-out infinite paused;

  transition:
    transform .3s,
    box-shadow .3s;
}

.uds-footer .uds-footer__cta-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid #ffffff4d;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff40, #ffffff14);
  box-shadow: inset 0 1px 3px #ffffff40;
}

.uds-footer .uds-footer__cta-icon svg {
  transition: transform .3s;
}

/* COLUMNAS */

.uds-footer .uds-footer__middle {
  display: grid;
  gap: 26px;
  padding: 30px 0;
}

.uds-footer .uds-footer__middle > * {
  min-width: 0;
}

.uds-footer .uds-footer__middle > * + * {
  padding-top: 24px;
  border-top: 1px solid var(--uds-footer-line);
}

.uds-footer .uds-footer__heading {
  margin-bottom: 18px;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -.025em;
  font-weight: 700;
}

/* BORDES ANIMADOS COMPARTIDOS */

.uds-footer .uds-footer__links a,
.uds-footer .uds-footer__social-bubble,
.uds-footer .uds-footer__back-top {
  --uds-footer-edge-cyan: #65d3ec;
  --uds-footer-edge-violet: #b59aee;

  border: 1px solid transparent;

  background:
    linear-gradient(135deg, #fff, #f7f5ff) padding-box,
    conic-gradient(
      from var(--uds-footer-angle),
      var(--uds-footer-edge-cyan),
      var(--uds-footer-edge-violet),
      var(--uds-footer-edge-cyan)
    ) border-box;

  animation: uds-footer-ring 4s ease-in-out infinite paused;
}

/* NAVEGACIÓN */

.uds-footer .uds-footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.uds-footer .uds-footer__links a {
  --uds-footer-edge-cyan: #cee6f9;
  --uds-footer-edge-violet: #dfd5f7;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  min-height: 52px;
  padding: 12px 15px;
  border-radius: 13px;

  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 10px #607fbd0a;

  transition:
    transform .25s,
    box-shadow .25s;
}

.uds-footer .uds-footer__links a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background: linear-gradient(
    110deg,
    transparent 25%,
    #00d4f51c 44%,
    #a13cff17 56%,
    transparent 75%
  );
  background-size: 240% 100%;
  background-position: 100% 50%;
  opacity: 0;
}

.uds-footer .uds-footer__links a > span {
  position: relative;
  z-index: 1;
}

.uds-footer .uds-footer__links a > span:last-child {
  font-size: 21px;
  transition:
    transform .25s,
    color .25s;
}

/* NUEVOS ICONOS DE SERVICIOS */

.uds-footer .uds-footer__value-list {
  display: grid;
  gap: 6px;
}

.uds-footer .uds-footer__value {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 52px;
  padding: 3px 6px 3px 0;
  border-radius: 14px;

  color: #3f506d;
  font-size: 15px;
  line-height: 1.45;

  transition:
    background .25s,
    color .25s;
}

.uds-footer .uds-footer__value-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 50%;

  background:
    radial-gradient(
      circle at 25% 15%,
      #fff,
      transparent 70%
    ) padding-box,
    linear-gradient(135deg, #eefcff, #f0eaff) padding-box,
    var(--uds-footer-border) border-box;

  box-shadow:
    inset 1px 2px 4px #fff,
    0 5px 12px #677fc313;

  color: #0085aa;
}

.uds-footer .uds-footer__value-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.65;
}

.uds-footer .uds-footer__accent {
  stroke: #8343d8;
}

.uds-footer .uds-footer__cursor {
  fill: #f2ebff;
}

.uds-footer .uds-footer__ripple {
  opacity: 0;
  stroke: #00a4cb;
  transform-box: fill-box;
  transform-origin: center;
}

.uds-footer [data-uds-footer-draw] {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* REDES SOCIALES */

.uds-footer .uds-footer__socials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 300px;
}

.uds-footer .uds-footer__social {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 9px;
  border-radius: 12px;
  min-width: 0;
  padding: 4px 0;
}

.uds-footer .uds-footer__social-bubble {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;

  box-shadow:
    inset 0 2px 3px #fff,
    0 6px 15px #757fd514;

  transition:
    transform .25s,
    box-shadow .25s,
    color .25s;
}

.uds-footer .uds-footer__social-bubble svg {
  width: 23px;
  height: 23px;
  transition: transform .25s;
}

.uds-footer .uds-footer__social-label {
  color: #455673;
  font-size: 12px;
}

/* INFORMACIÓN LEGAL */

.uds-footer .uds-footer__bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: 22px;
  border-top: 1px solid var(--uds-footer-line);
}

.uds-footer .uds-footer__copyright {
  width: 100%;
  color: var(--uds-footer-muted);
  font-size: 12px;
  line-height: 1.7;
}

.uds-footer .uds-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.uds-footer .uds-footer__legal a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--uds-footer-muted);
  font-size: 12px;
}

.uds-footer .uds-footer__legal a::after {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--uds-footer-border);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s;
}

/* VOLVER ARRIBA */

.uds-footer .uds-footer__back-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 5px 15px 5px 5px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
}

.uds-footer .uds-footer__back-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e4fbff, #eee5ff);
}

.uds-footer .uds-footer__back-icon svg {
  width: 20px;
  height: 20px;
  transition: transform .25s;
}

/* TECLADO Y PULSACIÓN */

.uds-footer :is(
  .uds-footer__cta,
  .uds-footer__links a,
  .uds-footer__back-top
):is(:focus-visible, :active) {
  animation-play-state: running;
}

.uds-footer .uds-footer__links a:is(:focus-visible, :active) {
  --uds-footer-edge-cyan: #00cfee;
  --uds-footer-edge-violet: #a13cff;

  box-shadow:
    -3px 5px 15px #00bbdf19,
    3px 5px 15px #9d49e91c;
}

.uds-footer .uds-footer__links a:is(:focus-visible, :active)::before {
  animation: uds-footer-sheen .7s ease both;
}

.uds-footer .uds-footer__social:is(:focus-visible, :active)
.uds-footer__social-bubble {
  animation-play-state: running;
  color: #733bd1;
  box-shadow: 0 7px 20px #8154d826;
}

.uds-footer .uds-footer__cta:focus-visible
.uds-footer__cta-icon svg {
  transform: translate(2px, -2px);
}

.uds-footer .uds-footer__back-top:focus-visible svg {
  transform: translateY(-3px);
}

.uds-footer .uds-footer__legal a:focus-visible::after {
  transform: scaleX(1);
}

.uds-footer :is(
  .uds-footer__cta,
  .uds-footer__links a,
  .uds-footer__back-top
):active {
  transform: scale(.98);
}

.uds-footer .uds-footer__value:focus-visible {
  background: #ebeaff80;
}

/* HOVER CON MOUSE */

@media (hover: hover) and (pointer: fine) {
  .uds-footer .uds-footer__cta:hover {
    animation-play-state: running;
    transform: translateY(-2px);
    box-shadow:
      -7px 12px 28px #00a9ce33,
      7px 12px 28px #8b3fe833;
  }

  .uds-footer .uds-footer__cta:hover .uds-footer__cta-icon svg {
    transform: translate(3px, -3px);
  }

  .uds-footer .uds-footer__links a:hover {
    --uds-footer-edge-cyan: #00cfee;
    --uds-footer-edge-violet: #a13cff;

    animation-play-state: running;
    transform: translateY(-2px);

    box-shadow:
      -3px 6px 16px #00bbdf19,
      3px 6px 16px #9d49e91c;
  }

  .uds-footer .uds-footer__links a:hover::before {
    animation: uds-footer-sheen .7s ease both;
  }

  .uds-footer .uds-footer__links a:hover > span:last-child {
    transform: translate(2px, -2px);
    color: #7740d8;
  }

  .uds-footer .uds-footer__social:hover .uds-footer__social-bubble {
    animation-play-state: running;
    transform: translateY(-3px);
    color: #733bd1;
    box-shadow: 0 7px 20px #8154d826;
  }

  .uds-footer .uds-footer__social:hover svg {
    transform: scale(1.08);
  }

  .uds-footer .uds-footer__value:hover {
    color: #6033bc;
    background: #ecebff66;
  }

  .uds-footer .uds-footer__back-top:hover {
    animation-play-state: running;
  }

  .uds-footer .uds-footer__back-top:hover svg {
    transform: translateY(-3px);
  }

  .uds-footer .uds-footer__legal a:hover::after {
    transform: scaleX(1);
  }
}

/* ANIMACIONES */

@keyframes uds-footer-ring {
  0%, 100% {
    --uds-footer-angle: 0deg;
  }
  50% {
    --uds-footer-angle: 300deg;
  }
}

@keyframes uds-footer-fill {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes uds-footer-sheen {
  0% {
    background-position: 100% 50%;
    opacity: 0;
  }
  30%, 70% {
    opacity: 1;
  }
  100% {
    background-position: 0% 50%;
    opacity: 0;
  }
}

/* TABLET */

@media (min-width: 700px) {
  .uds-footer .uds-footer__top {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 26px;
  }

  .uds-footer .uds-footer__cta {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .uds-footer .uds-footer__middle {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 28px;
  }

  .uds-footer .uds-footer__values {
    padding-top: 0;
    padding-left: 24px;
    border-top: 0;
    border-left: 1px solid var(--uds-footer-line);
  }

  .uds-footer .uds-footer__social-area {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .uds-footer .uds-footer__social-area .uds-footer__heading {
    margin: 0;
  }

  .uds-footer .uds-footer__socials {
    width: 260px;
  }

  .uds-footer .uds-footer__back-top {
    margin-left: auto;
  }
}

/* ESCRITORIO */

@media (min-width: 1100px) {
  .uds-footer .uds-footer__top {
    grid-template-columns: 180px minmax(0, 1fr) auto;
    gap: 30px;
  }

  .uds-footer .uds-footer__brand {
    padding-right: 24px;
    border-right: 1px solid var(--uds-footer-line);
  }

  .uds-footer .uds-footer__cta {
    grid-column: auto;
  }

  .uds-footer .uds-footer__middle {
    grid-template-columns:
      minmax(0, 1.4fr)
      minmax(0, 1.05fr)
      minmax(0, .75fr);
    gap: 28px;
  }

  .uds-footer .uds-footer__links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .uds-footer .uds-footer__social-area {
    grid-column: auto;
    display: block;
    padding-top: 0;
    padding-left: 24px;
    border-top: 0;
    border-left: 1px solid var(--uds-footer-line);
  }

  .uds-footer .uds-footer__social-area .uds-footer__heading {
    margin-bottom: 18px;
  }

  .uds-footer .uds-footer__socials {
    width: 100%;
  }

  .uds-footer .uds-footer__copyright {
    width: auto;
    margin-right: auto;
  }

  .uds-footer .uds-footer__back-top {
    margin-left: 0;
  }
}

@media (min-width: 1600px) {
  .uds-footer .uds-footer__top {
    grid-template-columns: 240px minmax(0, 1fr) auto;
    gap: 40px;
  }

  .uds-footer .uds-footer__cta {
    min-width: 320px;
  }

  .uds-footer .uds-footer__links a {
    font-size: 15px;
  }

  .uds-footer .uds-footer__value {
    font-size: 16px;
  }

  .uds-footer .uds-footer__heading {
    font-size: 21px;
  }
}

/* MÓVIL */

@media (max-width: 599px) {
  .uds-footer {
    padding: 16px 0;
  }

  .uds-footer .uds-footer__container {
    width: calc(100% - 24px);
  }

  .uds-footer .uds-footer__shell {
    padding: 22px;
    border-radius: 24px;
  }

  .uds-footer .uds-footer__cta {
    font-size: 14px;
    padding-left: 16px;
    gap: 10px;
  }

  .uds-footer .uds-footer__links {
    gap: 10px;
  }

  .uds-footer .uds-footer__links a {
    padding-inline: 12px;
  }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {
  .uds-footer *,
  .uds-footer *::before,
  .uds-footer *::after {
    animation: none !important;
    transition: none !important;
  }

  .uds-footer :is(
    .uds-footer__cta,
    .uds-footer__cta-icon svg,
    .uds-footer__links a,
    .uds-footer__links a > span,
    .uds-footer__social-bubble,
    .uds-footer__social svg,
    .uds-footer__back-top,
    .uds-footer__back-icon svg
  ) {
    transform: none !important;
  }
}

@media (forced-colors: active) {
  .uds-footer .uds-footer__title > span {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }

  .uds-footer :is(
    .uds-footer__cta,
    .uds-footer__links a,
    .uds-footer__value-icon,
    .uds-footer__social-bubble,
    .uds-footer__back-top
  ) {
    animation: none;
    background: Canvas;
    color: LinkText;
    border-color: LinkText;
  }
}

/* ==================================================
   UDS · FOOTER · CONTENIDO AL ANCHO DE LAS SECCIONES
   La caja (borde y fondo) conserva su ancho; solo el
   contenido interno se comprime y queda centrado.
   ================================================== */
.uds-footer {
  /* Mismo ancho de contenido que Proyectos y Acompañamiento.
     Servicios usa 1440px y el hero 1280px: cámbialo si prefieres otro. */
  --uds-footer-content: 1480px;
}

.uds-footer .uds-footer__shell {
  /* El mayor de dos valores: el padding original (se conserva en
     pantallas chicas) o el que centra el contenido en el ancho máximo. */
  padding-inline: max(
    clamp(22px, 3vw, 48px),
    calc((100% - var(--uds-footer-content)) / 2 - 1px)
  );
}


/* ==================================================
   UDS · GALERÍA INTERACTIVA DE PROYECTOS
   ================================================== */

.uds-showcase {
  --uds-showcase-cyan: #00d4f5;
  --uds-showcase-violet: #963cff;
  --uds-showcase-ink: #060b13;
  --uds-showcase-text: #f5f7ff;
  --uds-showcase-muted: #a5b3c9;
  --uds-showcase-panel: min(68%, 1040px);
  --uds-showcase-height: clamp(310px, 31vw, 470px);
  --uds-showcase-ease: cubic-bezier(.22, 1, .36, 1);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  width: 100%;
  padding-block: clamp(48px, 5vw, 72px);
  color: var(--uds-showcase-text);
  background:
    radial-gradient(
      ellipse at 0% 18%,
      rgba(0, 212, 245, .09),
      transparent 38%
    ),
    radial-gradient(
      ellipse at 100% 82%,
      rgba(150, 60, 255, .10),
      transparent 38%
    ),
    var(--uds-showcase-ink);
  font-family:
    var(--uds-font, "Segoe UI", system-ui, sans-serif);
  scroll-margin-top: calc(var(--uds-header-height, 84px) + 20px);
}

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

.uds-showcase [hidden] {
  display: none !important;
}

.uds-showcase button {
  appearance: none;
  margin: 0;
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.uds-showcase a {
  font-family: inherit;
  text-decoration: none;
}

.uds-showcase :is(button, a, [tabindex]):focus-visible {
  outline: 3px solid var(--uds-showcase-cyan);
  outline-offset: 5px;
}

/* ==================================================
   ENCABEZADO
   ================================================== */

.uds-showcase__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto 36px;
}

.uds-showcase .uds-showcase__eyebrow {
  margin: 0 0 14px;
  color: #b6d9ee;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.uds-showcase .uds-showcase__title {
  margin: 0;
  color: var(--uds-showcase-text);
  font-family: inherit;
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: -.045em;
  text-transform: none;
  text-wrap: balance;
}

.uds-showcase__title span {
  color: var(--uds-showcase-cyan);
  background: linear-gradient(
    100deg,
    var(--uds-showcase-cyan),
    #5b6fff 55%,
    var(--uds-showcase-violet)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.uds-showcase .uds-showcase__intro {
  margin: 16px 0 0;
  color: var(--uds-showcase-muted);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
}

/* ==================================================
   BOTONES
   ================================================== */

.uds-showcase .uds-showcase__button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--uds-showcase-text);
  background:
    linear-gradient(#09101d, #09101d) padding-box,
    linear-gradient(
      110deg,
      var(--uds-showcase-cyan),
      var(--uds-showcase-violet)
    ) border-box;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
  transition:
    color 250ms ease,
    box-shadow 250ms ease,
    transform 250ms var(--uds-showcase-ease);
}

.uds-showcase__button span {
  font-size: 20px;
  line-height: 1;
  transition: transform 250ms var(--uds-showcase-ease);
}

.uds-showcase .uds-showcase__button:disabled {
  opacity: .45;
  cursor: default;
}

.uds-showcase .uds-showcase__visit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  color: var(--uds-showcase-muted);
  font-size: 13px;
  transition: color 200ms ease;
}

/* ==================================================
   GALERÍA: CENTRO Y VISTAS LATERALES
   ================================================== */

.uds-showcase__stage {
  position: relative;
  width: 100%;
  height: var(--uds-showcase-height);
}

.uds-showcase__frame {
  position: relative;
  z-index: 2;
  width: var(--uds-showcase-panel);
  height: var(--uds-showcase-height);
  margin-inline: auto;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(#0c1524, #0c1524) padding-box,
    linear-gradient(
      115deg,
      var(--uds-showcase-cyan),
      #6b71ff 55%,
      var(--uds-showcase-violet)
    ) border-box;
  box-shadow:
    0 25px 70px rgba(0, 0, 0, .3),
    0 0 28px rgba(0, 212, 245, .045);
}

.uds-showcase__cover {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at 75% 20%,
      rgba(150, 60, 255, .25),
      transparent 58%
    ),
    linear-gradient(135deg, #123442, #111426);
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  user-select: none;
}

.uds-showcase--dragging .uds-showcase__cover {
  cursor: grabbing;
}

.uds-showcase__cover::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(2, 8, 15, .12),
      transparent 35%,
      rgba(2, 8, 15, .82)
    ),
    linear-gradient(
      90deg,
      rgba(2, 8, 15, .24),
      transparent 65%
    );
  pointer-events: none;
  content: "";
}

.uds-showcase .uds-showcase__image,
.uds-showcase .uds-showcase__side-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.uds-showcase__domain {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 1;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: #fff;
  background: rgba(5, 12, 22, .45);
  font-size: 12px;
  line-height: 1.4;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.uds-showcase__cover-copy {
  position: absolute;
  right: 30px;
  bottom: 30px;
  left: 30px;
  z-index: 1;
  display: grid;
  gap: 10px;
  color: #fff;
  pointer-events: none;
}

.uds-showcase__cover-label {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.uds-showcase__cover-copy strong {
  font-size: clamp(30px, 3.8vw, 56px);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.uds-showcase__cover-copy > span:last-child {
  color: #d8e1ef;
  font-size: 14px;
  line-height: 1.5;
}

.uds-showcase .uds-showcase__side {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  display: block;
  width: var(--uds-showcase-panel);
  height: var(--uds-showcase-height);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(133, 129, 240, .35);
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #103443, #211332);
  opacity: .42;
  transition: opacity 300ms ease;
}

.uds-showcase__side--previous {
  transform: translateX(calc(-150% - 24px)) scale(.93);
}

.uds-showcase__side--next {
  transform: translateX(calc(50% + 24px)) scale(.93);
}

.uds-showcase__side::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    transparent 40%,
    rgba(2, 8, 15, .85)
  );
  content: "";
}

.uds-showcase__side-name {
  position: absolute;
  right: 28px;
  bottom: 26px;
  left: 28px;
  z-index: 1;
  font-size: 26px;
  font-weight: 650;
  text-align: left;
}

/* Flechas independientes de la web incrustada. */
.uds-showcase .uds-showcase__arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  color: #fff;
  background:
    linear-gradient(#0b1422, #0b1422) padding-box,
    linear-gradient(
      135deg,
      var(--uds-showcase-cyan),
      var(--uds-showcase-violet)
    ) border-box;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  font-size: 25px;
  line-height: 1;
  transform: translate(-50%, -50%);
  transition:
    box-shadow 220ms ease,
    color 220ms ease;
}

.uds-showcase__arrow--previous {
  left: calc(50% - var(--uds-showcase-panel) / 2 - 24px);
}

.uds-showcase__arrow--next {
  left: calc(50% + var(--uds-showcase-panel) / 2 + 24px);
}

/* ==================================================
   VISTA INTERACTIVA
   ================================================== */

.uds-showcase__live {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
}

.uds-showcase__toolbar,
.uds-showcase__live-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  color: #c4d3e6;
  background: #0b1320;
  font-size: 12px;
  line-height: 1.4;
}

.uds-showcase__toolbar > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uds-showcase .uds-showcase__close {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 8px;
  color: #fff;
  background: #162235;
  font-size: 12px;
}

.uds-showcase__close span {
  font-size: 22px;
  line-height: 1;
}

.uds-showcase__embed {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #fff;
}

.uds-showcase__embed iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.uds-showcase__live-footer {
  min-height: 36px;
  padding-block: 8px;
  font-size: 11px;
}

.uds-showcase__live-footer a {
  flex-shrink: 0;
  color: #8eeafa;
}

.uds-showcase__loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 15px;
  color: #dbe7f6;
  background: #0c1726;
  font-size: 14px;
}

.uds-showcase__spinner {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, .12);
  border-top-color: var(--uds-showcase-cyan);
  border-right-color: var(--uds-showcase-violet);
  border-radius: 50%;
  animation: uds-showcase-spin 850ms linear infinite;
}

@keyframes uds-showcase-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==================================================
   INFORMACIÓN Y NAVEGACIÓN
   ================================================== */

.uds-showcase__details,
.uds-showcase__navigation {
  width: var(--uds-showcase-panel);
  margin-inline: auto;
}

.uds-showcase__details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 26px;
}

.uds-showcase .uds-showcase__category {
  margin: 0 0 8px;
  color: var(--uds-showcase-muted);
  font-size: 13px;
  line-height: 1.5;
}

.uds-showcase .uds-showcase__project-title {
  margin: 0;
  color: #f5f7ff;
  font-family: inherit;
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -.035em;
  text-transform: none;
}

.uds-showcase__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.uds-showcase__tags span {
  padding: 5px 11px;
  border: 1px solid rgba(159, 182, 208, .22);
  border-radius: 999px;
  color: #bac8dc;
  font-size: 11px;
  line-height: 1.4;
}

.uds-showcase__actions {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.uds-showcase__navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid rgba(157, 188, 216, .2);
}

.uds-showcase__count {
  flex-shrink: 0;
  color: #dce6f5;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.uds-showcase__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.uds-showcase .uds-showcase__dot {
  display: grid;
  place-items: center;
  width: 40px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

.uds-showcase__dot span {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: #293547;
  transition:
    background 220ms ease,
    transform 220ms ease;
}

.uds-showcase__dot[aria-current="true"] span {
  background: linear-gradient(
    90deg,
    var(--uds-showcase-cyan),
    var(--uds-showcase-violet)
  );
  transform: scaleY(1.35);
}

.uds-showcase__hint {
  color: #8b9db5;
  font-size: 12px;
  white-space: nowrap;
}

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

.uds-showcase__fallback {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  padding: 24px;
}

.uds-showcase__fallback a {
  color: #8eeafa;
}

.uds-showcase:not(.uds-showcase--ready) [data-uds-go],
.uds-showcase:not(.uds-showcase--ready) .uds-showcase__navigation {
  visibility: hidden;
}

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

@media (hover: hover) {
  .uds-showcase .uds-showcase__side:hover {
    opacity: .75;
  }

  .uds-showcase .uds-showcase__button:not(:disabled):hover {
    color: #101736;
    background:
      linear-gradient(#f5fcff, #f5fcff) padding-box,
      linear-gradient(
        110deg,
        var(--uds-showcase-cyan),
        var(--uds-showcase-violet)
      ) border-box;
    box-shadow:
      0 0 22px rgba(0, 212, 245, .12),
      0 0 24px rgba(150, 60, 255, .12);
  }

  .uds-showcase__button:not(:disabled):hover span {
    transform: translate(2px, -2px);
  }

  .uds-showcase .uds-showcase__arrow:hover {
    color: var(--uds-showcase-cyan);
    box-shadow: 0 0 24px rgba(0, 212, 245, .18);
  }

  .uds-showcase .uds-showcase__visit:hover {
    color: #fff;
  }

  .uds-showcase .uds-showcase__close:hover {
    background: #26334a;
  }

  .uds-showcase__dot:hover span {
    background: #7487a5;
  }

  .uds-showcase__dot[aria-current="true"]:hover span {
    background: linear-gradient(
      90deg,
      var(--uds-showcase-cyan),
      var(--uds-showcase-violet)
    );
  }
}

/* ==================================================
   RESPONSIVE
   ================================================== */

@media (max-width: 1000px) {
  .uds-showcase {
    --uds-showcase-panel: 78%;
  }

  .uds-showcase__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
  }

  .uds-showcase__hint {
    display: none;
  }
}

@media (max-width: 700px) {
  .uds-showcase {
    --uds-showcase-panel: calc(100% - 36px);
    --uds-showcase-height: 380px;
    padding-block: 44px;
  }

  .uds-showcase__header {
    width: calc(100% - 36px);
    margin-bottom: 26px;
  }

  .uds-showcase__stage {
    height: calc(var(--uds-showcase-height) + 58px);
  }

  .uds-showcase .uds-showcase__side {
    display: none;
  }

  .uds-showcase .uds-showcase__arrow {
    top: auto;
    bottom: 0;
    width: 44px;
    height: 44px;
    transform: none;
  }

  .uds-showcase__arrow--previous {
    left: 18px;
  }

  .uds-showcase__arrow--next {
    right: 18px;
    left: auto;
  }

  .uds-showcase__frame {
    border-radius: 14px;
  }

  .uds-showcase__domain {
    top: 16px;
    left: 16px;
  }

  .uds-showcase__cover-copy {
    right: 22px;
    bottom: 24px;
    left: 22px;
  }

  .uds-showcase__details {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
    margin-top: 22px;
  }

  .uds-showcase__actions {
    align-items: flex-start;
    width: 100%;
  }

  .uds-showcase__actions .uds-showcase__button {
    width: 100%;
  }

  .uds-showcase__visit {
    align-self: center;
  }

  .uds-showcase__navigation {
    gap: 12px;
    margin-top: 18px;
  }

  .uds-showcase .uds-showcase__dot {
    width: 28px;
  }

  .uds-showcase__dots {
    gap: 6px;
  }

  .uds-showcase__toolbar,
  .uds-showcase__live-footer {
    padding-inline: 10px;
  }

  .uds-showcase__live-footer > span {
    display: none;
  }

  .uds-showcase__live-footer {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uds-showcase *,
  .uds-showcase *::before,
  .uds-showcase *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .uds-showcase__title span {
    color: CanvasText;
    background: none;
    -webkit-text-fill-color: currentColor;
  }

  .uds-showcase__frame,
  .uds-showcase .uds-showcase__button,
  .uds-showcase .uds-showcase__arrow {
    border-color: ButtonText;
  }
}

/* ==================================================
   UDS · VISOR AMPLIADO DE PROYECTOS
   ================================================== */

.uds-project-viewer {
  position: fixed;
  inset: 0;

  display: none;

  width: 94vw;
  max-width: none;

  height: 90vh;
  height: 90dvh;
  max-height: none;

  margin: auto;
  padding: 0;

  overflow: hidden;
  box-sizing: border-box;

  border: 1px solid transparent;
  border-radius: 20px;

  color: #f5f7ff;

  background:
    linear-gradient(#0b1220, #0b1220) padding-box,
    linear-gradient(
      120deg,
      #00d4f5,
      #6754ff,
      #ad42ff
    ) border-box;

  box-shadow: 0 30px 100px #0009;

  font-family:
    var(--uds-font, "Segoe UI", sans-serif);
}

.uds-project-viewer[open] {
  display: flex;
  flex-direction: column;
}

.uds-project-viewer::backdrop {
  background: rgb(2 6 14 / 82%);

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

.uds-project-viewer *,
.uds-project-viewer *::before,
.uds-project-viewer *::after {
  box-sizing: border-box;
}

.uds-project-viewer [hidden] {
  display: none !important;
}

/* Barra superior */

.uds-project-viewer__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;

  flex-shrink: 0;

  padding: 12px 16px;
  border-bottom: 1px solid #ffffff12;
}

.uds-project-viewer__identity {
  min-width: 0;
}

.uds-project-viewer__name {
  margin: 0;
  overflow: hidden;

  color: #f5f7ff;

  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.uds-project-viewer__domain {
  display: block;
  margin-top: 2px;

  color: #a5b3c9;
  font-size: 12px;
}

.uds-project-viewer__controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Botones del visor */

.uds-project-viewer .uds-project-viewer__control {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  flex-shrink: 0;
  gap: 8px;

  min-width: 44px;
  min-height: 44px;

  margin: 0;
  padding: 8px 12px;

  border: 1px solid #ffffff26;
  border-radius: 11px;

  background: #ffffff06;
  color: #f5f7ff;

  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;

  text-decoration: none;
  text-transform: none;

  cursor: pointer;

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

.uds-project-viewer .uds-project-viewer__control:hover {
  border-color: #00d4f5;
  background: #00d4f51a;
}

.uds-project-viewer .uds-project-viewer__control:focus-visible {
  outline: 2px solid #00d4f5;
  outline-offset: 3px;
}

.uds-project-viewer__count {
  min-width: 55px;

  color: #a5b3c9;
  font-size: 12px;

  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* La web aprovecha todo el espacio disponible */

.uds-project-viewer__embed {
  position: relative;

  flex: 1;
  min-height: 0;

  overflow: hidden;
  background: #fff;
}

.uds-project-viewer__embed iframe {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;
  max-width: none;

  margin: 0;
  border: 0;

  background: #fff;
}

/* Estado de carga */

.uds-project-viewer__loading {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;

  padding: 24px;

  background: #0b1220;
  color: #c2cee0;

  font-size: 14px;
}

.uds-project-viewer__spinner {
  width: 32px;
  height: 32px;

  border: 2px solid #ffffff20;
  border-top-color: #00d4f5;
  border-right-color: #963cff;
  border-radius: 50%;

  animation: uds-project-viewer-spin 0.8s linear infinite;
}

.uds-project-viewer__footer {
  flex-shrink: 0;

  margin: 0;
  padding: 10px 16px;

  color: #a5b3c9;
  font-size: 12px;
  line-height: 1.5;
}

@keyframes uds-project-viewer-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Móvil: visor a pantalla completa */

@media (max-width: 700px) {
  .uds-project-viewer {
    width: 100vw;

    height: 100vh;
    height: 100dvh;

    border-radius: 0;
  }

  .uds-project-viewer__bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;

    padding:
      max(10px, env(safe-area-inset-top))
      12px
      10px;
  }

  .uds-project-viewer__controls {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .uds-project-viewer__close {
    grid-column: 2;
    grid-row: 1;
  }

  .uds-project-viewer__external {
    margin-left: auto !important;
  }

  .uds-project-viewer__footer {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
}

/* Accesibilidad */

@media (prefers-reduced-motion: reduce) {
  .uds-project-viewer .uds-project-viewer__control {
    transition: none;
  }

  .uds-project-viewer__spinner {
    animation: none;
  }
}

/* ==================================================
   UDS · OBJETOS INTERACTIVOS DEL HERO
   ================================================== */

.uds-hero-lab {
  container-type: inline-size;
  position: relative;
  isolation: isolate;

  width: 100%;
  max-width: 760px;
  min-width: 0;
  margin-inline: auto;

  color: #111735;
  font-family: var(--uds-font, "Segoe UI", sans-serif);
}

.uds-hero-lab,
.uds-hero-lab *,
.uds-hero-lab *::before,
.uds-hero-lab *::after {
  box-sizing: border-box;
}

.uds-hero-lab::before {
  content: "";
  position: absolute;
  inset: 5% 0 10%;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 20% 25%,
      #00d4f51c,
      transparent 62%
    ),
    radial-gradient(
      ellipse at 85% 75%,
      #963cff20,
      transparent 60%
    );

  filter: blur(24px);
}

.uds-lab__scene {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(12px, 3cqw, 24px);
  align-items: center;

  padding: 18px 16px 24px;
}

/* Objetos interactivos */

.uds-hero-lab .uds-lab__piece {
  --uds-turn: 0deg;
  --uds-rx: 0deg;
  --uds-ry: 0deg;
  --uds-lift: 0px;

  position: relative;
  display: block;
  min-width: 0;
  isolation: isolate;

  color: #111735;
  text-decoration: none;
  border-radius: 20px;

  -webkit-tap-highlight-color: transparent;

  transform:
    perspective(900px)
    translateY(var(--uds-lift))
    rotateX(var(--uds-rx))
    rotateY(var(--uds-ry))
    rotateZ(var(--uds-turn));

  transition: transform 0.35s ease;
  animation: uds-lab-enter 0.8s both;
}

.uds-lab__piece::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;

  border-radius: inherit;
  pointer-events: none;
  opacity: 0;

  background:
    radial-gradient(
      circle at var(--uds-x, 30%) var(--uds-y, 30%),
      #00d4f563,
      transparent 58%
    ),
    radial-gradient(
      circle at 80% 80%,
      #963cff50,
      transparent 65%
    );

  filter: blur(14px);
  transition: opacity 0.3s ease;
}

.uds-hero-lab .uds-lab__piece:focus-visible {
  outline: 3px solid #0787d8;
  outline-offset: 7px;
}

.uds-lab__piece:is(:hover, :focus-visible)::before {
  opacity: 1;
}

.uds-hero-lab .uds-lab__piece--web {
  grid-column: 1;
  grid-row: 1;
  --uds-turn: -3deg;
}

.uds-hero-lab .uds-lab__piece--brand {
  grid-column: 1;
  grid-row: 2;
  --uds-turn: -4deg;
  animation-delay: 0.1s;
}

.uds-hero-lab .uds-lab__piece--social {
  grid-column: 2;
  grid-row: 1 / 3;
  --uds-turn: 5deg;
  animation-delay: 0.2s;
}

/* Accesos a los servicios */

.uds-lab__cta {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  width: max-content;
  max-width: calc(100% - 12px);
  min-height: 44px;
  padding: 10px 16px;

  border: 1px solid transparent;
  border-radius: 999px;

  background:
    linear-gradient(#fffffff2, #fffffff2) padding-box,
    linear-gradient(110deg, #00d4f5, #963cff) border-box;

  box-shadow: 0 8px 24px #10173520;
  color: #111735;

  font-size: clamp(12px, 2cqw, 14px);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;

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

  transform: translateX(-50%);

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

.uds-lab__cta > span {
  color: #7541e8;
  font-size: 18px;
}

/* ==================================================
   MINIATURA DE PÁGINA WEB
   ================================================== */

.uds-lab__browser {
  overflow: hidden;
  border: 1px solid #d7deed;
  border-radius: 13px;
  background: #fff;

  box-shadow:
    0 18px 40px #1017351c,
    0 2px 4px #10173512;
}

.uds-lab__browser-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  padding: 8px 10px;
  background: #11182c;
  color: #bdc6dc;

  font-size: clamp(6px, 1.25cqw, 9px);
}

.uds-lab__dots {
  display: flex;
  gap: 4px;
}

.uds-lab__dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #bd69ff;
}

.uds-lab__dots i:nth-child(2) {
  background: #00d4f5;
}

.uds-lab__dots i:nth-child(3) {
  background: #b2e7f2;
}

.uds-lab__web-page {
  padding: 4cqw 3cqw 3cqw;
}

.uds-lab__web-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  margin-bottom: 4cqw;
}

.uds-lab__web-nav b {
  font-size: clamp(12px, 3cqw, 22px);
  letter-spacing: -0.06em;
}

.uds-lab__web-nav > span {
  font-size: clamp(5px, 0.8cqw, 7px);
  letter-spacing: 0.06em;
}

.uds-lab__web-nav > i {
  width: 6cqw;
  height: 2cqw;
  border-radius: 3px;
  background: linear-gradient(110deg, #00ccef, #963cff);
}

.uds-lab__web-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 2cqw;
  align-items: center;
}

.uds-lab__web-copy small {
  display: block;
  margin-bottom: 1.7cqw;

  font-size: clamp(5px, 0.9cqw, 8px);
  letter-spacing: 0.13em;
}

.uds-lab__web-copy > strong {
  display: block;

  font-size: clamp(17px, 4.2cqw, 32px);
  line-height: 1.06;
  letter-spacing: -0.05em;
}

.uds-lab__web-copy em {
  color: #7740e9;
  font-style: normal;
}

.uds-lab__mini-cta {
  display: inline-block;
  margin-top: 2.5cqw;
  padding: 1.2cqw 1.4cqw;

  border-radius: 4px;
  background: #12182f;
  color: #fff;

  font-size: clamp(6px, 1cqw, 9px);
}

.uds-lab__architecture {
  position: relative;
  min-height: 25cqw;
  overflow: hidden;
  border-radius: 8px;

  background:
    radial-gradient(
      circle at 15% 10%,
      #c7ffff,
      transparent 58%
    ),
    linear-gradient(
      140deg,
      #25caf0,
      #7975f5 58%,
      #e1c7ff
    );
}

.uds-lab__architecture > i {
  position: absolute;
  bottom: -12%;
  left: 12%;

  width: 29%;
  height: 78%;

  transform: skewY(-22deg);

  background: linear-gradient(
    90deg,
    #151d4b,
    #3355b0 60%,
    #879bff 61%,
    #2b358c
  );

  box-shadow: 10px 10px 20px #18318740;
}

.uds-lab__architecture > i:nth-child(2) {
  left: 38%;
  height: 100%;

  background: linear-gradient(
    90deg,
    #506eef,
    #c9d5ff 60%,
    #7256df 61%,
    #442b91
  );
}

.uds-lab__architecture > i:nth-child(3) {
  left: 63%;
  height: 55%;

  background: linear-gradient(
    90deg,
    #ac58f3,
    #d7a8ff 60%,
    #582b9f 61%
  );
}

.uds-lab__architecture > span {
  position: absolute;
  top: 9%;
  right: 8%;

  color: #fff;
  font-size: clamp(6px, 1.1cqw, 9px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.07em;
}

.uds-lab__web-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2cqw;
  margin-top: 3cqw;
}

.uds-lab__web-strip i {
  height: 3cqw;
  border-radius: 3px;
  background: #ecf1fb;
}

.uds-lab__web-strip i:nth-child(2) {
  background: #e9e1ff;
}

/* ==================================================
   MANUAL, PAPELERÍA Y PALETA
   ================================================== */

.uds-lab__identity {
  position: relative;
  aspect-ratio: 1.55;
}

.uds-lab__book {
  position: absolute;
  left: 7%;
  top: 0;

  width: 53%;
  height: 91%;

  display: flex;
  flex-direction: column;
  padding: 8% 7%;

  border: 1px solid #455071;
  border-left: 6px solid #080f23;
  border-radius: 3px 8px 8px 3px;

  background:
    radial-gradient(
      ellipse at 95% 10%,
      #6041a060,
      transparent 60%
    ),
    repeating-linear-gradient(
      135deg,
      transparent 0 33px,
      #ffffff08 34px 35px
    ),
    #11172c;

  box-shadow:
    7px 9px 0 -3px #d7deeb,
    10px 14px 0 -5px #a5aec2,
    0 20px 24px #151e3824;

  color: #fff;
}

.uds-lab__book-top {
  font-size: clamp(5px, 0.85cqw, 7px);
  letter-spacing: 0.09em;
  color: #b1bcd5;
}

.uds-lab__book > strong {
  margin-top: 8%;
  font-size: clamp(27px, 7cqw, 51px);
  letter-spacing: -0.07em;
  line-height: 1.1;
}

.uds-lab__book-title {
  margin-top: auto;
  font-size: clamp(12px, 2.4cqw, 18px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.uds-lab__book-line {
  display: block;
  width: 60%;
  height: 2px;
  margin-top: 8%;
  background: linear-gradient(90deg, #00d4f5, #a445ff);
}

.uds-lab__business-card {
  position: absolute;
  right: 1%;
  top: 27%;

  width: 48%;
  aspect-ratio: 1.6;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5%;

  transform: rotate(13deg);

  border: 1px solid #fff;
  border-radius: 4px;

  background: linear-gradient(125deg, #fff, #f2f5ff);
  box-shadow: 0 9px 24px #15254c26;
}

.uds-lab__business-card strong {
  font-size: clamp(16px, 3.5cqw, 26px);
  letter-spacing: -0.06em;
}

.uds-lab__business-card > span {
  font-size: clamp(6px, 1cqw, 8px);
  line-height: 1.4;
  color: #596280;
}

.uds-lab__swatches {
  position: absolute;
  bottom: 7%;
  right: 1%;

  display: flex;
  gap: 5px;
  transform: rotate(10deg);
}

.uds-lab__swatches i {
  display: block;
  width: 4.6cqw;
  height: 5.8cqw;

  border: 1px solid #ffffff55;
  border-radius: 3px;

  background: #10172e;
  box-shadow: 0 5px 8px #10173520;
}

.uds-lab__swatches i:nth-child(2) {
  background: #00d4f5;
}

.uds-lab__swatches i:nth-child(3) {
  background: #8041f5;
}

.uds-lab__swatches i:nth-child(4) {
  background: #d637f6;
}

/* ==================================================
   TELÉFONO Y PUBLICACIONES
   ================================================== */

.uds-lab__phone {
  position: relative;
  overflow: hidden;
  padding: 15% 5% 7%;

  border: 5px solid #131b2d;
  border-radius: 30px;

  background: #fff;

  box-shadow:
    0 0 0 1px #aab4ca,
    inset 0 0 0 1px #e2e8f3,
    0 22px 36px #15213d26;
}

.uds-lab__phone-camera {
  position: absolute;
  top: 9px;
  left: 50%;

  width: 32%;
  height: 9px;

  transform: translateX(-50%);
  border-radius: 20px;
  background: #101626;
}

.uds-lab__phone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: clamp(9px, 1.9cqw, 14px);
}

.uds-lab__profile {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  margin: 3cqw 0;
}

.uds-lab__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;

  width: 5cqw;
  height: 5cqw;

  border-radius: 50%;
  background: #12182c;
  color: #fff;

  font-size: clamp(10px, 2.4cqw, 18px);
  font-weight: 800;
}

.uds-lab__profile b {
  display: block;
  font-size: clamp(6px, 1.2cqw, 9px);
}

.uds-lab__profile small {
  display: block;
  margin-top: 3px;
  color: #66718b;
  font-size: clamp(4px, 0.65cqw, 6px);
}

.uds-lab__posts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.uds-lab__post {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;

  aspect-ratio: 1;
  overflow: hidden;
  padding: 12%;

  background: #10162b;
  color: #fff;
}

.uds-lab__post--type {
  font-size: clamp(9px, 2cqw, 15px);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.uds-lab__post em {
  color: #50dfff;
  font-style: normal;
}

.uds-lab__post--orb {
  background: linear-gradient(150deg, #ddfaff, #eee6ff);
}

.uds-lab__post--orb i {
  width: 90%;
  aspect-ratio: 1;
  margin: auto;

  border-radius: 50%;

  background: radial-gradient(
    circle at 30% 25%,
    #e1ffff,
    #00c9ec 25%,
    #7954fa 57%,
    #151b48 85%
  );

  box-shadow: 8px 12px 12px #34298433;
}

.uds-lab__post--light {
  background: #e5f8fc;
  color: #12182d;

  font-size: clamp(12px, 2.7cqw, 20px);
  letter-spacing: -0.06em;
  line-height: 1.05;
}

.uds-lab__post--light b {
  color: #7435d5;
}

.uds-lab__post--ribbon {
  background: #12152f;
}

.uds-lab__post--ribbon i {
  position: absolute;
  inset: 10% 20%;

  border: 12px solid #ae62ff;
  border-left-color: #00d4f5;
  border-radius: 50%;

  transform: rotate(-32deg) scale(1.15);

  box-shadow:
    0 0 22px #9060ff80,
    inset 0 0 15px #00d4f54a;
}

.uds-lab__post--brand {
  background: linear-gradient(145deg, #5044d8, #963cf0);
}

.uds-lab__post--brand b {
  font-size: clamp(16px, 3.5cqw, 26px);
  letter-spacing: -0.06em;
}

.uds-lab__post--brand span {
  margin-top: 4px;
  font-size: clamp(4px, 0.7cqw, 6px);
  letter-spacing: 0.06em;
}

.uds-lab__phone-footer {
  display: flex;
  justify-content: space-around;
  padding-top: 3cqw;
  font-size: clamp(13px, 2.8cqw, 21px);
}

.uds-lab__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  margin: 14px 0 0;
  padding: 0 8px;

  color: #5a6583;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.uds-lab__hint > span {
  flex-shrink: 0;
  width: 22px;
  height: 2px;
  background: linear-gradient(90deg, #00d4f5, #963cff);
}

/* ==================================================
   MOUSE Y TECLADO
   ================================================== */

@media (hover: hover) and (pointer: fine) {
  .uds-lab__cta {
    opacity: 0;
    transform: translate(-50%, 8px);
  }

  .uds-hero-lab .uds-lab__piece:is(:hover, :focus-visible) {
    --uds-lift: -7px;
    z-index: 3;
  }

  .uds-lab__piece:is(:hover, :focus-visible) .uds-lab__cta {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* ==================================================
   ADAPTACIÓN AL ANCHO DE LA COLUMNA
   ================================================== */

@container (max-width: 460px) {
  .uds-lab__scene {
    grid-template-columns: 1fr 1fr;
    gap: 18px 14px;
    padding: 10px 8px 18px;
  }

  .uds-hero-lab .uds-lab__piece--web {
    grid-column: 1 / -1;
    grid-row: 1;
    --uds-turn: -1deg;
  }

  .uds-hero-lab .uds-lab__piece--brand {
    grid-column: 1;
    grid-row: 2;
    --uds-turn: -3deg;
  }

  .uds-hero-lab .uds-lab__piece--social {
    grid-column: 2;
    grid-row: 2;
    --uds-turn: 3deg;
  }

  .uds-lab__identity {
    aspect-ratio: 0.77;
  }

  .uds-lab__book {
    left: 2%;
    top: 2%;
    width: 85%;
    height: 74%;
    padding: 11% 8%;
  }

  .uds-lab__book > strong {
    font-size: 10cqw;
  }

  .uds-lab__book-title {
    font-size: 4cqw;
  }

  .uds-lab__book-top {
    font-size: 1.4cqw;
  }

  .uds-lab__business-card {
    top: 49%;
    right: 0;
    width: 75%;
    padding: 7%;
  }

  .uds-lab__business-card strong {
    font-size: 5cqw;
  }

  .uds-lab__business-card > span {
    font-size: 1.8cqw;
  }

  .uds-lab__swatches {
    bottom: 7%;
    right: 5%;
  }

  .uds-lab__swatches i {
    width: 6cqw;
    height: 8cqw;
  }

  .uds-lab__phone {
    border-width: 4px;
    border-radius: 24px;
  }

  .uds-lab__phone-header {
    font-size: 3cqw;
  }

  .uds-lab__profile b {
    font-size: 2cqw;
  }

  .uds-lab__profile small {
    font-size: 1.15cqw;
  }

  .uds-lab__avatar {
    width: 7cqw;
    height: 7cqw;
    font-size: 3cqw;
  }

  .uds-lab__post--type {
    font-size: 3.4cqw;
  }

  .uds-lab__post--light {
    font-size: 4.2cqw;
  }

  .uds-lab__post--brand b {
    font-size: 5cqw;
  }

  .uds-lab__post--brand span {
    font-size: 1.2cqw;
  }

  .uds-lab__phone-footer {
    padding-top: 5cqw;
  }

  .uds-lab__cta {
    gap: 8px;
    padding: 9px 12px;
    font-size: 12px;
  }
}

/* Entrada suave */

@keyframes uds-lab-enter {
  from {
    opacity: 0;
    translate: 0 18px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Preferencias de movimiento */

@media (prefers-reduced-motion: reduce) {
  .uds-hero-lab .uds-lab__piece,
  .uds-lab__piece::before,
  .uds-lab__cta {
    animation: none;
    transition: none;
  }

  .uds-hero-lab .uds-lab__piece {
    transform: rotate(var(--uds-turn));
  }
}

/* Separación del header al llegar a un servicio */

:is(
  #uds-servicio-web,
  #uds-servicio-branding,
  #uds-servicio-redes
) {
  scroll-margin-top: calc(var(--uds-header-height, 84px) + 24px);
}