/* Red de seguridad global: ningún decorativo posicionado puede generar
   desplazamiento horizontal (clip no crea contexto de scroll como hidden). */
html, body { overflow-x: clip; max-width: 100%; }

/* Campos de formulario a 16px: por debajo de eso Safari iOS hace zoom al enfocar.
   !important porque los componentes del sistema los estilan en línea. */
input, select, textarea {
  font-size: 16px !important;
  font-family: var(--font-sans);
}

a { color: var(--violet-600); text-decoration: none; }
a:hover { color: var(--violet-700); text-decoration: underline; }
header nav a, header nav a:hover { text-decoration: none; white-space: nowrap; }

/* OKENTRA — Responsive overrides for the marketing site.
   These !important rules override React inline styles at mobile/tablet widths. */

/* ---- Tablet: shrink very wide multi-column grids ---- */
@media (max-width: 1024px) {
  /* section side padding a bit tighter */
  [style*="padding: 84px 28px"], [style*="padding: 88px 28px"], [style*="padding: 86px 28px"] {
    padding-left: 22px !important; padding-right: 22px !important;
  }
}

/* ---- Mobile: stack everything ---- */
@media (max-width: 768px) {
  /* Any CSS grid collapses to a single column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Big headings scale down */
  h1 { font-size: 32px !important; line-height: 1.12 !important; }
  h2 { font-size: 25px !important; line-height: 1.18 !important; }
  h3 { font-size: 19px !important; }

  /* Reduce heavy vertical section padding */
  [style*="padding: 84px 28px"] { padding: 52px 20px !important; }
  [style*="padding: 88px 28px"] { padding: 52px 20px !important; }
  [style*="padding: 86px 28px 92px"] { padding: 48px 20px 56px !important; }
  [style*="padding: 78px 28px 82px"] { padding: 44px 20px 52px !important; }
  [style*="padding: 84px 28px 72px"] { padding: 48px 20px 48px !important; }
  [style*="padding: 64px 28px 72px"] { padding: 40px 20px 48px !important; }

  /* Big pill/hero CTAs full width */
  [style*="font-size: 48px"], [style*="fontSize: 48px"] { font-size: 32px !important; }

  header > div { padding: 10px 18px !important; }
  header img { height: 32px !important; }

  /* ---- Stacked two-column blocks: image full width, never squeezed ---- */
  .ok-porque img { width: 100% !important; height: auto !important; }

  /* "Por qué OKentra": photo above the copy on small screens */
  .ok-porque { gap: 28px !important; padding: 52px 20px !important; }

  /* Client + tech logo strips: tighter spacing, smaller marks */
  .ok-marquee-track { gap: 40px !important; }
  .ok-marquee-track img { max-height: 26px !important; }
  .ok-tech-strip { gap: 20px 24px !important; justify-content: center !important; padding: 18px 20px !important; }
  .ok-tech-strip img { max-height: 14px !important; }

  /* Hub de pilares: en móvil el diagrama colapsa a columna única */
  .ok-hub { grid-template-columns: 1fr !important; gap: 16px !important; }
  .ok-hub > div:nth-child(2) { order: -1; }
  .ok-hub > div:nth-child(2) > div:first-child { display: none !important; }

  /* Cadena del ecosistema: en móvil se apila y las flechas giran */
  .ok-flujo { flex-direction: column !important; }
  .ok-flujo-arrow { justify-content: center !important; transform: rotate(90deg); }

  /* CTA buttons stack full width so nothing overflows */
  section a[href^="https://wa.me"] { justify-content: center !important; }
}

/* Especificaciones técnicas: 2 columnas en tablet, 1 en móvil */
@media (max-width: 1000px) {
  .ok-specs-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 640px) {
  .ok-specs-grid { grid-template-columns: 1fr !important; }
  .ok-specs-grid-2 { grid-template-columns: 1fr !important; }
}

/* Hero de módulo: en móvil el dispositivo va primero */
@media (max-width: 900px) {
  .ok-erp-diag { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ok-erp-diag > div:last-child { max-width: 420px; margin-inline: auto; }
  .ok-pv-cats, .ok-pv-3col, .ok-pv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-pv-2col { grid-template-columns: 1fr !important; }
  .ok-eco-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ok-hero-media { order: -1; }
}

/* Ecosistema Odoo: por debajo de 1000px el diagrama radial se apila */
@media (max-width: 1000px) {
  .ok-eco-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .ok-eco-center { order: -1; }
  .ok-eco-col { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .ok-eco-node { flex-direction: row !important; }
  .ok-eco-node span { text-align: left !important; }
}
@media (max-width: 560px) {
  .ok-pv-cats, .ok-pv-3col, .ok-pv-flow { grid-template-columns: 1fr !important; }
  .ok-eco-row { grid-template-columns: 1fr !important; }
  .ok-eco-col { grid-template-columns: 1fr !important; }
}

/* Cadena del ecosistema: entre 769 y 1000px va a grid de 2 columnas sin flechas */
@media (min-width: 769px) and (max-width: 1000px) {
  .ok-flujo { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .ok-flujo-arrow { display: none !important; }
}

/* Capacidades Wall: por debajo de 1100px el diagrama de 3 columnas se apila */
@media (max-width: 1100px) {
  .ok-cap-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .ok-cap-device { order: -1; }
  .ok-cap-card { flex-direction: row !important; text-align: left !important; }
  .ok-cap-device img { max-width: 260px !important; }
}

/* Entre 769 y 1100px las tarjetas apiladas van a dos columnas */
@media (min-width: 769px) and (max-width: 1100px) {
  .ok-cap-col { display: grid !important; grid-template-columns: 1fr 1fr !important; }
}

/* OKentra Acceso — láser del QR y efecto de validación */
.ok-qr-laser {
  position: absolute; left: 0; right: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(104,75,255,0) 0%, #684BFF 20%, #A786FA 50%, #684BFF 80%, rgba(104,75,255,0) 100%);
  box-shadow: 0 0 14px 3px rgba(104,75,255,.55);
  animation: ok-qr-scan 1.9s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes ok-qr-scan {
  0%   { top: 4%; opacity: 0; }
  12%  { opacity: 1; }
  50%  { top: 94%; opacity: 1; }
  62%  { opacity: 1; }
  100% { top: 4%; opacity: 0; }
}
.ok-ok-pop { animation: ok-pop 420ms cubic-bezier(.2,0,.2,1) both; }
@keyframes ok-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
.ok-ok-ring {
  position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(18,165,148,.6);
  animation: ok-ring 1.6s ease-out infinite;
}
@keyframes ok-ring { 0% { transform: scale(.85); opacity: .85; } 100% { transform: scale(1.5); opacity: 0; } }
.ok-ok-check { animation: ok-slide-in 380ms cubic-bezier(.2,0,.2,1) both; }
@keyframes ok-slide-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ok-qr-laser, .ok-ok-pop, .ok-ok-ring, .ok-ok-check { animation: none; }
  .ok-qr-laser { top: 48%; }
}

.ok-bell { animation: ok-bell 2.2s ease-in-out infinite; transform-origin: 50% 15%; }
@keyframes ok-bell {
  0%, 55%, 100% { transform: rotate(0); }
  60% { transform: rotate(13deg); } 66% { transform: rotate(-11deg); }
  72% { transform: rotate(8deg); }  78% { transform: rotate(-6deg); }
  84% { transform: rotate(3deg); }
}
.ok-tick { animation: ok-tick 2s steps(1) infinite; }
@keyframes ok-tick { 0%, 49% { transform: rotate(0); } 50%, 100% { transform: rotate(6deg); } }
.ok-blink { animation: ok-blink 1.4s ease-in-out infinite; }
@keyframes ok-blink { 0%, 100% { opacity: 1; } 50% { opacity: .38; } }
.ok-seal { animation: ok-seal 560ms cubic-bezier(.2,0,.2,1) both; }
@keyframes ok-seal {
  0% { transform: scale(1.9) rotate(-14deg); opacity: 0; }
  70% { transform: scale(.94) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.ok-msg { animation: ok-msg 420ms cubic-bezier(.2,0,.2,1) both; }
@keyframes ok-msg { from { opacity: 0; transform: translateY(7px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ok-bell, .ok-tick, .ok-blink, .ok-seal, .ok-msg { animation: none; }
}

/* Trust badge — píldora de credenciales (hero + footer) */
.ok-trust {
  display: inline-flex; align-items: center; flex-wrap: nowrap;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px; padding: 3px 4px; max-width: 100%;
}
.ok-trust > span {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 6px 16px; font-size: 13px; font-weight: 600; line-height: 1.35;
  color: #E6E8F0; white-space: nowrap;
}
.ok-trust > span:first-child { color: #FFFFFF; font-weight: 700; }
.ok-trust > span + span { border-left: 1px solid rgba(255,255,255,0.18); }
@media (max-width: 1023px) {
  /* Entre tablet y móvil la píldora se mantiene en una línea, más compacta */
  .ok-trust > span { padding: 6px 11px; font-size: 12px; gap: 6px; }
}
@media (max-width: 1100px) {
  /* Los tres segmentos en línea necesitan ~522px: por debajo de eso se apilan
     (la columna de texto del hero mide ~424px y los desbordaría). */
  .ok-trust { flex-direction: column; align-items: stretch; border-radius: 18px; padding: 4px; }
  .ok-trust > span { white-space: normal; text-align: center; padding: 10px 16px; font-size: 13px; }
  .ok-trust > span + span { border-left: none; border-top: 1px solid rgba(255,255,255,0.18); }
}

/* OKentra Acceso: grids y pestañas responsivas */
@media (max-width: 1100px) {
  .ok-grid-5 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .ok-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .ok-acc-tabs { grid-template-columns: 1fr !important; gap: 18px !important; }
}
@media (max-width: 900px) {
  .ok-erp-diag { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ok-erp-diag > div:last-child { max-width: 420px; margin-inline: auto; }
  .ok-pv-cats, .ok-pv-3col, .ok-pv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-pv-2col { grid-template-columns: 1fr !important; }
  .ok-eco-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .ok-grid-2 { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .ok-trust > span { font-size: 12.5px; padding: 9px 14px; }
}

/* ============================================================
 * Móvil — densidad, aire y tipografía fluida (auditoría UX)
 * ============================================================ */
@media (max-width: 768px) {
  /* 1 · Márgenes laterales garantizados: ningún texto toca el borde */
  [style*="max-width: 1240px"], [style*="max-width: 1120px"], [style*="max-width: 1040px"],
  [style*="max-width: 980px"], [style*="max-width: 880px"], [style*="max-width: 860px"],
  [style*="max-width: 820px"], [style*="max-width: 760px"], [style*="max-width: 720px"],
  [style*="max-width: 640px"] {
    padding-left: 20px !important; padding-right: 20px !important;
  }

  /* 2 · Tipografía fluida: el título gigante baja a una escala legible */
  h1 { font-size: clamp(28px, 8.2vw, 38px) !important; line-height: 1.14 !important; letter-spacing: -0.02em !important; }
  h2 { font-size: clamp(22px, 6.2vw, 28px) !important; line-height: 1.2 !important; }
  h3 { font-size: clamp(17px, 4.6vw, 20px) !important; line-height: 1.3 !important; }

  /* 3 · Interlineado cómodo y ancho de línea acotado en párrafos */
  section p, footer p, main p { line-height: 1.6 !important; }
  section p { max-width: 62ch !important; }

  /* 4 · Respiro entre título → párrafo → botones */
  h1 + p, h2 + p, h3 + p { margin-top: 16px !important; }
  p + div, h1 + div, h2 + div { margin-top: 24px !important; }

  /* 5 · Botonera: apilada, ancho completo y separada */
  .ok-cta-row, section > div > div > div[style*="display: flex"][style*="gap: 12px"] {
    flex-direction: column !important; align-items: stretch !important; gap: 12px !important;
  }
  .ok-cta-row > *, section a[href^="https://wa.me"] { width: 100% !important; justify-content: center !important; }

  /* 6 · Tarjetas y grids: más separación vertical entre bloques */
  [style*="grid-template-columns"] { gap: 16px !important; }

  /* Spans inline sobredimensionados dentro de títulos */
  h1 span, h2 span { font-size: inherit !important; }
}



@media (max-width: 768px) {
  .ok-topo-stage { overflow: visible; border: none; }
  .ok-topo-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 16px !important; }
  .ok-topo-stage img { border-radius: var(--radius-2xl); border: 1px solid rgba(255,255,255,0.10); }
  .ok-topo-tag { position: static !important; transform: none !important; max-width: none !important; inset: auto !important; }
}

/* ============================================================
   Footer — refactor mobile-first (auditoría 2026)
   ============================================================ */
.ok-footer-grid {
  max-width: 1240px; margin: 0 auto;
  padding: 44px 20px 26px;
  display: grid; grid-template-columns: 1fr; gap: 34px;
}
.ok-footer-orgs { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 20px; }
.ok-footer-follow { display: flex; flex-direction: column; gap: 9px; }
.ok-footer-strip {
  max-width: 1240px; margin: 0 auto; padding: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.ok-footer-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 34px; border-radius: 999px;
  background: #684BFF; color: #fff; font-size: 15px; font-weight: 700;
  text-decoration: none; letter-spacing: -0.01em;
  transition: background 200ms cubic-bezier(0.2,0,0.2,1), box-shadow 200ms cubic-bezier(0.2,0,0.2,1);
}
.ok-footer-cta:hover { background: #5638E8; box-shadow: 0 6px 20px rgba(104,75,255,0.34); color: #fff; }
.ok-footer-cta:focus-visible { outline: 2px solid rgba(167,134,250,0.8); outline-offset: 3px; }
/* Puntero fino (mouse): interlineado compacto. En táctil se recupera el alto de 44px. */
.ok-footer-link {
  display: inline-flex; align-items: center; min-height: 32px; padding: 3px 0;
  font-size: 13.5px; line-height: 1.4;
  color: rgba(255,255,255,0.65); text-decoration: none;
  transition: color 300ms cubic-bezier(0.2,0,0.2,1);
}
@media (pointer: coarse) {
  .ok-footer-link { min-height: 44px; }
}
.ok-footer-link:hover, .ok-footer-link:focus-visible { color: #A786FA; }
.ok-footer-link:focus-visible { outline: 2px solid rgba(143,105,223,0.6); outline-offset: 3px; border-radius: 4px; }

.ok-footer-bottom {
  max-width: 1240px; margin: 0 auto; padding: 20px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  font-size: 12.5px; color: rgba(255,255,255,0.5);
}
.ok-footer-legal { display: flex; align-items: center; gap: 20px; }
.ok-footer-legal .ok-footer-link { font-size: 12.5px; color: rgba(255,255,255,0.5); min-height: 44px; padding-left: 2px; padding-right: 2px; }

/* ── Landing Dahua ───────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  /* En una columna, las fotos se acotan y se centran: si no, ocupan toda la pantalla. */
  .ok-dh-hero { grid-template-columns: 1fr !important; gap: 36px !important; }
  .ok-dh-hero > div:last-child { max-width: 900px; margin-inline: auto; }
  .ok-dh-specs { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ok-dh-specs > div:first-child { max-width: 460px; margin-inline: auto; }
  .ok-dh-grid4 { grid-template-columns: repeat(2, 1fr) !important; }
  .ok-dh-terminal { grid-template-columns: 1fr !important; gap: 24px !important; }
  .ok-dh-terminal > img { max-width: 620px; margin-inline: auto; }
}
@media (max-width: 1000px) {
  .ok-zk-vl { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ok-zk-vl > figure { order: -1; max-width: 900px; margin-inline: auto; }
}
@media (max-width: 820px) {
  .ok-dh-flow { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .ok-dh-grid4 { grid-template-columns: 1fr !important; }
}

/* ── Centro de Descargas ─────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .ok-dl-hero { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ok-dl-hero-img { order: -1; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 1080px) {
  .ok-dl-body { grid-template-columns: 1fr !important; gap: 24px !important; }
  .ok-dl-body > nav { position: static !important; }
  .ok-dl-body > nav > div { flex-direction: row !important; flex-wrap: wrap; }
  .ok-dl-destacados { grid-template-columns: repeat(2, 1fr) !important; }
  .ok-dl-cards { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 900px) {
  .ok-erp-diag { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ok-erp-diag > div:last-child { max-width: 420px; margin-inline: auto; }
  .ok-pv-cats, .ok-pv-3col, .ok-pv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-pv-2col { grid-template-columns: 1fr !important; }
  .ok-eco-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* La tabla deja de ser tabla: cada fila pasa a bloque apilado. */
  .ok-dl-head { display: none !important; }
  .ok-dl-row { grid-template-columns: 1fr !important; gap: 12px !important; padding: 16px 16px !important; }
  .ok-dl-row .ok-dl-cell { display: inline-flex; align-items: center; margin-right: 14px; }
  .ok-dl-row > button { justify-self: stretch; width: 100%; }
}
@media (max-width: 720px) {
  .ok-dl-destacados, .ok-dl-cards { grid-template-columns: 1fr !important; }
  .ok-dl-search { flex-direction: column; align-items: stretch !important; }
}

.ok-social { display: flex; align-items: center; gap: 8px; }
/* Círculo a la escala de la "o" de Odoo del sello Partner (~17px de alto). */
.ok-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.45); color: rgba(255,255,255,0.7);
  position: relative;
  transition: color 300ms cubic-bezier(0.2,0,0.2,1), border-color 300ms cubic-bezier(0.2,0,0.2,1);
}
/* Área táctil de 44px sin agrandar el círculo. */
.ok-social-link::after { content: ''; position: absolute; inset: -9px; }
.ok-social-link svg { width: 13px; height: 13px; }
.ok-social-link:hover, .ok-social-link:focus-visible { color: #A786FA; border-color: #A786FA; background: transparent; }
.ok-social-link:focus-visible { outline: 2px solid rgba(143,105,223,0.6); outline-offset: 2px; }

@media (min-width: 641px) {
  .ok-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 28px; padding: 52px 24px 28px; }
}
@media (min-width: 900px) {
  .ok-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 56px 28px 28px; }
  .ok-footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; padding: 14px 28px; }
  .ok-social { margin-right: -10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ok-footer-link, .ok-social-link, .ok-footer-cta { transition: none; }
}

/* POS Comercios — el formulario a dos campos por fila necesita una tarjeta ancha:
   la columna lateral se apila antes que en .ok-pv-2col para no comprimirla. */
@media (max-width: 1100px) {
  .ok-pc-form { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
}

/* Formularios — filas de campos: 1 columna en móvil, 2 desde tablet */
.ok-form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 641px) {
  .ok-form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ============================================================
   Hero de la home — tipografía fluida y botonera segura (auditoría §2)
   ============================================================ */
.ok-hero-title {
  font-size: clamp(30px, 4.6vw + 12px, 52px) !important;
  line-height: 1.07 !important;
  text-wrap: balance;
}
.ok-hero-lead {
  font-size: clamp(15.5px, 0.55vw + 14px, 18px);
  line-height: 1.6;
  text-wrap: pretty;
}
.ok-hero-script {
  font-size: clamp(28px, 3.6vw + 10px, 42px) !important;
  line-height: 1.05 !important;
}
/* La botonera nunca desborda: envuelve antes de apilarse */
.ok-cta-row { flex-wrap: wrap; }
@media (max-width: 560px) {
  .ok-pv-cats, .ok-pv-3col, .ok-pv-flow { grid-template-columns: 1fr !important; }
  .ok-eco-row { grid-template-columns: 1fr !important; }
  .ok-cta-row { flex-direction: column; align-items: stretch; }
  .ok-cta-row > * { width: 100%; justify-content: center; }
}

/* Soluciones — grillas fluidas + alturas uniformes (auditoría §4) */
.ok-sol-grid-2, .ok-sol-grid-3 { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
.ok-sol-grid-3 { margin-top: 20px; }
@media (min-width: 640px) { .ok-sol-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .ok-sol-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
@media (min-width: 1040px) { .ok-sol-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
/* La tarjeta ocupa toda la celda y distribuye su contenido en columna */
.ok-sol-grid-2 > *, .ok-sol-grid-3 > * { height: 100%; display: flex; flex-direction: column; }
.ok-sol-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
/* Truncado visual: el texto completo permanece en el DOM para lectores de pantalla */
.ok-sol-desc { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
.ok-sol-desc-4 { -webkit-line-clamp: 4; line-clamp: 4; }
.ok-sol-desc-3 { -webkit-line-clamp: 3; line-clamp: 3; }
@media (max-width: 480px) { .ok-sol-desc-4 { -webkit-line-clamp: 5; line-clamp: 5; } }
.ok-sol-tile { aspect-ratio: 1 / 1; }

/* ============ Navbar (auditoría §1) ============ */
/* Enlaces reales y rastreables; el JS solo intercepta el scroll suave */
.ok-nav-desktop { display: flex; }
.ok-nav-burger, .ok-nav-mobile { display: none; }

.ok-cta-short { display: none; }

@media (max-width: 1149px) {
  .ok-nav-desktop, .ok-nav-contacto, .ok-lang-desktop { display: none !important; }
  /* El CTA principal nunca se esconde tras la hamburguesa (conversión B2B) */
  .ok-nav-cta { display: inline-flex; }
  .ok-nav-cta button { min-height: 44px; }
  .ok-nav-burger { display: inline-flex; }
  .ok-nav-mobile { display: block; }
}

/* ---- Barra multiidioma: el francés y el portugués alargan cada etiqueta ----
   Medido con el nav desplegado: sin compactar la fila pide 1309px en ES y
   1352px en FR. La fila está capada a max-width:1240px, así que el ancho
   disponible nunca supera 1212px útiles: la compactación es PERMANENTE, no
   dependiente del viewport. (La regla histórica apuntaba a
   header nav:not(.ok-nav-desktop), que nunca coincide con este nav.)
   CONTACTO vive también en el pie y en el propio CTA; los ocho destinos, no. */
.ok-nav-desktop { gap: 2px; margin-left: 8px; }
/* Cada destino va envuelto: nav > div (ancla del desplegable) > span (hover) > a.
   Un `.ok-nav-desktop a` a secas alcanzaría también los enlaces de los paneles. */
.ok-nav-desktop > div > span > a { padding-left: 9px !important; padding-right: 9px !important; font-size: 13px !important; }
.ok-nav-desktop .ok-nav-chevron { width: 20px; margin-left: -6px; }
.ok-nav-contacto { display: none !important; }
header > div { gap: 6px !important; }
/* Red de seguridad: si una traducción futura excede el margen, cede el
   espaciado antes que el layout. No se usa overflow: crearía un contexto de
   recorte que cortaría los menús desplegables. */
.ok-nav-desktop { min-width: 0; flex-shrink: 1; }
.ok-nav-desktop > div > span > a { padding-left: clamp(5px, 0.7vw, 9px) !important; padding-right: clamp(5px, 0.7vw, 9px) !important; }

/* El viewport sí manda para el CTA: por debajo de 1280 usa la etiqueta corta */
@media (max-width: 1279px) {
  .ok-nav-cta .ok-cta-full { display: none; }
  .ok-nav-cta .ok-cta-short { display: inline; }
}

/* Bajo 420px el CTA usa etiqueta corta para no comprimir la barra */
@media (max-width: 420px) {
  .ok-cta-full { display: none; }
  .ok-cta-short { display: inline; }
  .ok-nav-cta button { padding-left: 14px !important; padding-right: 14px !important; }
}

/* Botón hamburguesa — área táctil 44×44 mínima */
.ok-nav-burger {
  align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); color: var(--navy-700); cursor: pointer;
}
.ok-nav-burger:hover { background: var(--surface-sunken); }
.ok-nav-burger:focus-visible { outline: none; box-shadow: var(--ring-accent); }

/* Cajón desplegable */
.ok-drawer {
  position: fixed; left: 0; right: 0; top: 70px; bottom: 0;
  height: calc(100vh - 70px); height: calc(100dvh - 70px);
  background: #fff; border-top: 1px solid var(--border-subtle);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  z-index: 120; padding: 10px 16px 34px;
}
.ok-drawer-row { display: flex; align-items: stretch; gap: 4px; border-bottom: 1px solid var(--border-subtle); }
.ok-drawer-row > a {
  flex: 1 1 auto; display: flex; align-items: center;
  min-height: 52px; padding: 8px 6px;
  font-size: 16px; font-weight: 700; color: var(--navy-700); text-decoration: none;
}
.ok-drawer-row > a:active { color: var(--violet-600); }
/* Disparador de submenú: independiente del enlace, táctil, sin depender del hover */
.ok-sub-toggle {
  flex: 0 0 auto; width: 48px; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--violet-600); border-radius: var(--radius-sm);
}
.ok-sub-toggle:focus-visible { outline: none; box-shadow: var(--ring-accent); }
.ok-sub-toggle[aria-expanded="true"] { background: var(--violet-50); }
.ok-drawer-sub { padding: 2px 0 8px 10px; border-left: 2px solid var(--violet-100); margin: 0 0 8px 6px; }
.ok-drawer-sub a {
  display: flex; align-items: center; min-height: 48px; padding: 6px 8px;
  font-size: 15px; font-weight: 600; color: var(--text-body); text-decoration: none;
}
.ok-drawer-sub .ok-drawer-row { border-bottom: none; }
.ok-drawer-sub .ok-drawer-row > a { min-height: 48px; font-size: 15px; font-weight: 600; color: var(--text-body); }
.ok-drawer-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }

/* En escritorio los desplegables abren también por clic en el chevron */
.ok-nav-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 30px; padding: 0; margin-left: -4px;
  background: transparent; border: none; cursor: pointer; color: inherit;
}
.ok-nav-chevron:focus-visible { outline: none; box-shadow: var(--ring-accent); border-radius: 6px; }

/* Portadas de producto: 2 columnas → 1 en tablet/móvil (patrón PreObra) */
@media (max-width: 900px) {
  .ok-erp-diag { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ok-erp-diag > div:last-child { max-width: 420px; margin-inline: auto; }
  .ok-pv-cats, .ok-pv-3col, .ok-pv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-pv-2col { grid-template-columns: 1fr !important; }
  .ok-eco-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-hero-grid { grid-template-columns: 1fr !important; gap: 34px !important; }
  .ok-hero-media img { min-height: 0 !important; }
}
@media (max-width: 520px) {
  .ok-hero-cta { flex-direction: column; align-items: stretch; }
  .ok-hero-cta button { width: 100%; min-height: 48px; }
}

/* LIMS — bloques antes quemados en imagen, ahora HTML sobre fondo fotográfico */
@media (max-width: 1080px) {
  .ok-lims-body { padding: 44px 34px !important; }
  /* Una sola columna: la foto pasa debajo de la copia */
  .ok-lims-body { grid-template-columns: minmax(0, 1fr) !important; }
  .ok-lims-photo { max-width: 520px; margin: 8px auto 0; }
  .ok-lims-banner-grid { max-width: none !important; }
  /* El banner con foto de fondo: scrim más opaco para leer sobre la imagen */
  .ok-lims-scrim { background: linear-gradient(180deg, rgba(243,244,251,0.96) 0%, rgba(243,244,251,0.9) 62%, rgba(243,244,251,0.72) 100%) !important; }
  .ok-lims-scrim-dark { background: linear-gradient(180deg, rgba(10,14,46,0.96) 0%, rgba(10,14,46,0.92) 62%, rgba(10,14,46,0.78) 100%) !important; }
}
@media (max-width: 860px) {
  .ok-lims-pilares, .ok-lims-banner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px 14px !important; }
  .ok-lims-pilares > li { border-left: none !important; }
  .ok-lims-bar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 0 !important; padding: 24px 26px !important; }
  .ok-lims-bar > li:nth-child(odd) { border-left: none !important; }
}
@media (max-width: 560px) {
  .ok-pv-cats, .ok-pv-3col, .ok-pv-flow { grid-template-columns: 1fr !important; }
  .ok-eco-row { grid-template-columns: 1fr !important; }
  .ok-lims-body { padding: 34px 22px !important; }
  .ok-lims-pilares, .ok-lims-banner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-lims-bar { grid-template-columns: minmax(0, 1fr) !important; padding: 22px !important; }
  .ok-lims-bar > li { border-left: none !important; padding: 0 !important; }
}

/* Barra de sección (navy) — hermana de <header>, fuera del alcance de la regla de arriba.
   Con height fijo la barra de scroll robaba 15px de la fila; min-height deja que crezca. */
.ok-subnav {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.35) transparent;
  -webkit-overflow-scrolling: touch;
}
.ok-subnav::-webkit-scrollbar { height: 4px; }
.ok-subnav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 999px; }
.ok-subnav::-webkit-scrollbar-track { background: transparent; }
.ok-subnav > * { flex: 0 0 auto; }
@media (max-width: 1150px) {
  /* Misma compactación que la cabecera: los destinos entran en vez de recortarse */
  .ok-subnav { gap: 0 !important; padding-left: 14px !important; padding-right: 14px !important; }
  .ok-subnav > a { padding-left: 7px !important; padding-right: 7px !important; font-size: 12.5px !important; }
  .ok-subnav > span:first-child { margin-right: 8px !important; font-size: 11.5px !important; }
}

/* Núcleo: 4 → 2 → 1 columnas */
@media (max-width: 1000px) {
  .ok-infra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  .ok-pv-cats, .ok-pv-3col, .ok-pv-flow { grid-template-columns: 1fr !important; }
  .ok-eco-row { grid-template-columns: 1fr !important; }
  .ok-infra-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Sección Capacidades de RRHH: 3 → 2 → 1 columnas.
   Clase propia (ok-rh-*): .ok-cap-grid pertenece a los diagramas de Wall y Acceso. */
@media (max-width: 1000px) {
  .ok-soft-apps, .ok-rh-cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  .ok-erp-diag { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ok-erp-diag > div:last-child { max-width: 420px; margin-inline: auto; }
  .ok-pv-cats, .ok-pv-3col, .ok-pv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-pv-2col { grid-template-columns: 1fr !important; }
  .ok-eco-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-rh-cap-head { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  .ok-rh-cap-head img { order: -1; }
  .ok-rh-seg { grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; }
  .ok-rh-seg img { order: -1; min-height: 240px !important; }
  .ok-wall-band { padding: 34px 18px !important; margin-top: 34px !important; }
}
@media (max-width: 640px) {
  .ok-soft-apps, .ok-rh-cap-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Product overview de Prenómina: en móvil la imagen va primero */
@media (max-width: 900px) {
  .ok-erp-diag { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ok-erp-diag > div:last-child { max-width: 420px; margin-inline: auto; }
  .ok-pv-cats, .ok-pv-3col, .ok-pv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-pv-2col { grid-template-columns: 1fr !important; }
  .ok-eco-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-preno-ov { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; padding-top: 56px !important; padding-bottom: 56px !important; }
  .ok-preno-ov-media { order: -1; aspect-ratio: 16 / 10 !important; padding: 24px !important; }
  /* Las fotos van arriba en móvil, pero sin padding ni ratio forzado */
  .ok-acceso-photo { order: -1; }
  /* El diagrama toma la altura de su contenido: nada que recortar */
  .ok-nom-flujo { order: -1; aspect-ratio: auto !important; padding: 0 !important; }
  /* El gráfico no lleva padding: sus nodos se posicionan en % sobre la caja completa */
  .ok-eco { padding: 0 !important; aspect-ratio: 4 / 3 !important; }
}
/* Por debajo de ~330px el texto ya está en su piso legible y no hay espacio para las dos
   órbitas rotuladas. Se ocultan las etiquetas exteriores (sus nombres están en la grilla
   de apps inmediatamente debajo) en lugar de partir palabras o dejarlas pisadas. */
@container (max-width: 335px) {
  .ok-eco-app-lbl { display: none; }
}


/* Rejillas de tarjetas: min-width:auto es lo que las hace desbordar con textos largos */
@media (max-width: 1100px) {
  .ok-erp-inds { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
  .ok-erp-inds { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Centro de Informes (RRHH) — prioridad de columna: 1 siempre · 2 desde 640px · 3 desde 1024px */
.ok-rpt-scroll { scrollbar-width: thin; scrollbar-color: var(--violet-200) transparent; -webkit-overflow-scrolling: touch; }
.ok-rpt-scroll::-webkit-scrollbar { height: 6px; }
.ok-rpt-scroll::-webkit-scrollbar-thumb { background: var(--violet-200); border-radius: 999px; }
.ok-rpt-scroll::-webkit-scrollbar-track { background: transparent; }
.ok-rpt-scroll:focus-visible { outline: none; box-shadow: inset var(--ring-accent); }

/* Barra fina y discreta, compartida por las píldoras y la lista vertical */
.ok-rpt-pills, .ok-rpt-tabs { scrollbar-width: thin; scrollbar-color: var(--violet-200) transparent; -webkit-overflow-scrolling: touch; }
.ok-rpt-pills::-webkit-scrollbar { height: 5px; }
.ok-rpt-tabs::-webkit-scrollbar { width: 5px; }
.ok-rpt-pills::-webkit-scrollbar-thumb, .ok-rpt-tabs::-webkit-scrollbar-thumb { background: var(--violet-200); border-radius: 999px; }
.ok-rpt-pills::-webkit-scrollbar-thumb:hover, .ok-rpt-tabs::-webkit-scrollbar-thumb:hover { background: var(--violet-300); }
.ok-rpt-pills::-webkit-scrollbar-track, .ok-rpt-tabs::-webkit-scrollbar-track { background: transparent; }

/* Degradados y flechas: el componente solo los monta cuando hay recorrido real
   hacia ese lado, así nunca tapan contenido que ya está completamente visible. */
.ok-rpt-fade-l, .ok-rpt-fade-r {
  position: absolute; top: 0; bottom: 10px; width: 56px; pointer-events: none;
}
.ok-rpt-fade-l { left: 0; background: linear-gradient(to right, var(--neutral-50) 30%, rgba(246,247,251,0)); }
.ok-rpt-fade-r { right: 0; background: linear-gradient(to left, var(--neutral-50) 30%, rgba(246,247,251,0)); }
.ok-rpt-fade-b {
  position: absolute; left: 0; right: 4px; bottom: 0; height: 52px; pointer-events: none;
  background: linear-gradient(to top, var(--neutral-50) 20%, rgba(246,247,251,0));
}
.ok-rpt-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border-default); border-radius: 50%;
  box-shadow: var(--shadow-sm); cursor: pointer; transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.ok-rpt-arrow:hover { border-color: var(--violet-300); box-shadow: var(--shadow-md); }
.ok-rpt-arrow:focus-visible { outline: none; box-shadow: var(--ring-accent); }
.ok-rpt-arrow-l { left: -6px; }
.ok-rpt-arrow-r { right: -6px; }
/* Sin puntero fino (táctil) las flechas sobran: el gesto es el swipe */
@media (hover: none) {
  .ok-rpt-arrow { display: none; }
}
@media (max-width: 1023px) {
  /* Se ocultan las columnas de menor valor antes de recurrir al desplazamiento */
  .ok-rpt-scroll [data-p="3"] { display: none; }
}
@media (max-width: 960px) {
  .ok-rpt-shell { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  /* El menú lateral pasa a una grilla de pestañas: envuelven en lugar de esconderse */
  .ok-rpt-tabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; max-height: none !important; overflow: visible !important; }
  .ok-rpt-tabs > button { background: #fff !important; border-color: var(--border-subtle) !important; }
  .ok-rpt-tabs > button[aria-current="true"] { border-color: var(--violet-300) !important; }
  .ok-rpt-fade-b { display: none; }
  .ok-rpt-vista { display: none; }
}
@media (max-width: 700px) {
  .ok-rpt-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Efecto peek: la última píldora queda cortada e invita al swipe */
  .ok-rpt-pills { padding-right: 34px !important; }
  .ok-rpt-pills > button { font-size: 13.5px !important; padding: 11px 16px !important; }
}
@media (max-width: 639px) {
  .ok-rpt-scroll [data-p="2"] { display: none; }
  .ok-rpt-kpis { gap: 8px !important; }
  .ok-rpt-kpis > li { padding: 7px 12px !important; }
}

/* Cabeceras de producto: el sub-nav es lo único que puede ceder ancho.
   min-width:auto le impedía encoger y la fila desbordaba al sumar el selector.
   El desplazamiento tiene que ser visible: sin barra ni degradado, los enlaces
   recortados quedan inalcanzables para quien usa mouse. */
header nav:not(.ok-nav-desktop) {
  min-width: 0; flex-shrink: 1;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--violet-200) transparent;
  padding-bottom: 4px;
}
header nav:not(.ok-nav-desktop)::-webkit-scrollbar { height: 4px; }
header nav:not(.ok-nav-desktop)::-webkit-scrollbar-thumb { background: var(--violet-200); border-radius: 999px; }
header nav:not(.ok-nav-desktop)::-webkit-scrollbar-track { background: transparent; }
header nav:not(.ok-nav-desktop) > * { flex: 0 0 auto; white-space: nowrap; }
/* Franja 900–1100px: compactamos la fila para que quepan los 6 destinos
   en lugar de esconder la mitad tras un desplazamiento. */
@media (max-width: 1150px) {
  header nav:not(.ok-nav-desktop) { gap: 0 !important; }
  header nav:not(.ok-nav-desktop) > a { padding-left: 5px !important; padding-right: 5px !important; font-size: 12.5px !important; letter-spacing: -0.01em; }
  header > div { gap: 8px !important; padding-left: 14px !important; padding-right: 14px !important; }
  header > div > a:first-child img { height: 32px !important; }
  /* El rótulo de producto junto al logo cede espacio a la navegación */
  header > div > a:first-child > span { font-size: 13px !important; }
  header > div > a:first-child { gap: 6px !important; }
  .ok-lang-slot { margin-right: 2px; }
  /* CTA y selector ceden ancho antes que la navegación */
  header .ok-lang-slot button { padding-left: 8px !important; padding-right: 8px !important; gap: 5px !important; }
  header > div > button, header > div > span > button { padding-left: 13px !important; padding-right: 13px !important; font-size: 13.5px !important; }
}

/* Selector de idioma en las cabeceras de producto: accesible desde cualquier página */
.ok-lang-slot { display: inline-flex; align-items: center; flex: 0 0 auto; margin-right: 10px; }
@media (max-width: 560px) {
  .ok-pv-cats, .ok-pv-3col, .ok-pv-flow { grid-template-columns: 1fr !important; }
  .ok-eco-row { grid-template-columns: 1fr !important; } .ok-lang-slot { margin-right: 6px; } }

/* Chip de portada de producto — patrón único en todas las páginas de solución */
.ok-hero-chip { max-width: 100%; text-wrap: balance; line-height: 1.45; }
@media (max-width: 560px) {
  .ok-pv-cats, .ok-pv-3col, .ok-pv-flow { grid-template-columns: 1fr !important; }
  .ok-eco-row { grid-template-columns: 1fr !important; }
  .ok-hero-chip { display: block !important; font-size: 11px !important; letter-spacing: 0.06em !important; padding: 8px 14px !important; }
}

/* ===== §8 Comunidad: galería fluida, sin recortes raros ===== */
.ok-com-gallery {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 14px; margin: 34px auto 26px; max-width: 560px;
}
.ok-com-photo { aspect-ratio: 1 / 1; width: 100%; }
@media (max-width: 640px) {
  .ok-com-gallery { grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 300px; }
}

/* ===== §9 QuickStart: línea de tiempo horizontal → vertical ===== */
.ok-quickstart {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;
}
/* Conector punteado como pseudo-elemento: el <ol> solo admite <li> como hijo */
.ok-quickstart::before { content: ""; position: absolute; top: 33px; left: 8.3%; right: 8.3%; height: 0; border-top: 2px dashed var(--border-default); z-index: 0; }
.ok-qs-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ok-qs-num {
  width: 68px; height: 68px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 30px;
}
.ok-qs-text { margin-top: 18px; max-width: 190px; }

@media (max-width: 900px) {
  .ok-erp-diag { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ok-erp-diag > div:last-child { max-width: 420px; margin-inline: auto; }
  .ok-pv-cats, .ok-pv-3col, .ok-pv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-pv-2col { grid-template-columns: 1fr !important; }
  .ok-eco-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* La línea pasa a ser vertical y los pasos se leen como una secuencia */
  .ok-quickstart { grid-template-columns: 1fr; gap: 26px; }
  .ok-quickstart::before { top: 34px; bottom: 34px; left: 33px; right: auto; width: 0; height: auto; border-top: none; border-left: 2px dashed var(--border-default); }
  .ok-qs-step { flex-direction: row; align-items: flex-start; text-align: left; gap: 20px; }
  .ok-qs-num { width: 56px; height: 56px; font-size: 26px; margin-left: 6px; background-clip: padding-box; }
  .ok-qs-text { margin-top: 6px; max-width: none; }
}

/* ===== §12 CTA final: apilado en móvil ===== */
@media (max-width: 560px) {
  .ok-pv-cats, .ok-pv-3col, .ok-pv-flow { grid-template-columns: 1fr !important; }
  .ok-eco-row { grid-template-columns: 1fr !important; }
  .ok-cta-card { padding: 40px 22px !important; }
  .ok-cta-actions { flex-direction: column; align-items: stretch; }
  .ok-cta-actions > * { width: 100%; }
  .ok-cta-actions button { width: 100%; min-height: 48px; }
}

/* Diferenciador local (§5) y sección Odoo (§7): apilado limpio con aire */
@media (max-width: 900px) {
  .ok-erp-diag { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ok-erp-diag > div:last-child { max-width: 420px; margin-inline: auto; }
  .ok-pv-cats, .ok-pv-3col, .ok-pv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-pv-2col { grid-template-columns: 1fr !important; }
  .ok-eco-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .ok-contacto-grid { grid-template-columns: 1fr !important; gap: 22px !important; } }
@media (max-width: 1000px) {
  .ok-porque { grid-template-columns: 1fr !important; gap: 36px !important; align-items: start !important; }
  .ok-odoo-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
}
@media (max-width: 420px) {
  .ok-odoo-cols { grid-template-columns: 1fr !important; }
}

/* Industrias — grilla fluida 1 / 2 / 3 columnas (auditoría §6) */
.ok-ind-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 600px) { .ok-ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ok-ind-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Badges sobre el banner del ecosistema: vidrio real en el navegador, no rasterizado */
.ok-eco-badge {
  position: absolute; display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.92);
  box-shadow: 0 14px 34px rgba(11,19,69,0.18), 0 2px 6px rgba(11,19,69,0.08);
  font-size: clamp(10px, 1.05vw, 14.5px); font-weight: 700; color: var(--navy-600); letter-spacing: -0.01em;
}
@media (max-width: 700px) {
  /* En móvil taparían las pantallas: la información ya vive en el texto de la sección */
  .ok-eco-badge { display: none; }
}

/* Barrido láser sobre la pantalla del reloj tablet (zona medida sobre la imagen v5) */
.ok-tablet-laser {
  position: absolute; left: 11.4%; top: 31.2%; width: 15.4%; height: 45.4%;
  overflow: hidden; border-radius: 6px; pointer-events: none;
}
.ok-tablet-laser i {
  position: absolute; left: 22%; right: 22%; height: 11%; border-radius: 999px;
  background: linear-gradient(180deg, rgba(167,134,250,0) 0%, rgba(167,134,250,0.30) 45%, rgba(104,75,255,0.62) 50%, rgba(167,134,250,0.30) 55%, rgba(167,134,250,0) 100%);
  box-shadow: 0 0 18px rgba(124,77,255,0.55);
  animation: ok-laser 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes ok-laser {
  0%   { transform: translateY(-30%); opacity: 0; }
  12%  { opacity: 1; }
  50%  { transform: translateY(610%); opacity: 1; }
  62%  { transform: translateY(610%); opacity: 0; }
  100% { transform: translateY(-30%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* Sin movimiento: queda un resplandor fijo sobre el marco de reconocimiento */
  .ok-tablet-laser i { animation: none; top: 32%; opacity: 0.75; }
}

/* "Por qué elegir OKentra": vertical centrado — 3 → 2 → 1 columnas */
@media (max-width: 900px) {
  .ok-erp-diag { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ok-erp-diag > div:last-child { max-width: 420px; margin-inline: auto; }
  .ok-pv-cats, .ok-pv-3col, .ok-pv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-pv-2col { grid-template-columns: 1fr !important; }
  .ok-eco-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-porque-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .ok-porque-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .ok-porque-media { margin-top: 32px !important; }
}

/* Rótulo del banner de Odoo: se mide en cqw para encogerse con el banner, no con el
   viewport. Por debajo de 620px de contenedor el banner ya no tiene alto suficiente
   (taparía el logotipo), así que el rótulo baja debajo de la imagen. */
@container (max-width: 620px) {
  .ok-odoo-cap {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    gap: 6px !important;
    padding: 14px 16px 16px;
    background: var(--neutral-50);
    border-top: 1px solid var(--border-subtle);
  }
  .ok-odoo-cap .ok-odoo-lbl {
    font-size: 10.5px !important;
    color: var(--text-muted) !important;
    text-shadow: none !important;
  }
  .ok-odoo-cap .ok-odoo-lbl strong { color: var(--navy-600) !important; }
  .ok-odoo-cap .ok-odoo-rule { width: 22px !important; background: var(--violet-200) !important; }
  .ok-odoo-cap .ok-odoo-slg {
    white-space: normal !important;
    font-size: 16px !important;
    color: var(--navy-600) !important;
    text-shadow: none !important;
  }
  .ok-odoo-cap .ok-odoo-slg span { color: var(--violet-600) !important; }
}

/* ============================================================
   /sla-planes — página interna de planes de soporte
   ============================================================ */
.ok-sla-sec { padding: 56px 20px; }
.ok-sla-h2 { font-size: clamp(26px, 2.6vw + 16px, 38px); line-height: 1.15; text-wrap: balance; }
.ok-sla-planes { display: grid; grid-template-columns: 1fr; gap: 18px; }
.ok-sla-calc { display: grid; grid-template-columns: 1fr; gap: 20px; }
.ok-sla-fields { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ok-sla-notas { display: grid; grid-template-columns: 1fr; gap: 18px; }
.ok-sla-tablewrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); background: #fff;
}
@media (min-width: 640px) {
  .ok-sla-sec { padding: 68px 24px; }
  .ok-sla-planes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .ok-sla-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ok-sla-notas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .ok-sla-sec { padding: 84px 28px; }
  .ok-sla-calc { grid-template-columns: 1.25fr 0.95fr; gap: 26px; }
}
@media (min-width: 1180px) {
  .ok-sla-planes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Pasos del flujo de visitantes: la escala en hover refuerza que son pulsables */
.ok-acc-step > span { transition: transform 200ms var(--ease-standard, cubic-bezier(0.2,0,0.2,1)), background 200ms, border-color 200ms; }
.ok-acc-step:hover > span { transform: scale(1.1); }
.ok-acc-step:focus-visible { outline: none; box-shadow: var(--ring-accent); }
@media (prefers-reduced-motion: reduce) {
  .ok-acc-step > span { transition: none; }
  .ok-acc-step:hover > span { transform: none; }
}

/* Overview de Wall: apilado vertical, el diagrama en panorámica */
@media (max-width: 900px) {
  .ok-erp-diag { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ok-erp-diag > div:last-child { max-width: 420px; margin-inline: auto; }
  .ok-pv-cats, .ok-pv-3col, .ok-pv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-pv-2col { grid-template-columns: 1fr !important; }
  .ok-eco-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-wall-ov { padding-top: 56px !important; padding-bottom: 56px !important; }
  .ok-wall-ov .ok-wall-photo { margin-top: 34px !important; }
}


/* Diagrama del ecosistema RRHH — las conexiones son SVG detrás de los nodos HTML.
   vector-effect mantiene el grosor uniforme pese al preserveAspectRatio="none". */
.ok-eco-ring { fill: none; stroke: rgba(167,134,250,0.34); stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
.ok-eco-spoke { stroke: rgba(167,134,250,0.5); stroke-width: 2px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ok-eco-spoke-in { stroke: rgba(167,134,250,0.68); }
.ok-eco-flow { stroke-dasharray: 4 6; animation: ok-eco-dash 2.4s linear infinite; }
@keyframes ok-eco-dash { to { stroke-dashoffset: -20; } }
.ok-eco-tile { transition: transform 200ms cubic-bezier(0.2,0,0.2,1), box-shadow 200ms cubic-bezier(0.2,0,0.2,1); }
.ok-eco-node-w:hover .ok-eco-tile { transform: translateY(-3px) scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .ok-eco-flow { animation: none; }
  .ok-eco-node-w:hover .ok-eco-tile { transform: none; }
}

.ok-hw-card { transition: transform 200ms cubic-bezier(0.2,0,0.2,1), box-shadow 200ms cubic-bezier(0.2,0,0.2,1); }
.ok-hw-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
@media (max-width: 900px) { .ok-hw-cat { grid-template-columns: 1fr !important; } }
@media (max-width: 560px) { .ok-hw-card { grid-template-columns: 120px 1fr !important; } }
@media (prefers-reduced-motion: reduce) { .ok-hw-card:hover { transform: none; } }

/* Banner de punto de venta: los rótulos viven en HTML sobre la imagen limpia.
   Bajo 760px la composición no aguanta el texto encima y pasa a bloque apilado. */
@media (max-width: 760px) {
  .ok-pv-banner-lbl { display: none; }
  .ok-pv-banner-txt { position: static !important; width: 100% !important; padding: 24px !important; }
  .ok-pv-banner { display: flex; flex-direction: column-reverse; }
}

/* ── Filas de botones: envolver antes que desbordar ──────────────────────────
   Auditoría multiidioma: en el hero de ERP los dos CTAs suman 437px en PT
   contra 423 disponibles; en español entraban justo. Hay 39 filas con el mismo
   patrón (flex + gap, sin flex-wrap) repartidas por el sitio. En vez de tocar
   cada una, la regla cubre toda fila flex de CONTENIDO que contenga botones:
   wrap solo actúa cuando el contenido no entra, así que no altera ningún layout
   que hoy quepa. Se excluye el header: su fila tiene alto fijo de 64px y al
   envolver el CTA caía fuera de la barra, sobre el hero. */
main [style*="display: flex"]:has(> button),
main [style*="display: flex"]:has(> a[style*="border-radius"]),
section [style*="display: flex"]:has(> button),
section [style*="display: flex"]:has(> a[style*="border-radius"]),
footer [style*="display: flex"]:has(> button) { flex-wrap: wrap; }
header > div, header > div * { flex-wrap: nowrap; }


/* ============ Cabeceras de landing en móvil (auditoría móvil) ============
   Las landings (ERP, RRHH, Campus, LIMS, Sens, PreObra, Servicios, Soporte,
   Confianza, Referidos, módulos) traen su propia cabecera, sin la hamburguesa
   de SiteHeader. Por debajo de 768px el nav quedaba con ancho 0 (flex-shrink lo
   colapsaba) y el CTA se cortaba fuera del viewport: el usuario móvil se
   quedaba sin navegación y sin botón. Repartimos la cabecera en dos filas:
   fila 1 logo + idioma + CTA compacto, fila 2 el nav a ancho completo y
   desplazable. Se excluyen las páginas con SiteHeader (.ok-nav-desktop). */
@media (max-width: 767px) {
  header:not(:has(.ok-nav-desktop)) > div {
    height: auto !important;
    min-height: 56px;
    flex-wrap: wrap;
    row-gap: 8px;
    gap: 10px !important;
    padding: 8px 16px !important;
  }
  header:not(:has(.ok-nav-desktop)) nav:not(.ok-nav-desktop) {
    order: 9;
    flex: 1 0 100% !important;
    min-width: 100% !important;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  /* Los destinos de la fila 2 eran de 19px de alto: por debajo de lo tocable */
  header:not(:has(.ok-nav-desktop)) nav:not(.ok-nav-desktop) > a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 10px !important;
  }
  header:not(:has(.ok-nav-desktop)) > div > a:first-child {
    min-width: 0;
    flex-shrink: 1;
  }
  header:not(:has(.ok-nav-desktop)) > div > a:first-child img { height: 30px !important; }
  header:not(:has(.ok-nav-desktop)) > div > a:first-child span {
    font-size: 13.5px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  header:not(:has(.ok-nav-desktop)) > div > button,
  header:not(:has(.ok-nav-desktop)) > div > a[href]:not(:first-child) {
    font-size: 12.5px !important;
    padding: 0 12px !important;
    min-height: 38px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* La cabecera envuelta ocupa tres filas; sumada a la sub-barra sticky se comía
   un tercio del viewport. En móvil la cabecera deja de ser fija (se va con el
   scroll) y queda pinchada solo la sub-barra de secciones, que es la que sirve
   mientras se recorre la página. Las landings sin sub-barra no cambian. */
@media (max-width: 767px) {
  /* display:contents disuelve la caja del envoltorio: sin ella, la sub-barra
     sticky solo se pegaría dentro de esa caja y se despegaría al primer scroll. */
  div:has(> header):has(.ok-subnav) { display: contents !important; }
  div:has(> .ok-subnav) { position: sticky; top: 0; z-index: 100; }
  /* Separador flex que en el layout envuelto ya no cumple función */
  header:not(:has(.ok-nav-desktop)) > div > span:empty { display: none !important; }
}


/* ── Landing Socios de Negocios ──────────────────────────────────────── */
@media (max-width: 1080px) {
  .ok-socios-hero { grid-template-columns: 1fr !important; gap: 36px !important; }
  .ok-socios-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-socios-5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 26px 16px !important; }
  .ok-socios-step-line { display: none !important; }
}
@media (max-width: 960px) {
  .ok-socios-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ok-socios-split { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ok-socios-row { grid-template-columns: 1fr !important; gap: 36px !important; padding-top: 64px !important; padding-bottom: 64px !important; }
  .ok-socios-row > figure { order: -1 !important; }
  .ok-socios-row img { height: 300px !important; }
}
@media (max-width: 860px) {
  .ok-socios-nav { display: none !important; }
}
@media (max-width: 760px) {
  .ok-socios-tabla { grid-template-columns: 1.6fr 0.8fr 0.8fr 0.8fr !important; font-size: 13px !important; }
  .ok-socios-tabla > div { padding: 12px 12px !important; }
}
@media (max-width: 700px) {
  .ok-socios-3, .ok-socios-4, .ok-socios-5 { grid-template-columns: minmax(0, 1fr) !important; }
  .ok-socios-logos { gap: 16px !important; }
}

.ok-socio-card { transition: transform 200ms cubic-bezier(.2,0,.2,1), box-shadow 200ms cubic-bezier(.2,0,.2,1), border-color 200ms cubic-bezier(.2,0,.2,1); }
.ok-socio-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--violet-300); }
@media (prefers-reduced-motion: reduce) { .ok-socio-card { transition: none; } }

@media (max-width: 720px) { .ok-dl-priv-grid { grid-template-columns: 1fr !important; } }

@media (max-width: 860px) {
  .ok-dl-priv-shell { grid-template-columns: 1fr !important; gap: 28px !important; }
  .ok-dl-priv-img { height: 200px !important; order: -1; }
}

@media (max-width: 860px) {
  .ok-cav-espacio { grid-template-columns: 1fr !important; }
  .ok-cav-espacio > img, .ok-cav-espacio > div:last-child { min-height: 220px !important; height: 220px !important; order: -1; }
}

/* Agentes IA: la línea conectora solo tiene sentido con los 4 pasos en una fila. */
@media (max-width: 1000px) {
  .ok-aib-timeline { display: none; }
}

/* Inicio B: tarjetas de solución, línea de tiempo QuickStart y grilla de 6 pasos. */
.ok-ib-card { transition: background-color 200ms cubic-bezier(0.2,0,0.2,1), border-color 200ms cubic-bezier(0.2,0,0.2,1), box-shadow 200ms cubic-bezier(0.2,0,0.2,1); }
.ok-ib-card:hover {
  background-image: linear-gradient(170deg, #fbfaff 0%, #f4f1ff 45%, #ece6ff 100%);
  border-color: var(--violet-200);
  box-shadow: 0 14px 34px rgba(104,75,255,0.14);
}
/* Sobre el fondo lavanda el tile se invierte para no perder contraste. */
.ok-ib-card:hover .ok-ib-tile { background: var(--violet-500) !important; }
.ok-ib-card:hover .ok-ib-tile svg { stroke: #fff; }
@media (max-width: 1100px) {
  .ok-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 28px !important; }
  .ok-ib-timeline { display: none; }
}
@media (max-width: 640px) {
  .ok-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}