/* DainteX site — supplementary styles beyond the design system. */

html, body { background: #ffffff; }
*, *::before, *::after { box-sizing: border-box; }

/* Marquee scroll animation */
@keyframes dx-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.dx-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 64px;
  white-space: nowrap;
  animation: dx-marquee 38s linear infinite;
}

/* Underline link */
.dx-link-underline {
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  letter-spacing: 0.16px;
  border-bottom: 1px solid transparent;
}
.dx-link-underline:hover { border-bottom-color: currentColor; color: var(--color-blue-60); }

/* Hover card */
.dx-hover-card { transition: background 110ms, border-color 110ms; }
.dx-hover-card:hover { background: var(--color-surface-1); }

/* Number-card hover */
.dx-num-card {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  padding: 32px;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.dx-num-card:hover { background: var(--color-surface-1); border-color: var(--color-hairline-strong); }
.dx-num-card .num {
  font-size: 120px;
  font-weight: 300;
  letter-spacing: -2px;
  color: var(--color-ink);
  line-height: 1;
  margin-top: auto;
}

/* Inline icon button (square, ghost) */
.dx-icon-btn {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-hairline-strong);
  background: var(--color-canvas);
  color: var(--color-ink);
  cursor: pointer;
  transition: background 110ms, color 110ms;
}
.dx-icon-btn:hover { background: var(--color-ink); color: #fff; }

/* Process step card — interactive hover lift */
.dx-proc-col {
  position: relative;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
              background 220ms ease;
  cursor: default;
}
.dx-proc-col::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px; background: var(--color-link, #0f62fe);
  transform: scaleX(0); transform-origin: left;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dx-proc-col:hover {
  transform: translateY(-8px);
  background: #fff;
  box-shadow: 0 18px 40px -18px rgba(22, 22, 22, 0.28);
  z-index: 2;
}
.dx-proc-col:hover::before { transform: scaleX(1); }

/* Tool pill — Carbon inverse-fill micro-interaction (Stack tecnológico table).
   Hover flips the badge to charcoal with white text and slides a 3px IBM-blue
   accent in from the left. No shadow lift, no scale — Carbon discipline. */
.dx-tool-pill {
  cursor: default;
  transition: background var(--motion-base, 150ms) cubic-bezier(0.2, 0.8, 0.2, 1),
              color var(--motion-base, 150ms) cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color var(--motion-base, 150ms) cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow var(--motion-base, 150ms) cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dx-tool-pill:hover {
  background: var(--color-surface-1, #f4f4f4);
  color: var(--color-primary, #0f62fe);
  border-color: var(--color-primary, #0f62fe);
  box-shadow: inset 3px 0 0 0 var(--color-primary, #0f62fe);
}

/* Capability cards (Automatizaciones, agentes e IA section). On hover the
   blue top accent extends downward and the icon + title light up IBM blue.
   No shadow, no card-scale — Carbon's "hairline thickens" hover vocabulary. */
.dx-cap-card .dx-cap-top {
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dx-cap-card .dx-cap-icon,
.dx-cap-card .dx-cap-title {
  transition: color var(--motion-base, 150ms) cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dx-cap-card:hover .dx-cap-top { transform: scaleY(2.4); }
.dx-cap-card:hover .dx-cap-icon { color: var(--color-primary, #0f62fe) !important; }
.dx-cap-card:hover .dx-cap-title { color: var(--color-primary, #0f62fe) !important; }

/* Implementation timeline — scroll-triggered "flow" reveal + hover.
   ── Entrance: a blue progress line draws left→right across the gray rail;
      within each node the icon box, number, and label each fade and slide up
      in a clean staggered sequence (per-element --d delay, left→right cascade).
   ── Hover: the icon box scales up a touch and its border + icon snap to IBM
      blue; the number brightens and the label turns blue. Hover transitions
      carry NO entrance delay (separate elements / zero-delay color), so they
      stay instant and crisp. One-time entrance, Carbon easing throughout. */
.dx-stepper .dx-step-bw,
.dx-stepper .dx-step-num,
.dx-stepper .dx-step-label {
  transition: opacity 560ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s),
              transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s),
              color 220ms ease 0s;
}
.dx-stepper .dx-step-box {
  transform-origin: center;
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 220ms ease, color 220ms ease;
}
.dx-stepper .dx-step-fill {
  transition: transform 1350ms cubic-bezier(0.45, 0, 0.15, 1) 120ms;
}
.dx-stepper:not(.is-in) .dx-step-bw,
.dx-stepper:not(.is-in) .dx-step-num,
.dx-stepper:not(.is-in) .dx-step-label { opacity: 0; transform: translateY(16px); }
.dx-stepper:not(.is-in) .dx-step-box { border-color: #c6c6c6 !important; color: #a8a8a8 !important; }
.dx-stepper:not(.is-in) .dx-step-fill { transform: scaleX(0); }

/* Interactive hover */
.dx-stepper.is-in .dx-step:hover .dx-step-box {
  transform: scale(1.06);
  border-color: var(--color-primary, #0f62fe) !important;
  color: var(--color-primary, #0f62fe) !important;
}
.dx-stepper.is-in .dx-step:hover .dx-step-num { color: #4589ff !important; }
.dx-stepper.is-in .dx-step:hover .dx-step-label { color: var(--color-primary, #0f62fe) !important; }

@media (prefers-reduced-motion: reduce) {
  .dx-stepper .dx-step-bw,
  .dx-stepper .dx-step-num,
  .dx-stepper .dx-step-label,
  .dx-stepper .dx-step-box,
  .dx-stepper .dx-step-fill { transition: none !important; }
  .dx-stepper:not(.is-in) .dx-step-bw,
  .dx-stepper:not(.is-in) .dx-step-num,
  .dx-stepper:not(.is-in) .dx-step-label { opacity: 1; transform: none; }
  .dx-stepper:not(.is-in) .dx-step-box { border-color: #161616 !important; color: #0f62fe !important; }
  .dx-stepper:not(.is-in) .dx-step-fill { transform: scaleX(1); }
}

/* Carbon icons inherit currentColor (brand rule) — otherwise the path
   defaults to black and disappears on dark surfaces. */
.btn svg,
.btn svg path,
button svg,
button svg path,
a svg,
a svg path { fill: currentColor; }

/* Diagonal lined photo placeholder */
.dx-photo-placeholder {
  background:
    linear-gradient(135deg, rgba(15,98,254,0.06), rgba(255,255,255,0)) ,
    repeating-linear-gradient(45deg, #e0e0e0 0px, #e0e0e0 1px, #f4f4f4 1px, #f4f4f4 14px);
  position: relative;
}
.dx-photo-placeholder::after {
  content: attr(data-label);
  position: absolute;
  left: 16px; bottom: 12px;
  font-size: 11px; letter-spacing: 0.32px;
  color: var(--color-ink-muted);
  background: #fff;
  padding: 4px 8px;
  border: 1px solid var(--color-hairline);
}

/* Generic section */
.dx-section { padding: 96px 0; }
.dx-section--alt { background: var(--color-surface-1); }
.dx-section--dark { background: var(--color-inverse-canvas); color: var(--color-inverse-ink); }

.dx-container { max-width: 1584px; margin: 0 auto; padding: 0 32px; }

/* ============================================================================
   RESPONSIVE LAYER  (smartphones + tablets)
   The site is built with inline-style objects, so structural overrides live
   here as media queries that hook the serialized inline `style` attribute
   (React emits real `grid-template-columns:` / `font-size:` declarations,
   which these attribute selectors match). Inline styles still govern desktop;
   these rules only take over below the breakpoints.
   ========================================================================== */

/* Kill any horizontal overflow globally; let grid/flex children shrink. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; }
*, *::before, *::after { min-width: 0; }

/* ---------- TABLET TYPE  (≤ 1024px) ----------
   Headlines must shrink even where 2-column layouts are preserved, or a
   half-width display headline overflows its column. Layout/grid structure is
   left intact here and only collapses at the ≤860 "mobile" breakpoint below. */
@media (max-width: 1024px) {
  [style*="font-size: 88px"] { font-size: 60px !important; }
  [style*="font-size: 84px"] { font-size: 58px !important; }
  [style*="font-size: 76px"] { font-size: 54px !important; }
  [style*="font-size: 72px"] { font-size: 52px !important; }
  [style*="font-size: 60px"] { font-size: 46px !important; }
  [style*="font-size: 56px"] { font-size: 44px !important; }
  [style*="font-size: 120px"] { font-size: 92px !important; }
}

/* ---------- MOBILE STRUCTURE  (≤ 860px, aligned with the burger nav) ----------
   Collapse multi-column structure: layout splits stack, dense card/data grids
   step down a tier. */
@media (max-width: 860px) {
  /* Stack every explicit multi-track LAYOUT split (hero splits, section heads,
     CTA banners, contact body, form rows) — these don't use repeat(). */
  [style*="grid-template-columns"]:not([style*="repeat"]) {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  /* Dense card / data grids step down a tier. */
  [style*="grid-template-columns: repeat(8"] { grid-template-columns: repeat(4, 1fr) !important; }
  [style*="grid-template-columns: repeat(6"] { grid-template-columns: repeat(3, 1fr) !important; }
  [style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(3, 1fr) !important; }
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- PHONE  (≤ 640px) ---------- */
@media (max-width: 640px) {
  /* Everything to a single column — keep logos 2-up so the strip isn't endless. */
  [style*="grid-template-columns: repeat(8"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat("]:not([style*="repeat(8"]) {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns"]:not([style*="repeat"]) { gap: 28px !important; }

  /* Reduce side gutters: 32px → 20px on the common inner/section paddings. */
  [style*="padding: 0px 32px"],
  [style*="padding: 96px 32px"],
  [style*="padding: 64px 32px 0px"],
  [style*="padding: 64px 32px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Headline scaling — phone step. */
  [style*="font-size: 88px"] { font-size: 42px !important; letter-spacing: -0.5px !important; }
  [style*="font-size: 84px"] { font-size: 40px !important; letter-spacing: -0.4px !important; line-height: 1.06 !important; }
  [style*="font-size: 76px"] { font-size: 38px !important; }
  [style*="font-size: 72px"] { font-size: 46px !important; }
  [style*="font-size: 60px"] { font-size: 34px !important; }
  [style*="font-size: 56px"] { font-size: 33px !important; }
  [style*="font-size: 52px"] { font-size: 32px !important; }
  [style*="font-size: 48px"] { font-size: 30px !important; }
  [style*="font-size: 42px"] { font-size: 29px !important; }
  [style*="font-size: 120px"] { font-size: 72px !important; }
}

/* ---------- NAV: utility bar hides on small screens (per design system) ---------- */
@media (max-width: 672px) {
  .dx-utility { display: none !important; }
}

/* ---------- TIMELINE: horizontal → vertical on tablet/phone ---------- */
@media (max-width: 900px) {
  .dx-stepper { grid-template-columns: 1fr !important; }
  .dx-stepper .dx-step {
    display: grid !important;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    column-gap: 20px;
    align-items: center;
    padding: 18px 0;
    text-align: left !important;
  }
  .dx-stepper .dx-step-bw  { grid-column: 1; grid-row: 1 / 3; }
  .dx-stepper .dx-step-num   { grid-column: 2; grid-row: 1; margin: 0 0 4px !important; align-self: end; }
  .dx-stepper .dx-step-label { grid-column: 2; grid-row: 2; max-width: none !important; align-self: start; }

  /* Connector line + progress fill run vertically through the box centers. */
  .dx-stepper .dx-step-line,
  .dx-stepper .dx-step-fill {
    top: 42px !important;
    bottom: 42px !important;
    left: 27px !important;
    right: auto !important;
    width: 1px !important;
    height: auto !important;
  }
  .dx-stepper .dx-step-fill {
    width: 2px !important;
    transform-origin: top center !important;
  }
  .dx-stepper:not(.is-in) .dx-step-fill { transform: scaleY(0) !important; }
  /* Entrance: steps rise the same way; the fill now grows downward. */
  @media (prefers-reduced-motion: reduce) {
    .dx-stepper:not(.is-in) .dx-step-fill { transform: scaleY(1) !important; }
  }
}

/* =========================================================================
   RESPONSIVE FIXES (footer + methodology diagram)
   Añadido para corregir el layout en móvil/tablet.
   ========================================================================= */

/* ---------- FOOTER ---------- */
/* La rejilla del footer (1.6fr + 4 columnas) no la atrapaban las reglas
   genéricas. La colapsamos: marca arriba a todo lo ancho, enlaces en 2 cols. */
@media (max-width: 860px) {
  .dx-footer-cols {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px 24px !important;
  }
  .dx-footer-cols > :first-child {
    grid-column: 1 / -1 !important;   /* bloque de marca a todo lo ancho */
    margin-bottom: 8px;
  }
}
@media (max-width: 640px) {
  /* La fila inferior (copyright + enlaces) deja de ir lado a lado. */
  .dx-footer-bottom {
    flex-direction: column !important;
    gap: 14px !important;
  }
}
@media (max-width: 420px) {
  /* En pantallas muy angostas, los enlaces a una sola columna. */
  .dx-footer-cols { grid-template-columns: 1fr !important; }
}

/* ---------- DIAGRAMA DE METODOLOGÍA ---------- */
/* En móvil quitamos la proporción fija y sacamos la tira de fases de su
   posición absoluta para que NO se encime sobre la gráfica: el canvas queda
   arriba con alto fijo y las fases se listan debajo. */
@media (max-width: 860px) {
  .dx-method-wrap {
    aspect-ratio: auto !important;
  }
  .dx-method-wrap > canvas,
  .dx-method-wrap > svg {
    position: relative !important;
    inset: auto !important;
    height: 200px !important;
    width: 100% !important;
    display: block !important;
  }
  .dx-method-strip {
    position: static !important;
    grid-template-columns: 1fr 1fr !important;  /* fases en 2 columnas */
    border-top: 1px solid #e0e0e0 !important;
  }
  .dx-method-strip > * {
    border-left: none !important;
    border-top: 1px solid #e0e0e0 !important;
  }
  .dx-method-strip > :nth-child(1),
  .dx-method-strip > :nth-child(2) {
    border-top: none !important;
  }
}
@media (max-width: 420px) {
  .dx-method-strip { grid-template-columns: 1fr !important; }
  .dx-method-strip > :nth-child(2) { border-top: 1px solid #e0e0e0 !important; }
}

/* ---------- TÍTULOS GIGANTES sin cobertura responsive (220 / 180 / 96) ----------
   El "CONTÁCTANOS" (220px) y otros titulares grandes se salían en móvil. */
@media (max-width: 1024px) {
  [style*="font-size: 220px"] { font-size: 120px !important; letter-spacing: -3px !important; }
  [style*="font-size: 180px"] { font-size: 104px !important; letter-spacing: -2px !important; }
  [style*="font-size: 96px"]  { font-size: 68px !important; }
}
@media (max-width: 640px) {
  [style*="font-size: 220px"] { font-size: 44px !important; letter-spacing: -1px !important; line-height: 1 !important; }
  [style*="font-size: 180px"] { font-size: 60px !important; letter-spacing: -1px !important; }
  [style*="font-size: 96px"]  { font-size: 48px !important; }
}
@media (max-width: 420px) {
  [style*="font-size: 220px"] { font-size: 36px !important; letter-spacing: -0.5px !important; }
  [style*="font-size: 180px"] { font-size: 48px !important; }
}