/* @company/tokens — temas claro y oscuro (excepción de novoexpert.net). Copiado de my-design-system 6a05119 2026-10-28. No editar: correr herramientas/traer-del-ds.py */
:root {
--ds-component-control-height-sm: 32px;
--ds-component-control-height-md: 40px;
--ds-component-control-height-lg: 48px;
--ds-component-control-padding-x-sm: 12px;
--ds-component-control-padding-x-md: 16px;
--ds-component-control-padding-x-lg: 24px;
--ds-component-control-gap-sm: 8px;
--ds-component-control-gap-md: 8px;
--ds-component-control-gap-lg: 12px;
--ds-component-control-radius: 8px;
--ds-component-control-border-width: 0px;
--ds-component-control-icon-size-sm: 16px;
--ds-component-control-icon-size-md: 20px;
--ds-component-control-icon-size-lg: 24px;
--ds-component-focus-ring-width: 2px;
--ds-component-focus-ring-offset: 2px;
--ds-z-index-base: 0;
--ds-z-index-raised: 1;
--ds-z-index-sticky: 100;
--ds-z-index-overlay: 1000;
--ds-z-index-modal: 1100;
--ds-z-index-toast: 1200;
--ds-border-width-none: 0px;
--ds-border-width-thin: 1px;
--ds-border-width-medium: 2px;
--ds-border-width-thick: 4px;
--ds-border-focus-offset: 2px;
--ds-layout-gap-xs: 4px;
--ds-layout-gap-sm: 8px;
--ds-layout-gap-md: 16px;
--ds-layout-gap-lg: 24px;
--ds-layout-gap-xl: 32px;
--ds-layout-inset-sm: 8px;
--ds-layout-inset-md: 16px;
--ds-layout-inset-lg: 24px;
--ds-layout-inset-xl: 32px;
--ds-layout-gutter-compact: 16px;
--ds-layout-gutter-medium: 24px;
--ds-layout-gutter-expanded: 32px;
--ds-layout-gutter-large: 40px;
--ds-layout-container-max-width: 1200px;
--ds-layout-dialog-max-width: 384px;
--ds-layout-popover-max-width: 320px;
--ds-layout-tooltip-max-width: 256px;
--ds-layout-sheet-side-width: 384px;
--ds-layout-top-bar-height: 64px;
--ds-layout-bottom-bar-height: 64px;
--ds-layout-navigation-rail-width: 80px;
--ds-layout-sidebar-width: 256px;
--ds-motion-duration-instant: 0ms;
--ds-motion-duration-feedback: 100ms;
--ds-motion-duration-transition: 200ms;
--ds-motion-duration-enter: 300ms;
--ds-motion-duration-exit: 200ms;
--ds-motion-duration-indeterminate: 1000ms;
--ds-motion-delay-tooltip-show: 500ms;
--ds-motion-delay-tooltip-hide: 100ms;
--ds-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
--ds-motion-easing-enter: cubic-bezier(0, 0, 0, 1);
--ds-motion-easing-exit: cubic-bezier(0.3, 0, 1, 1);
--ds-opacity-pressed: 0.8;
--ds-opacity-disabled: 0.38;
--ds-opacity-scrim: 0.5;
--ds-radius-none: 0px;
--ds-radius-xs: 2px;
--ds-radius-sm: 4px;
--ds-radius-md: 8px;
--ds-radius-lg: 12px;
--ds-radius-xl: 16px;
--ds-radius-full: 9999px;
--ds-radius-control: 8px;
--ds-radius-surface: 12px;
--ds-radius-pill: 9999px;
--ds-size-icon-xs: 12px;
--ds-size-icon-sm: 16px;
--ds-size-icon-md: 20px;
--ds-size-icon-lg: 24px;
--ds-size-icon-xl: 32px;
--ds-size-control-sm: 32px;
--ds-size-control-md: 40px;
--ds-size-control-lg: 48px;
--ds-size-sheet-handle-width: 32px;
--ds-size-sheet-handle-height: 4px;
--ds-size-slider-track-sm: 2px;
--ds-size-slider-track-md: 4px;
--ds-size-slider-thumb-sm: 16px;
--ds-size-slider-thumb-md: 20px;
--ds-size-touch-target-coarse: 48px;
--ds-size-touch-target-fine: 24px;
--ds-space-0: 0px;
--ds-space-1: 4px;
--ds-space-2: 8px;
--ds-space-3: 12px;
--ds-space-4: 16px;
--ds-space-6: 24px;
--ds-space-8: 32px;
--ds-space-10: 40px;
--ds-space-12: 48px;
--ds-space-16: 64px;
--ds-space-20: 80px;
--ds-space-24: 96px;
--ds-space-32: 128px;
--ds-space-40: 160px;
--ds-space-48: 192px;
--ds-space-64: 256px;
--ds-space-80: 320px;
--ds-space-96: 384px;
--ds-typography-display-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--ds-typography-display-font-size: 3rem;
--ds-typography-display-line-height: 3.5rem;
--ds-typography-display-font-weight: 700;
--ds-typography-display-letter-spacing: -1px;
--ds-typography-heading-1-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--ds-typography-heading-1-font-size: 2.25rem;
--ds-typography-heading-1-line-height: 2.75rem;
--ds-typography-heading-1-font-weight: 700;
--ds-typography-heading-1-letter-spacing: -0.5px;
--ds-typography-heading-2-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--ds-typography-heading-2-font-size: 1.875rem;
--ds-typography-heading-2-line-height: 2.5rem;
--ds-typography-heading-2-font-weight: 600;
--ds-typography-heading-2-letter-spacing: -0.25px;
--ds-typography-heading-3-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--ds-typography-heading-3-font-size: 1.5rem;
--ds-typography-heading-3-line-height: 2rem;
--ds-typography-heading-3-font-weight: 600;
--ds-typography-heading-3-letter-spacing: 0px;
--ds-typography-heading-4-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--ds-typography-heading-4-font-size: 1.25rem;
--ds-typography-heading-4-line-height: 1.75rem;
--ds-typography-heading-4-font-weight: 600;
--ds-typography-heading-4-letter-spacing: 0px;
--ds-typography-body-large-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--ds-typography-body-large-font-size: 1.125rem;
--ds-typography-body-large-line-height: 1.75rem;
--ds-typography-body-large-font-weight: 400;
--ds-typography-body-large-letter-spacing: 0px;
--ds-typography-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--ds-typography-body-font-size: 1rem;
--ds-typography-body-line-height: 1.5rem;
--ds-typography-body-font-weight: 400;
--ds-typography-body-letter-spacing: 0px;
--ds-typography-body-small-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--ds-typography-body-small-font-size: 0.875rem;
--ds-typography-body-small-line-height: 1.25rem;
--ds-typography-body-small-font-weight: 400;
--ds-typography-body-small-letter-spacing: 0px;
--ds-typography-label-large-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--ds-typography-label-large-font-size: 1rem;
--ds-typography-label-large-line-height: 1.5rem;
--ds-typography-label-large-font-weight: 500;
--ds-typography-label-large-letter-spacing: 0px;
--ds-typography-label-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--ds-typography-label-font-size: 0.875rem;
--ds-typography-label-line-height: 1.25rem;
--ds-typography-label-font-weight: 500;
--ds-typography-label-letter-spacing: 0.1px;
--ds-typography-caption-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--ds-typography-caption-font-size: 0.75rem;
--ds-typography-caption-line-height: 1.125rem;
--ds-typography-caption-font-weight: 400;
--ds-typography-caption-letter-spacing: 0.2px;
--ds-text-scale-control-max: 2;
}
:root {
--ds-size-class: "compact";
--ds-layout-gutter: var(--ds-layout-gutter-compact);
--ds-height-class: "compact";
}
@media (min-width: 600px) {
:root {
--ds-size-class: "medium";
--ds-layout-gutter: var(--ds-layout-gutter-medium);
}
}
@media (min-width: 840px) {
:root {
--ds-size-class: "expanded";
--ds-layout-gutter: var(--ds-layout-gutter-expanded);
}
}
@media (min-width: 1200px) {
:root {
--ds-size-class: "large";
--ds-layout-gutter: var(--ds-layout-gutter-large);
}
}
@media (min-height: 480px) {
:root {
--ds-height-class: "medium";
}
}
@media (min-height: 900px) {
:root {
--ds-height-class: "expanded";
}
}
@media (prefers-reduced-motion: reduce) {
:root {
--ds-motion-duration-instant: 0ms;
--ds-motion-duration-feedback: 0ms;
--ds-motion-duration-transition: 0ms;
--ds-motion-duration-enter: 0ms;
--ds-motion-duration-exit: 0ms;
--ds-motion-duration-indeterminate: 0ms;
}
}
:root {
color-scheme: light;
--ds-color-background-primary: #ffffff;
--ds-color-background-secondary: #f4f7fb;
--ds-color-background-tertiary: #eaedf2;
--ds-color-surface-default: #ffffff;
--ds-color-surface-raised: #ffffff;
--ds-color-surface-sunken: #eaedf2;
--ds-color-surface-inverse: #3f444c;
--ds-color-text-primary: #2b2f36;
--ds-color-text-secondary: #545a64;
--ds-color-text-tertiary: #6a707b;
--ds-color-text-disabled: #a1a6af;
--ds-color-text-inverse: #ffffff;
--ds-color-text-link: #4742c0;
--ds-color-icon-primary: #3f444c;
--ds-color-icon-secondary: #6a707b;
--ds-color-icon-disabled: #a1a6af;
--ds-color-icon-inverse: #ffffff;
--ds-color-border-subtle: #d9dce3;
--ds-color-border-default: #c0c4cc;
--ds-color-border-strong: #858b95;
--ds-color-focus-ring: #5b59e0;
--ds-color-disabled-background: #eaedf2;
--ds-color-disabled-foreground: #a1a6af;
--ds-color-disabled-border: #d9dce3;
--ds-color-tone-neutral-solid-background: #3f444c;
--ds-color-tone-neutral-solid-background-hover: #2b2f36;
--ds-color-tone-neutral-solid-background-pressed: #191c21;
--ds-color-tone-neutral-solid-foreground: #ffffff;
--ds-color-tone-neutral-subtle-background: #f4f7fb;
--ds-color-tone-neutral-subtle-background-hover: #eaedf2;
--ds-color-tone-neutral-subtle-background-pressed: #d9dce3;
--ds-color-tone-neutral-subtle-foreground: #2b2f36;
--ds-color-tone-neutral-outline-border: #858b95;
--ds-color-tone-neutral-outline-foreground: #3f444c;
--ds-color-tone-brand-solid-background: #5b59e0;
--ds-color-tone-brand-solid-background-hover: #4742c0;
--ds-color-tone-brand-solid-background-pressed: #353096;
--ds-color-tone-brand-solid-foreground: #ffffff;
--ds-color-tone-brand-subtle-background: #f5f6fe;
--ds-color-tone-brand-subtle-background-hover: #e8ecff;
--ds-color-tone-brand-subtle-background-pressed: #d4daff;
--ds-color-tone-brand-subtle-foreground: #353096;
--ds-color-tone-brand-outline-border: #5b59e0;
--ds-color-tone-brand-outline-foreground: #4742c0;
--ds-color-tone-success-solid-background: #058644;
--ds-color-tone-success-solid-background-hover: #016c35;
--ds-color-tone-success-solid-background-pressed: #005226;
--ds-color-tone-success-solid-foreground: #ffffff;
--ds-color-tone-success-subtle-background: #ebfcef;
--ds-color-tone-success-subtle-background-hover: #d8f6de;
--ds-color-tone-success-subtle-background-pressed: #b5ecc3;
--ds-color-tone-success-subtle-foreground: #005226;
--ds-color-tone-success-outline-border: #058644;
--ds-color-tone-success-outline-foreground: #016c35;
--ds-color-tone-warning-solid-background: #f6b84d;
--ds-color-tone-warning-solid-background-hover: #d99807;
--ds-color-tone-warning-solid-background-pressed: #b67f02;
--ds-color-tone-warning-solid-foreground: #281800;
--ds-color-tone-warning-subtle-background: #fef5e8;
--ds-color-tone-warning-subtle-background-hover: #ffeaca;
--ds-color-tone-warning-subtle-background-pressed: #ffd595;
--ds-color-tone-warning-subtle-foreground: #5b3d00;
--ds-color-tone-warning-outline-border: #946600;
--ds-color-tone-warning-outline-foreground: #5b3d00;
--ds-color-tone-danger-solid-background: #d20322;
--ds-color-tone-danger-solid-background-hover: #aa0119;
--ds-color-tone-danger-solid-background-pressed: #830011;
--ds-color-tone-danger-solid-foreground: #ffffff;
--ds-color-tone-danger-subtle-background: #fff4f3;
--ds-color-tone-danger-subtle-background-hover: #fee7e4;
--ds-color-tone-danger-subtle-background-pressed: #ffcfcb;
--ds-color-tone-danger-subtle-foreground: #830011;
--ds-color-tone-danger-outline-border: #d20322;
--ds-color-tone-danger-outline-foreground: #aa0119;
--ds-color-tone-info-solid-background: #0378ad;
--ds-color-tone-info-solid-background-hover: #03608b;
--ds-color-tone-info-solid-background-pressed: #00496c;
--ds-color-tone-info-solid-foreground: #ffffff;
--ds-color-tone-info-subtle-background: #f0f8fe;
--ds-color-tone-info-subtle-background-hover: #dbf0ff;
--ds-color-tone-info-subtle-background-pressed: #bae3fe;
--ds-color-tone-info-subtle-foreground: #00496c;
--ds-color-tone-info-outline-border: #0378ad;
--ds-color-tone-info-outline-foreground: #03608b;
--ds-elevation-flat-color: #191c21;
--ds-elevation-flat-offset-y: 0px;
--ds-elevation-flat-blur: 0px;
--ds-elevation-flat-opacity: 0;
--ds-elevation-flat-shadow: #191c2100;
--ds-elevation-raised-color: #191c21;
--ds-elevation-raised-offset-y: 1px;
--ds-elevation-raised-blur: 4px;
--ds-elevation-raised-opacity: 0.12;
--ds-elevation-raised-shadow: #191c211f;
--ds-elevation-sticky-color: #191c21;
--ds-elevation-sticky-offset-y: 2px;
--ds-elevation-sticky-blur: 8px;
--ds-elevation-sticky-opacity: 0.14;
--ds-elevation-sticky-shadow: #191c2124;
--ds-elevation-floating-color: #191c21;
--ds-elevation-floating-offset-y: 4px;
--ds-elevation-floating-blur: 12px;
--ds-elevation-floating-opacity: 0.16;
--ds-elevation-floating-shadow: #191c2129;
--ds-elevation-overlay-color: #191c21;
--ds-elevation-overlay-offset-y: 8px;
--ds-elevation-overlay-blur: 24px;
--ds-elevation-overlay-opacity: 0.2;
--ds-elevation-overlay-shadow: #191c2133;
--ds-elevation-flat: none;
--ds-elevation-raised: 0 1px 4px 0 rgba(25, 28, 33, 0.12);
--ds-elevation-sticky: 0 2px 8px 0 rgba(25, 28, 33, 0.14);
--ds-elevation-floating: 0 4px 12px 0 rgba(25, 28, 33, 0.16);
--ds-elevation-overlay: 0 8px 24px 0 rgba(25, 28, 33, 0.2);
}
:root[data-tema="oscuro"], .isla-oscura {
color-scheme: dark;
--ds-color-background-primary: #191c21;
--ds-color-background-secondary: #2b2f36;
--ds-color-background-tertiary: #3f444c;
--ds-color-surface-default: #2b2f36;
--ds-color-surface-raised: #3f444c;
--ds-color-surface-sunken: #191c21;
--ds-color-surface-inverse: #d9dce3;
--ds-color-text-primary: #f4f7fb;
--ds-color-text-secondary: #d9dce3;
--ds-color-text-tertiary: #c0c4cc;
--ds-color-text-disabled: #6a707b;
--ds-color-text-inverse: #191c21;
--ds-color-text-link: #b6bffe;
--ds-color-icon-primary: #eaedf2;
--ds-color-icon-secondary: #a1a6af;
--ds-color-icon-disabled: #6a707b;
--ds-color-icon-inverse: #191c21;
--ds-color-border-subtle: #3f444c;
--ds-color-border-default: #545a64;
--ds-color-border-strong: #a1a6af;
--ds-color-focus-ring: #b6bffe;
--ds-color-disabled-background: #3f444c;
--ds-color-disabled-foreground: #6a707b;
--ds-color-disabled-border: #545a64;
--ds-color-tone-neutral-solid-background: #d9dce3;
--ds-color-tone-neutral-solid-background-hover: #eaedf2;
--ds-color-tone-neutral-solid-background-pressed: #f4f7fb;
--ds-color-tone-neutral-solid-foreground: #191c21;
--ds-color-tone-neutral-subtle-background: #3f444c;
--ds-color-tone-neutral-subtle-background-hover: #545a64;
--ds-color-tone-neutral-subtle-background-pressed: #6a707b;
--ds-color-tone-neutral-subtle-foreground: #f4f7fb;
--ds-color-tone-neutral-outline-border: #858b95;
--ds-color-tone-neutral-outline-foreground: #d9dce3;
--ds-color-tone-brand-solid-background: #929bff;
--ds-color-tone-brand-solid-background-hover: #b6bffe;
--ds-color-tone-brand-solid-background-pressed: #d4daff;
--ds-color-tone-brand-solid-foreground: #141048;
--ds-color-tone-brand-subtle-background: #141048;
--ds-color-tone-brand-subtle-background-hover: #24206e;
--ds-color-tone-brand-subtle-background-pressed: #353096;
--ds-color-tone-brand-subtle-foreground: #d4daff;
--ds-color-tone-brand-outline-border: #929bff;
--ds-color-tone-brand-outline-foreground: #b6bffe;
--ds-color-tone-success-solid-background: #4fc076;
--ds-color-tone-success-solid-background-hover: #86db9d;
--ds-color-tone-success-solid-background-pressed: #b5ecc3;
--ds-color-tone-success-solid-foreground: #00230d;
--ds-color-tone-success-subtle-background: #00230d;
--ds-color-tone-success-subtle-background-hover: #003a19;
--ds-color-tone-success-subtle-background-pressed: #005226;
--ds-color-tone-success-subtle-foreground: #b5ecc3;
--ds-color-tone-success-outline-border: #4fc076;
--ds-color-tone-success-outline-foreground: #86db9d;
--ds-color-tone-warning-solid-background: #f6b84d;
--ds-color-tone-warning-solid-background-hover: #ffd595;
--ds-color-tone-warning-solid-background-pressed: #ffeaca;
--ds-color-tone-warning-solid-foreground: #281800;
--ds-color-tone-warning-subtle-background: #281800;
--ds-color-tone-warning-subtle-background-hover: #402a00;
--ds-color-tone-warning-subtle-background-pressed: #5b3d00;
--ds-color-tone-warning-subtle-foreground: #ffd595;
--ds-color-tone-warning-outline-border: #d99807;
--ds-color-tone-warning-outline-foreground: #f6b84d;
--ds-color-tone-danger-solid-background: #ff756e;
--ds-color-tone-danger-solid-background-hover: #ffaba3;
--ds-color-tone-danger-solid-background-pressed: #ffcfcb;
--ds-color-tone-danger-solid-foreground: #3d0003;
--ds-color-tone-danger-subtle-background: #3d0003;
--ds-color-tone-danger-subtle-background-hover: #5f0009;
--ds-color-tone-danger-subtle-background-pressed: #830011;
--ds-color-tone-danger-subtle-foreground: #ffcfcb;
--ds-color-tone-danger-outline-border: #ff756e;
--ds-color-tone-danger-outline-foreground: #ffaba3;
--ds-color-tone-info-solid-background: #3bb1f3;
--ds-color-tone-info-solid-background-hover: #82ceff;
--ds-color-tone-info-solid-background-pressed: #bae3fe;
--ds-color-tone-info-solid-foreground: #001f31;
--ds-color-tone-info-subtle-background: #001f31;
--ds-color-tone-info-subtle-background-hover: #00334d;
--ds-color-tone-info-subtle-background-pressed: #00496c;
--ds-color-tone-info-subtle-foreground: #bae3fe;
--ds-color-tone-info-outline-border: #3bb1f3;
--ds-color-tone-info-outline-foreground: #82ceff;
--ds-elevation-flat-color: #000000;
--ds-elevation-flat-offset-y: 0px;
--ds-elevation-flat-blur: 0px;
--ds-elevation-flat-opacity: 0;
--ds-elevation-flat-shadow: #00000000;
--ds-elevation-raised-color: #000000;
--ds-elevation-raised-offset-y: 1px;
--ds-elevation-raised-blur: 4px;
--ds-elevation-raised-opacity: 0.35;
--ds-elevation-raised-shadow: #00000059;
--ds-elevation-sticky-color: #000000;
--ds-elevation-sticky-offset-y: 2px;
--ds-elevation-sticky-blur: 8px;
--ds-elevation-sticky-opacity: 0.4;
--ds-elevation-sticky-shadow: #00000066;
--ds-elevation-floating-color: #000000;
--ds-elevation-floating-offset-y: 4px;
--ds-elevation-floating-blur: 12px;
--ds-elevation-floating-opacity: 0.45;
--ds-elevation-floating-shadow: #00000073;
--ds-elevation-overlay-color: #000000;
--ds-elevation-overlay-offset-y: 8px;
--ds-elevation-overlay-blur: 24px;
--ds-elevation-overlay-opacity: 0.5;
--ds-elevation-overlay-shadow: #00000080;
--ds-elevation-flat: none;
--ds-elevation-raised: 0 1px 4px 0 rgba(0, 0, 0, 0.35);
--ds-elevation-sticky: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
--ds-elevation-floating: 0 4px 12px 0 rgba(0, 0, 0, 0.45);
--ds-elevation-overlay: 0 8px 24px 0 rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
:root:not([data-tema]) {
color-scheme: dark;
--ds-color-background-primary: #191c21;
--ds-color-background-secondary: #2b2f36;
--ds-color-background-tertiary: #3f444c;
--ds-color-surface-default: #2b2f36;
--ds-color-surface-raised: #3f444c;
--ds-color-surface-sunken: #191c21;
--ds-color-surface-inverse: #d9dce3;
--ds-color-text-primary: #f4f7fb;
--ds-color-text-secondary: #d9dce3;
--ds-color-text-tertiary: #c0c4cc;
--ds-color-text-disabled: #6a707b;
--ds-color-text-inverse: #191c21;
--ds-color-text-link: #b6bffe;
--ds-color-icon-primary: #eaedf2;
--ds-color-icon-secondary: #a1a6af;
--ds-color-icon-disabled: #6a707b;
--ds-color-icon-inverse: #191c21;
--ds-color-border-subtle: #3f444c;
--ds-color-border-default: #545a64;
--ds-color-border-strong: #a1a6af;
--ds-color-focus-ring: #b6bffe;
--ds-color-disabled-background: #3f444c;
--ds-color-disabled-foreground: #6a707b;
--ds-color-disabled-border: #545a64;
--ds-color-tone-neutral-solid-background: #d9dce3;
--ds-color-tone-neutral-solid-background-hover: #eaedf2;
--ds-color-tone-neutral-solid-background-pressed: #f4f7fb;
--ds-color-tone-neutral-solid-foreground: #191c21;
--ds-color-tone-neutral-subtle-background: #3f444c;
--ds-color-tone-neutral-subtle-background-hover: #545a64;
--ds-color-tone-neutral-subtle-background-pressed: #6a707b;
--ds-color-tone-neutral-subtle-foreground: #f4f7fb;
--ds-color-tone-neutral-outline-border: #858b95;
--ds-color-tone-neutral-outline-foreground: #d9dce3;
--ds-color-tone-brand-solid-background: #929bff;
--ds-color-tone-brand-solid-background-hover: #b6bffe;
--ds-color-tone-brand-solid-background-pressed: #d4daff;
--ds-color-tone-brand-solid-foreground: #141048;
--ds-color-tone-brand-subtle-background: #141048;
--ds-color-tone-brand-subtle-background-hover: #24206e;
--ds-color-tone-brand-subtle-background-pressed: #353096;
--ds-color-tone-brand-subtle-foreground: #d4daff;
--ds-color-tone-brand-outline-border: #929bff;
--ds-color-tone-brand-outline-foreground: #b6bffe;
--ds-color-tone-success-solid-background: #4fc076;
--ds-color-tone-success-solid-background-hover: #86db9d;
--ds-color-tone-success-solid-background-pressed: #b5ecc3;
--ds-color-tone-success-solid-foreground: #00230d;
--ds-color-tone-success-subtle-background: #00230d;
--ds-color-tone-success-subtle-background-hover: #003a19;
--ds-color-tone-success-subtle-background-pressed: #005226;
--ds-color-tone-success-subtle-foreground: #b5ecc3;
--ds-color-tone-success-outline-border: #4fc076;
--ds-color-tone-success-outline-foreground: #86db9d;
--ds-color-tone-warning-solid-background: #f6b84d;
--ds-color-tone-warning-solid-background-hover: #ffd595;
--ds-color-tone-warning-solid-background-pressed: #ffeaca;
--ds-color-tone-warning-solid-foreground: #281800;
--ds-color-tone-warning-subtle-background: #281800;
--ds-color-tone-warning-subtle-background-hover: #402a00;
--ds-color-tone-warning-subtle-background-pressed: #5b3d00;
--ds-color-tone-warning-subtle-foreground: #ffd595;
--ds-color-tone-warning-outline-border: #d99807;
--ds-color-tone-warning-outline-foreground: #f6b84d;
--ds-color-tone-danger-solid-background: #ff756e;
--ds-color-tone-danger-solid-background-hover: #ffaba3;
--ds-color-tone-danger-solid-background-pressed: #ffcfcb;
--ds-color-tone-danger-solid-foreground: #3d0003;
--ds-color-tone-danger-subtle-background: #3d0003;
--ds-color-tone-danger-subtle-background-hover: #5f0009;
--ds-color-tone-danger-subtle-background-pressed: #830011;
--ds-color-tone-danger-subtle-foreground: #ffcfcb;
--ds-color-tone-danger-outline-border: #ff756e;
--ds-color-tone-danger-outline-foreground: #ffaba3;
--ds-color-tone-info-solid-background: #3bb1f3;
--ds-color-tone-info-solid-background-hover: #82ceff;
--ds-color-tone-info-solid-background-pressed: #bae3fe;
--ds-color-tone-info-solid-foreground: #001f31;
--ds-color-tone-info-subtle-background: #001f31;
--ds-color-tone-info-subtle-background-hover: #00334d;
--ds-color-tone-info-subtle-background-pressed: #00496c;
--ds-color-tone-info-subtle-foreground: #bae3fe;
--ds-color-tone-info-outline-border: #3bb1f3;
--ds-color-tone-info-outline-foreground: #82ceff;
--ds-elevation-flat-color: #000000;
--ds-elevation-flat-offset-y: 0px;
--ds-elevation-flat-blur: 0px;
--ds-elevation-flat-opacity: 0;
--ds-elevation-flat-shadow: #00000000;
--ds-elevation-raised-color: #000000;
--ds-elevation-raised-offset-y: 1px;
--ds-elevation-raised-blur: 4px;
--ds-elevation-raised-opacity: 0.35;
--ds-elevation-raised-shadow: #00000059;
--ds-elevation-sticky-color: #000000;
--ds-elevation-sticky-offset-y: 2px;
--ds-elevation-sticky-blur: 8px;
--ds-elevation-sticky-opacity: 0.4;
--ds-elevation-sticky-shadow: #00000066;
--ds-elevation-floating-color: #000000;
--ds-elevation-floating-offset-y: 4px;
--ds-elevation-floating-blur: 12px;
--ds-elevation-floating-opacity: 0.45;
--ds-elevation-floating-shadow: #00000073;
--ds-elevation-overlay-color: #000000;
--ds-elevation-overlay-offset-y: 8px;
--ds-elevation-overlay-blur: 24px;
--ds-elevation-overlay-opacity: 0.5;
--ds-elevation-overlay-shadow: #00000080;
--ds-elevation-flat: none;
--ds-elevation-raised: 0 1px 4px 0 rgba(0, 0, 0, 0.35);
--ds-elevation-sticky: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
--ds-elevation-floating: 0 4px 12px 0 rgba(0, 0, 0, 0.45);
--ds-elevation-overlay: 0 8px 24px 0 rgba(0, 0, 0, 0.5);
}
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--ds-layout-top-bar-height); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--ds-color-background-primary);
color: var(--ds-color-text-primary);
font-family: var(--ds-typography-body-font-family);
font-size: var(--ds-typography-body-font-size);
line-height: var(--ds-typography-body-line-height);
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--ds-color-text-link); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
outline: var(--ds-component-focus-ring-width) solid var(--ds-color-focus-ring);
outline-offset: var(--ds-component-focus-ring-offset);
}
h1, h2, h3, h4 { margin: 0; color: var(--ds-color-text-primary); text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; }
.t-display { font-size: var(--ds-typography-heading-1-font-size); line-height: var(--ds-typography-heading-1-line-height); font-weight: var(--ds-typography-display-font-weight); letter-spacing: -0.01em; }
.t-h2 { font-size: var(--ds-typography-heading-2-font-size); line-height: var(--ds-typography-heading-2-line-height); font-weight: var(--ds-typography-heading-1-font-weight); }
.t-h3 { font-size: var(--ds-typography-heading-4-font-size); line-height: var(--ds-typography-heading-4-line-height); font-weight: var(--ds-typography-heading-3-font-weight); }
.t-lead { font-size: var(--ds-typography-body-large-font-size); line-height: var(--ds-typography-body-large-line-height); color: var(--ds-color-text-secondary); }
.t-small { font-size: var(--ds-typography-body-small-font-size); line-height: var(--ds-typography-body-small-line-height); color: var(--ds-color-text-secondary); }
.t-eyebrow { font-size: var(--ds-typography-label-font-size); line-height: var(--ds-typography-label-line-height); font-weight: var(--ds-typography-label-large-font-weight); color: var(--ds-color-tone-brand-outline-foreground); text-transform: uppercase; letter-spacing: 0.06em; }
@media (min-width: 840px) {
.t-display { font-size: var(--ds-typography-display-font-size); line-height: var(--ds-typography-display-line-height); }
}
.contenedor { width: 100%; max-width: var(--ds-layout-container-max-width); margin-inline: auto; padding-inline: var(--ds-layout-gutter); }
.seccion { padding-block: var(--ds-space-16); }
.seccion--alterna { background: var(--ds-color-background-secondary); }
.seccion__cabecera { display: grid; gap: var(--ds-space-3); max-width: 46rem; margin-bottom: var(--ds-space-10); }
@media (min-width: 840px) { .seccion { padding-block: var(--ds-space-24); } }
.saltar { position: absolute; left: var(--ds-space-4); top: calc(-1 * var(--ds-space-16)); z-index: 20; padding: var(--ds-space-2) var(--ds-space-4); background: var(--ds-color-surface-default); border-radius: var(--ds-radius-md); }
.saltar:focus { top: var(--ds-space-2); }
.barra { position: sticky; top: 0; z-index: 10; background: var(--ds-color-surface-default); border-bottom: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }
.barra__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-4); min-height: var(--ds-layout-top-bar-height); }
.barra__logo img { width: auto; height: 40px; }
.barra__menu { display: none; }
.barra__menu ul { display: flex; align-items: center; gap: var(--ds-space-1); list-style: none; }
.barra__menu a:not(.boton) { display: inline-flex; align-items: center; min-height: var(--ds-size-touch-target-fine); padding-inline: var(--ds-space-3); border-radius: var(--ds-radius-md); color: var(--ds-color-text-secondary); text-decoration: none; font-size: var(--ds-typography-label-font-size); font-weight: var(--ds-typography-label-font-weight); }
.barra__menu a:not(.boton):hover, .barra__menu a[aria-current="page"] { color: var(--ds-color-text-primary); background: var(--ds-color-background-secondary); }
.barra__abrir { display: inline-flex; align-items: center; justify-content: center; width: var(--ds-size-touch-target-coarse); height: var(--ds-size-touch-target-coarse); border: 0; border-radius: var(--ds-radius-md); background: transparent; color: var(--ds-color-icon-primary); cursor: pointer; }
.barra__abrir svg { width: var(--ds-size-icon-md); height: var(--ds-size-icon-md); }
.barra__abrir .icono-cerrar { display: none; }
.barra.abierta .barra__abrir .icono-abrir { display: none; }
.barra.abierta .barra__abrir .icono-cerrar { display: block; }
.barra.abierta .barra__menu { display: block; position: absolute; inset: 100% 0 auto; background: var(--ds-color-surface-default); border-bottom: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); padding: var(--ds-space-2) var(--ds-layout-gutter) var(--ds-space-4); box-shadow: 0 var(--ds-elevation-floating-offset-y) var(--ds-elevation-floating-blur) var(--ds-elevation-floating-shadow); }
.barra.abierta .barra__menu ul { flex-direction: column; align-items: stretch; }
.barra.abierta .barra__menu a { min-height: var(--ds-size-touch-target-coarse); }
@media (min-width: 1024px) {
.barra__menu, .barra.abierta .barra__menu { display: block; position: static; padding: 0; border: 0; box-shadow: none; }
.barra.abierta .barra__menu ul { flex-direction: row; align-items: center; }
.barra__abrir { display: none; }
}
.boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-component-control-gap-md); min-height: var(--ds-component-control-height-lg); padding-inline: var(--ds-component-control-padding-x-lg); border: var(--ds-component-control-border-width) solid transparent; border-radius: var(--ds-component-control-radius); font: inherit; font-size: var(--ds-typography-label-large-font-size); font-weight: var(--ds-typography-label-large-font-weight); line-height: 1; text-decoration: none; cursor: pointer; transition: background-color var(--ds-motion-duration-feedback) var(--ds-motion-easing-standard); }
.boton svg { width: var(--ds-component-control-icon-size-md); height: var(--ds-component-control-icon-size-md); }
.boton--solido { background: var(--ds-color-tone-brand-solid-background); color: var(--ds-color-tone-brand-solid-foreground); }
.boton--solido:hover { background: var(--ds-color-tone-brand-solid-background-hover); }
.boton--solido:active { background: var(--ds-color-tone-brand-solid-background-pressed); }
.boton--contorno { border-width: var(--ds-border-width-thin); background: var(--ds-color-surface-default); color: var(--ds-color-tone-neutral-outline-foreground); border-color: var(--ds-color-tone-neutral-outline-border); }
.boton--contorno:hover { background: var(--ds-color-tone-neutral-subtle-background-hover); }
.boton--chico { min-height: var(--ds-component-control-height-md); padding-inline: var(--ds-component-control-padding-x-md); font-size: var(--ds-typography-label-font-size); }
.boton[aria-busy="true"] { opacity: var(--ds-opacity-disabled); cursor: progress; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); }
.portada { padding-block: var(--ds-space-16) var(--ds-space-12); background: linear-gradient(180deg, var(--ds-color-tone-brand-subtle-background), var(--ds-color-background-primary)); }
.portada__texto { display: grid; gap: var(--ds-space-4); max-width: 50rem; }
.portada .acciones { margin-top: var(--ds-space-2); }
.sectores { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); list-style: none; margin-top: var(--ds-space-4); }
.insignia { display: inline-flex; align-items: center; min-height: var(--ds-space-6); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-pill); background: var(--ds-color-tone-neutral-subtle-background); color: var(--ds-color-tone-neutral-subtle-foreground); font-size: var(--ds-typography-caption-font-size); line-height: var(--ds-typography-caption-line-height); font-weight: var(--ds-typography-caption-font-weight); white-space: nowrap; }
.insignia--marca { background: var(--ds-color-tone-brand-subtle-background); color: var(--ds-color-tone-brand-subtle-foreground); }
.insignia--exito { background: var(--ds-color-tone-success-subtle-background); color: var(--ds-color-tone-success-subtle-foreground); }
.insignia--aviso { background: var(--ds-color-tone-warning-subtle-background); color: var(--ds-color-tone-warning-subtle-foreground); }
.cifras { display: grid; grid-template-columns: repeat(2, 1fr); list-style: none; }
@media (min-width: 840px) { .cifras { grid-template-columns: repeat(4, 1fr); } }
.cifra { display: grid; gap: var(--ds-space-1); padding: var(--ds-space-6) var(--ds-space-4); text-align: center; }
.cifra span { color: var(--ds-color-text-secondary); font-size: var(--ds-typography-body-small-font-size); line-height: var(--ds-typography-body-small-line-height); }
@media (min-width: 840px) { .cifra + .cifra { border-left: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); } }
.cifra strong { font-size: var(--ds-typography-heading-1-font-size); line-height: var(--ds-typography-heading-1-line-height); font-weight: var(--ds-typography-heading-1-font-weight); color: var(--ds-color-tone-brand-outline-foreground); }
.rejilla { display: grid; gap: var(--ds-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); list-style: none; }
.rejilla--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }
.tarjeta { display: flex; flex-direction: column; gap: var(--ds-space-3); padding: var(--ds-space-6); border-radius: var(--ds-radius-surface); background: var(--ds-color-surface-default); border: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); box-shadow: 0 var(--ds-elevation-raised-offset-y) var(--ds-elevation-raised-blur) var(--ds-elevation-raised-shadow); }
.tarjeta p { color: var(--ds-color-text-secondary); }
.tarjeta .etiquetas { margin-top: auto; padding-top: var(--ds-space-2); }
.etiquetas { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); list-style: none; }
.producto { position: relative; }
.producto__cabecera { display: flex; align-items: center; gap: var(--ds-space-4); }
.producto__icono { flex: none; width: var(--ds-space-12); height: var(--ds-space-12); border-radius: var(--ds-radius-lg); overflow: hidden; }
.producto__icono img { width: 100%; height: 100%; object-fit: cover; }
.monograma { display: grid; place-items: center; background: var(--ds-color-tone-success-solid-background); color: var(--ds-color-tone-success-solid-foreground); font-weight: var(--ds-typography-display-font-weight); font-size: var(--ds-typography-heading-3-font-size); }
.producto__pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); margin-top: auto; padding-top: var(--ds-space-2); }
.producto__enlace { font-weight: var(--ds-typography-label-large-font-weight); text-decoration: none; }
.producto__enlace::after { content: ""; position: absolute; inset: 0; border-radius: var(--ds-radius-surface); }
.producto__enlace:hover { text-decoration: underline; }
.producto:has(.producto__enlace:focus-visible) { outline: var(--ds-component-focus-ring-width) solid var(--ds-color-focus-ring); outline-offset: var(--ds-component-focus-ring-offset); }
.producto__enlace:focus-visible { outline: none; }
.producto--destacado { border-color: var(--ds-color-tone-brand-outline-border); }
@media (min-width: 840px) {
.producto--destacado { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--ds-space-8); align-items: center; }
.producto--destacado .producto__texto { display: flex; flex-direction: column; gap: var(--ds-space-3); }
}
.captura { border-radius: var(--ds-radius-lg); border: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); box-shadow: 0 var(--ds-elevation-floating-offset-y) var(--ds-elevation-floating-blur) var(--ds-elevation-floating-shadow); }
.lista-check { display: grid; gap: var(--ds-space-2); list-style: none; }
.lista-check li { display: grid; grid-template-columns: var(--ds-size-icon-sm) 1fr; gap: var(--ds-space-2); align-items: start; }
.lista-check svg { width: var(--ds-size-icon-sm); height: var(--ds-size-icon-sm); margin-top: 0.2em; color: var(--ds-color-tone-success-outline-foreground); }
.pasos { counter-reset: paso; }
.paso::before { counter-increment: paso; content: "0" counter(paso); font-size: var(--ds-typography-heading-3-font-size); font-weight: var(--ds-typography-display-font-weight); color: var(--ds-color-tone-brand-outline-foreground); }
.pila { display: grid; gap: var(--ds-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.pila h3 { margin-bottom: var(--ds-space-3); }
.caso ul { display: grid; gap: var(--ds-space-2); padding-left: var(--ds-space-4); color: var(--ds-color-text-secondary); }
.nota { margin-top: var(--ds-space-6); max-width: 46rem; }
.cita blockquote { margin: 0; font-size: var(--ds-typography-body-large-font-size); line-height: var(--ds-typography-body-large-line-height); color: var(--ds-color-text-primary); }
.cita figcaption { color: var(--ds-color-text-secondary); font-size: var(--ds-typography-body-small-font-size); }
.contacto { display: grid; gap: var(--ds-space-10); }
@media (min-width: 840px) { .contacto { grid-template-columns: 1fr 1.3fr; } }
.datos { display: grid; gap: var(--ds-space-4); list-style: none; }
.datos h3 { font-size: var(--ds-typography-label-font-size); line-height: var(--ds-typography-label-line-height); color: var(--ds-color-text-secondary); font-weight: var(--ds-typography-label-font-weight); }
.formulario { display: grid; gap: var(--ds-space-4); }
.formulario .fila { display: grid; gap: var(--ds-space-4); }
@media (min-width: 600px) { .formulario .fila { grid-template-columns: 1fr 1fr; } }
.campo { display: grid; gap: var(--ds-space-1); }
.campo label { font-size: var(--ds-typography-label-font-size); line-height: var(--ds-typography-label-line-height); font-weight: var(--ds-typography-label-font-weight); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: var(--ds-component-control-height-lg); padding: var(--ds-space-2) var(--ds-space-3); border: var(--ds-border-width-thin) solid var(--ds-color-border-default); border-radius: var(--ds-component-control-radius); background: var(--ds-color-surface-default); color: var(--ds-color-text-primary); font: inherit; }
.campo textarea { min-height: 8rem; resize: vertical; }
.campo--trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.aviso { padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-md); }
.aviso[hidden] { display: none; }
.aviso--exito { background: var(--ds-color-tone-success-subtle-background); color: var(--ds-color-tone-success-subtle-foreground); }
.aviso--error { background: var(--ds-color-tone-danger-subtle-background); color: var(--ds-color-tone-danger-subtle-foreground); }
.llamada { display: grid; gap: var(--ds-space-4); justify-items: start; padding: var(--ds-space-10) var(--ds-space-8); border-radius: var(--ds-radius-xl); background: var(--ds-color-surface-inverse); color: var(--ds-color-text-inverse); }
.llamada h2, .llamada p { color: var(--ds-color-text-inverse); }
.texto-legal { max-width: 46rem; display: grid; gap: var(--ds-space-4); }
.texto-legal h2 { margin-top: var(--ds-space-6); font-size: var(--ds-typography-heading-3-font-size); line-height: var(--ds-typography-heading-3-line-height); }
.texto-legal ul { display: grid; gap: var(--ds-space-2); padding-left: var(--ds-space-4); }
.indice { display: grid; gap: var(--ds-space-1); padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-4) var(--ds-space-8); border-radius: var(--ds-radius-md); background: var(--ds-color-background-secondary); }
details { border-bottom: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); padding-block: var(--ds-space-3); }
summary { cursor: pointer; font-weight: var(--ds-typography-label-large-font-weight); }
details p { margin-top: var(--ds-space-2); color: var(--ds-color-text-secondary); }
.migas { margin-bottom: var(--ds-space-4); }
.migas ol { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); list-style: none; padding: 0; margin: 0; font-size: var(--ds-typography-body-small-font-size); color: var(--ds-color-text-secondary); }
.migas li + li::before { content: "/"; margin-right: var(--ds-space-2); color: var(--ds-color-text-tertiary); }
.pie { padding-block: var(--ds-space-12) var(--ds-space-8); background: var(--ds-color-background-secondary); border-top: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }
.pie__columnas { display: grid; gap: var(--ds-space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.pie h2 { font-size: var(--ds-typography-label-font-size); line-height: var(--ds-typography-label-line-height); margin-bottom: var(--ds-space-3); }
.pie ul { display: grid; gap: var(--ds-space-2); list-style: none; }
.pie a { color: var(--ds-color-text-secondary); text-decoration: none; }
.pie a:hover { color: var(--ds-color-text-primary); text-decoration: underline; }
.pie__legal { margin-top: var(--ds-space-10); padding-top: var(--ds-space-6); border-top: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }
.pie__logo img { width: auto; height: 40px; margin-bottom: var(--ds-space-3); }
.icono-externo { display: inline-block; width: 0.9em; height: 0.9em; vertical-align: -0.1em; margin-left: 0.15em; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (min-width: 600px) { .rejilla--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rejilla--4 { grid-template-columns: repeat(4, 1fr); } }
.tarjeta--ancha { grid-column: 1 / -1; }
.angosto { max-width: 52rem; }
.seccion--compacta { padding-block: var(--ds-space-8); }
.seccion__cabecera--centro { margin-inline: auto; text-align: center; justify-items: center; }
.acciones--centro { justify-content: center; margin-top: var(--ds-space-10); }
.rejilla--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
@media (min-width: 1024px) { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } }
.t-display--medio { font-size: var(--ds-typography-heading-1-font-size); line-height: var(--ds-typography-heading-1-line-height); }
.resalta { color: var(--ds-color-tone-brand-outline-foreground); }
.enlace-flecha { display: inline-flex; align-items: center; gap: var(--ds-space-1); font-weight: var(--ds-typography-label-large-font-weight); text-decoration: none; }
.enlace-flecha svg { width: var(--ds-size-icon-sm); height: var(--ds-size-icon-sm); transition: transform var(--ds-motion-duration-transition) var(--ds-motion-easing-standard); }
.enlace-flecha:hover svg { transform: translateX(var(--ds-space-1)); }
.heroe { position: relative; overflow: hidden; padding-top: var(--ds-space-12); background: linear-gradient(180deg, var(--ds-color-background-secondary), var(--ds-color-background-primary)); border-bottom: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }
.heroe > .contenedor { position: relative; }
.heroe__rejilla { display: grid; gap: var(--ds-space-10); align-items: center; padding-bottom: var(--ds-space-12); }
@media (min-width: 1024px) { .heroe__rejilla { grid-template-columns: 1fr 1.15fr; gap: var(--ds-space-12); } }
.heroe__texto { display: grid; gap: var(--ds-space-4); align-content: start; }
.heroe__pruebas { display: flex; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-4); list-style: none; color: var(--ds-color-text-secondary); font-size: var(--ds-typography-body-small-font-size); }
.heroe__pruebas li { display: inline-flex; align-items: center; gap: var(--ds-space-1); }
.heroe__pruebas svg { width: var(--ds-size-icon-sm); height: var(--ds-size-icon-sm); color: var(--ds-color-tone-success-outline-foreground); }
.heroe__visual { position: relative; padding-bottom: var(--ds-space-6); }
.heroe--inicio .heroe__rejilla { padding-block: var(--ds-space-6) var(--ds-space-16); }
.heroe--inicio .heroe__visual { padding-inline: var(--ds-space-6); }
.heroe--simple { padding-bottom: var(--ds-space-10); }
.heroe--simple .heroe__texto { max-width: 46rem; }
.navegador { margin: 0; border-radius: var(--ds-radius-lg); overflow: hidden; background: var(--ds-color-surface-default); border: var(--ds-border-width-thin) solid var(--ds-color-border-subtle);
box-shadow: 0 var(--ds-elevation-overlay-offset-y) var(--ds-elevation-overlay-blur) var(--ds-elevation-overlay-shadow); }
.navegador__barra { display: flex; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-3); background: var(--ds-color-background-secondary); border-bottom: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }
.navegador__barra > span:not(.navegador__url) { width: var(--ds-space-3); height: var(--ds-space-3); border-radius: var(--ds-radius-full); background: var(--ds-color-border-default); }
.navegador__url { margin-left: var(--ds-space-3); padding: 0 var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-color-surface-default); color: var(--ds-color-text-tertiary); font-size: var(--ds-typography-caption-font-size); line-height: var(--ds-typography-caption-line-height); }
.navegador__pantalla img, .navegador__pantalla video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; background: var(--ds-color-background-secondary); }
.telefono { margin: 0; width: 34%; max-width: 12rem; padding: var(--ds-space-2); border-radius: var(--ds-radius-xl); background: var(--ds-color-surface-inverse);
box-shadow: 0 var(--ds-elevation-overlay-offset-y) var(--ds-elevation-overlay-blur) var(--ds-elevation-overlay-shadow); }
.telefono__pantalla { border-radius: var(--ds-radius-lg); overflow: hidden; background: var(--ds-color-surface-default); }
.telefono__pantalla img { width: 100%; height: auto; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; }
.telefono--heroe { position: absolute; right: calc(-1 * var(--ds-space-2)); bottom: calc(-1 * var(--ds-space-6)); }
@media (max-width: 599px) { .telefono--heroe { width: 30%; } }
.chip { position: absolute; display: grid; padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-md); background: var(--ds-color-surface-default); border: var(--ds-border-width-thin) solid var(--ds-color-border-subtle);
box-shadow: 0 var(--ds-elevation-floating-offset-y) var(--ds-elevation-floating-blur) var(--ds-elevation-floating-shadow); font-size: var(--ds-typography-caption-font-size); line-height: var(--ds-typography-caption-line-height); color: var(--ds-color-text-secondary); }
.chip strong { font-size: var(--ds-typography-heading-4-font-size); line-height: var(--ds-typography-heading-4-line-height); color: var(--ds-color-tone-success-outline-foreground); }
.chip--a { left: calc(-1 * var(--ds-space-4)); top: 38%; }
.chip--b { left: 22%; bottom: calc(-1 * var(--ds-space-2)); }
@media (max-width: 839px) { .chip { display: none; } }
.marquesina { position: relative; display: flex; overflow: hidden; gap: var(--ds-space-8); padding-block: var(--ds-space-4); border-block: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); background: var(--ds-color-surface-default);
mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
.marquesina__pista { flex: none; display: flex; gap: var(--ds-space-8); list-style: none; padding-block: var(--ds-space-4); min-width: 100%; justify-content: space-around; }
.marquesina__pista li { white-space: nowrap; font-weight: var(--ds-typography-label-large-font-weight); color: var(--ds-color-text-secondary); }
.pestanas__lista { display: flex; gap: var(--ds-space-2); overflow-x: auto; padding-bottom: var(--ds-space-2); margin-bottom: var(--ds-space-6); scrollbar-width: thin; }
.pestanas__lista button { flex: none; min-height: var(--ds-size-touch-target-coarse); padding-inline: var(--ds-space-4); border: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-pill); background: var(--ds-color-surface-default); color: var(--ds-color-text-secondary); font: inherit; font-weight: var(--ds-typography-label-large-font-weight); cursor: pointer;
transition: background-color var(--ds-motion-duration-feedback) var(--ds-motion-easing-standard), color var(--ds-motion-duration-feedback) var(--ds-motion-easing-standard); }
.pestanas__lista button:hover { color: var(--ds-color-text-primary); background: var(--ds-color-background-secondary); }
.pestanas__lista button[aria-selected="true"] { background: var(--ds-color-tone-brand-solid-background); border-color: var(--ds-color-tone-brand-solid-background); color: var(--ds-color-tone-brand-solid-foreground); }
.pestana { display: grid; gap: var(--ds-space-8); align-items: center; }
.pestana + .pestana { margin-top: var(--ds-space-12); }
.js .pestana + .pestana { margin-top: 0; }
.pestana[hidden] { display: none; }
@media (min-width: 1024px) { .pestana { grid-template-columns: 1fr 1.4fr; } }
.pestana__texto { display: grid; gap: var(--ds-space-4); }
.pestana__texto > p { color: var(--ds-color-text-secondary); }
.fila-video { display: grid; gap: var(--ds-space-8); align-items: center; }
.fila-video + .fila-video { margin-top: var(--ds-space-16); }
.fila-video__texto { display: grid; gap: var(--ds-space-3); }
@media (min-width: 1024px) {
.fila-video { grid-template-columns: 1fr 1.6fr; gap: var(--ds-space-12); }
.fila-video--invertida { grid-template-columns: 1.6fr 1fr; }
.fila-video--invertida .fila-video__texto { order: 2; }
}
.tarjeta--plana { box-shadow: none; background: var(--ds-color-background-secondary); border-color: transparent; }
.servicio, .solucion, .familia, .producto { transition: transform var(--ds-motion-duration-transition) var(--ds-motion-easing-standard), box-shadow var(--ds-motion-duration-transition) var(--ds-motion-easing-standard), border-color var(--ds-motion-duration-transition) var(--ds-motion-easing-standard); }
.servicio:hover, .solucion:hover, .familia:hover, .producto:hover { transform: translateY(calc(-1 * var(--ds-space-1))); border-color: var(--ds-color-tone-brand-outline-border); box-shadow: 0 var(--ds-elevation-floating-offset-y) var(--ds-elevation-floating-blur) var(--ds-elevation-floating-shadow); }
.solucion, .familia { position: relative; }
.solucion .producto__enlace, .familia .producto__enlace { margin-top: auto; }
.familia { padding: 0; overflow: hidden; }
.familia__banner { width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; }
.familia__cuerpo { display: flex; flex-direction: column; gap: var(--ds-space-3); padding: var(--ds-space-6); flex: 1; }
.familia__fila { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-space-2); }
.banner-producto { width: 100%; border-radius: var(--ds-radius-xl); box-shadow: 0 var(--ds-elevation-overlay-offset-y) var(--ds-elevation-overlay-blur) var(--ds-elevation-overlay-shadow); }
.destacado { display: grid; gap: var(--ds-space-8); align-items: center; }
.destacado > div { display: grid; gap: var(--ds-space-4); justify-items: start; }
@media (min-width: 1024px) { .destacado { grid-template-columns: 1fr 1.3fr; } }
.linea-tiempo { display: grid; gap: var(--ds-space-6); list-style: none; padding: 0; counter-reset: paso; }
@media (min-width: 840px) { .linea-tiempo { grid-template-columns: repeat(4, 1fr); } }
.linea-tiempo .paso { position: relative; display: grid; align-content: start; gap: var(--ds-space-2); padding-top: var(--ds-space-10); border-top: var(--ds-border-width-thick) solid var(--ds-color-tone-brand-subtle-background-pressed); }
.linea-tiempo .paso::before { position: absolute; top: var(--ds-space-3); left: 0; font-size: var(--ds-typography-label-large-font-size); }
.linea-tiempo .paso p { color: var(--ds-color-text-secondary); }
.nosotros { display: grid; gap: var(--ds-space-6); }
@media (min-width: 1024px) { .nosotros { grid-template-columns: 1fr 1.4fr; gap: var(--ds-space-12); } }
.nosotros > div { display: grid; gap: var(--ds-space-3); align-content: start; }
.preguntas details { padding-block: var(--ds-space-4); }
.preguntas summary { list-style: none; display: flex; justify-content: space-between; gap: var(--ds-space-4); font-size: var(--ds-typography-body-large-font-size); }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; flex: none; color: var(--ds-color-tone-brand-outline-foreground); font-size: var(--ds-typography-heading-4-font-size); transition: transform var(--ds-motion-duration-transition) var(--ds-motion-easing-standard); }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.llamada { background: linear-gradient(135deg, var(--ds-color-tone-brand-solid-background-pressed), var(--ds-color-tone-brand-solid-background)); }
.llamada .t-lead { color: var(--ds-color-tone-brand-solid-foreground); }
.boton--claro { background: var(--ds-color-surface-default); color: var(--ds-color-tone-brand-outline-foreground); }
.boton--claro:hover { background: var(--ds-color-tone-brand-subtle-background); }
.boton--contorno-claro { border-width: var(--ds-border-width-thin); border-color: var(--ds-color-tone-brand-solid-foreground); color: var(--ds-color-tone-brand-solid-foreground); background: transparent; }
.boton--contorno-claro:hover { background: var(--ds-color-tone-brand-solid-background-hover); }
.bloque { display: grid; gap: var(--ds-space-8); align-items: center; }
.bloque + .bloque { margin-top: var(--ds-space-16); }
@media (min-width: 1024px) {
.bloque { grid-template-columns: 1fr 1.2fr; gap: var(--ds-space-12); }
.bloque--invertido > :first-child { order: 2; }
.bloque--solo { grid-template-columns: minmax(0, 46rem); }
}
.bloque__texto { display: grid; gap: var(--ds-space-4); }
.prosa { display: grid; gap: var(--ds-space-3); color: var(--ds-color-text-secondary); font-size: var(--ds-typography-body-large-font-size); line-height: var(--ds-typography-body-large-line-height); }
.prosa ol, .prosa ul { display: grid; gap: var(--ds-space-2); padding-left: var(--ds-space-6); }
@media (prefers-reduced-motion: no-preference) {
.js .aparece { transition: transform calc(var(--ds-motion-duration-enter) * 2) var(--ds-motion-easing-enter); transition-delay: var(--retraso, 0ms); }
.js .aparece:not(.visible):not(.heroe .aparece):not(.heroe) { transform: translateY(var(--ds-space-4)); }
.marquesina__pista { animation: desliza calc(var(--ds-motion-duration-indeterminate) * 40) linear infinite; }
.marquesina:hover .marquesina__pista { animation-play-state: paused; }
.telefono--heroe { animation: flota calc(var(--ds-motion-duration-indeterminate) * 3) var(--ds-motion-easing-standard) infinite alternate; }
.js .pestana:not([hidden]) { animation: entra var(--ds-motion-duration-enter) var(--ds-motion-easing-enter); }
}
@media (prefers-reduced-motion: reduce) { .marquesina__pista { flex-wrap: wrap; justify-content: center; } .marquesina__pista[aria-hidden] { display: none; } }
@keyframes desliza { to { transform: translateX(calc(-100% - var(--ds-space-8))); } }
@keyframes flota { to { transform: translateY(calc(-1 * var(--ds-space-3))); } }
@keyframes entra { from { transform: translateY(var(--ds-space-2)); } }
.franja { background: var(--ds-color-surface-inverse); color: var(--ds-color-text-inverse); font-size: var(--ds-typography-caption-font-size); line-height: var(--ds-typography-caption-line-height); }
.franja__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-1) var(--ds-space-6); padding-block: var(--ds-space-2); }
.franja ul { display: flex; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-4); list-style: none; }
.franja a { color: var(--ds-color-text-inverse); text-decoration: none; }
.franja a:hover { text-decoration: underline; }
@media (max-width: 839px) { .franja p, .franja li:last-child { display: none; } .franja__fila { justify-content: center; } }
.marca { display: inline-flex; align-items: center; gap: var(--ds-space-3); text-decoration: none; color: var(--ds-color-text-primary); }
.marca img { width: auto; height: var(--ds-space-10); }
.marca__texto { display: grid; line-height: var(--ds-typography-label-line-height); }
.marca__texto strong { font-size: var(--ds-typography-heading-4-font-size); line-height: var(--ds-typography-heading-4-line-height); font-weight: var(--ds-typography-heading-1-font-weight); letter-spacing: var(--ds-typography-heading-2-letter-spacing); }
.marca__texto span { font-size: var(--ds-typography-caption-font-size); line-height: var(--ds-typography-caption-line-height); color: var(--ds-color-text-secondary); }
.barra__menu a:not(.boton) { font-weight: var(--ds-typography-label-large-font-weight); }
.banda-cifras { background: var(--ds-color-surface-default); border-bottom: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }
.banda-cifras .cifras { margin: 0; }
@media (min-width: 1024px) { .heroe--inicio .heroe__rejilla { grid-template-columns: 1.15fr 1fr; } }
.heroe--inicio .t-display, .heroe--producto .t-display { font-size: var(--ds-typography-heading-1-font-size); line-height: var(--ds-typography-heading-1-line-height); letter-spacing: var(--ds-typography-display-letter-spacing); }
.seccion__cabecera .t-h2 { font-size: var(--ds-typography-heading-1-font-size); line-height: var(--ds-typography-heading-1-line-height); letter-spacing: var(--ds-typography-heading-1-letter-spacing); }
@media (max-width: 599px) { .seccion__cabecera .t-h2 { font-size: var(--ds-typography-heading-2-font-size); line-height: var(--ds-typography-heading-2-line-height); } }
.telefono--izquierda { right: auto; left: calc(-1 * var(--ds-space-2)); bottom: calc(-1 * var(--ds-space-10)); width: 28%; }
@media (max-width: 599px) { .telefono--izquierda { display: none; } }
.destacado { padding: var(--ds-space-8); margin-bottom: var(--ds-space-6); border-radius: var(--ds-radius-xl); background: var(--ds-color-background-secondary); border: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }
.destacado__texto { display: grid; gap: var(--ds-space-4); justify-items: start; }
.destacado__texto .familia__fila { width: 100%; }
@media (max-width: 599px) { .destacado { padding: var(--ds-space-4); } }
.vitrinas { margin-top: var(--ds-space-6); }
.vitrina { padding: 0; overflow: hidden; position: relative; }
.vitrina__escena { display: grid; place-items: center; padding: var(--ds-space-8) var(--ds-space-6) 0; background: var(--ds-color-tone-neutral-subtle-background); overflow: hidden; }
.vitrina__escena--heimuva { background: var(--ds-color-tone-success-subtle-background); }
.vitrina__escena--trainingsoft { background: var(--ds-color-tone-info-subtle-background); }
.vitrina__escena--rekuento { background: var(--ds-color-tone-brand-subtle-background); }
.vitrina__escena--yumilla { background: var(--ds-color-tone-warning-subtle-background); }
.vitrina__cuerpo { display: flex; flex-direction: column; gap: var(--ds-space-3); padding: var(--ds-space-6); flex: 1; }
.vitrina .producto__enlace { margin-top: auto; }
.vitrina__escena--heroe { padding: var(--ds-space-8) var(--ds-space-4) 0; border-radius: var(--ds-radius-xl); }
.telefonos { display: flex; justify-content: center; align-items: flex-end; gap: var(--ds-space-4); width: 100%; }
.telefonos .telefono { width: 42%; max-width: 13rem; border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0; padding-bottom: 0; }
.telefonos .telefono__pantalla { border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0; }
.telefonos .telefono__pantalla img { aspect-ratio: 9 / 14; }
.telefonos .telefono:nth-child(2) { margin-bottom: calc(-1 * var(--ds-space-6)); }
.telefonos--3 .telefono { width: 31%; }
.insignia--info { background: var(--ds-color-tone-info-subtle-background); color: var(--ds-color-tone-info-subtle-foreground); }
.galeria { display: grid; gap: var(--ds-space-6); grid-template-columns: repeat(2, 1fr); list-style: none; }
@media (min-width: 840px) { .galeria { grid-template-columns: repeat(4, 1fr); } }
.galeria li { display: grid; gap: var(--ds-space-3); justify-items: center; text-align: center; }
.galeria .telefono { width: 100%; max-width: 14rem; }
.galeria-escritorio { margin-bottom: var(--ds-space-10); }
.galeria-escritorio > div { display: grid; gap: var(--ds-space-3); }
.servicio { position: relative; }
.servicio__numero { font-size: var(--ds-typography-label-large-font-size); font-weight: var(--ds-typography-display-font-weight); color: var(--ds-color-tone-brand-outline-foreground); }
.servicio__pila { margin-top: auto; padding-top: var(--ds-space-3); border-top: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); font-size: var(--ds-typography-caption-font-size); line-height: var(--ds-typography-caption-line-height); color: var(--ds-color-text-tertiary); }
.tarjeta .servicio__pila { color: var(--ds-color-text-tertiary); }
.empresa { display: grid; gap: var(--ds-space-10); align-items: start; }
@media (min-width: 1024px) { .empresa { grid-template-columns: 1.3fr 1fr; gap: var(--ds-space-12); } }
.empresa__texto { display: grid; gap: var(--ds-space-4); }
.mv { margin-block: var(--ds-space-2); }
.mv .tarjeta--plana { background: var(--ds-color-surface-default); border-color: var(--ds-color-border-subtle); }
.ficha { gap: var(--ds-space-4); }
.ficha dl { display: grid; margin: 0; }
.ficha dl > div { display: grid; gap: var(--ds-space-1); padding-block: var(--ds-space-3); border-top: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }
.ficha dt { font-size: var(--ds-typography-caption-font-size); line-height: var(--ds-typography-caption-line-height); color: var(--ds-color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
.ficha dd { margin: 0; color: var(--ds-color-text-primary); font-weight: var(--ds-typography-label-large-font-weight); }
.pie { background: var(--ds-color-surface-inverse); color: var(--ds-color-text-inverse); border-top: 0; }
.pie h2 { color: var(--ds-color-text-inverse); }
.pie a, .pie p, .pie dd, .pie li { color: var(--ds-color-text-inverse); }
.pie a { opacity: 0.85; }
.pie a:hover { color: var(--ds-color-text-inverse); opacity: 1; }
.pie__columnas { grid-template-columns: 1fr; }
@media (min-width: 840px) { .pie__columnas { grid-template-columns: 1.6fr repeat(4, 1fr); } }
.pie__empresa { display: grid; gap: var(--ds-space-4); align-content: start; }
.pie__empresa > p { opacity: 0.85; font-size: var(--ds-typography-body-small-font-size); line-height: var(--ds-typography-body-small-line-height); }
.marca--pie { color: var(--ds-color-text-inverse); }
.marca--pie .marca__texto span { color: var(--ds-color-text-inverse); opacity: 0.75; }
.pie__datos { display: grid; gap: var(--ds-space-2); margin: 0; font-size: var(--ds-typography-body-small-font-size); line-height: var(--ds-typography-body-small-line-height); }
.pie__datos dt { opacity: 0.65; font-size: var(--ds-typography-caption-font-size); }
.pie__datos dd { margin: 0; }
.pie__redes { display: flex !important; flex-wrap: wrap; gap: var(--ds-space-4); }
.pie__nota { opacity: 0.65; font-size: var(--ds-typography-caption-font-size); }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ds-space-3); border-top-color: var(--ds-color-tone-neutral-solid-background-hover); font-size: var(--ds-typography-body-small-font-size); }
.pie__legal ul { display: flex; flex-wrap: wrap; gap: var(--ds-space-4); }
.familia__fila { flex-wrap: wrap; }
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
body::before { content: ""; position: fixed; inset: 0 0 auto; z-index: 30; height: var(--ds-border-width-thick); transform-origin: 0 50%; background: linear-gradient(90deg, var(--ds-color-tone-brand-solid-background), var(--ds-color-tone-info-solid-background)); animation: progreso linear both; animation-timeline: scroll(root); }
}
}
@keyframes progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.barra { background: color-mix(in srgb, var(--ds-color-surface-default) 82%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(var(--ds-space-4)); backdrop-filter: saturate(1.6) blur(var(--ds-space-4)); }
.heroe--futuro { isolation: isolate; background: var(--ds-color-background-primary); }
.heroe--futuro > .contenedor { z-index: 1; }
.aurora { position: absolute; inset: -30% -10% auto; height: 160%; z-index: 0; pointer-events: none;
background:
radial-gradient(38% 42% at 12% 22%, color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 26%, transparent), transparent 70%),
radial-gradient(34% 40% at 88% 12%, color-mix(in srgb, var(--ds-color-tone-info-solid-background) 24%, transparent), transparent 70%),
radial-gradient(30% 36% at 62% 78%, color-mix(in srgb, var(--ds-color-tone-success-solid-background) 14%, transparent), transparent 70%);
filter: blur(var(--ds-space-10)); }
.malla { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.7;
background-image: linear-gradient(var(--ds-color-border-subtle) var(--ds-border-width-thin), transparent var(--ds-border-width-thin)), linear-gradient(90deg, var(--ds-color-border-subtle) var(--ds-border-width-thin), transparent var(--ds-border-width-thin));
background-size: var(--ds-space-12) var(--ds-space-12);
-webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 25%, var(--ds-color-text-primary) 25%, transparent 75%); mask-image: radial-gradient(ellipse 75% 65% at 50% 25%, var(--ds-color-text-primary) 25%, transparent 75%); }
.heroe--futuro .heroe__texto { gap: var(--ds-space-4); }
.heroe--futuro .t-display { letter-spacing: var(--ds-typography-display-letter-spacing); }
@media (min-width: 840px) { .heroe--futuro .t-display { font-size: var(--ds-typography-display-font-size); line-height: var(--ds-typography-display-line-height); } }
.insignia-heroe { justify-self: start; gap: var(--ds-space-2); min-height: var(--ds-space-8); padding-inline: var(--ds-space-3); border: var(--ds-border-width-thin) solid var(--ds-color-tone-brand-outline-foreground); white-space: normal; }
.insignia-heroe svg { width: var(--ds-size-icon-sm); height: var(--ds-size-icon-sm); flex: none; }
.degradado { background: linear-gradient(100deg, var(--ds-color-tone-brand-solid-background) 10%, var(--ds-color-tone-info-solid-background) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vidrio-claro { background: color-mix(in srgb, var(--ds-color-surface-default) 74%, transparent); border: var(--ds-border-width-thin) solid color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 18%, var(--ds-color-border-subtle)); -webkit-backdrop-filter: blur(var(--ds-space-3)); backdrop-filter: blur(var(--ds-space-3)); box-shadow: 0 var(--ds-elevation-floating-offset-y) var(--ds-elevation-floating-blur) var(--ds-elevation-floating-shadow); }
.ficha-flotante { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-pill); font-size: var(--ds-typography-label-font-size); font-weight: var(--ds-typography-label-large-font-weight); color: var(--ds-color-text-primary); white-space: nowrap; }
.ficha-flotante svg { width: var(--ds-size-icon-sm); height: var(--ds-size-icon-sm); color: var(--ds-color-tone-success-outline-foreground); }
.ficha-flotante--a { top: calc(-1 * var(--ds-space-4)); left: 0; }
.ficha-flotante--b { bottom: var(--ds-space-12); left: calc(-1 * var(--ds-space-2)); }
.punto { width: var(--ds-space-2); height: var(--ds-space-2); border-radius: var(--ds-radius-full); background: var(--ds-color-tone-success-solid-background); box-shadow: 0 0 0 var(--ds-space-1) color-mix(in srgb, var(--ds-color-tone-success-solid-background) 25%, transparent); }
@media (max-width: 599px) { .ficha-flotante--b { display: none; } }
.banda-ia { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--ds-space-16); background: var(--ds-color-surface-sunken); color: var(--ds-color-text-primary); }
@media (min-width: 840px) { .banda-ia { padding-block: var(--ds-space-24); } }
.banda-ia::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
radial-gradient(45% 60% at 85% 0%, color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 45%, transparent), transparent 70%),
radial-gradient(40% 55% at 0% 100%, color-mix(in srgb, var(--ds-color-tone-info-solid-background) 35%, transparent), transparent 70%); }
.banda-ia h2, .banda-ia h3, .banda-ia .t-lead, .banda-ia p { color: var(--ds-color-text-primary); }
.banda-ia .t-lead, .banda-ia p { color: color-mix(in srgb, var(--ds-color-text-primary) 78%, transparent); }
.banda-ia .t-eyebrow { color: var(--ds-color-tone-info-solid-background); }
.banda-ia .degradado { background-image: linear-gradient(100deg, var(--ds-color-tone-info-solid-background), var(--ds-color-tone-brand-outline-foreground)); }
.banda-ia .acciones { margin-top: var(--ds-space-10); }
.banda-ia .boton--contorno-claro { border-color: color-mix(in srgb, var(--ds-color-text-primary) 40%, transparent); color: var(--ds-color-text-primary); }
.banda-ia .boton--contorno-claro:hover { background: color-mix(in srgb, var(--ds-color-text-primary) 10%, transparent); }
.circuito { position: absolute; top: 0; right: 0; z-index: -1; width: min(60%, 44rem); height: auto; opacity: 0.55; fill: none; stroke: color-mix(in srgb, var(--ds-color-text-primary) 18%, transparent); stroke-width: 1.5; }
.circuito circle { fill: var(--ds-color-tone-info-solid-background); stroke: none; opacity: 0.7; }
.circuito__pulso { stroke: var(--ds-color-tone-info-solid-background); stroke-dasharray: 24 400; stroke-dashoffset: 424; opacity: 0; }
@media (max-width: 839px) { .circuito { width: 100%; opacity: 0.3; } }
.ciclo { display: grid; gap: var(--ds-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); list-style: none; padding: 0; margin: 0; }
.ciclo--resumido { grid-template-columns: 1fr; }
@media (min-width: 600px) { .ciclo--resumido { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ciclo--resumido { grid-template-columns: repeat(3, 1fr); } }
.vidrio { position: relative; overflow: hidden; background: color-mix(in srgb, var(--ds-color-text-primary) 6%, transparent); border: var(--ds-border-width-thin) solid color-mix(in srgb, var(--ds-color-text-primary) 14%, transparent); -webkit-backdrop-filter: blur(var(--ds-space-2)); backdrop-filter: blur(var(--ds-space-2)); }
.vidrio::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(var(--ds-space-64) circle at var(--x, 50%) var(--y, 0%), color-mix(in srgb, var(--ds-color-tone-info-solid-background) 18%, transparent), transparent 60%); transition: opacity var(--ds-motion-duration-transition) var(--ds-motion-easing-standard); }
.vidrio:hover::before { opacity: 1; }
.etapa { display: grid; align-content: start; gap: var(--ds-space-2); padding: var(--ds-space-6); border-radius: var(--ds-radius-xl); transition: border-color var(--ds-motion-duration-transition) var(--ds-motion-easing-standard); }
.etapa:hover { border-color: color-mix(in srgb, var(--ds-color-tone-info-solid-background) 50%, transparent); }
.etapa__icono { display: grid; place-items: center; width: var(--ds-space-10); height: var(--ds-space-10); margin-bottom: var(--ds-space-2); border-radius: var(--ds-radius-lg); background: linear-gradient(135deg, var(--ds-color-tone-brand-solid-background), var(--ds-color-tone-info-solid-background)); color: var(--ds-color-tone-brand-solid-foreground); }
.etapa__icono svg { width: var(--ds-size-icon-md); height: var(--ds-size-icon-md); }
.etapa__nombre { font-size: var(--ds-typography-caption-font-size); line-height: var(--ds-typography-caption-line-height); font-weight: var(--ds-typography-label-large-font-weight); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-color-tone-info-solid-background); }
.etapa p { font-size: var(--ds-typography-body-small-font-size); line-height: var(--ds-typography-body-small-line-height); }
.ciclo--resumido .etapa { padding: var(--ds-space-4); }
.ciclo--resumido .etapa h3 { font-size: var(--ds-typography-body-font-size); line-height: var(--ds-typography-body-line-height); }
.cifras--ia { margin-top: var(--ds-space-10); border-block: var(--ds-border-width-thin) solid color-mix(in srgb, var(--ds-color-text-primary) 14%, transparent); }
.banda-ia .cifra strong { background: linear-gradient(100deg, var(--ds-color-text-primary), var(--ds-color-tone-info-solid-background)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.banda-ia .cifra span { color: color-mix(in srgb, var(--ds-color-text-primary) 70%, transparent); }
@media (min-width: 840px) { .banda-ia .cifra + .cifra { border-left-color: color-mix(in srgb, var(--ds-color-text-primary) 14%, transparent); } }
.banda-cifras--ia .cifras--ia { margin-top: 0; border: 0; }
.banda-cifras--ia .cifra strong { background: linear-gradient(100deg, var(--ds-color-tone-brand-solid-background), var(--ds-color-tone-info-solid-background)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.servicio--ia { grid-column: 1 / -1; display: grid; gap: var(--ds-space-3); background: linear-gradient(120deg, color-mix(in srgb, var(--ds-color-tone-brand-subtle-background) 80%, transparent), color-mix(in srgb, var(--ds-color-tone-info-subtle-background) 80%, transparent)); }
@media (min-width: 1024px) { .servicio--ia { grid-template-columns: auto 1fr 1.2fr; align-items: center; column-gap: var(--ds-space-8); } .servicio--ia .servicio__pila { grid-column: 2 / -1; } .servicio--ia .producto__enlace { grid-column: 2 / -1; } }
.servicio--ia .servicio__pila { border-top-color: color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 20%, transparent); }
.heroe--ia .heroe__rejilla { padding-block: var(--ds-space-6) var(--ds-space-16); }
.consola { margin: 0; border-radius: var(--ds-radius-xl); overflow: hidden; }
.consola__barra { display: flex; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-3) var(--ds-space-4); border-bottom: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }
.consola__barra > span:not(.consola__titulo) { width: var(--ds-space-3); height: var(--ds-space-3); border-radius: var(--ds-radius-full); background: var(--ds-color-border-default); }
.consola__titulo { margin-left: var(--ds-space-2); font-size: var(--ds-typography-caption-font-size); color: var(--ds-color-text-secondary); }
.consola__lineas { display: grid; gap: var(--ds-space-3); margin: 0; padding: var(--ds-space-6); list-style: none; font-size: var(--ds-typography-body-small-font-size); line-height: var(--ds-typography-body-small-line-height); font-variant-numeric: tabular-nums; }
.consola__lineas li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ds-space-2); }
.consola__marca { display: inline-flex; min-width: var(--ds-space-16); justify-content: center; padding: 0 var(--ds-space-2); border-radius: var(--ds-radius-sm); background: var(--ds-color-tone-brand-subtle-background); color: var(--ds-color-tone-brand-subtle-foreground); font-size: var(--ds-typography-caption-font-size); font-weight: var(--ds-typography-label-large-font-weight); }
.consola__marca--sistema { background: var(--ds-color-tone-info-subtle-background); color: var(--ds-color-tone-info-subtle-foreground); }
.consola__marca--persona { background: var(--ds-color-tone-success-subtle-background); color: var(--ds-color-tone-success-subtle-foreground); }
.consola__espera { font-weight: var(--ds-typography-label-large-font-weight); }
.cursor { display: inline-block; width: var(--ds-space-2); height: var(--ds-space-4); margin-left: var(--ds-space-1); background: var(--ds-color-tone-brand-solid-background); vertical-align: middle; }
.tarjeta--ia .familia__fila { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-space-2); }
.tarjeta--ia .producto__enlace { margin-top: auto; }
.principios { display: grid; gap: var(--ds-space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); list-style: none; padding: 0; counter-reset: principio; }
.principio { display: grid; gap: var(--ds-space-2); align-content: start; padding-left: var(--ds-space-4); border-left: var(--ds-border-width-thick) solid; border-image: linear-gradient(180deg, var(--ds-color-tone-brand-solid-background), var(--ds-color-tone-info-solid-background)) 1; }
.principio p { color: var(--ds-color-text-secondary); }
@media (min-width: 840px) { .linea-tiempo--ia { grid-template-columns: repeat(3, 1fr); } }
.gobierno { display: grid; gap: var(--ds-space-6); margin-top: var(--ds-space-12); padding: var(--ds-space-8); border-radius: var(--ds-radius-xl); }
.gobierno > div { display: grid; gap: var(--ds-space-2); align-content: start; }
.gobierno > div p { color: var(--ds-color-text-secondary); }
@media (min-width: 1024px) { .gobierno { grid-template-columns: 1fr 1.4fr; gap: var(--ds-space-12); } }
@media (max-width: 599px) { .gobierno { padding: var(--ds-space-4); } }
.acciones--centro { justify-content: center; margin-top: var(--ds-space-10); }
@media (prefers-reduced-motion: no-preference) {
.aurora { animation: deriva calc(var(--ds-motion-duration-indeterminate) * 14) var(--ds-motion-easing-standard) infinite alternate; }
.ficha-flotante--a { animation: flota calc(var(--ds-motion-duration-indeterminate) * 4) var(--ds-motion-easing-standard) infinite alternate; }
.ficha-flotante--b { animation: flota calc(var(--ds-motion-duration-indeterminate) * 5) var(--ds-motion-easing-standard) infinite alternate-reverse; }
.punto { animation: late calc(var(--ds-motion-duration-indeterminate) * 2) var(--ds-motion-easing-standard) infinite; }
.circuito__pulso { animation: pulso calc(var(--ds-motion-duration-indeterminate) * 5) linear infinite; animation-delay: calc(var(--i) * var(--ds-motion-duration-indeterminate)); }
.circuito circle { animation: late calc(var(--ds-motion-duration-indeterminate) * 3) var(--ds-motion-easing-standard) infinite; animation-delay: calc(var(--i) * var(--ds-motion-duration-transition)); }
.cursor { animation: parpadeo var(--ds-motion-duration-indeterminate) steps(1) infinite; }
.etapa { transition: transform var(--ds-motion-duration-transition) var(--ds-motion-easing-standard), border-color var(--ds-motion-duration-transition) var(--ds-motion-easing-standard); }
.etapa:hover { transform: translateY(calc(-1 * var(--ds-space-1))); }
}
@keyframes deriva { to { transform: translate3d(4%, 6%, 0) rotate(8deg) scale(1.1); } }
@keyframes late { 50% { opacity: 0.35; } }
@keyframes pulso { 0% { stroke-dashoffset: 424; opacity: 0; } 10% { opacity: 1; } 70% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes parpadeo { 50% { opacity: 0; } }
.circuito .i1 { --i: 1; }
.circuito .i2 { --i: 2; }
.circuito .i3 { --i: 3; }
.circuito .i4 { --i: 4; }
.circuito .i5 { --i: 5; }
.circuito .i6 { --i: 6; }
.circuito .i7 { --i: 7; }
.circuito .i8 { --i: 8; }
.circuito .i9 { --i: 9; }
.circuito .i0 { --i: 0; }
:root { color-scheme: light; }
:root[data-tema="oscuro"], .isla-oscura { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-tema]) { color-scheme: dark; } }
.isla-oscura { color: var(--ds-color-text-primary); }
body { background: var(--ds-color-background-primary); }
.franja { background: var(--ds-color-surface-sunken); color: var(--ds-color-text-secondary); border-bottom: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }
.franja a { color: var(--ds-color-text-secondary); }
.franja a:hover { color: var(--ds-color-text-primary); }
.pie { background: var(--ds-color-surface-sunken); color: var(--ds-color-text-primary); border-top: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }
.pie h2, .pie a, .pie p, .pie dd, .pie li, .pie a:hover, .marca--pie, .marca--pie .marca__texto span { color: var(--ds-color-text-primary); }
.marca img, .marca--pie img { width: var(--ds-space-12); height: var(--ds-space-12); }
.marca .marca__texto .marca__acento { font-size: inherit; line-height: inherit; opacity: 1; background: linear-gradient(100deg, var(--ds-color-tone-brand-outline-foreground), var(--ds-color-tone-info-solid-background)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.barra { background: color-mix(in srgb, var(--ds-color-background-primary) 78%, transparent); border-bottom-color: color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 22%, var(--ds-color-border-subtle)); }
.barra.abierta .barra__menu { background: var(--ds-color-surface-default); }
.seccion--alterna { background: linear-gradient(180deg, var(--ds-color-background-secondary), var(--ds-color-background-primary)); border-top: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }
.heroe { background: var(--ds-color-background-primary); border-bottom-color: var(--ds-color-border-subtle); }
.banda-cifras { background: var(--ds-color-surface-sunken); border-block: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); }
.cifra strong { background: linear-gradient(100deg, var(--ds-color-tone-brand-outline-foreground), var(--ds-color-tone-info-solid-background)); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-tema="oscuro"] .aurora { background:
radial-gradient(38% 42% at 12% 22%, color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 34%, transparent), transparent 70%),
radial-gradient(34% 40% at 88% 12%, color-mix(in srgb, var(--ds-color-tone-info-solid-background) 26%, transparent), transparent 70%),
radial-gradient(30% 36% at 62% 78%, color-mix(in srgb, var(--ds-color-tone-success-solid-background) 12%, transparent), transparent 70%); }
:root[data-tema="oscuro"] .malla { opacity: 0.45; }
.degradado { background-image: linear-gradient(100deg, var(--ds-color-tone-brand-outline-foreground) 5%, var(--ds-color-tone-brand-solid-background) 45%, var(--ds-color-tone-info-solid-background) 95%); }
@media (min-width: 1024px) { .heroe--futuro .t-display { font-size: calc(var(--ds-typography-display-font-size) * 1.12); } }
.circuito--heroe { z-index: 0; top: auto; bottom: 0; width: min(70%, 56rem); opacity: 0.5; }
@media (max-width: 839px) { .circuito--heroe { width: 120%; opacity: 0.25; } }
.navegador, .telefono { border-color: color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 35%, var(--ds-color-border-default)); box-shadow: 0 0 0 var(--ds-border-width-thin) color-mix(in srgb, var(--ds-color-tone-info-solid-background) 18%, transparent), 0 var(--ds-space-6) var(--ds-space-16) color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 22%, transparent), 0 0 var(--ds-space-24) color-mix(in srgb, var(--ds-color-tone-info-solid-background) 12%, transparent); }
.vitrina__escena { background: radial-gradient(70% 80% at 50% 100%, color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 22%, transparent), transparent 70%), var(--ds-color-surface-sunken); }
.tarjeta { background: color-mix(in srgb, var(--ds-color-surface-default) 72%, transparent); border-color: var(--ds-color-border-subtle); box-shadow: none; transition: border-color var(--ds-motion-duration-transition) var(--ds-motion-easing-standard), box-shadow var(--ds-motion-duration-transition) var(--ds-motion-easing-standard); }
.tarjeta:hover { border-color: color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 45%, transparent); box-shadow: 0 0 var(--ds-space-10) color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 14%, transparent); }
.destacado { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 16%, transparent), transparent 70%), var(--ds-color-surface-sunken); border-color: var(--ds-color-border-subtle); }
.vidrio-claro { background: color-mix(in srgb, var(--ds-color-surface-default) 62%, transparent); }
.llamada { background: radial-gradient(60% 120% at 0% 0%, color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 28%, transparent), transparent 70%), radial-gradient(50% 120% at 100% 100%, color-mix(in srgb, var(--ds-color-tone-info-solid-background) 20%, transparent), transparent 70%), var(--ds-color-surface-sunken); border: var(--ds-border-width-thin) solid color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 40%, transparent); }
.llamada h2, .llamada p, .llamada .t-lead { color: var(--ds-color-text-primary); }
.llamada .t-lead { color: var(--ds-color-text-secondary); }
.boton--claro { background: var(--ds-color-tone-brand-solid-background); color: var(--ds-color-tone-brand-solid-foreground); }
.boton--claro:hover { background: var(--ds-color-tone-brand-solid-background-hover); }
.boton--contorno-claro { border-color: var(--ds-color-tone-neutral-outline-border); color: var(--ds-color-text-primary); }
.boton--contorno-claro:hover { background: var(--ds-color-tone-neutral-subtle-background-hover); }
.boton--contorno { background: transparent; }
.boton--solido { box-shadow: 0 0 var(--ds-space-6) color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 35%, transparent); }
.banda-ia { border-block: var(--ds-border-width-thin) solid color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 25%, transparent); }
.banda-ia .t-eyebrow, .etapa__nombre { color: var(--ds-color-tone-info-solid-background); }
.etapa__icono { box-shadow: 0 0 var(--ds-space-6) color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 45%, transparent); }
@media (min-width: 1024px) { .heroe--futuro .heroe__rejilla { grid-template-columns: 1.4fr 1fr; } }
.ficha-flotante--a { top: 34%; left: calc(-1 * var(--ds-space-6)); }
.consola__lineas li { display: grid; grid-template-columns: var(--ds-space-20) minmax(0, 1fr); align-items: baseline; column-gap: var(--ds-space-3); }
.consola__marca { min-width: 0; }
.marca .logo--oscuro { display: none; }
:root[data-tema="oscuro"] .marca .logo--claro, .isla-oscura .marca .logo--claro { display: none; }
:root[data-tema="oscuro"] .marca .logo--oscuro, .isla-oscura .marca .logo--oscuro { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-tema]) .marca .logo--claro { display: none; } :root:not([data-tema]) .marca .logo--oscuro { display: block; } }
.barra__fila { justify-content: flex-start; }
.barra .marca { margin-right: auto; }
.barra__menu { order: 2; }
.tema { order: 3; }
.barra__abrir { order: 4; }
.tema { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--ds-size-touch-target-coarse); height: var(--ds-size-touch-target-coarse); border: var(--ds-border-width-thin) solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-full); background: transparent; color: var(--ds-color-icon-primary); cursor: pointer; transition: background-color var(--ds-motion-duration-feedback) var(--ds-motion-easing-standard), border-color var(--ds-motion-duration-feedback) var(--ds-motion-easing-standard); }
.tema:hover { background: var(--ds-color-tone-neutral-subtle-background-hover); border-color: var(--ds-color-tone-brand-outline-foreground); }
.tema svg { width: var(--ds-size-icon-md); height: var(--ds-size-icon-md); }
.tema .tema__sol { display: none; }
:root[data-tema="oscuro"] .tema .tema__sol { display: block; }
:root[data-tema="oscuro"] .tema .tema__luna { display: none; }
.no-js .tema, html:not(.js) .tema { display: none; }
:root:not([data-tema="oscuro"]) .navegador, :root:not([data-tema="oscuro"]) .telefono { box-shadow: 0 0 0 var(--ds-border-width-thin) color-mix(in srgb, var(--ds-color-tone-info-solid-background) 10%, transparent), 0 var(--ds-space-6) var(--ds-space-16) color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 14%, transparent), 0 0 var(--ds-space-24) color-mix(in srgb, var(--ds-color-tone-info-solid-background) 8%, transparent); }
:root:not([data-tema="oscuro"]) .tarjeta { background: color-mix(in srgb, var(--ds-color-surface-default) 86%, transparent); box-shadow: 0 var(--ds-elevation-raised-offset-y) var(--ds-elevation-raised-blur) var(--ds-elevation-raised-shadow); }
:root:not([data-tema="oscuro"]) .tarjeta:hover { box-shadow: 0 0 0 var(--ds-border-width-thin) color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 25%, transparent), 0 var(--ds-space-4) var(--ds-space-10) color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 12%, transparent); }
:root:not([data-tema="oscuro"]) .boton--solido { box-shadow: 0 var(--ds-space-1) var(--ds-space-4) color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 30%, transparent); }
:root:not([data-tema="oscuro"]) .vitrina__escena { background: radial-gradient(70% 80% at 50% 100%, color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 12%, transparent), transparent 70%), var(--ds-color-background-secondary); }
:root:not([data-tema="oscuro"]) .destacado { background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 8%, transparent), transparent 70%), var(--ds-color-background-secondary); }
:root:not([data-tema="oscuro"]) .llamada { background: radial-gradient(60% 120% at 0% 0%, color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 12%, transparent), transparent 70%), radial-gradient(50% 120% at 100% 100%, color-mix(in srgb, var(--ds-color-tone-info-solid-background) 10%, transparent), transparent 70%), var(--ds-color-background-secondary); border-color: color-mix(in srgb, var(--ds-color-tone-brand-solid-background) 25%, transparent); }
:root:not([data-tema="oscuro"]) .banda-cifras { background: var(--ds-color-background-secondary); }
:root:not([data-tema="oscuro"]) .franja { background: var(--ds-color-background-secondary); }
:root:not([data-tema="oscuro"]) .circuito--heroe { opacity: 0.35; }