/* ============================================================
   IANodus — Mobile responsive layer (Phase 0)
   ------------------------------------------------------------
   Estrategia: el sitio usa inline styles con valores px duros.
   En lugar de reescribir toda la SPA, este fichero anade clases
   .ln-* y reglas !important que se aplican SOLO bajo
   max-width: 900px (donde se desea reducir todo) y un set de
   ajustes de tipografia fluida en otros breakpoints.
   ============================================================ */

/* ---------- Tipografia fluida global (todos los viewports) -- */
.ln-root h1, .ln-root h2, .ln-root h3 {
  text-wrap: balance;
}

/* ---------- Tap-target accesible para anchors / botones --- */
.ln-tap-44 {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   BREAKPOINT: tablet pequeno y movil (<= 900px)
   ============================================================ */
@media (max-width: 900px) {

  /* ----- Reset general de grids: todo a 1 columna ---------- */
  [style*="grid-template-columns"],
  [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
  }

  /* min-height 100vh -> auto en bloques de seccion sticky/normal */
  [style*="min-height: 100vh"],
  [style*="minHeight: '100vh'"],
  [style*="minHeight:\"100vh\""] {
    min-height: auto !important;
  }

  /* ----- Padding en secciones grandes ----------------------- */
  [style*="padding: 120px 60px"],
  [style*="padding: 140px 60px"],
  [style*="padding: 160px 60px"],
  [style*="padding: 180px 60px"],
  [style*="padding: 160px 40px"],
  [style*="padding: 140px 40px"],
  [style*="padding: 180px 60px 100px"],
  [style*="padding: 140px 40px 120px"] {
    padding: 88px 22px 56px !important;
  }
  [style*="padding: 80px 60px"],
  [style*="padding: 100px 60px"],
  [style*="padding: 100px 60px 120px"] {
    padding: 56px 22px !important;
  }
  [style*="padding: 36px 60px"],
  [style*="padding: 48px 60px"],
  [style*="padding: 42px 60px"],
  [style*="padding: 56px 60px"] {
    padding: 36px 22px !important;
  }
  [style*="padding: 0 40px 60px"] { padding-left: 22px !important; padding-right: 22px !important; }
  [style*="padding: 0 40px"] { padding-left: 22px !important; padding-right: 22px !important; }

  /* Hero: padding inferior conservado, lateral compactado */
  [style*="padding: 0 40px 80px"] {
    padding: 0 22px 56px !important;
  }

  /* Bordes laterales generales */
  [style*="padding: 60px 60px 80px"],
  [style*="padding: 80px 60px 120px"],
  [style*="padding: 80px 60px"],
  [style*="padding: 100px 60px 120px"],
  [style*="padding: 40px 60px 80px"],
  [style*="padding: 40px 60px 120px"] {
    padding: 56px 22px !important;
  }

  /* Header navbar */
  [style*="padding: 20px 40px"],
  [style*="padding: 30px 40px"],
  [style*="padding: 28px 40px"],
  [style*="padding: 32px 40px"] {
    padding: 14px 18px !important;
    gap: 10px !important;
  }

  /* ----- Tipografia: escalado fluido seguro ----------------- */
  .ln-root h1 {
    font-size: clamp(40px, 12.5vw, 84px) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.025em !important;
    word-break: break-word;
  }
  .ln-root h2 {
    font-size: clamp(34px, 10.5vw, 72px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.022em !important;
    word-break: break-word;
  }
  .ln-root h3 {
    font-size: clamp(26px, 7.8vw, 44px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.018em !important;
  }
  .ln-root p {
    font-size: clamp(15px, 4.2vw, 17px) !important;
    line-height: 1.55 !important;
  }

  /* ----- Hero ---------------------------------------------- */
  /* Hero column (chapter 01) — en mobile dejamos top padding generoso
     para que el eyebrow nunca colisione con la navbar y el bloque de
     CTA quede en la parte inferior con respiracion suficiente. */
  [data-chapter="01"] > div[style*="justifyContent: flex-end"],
  [data-chapter="01"] > div[style*="justify-content: flex-end"] {
    padding: 100px 22px 48px !important;
    justify-content: flex-end !important;
  }
  /* Forzar que la columna del hero respete el viewport real de Safari
     (svh evita la barra dinamica empujando el contenido) */
  [data-chapter="01"] > div[style*="justifyContent: flex-end"] {
    min-height: 100svh !important;
    min-height: 100vh; /* fallback */
  }

  /* Eyebrow del hero (Agentes con experiencia · Vol. 01) */
  .ln-hero-eyebrow {
    font-size: 10px !important;
    letter-spacing: 1.4px !important;
    flex-wrap: wrap;
    line-height: 1.4 !important;
    margin-bottom: 18px !important;
  }
  .ln-hero-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 12px !important;
  }
  .ln-hero-cta-row > a {
    text-align: center;
    padding: 16px 22px !important;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ln-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  /* Hero h1: especifico para tener jerarquia distinta del resto de h1 */
  [data-chapter="01"] h1 {
    font-size: clamp(54px, 16vw, 110px) !important;
    line-height: 0.88 !important;
    letter-spacing: -0.035em !important;
    margin-bottom: 22px !important;
  }
  [data-chapter="01"] p {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* ----- Top navbar: hamburger ----------------------------- */
  .ln-nav-desktop { display: none !important; }
  .ln-nav-burger { display: inline-flex !important; }

  /* Cuando hamburger menu esta abierto: full-screen overlay */
  /* z-index alto: el FAB de contacto vive a 1000, asi que este overlay
     debe quedar por encima para que su CTA "Hablemos" no quede tapado. */
  .ln-nav-mobile-overlay {
    position: fixed;
    inset: 0;
    background: #0c0a08;
    z-index: 1100;
    padding: 88px 26px 40px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Cuando el menu hamburger esta abierto, ocultamos el FAB de
     contacto (cinematic.jsx anade .menu-open al <body> en el effect
     del overlay). Es mas limpio que pelear z-index. */
  body.menu-open .ln-fab-toggle,
  body.menu-open .ln-fab-panel {
    display: none !important;
  }
  .ln-nav-mobile-overlay a {
    font-family: var(--ln-display);
    font-size: 32px;
    line-height: 1.4;
    color: #efe8db;
    text-decoration: none;
    padding: 14px 0;
    border-bottom: 1px solid rgba(239,232,219,0.12);
    letter-spacing: -0.01em;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ln-nav-mobile-overlay a span.idx {
    font-family: var(--ln-mono);
    font-size: 11px;
    color: #e6693a;
    letter-spacing: 2px;
  }

  /* Logo IANodus en navbar mas pequeno y nunca se cubre */
  .ln-nav-logo {
    font-size: 17px !important;
  }

  /* ----- Marquee tipografico -------------------------------- */
  [style*="ln-marquee"] img { max-height: 40px !important; }

  /* ----- Servicios (zigzag) -------------------------------- */
  /* La columna de imagen siempre debajo del texto */
  .ln-svc-panel {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
  }
  .ln-svc-panel > div:first-child { padding: 56px 22px 24px !important; }
  .ln-svc-panel > div:nth-child(2) {
    aspect-ratio: 4 / 3;
    min-height: 0 !important;
    border-left: none !important;
    border-right: none !important;
    order: 2;
  }
  .ln-svc-text { transform: none !important; }
  .ln-svc-img-wrap img {
    transform: none !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
  }

  /* ----- Casos (panels zig-zag) ---------------------------- */
  .ln-case-panel {
    display: flex !important;
    flex-direction: column !important;
  }
  .ln-case-panel > div:nth-child(2) {
    aspect-ratio: 16 / 9;
    order: 2;
    border-left: none !important;
    border-right: none !important;
  }
  .ln-case-panel > div:first-child {
    padding: 28px 22px 22px !important;
    transform: none !important;
  }
  .ln-case-text-strip { padding: 28px 22px 24px !important; }

  /* ----- Como funciona (filas de fases) ------------------ */
  .ln-how-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 28px 22px !important;
  }
  .ln-how-row .ln-how-num {
    font-size: 88px !important;
    line-height: 0.85 !important;
  }
  .ln-how-row h3 {
    font-size: clamp(28px, 7vw, 36px) !important;
  }
  .ln-how-row .ln-how-cta {
    text-align: left !important;
    grid-column: 1 / -1 !important;
  }
  .ln-how-row .ln-how-arrow {
    text-align: left !important;
    font-size: 24px !important;
  }

  /* Subtitle "Seis fases. Produccion." en How */
  .ln-how-footer {
    flex-direction: column !important;
    gap: 18px !important;
    align-items: flex-start !important;
  }
  .ln-how-footer > div:first-child {
    font-size: clamp(36px, 9vw, 56px) !important;
  }

  /* ----- Equipo: 4 columnas -> 2 columnas en movil --------- */
  .ln-team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ln-team-grid > div { aspect-ratio: 3 / 4 !important; }
  .ln-team-grid .ln-portrait-bottom {
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
  }
  .ln-team-grid .ln-portrait-bottom > div:nth-child(2) {
    font-size: 18px !important;
  }

  /* CV modal: full screen y stack */
  .ln-cv-modal {
    width: 100% !important;
    max-height: 100vh !important;
    height: 100vh !important;
    grid-template-columns: 1fr !important;
  }
  .ln-cv-modal > div:first-child {
    aspect-ratio: 4 / 3;
    min-height: 0 !important;
  }
  .ln-cv-modal > div:nth-child(2) {
    padding: 28px 22px !important;
    overflow-y: auto;
  }

  /* ----- Probes ------------------------------------------- */
  .ln-probe-section {
    min-height: auto !important;
    padding: 64px 22px !important;
  }
  .ln-probe-section h2 {
    font-size: clamp(36px, 10vw, 64px) !important;
  }
  .ln-probe-options {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .ln-probe-options button {
    min-height: 56px;
    padding: 16px 18px !important;
    font-size: 15px !important;
  }
  .ln-probe-recap {
    padding: 18px 22px !important;
  }
  .ln-probe-recap > div { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }

  /* ----- Diagnosis ---------------------------------------- */
  .ln-diagnosis-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* ----- Insights / blog ---------------------------------- */
  .ln-blog-grid {
    grid-template-columns: 1fr !important;
  }
  .ln-blog-grid > a {
    min-height: 0 !important;
  }
  .ln-blog-grid > a > div:first-child {
    aspect-ratio: 16 / 10 !important;
  }

  /* ----- Productos ---------------------------------------- */
  .ln-products-grid {
    grid-template-columns: 1fr !important;
    gap: 56px !important;
  }
  .ln-products-header { display: flex !important; flex-direction: column !important; gap: 24px !important; }

  /* ----- Contacto ----------------------------------------- */
  .ln-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
    padding: 96px 22px 48px !important;
  }
  .ln-contact-grid input,
  .ln-contact-grid textarea {
    font-size: 22px !important;
  }
  .ln-contact-channels {
    gap: 8px !important;
    flex-wrap: wrap;
  }
  .ln-contact-channels a {
    font-size: 11px !important;
    padding: 10px 14px !important;
    min-height: 44px;
  }

  /* ----- Footer ------------------------------------------- */
  .ln-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  .ln-footer-grid > div:first-child {
    grid-column: 1 / -1 !important;
    font-size: 22px !important;
  }
  .ln-footer-meta {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
  .ln-footer-manifesto {
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: 1.15 !important;
    min-height: 0 !important;
    padding: 64px 22px !important;
  }

  /* ----- Marker de capitulo (CXX --- LABEL) ---------------- */
  .ln-chapter-marker {
    top: 76px !important;
    left: 18px !important;
    right: auto !important;
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
  }
  .ln-chapter-marker > span:nth-child(2) { width: 16px !important; }

  /* ----- HUD: ocultar readouts si quedan apretados -------- */
  .ln-hud-readout {
    font-size: 9px !important;
    bottom: 14px !important;
    right: 18px !important;
  }

  /* ----- Floating Contact (FAB) --------------------------- */
  .ln-fab-toggle {
    width: 56px !important;
    height: 56px !important;
    right: 14px !important;
    bottom: 14px !important;
  }
  .ln-fab-panel {
    right: 14px !important;
    bottom: 78px !important;
  }
  .ln-fab-panel a {
    min-width: 150px !important;
    padding: 12px 16px !important;
    min-height: 44px;
  }

  /* ----- Botones genericos: tap targets ------------------- */
  button, a[style*="border:"] {
    /* ensure clickable elements meet min height when not specifically styled */
  }

  /* ----- Marquee body sub: gap controlled ----------------- */
  [style*="gap: 80px"] { gap: 28px !important; }
  [style*="gap: 60px"] { gap: 22px !important; }
  [style*="gap: 40px"] { gap: 18px !important; }

  /* Volver a casos boton */
  [aria-label="Volver a casos"],
  [aria-label="Back to cases"] {
    top: 14px !important;
    left: 14px !important;
    width: 44px !important;
    height: 44px !important;
  }
  [aria-label="Volver a casos"] + div,
  [aria-label="Back to cases"] + div {
    display: none !important;
  }

  /* ===== Detail overlays (case study, diagnosis) ===== */
  .ln-overlay-padding-fix [style*="padding: 160px 60px"],
  .ln-overlay-padding-fix [style*="padding: 100px 60px"],
  .ln-overlay-padding-fix [style*="padding: 60px 60px 80px"],
  .ln-overlay-padding-fix [style*="padding: 0 60px"] {
    padding: 56px 22px !important;
  }
}

/* ============================================================
   BREAKPOINT: phone landscape (<= 480px height)
   - Mantener legibilidad sin romper la composicion
   ============================================================ */
@media (max-width: 480px) {
  .ln-root h1 { font-size: clamp(36px, 13vw, 64px) !important; }
  .ln-root h2 { font-size: clamp(30px, 11vw, 56px) !important; }
}

/* ============================================================
   PREFERS-REDUCED-MOTION: simplificar parallax y animaciones
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ln-root [style*="willChange"],
  .ln-root [style*="will-change"] {
    transform: none !important;
  }
}

/* ============================================================
   BREAKPOINT: tablet (901-1100px) — ajustes finos
   ============================================================ */
@media (min-width: 901px) and (max-width: 1100px) {
  .ln-root h1 { font-size: clamp(56px, 9vw, 96px) !important; }
}