/* VfdLab — página comercial (maqueta F1). Misma familia visual que TRAPEZOIDE y FlyNet
   (franjas claras y oscuras como un informe técnico, Archivo + IBM Plex autoalojadas).
   VfdLab se distingue por el cian de su presentación, la franja de las tres fases U-V-W
   y la grilla de puntos del lienzo del programa. Rutas relativas: sirve igual en Pages y en el artefacto. */

@font-face { font-family: "Archivo"; src: url("fuentes/archivo.woff2") format("woff2"); font-weight: 500 800; font-stretch: 100% 125%; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fuentes/plex-sans.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fuentes/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fuentes/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fuentes/plex-mono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* Franjas oscuras (portada, corrientes, contacto) y claras (el resto): un solo aspecto, elegido. */
:root {
  --fondo: #0a0f17;
  --fondo-2: #0f1520;
  --panel: #151c28;
  --borde: #243042;
  --borde-fuerte: #364458;
  --texto: #edf3fa;
  --texto-2: #a5b3c6;
  --cian: #4cc3f0;
  --cian-2: #86d8f6;
  --fase-u: #f2a13a;   /* las tres fases, como en la presentación del programa */
  --fase-v: #4cc3f0;
  --fase-w: #7ed36f;
  --rojo: #ef5a4c;

  --papel: #f2f5f8;
  --blanco: #ffffff;
  --grafito: #141b26;
  --gris: #536176;
  --linea: #dbe2ea;
  --linea-2: #c2ccd8;
  --cian-claro: #0a6788;
  --cian-fondo: #e6f5fb;

  --f-titulo: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --radio: 6px;
  --ancho: 1200px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 17px/1.65 var(--f-texto); -webkit-text-size-adjust: 100%; }
body::before { content: ""; position: fixed; inset: 0 0 auto; z-index: 20; height: env(safe-area-inset-top, 0px); background: var(--fondo); }
img { max-width: 100%; height: auto; display: block; }
/* hidden tiene que ganarle a los display de grid y flex de cada bloque. */
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { margin: 0; font-family: var(--f-titulo); text-wrap: balance; }
h1 { font-size: clamp(34px, 4.6vw, 58px); font-weight: 750; font-stretch: 110%; line-height: 1.06; letter-spacing: -0.025em; }
h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; font-stretch: 108%; line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: 18px; font-weight: 650; font-stretch: 104%; line-height: 1.3; }
p { margin: 0; }

.contenedor {
  width: 100%; max-width: calc(var(--ancho) + 48px); margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}

.rotulo {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cian);
  display: flex; align-items: center; gap: 10px;
}
.rotulo::before { content: ""; width: 18px; height: 2px; background: currentColor; }

/* ── Barra, con la franja de las tres fases arriba ───── */
.barra {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: rgba(10, 15, 23, 0.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}
.barra::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--fase-u) 0 33.33%, var(--fase-v) 33.33% 66.66%, var(--fase-w) 66.66%);
}
.barra-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--texto); }
.marca img { border-radius: 8px; flex: none; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca-texto b { font-family: var(--f-titulo); font-size: 19px; font-weight: 750; font-stretch: 112%; letter-spacing: 0.02em; }
.marca-sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-2); margin-top: 3px; }
.menu { display: flex; gap: 26px; margin-left: auto; }
.menu a { color: var(--texto-2); text-decoration: none; font-size: 14.5px; font-weight: 500; position: relative; padding: 6px 0; }
.menu a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--cian); transition: right 0.2s ease; }
.menu a:hover, .menu a[aria-current] { color: var(--texto); }
.menu a:hover::after, .menu a[aria-current]::after { right: 0; }

/* ── Botones ─────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--cian); color: #04131c;
  padding: 13px 22px; border-radius: var(--radio); border: 1px solid var(--cian);
  font-weight: 600; font-size: 15.5px; text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.boton::after { content: "→"; font-family: var(--mono); transition: transform 0.15s ease; }
.boton:hover { background: var(--cian-2); border-color: var(--cian-2); }
.boton:hover::after { transform: translateX(3px); }
.boton-linea { background: rgba(10, 15, 23, 0.4); color: var(--texto); border-color: var(--borde-fuerte); }
.boton-linea:hover { background: var(--panel); border-color: var(--cian); }
.boton-oscuro { background: var(--grafito); color: var(--blanco); border-color: var(--grafito); }
.boton-oscuro:hover { background: #26303f; border-color: #26303f; }
.boton-chico { padding: 9px 16px; font-size: 14.5px; }
.barra .boton-chico::after { display: none; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ── Portada: la grilla de puntos del lienzo de VfdLab ─ */
.portada {
  position: relative; padding-block: 80px 0; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 85% 30%, rgba(76, 195, 240, 0.1), transparent 70%),
    radial-gradient(circle, rgba(165, 179, 198, 0.16) 1px, transparent 1.4px) 0 0 / 22px 22px,
    var(--fondo);
}
.portada::after { content: ""; position: absolute; inset: auto 0 0; height: 160px; background: linear-gradient(180deg, transparent, var(--fondo)); pointer-events: none; }
.portada-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.portada-texto { display: grid; gap: 22px; }
.portada h1 em { font-style: normal; color: var(--cian); }
.bajada { color: var(--texto-2); font-size: 18.5px; max-width: 580px; }
.portada .acciones { margin-top: 8px; }
/* 404.html: solo el texto, sin ficha. */
.no-encontrada { position: relative; z-index: 1; padding-block: 40px 140px; max-width: 760px; }

.ventana {
  margin: 0; background: var(--panel);
  border: 1px solid var(--borde-fuerte); border-radius: 10px; overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
}
.ventana-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
  padding: 10px 16px; border-bottom: 1px solid var(--borde);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--texto-2);
}
.ventana-barra b { color: var(--texto); font-weight: 600; }
.ventana-barra .der { margin-left: auto; font-variant-numeric: tabular-nums; }
.estado { display: inline-flex; align-items: center; gap: 8px; }
.led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--fase-w); box-shadow: 0 0 8px var(--fase-w); flex: none; }
.ventana figcaption { padding: 10px 16px 12px; color: var(--texto-2); font-size: 13.5px; border-top: 1px solid var(--borde); }
/* El sinóptico es un dibujo de fondo blanco (así lo exporta VfdLab): se enmarca como lámina. */
.lamina { background: #fff; display: block; }
.lamina img { width: 100%; }

.ficha-portada { position: relative; z-index: 1; margin: 64px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--borde-fuerte); }
.ficha-portada div { padding: 20px 20px 18px 0; border-bottom: 1px solid var(--borde); }
.ficha-portada div + div { padding-left: 20px; border-left: 1px solid var(--borde); }
.ficha-portada dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-2); }
.ficha-portada dd { margin: 6px 0 0; font-family: var(--mono); font-size: 28px; font-weight: 500; color: var(--texto); font-variant-numeric: tabular-nums; }

.sectores { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; padding-block: 26px 34px; }
.sectores-t { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-2); }
.sectores ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.sectores li { font-family: var(--f-titulo); font-stretch: 108%; font-weight: 600; font-size: 16px; color: var(--texto); }
.sectores li + li::before { content: "/"; color: var(--borde-fuerte); margin-right: 28px; font-weight: 400; }

/* ── Secciones ───────────────────────────────────────── */
.seccion { padding-block: 104px; }
.claro { background: var(--papel); color: var(--grafito); color-scheme: light; }
.blanco { background: var(--blanco); color: var(--grafito); color-scheme: light; }
.oscuro { background: var(--fondo-2); color: var(--texto); }
.claro .rotulo, .blanco .rotulo { color: var(--cian-claro); }

.encabezado { max-width: 760px; margin-bottom: 56px; display: grid; gap: 18px; }
.encabezado p:not(.rotulo) { font-size: 18px; }
.claro .encabezado p:not(.rotulo), .blanco .encabezado p:not(.rotulo) { color: var(--gris); }
.oscuro .encabezado p:not(.rotulo) { color: var(--texto-2); }

.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
.dos-columnas.invertida { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.texto { display: grid; gap: 18px; align-content: start; min-width: 0; }
.texto > p:not(.rotulo) { color: var(--gris); }
.oscuro .texto > p:not(.rotulo) { color: var(--texto-2); }

.captura { margin: 0; display: grid; gap: 12px; min-width: 0; }
.captura img { width: 100%; border-radius: 8px; border: 1px solid var(--linea-2); box-shadow: 0 24px 60px rgba(20, 27, 38, 0.16); }
.captura figcaption { color: var(--gris); font-size: 14.5px; }
.captura-ancha { margin-top: 48px; }
.capturas-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 32px; }

/* Qué simula: seis familias de componentes, con su lista real */
.familias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--grafito); }
.familias article { padding: 26px 28px 28px 0; display: grid; gap: 10px; align-content: start; border-bottom: 1px solid var(--linea); }
.familias article:not(:nth-child(3n + 1)) { padding-left: 28px; border-left: 1px solid var(--linea); }
.familias h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.familias h3 span { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--cian-claro); }
.familias p { color: var(--gris); font-size: 15.5px; }
.demo-cta {
  margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
  padding: 24px 28px; border-radius: var(--radio); background: var(--cian-fondo); border: 1px solid #b9e2f2;
}
.demo-cta > div { display: grid; gap: 4px; max-width: 640px; }
.demo-t { font-family: var(--f-titulo); font-stretch: 108%; font-weight: 700; font-size: 20px; }
.demo-cta p:not(.demo-t) { color: var(--gris); }

/* Datos en filas (variadores, PLC, tablero) */
.datos { margin: 8px 0 0; display: grid; border-top: 1px solid var(--linea-2); }
.datos div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--linea); }
.datos dt { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cian-claro); padding-top: 3px; }
.datos dd { margin: 0; color: var(--grafito); }
.marcas { display: flex; flex-wrap: wrap; gap: 8px; }
.marcas li { list-style: none; font-family: var(--mono); font-size: 13px; padding: 4px 10px; border: 1px solid var(--linea-2); border-radius: 4px; background: var(--blanco); color: var(--grafito); }
.marcas li b { color: var(--cian-claro); font-weight: 600; margin-left: 6px; }
.marcas { margin: 0; padding: 0; }

/* Corrientes reales: lo que en un tablero de verdad no se puede probar */
.fallas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fallas article {
  padding: 26px; border-radius: 8px; display: grid; gap: 10px; align-content: start;
  background: linear-gradient(180deg, rgba(239, 90, 76, 0.1), rgba(239, 90, 76, 0.02)), var(--panel);
  border: 1px solid rgba(239, 90, 76, 0.35);
}
.fallas h3 { color: var(--texto); display: flex; align-items: center; gap: 12px; }
.fallas h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 10px var(--rojo); flex: none; }
.fallas p { color: var(--texto-2); font-size: 15.5px; }

/* Código VLS y línea de comandos */
.codigo {
  margin: 0; padding: 22px 24px; border-radius: 8px; overflow-x: auto;
  background: var(--fondo); color: var(--texto); border: 1px solid var(--borde-fuerte);
  font: 400 14px/1.7 var(--mono); tab-size: 2;
}
.codigo .c { color: #7e8ea4; }
.codigo .k { color: var(--cian); }
.codigo .s { color: var(--fase-w); }
.codigo .n { color: var(--fase-u); }
.codigo-t { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); margin-bottom: 10px; }
.lista-cli { margin: 0; padding: 0; list-style: none; display: grid; border-top: 1px solid var(--linea-2); }
.lista-cli li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: 15.5px; color: var(--gris); }
.lista-cli code { font-family: var(--mono); font-size: 14px; color: var(--grafito); font-weight: 500; }

/* Contacto */
.contacto { background: radial-gradient(ellipse 60% 80% at 15% 20%, rgba(76, 195, 240, 0.1), transparent 70%), var(--fondo); }
.contacto-in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.contacto-in > div:first-child { display: grid; gap: 18px; }
.contacto-in > div:first-child p:not(.rotulo) { color: var(--texto-2); font-size: 18px; }
.autor { background: var(--panel); border: 1px solid var(--borde-fuerte); border-radius: 8px; padding: 28px; display: grid; gap: 6px; }
.autor-rotulo { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cian); }
.autor-nombre { font-family: var(--f-titulo); font-stretch: 110%; font-size: 28px; font-weight: 700; }
.autor-datos { margin: 14px 0 0; display: grid; }
.autor-datos div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--borde); }
.autor-datos dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-2); padding-top: 3px; }
.autor-datos dd { margin: 0; color: var(--texto); font-size: 15px; overflow-wrap: anywhere; }
.autor-datos a { color: var(--cian); text-decoration: none; }
.autor-datos a:hover { text-decoration: underline; }

/* Pie */
.pie { background: #060a10; border-top: 1px solid var(--borde); color: var(--texto-2); font-size: 14.5px; }
.pie-in { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: 56px 40px; }
.pie-marca { display: grid; gap: 8px; align-content: start; max-width: 380px; }
.pie-nombre { color: var(--texto); }
.pie-nombre b { font-family: var(--f-titulo); font-stretch: 112%; font-size: 16px; letter-spacing: 0.02em; }
.pie-col { display: grid; gap: 10px; align-content: start; }
.pie-col a { color: var(--texto-2); text-decoration: none; }
.pie-col a:hover { color: var(--texto); }
.pie-t { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto); margin-bottom: 4px; }
.pie-legal { padding-block: 22px 32px; border-top: 1px solid var(--borde); font-size: 12.5px; }
.pie-legal a { color: var(--texto); }

/* ── Página de la demo ───────────────────────────────── */
.demo { padding-block: 40px 72px; background: radial-gradient(circle, rgba(165, 179, 198, 0.12) 1px, transparent 1.4px) 0 0 / 22px 22px, var(--fondo); }
.demo-cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 40px; margin-bottom: 26px; }
.demo-cabeza > div { display: grid; gap: 12px; max-width: 680px; }
.demo-cabeza h1 { font-size: clamp(30px, 3.6vw, 44px); }
.demo-cabeza p:not(.rotulo) { color: var(--texto-2); }
.privado { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--texto-2); }

/* Selector de ejemplo: pestañas que nombran el circuito */
.ejemplos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ejemplos button {
  font: 600 14.5px var(--f-texto); color: var(--texto-2); background: var(--panel);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio); padding: 10px 16px; cursor: pointer;
  display: grid; gap: 2px; text-align: left;
}
.ejemplos button small { font: 400 12px var(--mono); color: var(--texto-2); letter-spacing: 0.04em; }
.ejemplos button:hover { border-color: var(--cian); color: var(--texto); }
.ejemplos button[aria-pressed="true"] { color: #04131c; background: var(--cian); border-color: var(--cian); }
.ejemplos button[aria-pressed="true"] small { color: #0b3a4d; }

.banco { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.banco .ventana { box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45); }
/* Lámina viva: el SVG del simulador (o la imagen fija mientras carga). Los circuitos verticales no pasan
   del alto de la pantalla. En el celular se puede seguir desplazando la página con el dedo; tocar y
   mantener sobre un control no abre el menú del sistema. */
.banco .lamina { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.banco .lamina img, .banco .lamina svg { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; }
.banco .lamina.viva { cursor: default; }
.medidores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--borde); }
.medidores div { padding: 12px 16px; display: grid; gap: 2px; }
.medidores div + div { border-left: 1px solid var(--borde); }
.medidores dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-2); }
.medidores dd { margin: 0; font-family: var(--mono); font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.medidores dd small { font-size: 13px; color: var(--texto-2); margin-left: 4px; }

.guia { display: grid; gap: 16px; }
.guia section { background: var(--panel); border: 1px solid var(--borde-fuerte); border-radius: 8px; padding: 20px; display: grid; gap: 12px; }
.guia h2 { font-size: 19px; letter-spacing: -0.01em; }
.guia p { color: var(--texto-2); font-size: 15px; }
.pasos-demo { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: paso; }
.pasos-demo li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: 15px; color: var(--texto); }
.pasos-demo li::before {
  counter-increment: paso; content: counter(paso);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--cian); color: var(--cian); font: 600 12.5px var(--mono);
}
.pasos-demo b { color: var(--cian-2); font-weight: 600; }
.nota { font-size: 13.5px; color: var(--texto-2); border-top: 1px solid var(--borde); padding-top: 12px; }
.carga { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12.5px; color: var(--texto-2); }
.carga-barra { flex: 1; height: 4px; border-radius: 2px; background: var(--borde); overflow: hidden; }
.carga { padding: 8px 16px; border-bottom: 1px solid var(--borde); }
.carga-barra i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--fase-u), var(--fase-v), var(--fase-w)); animation: carga 1.4s ease-in-out infinite alternate; }
@keyframes carga { from { translate: -10% 0; } to { translate: 160% 0; } }
.carga.falla .carga-barra { display: none; }

/* ── Adaptación ──────────────────────────────────────── */
@media (max-width: 1040px) {
  .menu { display: none; }
  .barra-in { justify-content: space-between; }
  .portada-in, .dos-columnas, .dos-columnas.invertida, .contacto-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ficha-portada { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha-portada div:nth-child(3) { padding-left: 0; border-left: 0; }
  .familias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .familias article:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .familias article:nth-child(2n) { padding-left: 28px; border-left: 1px solid var(--linea); }
  .fallas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banco { grid-template-columns: minmax(0, 1fr); }
  .capturas-par { grid-template-columns: minmax(0, 1fr); }
  .pie-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie-marca { grid-column: 1 / -1; }
  .seccion { padding-block: 80px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .contenedor { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .marca-sub { display: none; }
  .portada { padding-block: 48px 0; }
  .bajada { font-size: 17px; }
  .ficha-portada { margin-top: 44px; }
  .ficha-portada dd { font-size: 22px; }
  .sectores li + li::before { display: none; }
  .sectores ul { gap: 6px 20px; }
  .familias, .fallas { grid-template-columns: minmax(0, 1fr); }
  .familias article, .familias article:nth-child(2n) { padding-left: 0; border-left: 0; padding-right: 0; }
  .datos div, .lista-cli li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .demo-cta { padding: 24px 22px; }
  .medidores dd { font-size: 19px; }
  .pie-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seccion { padding-block: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton, .boton::after, .menu a::after { transition: none; }
  .carga-barra i { animation: none; width: 100%; }
}