/* Miru — capa responsive compartida.
   El escritorio vive en estilos inline; aquí solo se corrige por debajo
   de 1100px. Se usa !important porque hay que anular inline.
   Marcadores que se ponen en el HTML:
     data-r="stack"  → rejilla de contenido: una columna (≤1024px)
     data-r="stack-pin" → igual, pero DENTRO de una sección pineada: apila solo
                       a ≤900px, que es donde el JS suelta el pin (mob). Si
                       apilara antes, el contenido no cabría en los 100vh
                       del pin y la sección recortaría.
     data-r="2col"   → rejilla de tarjetas: dos columnas (una en <480)
     data-r="tight"  → panel de datos: tipografía y aire reducidos
     data-r="scroll" → fila que pasa a scroll horizontal
     data-r="hide"   → decorativo, se oculta en móvil
     data-r="wrap"   → fila de etiquetas que envuelve en vez de desbordar
     data-r="tabla"  → mini-tabla de mock: aprieta tipografía
     data-r="halo"   → halo decorativo de ancho fijo
*/

@media (max-width: 1100px) {
  #rail { display: none !important; }
}

@media (max-width: 1024px) {
  nav { padding: 9px 10px 9px 20px !important; }
  section, header, footer { padding-left: clamp(20px, 4vw, 40px) !important; padding-right: clamp(20px, 4vw, 40px) !important; }
  [data-r="stack"] { grid-template-columns: minmax(0, 1fr) !important; gap: 44px !important; }
  [data-r="2col"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
  nav { top: 10px !important; width: calc(100% - 20px) !important; padding: 8px 8px 8px 16px !important; }
  [data-nav] a[href*="formulario"] { padding: 11px 18px !important; font-size: 13.5px !important; }
  nav img { height: 22px !important; }

  header[data-hero] { height: auto !important; min-height: 100svh !important; }
  [data-hero-content] { margin-bottom: 6vh !important; }

  section:not([data-hero]) { padding-top: 104px !important; padding-bottom: 104px !important; }

  [data-r="stack"], [data-r="stack-pin"] { gap: 36px !important; }
  [data-r="2col"] { gap: 12px !important; }
  [data-r="hide"] { display: none !important; }
  [data-float] { display: none !important; }

  [data-r="tight"] { font-size: 10.5px !important; }
  [data-r="tight"] * { font-size: inherit !important; letter-spacing: .04em !important; }

  [data-r="scroll"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  [data-r="scroll"]::-webkit-scrollbar { display: none; }

  img, video { max-width: 100%; }
}

@media (max-width: 480px) {
  [data-r="2col"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* El pin de GSAP se suelta a ≤900px (mob en el JS de cada página). El breakpoint
   de este bloque y el de data-r="stack-pin" tienen que coincidir con ese valor:
   si el CSS deja de pinear antes que el JS —o la rejilla apila antes de que
   se suelte el pin— la sección se recorta. */
@media (max-width: 900px) {
  [data-r="pinned"] { height: auto !important; min-height: 0 !important; overflow: visible !important; padding-top: 110px !important; padding-bottom: 110px !important; }
  [data-r="stack-pin"] { grid-template-columns: minmax(0, 1fr) !important; gap: 44px !important; }
}

@media (max-width: 760px) {
  /* mini-tablas de datos: caben apretando tipografía, no partiendo columnas */
  [data-r="tabla"] { font-size: 9.5px !important; letter-spacing: .02em !important; gap: 6px !important; }
}

@media (max-width: 760px) {
  /* secciones de foto/vídeo a sangre: dejan de ser 100vh exactos para no recortar el titular */
  /* secciones a sangre con vídeo/foto: mantienen su alto de pantalla y no llevan padding de sección */
  #sectores, #caso { height: 100svh !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  /* halos decorativos de ancho fijo */
  [data-r="halo"] { width: 86vw !important; height: 86vw !important; }
}

@media (max-width: 760px) {
  /* Corporativo · el arco de ocho contenidos pasa a lista en dos columnas */
  [data-arc-wrap] { width: 100% !important; margin-top: 54px !important; padding-top: 0 !important; }
  [data-arc-wrap] > div:first-of-type { aspect-ratio: auto !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 16px; text-align: left; }
  [data-arc], [data-arc] + div { display: none !important; }
  [data-node2] { position: static !important; width: auto !important; height: auto !important; }
  [data-node2] > span:first-child { display: none !important; }
  [data-node2] > span:last-child { position: static !important; transform: none !important; width: auto !important; align-items: flex-start !important; text-align: left !important; bottom: auto !important; left: auto !important; }
}

@media (max-width: 760px) {
  /* Estaciones · la línea de tiempo de la visita pasa a lista */
  [data-visit] { height: auto !important; margin-top: 56px !important; }
  [data-visit-line], [data-visit-dot], [data-visit-mark] { display: none !important; }
  [data-visit-mid] { position: static !important; transform: none !important; }
  [data-visit-grid] { position: static !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
  [data-visit-tick] { position: static !important; transform: none !important; align-items: flex-start !important; gap: 4px !important; white-space: normal !important; }

  /* Transporte · los cuatro puntos del recorrido pasan a lista */
  [data-pt] { position: static !important; width: auto !important; height: auto !important; }
  [data-pt-dot] { display: none !important; }
  [data-pt-label-wrap] { position: static !important; transform: none !important; width: auto !important; left: auto !important; right: auto !important; top: auto !important; text-align: left !important; align-items: flex-start !important; }

  /* Centros · el circuito de seis formatos se reparte en dos filas */
  [data-cir] { flex: 0 0 45% !important; }
}

@media (max-width: 760px) {
  div:has(> [data-cir]) { flex-wrap: wrap !important; row-gap: 26px !important; }

  /* Transporte · la órbita de contenidos pasa a lista con la ficha del conector arriba */
  [data-orbit] { aspect-ratio: auto !important; width: 100% !important; margin-top: 48px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  [data-orbit-deco] { display: none !important; }
  [data-orbit-card] { position: static !important; transform: none !important; grid-column: 1 / -1; width: 100% !important; aspect-ratio: auto !important; border-radius: 16px !important; padding: 24px !important; }
}

@media (max-width: 760px) {
  /* Estaciones · la parrilla de la red cabe apretando columnas y tipografía */
  [data-parrilla] { grid-template-columns: 40px repeat(4, minmax(0, 1fr)) !important; font-size: 8.5px !important; gap: 4px !important; padding: 12px !important; }
  [data-parrilla] > div { padding: 6px 4px !important; letter-spacing: 0 !important; }
}

@media (max-width: 760px) {
  /* Home · la agenda semanal aprieta columnas para caber */
  [data-agenda] { grid-template-columns: 40px repeat(3, minmax(0, 1fr)) !important; font-size: 8.5px !important; gap: 4px !important; padding: 12px !important; }
  [data-agenda] > div { padding: 6px 4px !important; letter-spacing: 0 !important; }
  /* Home · el registro de reproducción */
  [data-playlog] { grid-template-columns: 58px minmax(0,1fr) minmax(0,1fr) 40px !important; }
}

@media (max-width: 760px) {
  /* margen lateral mínimo: ninguna sección pega el texto al borde */
  section, header, footer { padding-left: 26px !important; padding-right: 26px !important; }
  [data-gal-track] { padding-left: 26px !important; padding-right: 26px !important; }
}

@media (max-width: 760px) {
  /* Home · el bloque de texto sobre el vídeo sube para que no se corte el párrafo */
  [data-sc-copy] { margin-bottom: clamp(84px, 13vh, 130px) !important; }
}

@media (max-width: 760px) {
  /* los guiones entre nodos sobran cuando el diagrama se envuelve */
  [data-dash] { display: none !important; }
}


@media (max-width: 760px) {
  /* «En el mundo real» · el interior mide 100vh: la sección no lleva padding propio */
  #galeria, #real, #ruta, #planta, #sede { padding-top: 0 !important; padding-bottom: 0 !important; }
  [data-gal-inner] { padding-bottom: clamp(24px, 5vh, 50px) !important; }
}

@media (max-width: 760px) {
  /* Integraciones · en el héroe sobra el enlace secundario y el botón va en una línea */
  #top [data-hero-cta] a[href="#flujo"] { display: none !important; }
  #top [data-hero-cta] a[href="#demo"] { white-space: nowrap !important; padding: 15px 26px !important; font-size: 14.5px !important; }
}

@media (max-width: 760px) {
  /* Integraciones · el mecanismo queda estático: el titular no cambia de sitio */
  #flujo > div:first-of-type { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  [data-fl-step] { display: none !important; }
}

@media (max-width: 760px) {
  /* IA · la barra del asistente escribe en una sola línea y no crece en vertical */
  [data-ai-bar] { flex-wrap: nowrap !important; padding: 14px 18px !important; gap: 10px !important; }
  [data-ai-bar] > span:nth-child(2) { min-width: 0 !important; flex: 1 1 0 !important; overflow: hidden !important; white-space: nowrap !important; justify-content: flex-start !important; font-size: 13.5px !important; }
  [data-ai-bar] [data-typed] { white-space: nowrap !important; }
  [data-ai-bar] > span:last-child { display: none !important; }
}

@media (max-width: 760px) {
  /* héroes · kicker más compacto y titular sin cortes raros */
  [data-hero-kicker] { font-size: 10.5px !important; letter-spacing: .2em !important; align-items: flex-start !important; line-height: 1.5 !important; }
  [data-hero-title] { font-size: clamp(34px, 10vw, 50px) !important; text-wrap: pretty !important; }
}

@media (max-width: 760px) {
  /* Registro · fuera el enlace secundario del héroe */
  #top [data-hero-cta] a[href="#log"] { display: none !important; }
  #top [data-hero-cta] a[href="#demo"] { white-space: nowrap !important; }
}

@media (max-width: 760px) {
  /* héroes · más aire entre piezas y titular menos apretado */
  [data-hero-content] { gap: 28px !important; }
  [data-hero-content][data-hero-pad] { padding-top: 136px !important; padding-bottom: 100px !important; }
  [data-hero-title] { line-height: 1.05 !important; }
  [data-hero-sub] { font-size: 16px !important; line-height: 1.7 !important; }
  [data-hero-cta] { flex-wrap: wrap !important; gap: 14px !important; padding-top: 24px !important; }
  [data-hero-cta] > a:first-child { width: 100% !important; justify-content: center !important; box-sizing: border-box; }
  [data-ticker-wrap] { margin-top: 34px !important; }
}

@media (max-width: 760px) {
  /* Registro · cabecera de la sección en columna: el contador no aplasta el titular */
  #log > div:first-of-type { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; }
  #log > div:first-of-type > div:last-child { align-items: flex-start !important; }

  /* Registro · cada línea del log pasa a dos filas legibles */
  [data-log-head] { display: none !important; }
  [data-log-rows] > * {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 3px 12px !important;
    padding: 11px 0 !important;
    font-size: 11px !important;
    letter-spacing: .02em !important;
  }
  [data-log-rows] > * > :nth-child(1) { grid-area: 1 / 1 / 2 / 2; font-size: 10px !important; color: #8A857A !important; }
  [data-log-rows] > * > :nth-child(4) { grid-area: 1 / 2 / 2 / 3; text-align: right !important; font-size: 10px !important; }
  [data-log-rows] > * > :nth-child(2) { grid-area: 2 / 1 / 3 / 3; font-size: 12.5px !important; }
  [data-log-rows] > * > :nth-child(3) { grid-area: 3 / 1 / 4 / 2; font-size: 10px !important; color: #B9B3A6 !important; }
  [data-log-rows] > * > :nth-child(5) { grid-area: 3 / 2 / 4 / 3; text-align: right !important; font-size: 10px !important; }
}

@media (max-width: 760px) {
  /* Registro · la pastilla «GRABANDO» sin el punto, que no cabía */
  [data-rec-pill] { font-size: 0 !important; padding: 4px 9px !important; }
  [data-rec-pill]::after { content: "GRABANDO"; font-size: 10px; letter-spacing: .06em; }
}

@media (max-width: 760px) {
  /* cabeceras de secciones tipo diagrama: titular arriba, contador debajo */
  #plano > div:first-of-type,
  #plantas > div:first-of-type,
  #trayecto > div:first-of-type { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; flex-wrap: wrap !important; }
  #plano > div:first-of-type > div:last-child,
  #plantas > div:first-of-type > div:last-child,
  #trayecto > div:first-of-type > div:last-child { align-items: flex-start !important; }
}

@media (max-width: 760px) {
  /* «Qué cambia» · las tres fichas, a la misma distancia */
  #gana [data-kpi] { transform: none !important; }
  #gana [data-r="2col"], [data-gana-cards] { gap: 16px !important; }
}

@media (max-width: 760px) {
  /* la ficha central lleva un desfase de -30px pensado para escritorio */
  #gana [data-kpi] { margin: 0 !important; }
}

@media (max-width: 760px) {
  /* héroes · el titular usa todo el ancho (en escritorio va limitado por ch) */
  [data-hero-title], [data-hero-sub] { max-width: none !important; }
}

@media (max-width: 760px) {
  /* Transporte · «El trayecto»: fuera el punto con halo (su recorrido lo movía el pin)
     y puntos centrados sobre la línea */
  #trayecto [data-tr-marker], #trayecto [data-tr-line] { display: none !important; }
  #trayecto [data-tr-dot] { margin-top: 8px !important; }
}

@media (max-width: 760px) {
  /* Transporte · ficha del conector: el padding entraba fuera del ancho */
  [data-orbit-card] { box-sizing: border-box !important; }
  /* etiquetas numeradas, algo más grandes */
  [data-pt-label] { font-size: 15px !important; line-height: 1.25 !important; }
  [data-pt-n] { font-size: 11.5px !important; }
}

@media (max-width: 760px) {
  /* Centros · el selector de plantas pasa a fila de pestañas (en columna quedaba aplastado) */
  #plantas [data-dir] [data-r="stack"] > div:first-child,
  #plantas [data-r="stack"] > div:first-child { flex-direction: row !important; border-right: none !important; border-bottom: 1px solid #EDEAE3 !important; padding: 0 !important; }
  #plantas [data-floor] { flex: 1 1 0 !important; min-height: 46px !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 2px !important; padding: 8px 10px !important; }
  #plantas [data-floor-bar] { display: none !important; }
  #plantas [data-floor-lvl] { font-size: 15px !important; }
  #plantas [data-floor-tag] { font-size: 8.5px !important; }
}

@media (max-width: 760px) {
  /* footer · el logotipo gigante cabe entero */
  [data-bigmark] { font-size: clamp(40px, 15vw, 68px) !important; margin-left: 0 !important; letter-spacing: -0.03em !important; }
}

@media (max-width: 760px) {
  /* Corporativo · «Qué puedes gestionar»: la ficha del panel encabeza la lista y los ocho
     contenidos pasan a tarjetas legibles */
  [data-arc-wrap] > div:first-of-type { gap: 12px !important; align-items: stretch !important; }
  [data-arc-wrap] > div > div:last-of-type {
    position: static !important; transform: none !important; order: -1; grid-column: 1 / -1;
    width: 100% !important; height: auto !important; aspect-ratio: auto !important;
    border-radius: 16px !important; padding: 22px !important; box-sizing: border-box !important;
    margin: 0 0 6px !important; left: auto !important; bottom: auto !important;
  }
  [data-node2] { border: 1px solid #E6E3DB; border-radius: 12px; background: #FFFFFF; padding: 13px 14px !important; box-sizing: border-box; }
  [data-node2-label] { font-size: 15px !important; line-height: 1.25 !important; }
  [data-node2-meta] { font-size: 9.5px !important; }
}

@media (max-width: 760px) {
  /* Corporativo · «Qué cambia»: número + titular arriba, texto a ancho completo */
  [data-gline-wide] { grid-template-columns: 34px minmax(0, 1fr) !important; row-gap: 10px !important; column-gap: 12px !important; align-items: baseline !important; }
  [data-gline-wide] > :nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
  [data-gline-wide] > :nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
  [data-gline-wide] > :nth-child(3) { grid-area: 2 / 1 / 3 / 3; }
}

/* Filas de tabla de los documentos legales: apilan juntas, no como párrafos sueltos */
@media (max-width: 1000px) {
  [data-tabla-fila] {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    padding: 16px 0 !important;
  }
}

@media (max-width: 760px) {
  /* filas de etiquetas mono conmutables (fuentes, puntos): envuelven en vez de desbordar */
  [data-r="wrap"] { flex-wrap: wrap !important; row-gap: 8px !important; column-gap: 14px !important; }

  /* footer · enlaces de columna con área táctil suficiente */
  footer [data-r="stack"] > div { gap: 0 !important; }
  footer [data-r="stack"] a { padding: 9px 0 !important; }
}