/* Soutec Web Design System — generado desde design/soutec/tokens.json (npm run ds:build). No editar a mano. */
:root, [data-theme="light"] {
  --soutec-cyan: #00a6bc;
  --soutec-blue: #006699;
  --soutec-blue-dark: #004f64;
  --soutec-charcoal: #333333;
  --soutec-yellow: #f2d13f;
  --soutec-crimson: #c81e54;
  --soutec-green: #47b45a;
  --soutec-cyan-700: #008da0;
  --soutec-cyan-100: #d6f0f4;
  --soutec-blue-700: #00557f;
  --soutec-teal-hero: #18b4c4;
  --soutec-white: #ffffff;
  --soutec-bg: #f6f6f6;
  --soutec-bg-alt: #efefef;
  --soutec-border: #bebebe;
  --soutec-hairline: #d8dbdb;
  --soutec-gray-500: #737b7d;
  --soutec-gray-700: #565e5d;
  --soutec-teal-icon: #065064;
  --fg-1: var(--soutec-charcoal);
  --fg-2: var(--soutec-gray-500);
  --fg-3: var(--soutec-gray-500);
  --fg-on-blue: #ffffff;
  --fg-on-blue-soft: #d4e6ee;
  --fg-link: var(--soutec-cyan);
  --fg-accent: var(--soutec-cyan);
  --surface-page: var(--soutec-bg);
  --surface-card: #ffffff;
  --surface-blue: var(--soutec-blue);
  --surface-blue-dark: var(--soutec-blue-dark);
  --surface-teal: var(--soutec-teal-hero);
  --overlay-modal: rgba(0, 40, 55, 0.55);
  --shadow-card: 0 2px 14px rgba(0, 79, 100, 0.08);
  --shadow-card-hover: 0 8px 26px rgba(0, 79, 100, 0.16);
  --shadow-pill: 0 3px 8px rgba(0, 0, 0, 0.2);
  --shadow-float: 0 14px 40px rgba(0, 60, 80, 0.22);
  --focus-ring: 0 0 0 3px #008da0;
}
:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --radius-pill: 999px;
  --rounded-small: 8px;
  --rounded-medium: 12px;
  --rounded-big: 20px;
  --radius-card: 8px;
  --radius-badge: 50%;
  --radius-chip: 8px;
  --font-base: 'Quattrocento Sans', sans-serif;
  --font-display: 'Quattrocento Sans', sans-serif;
  --font-roboto: 'Roboto', sans-serif;
}
.soutec-hero { font-family: var(--font-base); font-size: 55px; line-height: 1.08; font-weight: 700; letter-spacing: -0.01em; }
.soutec-hero-mid { font-family: var(--font-base); font-size: 36px; line-height: 1.1; font-weight: 300; }
.soutec-hero-intro { font-family: var(--font-base); font-size: 22px; line-height: 1.25; font-weight: 300; }
.soutec-h1 { font-family: var(--font-base); font-size: 51px; line-height: 1; font-weight: 700; }
.soutec-h2 { font-family: var(--font-base); font-size: 32px; line-height: 1; font-weight: 300; }
.soutec-h3 { font-family: var(--font-base); font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: 0.01em; }
.soutec-h4 { font-family: var(--font-base); font-size: 25px; line-height: 1.2; font-weight: 700; }
.soutec-title { font-family: var(--font-base); font-size: 48px; line-height: 1.1; font-weight: 700; }
.soutec-title2 { font-family: var(--font-base); font-size: 36px; line-height: 1.1; font-weight: 300; }
.soutec-subtitle { font-family: var(--font-base); font-size: 28px; line-height: 1.2; font-weight: 400; }
.soutec-subtitle2 { font-family: var(--font-base); font-size: 22px; line-height: 1.3; font-weight: 700; }
.soutec-body { font-family: var(--font-base); font-size: 16px; line-height: 1.5; font-weight: 400; }
.soutec-small { font-family: var(--font-base); font-size: 14px; line-height: 1.45; font-weight: 400; }
.soutec-eyebrow { font-family: var(--font-base); font-size: 14px; line-height: 1.2; font-weight: 700; letter-spacing: 0.08em; }
.soutec-tab { font-family: var(--font-base); font-size: 15px; line-height: 1.2; font-weight: 700; letter-spacing: 0.05em; }
.soutec-button { font-family: var(--font-base); font-size: 14px; line-height: 1.2; font-weight: 700; letter-spacing: 0.06em; }
.soutec-roboto-subtitle { font-family: var(--font-roboto); font-size: 18px; line-height: 1.4; font-weight: 500; }
.soutec-roboto-step { font-family: var(--font-roboto); font-size: 16px; line-height: 1.35; font-weight: 500; }
.soutec-roboto-numeral { font-family: var(--font-roboto); font-size: 30px; line-height: 1.1; font-weight: 700; }
@font-face { font-family: 'Quattrocento Sans'; src: url('/fonts/QuattrocentoSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Quattrocento Sans'; src: url('/fonts/QuattrocentoSans-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Quattrocento Sans'; src: url('/fonts/QuattrocentoSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Quattrocento Sans'; src: url('/fonts/QuattrocentoSans-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/fonts/Roboto-VariableFont_wdth_wght.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---- components/bundle.css del sistema (estilos base de elementos y clases de marca) ---- */
/* Soutec Web Design System — estilos base de elementos y clases de marca.
   Las métricas tipográficas (tamaño, interlineado, peso, tracking) las compila la página en tokens.css
   como clases .soutec-* a partir de tokens.json; aquí van solo color, caja (MAYÚSCULAS) y movimiento,
   que el formato de tokens no declara. Colores y radios siempre vía var(--…) de tokens.css. */

:root {
  /* Movimiento (sin familia en tokens.json): ease estilo Vuetify, 140ms rápido / 240ms base. */
  --ease-soutec: cubic-bezier(0.25, 0.8, 0.5, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg-1);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

/* Hero: MAYÚSCULAS, blanco sobre azul; mezcla 300 (intro, línea media) → 700 (remate). */
.soutec-hero, .soutec-hero-mid, .soutec-hero-intro {
  text-transform: uppercase;
  color: var(--fg-on-blue);
  text-wrap: balance;
  margin: 0;
}

/* Títulos: azul sobre claro. */
h1, .soutec-h1, h4, .soutec-h4, .soutec-title, .soutec-subtitle2 { color: var(--soutec-blue); margin: 0; }

/* Intro de sección: gris claro con UNA palabra clave en bold cian (.sc_sub_title + .sc_title). */
h2, .soutec-h2 { color: var(--soutec-gray-500); margin: 0; }
.soutec-h2 strong, .soutec-keyword { color: var(--soutec-cyan); font-weight: 700; }

/* Título de panel / tarjeta: MAYÚSCULAS, azul o blanco según el fondo. */
h3, .soutec-h3 { text-transform: uppercase; color: var(--soutec-blue); margin: 0; }
.soutec-h3.on-blue { color: var(--fg-on-blue); }

p, .soutec-body { color: var(--fg-1); }
small, .soutec-small { color: var(--soutec-gray-700); }

/* Etiquetas MAYÚSCULAS: eyebrow, nav, tabs, botones. */
.soutec-eyebrow, .soutec-tab, .soutec-button { text-transform: uppercase; }
.soutec-eyebrow { color: var(--fg-1); }

/* Ayudante Roboto (subtítulo del hero, pasos, numerales). */
.soutec-roboto { font-family: var(--font-roboto); }

a, .soutec-link {
  color: var(--fg-link);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-soutec);
}
a:hover, .soutec-link:hover { opacity: 0.75; }

/* Foco de teclado visible en cualquier control. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* Tarjeta de marca: superficie blanca, sin borde, sombra con tinte azul. */
.soutec-card {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-base) var(--ease-soutec), transform var(--dur-base) var(--ease-soutec);
}
.soutec-card:hover { box-shadow: var(--shadow-card-hover); }

/* Corte diagonal (motivo firma): la foto se recorta en diagonal pronunciada contra un panel azul.
   Aplícalo al contenedor de la foto, con el panel azul detrás. */
.soutec-diagonal-photo { clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
}