/* ==========================================================================
   INVEXUS · responsive.css
   Breakpoints según ARQUITECTURA_VISUAL_UX §13.
     Desktop  >= 1200
     Tablet   768 - 1199
     Mobile   < 768
   Enfoque: el CSS base está escrito para desktop; aquí se adapta hacia abajo.
   §13 exige diseñar cada composición, no sólo "que quepa".
   ========================================================================== */

/* --- TABLET 768-1199 ------------------------------------------------------ */
@media (max-width: 1199px) {

  /* Hero pasa a una columna con el mockup debajo, máx. 760px. */
  .inv-split,
  .inv-split--even { grid-template-columns: 1fr; gap: var(--inv-space-5); }
  .inv-hero__visual { max-width: 760px; margin-inline: auto; }

  /* Tarjetas a 2 columnas. */
  .inv-grid--3,
  .inv-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* El grid 3+2 de soluciones se convierte en 2 columnas simples:
     se anulan los span calculados para desktop. */
  .inv-solutions__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .inv-solutions__grid > *,
  .inv-solutions__grid > *:nth-child(4),
  .inv-solutions__grid > *:nth-child(5) { grid-column: auto; }

  /* Funding: las tarjetas se reparten en 2 columnas.
     La clase correcta es __list, que es la que emite el componente.
     Antes esta regla apuntaba a __grid, que no existe en el marcado. */
  .inv-funding__list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* --- MOBILE < 768 --------------------------------------------------------- */
@media (max-width: 767px) {

  :root {
    --inv-section-y: var(--inv-section-y-mobile);   /* 64px */
    --inv-gutter:    var(--inv-space-2);
  }

  /* §2.3: hero 2.2-2.7rem, body nunca por debajo de 16px. */
  .inv-display,
  .inv h1, .inv-h1 { font-size: clamp(2.2rem, 8vw, 2.7rem); line-height: 1.05; }
  .inv h2, .inv-h2 { font-size: clamp(1.75rem, 6.5vw, 2rem); }
  .inv, body.inv   { font-size: 1rem; }

  /* Todo a una columna. */
  .inv-grid--2,
  .inv-grid--3,
  .inv-grid--4,
  .inv-solutions__grid { grid-template-columns: 1fr; }
  .inv-funding__list   { display: flex; flex-direction: column; }

  /* KPIs en 2x2, no en 4 columnas (§13). */
  .inv-proof__grid { grid-template-columns: repeat(2, minmax(0,1fr));
                     gap: var(--inv-space-4); }

  /* Botones apilados y a ancho completo. */
  .inv-actions { flex-direction: column; align-items: stretch; }
  .inv-btn { width: 100%; }

  /* Hechos del caso en una columna para no comprimir las cifras. */
  .inv-case__facts { grid-template-columns: 1fr; gap: var(--inv-space-2); }

  /* Hero: menos aire arriba, el contenido debe entrar antes. */
  .inv-hero { padding-block: var(--inv-space-6) var(--inv-space-6); }
  .inv-hero__visual { min-height: 220px; }

  /* Tabs envueltas, no desplazables. Con tres pestanas, un carrusel esconde
     opciones y obliga a descubrir que hay mas. Envolver es mas claro. */
  .inv-tabs__list { flex-wrap: wrap; gap: 8px; }
  .inv-tabs__tab { flex: 0 1 auto; }
}

/* --- Pantallas muy estrechas ---------------------------------------------- */
@media (max-width: 380px) {
  .inv-proof__grid { grid-template-columns: 1fr; }
}


/* --- Elementos del rediseno visual ---------------------------------------- */
@media (max-width: 1199px) {
  /* El halo del hero se sale de sitio cuando el mockup baja: se retira. */
  .inv-hero::after { display: none; }
  .inv-hero__body { max-width: none; }
}

@media (max-width: 767px) {
  /* El mockup se simplifica en movil (§13: "mockups simplificados").
     Se ocultan estado y grafica; quedan icono, etiqueta y barra. */
  .inv-mock__state { display: none; }
  .inv-mock__spark { display: none; }
  .inv-mock__row { grid-template-columns: 22px minmax(0, 76px) 1fr; gap: 10px; }
  .inv-mock__body { padding: var(--inv-space-2); gap: 11px; }

  /* Los separadores entre metricas sobran en 2x2: cortan la rejilla. */
  .inv-metric + .inv-metric::before { display: none; }
  .inv-metric { padding-inline: 0; }

  /* El numeral de las tarjetas de problema estorba junto al icono. */
  .inv-card__num { position: static; display: block; margin-bottom: 4px; font-size: 1.1rem; }

  .inv-hero__proof { max-width: none; }
  .inv-demo__panel { padding: var(--inv-space-3); }
}


/* --- Cabecera y pie -------------------------------------------------------- */
@media (max-width: 991px) {
  .inv-header__toggle { display: inline-flex; }
  /* El menu pasa a panel desplegable a pantalla completa bajo la cabecera. */
  .inv-nav {
    position: fixed; inset: var(--inv-header-h) 0 auto 0;
    /* Panel oscuro, coherente con la cabecera navy. */
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--inv-navy);
    border-bottom: 1px solid rgba(255,255,255,.12);
    box-shadow: var(--inv-shadow-md);
    padding: var(--inv-space-2) var(--inv-gutter) var(--inv-space-4);
    max-height: calc(100dvh - var(--inv-header-h)); overflow-y: auto;
    /* Oculto de verdad: display:none saca los enlaces del orden de
       tabulacion, que es lo correcto cuando el menu esta cerrado. */
    display: none;
  }
  .inv-nav-open .inv-nav { display: flex; }
  .inv-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .inv-nav__item { border-bottom: 1px solid rgba(255,255,255,.12); }
  .inv-nav__link { display: block; padding: 16px 4px; font-size: 1.05rem; }
  .inv-nav__link::after { display: none; }
  .inv-nav__cta { margin-top: var(--inv-space-3); width: 100%; }
  /* Con el menu abierto no debe poder desplazarse el fondo. */
  .inv-nav-open, .inv-nav-open body { overflow: hidden; }

  .inv-footer__top { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--inv-space-5); }
  .inv-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .inv-header__inner { min-height: var(--inv-header-h-mobile); gap: var(--inv-space-2); }
  .inv-header__logo { height: 36px; }
  .inv-nav { inset: var(--inv-header-h-mobile) 0 auto 0;
             max-height: calc(100dvh - var(--inv-header-h-mobile)); }
  .inv-footer__top { grid-template-columns: 1fr; }
  .inv-footer__bottom { flex-direction: column; align-items: flex-start; }
  .inv-main, :target { scroll-margin-top: calc(var(--inv-header-h-mobile) + 10px); }
}

/* --- Impresión ------------------------------------------------------------- */
@media print {
  .inv-hero, .inv-cta, .inv-demo {
    background: none !important;
    color: var(--inv-print-ink) !important;
  }
  .inv-reveal { opacity: 1 !important; transform: none !important; }
}

/* --- Páginas internas ------------------------------------------------------- */
@media (max-width: 767px) {
  .inv-phero { padding-block: var(--inv-space-6) var(--inv-space-5); }
  .inv-phero__title { max-width: none; }
  .inv-steps__item { padding-left: var(--inv-space-5); }
  .inv-steps__num { width: 30px; height: 30px; }
  .inv-empty { padding: var(--inv-space-5) var(--inv-space-2); }
}

/* --- Archivos, fichas y formulario ------------------------------------------ */
@media (max-width: 1199px) {
  /* La ficha deja de ser pegajosa: en una columna estorbaria. */
  .inv-ficha { position: static; }
}
@media (max-width: 767px) {
  .inv-filtros { grid-template-columns: 1fr; }
  .inv-filtros__acciones { flex-direction: column; align-items: stretch; }
  .inv-funding__list--archive { grid-template-columns: 1fr; }
  .inv-case-card__meta { flex-direction: column; gap: 8px; }
  .inv-pagination ul { gap: 6px; }
}

/* =========================================================================
   BLOQUES DE ARGUMENTO · adaptación por ancho
   Añadido el 30/08/2026 junto con transform / chain / routes / categories.
   ========================================================================= */

/* --- TABLET <= 1024 ------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Cinco etapas en una fila no caben legibles por debajo de 1024:
     el nombre de cada etapa se parte en tres líneas. Se pasa a 2x3. */
  .inv-chain { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* Con dos columnas el conector horizontal deja de tener sentido. */
  .inv-chain__item + .inv-chain__item::before { display: none; }
}

/* --- MOBILE < 768 --------------------------------------------------------- */
@media (max-width: 767px) {
  /* La transformación se lee de arriba abajo: "hoy" encima, "después" debajo.
     La flecha gira 90 grados para que la dirección siga siendo la correcta. */
  .inv-transform__row  { grid-template-columns: 1fr; gap: var(--inv-space-1); }
  .inv-transform__arrow { transform: rotate(90deg); padding: 2px 0; }

  .inv-chain           { grid-template-columns: 1fr; }
  .inv-route           { padding: var(--inv-space-3); }
  .inv-cat             { padding: var(--inv-space-3); padding-top: var(--inv-space-4); }
  .inv-cat__letter     { font-size: 2rem; }
  .inv-cat__title      { padding-right: 2.2rem; }
}