/* ═══════════════════════════════════════════════════════════════════
 * iot-responsive.css · v1.1.0 · 29/07/2026
 * ═══════════════════════════════════════════════════════════════════
 * Se carga DESPUÉS de style.css. Corrige solo lo que rompe en pantalla
 * pequeña, sin reescribir el sistema de diseño y sin tocar ningún .php
 * de contenido. Únicamente variables de la paleta: un solo verde.
 *
 * POR QUÉ LA v1.0.0 NO SIRVIÓ DE NADA
 * El tema define sus rejillas de DOS maneras: 93 dentro de bloques
 * <style> y 27 en el atributo style= de la propia etiqueta. Un estilo
 * en línea gana SIEMPRE a una hoja externa salvo que se use
 * !important. La v1.0.0 solo apuntaba a nombres de clase concretos, así
 * que las rejillas en línea seguían en cuatro columnas, el contenido
 * era más ancho que la pantalla y el navegador respondía alejando la
 * página entera. De ahí que se viera igual grande o pequeña: no es que
 * no se adaptara, es que se estaba mostrando la versión de escritorio
 * encogida.
 *
 * Esta versión ataca la causa: se neutraliza el desbordamiento venga de
 * donde venga, incluidos los estilos en línea, mediante selectores de
 * atributo.
 * ───────────────────────────────────────────────────────────────── */

/* ── 1 · Base ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas,iframe,picture,object{max-width:100%;height:auto}
pre,code,kbd{white-space:pre-wrap;overflow-wrap:anywhere}

/* Nada puede ser más ancho que su contenedor. min-width:auto es el
   valor por defecto de los hijos de flex y grid, y es la causa más
   habitual de desbordamiento silencioso. */
@media(max-width:900px){
  .site-main *,footer *,header *{min-width:0}
}

/* ── 2 · Rejillas: también las que van en el atributo style= ───────── */
@media(max-width:820px){
  /* Cuatro o más columnas pasan a dos. */
  [style*="repeat(4"],[style*="repeat(5"],[style*="repeat(6"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:640px){
  /* Y en móvil, todo a una sola columna. */
  [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  [style*="repeat(2"],[style*="repeat(3"],[style*="repeat(4"]{
    grid-template-columns:minmax(0,1fr)!important}
  /* Los anchos mínimos en línea dejan de forzar desbordamiento. */
  [style*="min-width:2"],[style*="min-width:3"],[style*="min-width:4"],
  [style*="min-width:5"],[style*="min-width:6"],[style*="min-width:7"]{
    min-width:0!important}
  /* Las filas flexibles envuelven en vez de desbordar. */
  [style*="display:flex"]{flex-wrap:wrap!important}
}

/* Rejillas por clase, las 93 del tema. */
@media(max-width:820px){
  .sx-grid,.zf-grid,.qd-grid,.es-ops,.svc-grid,.legal-grid,.kpi-grid,
  .pc-grid,.rc-grid,.sv-sum-grid,.ft-cols,.tn-grid,.pp-kpis,.form-grid,
  .sh-steps,.profiles,.tier-grid,.two,.grid{
    grid-template-columns:minmax(0,1fr)!important}
}

/* EXCEPCIÓN · el marquee de logos necesita su ancho propio para
   desplazarse. Si se le fuerza una columna, deja de funcionar. */
.pc-track,.pc-marquee .pc-track{width:max-content!important;flex-wrap:nowrap!important}
.pc-track [style*="min-width"]{min-width:200px!important}

/* ── 3 · Secciones a sangre ────────────────────────────────────────── */
/* Calculan su ancho con 100vw. Cuando hay barra de desplazamiento
   vertical, 100vw es MAYOR que el ancho útil y aparece desplazamiento
   horizontal. */
.full-bleed{max-width:100vw;overflow-x:clip}

/* ── 4 · Menú móvil ────────────────────────────────────────────────── */
.iot-burger{display:none;margin-left:auto;background:transparent;border:2px solid var(--border);
  border-radius:12px;width:46px;height:46px;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;padding:0;color:var(--navy)}
.iot-burger:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.iot-burger span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:.22s}
.iot-burger span::before,.iot-burger span::after{content:'';position:absolute;left:0;width:20px;height:2px;
  background:currentColor;border-radius:2px;transition:.22s}
.iot-burger span::before{top:-6px} .iot-burger span::after{top:6px}
body.iot-nav-abierta .iot-burger span{background:transparent}
body.iot-nav-abierta .iot-burger span::before{transform:translateY(6px) rotate(45deg)}
body.iot-nav-abierta .iot-burger span::after{transform:translateY(-6px) rotate(-45deg)}
.iot-nav-velo{position:fixed;inset:0;background:rgba(26,46,90,.55);opacity:0;visibility:hidden;transition:.25s;z-index:60}
body.iot-nav-abierta .iot-nav-velo{opacity:1;visibility:visible}

@media(max-width:900px){
  .iot-burger{display:flex}
  header.main .zf-page{gap:10px;flex-wrap:nowrap;align-items:center}

  .menu{position:fixed;top:0;right:0;width:min(86vw,340px);height:100dvh;
    background:var(--white);border-left:2px solid var(--border);
    box-shadow:-18px 0 44px rgba(26,46,90,.18);
    transform:translateX(100%);transition:transform .28s ease;
    z-index:61;margin:0;padding:86px 18px 28px;overflow-y:auto;display:block}
  body.iot-nav-abierta .menu{transform:translateX(0)}
  .menu .menu-list{display:block;width:100%;margin:0;padding:0;list-style:none}
  .menu .menu-list li{width:100%;border-bottom:1px solid var(--border)}
  .menu .menu-list li:last-child{border-bottom:none}
  /* style.css ocultaba los enlaces a partir de 768px y no había menú
     alternativo: en móvil no se podía navegar. Se revierte. */
  .menu a,.menu .menu-list a,.menu a:not(.cta){
    display:block!important;width:100%;padding:15px 12px;font-size:15px;border-radius:10px}
  .menu a.cta{margin:18px 0 0;text-align:center;padding:15px 20px}

  /* Objetivo táctil de 44px · WCAG 2.1 AA, criterio 2.5.5 */
  .hdr-actions{margin-left:0;gap:2px;flex-shrink:0}
  .hdr-actions .icn-btn,.hdr-actions .cart-btn{min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center}

  .topbar .zf-page{flex-direction:column;align-items:stretch;gap:10px}
  .topbar .pitch{font-size:13px}
  .topbar-cta{margin:0!important;width:100%;justify-content:center;text-align:center}
  .iot-lang{margin:0 auto!important;align-self:center}
}
@media(min-width:901px){
  .menu{position:static;transform:none;height:auto;width:auto;padding:0;
    background:transparent;border:none;box-shadow:none;overflow:visible}
}

/* ── 5 · Tipografía y ritmo ────────────────────────────────────────── */
@media(max-width:760px){
  :root{--page-px:16px;--sec-gap:56px;--sec-pad:32px}
  .zf-page,.wrap,.es-wrap,.qd-wrap{padding-left:var(--page-px);padding-right:var(--page-px)}
  .zf-h1{font-size:clamp(23px,7vw,32px);line-height:1.12}
  .zf-h2{font-size:clamp(19px,6vw,26px)}
  .zf-h3{font-size:clamp(17px,5vw,21px)}
  h1,h2,h3,h4{overflow-wrap:break-word}
  p,li,.t-body{font-size:14.5px;line-height:1.7}
  .btn{white-space:normal;text-align:center;max-width:100%}
  .btn-lg{padding:14px 22px;font-size:14px}
}
@media(max-width:400px){
  :root{--page-px:14px}
}

/* ── 6 · Tablas ────────────────────────────────────────────────────── */
@media(max-width:760px){
  table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ── 7 · Formularios ──────────────────────────────────────────────── */
/* 16px es el mínimo que evita el zoom automático de iOS al enfocar un
   campo, que descuadra la maqueta y da la sensación de que la página
   "salta". */
@media(max-width:760px){
  input,select,textarea,button{font-size:16px!important;max-width:100%}
  input,select,textarea{width:100%}
  form,form *{max-width:100%}
}

/* ── 8 · Cabecera y anclas ─────────────────────────────────────────── */
@media(max-width:760px){
  header.main .zf-page{padding-top:10px;padding-bottom:10px}
  .brand img,.brand .custom-logo{height:42px!important;max-width:60vw;width:auto}
  [id^="sec-"]{top:-70px}
}

/* ── 9 · Movimiento reducido ──────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .menu,.iot-nav-velo,.iot-burger span,
  .iot-burger span::before,.iot-burger span::after{transition:none}
  .pc-track{animation:none!important}
}