/* MinDat — tema oscuro con campo de partículas (js/main.js). Manda sobre los estilos en línea del HTML. */
#root {
  --color-text: #f3f2f2 !important;
  --color-bg: #262b2f !important;
  --color-surface: #2E3439 !important;
  --color-divider: rgba(243, 242, 242, .22) !important;
  --color-accent-600: #ff5246 !important;
  --color-accent-700: #ff6b5f !important;  /* el rojo profundo del tema claro no tiene contraste sobre tinta */
  background: var(--color-bg) !important;
  position: relative;
}
html, body { background: #262b2f; }
::selection { background: rgba(251, 56, 51, .35); }

/* Lienzo de partículas fijo detrás del contenido; no captura clics */
.field { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
#root > *:not(.field) { position: relative; z-index: 1; }
#root > [data-progress] { position: fixed !important; z-index: 50; }
#root > header { position: sticky !important; z-index: 40; }

/* Secciones transparentes para que se vea el campo */
#root > section:not(#contacto) { background: transparent !important; }
#root > header { background: color-mix(in srgb, var(--color-bg) 88%, transparent) !important; backdrop-filter: blur(6px); }

/* Hero: una columna de texto a la izquierda; la figura son las partículas a la derecha */
[data-figpanel] { display: none !important; }
#top { grid-template-columns: minmax(0, 1fr) !important; }

[data-stepblock] { opacity: 1 !important; min-height: 92vh !important; }
@media (max-width: 760px) { [data-textcol] { max-width: none; } [data-stepblock] { min-height: 80vh !important; } }

/* Servicios: grilla simple (sin scroll horizontal fijado ni contador) */
[data-hpin] { height: auto !important; }
[data-hpin] > div { position: relative !important; top: auto !important; height: auto !important; overflow: visible !important; }
[data-htrack] { transform: none !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
[data-htrack] > article { flex: none !important; min-height: 360px; box-sizing: border-box; border-bottom: 2px solid var(--color-text); background: color-mix(in srgb, var(--color-bg) 70%, transparent) !important; }
[data-htrack] > article:last-child { background: var(--color-text) !important; }
[data-hcount], [data-hcount] + span, [data-hbar] { display: none !important; }
@media (max-width: 1100px) { [data-htrack] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { [data-htrack] { grid-template-columns: minmax(0, 1fr); } [data-htrack] > article { min-height: 300px; border-right: 0 !important; } }

/* Proceso: la línea se muestra completa (sin animación de progreso) */
[data-line] { transform: none !important; }
[data-step] { background: var(--teal) !important; }

/* Bloques de lectura sobre el campo: un velo sutil para asegurar contraste */
#areas .area-grid, [data-screen-label="IA y Low-code"] > div:last-child, #compromiso > div:last-child { background: color-mix(in srgb, var(--color-bg) 78%, transparent); }

/* Botón de la tarjeta final de servicios y botones primarios: texto claro sobre rojo */
#root .btn-primary { color: #fff !important; }

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

/* ---------- Apertura con el logo (js/preload.js) ---------- */
.preload { position: fixed; inset: 0; z-index: 100; background: #24282c; color: #f3f2f2; display: grid; place-items: center; font: 600 11px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; animation: preload-out .01s 4s forwards; }
@keyframes preload-out { to { visibility: hidden; opacity: 0; } }
html.no-preload .preload { display: none; }
.preload__hud { position: absolute; width: 8px; height: 8px; background: #24DBE9; box-shadow: 0 0 10px #24DBE9; }
.preload__hud:nth-child(1) { top: 20px; left: 20px; } .preload__hud:nth-child(2) { top: 20px; right: 20px; }
.preload__hud:nth-child(3) { bottom: 20px; left: 20px; } .preload__hud:nth-child(4) { bottom: 20px; right: 20px; }
.preload__top, .preload__bottom { position: absolute; left: 0; right: 0; text-align: center; }
.preload__top { top: 18px; } .preload__bottom { bottom: 18px; opacity: .7; }
.preload svg { width: min(120px, 28vw); height: auto; overflow: visible; }
.preload .stroke { fill: none; stroke: #f3f2f2; stroke-width: 1.4; }
.preload__count { position: absolute; bottom: 18px; right: 44px; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .preload { display: none; } }

/* ---------- Composición centrada (hero, historia y manifiesto) ---------- */
[data-textcol] { max-width: none !important; }
[data-textcol] > div { align-items: center !important; text-align: center; }
[data-textcol] > div:first-child { justify-content: center !important; gap: 36px !important; }
[data-textcol] > div > div, [data-textcol] p { margin-left: auto !important; margin-right: auto !important; }
[data-textcol] [style*="display:flex"] { justify-content: center !important; }
#top h1 { font-size: clamp(42px, 6vw, 104px) !important; font-weight: 800 !important; letter-spacing: -.04em !important; line-height: .95 !important; }
#top h1 > span { display: inline-block !important; margin: 0 .06em; }
[data-textcol] > div:first-child p { max-width: 46ch !important; font-size: clamp(17px, 1.3vw, 20px) !important; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
[data-stepblock] { border-top: 0 !important; padding-inline: clamp(20px, 6vw, 96px) !important; }
[data-stepblock] h3 { font-size: clamp(40px, 5vw, 88px) !important; }
[data-stepblock] p { max-width: 40ch !important; }
[data-stepblock] > div:last-child { margin-inline: auto; border-top: 0 !important; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
[data-stepblock] > *, [data-textcol] > div:first-child > * { text-shadow: 0 0 24px #262b2f, 0 0 8px #262b2f; }
[data-manifesto] > * { text-align: center; justify-content: center !important; }
[data-manifesto] p { margin-inline: auto !important; max-width: 22ch !important; }
#root .btn, #root .btn * { text-shadow: none !important; }

/* ---------- Servicios: una sola vista, en negativo y bicolor (papel + tinta) ---------- */
#servicios { --ink: #262b2f; --paper: #f3f2f2; background: var(--paper) !important; color: var(--ink) !important; min-height: 100svh; display: flex; border: 0 !important; }
#servicios > div { flex: 1; display: flex !important; flex-direction: column; min-height: 100svh; }
#servicios *, #servicios [style*="color"] { color: var(--ink) !important; border-color: var(--ink) !important; text-shadow: none !important; }
#servicios > div > div:first-of-type { padding: clamp(72px, 9vh, 104px) clamp(20px, 4vw, 56px) clamp(16px, 2.4vh, 28px) !important; border-bottom: 2px solid var(--ink) !important; }
#servicios h2 { font-size: clamp(32px, 4.2vw, 68px) !important; }
#servicios > div > div:nth-of-type(2) { flex: 1; display: flex; }
[data-htrack] { flex: 1; grid-template-rows: 1fr 1fr; }
[data-htrack] > article { min-height: 0 !important; padding: clamp(16px, 2.2vw, 32px) !important; gap: 12px !important; background: var(--paper) !important; border-right: 2px solid var(--ink) !important; border-bottom: 2px solid var(--ink) !important; justify-content: space-between !important; }
[data-htrack] > article:nth-child(3n) { border-right: 0 !important; }
[data-htrack] > article:nth-child(n+4) { border-bottom: 0 !important; }
[data-htrack] > article > span { font-size: clamp(34px, 3.6vw, 60px) !important; line-height: 1 !important; font-weight: 500 !important; }
[data-htrack] > article h3 { font-size: clamp(19px, 1.6vw, 26px) !important; }
[data-htrack] > article p { font-size: 14px !important; line-height: 1.4 !important; }
[data-htrack] > article p + p { font-size: 12.5px !important; padding-top: 8px !important; opacity: .75; border-top: 1px solid var(--ink) !important; }
/* tarjeta final invertida dentro del negativo: tinta con texto papel */
#servicios [data-htrack] > article:last-child { background: var(--ink) !important; }
#servicios [data-htrack] > article:last-child, #servicios [data-htrack] > article:last-child * { color: var(--paper) !important; }
[data-htrack] > article:last-child h3 { font-size: clamp(22px, 2vw, 32px) !important; }
#servicios [data-htrack] > article:last-child .btn { background: var(--paper) !important; color: var(--ink) !important; min-width: 0 !important; }
#servicios [data-htrack] > article:last-child .btn * { color: var(--ink) !important; }
@media (max-width: 1100px) { #servicios, #servicios > div { min-height: 0; } [data-htrack] { grid-template-rows: none; } [data-htrack] > article { border-right: 2px solid var(--ink) !important; border-bottom: 2px solid var(--ink) !important; min-height: 240px !important; } [data-htrack] > article:nth-child(2n) { border-right: 0 !important; } }
@media (max-width: 640px) { [data-htrack] > article { border-right: 0 !important; min-height: 0 !important; } }
#servicios > div, #servicios > div > div { background: var(--paper) !important; }
#servicios > div { max-height: 100svh; }
/* pantallas bajas (notebooks de 768 px): todo cabe en una vista */
@media (min-width: 1101px) and (max-height: 860px) {
  #servicios > div > div:first-of-type { padding-top: 64px !important; padding-bottom: 12px !important; }
  #servicios h2 { font-size: clamp(28px, 3.4vw, 52px) !important; }
  [data-htrack] > article { padding: 14px 24px !important; gap: 6px !important; }
  [data-htrack] > article > span { font-size: 34px !important; }
  [data-htrack] > article p + p { display: none; }
}
@media (max-width: 1100px) { #servicios > div { max-height: none; } }

/* Transición a "Qué hacemos": bloques tinta que se disuelven sobre el negativo */
#servicios { position: relative; }
.flip { box-sizing: border-box; position: absolute; inset: 0; z-index: 5; display: grid; pointer-events: none; }
.flip i { display: block; transition: opacity .28s steps(2, end); }
/* Tarjetas: suben escalonadas cuando la inversión termina */
#servicios [data-htrack] > article { opacity: 0; transform: translateY(28px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
#servicios.svc-in [data-htrack] > article { opacity: 1; transform: none; }
#servicios.svc-in [data-htrack] > article:nth-child(1) { transition-delay: 0ms; }
#servicios.svc-in [data-htrack] > article:nth-child(2) { transition-delay: 50ms; }
#servicios.svc-in [data-htrack] > article:nth-child(3) { transition-delay: 100ms; }
#servicios.svc-in [data-htrack] > article:nth-child(4) { transition-delay: 150ms; }
#servicios.svc-in [data-htrack] > article:nth-child(5) { transition-delay: 200ms; }
#servicios.svc-in [data-htrack] > article:nth-child(6) { transition-delay: 250ms; }
@media (prefers-reduced-motion: reduce) { #servicios [data-htrack] > article { opacity: 1 !important; transform: none !important; } }

/* =====================================================================
   Revisión completa (auditorías UX/UI y móvil). Manda sobre todo lo anterior.
   ===================================================================== */
#root {
  --fs-display: clamp(2.75rem, 1rem + 6vw, 6.5rem);     /* h1 del hero */
  --fs-climax: clamp(2.75rem, .5rem + 7.5vw, 7.5rem);    /* cierre */
  --fs-h2: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem);       /* títulos de sección y de los pasos */
  --fs-quote: clamp(1.75rem, 1rem + 3vw, 3.5rem);        /* manifiesto */
  --fs-h3: clamp(1.5rem, 1rem + 1.2vw, 2.25rem);         /* títulos de bloque */
  --fs-h3c: clamp(1.25rem, .9rem + .9vw, 1.75rem);       /* tarjetas de servicios */
  --fs-lead: clamp(1.0625rem, 1rem + .4vw, 1.375rem);    /* bajadas */
  --red-fill: #DE2F29;                                   /* relleno rojo con texto blanco: AA 4.6:1 */
  --teal-deep: #24DBE9 !important;                       /* un solo cian */
}

/* --- Escala tipográfica --- */
#top h1 { font-size: var(--fs-display) !important; font-weight: 900 !important; letter-spacing: -.04em !important; line-height: .95 !important; }
#top h1 > span { margin: 0 !important; }
#root section h2, [data-stepblock] h3 { font-size: var(--fs-h2) !important; line-height: .95 !important; letter-spacing: -.04em !important; }
#contacto h2 { font-size: var(--fs-climax) !important; line-height: .9 !important; letter-spacing: -.04em !important; }
.area-col h3, #proceso h3, #compromiso h3, [data-screen-label="IA y Low-code"] h3 { font-size: var(--fs-h3) !important; line-height: 1.05 !important; }
[data-htrack] > article h3 { font-size: var(--fs-h3c) !important; line-height: 1.1 !important; }
[data-textcol] > div:first-child p, [data-stepblock] p, #contacto p, #root section > div p[style*="1.5vw"] { font-size: var(--fs-lead) !important; line-height: 1.45 !important; }
[data-manifesto] p { font-size: var(--fs-quote) !important; max-width: 30ch !important; line-height: 1.08 !important; letter-spacing: -.03em !important; }

/* --- Ritmo: una sola regla por corte de sección y aire uniforme --- */
#root section div[style*="text-transform:uppercase"][style*="border-top"] { border-top: 0 !important; padding-top: 0 !important; }
[data-stepblock] { min-height: 72vh !important; }
#servicios > div > div:first-of-type { justify-content: flex-start !important; }

/* --- Contraste: rojo de relleno y CTA del cierre --- */
#root .btn-primary { background: var(--red-fill) !important; border-color: var(--red-fill) !important; color: #fff !important; }
#contacto { background: var(--red-fill) !important; }
#contacto .btn-invert { background: #fff !important; color: #262b2f !important; }
#contacto .btn-invert * { color: #262b2f !important; }
@media (hover: hover) and (pointer: fine) {
  #root .btn-primary:hover { background: #C8261F !important; border-color: #C8261F !important; }
  #contacto .btn-invert:hover { background: #262b2f !important; color: #fff !important; }
  #contacto .btn-invert:hover * { color: #fff !important; }
}
#root > header { background: #262b2f !important; backdrop-filter: none !important; }
.hov-surface:hover { background: transparent !important; }
.preload { background: #262b2f !important; }

/* --- Partículas: velo de lectura también en Proceso --- */
#proceso > div:last-child { background: color-mix(in srgb, var(--color-bg) 78%, transparent); padding-bottom: 24px; }

/* --- Botones y áreas táctiles (>= 44 px) --- */
#root .btn { min-height: 44px; }
#top .btn { font-size: 16px !important; padding: 14px 20px !important; min-height: 48px; }
#top .btn-secondary { border: 2px solid var(--color-text) !important; }
#root .lang-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
#root > header > div { padding-block: 10px !important; }
#root > header > div > a:first-child { min-height: 44px; }
#root > footer a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
#root > footer > div { row-gap: 0 !important; }
@media (min-width: 641px) { #root > header .nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; } }

/* --- Servicios: tarjetas alineadas y texto legible --- */
[data-htrack] > article { justify-content: flex-start !important; gap: clamp(10px, 1.6vh, 20px) !important; }
[data-htrack] > article > span { font-size: clamp(32px, 2.6vw, 44px) !important; margin-bottom: clamp(4px, 3vh, 40px); }
[data-htrack] > article p { font-size: 15px !important; line-height: 1.45 !important; max-width: 38ch; }
[data-htrack] > article p + p { font-size: 13.5px !important; }
#servicios [data-htrack] > article:last-child { justify-content: space-between !important; }

/* --- Hero: alto real de pantalla --- */
#top [data-textcol] > div:first-child { min-height: calc(100svh - 66px) !important; }

/* ===== Celular ===== */
@media (max-width: 640px) {
  #root > header > div { flex-wrap: wrap; gap: 0 12px !important; padding-top: 8px !important; padding-bottom: 0 !important; }
  #root > header nav { display: contents !important; }
  #root > header .lang-switch { order: 1; margin-left: auto; }
  #root > header .btn-primary { order: 2; }
  #root > header .nav-link { display: flex !important; order: 3; flex: 1 0 28%; justify-content: center; align-items: center; min-height: 44px; font-size: 15px; border-top: 2px solid var(--color-divider); }
  html { scroll-padding-top: 116px; }
  #top [data-textcol] > div:first-child { min-height: calc(100svh - 100px) !important; }
  #top [data-textcol] > div:first-child > div:first-child { flex-direction: column; gap: 10px !important; }
  [data-manifesto] p { font-size: clamp(26px, 7.4vw, 32px) !important; }
  .preload__bottom { bottom: 48px !important; padding-inline: 20px; line-height: 1.6; }
  #compromiso > div:last-child { grid-template-columns: minmax(0, 1fr) !important; }
  #compromiso > div:last-child > div { border-right: 0 !important; min-height: 0 !important; gap: 28px !important; }
  #compromiso > div:last-child > div + div { border-top: 2px solid var(--color-text); }
}
@media (max-width: 1100px) {
  [data-htrack] > article p { font-size: 16px !important; }
  [data-htrack] > article p + p { font-size: 15px !important; }
}
@media (max-width: 860px) {
  [data-screen-label="IA y Low-code"] > div:last-child > div { border-right: 0 !important; }
  [data-screen-label="IA y Low-code"] > div:last-child > div + div { border-top: 2px solid var(--color-text); }
}
@media (min-width: 641px) and (max-width: 1100px) {
  #compromiso > div:last-child { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #compromiso > div:last-child > div:last-child { border-right: 0 !important; }
}
@media (max-width: 480px) {
  [data-process] [style*="repeat(4"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 36px; }
  [data-process] [data-reveal]:nth-child(n+2) [data-step] { margin-top: 0 !important; }
  [data-process] p { max-width: 36ch !important; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #root > header > div { padding-block: 4px !important; }
  #top [data-textcol] > div:first-child { padding-block: 16px !important; gap: 16px !important; min-height: calc(100svh - 54px) !important; }
  #top h1 { font-size: clamp(36px, 12vh, 56px) !important; }
  #top [data-textcol] > div:first-child p { font-size: 16px !important; }
  #contacto h2 { font-size: clamp(40px, 16vh, 72px) !important; }
}
/* especificidad: el cierre usa su propio tamaño (clímax) */
#root #contacto h2 { font-size: var(--fs-climax) !important; line-height: .9 !important; }
@media (max-height: 500px) and (orientation: landscape) {
  #root section h2, #root [data-stepblock] h3 { font-size: clamp(30px, 9vh, 40px) !important; }
  #root #contacto h2 { font-size: clamp(40px, 14vh, 60px) !important; }
}
/* Paso 1: el texto sube para dejar ver el rajo completo debajo */
[data-stepblock="0"] { justify-content: flex-start !important; padding-top: clamp(64px, 12vh, 140px) !important; }