/* Adaptación a tableta y móvil. */
/* Desde 1100 px el menú se vuelve desplegable */
@media (max-width: 1100px) {
  .nav-wrap { display: flex; justify-content: space-between; padding-top: 0; min-height: 72px; }
  .menu-toggle { display: flex; flex-direction: column; gap: 5px; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); cursor: pointer; }
  .menu-toggle span { width: 17px; height: 2px; background: var(--ink); margin-inline: auto; }
  .primary-nav { display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; max-height: calc(100vh - 80px); overflow-y: auto; padding: 1rem max(18px, calc((100% - 1160px) / 2)) 1.2rem; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 18px 25px rgba(25, 47, 77, .08); flex-direction: column; gap: 0; }
  .primary-nav.open { display: flex; }
  .nav-links { order: 1; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0; border-top: 0; }
  .nav-links a { padding: .72rem .3rem; font-size: .86rem; border-bottom: 1px solid var(--line); }
  .nav-top { order: 2; justify-self: stretch; flex-direction: row-reverse; justify-content: space-between; margin-top: .8rem; }
  .nav-site { font-size: .86rem; }
}

@media (max-width: 1000px) {
  .primary-nav { gap: .8rem; }
  .primary-nav a { font-size: .72rem; }
  .brand-name { font-size: .7rem; }
  .brand-name b { font-size: .75rem; }
  .hero { gap: 2rem; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .def-grid, .compare, .lab, .wk-grid, .checks-row { grid-template-columns: 1fr; }
  .lab-side { position: static; }
  .cycle-card { max-width: 640px; }
}

@media (max-width: 820px) {
  .nav-wrap, .section-shell, .footer-inner, .footer-bottom { width: min(100% - 36px, 720px); }
  .nav-wrap { min-height: 72px; }
  .tinted-section { padding-left: max(18px, calc((100% - 720px) / 2)); padding-right: max(18px, calc((100% - 720px) / 2)); }
  /* La línea de tiempo se vuelve vertical */
  .timeline { grid-template-columns: 1fr; gap: .1rem; }
  .tl-node { grid-template-columns: 46px auto; grid-template-rows: auto auto; justify-items: start; column-gap: .9rem; row-gap: 0; text-align: left; align-items: center; }
  .tl-dot { grid-row: 1 / 3; }
  .tl-item:not(:last-child)::after { top: 52px; bottom: -4px; left: 24px; right: auto; width: 3px; height: auto; }
}

@media (max-width: 560px) {
  .nav-wrap, .section-shell, .footer-inner, .footer-bottom { width: calc(100% - 32px); }
  .brand-name { max-width: 180px; }
  .hero { padding-top: 2.5rem; padding-bottom: 3rem; }
  .hero h1 { font-size: clamp(2.5rem, 13vw, 3.4rem); }
  .hero-actions .button { width: 100%; }
  .content-section { padding-top: 4rem; padding-bottom: 4rem; }
  .section-heading { margin-bottom: 2rem; }
  .tinted-section { padding-left: 16px; padding-right: 16px; }
  .scene-caption { min-height: 150px; }
  .seg { font-size: .74rem; padding: .45rem .65rem; }
  .build-bar .button { flex: 1 1 100%; }
  .footer-inner { align-items: flex-start; flex-wrap: wrap; }
  .footer-inner > p { order: 3; width: 100%; }
  .footer-bottom { flex-direction: column; gap: .35rem; }
}