/* Imegaventus — marca sobre el contrato de tokens de Industry */
:root {
  --space-5: 17px;
  --color-bg: #F7F9FC;
  --color-surface: #EBF2FC;
  --color-text: #131F52;
  --color-accent: #1E6FD9;
  --color-accent-2: #1A2B6B;
  --color-divider: color-mix(in srgb, #1A2B6B 18%, transparent);

  --color-neutral-100: #F7F9FC;
  --color-neutral-200: #EBF2FC;
  --color-neutral-300: #D7DFEC;
  --color-neutral-400: #B4C0D6;
  --color-neutral-500: #8D9AB5;
  --color-neutral-600: #6B7896;
  --color-neutral-700: #4E5B79;
  --color-neutral-800: #2E3A5C;
  --color-neutral-900: #131F52;

  --color-accent-100: #EBF2FC;
  --color-accent-200: #D3E4FA;
  --color-accent-300: #A8C8F2;
  --color-accent-400: #6BA3E8;
  --color-accent-500: #3D85DF;
  --color-accent-600: #1E6FD9;
  --color-accent-700: #1B4C9E;
  --color-accent-800: #1A2B6B;
  --color-accent-900: #131F52;

  --color-accent-2-100: #EBF2FC;
  --color-accent-2-200: #D3E4FA;
  --color-accent-2-300: #A8C8F2;
  --color-accent-2-400: #6BA3E8;
  --color-accent-2-500: #3D85DF;
  --color-accent-2-600: #1E6FD9;
  --color-accent-2-700: #1B4C9E;
  --color-accent-2-800: #1A2B6B;
  --color-accent-2-900: #131F52;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, sans-serif;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #131F52 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #131F52 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #131F52 22%, transparent);
}

body { margin: 0; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent); }
.btn, .tag, .input, .nav a, .card-kicker, .card-meta, h6 { font-family: var(--font-ui); }
.btn { font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; }
.sect { padding: calc(var(--space-8) * 2.6) calc(var(--space-8) * 1.6); }
.wrap { max-width: 1240px; margin: 0 auto; }

@media (max-width: 1080px) {
  .nav-links { display: none !important; }
  .video-ph { display: none !important; }
}
@media (max-width: 860px) {
  .sect { padding: calc(var(--space-8) * 1.6) var(--space-5); }
  .cols-2, .cols-3, .cols-4, .cols-5, .cols-6, .split { grid-template-columns: 1fr !important; }
  .cols-5 > div, .cols-6 > div { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--color-divider); padding-top: var(--space-4) !important; }
  h1 { font-size: 30px !important; }
  h2 { font-size: 24px !important; }
  #top .wrap { padding: var(--space-6) var(--space-4) !important; }
  section[id="top"] { aspect-ratio: 4 / 5 !important; }
  #top .blueprint { max-width: 100% !important; padding: var(--space-5) !important; }
  #top h1 { margin-bottom: var(--space-3) !important; }
  #top .tag-outline, #top div[style*="font-size: 34px"] { font-size: 22px !important; }
  .band .split, .band .wrap > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .band h2 { font-size: 26px !important; }
  section[id="top"] { min-height: 0; }
}

/* — profundidad y movimiento (sobre el vocabulario blueprint) — */
html { scroll-behavior: smooth; }
h1, h2 { letter-spacing: -0.022em; }
.btn, .card, a, .tile figure, .tile-bar, .tile-arrow { transition: all 220ms cubic-bezier(.2,.6,.2,1); }
.card:hover { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn-primary:hover { box-shadow: var(--shadow-md); }
.sect.alt { background: var(--color-surface); }

/* mosaico de rubros */
.tile { display: block; overflow: visible; }
.tile figure { overflow: hidden; }
.tile:hover figure { transform: scale(1.04); }
.tile:hover { box-shadow: var(--shadow-md); }
.tile:hover .tile-bar { background: var(--color-accent) !important; }
.tile:hover .tile-arrow { transform: translateX(4px); border-color: var(--color-neutral-100) !important; }

/* banda declarativa a sangre */
.band { background: var(--color-accent-800); color: var(--color-neutral-100); }
.band .rule { height: 1px; background: color-mix(in srgb, var(--color-neutral-100) 26%, transparent); }

details summary::-webkit-details-marker { display: none; }
details summary::marker { content: ""; }
details[open] summary { color: var(--color-accent-700); }

@media (min-width: 861px) and (max-width: 1180px) { .cols-6 { grid-template-columns: repeat(3, 1fr) !important; } }

.nav-item { transition: background 160ms, color 160ms; border-bottom: 2px solid transparent; }
.nav-item:hover { background: var(--color-accent-100); color: var(--color-accent-800) !important; border-bottom-color: var(--color-accent); }
.nav-item[aria-current="page"] { color: var(--color-accent-700) !important; background: var(--color-accent-100); border-bottom-color: var(--color-accent); }
a.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg) !important; }



/* Rubros: ritmo visual en damero para que la grilla no lea como una sola masa */
#rubros .tile:nth-child(4n+2) figure,
#rubros .tile:nth-child(4n+3) figure {
  filter: grayscale(0.55) contrast(1.08) brightness(0.94);
  transition: filter 260ms ease;
}
#rubros .tile:hover figure { filter: none !important; }
#rubros .tile figure { position: relative; }
#rubros .tile:nth-child(4n+2) figure::after,
#rubros .tile:nth-child(4n+3) figure::after {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--color-accent-800) 26%, transparent);
  mix-blend-mode: multiply; pointer-events: none;
  transition: opacity 260ms ease;
}
#rubros .tile:hover figure::after { opacity: 0; }

/* Header: navegación colapsable bajo 1080px */
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex !important; order: 3; }
  .nav-links { display: none !important; order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch !important; gap: 0 !important; }
  header[data-nav-abierto="true"] .nav-links { display: flex !important; }
  .nav-links .nav-item { padding: var(--space-3) var(--space-2) !important; border-top: 1px solid var(--color-divider); border-bottom: 0 !important; }
  .wrap.nav { flex-wrap: wrap; }
}

@media (max-width: 1180px) {
  .split { grid-template-columns: 1fr !important; }
}

.llave-mobile { display: none; }
@media (max-width: 860px) {
  .llave-circular { display: none !important; }
  .llave-mobile { display: block !important; }
}

@media (max-width: 860px) {
  .llave-split { grid-template-columns: 1fr !important; }
}

@keyframes marcas-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marcas-pista { animation: marcas-scroll 46s linear infinite; }
.marcas-carrusel:hover .marcas-pista { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marcas-pista { animation: none; } }
@media (max-width: 860px) { .marca-propia { grid-template-columns: 1fr !important; } }


/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   Todo lo que sigue vive dentro de media queries: por sobre los 1080px
   el sitio se renderiza exactamente igual que antes de estos cambios.
   ══════════════════════════════════════════════════════════════════ */

/* — 1. Dimensiones fijas incrustadas por el editor —
   Al redimensionar un bloque arrastrando, el canvas escribe width/height
   en píxeles dentro del atributo style. En escritorio pasa desapercibido;
   en móvil obliga a la grilla a crecer hasta max-content y la página se
   desborda en horizontal o se recorta.
   Casos: hero del home (p 598px), Nosotros (600px y 563px),
   Soluciones (h2 770px) y Servicios (h2 938px).
   Se neutralizan solo en móvil, sin tocar el HTML. */
@media (max-width: 860px) {
  h1[style*="width"], h2[style*="width"], h3[style*="width"], h4[style*="width"],
  p[style*="width"],
  .split > div[style*="width:"] {
    width: auto !important;
    max-width: 100% !important;
  }
  h1[style*="height"], h2[style*="height"], h3[style*="height"], h4[style*="height"],
  p[style*="height"],
  .split > div[style*="height:"] {
    height: auto !important;
  }
  /* Una palabra larga (URL, código de equipo) no debe empujar el layout */
  h1, h2, h3, h4, p, li, a, td, dd, dt { overflow-wrap: break-word; }
}

/* — 2. Hero: que crezca con el contenido en vez de recortarlo —
   #top tiene overflow:hidden, así que con una aspect-ratio fija todo lo
   que no entra se corta en silencio. En móvil la altura la define el
   contenido y el video de fondo (absolute + object-fit) se adapta. */
@media (max-width: 860px) {
  section[id="top"] {
    aspect-ratio: auto !important;
    min-height: 68vh !important;
  }
  #top .wrap {
    padding: calc(var(--space-8) * 1.6) var(--space-5) !important;
  }
}

/* — 3. Header —
   Antes el logo (212px) y el CTA (281px, nowrap) no cabían juntos y el
   menú caía en tres filas, comiéndose media pantalla. Ahora: logo + ☰ en
   una fila, el CTA a lo ancho debajo y el menú desplegable al final. */
@media (max-width: 1080px) {
  .wrap.nav {
    padding-left: var(--space-5) !important;
    padding-right: var(--space-5) !important;
    row-gap: var(--space-3);
  }
  .nav-brand { order: 1; }
  .nav-brand img { height: 56px !important; width: auto !important; }
  .nav-toggle { order: 2 !important; margin-left: auto; }
  .nav-links { order: 4 !important; }
  .wrap.nav > .btn-primary {
    order: 3;
    flex-basis: 100%;
    margin-left: 0 !important;
    white-space: normal;
    text-align: center;
  }
}

/* — 4. Secciones a sangre —
   .band y el footer llevan el padding lateral en el style inline
   (43,5px), que en un teléfono de 360px se come casi un cuarto del
   ancho. .sect ya se ajustaba; estos dos faltaban. */
@media (max-width: 860px) {
  section.band, footer {
    padding-left: var(--space-5) !important;
    padding-right: var(--space-5) !important;
  }
}

/* — 5. Paso intermedio en tablet —
   .cols-4 pasaba de 4 columnas directo a 1 en 860px: entre 861 y 1080
   quedaban cuatro columnas de ~230px. Igual que .cols-6, que ya tenía
   su paso a 3. */
@media (min-width: 861px) and (max-width: 1080px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* — 6. Pantallas chicas (≤ 400px) —
   Ajuste fino para iPhone SE / Android de gama de entrada. */
@media (max-width: 400px) {
  .btn { white-space: normal; }
  .nav-brand img { height: 46px !important; }
  h1 { font-size: 26px !important; }
  h2 { font-size: 22px !important; }
  .sect { padding-left: var(--space-4); padding-right: var(--space-4); }
  section.band, footer {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
  }
}

/* — 7. Filas flex que se aprietan en móvil —
   Encabezados de sección (título + enlace) y la barra inferior del
   footer están en flex con space-between y sin wrap: en un teléfono los
   dos textos se comprimen uno contra otro. Se excluye .tile-bar, que
   debe mantenerse en una sola línea. */
@media (max-width: 860px) {
  [style*="align-items: baseline"][style*="space-between"],
  footer > .wrap[style*="display: flex"] {
    flex-wrap: wrap;
  }
}