/* Hinswer — capa de pulido responsive y accesibilidad */
:root { --site-max: 1200px; --safe-x: clamp(16px, 4vw, 48px); }
html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { min-width: 0; overflow-x: clip; }
img, svg, video, canvas, iframe { max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(5,150,105,.38);
  outline-offset: 3px;
}
:is(.sec, .hero, footer, .footer) { overflow-wrap: anywhere; }
:is(.rubros-header,.rubros-grid,.steps,.porq-grid,.testi-grid,.metodo-grid,.contacto-inner,.servicios-intro,.servicios-grid,.portafolio-header,.port-grid,.stats-bar) {
  width: 100%; max-width: var(--site-max); margin-left: auto; margin-right: auto;
}
:is(.rubros-grid,.servicios-grid,.steps,.testi-grid,.port-grid,.pains,.gets) > *,
:is(.caso-inner,.metodo-grid,.contacto-inner,.servicios-intro,.rubros-header) > * { min-width: 0; }

/* Mejor comportamiento de botones y formularios */
:is(.btn-dark,.btn-light,.nav-cta,.nav-mobile-cta,.audit-btn,.btn-wa,.btn-solid,.top-cta,button[type="submit"]) {
  min-height: 44px;
}
input, select, textarea {
  max-width: 100%;
  min-height: 44px;
}
textarea { min-height: 110px; resize: vertical; }

/* Navegación principal */
nav { padding-left: var(--safe-x); padding-right: var(--safe-x); }
.nav-hamburger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 10px; }
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile-menu {
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 14px 32px rgba(10,54,34,.08);
}
.nav-mobile-menu a { min-height: 44px; display: flex; align-items: center; }
.nav-mobile-menu .nav-mobile-cta { justify-content: center; }

/* Hero y bloques principales */
.hero { min-height: min(100svh, 920px); }
.hero-content, .hero-in { min-width: 0; }
.hero h1, h1 { text-wrap: balance; }
h2, h3 { text-wrap: balance; }
.hero-sub, .sec-sub { text-wrap: pretty; }

/* Evita que elementos flotantes tapen contenido en móviles */
.wa-btn, .wa-float { margin-bottom: env(safe-area-inset-bottom, 0px); }
.wa-bubble { max-width: min(260px, calc(100vw - 88px)); }

/* Imágenes faltantes: el JS aplica un fallback limpio */
img.is-img-fallback {
  object-fit: contain !important;
  background: #F0FAF5;
  border-color: #C2E0CF;
}

/* Landing pages de rubro */
.topbar-in, .hero-in, .sec { width: 100%; }
.topbar-in { gap: 14px; }
.top-cta { white-space: nowrap; }
.form-wrap { width: min(100%, 640px); }
.audit, .dron-box, .results-strip { min-width: 0; }

/* Tablas / contenido ancho */
table { max-width: 100%; }
pre, code { overflow-wrap: anywhere; }

@media (max-width: 1200px) {
  .sec { padding-left: 28px; padding-right: 28px; }
}

@media (max-width: 1024px) {
  .hero-scroll { display: none; }
  .nav-mobile-menu { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .audit-band { align-items: flex-start; }
  .audit-band .audit-cta { width: 100%; }
  .audit-band .audit-btn { justify-content: center; text-align: center; }
}

@media (max-width: 720px) {
  :root { --safe-x: 16px; }
  html { scroll-padding-top: 72px; }
  nav { height: 60px; }
  .nav-mobile-menu { top: 60px; max-height: calc(100dvh - 60px); }
  .logo { min-width: 0; }
  .logo-sub { display: none; }

  .hero { min-height: auto; padding: 104px 16px 68px; }
  .hero-in { padding: 64px 18px 56px !important; }
  .hero-badge { margin-bottom: 24px; line-height: 1.35; text-align: left; }
  .hero h1, h1 { font-size: clamp(34px, 10vw, 46px); letter-spacing: -1.6px; line-height: 1.04; }
  .hero-sub, .hero p { font-size: 15px; line-height: 1.65; margin-bottom: 30px; }
  .hero-btns { width: 100%; gap: 10px; }
  .hero-btns > a { width: 100%; max-width: 360px; justify-content: center; text-align: center; }

  .sec { padding: 56px 16px !important; }
  .sec[style*="padding-top:0"], .sec[style*="padding-top: 0"] { padding-top: 0 !important; }
  .sec-label { margin-bottom: 12px; }
  h2 { font-size: clamp(27px, 8vw, 36px); letter-spacing: -1px; }

  .rubros-header, .servicios-intro, .portafolio-header { margin-bottom: 36px; }
  .rubros-grid, .servicios-grid, .steps { border-radius: 18px; overflow: hidden; }
  .rubro-card, .serv-card, .step-item { padding: 26px 22px; }
  .rubro-eyebrow { margin-bottom: 22px; gap: 12px; }
  .rubro-roi { white-space: normal; text-align: right; }

  .caso-kpis { grid-template-columns: 1fr !important; }
  .dash-kpis, .dash-pills { grid-template-columns: 1fr !important; }
  .stats-bar { grid-template-columns: 1fr !important; }
  .sbar-item { border-right: 0 !important; border-bottom: 1px solid var(--border); }
  .sbar-item:last-child { border-bottom: 0; }

  .form-wrap, .form { padding: 26px 18px !important; border-radius: 18px !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .audit, .audit-band, .dron-box, .results-strip { padding: 28px 20px !important; border-radius: 18px !important; }
  .audit-cta, .dron-box-cta { width: 100%; }
  .audit-cta a, .dron-box-cta a { width: 100%; justify-content: center; text-align: center; }

  .topbar-in { padding: 10px 16px !important; }
  .topbar .logo { font-size: 15px; }
  .topbar .logo-h { width: 30px; height: 30px; flex: 0 0 30px; }
  .top-cta { padding: 9px 14px; font-size: 13px; }

  footer, .footer { padding-left: 16px !important; padding-right: 16px !important; }
  .footer-links { width: 100%; }
  .footer-copy { line-height: 1.55; }

  .wa-bubble { display: none !important; }
  .wa-btn { right: 12px !important; bottom: 12px !important; }
  .wa-float { right: 14px !important; bottom: 14px !important; }
}

@media (max-width: 420px) {
  .hero { padding-top: 94px; }
  .hero h1, h1 { font-size: 34px; }
  .hero-badge { font-size: 11px; }
  .top-cta { font-size: 12px; padding: 8px 11px; }
  .rubro-card, .serv-card, .step-item { padding: 24px 18px; }
  .audit-band .audit-btn { padding-left: 18px; padding-right: 18px; }
  .brand-item { width: 72px !important; height: 72px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .brands-track, .ticker { animation: none !important; transform: none !important; }
}