/* =====================================================================
   IT EXPERTS — SISTEMA DE DISEÑO · itx-sistema.css v1.0.0
   NO BORRAR. Todas las piezas itx- del sitio dependen de este archivo.
   Capas: 1 Tokens · 2 Base · 3 Componentes. Las secciones (capa 4) viven en cada página.
   Para cambiar un color, letra o espacio en TODO el sitio, cambia aquí su valor.
   Referencia completa: documento "IT Experts — Sistema de diseño web".
   ===================================================================== */
/* ---------- CAPA 1 · TOKENS ---------- */
:root{
  /* Colores */
  --itx-noche: #071530;
  --itx-marino: #0a1f44;
  --itx-marca: #1a5fb4;
  --itx-brillante: #1e90ff;
  --itx-celeste: #7fbfff;
  --itx-hielo: #bfe0ff;
  --itx-niebla: #f4f7fb;
  --itx-pizarra: #3d4c63;
  --itx-blanco: #ffffff;
  --itx-texto-sec-oscuro: rgba(255,255,255,0.8);
  --itx-borde-oscuro: rgba(255,255,255,0.14);
  --itx-borde-claro: rgba(7,21,48,0.15);
  --itx-ilus-cara-clara-izq: #c9d6e8;
  --itx-ilus-cara-clara-der: #8ea3c2;
  --itx-ilus-gris: #b9c8de;
  --itx-ilus-gris-sombra: #6f86a8;
  --itx-ilus-plataforma: #2a4372;
  --itx-ilus-plataforma-izq: #1b3260;
  --itx-ilus-plataforma-der: #132649;
  --itx-ilus-azul-sombra: #12468a;
  /* Familias tipográficas */
  --itx-font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --itx-font-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Espacios */
  --itx-esp-8: 8px;
  --itx-esp-12: 12px;
  --itx-esp-16: 16px;
  --itx-esp-20: 20px;
  --itx-esp-24: 24px;
  --itx-esp-32: 32px;
  --itx-esp-48: 48px;
  --itx-esp-56: 56px;
  --itx-esp-72: 72px;
  --itx-esp-80: 80px;
  --itx-esp-120: 120px;
  /* Esquinas */
  --itx-radio-0: 0px;
  --itx-radio-boton: 4px;
  /* Anchos máximos */
  --itx-ancho-contenido: 1280px;
  --itx-ancho-titulo: 900px;
  --itx-ancho-texto: 640px;
}

/* ---------- CAPA 2 · BASE ---------- */
.itx, [class*="itx-"] { box-sizing: border-box; }
[class*="itx-"] *, [class*="itx-"] *::before, [class*="itx-"] *::after { box-sizing: border-box; }
.itx-section { font-family: var(--itx-font-texto); -webkit-font-smoothing: antialiased; }

/* ---------- CAPA 3 · COMPONENTES ---------- */

/* Sección y fondos (D8). Clase en la sección de Divi: itx-section + itx-bg--noche | itx-bg--niebla | itx-bg--marca */
.et_pb_section.itx-section, .itx-section {
  padding: clamp(72px, 9vw, 120px) clamp(20px, 5.5vw, 80px) !important;
}
.itx-section .et_pb_row {
  width: 100% !important; max-width: var(--itx-ancho-contenido) !important;
  padding: 0 !important; margin-left: auto; margin-right: auto;
}
.itx-section .et_pb_row + .et_pb_row { margin-top: var(--itx-esp-48); }
.itx-bg--noche  { background-color: var(--itx-noche) !important;  color: var(--itx-blanco); }
.itx-bg--niebla { background-color: var(--itx-niebla) !important; color: var(--itx-noche); }
.itx-bg--marca  { background-color: var(--itx-marca) !important;  color: var(--itx-blanco); }

/* Etiqueta (D1) */
.itx-eyebrow, .itx-eyebrow p {
  margin: 0 !important; padding: 0 !important;
  font-family: var(--itx-font-texto) !important; font-size: 14px !important; font-weight: 600 !important;
  letter-spacing: .06em !important; line-height: 1.4 !important; text-transform: uppercase;
}
.itx-bg--noche .itx-eyebrow, .itx-bg--noche .itx-eyebrow p { color: var(--itx-celeste) !important; }
.itx-bg--niebla .itx-eyebrow, .itx-bg--niebla .itx-eyebrow p { color: var(--itx-marca) !important; }
.itx-bg--marca .itx-eyebrow, .itx-bg--marca .itx-eyebrow p { color: var(--itx-hielo) !important; }
.et_pb_module.itx-eyebrow { margin-bottom: var(--itx-esp-16) !important; }

/* Títulos. itx-title = H2 de sección · itx-title--hero = H1 del hero */
.itx-title h1, .itx-title h2, .itx-title h3, h1.itx-title, h2.itx-title {
  margin: 0 !important; padding: 0 !important;
  font-family: var(--itx-font-display) !important; font-weight: 500 !important;
  font-size: clamp(40px, 5vw, 72px) !important; line-height: .98 !important; letter-spacing: -.035em !important;
  color: inherit !important;
}
.itx-title--hero h1, .itx-title--hero h2, h1.itx-title--hero {
  font-size: clamp(42px, 6vw, 84px) !important; line-height: 1.02 !important; letter-spacing: -.03em !important;
}
.itx-bg--noche .itx-title, .itx-bg--marca .itx-title { color: var(--itx-blanco); }
.itx-bg--niebla .itx-title { color: var(--itx-noche); }
.itx-title em, .itx-title .itx-accent { font-style: normal; color: var(--itx-celeste); }
.itx-bg--niebla .itx-title em, .itx-bg--niebla .itx-title .itx-accent { color: var(--itx-marca); }

/* Subtítulo / entradilla y texto corriente */
.itx-lead, .itx-lead p {
  margin: 0 !important; padding: 0 !important; max-width: var(--itx-ancho-texto);
  font-family: var(--itx-font-texto) !important; font-size: clamp(16px, 1.4vw, 19px) !important; line-height: 1.5 !important;
}
.itx-body, .itx-body p { font-family: var(--itx-font-texto) !important; font-size: 17px !important; line-height: 1.55 !important; }
.itx-bg--noche .itx-lead, .itx-bg--noche .itx-lead p, .itx-bg--noche .itx-body, .itx-bg--noche .itx-body p,
.itx-bg--marca .itx-lead, .itx-bg--marca .itx-lead p { color: var(--itx-texto-sec-oscuro) !important; }
.itx-bg--niebla .itx-lead, .itx-bg--niebla .itx-lead p, .itx-bg--niebla .itx-body, .itx-bg--niebla .itx-body p { color: var(--itx-pizarra) !important; }
@media (max-width: 767px) { .itx-body, .itx-body p { font-size: 15px !important; } }

/* Botones (D3): principal, claro y oscuro. Sirve en módulos Botón de Divi y en enlaces de código */
a.itx-btn, .et_pb_button.itx-btn, body #page-container .et_pb_button.itx-btn {
  display: inline-block; padding: 16px 22px !important; border: 0 !important; border-radius: var(--itx-radio-boton) !important;
  font-family: var(--itx-font-texto) !important; font-size: 16px !important; font-weight: 500 !important;
  line-height: 1.2 !important; letter-spacing: 0 !important; text-decoration: none !important;
  transition: filter .2s ease !important;
}
.et_pb_button.itx-btn:hover, body #page-container .et_pb_button.itx-btn:hover { padding: 16px 22px !important; border: 0 !important; }
.et_pb_button.itx-btn::after, .et_pb_button.itx-btn::before { display: none !important; content: none !important; }
a.itx-btn:hover, .et_pb_button.itx-btn:hover { filter: brightness(1.12); }
a.itx-btn:focus-visible, .et_pb_button.itx-btn:focus-visible { outline: 2px solid var(--itx-celeste) !important; outline-offset: 3px; }
.itx-btn--primary, body #page-container .itx-btn--primary { background: var(--itx-marca) !important; color: var(--itx-blanco) !important; }
.itx-btn--light,   body #page-container .itx-btn--light   { background: var(--itx-blanco) !important; color: var(--itx-noche) !important; }
.itx-btn--dark,    body #page-container .itx-btn--dark    { background: var(--itx-noche) !important; color: var(--itx-blanco) !important; }
.itx-btns { display: flex; flex-wrap: wrap; gap: var(--itx-esp-12); }
.itx-btns .et_pb_button_module_wrapper { margin: 0 !important; }
@media (max-width: 767px) {
  .itx-btns { flex-direction: column; align-self: stretch; }
  a.itx-btn, .et_pb_button.itx-btn { display: block; width: 100%; text-align: center; }
}

/* Aparición al hacer scroll (D10). itx-reveal en el bloque; itx-reveal-stagger en el contenedor de filas o tarjetas */
.itx-js .itx-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.itx-js .itx-reveal.is-visible { opacity: 1; transform: none; }
.itx-js .itx-reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.itx-js .itx-reveal-stagger.is-visible > * { opacity: 1; transform: none; }

/* Título palabra por palabra (hero). Clase itx-split en el módulo de texto del título */
.itx-split .itx-w { display: inline-block; opacity: 0; transform: translateY(40px); animation: itxUp .9s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes itxUp { to { opacity: 1; transform: none; } }

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .itx-js .itx-reveal, .itx-js .itx-reveal-stagger > *, .itx-split .itx-w { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
}