/* AddStudio · responsive.css — corrección de recorte en teléfono y tablet.
   Regla: mobile-first, cero anchos fijos en contenedores, cero scroll horizontal.
   Cargar DESPUÉS del estilo de cada página para que sus reglas manden. */

/* ---------- Base: nada se sale del ancho ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }
* { min-width: 0; }

/* Contenedores con relleno fluido en vez de 2rem fijos */
.container, .nav-inner {
  max-width: 1280px;
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}
.section { padding: clamp(2.5rem, 6vw, 5.5rem) 0; }

/* Rejillas fluidas: nunca exigen más ancho que la pantalla */
[class*="grid"], .cards, .features, .steps, .projects, .pricing {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.project-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* Texto largo sin desbordar */
h1, h2, h3, p, li { overflow-wrap: anywhere; }
h1 { font-size: clamp(1.75rem, 6vw, 3.25rem); line-height: 1.12; }
h2 { font-size: clamp(1.4rem, 4.2vw, 2.25rem); }

/* Zonas táctiles cómodas */
.btn, .tag, .sidebar-item, .nav-cta { min-height: 44px; }

/* ---------- Barra superior ---------- */
@media (max-width: 900px) {
  .nav { height: 56px; }
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
}

/* ---------- Menú móvil ---------- */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 0; color: inherit; cursor: pointer;
}
@media (max-width: 900px) { .nav-toggle { display: inline-flex; } }

/* Panel del menú móvil: oculto por defecto, se abre con .is-open */
.nav-mobile {
  display: none;
  position: fixed; top: 56px; left: 0; right: 0; z-index: 99;
  background: var(--color-surface-raised, #0E1630);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 1rem clamp(1rem, 4vw, 2rem) 1.25rem;
}
.nav-mobile.is-open { display: block; }
.nav-mobile a {
  display: block; padding: .875rem 0; min-height: 44px;
  color: var(--color-text-secondary, #AAB4CE);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-mobile a:last-child { border-bottom: 0; }

/* ---------- Estudio y Proyectos: la barra lateral se vuelve barra inferior ---------- */
@media (max-width: 768px) {
  .sidebar {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; height: 56px;
    flex-direction: row; align-items: center;
    border-right: 0; border-top: 1px solid rgba(255,255,255,.07);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .sidebar-logo { display: none; }
  .sidebar-nav {
    flex-direction: row; flex: 1; justify-content: space-around;
    padding: .25rem; gap: 0;
  }
  .sidebar-bottom {
    flex-direction: row; border-top: 0;
    border-left: 1px solid rgba(255,255,255,.07);
    padding: .25rem;
  }
  .sidebar-item { width: 48px; height: 48px; }

  /* Espacio para que la barra inferior no tape el contenido */
  .main, .main-body, .content, .layout-main {
    margin-left: 0;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0));
  }
  .main-body { padding-left: 1rem; padding-right: 1rem; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .main-body { max-width: 100%; }
}

/* ---------- Formularios y paneles ---------- */
input, textarea, select, button { max-width: 100%; font-size: max(16px, 1rem); }
.panel, .sidebar-panel, .options-panel { width: 100%; max-width: 100%; }

/* ---------- Tablas: scroll dentro de su caja, nunca en la página ---------- */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { max-width: 100%; }

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
:focus-visible { outline: 2px solid var(--color-brand-cyan-400, #3EE6FF); outline-offset: 2px; }