/* =============================================================================
   CIWS — SISTEMA DE DISEÑO OFICIAL DEL SITIO
   =============================================================================
   Esta es LA hoja del sitio. Nació como el rediseño del home (ocho vueltas
   con el cliente) y desde aquí gobierna todas las páginas: portada,
   soluciones, productos, empresa y contacto.

   La regla de oro: NINGUNA página inventa estilos propios. Todo sale de
   includes/_ui.php, que arma las piezas con estas clases. Si una página
   necesita algo que no existe aquí, se añade aquí — no en un style="".
   Fue exactamente eso lo que degeneró el sitio anterior: 35 KB de estilos
   en línea en UNA sola página, y quince páginas que no se parecían entre sí.
   ========================================================================== */

/* =============================================================================
   CIWS — SISTEMA DE DISENO OFICIAL
   =============================================================================
   La v6 ya era clara y respiraba, pero se quedaba en "correcta". Lo que separa
   una página correcta de una cara no es más color ni más movimiento: es el
   trabajo de detalle que casi nadie nombra pero todo el mundo siente.
   Esta hoja lo pone, punto por punto.

   1. LA MARCA. Antes "CIWS" era el texto del menú con la fuente del cuerpo.
      Ahora es un logotipo: pastilla naranja con una talanquera levantada
      dibujada dentro, y la palabra en 900 con el tracking cerrado, en naranja.
      Es lo primero que se ve y era lo más flojo de la página.

   2. EL MOTIVO DE CARRIL. Las rayas discontinuas de demarcación vial recorren
      la página como hilo conductor: bajo los rótulos, en los bordes de
      sección, en el pie. Un motivo propio, repetido con disciplina, es la
      diferencia entre un sitio diseñado y un sitio armado.

   3. COMPOSICIÓN POR CAPAS. El visor del video ya no está solo: lleva una
      placa naranja detrás, desplazada, y una tarjeta de dato que se le monta
      encima por una esquina. Ese solape es lo que da sensación de profundidad
      real en vez de cajas puestas una al lado de la otra.

   4. TIPOGRAFÍA DE DOS VOCES. Archivo para titulares — una grotesca de
      ingeniería, con carácter a tamaño grande — y Plus Jakarta Sans para
      interfaz y lectura. Dos familias con papeles claros, no una sola
      estirada a la fuerza.

   5. CIFRAS TABULARES. Todo número lleva font-variant-numeric:tabular-nums.
      Sin eso los dígitos bailan al contar y se nota aunque no se sepa por qué.

   LO QUE SIGUE PROHIBIDO, que era la señal real de plantilla generada:
     backdrop-filter en la barra · capa de grano · glow de color sobre texto ·
     degradado dentro de las letras · monoespaciada en etiquetas diminutas ·
     todo centrado.
   ========================================================================== */

:root{
  --tinta:#0C1726;
  --tinta-2:#3E4F67;
  --tinta-3:#647691;
  --tinta-4:#94A2B8;

  --papel:#FFFFFF;
  --papel-2:#F5F8FC;
  --papel-3:#EBF0F7;
  --linea:#E1E8F1;
  --linea-2:#CBD6E4;

  --oscuro:#0C1726;
  --oscuro-2:#152437;
  --oscuro-3:#1E3350;

  --naranja:#FF5A00;
  --naranja-2:#E04A00;
  --naranja-t:#BF4200;      /* el naranja que sí se lee como texto sobre blanco */
  --naranja-10:#FFF2EA;
  --naranja-20:#FFE0CC;
  --verde:#0B7A3C;
  --verde-10:#E7F6EE;
  --amarillo:#F5C518;

  --sombra:0 1px 2px rgba(12,23,38,.05), 0 8px 24px -6px rgba(12,23,38,.08);
  --sombra-2:0 2px 4px rgba(12,23,38,.06), 0 20px 50px -12px rgba(12,23,38,.17);
  --sombra-3:0 6px 12px rgba(12,23,38,.09), 0 40px 80px -18px rgba(12,23,38,.32);
  --sombra-naranja:0 2px 6px rgba(255,90,0,.24), 0 16px 34px -10px rgba(255,90,0,.5);

  --nav-h:80px;
  --max:1220px;
  --r:18px;
  --r-s:12px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;line-height:1.66;background:var(--papel);color:var(--tinta);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
.env{max-width:var(--max);margin:0 auto;padding:0 28px;}

/* Archivo para titulares. Plus Jakarta para lo demás. Dos voces, no una. */
h1,h2,h3,h4{font-family:'Archivo',system-ui,sans-serif;font-weight:800;
  letter-spacing:-.032em;line-height:1.06;text-wrap:balance;}

/* Los dígitos no deben bailar al contar. */
.cifra b,.placa .num,.esta-punto,.tabnum{font-variant-numeric:tabular-nums;}

/* foco visible: en una página cara esto nunca se olvida */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--naranja);outline-offset:3px;border-radius:6px;}

.grain{display:none !important;}   /* lo imprime el include wa-float.php */

/* ═══ EL MOTIVO: RAYAS DE DEMARCACIÓN ═════════════════════════════════════
   Hilo conductor de toda la página. Sale del propio oficio, no de un catálogo
   de adornos, y por eso repetirlo no cansa: acompaña. */
.rayas{height:5px;border-radius:3px;
  background:repeating-linear-gradient(90deg,var(--naranja) 0 22px,transparent 22px 40px);}
.rayas-fina{height:3px;
  background:repeating-linear-gradient(90deg,var(--linea-2) 0 14px,transparent 14px 26px);}

/* ═══ LA MARCA ════════════════════════════════════════════════════════════
   El include imprime <a class="nav-brand" style="...">CIWS</a> con su tamaño
   y su color metidos en el atributo. No se toca ese archivo: se le gana desde
   aquí con [style] y !important, y se le añade el símbolo con ::before. */
/* Ojo con el selector: antes era .nav-brand[style] porque el include imprimía
   el tamaño y el color dentro del atributo style y había que ganarle en
   especificidad. El menú nuevo ya no los trae, así que el [style] dejaba la
   regla sin aplicar y la marca quedaba en texto oscuro sobre barra oscura:
   invisible. Ahora se selecciona por clase, que es lo correcto. */
.nav-brand,.fb{
  font-family:'Archivo',sans-serif;
  font-weight:900;
  letter-spacing:-.055em;
  color:var(--naranja);
  display:inline-flex;align-items:center;gap:11px;
  line-height:1;
}
/* Tercera subida del logo a petición del cliente: 44 → 52. La barra mide
   var(--nav-h), así que el límite real es ese alto; 52px con line-height:1
   todavía respira dentro. */
.nav-brand{font-size:52px;}
.fb{font-size:42px;}
/* v8: el cliente pidió "el logo CIWS solo". Fuera la pastilla con el símbolo:
   queda la palabra sola, en naranja y en 900. Menos es más cuando la palabra
   ya tiene peso propio. */

/* ═══ BARRA ═══════════════════════════════════════════════════════════════ */
/* v8 — BARRA OSCURA, pedida por el cliente. Además ahora encaja: la portada
   también es oscura, así que la barra se funde con ella al principio y solo
   se despega cuando el contenido claro pasa por debajo. */
.nav-wrap{position:sticky;top:0;z-index:1000;background:#11161D;
  border-bottom:1px solid rgba(255,255,255,.09);}
.nav{max-width:var(--max);margin:0 auto;padding:0 28px;height:var(--nav-h);
  display:flex;align-items:center;gap:26px;}
.nav-brand{flex-shrink:0;}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto;}
.nav-links a{font-size:15px;font-weight:600;color:#C7D0DC;padding:10px 15px;
  border-radius:10px;position:relative;transition:color .2s;}
/* el subrayado se dibuja desde el centro: gesto pequeño, se siente trabajado */
.nav-links a::after{content:'';position:absolute;left:15px;right:15px;bottom:4px;height:2px;
  background:var(--naranja);border-radius:2px;transform:scaleX(0);transform-origin:center;
  transition:transform .28s cubic-bezier(.2,.8,.2,1);}
.nav-links a:hover{color:#fff;}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-links a.active{color:#FF7A30;}
.nav-links a.active::after{transform:scaleX(1);}
.nav-cta{flex-shrink:0;display:flex;align-items:center;gap:10px;}
/* Soporte al lado de Cotizar, pero sin competirle: el naranja se lo queda
   el que vende. Este es de borde, que es lo que corresponde a una acción
   de servicio. */
.btn-sop{font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;
  color:#D7E1EE;border:1.5px solid rgba(255,255,255,.22);border-radius:10px;
  padding:10px 17px;white-space:nowrap;transition:background .17s,border-color .17s,color .17s;}
.btn-sop:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45);color:#fff;}
.btn-sop:focus-visible{outline:2px solid var(--naranja);outline-offset:2px;}
/* Este es pequeño (15px) y no puede crecer sin descuadrar la barra, así que
   usa el naranja calibrado: blanco sobre --naranja-t da 4.6 y pasa AA. */
.btn-o{display:inline-flex;align-items:center;justify-content:center;background:var(--naranja-t);
  color:#fff !important;font-weight:700;font-size:15px;padding:13px 24px;border-radius:12px;
  box-shadow:var(--sombra-naranja);position:relative;overflow:hidden;
  transition:background .18s,transform .18s,box-shadow .22s;}
.btn-o:hover{background:#A33800;transform:translateY(-2px);}
.hamburger{display:none;margin-left:auto;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:12px;width:48px;height:44px;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:var(--sombra);}
.hamburger span{display:block;width:19px;height:2px;background:#fff;border-radius:2px;
  transition:transform .25s,opacity .2s;}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
/* ── EL MENÚ DE MÓVIL ──────────────────────────────────────────────────
   EL DEFECTO QUE TENÍA: `justify-content:center` sin desplazamiento. El
   menú lleva 13 enlaces en tres grupos —más de 900 px de alto— y en una
   pantalla de 812 px eso significa que el contenido se centraba y se
   RECORTABA por arriba y por abajo, sin forma de llegar a lo cortado. Los
   últimos enlaces (Contacto, Soporte, Cotizar) no existían para el
   visitante de celular.

   Ahora: empieza arriba, se desplaza si no cabe, y el botón de cerrar va
   pegado en una barra propia para que siempre esté a un dedo. Tamaños
   ajustados para que en un teléfono normal quepa casi todo sin desplazar. */
.mobile-menu{display:none;position:fixed;inset:0;z-index:1002;background:#11161D;
  flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
  padding:0 26px calc(30px + env(safe-area-inset-bottom)) 26px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.mobile-menu.open{display:flex;}
/* La barra de arriba se queda fija mientras se desplaza el resto: cerrar
   nunca debe exigir volver hasta el principio. */
.mm-barra{position:sticky;top:0;z-index:2;display:flex;align-items:center;
  justify-content:flex-end;min-height:56px;margin:0 -26px;padding:0 26px;
  background:#11161D;padding-top:env(safe-area-inset-top);}
.mobile-menu a{font-family:'Archivo',sans-serif;font-size:23px;font-weight:800;
  letter-spacing:-.035em;color:#fff;padding:8px 0;}
.mobile-menu a.active,.mobile-menu a:hover{color:#FF7A30;}
.mm-close{width:46px;height:46px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);color:#fff;font-size:26px;border-radius:14px;
  cursor:pointer;line-height:1;flex-shrink:0;}

/* ═══ BOTONES ═════════════════════════════════════════════════════════════
   El destello que cruza al pasar el cursor: dura 600 ms, se hace una vez y no
   se repite. Es el tipo de detalle que solo se nota si falta. */
/* 19px en negrita = "texto grande" para WCAG, que con blanco sobre el
   naranja de marca pide 3.0 y tenemos 3.1. Así se cumple SIN cambiar el
   naranja, que es lo que identifica a CIWS. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:19px;padding:16px 30px;border-radius:13px;
  border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;
  transition:background .18s,border-color .18s,transform .18s,box-shadow .22s;}
.btn::before{content:'';position:absolute;top:0;bottom:0;left:-40%;width:35%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg);opacity:0;}
.btn:hover::before{animation:destello .6s ease-out;}
@keyframes destello{0%{left:-40%;opacity:1}100%{left:120%;opacity:0}}
.btn-p{background:var(--naranja);color:#fff;box-shadow:var(--sombra-naranja);}
.btn-p:hover{background:var(--naranja-2);transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(255,90,0,.28), 0 22px 44px -12px rgba(255,90,0,.55);}
.btn-s{background:#fff;color:var(--tinta);border-color:var(--linea-2);box-shadow:var(--sombra);}
.btn-s:hover{border-color:var(--tinta-4);transform:translateY(-2px);box-shadow:var(--sombra-2);}

/* ═══ PORTADA ═════════════════════════════════════════════════════════════ */
/* ═══ PORTADA v8 — CON FONDO VIVO ═════════════════════════════════════════
   El cliente: "el header no de fondo blanco, algo de animación, algo de
   fondo, como en la página actual, no tan estático". Así que vuelve el
   video — pero de FONDO de la portada, no como hero de 100vh que se come
   la pantalla. Encima van tres capas que le dan vida sin estorbar:
     · un velo oscuro en degradado, para que el texto siempre se lea
     · la rejilla de puntos, que deriva muy despacio
     · las rayas de carril corriendo al pie, el motivo de la casa
   El resto del sitio sigue claro: portada oscura y cuerpo claro es un
   contraste que da ritmo, no la página negra entera que ya se descartó. */
.port{position:relative;overflow:hidden;background:#0A1119;color:#fff;}
.port-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.5) saturate(.85);}
.port-velo{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(105deg,rgba(10,17,25,.96) 0%,rgba(10,17,25,.82) 42%,rgba(10,17,25,.5) 72%,rgba(10,17,25,.72) 100%),
    radial-gradient(900px 520px at 88% 12%, rgba(255,90,0,.16) 0%, rgba(255,90,0,0) 62%);}
/* rayas de carril corriendo al pie de la portada */
.port-rayas{position:absolute;left:0;right:0;bottom:0;height:6px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--naranja) 0 34px,transparent 34px 72px);
  background-size:72px 100%;opacity:.85;animation:corre-carril 2.4s linear infinite;}
@keyframes corre-carril{from{background-position:0 0}to{background-position:-72px 0}}
/* la rejilla deriva muy despacio: 40 s por vuelta. Lo justo para que el fondo
   respire sin que nadie pueda señalar qué se está moviendo. */
.port::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(1000px 540px at 74% 22%, #000 0%, transparent 70%);
          mask-image:radial-gradient(1000px 540px at 74% 22%, #000 0%, transparent 70%);
  animation:deriva 40s linear infinite;}
@keyframes deriva{from{background-position:0 0}to{background-position:28px 56px}}
.port-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;
  padding:78px 28px 116px;display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center;}

.marquee{display:inline-flex;align-items:center;gap:10px;margin-bottom:24px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;
  padding:8px 18px 8px 13px;}
.marquee i{width:8px;height:8px;border-radius:50%;background:var(--verde);flex-shrink:0;
  animation:late 2s ease-in-out infinite;}
@keyframes late{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
.marquee b{font-size:13.5px;font-weight:700;color:#E4EAF2;letter-spacing:-.012em;}

.hslide{display:none;}
.hslide.active{display:block;animation:entra .6s cubic-bezier(.2,.8,.2,1) both;}
@keyframes entra{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
.hslide h1{font-size:clamp(38px,5vw,63px);margin-bottom:20px;}
.hslide h1 span{color:#FF7A30;display:block;position:relative;}
.hslide p{font-size:clamp(17px,1.6vw,19.5px);color:#B6C3D4;max-width:33em;margin-bottom:26px;}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:32px;}
.chip{font-size:13.5px;font-weight:600;color:#D4DCE7;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:9px 17px;
  transition:transform .2s,border-color .2s,background .2s;}
.chip:hover{transform:translateY(-2px);border-color:rgba(255,122,48,.55);background:rgba(255,255,255,.12);}
.port-btns{display:flex;gap:13px;flex-wrap:wrap;}
.hdots{display:flex;gap:9px;margin-top:38px;}
.hdot{width:46px;height:4px;background:rgba(255,255,255,.22);border:none;padding:0;cursor:pointer;
  position:relative;overflow:hidden;border-radius:3px;transition:background .2s;}
.hdot:hover{background:rgba(255,122,48,.5);}
.hdot.active::after{content:'';position:absolute;inset:0;background:var(--naranja);
  transform-origin:left;animation:corre 5.6s linear forwards;border-radius:3px;}
@keyframes corre{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── el bloque del visor, por capas ──────────────────────────────────────
   Placa naranja detrás, desplazada · visor · tarjeta de dato montada encima.
   El solape es lo que da profundidad de verdad. */
.visor-bloque{position:relative;}
/* v8: la placa de atrás desaparece — el marco blanco ya separa el panel del
   fondo, y dos recursos para lo mismo ensucian. */
.visor-placa{display:none;}
/* v8: el video se mudó al fondo de la portada, así que este panel ya no lo
   lleva dentro. Sobre un fondo que ahora también es oscuro se fundiría, y
   por eso lleva MARCO BLANCO — hecho con un box-shadow de reparto sólido,
   sin tocar el marcado. Queda como la pantalla de un equipo, que es
   exactamente lo que representa. */
.visor{position:relative;border-radius:22px;overflow:hidden;
  background:radial-gradient(120% 110% at 70% 18%, #1B2B40 0%, #0B1420 62%, #070D15 100%);
  aspect-ratio:4/3.1;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 0 0 11px #fff, 0 10px 20px rgba(0,0,0,.28), 0 46px 90px -20px rgba(0,0,0,.6);}
/* textura de sensor: apenas se intuye, evita el plano muerto */
.visor::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);}
/* El material de la pagina dentro de la caja, y encima el degradado de
   marca. Sin el velo, el HUD se pierde sobre una foto clara. */
.visor-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* .42 apagaba el video hasta volverlo una mancha. A .72 se ve lo que
     pasa —que es justo lo que llama la atencion— y el HUD sigue legible
     gracias al velo, que ahora es mas suave y solo oscurece donde hay
     texto. */
  filter:brightness(.72) saturate(.95);z-index:0;}
.visor-velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* oscuro arriba y abajo, donde van los chips y la talanquera;
       transparente en el centro, que es donde se ve el video */
    linear-gradient(to bottom,rgba(8,14,22,.78) 0%,rgba(8,14,22,.14) 34%,rgba(8,14,22,.12) 62%,rgba(8,14,22,.80) 100%),
    radial-gradient(420px 260px at 82% 6%, rgba(255,90,0,.16) 0%, rgba(255,90,0,0) 66%);}

.hud{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  justify-content:space-between;padding:20px 20px 52px;}
/* El estado subio aqui: la tarjeta "+5.000" que se monta en la esquina
   inferior izquierda tapaba el chip AUTORIZADO. Ademas el estado pertenece
   al carril, no a la barrera, asi que la informacion tambien queda mejor. */
/* wrap: con el visor angosto de las portadas de producto, la etiqueta, el
   estado y «En vivo» no caben en una fila y «En vivo» se salia del marco
   (medido: 390 px en un visor de 375). Que baje de linea en vez de
   desbordarse. */
.hud-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:8px 10px;flex-wrap:wrap;}
.hud-izq{flex:1 1 auto;min-width:0;}
.hud-izq{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}

.hud-et,.hud-vivo{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  border-radius:999px;padding:8px 14px;background:rgba(6,12,22,.76);color:#EAF0F8;
  border:1px solid rgba(255,255,255,.22);}
/* nowrap: en las portadas de producto el visor es mas angosto que en el
   home y «En vivo» se partia en dos lineas. */
.hud-vivo{display:flex;align-items:center;gap:8px;color:#7CF3AD;white-space:nowrap;
  background:rgba(5,42,23,.82);border-color:rgba(124,243,173,.45);}
.hud-vivo i{width:6px;height:6px;border-radius:50%;background:#7CF3AD;animation:late 1.7s ease-in-out infinite;}

.encuadre{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);
  width:min(76%,278px);padding:20px;}
.mira{position:absolute;width:22px;height:22px;border:2.5px solid var(--naranja);border-radius:3px;}
.mira.tl{top:0;left:0;border-right:0;border-bottom:0;}
.mira.tr{top:0;right:0;border-left:0;border-bottom:0;}
.mira.bl{bottom:0;left:0;border-right:0;border-top:0;}
.mira.br{bottom:0;right:0;border-left:0;border-top:0;}
.barrido{position:absolute;left:8px;right:8px;height:2px;background:var(--naranja);top:0;border-radius:2px;
  animation:barre 2.7s cubic-bezier(.4,0,.6,1) infinite;}
@keyframes barre{0%{top:8%;opacity:0}12%{opacity:.95}88%{opacity:.95}100%{top:92%;opacity:0}}

.placa{background:var(--amarillo);border-radius:9px;border:3px solid #131313;
  padding:10px 11px 8px;text-align:center;box-shadow:0 16px 38px rgba(0,0,0,.52);}
.placa .pais{font-size:8.5px;font-weight:800;letter-spacing:.24em;color:#131313;
  text-transform:uppercase;line-height:1;margin-bottom:4px;}
.placa .num{font-family:'Archivo',sans-serif;font-size:clamp(29px,3.9vw,40px);font-weight:800;
  line-height:1.02;color:#131313;letter-spacing:.055em;}
.placa .num span{display:inline-block;min-width:.66em;}

/* Ya solo queda la barrera aqui abajo (el estado subio a la fila de arriba),
   asi que va pegada a la derecha. Con space-between y un solo hijo, flexbox
   lo deja a la izquierda — que es justo donde se montaba la tarjeta. */
/* LECTURA — el equivalente a la placa para los productos que no leen
   placas: el tiquete del kiosko, el total del cajero, la credencial del
   torniquete. Mismo sitio, mismo encuadre, otro contenido. */
.lectura{background:rgba(6,11,18,.86);border:2px solid rgba(255,255,255,.14);
  border-radius:10px;padding:14px 18px;text-align:center;
  /* width y no min-width: con min-width mas el padding se salia 3 px del
     encuadre en movil. Asi nunca pasa del ancho disponible. */
  width:min(90%,290px);max-width:100%;}
.lectura-res{font-family:'Archivo',sans-serif;font-size:clamp(19px,2.5vw,27px);
  font-weight:800;letter-spacing:.01em;color:#fff;line-height:1.15;
  display:inline-block;min-height:1.15em;font-variant-numeric:tabular-nums;}

.hud-bajo{display:flex;align-items:flex-end;justify-content:flex-end;gap:12px;}
.estado{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:10px 16px;border-radius:999px;
  background:rgba(6,12,22,.76);border:1px solid rgba(255,255,255,.22);color:#EAF0F8;
  transition:color .35s,border-color .35s,background .35s;}
.estado.ok{color:#7CF3AD;background:rgba(5,42,23,.84);border-color:rgba(124,243,173,.5);}
.estado svg{width:15px;height:15px;}

.tal{position:relative;width:130px;height:60px;flex-shrink:0;}
.tal-poste{position:absolute;right:6px;bottom:0;width:12px;height:33px;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,#6B7D98,#2C3E5B);}
.tal-luz{position:absolute;right:9px;bottom:27px;width:7px;height:7px;border-radius:50%;
  background:#7A3A00;transition:background .35s;}
.tal-luz.ok{background:#7CF3AD;box-shadow:0 0 0 4px rgba(124,243,173,.18);}
.tal-barra{position:absolute;right:18px;bottom:25px;width:102px;height:9px;border-radius:3px;
  transform-origin:right center;
  background:repeating-linear-gradient(135deg,var(--naranja) 0 12px,#FAFAFA 12px 24px);
  transition:transform 1.15s cubic-bezier(.34,1.3,.64,1);}
.tal-barra.arriba{transform:rotate(72deg);}

/* la tarjeta que se monta sobre la esquina del visor */
/* CENTRADA respecto al cuadro de la placa, montada sobre su borde inferior.
   Antes colgaba de la esquina izquierda; centrada ancla la composición y el
   dato queda donde la vista ya está mirando. */
.visor-dato{position:absolute;left:50%;transform:translateX(-50%);bottom:-74px;z-index:3;
  background:#fff;border:1px solid rgba(255,255,255,.7);border-radius:18px;padding:18px 26px;
  box-shadow:0 10px 22px rgba(0,0,0,.3), 0 34px 70px -18px rgba(0,0,0,.5);
  display:flex;align-items:center;gap:16px;}
.visor-dato .n{font-family:'Archivo',sans-serif;font-size:32px;font-weight:900;
  letter-spacing:-.04em;line-height:1;color:var(--naranja);font-variant-numeric:tabular-nums;}
.visor-dato .t{font-size:13.5px;font-weight:600;color:var(--tinta-2);line-height:1.35;
  max-width:16ch;white-space:normal;}

/* ═══ CIFRAS ══════════════════════════════════════════════════════════════ */
.cifras{background:var(--papel-2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);}
.cifras-in{max-width:var(--max);margin:0 auto;padding:46px 28px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.cifra{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:26px;
  box-shadow:var(--sombra);position:relative;overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s;}
.cifra::before{content:'';position:absolute;left:26px;right:26px;top:0;height:3px;
  background:var(--naranja);border-radius:0 0 3px 3px;transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);}
.cifra:hover{transform:translateY(-5px);box-shadow:var(--sombra-2);}
.cifra:hover::before{transform:scaleX(1);}
.cifra b{display:block;font-family:'Archivo',sans-serif;font-size:clamp(30px,3.2vw,40px);
  font-weight:900;letter-spacing:-.04em;line-height:1;}
.cifra.naranja b{color:var(--naranja-t);}
.cifra span{display:block;font-size:14px;color:var(--tinta-2);margin-top:10px;font-weight:500;}

/* ═══ SECCIONES ═══════════════════════════════════════════════════════════ */
.sec{padding:108px 0;position:relative;}
.sec-gris{background:var(--papel-2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);}
.ojo{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
  background:var(--naranja-10);border:1px solid var(--naranja-20);border-radius:999px;padding:8px 17px;}
.ojo b{font-size:12.5px;font-weight:700;color:var(--naranja-t);letter-spacing:-.008em;}
.ojo i{width:7px;height:7px;border-radius:50%;background:var(--naranja);font-style:normal;flex-shrink:0;}
.sec h2{font-size:clamp(32px,4.1vw,52px);margin-bottom:18px;}
/* medido: #FF5A00 sobre blanco da 2.9 y AA pide 3.0 para texto grande.
   --naranja-t es el mismo naranja calibrado para leerse (4.9). */
.sec h2 span{color:var(--naranja-t);}
.sec-bajada{font-size:18.5px;color:var(--tinta-2);max-width:60ch;margin-bottom:24px;}
/* las rayas cierran el encabezado de cada sección: el motivo, otra vez */
.sec-rayas{width:120px;margin-bottom:54px;}

/* ═══ EL CARRIL ═══════════════════════════════════════════════════════════ */
.carril{position:relative;padding-left:86px;}
.carril-riel{position:absolute;left:29px;top:12px;bottom:12px;width:4px;border-radius:4px;
  background:repeating-linear-gradient(180deg,var(--linea-2) 0 14px,transparent 14px 26px);}
.carril-avance{position:absolute;left:0;top:0;width:100%;height:0;border-radius:4px;
  background:repeating-linear-gradient(180deg,var(--naranja) 0 14px,transparent 14px 26px);}
.esta{position:relative;padding:0 0 44px;}
.esta:last-child{padding-bottom:0;}
.esta-punto{position:absolute;left:-86px;top:0;width:62px;height:62px;border-radius:20px;
  border:1px solid var(--linea);background:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Archivo',sans-serif;font-size:21px;font-weight:900;color:var(--tinta-4);
  box-shadow:var(--sombra);
  transition:border-color .45s,color .45s,background .45s,transform .45s,box-shadow .45s;}
.esta.activa .esta-punto{background:var(--naranja);border-color:var(--naranja);color:#fff;
  transform:scale(1.07);box-shadow:var(--sombra-naranja);}
.esta-caja{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:28px 30px;
  box-shadow:var(--sombra);transition:box-shadow .4s,border-color .4s;}
.esta.activa .esta-caja{box-shadow:var(--sombra-2);border-color:var(--linea-2);}
.esta h3{font-size:23px;margin-bottom:10px;}
.esta p{color:var(--tinta-2);max-width:58ch;margin-bottom:16px;font-size:16.5px;}
.esta-nota{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;
  color:var(--verde);background:var(--verde-10);border:1px solid #BFE8D2;padding:8px 15px;border-radius:999px;}

/* ═══ DOS SOLUCIONES ══════════════════════════════════════════════════════ */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.sol{background:#fff;border:1px solid var(--linea);border-radius:22px;padding:38px;
  box-shadow:var(--sombra);position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;}
.sol::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--naranja);
  transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.8,.2,1);}
.js .sol::before{transform:scaleX(0);}
.sol.visto::before{transform:scaleX(1);}
.sol:hover{transform:translateY(-5px);box-shadow:var(--sombra-2);}
.sol-et{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--naranja-t);background:var(--naranja-10);border:1px solid var(--naranja-20);
  border-radius:999px;padding:7px 14px;margin-bottom:18px;}
.sol h3{font-size:29px;margin-bottom:13px;}
.sol p{color:var(--tinta-2);font-size:16.5px;margin-bottom:26px;}
.sol-items{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.sol-item{background:var(--papel-2);border:1px solid var(--linea);border-radius:var(--r-s);
  padding:16px 17px;font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:12px;
  transition:background .2s,border-color .2s,transform .2s;}
.sol-item:hover{background:#fff;border-color:var(--naranja-20);transform:translateY(-2px);}
.sol-item svg{width:19px;height:19px;color:var(--naranja);flex-shrink:0;}
.torni{width:100px;height:100px;margin:0 auto 24px;position:relative;}
.torni-aro{position:absolute;inset:0;border:2px solid var(--linea-2);border-radius:50%;}
.torni-eje{position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
  background:var(--naranja);border-radius:50%;box-shadow:0 0 0 5px var(--naranja-10);}
.torni-brazos{position:absolute;inset:0;transition:transform 1.05s cubic-bezier(.34,1.25,.64,1);}
.torni-brazo{position:absolute;left:50%;top:50%;width:42px;height:6px;margin-top:-3px;
  background:var(--tinta-4);border-radius:3px;transform-origin:left center;}
.torni-brazo:nth-child(1){transform:rotate(0deg);}
.torni-brazo:nth-child(2){transform:rotate(120deg);}
.torni-brazo:nth-child(3){transform:rotate(240deg);}

/* ═══ LO QUE VA INCLUIDO ══════════════════════════════════════════════════ */
.inc{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.inc-col{border-radius:22px;padding:36px;}
.inc-col.si{background:#fff;border:2px solid #BFE8D2;box-shadow:var(--sombra-2);}
.inc-col.no{background:var(--papel-2);border:1px solid var(--linea);}
.inc-tit{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;border-radius:999px;padding:8px 15px;margin-bottom:22px;}
.inc-col.si .inc-tit{color:var(--verde);background:var(--verde-10);border:1px solid #BFE8D2;}
.inc-col.no .inc-tit{color:var(--tinta-3);background:var(--papel-3);border:1px solid var(--linea);}
.inc-li{display:flex;align-items:flex-start;gap:14px;padding:14px 0;font-size:15.5px;
  border-top:1px solid var(--linea);}
.inc-li:first-of-type{border-top:none;}
.inc-li svg{width:21px;height:21px;flex-shrink:0;margin-top:2px;}
.inc-col.si .inc-li svg{color:var(--verde);}
.inc-col.no{color:var(--tinta-2);}
.inc-col.no .inc-li svg{color:var(--tinta-4);}

/* ═══ HARDWARE ════════════════════════════════════════════════════════════ */
.hard{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.eq{background:#fff;border:1px solid var(--linea);border-radius:22px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--sombra);
  transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s,border-color .32s;}
.eq:hover{transform:translateY(-7px);box-shadow:var(--sombra-3);border-color:var(--naranja-20);}
.eq-img{background:linear-gradient(168deg,var(--papel-2) 0%,var(--papel-3) 100%);
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding:24px;position:relative;}
/* halo naranja detrás del producto: aparece al pasar el cursor */
.eq-img::before{content:'';position:absolute;width:62%;aspect-ratio:1;border-radius:50%;
  background:var(--naranja);opacity:0;filter:blur(46px);transition:opacity .45s;}
.eq:hover .eq-img::before{opacity:.16;}
.eq-img img{position:relative;max-height:100%;width:auto;object-fit:contain;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);}
.eq:hover .eq-img img{transform:scale(1.08) translateY(-5px);}
.eq-cu{padding:28px;display:flex;flex-direction:column;flex:1;}
/* medido: --tinta-4 daba 2.6 sobre blanco. A 11,5px eso no se lee. */
.eq-et{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tinta-3);margin-bottom:11px;}
.eq h3{font-size:23px;margin-bottom:11px;}
.eq p{font-size:15.5px;color:var(--tinta-2);margin-bottom:22px;flex:1;}
.eq-ver{font-size:15px;font-weight:700;color:var(--naranja-t);display:inline-flex;align-items:center;gap:8px;}
.eq-ver span{transition:transform .28s;display:inline-block;}
.eq:hover .eq-ver span{transform:translateX(5px);}

/* ═══ SECTORES ════════════════════════════════════════════════════════════ */
.sectores{display:flex;flex-wrap:wrap;gap:13px;}
.sector{background:#fff;border:1px solid var(--linea);border-radius:999px;padding:14px 26px;
  font-size:15.5px;font-weight:600;box-shadow:var(--sombra);
  transition:background .22s,color .22s,border-color .22s,transform .22s,box-shadow .22s;}
.sector:hover{background:var(--naranja);border-color:var(--naranja);color:#fff;
  transform:translateY(-3px);box-shadow:var(--sombra-naranja);}

/* ═══ PREGUNTAS ═══════════════════════════════════════════════════════════ */
.faq{display:grid;gap:13px;}
.faq details{background:#fff;border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:var(--sombra);overflow:hidden;transition:border-color .22s,box-shadow .22s;}
.faq details[open]{border-color:var(--naranja-20);box-shadow:var(--sombra-2);}
.faq summary{list-style:none;cursor:pointer;padding:24px 62px 24px 28px;position:relative;
  font-weight:700;font-size:17.5px;letter-spacing:-.018em;transition:color .2s;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--naranja-t);}
.faq summary::after{content:'';position:absolute;right:28px;top:50%;width:12px;height:12px;
  margin-top:-9px;border-right:2.5px solid var(--naranja);border-bottom:2.5px solid var(--naranja);
  transform:rotate(45deg);transition:transform .28s;}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px;}
.faq .resp{padding:0 28px 26px;color:var(--tinta-2);max-width:78ch;font-size:16.5px;}

/* ═══ CIERRE ══════════════════════════════════════════════════════════════ */
.cierre{padding:0 0 108px;}
.cierre-caja{max-width:var(--max);margin:0 auto;border-radius:30px;padding:78px 62px;
  background:linear-gradient(135deg,var(--oscuro) 0%,var(--oscuro-3) 100%);
  color:#fff;box-shadow:var(--sombra-3);position:relative;overflow:hidden;}
/* rayas de carril, muy tenues, cruzando la caja */
.cierre-caja::before{content:'';position:absolute;right:-60px;top:-40px;width:420px;height:420px;
  background:repeating-linear-gradient(135deg,rgba(255,90,0,.22) 0 18px,transparent 18px 40px);
  transform:rotate(8deg);pointer-events:none;}
.cierre-caja > *{position:relative;}
.cierre-caja .ojo{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);}
.cierre-caja .ojo b{color:#FFC9A3;}
.cierre-caja h2{font-size:clamp(32px,4.2vw,54px);margin-bottom:18px;max-width:17em;}
.cierre-caja p{font-size:19px;color:#B6C4D6;max-width:56ch;margin-bottom:36px;}
.cierre-caja .btn-s{background:transparent;color:#fff;border-color:rgba(255,255,255,.38);box-shadow:none;}
.cierre-caja .btn-s:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.65);}

/* ═══ PIE ═════════════════════════════════════════════════════════════════ */
footer{background:var(--oscuro);color:#93A4BC;padding:0 28px 30px;position:relative;}
/* el motivo cierra la página */
footer::before{content:'';display:block;height:5px;margin:0 -28px 62px;
  background:repeating-linear-gradient(90deg,var(--naranja) 0 22px,transparent 22px 40px);}
.fg{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;}
.fd{color:#93A4BC;font-size:15px;margin-top:14px;max-width:32ch;}
.fc h5{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:18px;}
.fc a{display:block;color:#93A4BC;font-size:15px;padding:6px 0;transition:color .18s,padding-left .18s;}
.fc a:hover{color:#fff;padding-left:5px;}
/* Los legales en su propia línea, antes del copyright. Se ven porque
   tienen sitio propio, no porque griten. */
.flegal{max-width:var(--max);margin:36px auto 0;padding:0 28px;
  display:flex;flex-wrap:wrap;gap:8px 26px;}
.flegal a{font-size:14px;color:#93A4BC;text-decoration:underline;
  text-underline-offset:3px;transition:color .18s;}
.flegal a:hover{color:#fff;}

.fbot{max-width:var(--max);margin:22px auto 0;padding-top:26px;border-top:1px solid var(--oscuro-3);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:#8397B1;}

/* Razón social, NIT y dirección: lo que un administrador de conjunto busca
   para saber si al otro lado hay una empresa de verdad. */
.fdir{display:flex;flex-direction:column;gap:3px;margin-top:20px;
  font-style:normal;font-size:14px;line-height:1.55;color:#93A4BC;}
.fdir strong{color:#D7E1EE;font-weight:600;}
.fdir a{color:#93A4BC;}
.fdir a:hover{color:#fff;}

.fredes{display:flex;gap:9px;list-style:none;padding:0;margin:20px 0 0;}
.fredes a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:10px;background:var(--oscuro-3);color:#B6C5D8;
  transition:background .17s,color .17s,transform .17s;}
.fredes a:hover{background:var(--naranja);color:#fff;transform:translateY(-2px);}
.fredes a:focus-visible{outline:2px solid var(--naranja);outline-offset:2px;}

/* ═══ WHATSAPP ════════════════════════════════════════════════════════════
   Se conserva porque el blog todavía lo usa y porque el enlace a WhatsApp
   sigue vivo dentro del panel de Santi. */
.wa-float{position:fixed;right:24px;bottom:24px;z-index:900;width:60px;height:60px;border-radius:50%;
  background:#25A75B;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 12px rgba(37,167,91,.32), 0 18px 38px -10px rgba(37,167,91,.5);
  transition:background .2s,transform .2s;}
.wa-float:hover{background:#1C8A49;transform:scale(1.08);}
.wa-badge{position:absolute;top:-2px;right:-2px;width:23px;height:23px;border-radius:50%;
  background:var(--naranja);color:#fff;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;}

/* ═══ SANTI · ASESOR FLOTANTE ═════════════════════════════════════════════
   Reemplaza al botón verde. Lleva la CARA de Santi, no un icono: lo que
   convierte no es el widget, es que se vea que hay una persona. El markup
   está en includes/santi-float.php.

   Orden de las reglas: el `display` de cada pieza se declara UNA vez y lo
   que lo cambia va después. Tenerlo en una regla de alineación al final
   pisaba el `display:none` y se veían dos iconos a la vez. */

.st-lanza{position:fixed;right:24px;bottom:24px;z-index:960;width:68px;height:68px;
  border:0;border-radius:50%;cursor:pointer;padding:0;overflow:visible;
  background:var(--papel);display:block;
  box-shadow:0 0 0 3px var(--naranja), var(--sombra-3);
  transition:transform .22s,box-shadow .22s;}
.st-lanza:hover{transform:scale(1.06);}
.st-lanza:focus-visible{outline:3px solid var(--tinta);outline-offset:4px;}
.st-cara{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;}
.st-lanza-cerrar{display:none;position:absolute;inset:0;border-radius:50%;
  align-items:center;justify-content:center;background:var(--tinta);color:#fff;}
.st-lanza.st-abierto .st-cara{opacity:0;}
.st-lanza.st-abierto .st-lanza-cerrar{display:flex;}
.st-lanza.st-abierto{box-shadow:0 0 0 3px var(--tinta),var(--sombra-2);}

/* «En línea»: el punto verde de toda la vida, que aquí sí significa algo
   —Santi responde en el momento— y por eso late. Cuando ya abrió el chat,
   deja de latir: un aviso permanente es ruido. */
.st-punto{position:absolute;bottom:3px;right:3px;width:15px;height:15px;border-radius:50%;
  background:var(--verde);border:3px solid var(--papel);}
.st-punto::after{content:'';position:absolute;inset:-3px;border-radius:50%;
  border:3px solid var(--verde);animation:stLatido 2.4s ease-out infinite;}
.st-lanza.st-visto .st-punto::after,.st-lanza.st-abierto .st-punto{display:none;}
@keyframes stLatido{0%{transform:scale(1);opacity:.7;}70%{transform:scale(1.9);opacity:0;}100%{opacity:0;}}

/* El movimiento que hace al saludar: tres cabeceos y para. */
.st-lanza.st-llama{animation:stSaluda 1.3s ease-in-out;}
@keyframes stSaluda{0%,100%{transform:rotate(0) scale(1);}
  20%{transform:rotate(-7deg) scale(1.07);}40%{transform:rotate(7deg) scale(1.07);}
  60%{transform:rotate(-5deg) scale(1.05);}80%{transform:rotate(4deg) scale(1.03);}}

/* ── (1) MENSAJE NUEVO ─────────────────────────────────────────────────
   Minimizado no es apagado. El número rojo sobre la foto dice cuántos
   mensajes dejó Santi mientras la ventana estaba cerrada, y el globo trae
   el mensaje —no un rótulo— porque eso es lo que invita a contestar.
   El contador lo pone toque() en includes/santi-float.php y solo con
   mensajes que de verdad están en cola: un (1) que al abrir no muestra
   nada se paga con el visitante cerrando el chat para siempre. */
.st-nuevos{position:absolute;top:-3px;right:-3px;min-width:23px;height:23px;padding:0 6px;
  border-radius:12px;background:#E5231B;color:#fff;font-weight:800;font-size:12.5px;
  line-height:23px;text-align:center;letter-spacing:-.01em;box-shadow:0 0 0 3px var(--papel);
  animation:stEntraNuevo .34s cubic-bezier(.2,1.5,.4,1) both;}
.st-lanza.st-abierto .st-nuevos{display:none;}
@keyframes stEntraNuevo{from{transform:scale(0);}to{transform:scale(1);}}

.st-globo{position:fixed;right:104px;bottom:40px;z-index:959;
  background:var(--tinta);color:#fff;font-size:14px;font-weight:600;
  padding:9px 15px;border-radius:12px;white-space:nowrap;box-shadow:var(--sombra-2);
  opacity:0;transform:translateX(10px);pointer-events:none;transition:opacity .25s,transform .25s;}
.st-globo::after{content:'';position:absolute;right:-5px;top:50%;margin-top:-5px;
  width:10px;height:10px;background:var(--tinta);transform:rotate(45deg);}
/* Ahora Santi abre directo a los 6 s, así que el globo ya no anuncia la
   apertura. Se queda como pista al pasar el mouse por encima del círculo:
   quien ve una cara redonda flotando no siempre adivina que es un chat. */
.st-lanza:hover + .st-globo,
.st-lanza:focus-visible + .st-globo,
.st-globo.st-globo-on{opacity:1;transform:none;}
.st-lanza.st-abierto:hover + .st-globo{opacity:0;}
/* Cuando el globo lleva un mensaje deja de ser un rótulo: se vuelve ancho,
   de varias líneas y clicable — darle clic abre el chat. */
.st-globo.st-globo-msj{white-space:normal;max-width:252px;text-align:left;
  font-weight:600;line-height:1.45;padding:12px 15px;border-radius:14px 14px 4px 14px;
  bottom:34px;cursor:pointer;pointer-events:auto;}
.st-globo.st-globo-msj::after{top:auto;bottom:14px;margin-top:0;}
.st-globo.st-globo-msj:hover{background:#12202F;}

/* El atributo `hidden` vale display:none, pero lo pone la hoja del navegador
   y CUALQUIER regla de autor con display gana. Aquí mordió dos veces:
   · en las tres zonas de abajo (acciones, escribir, llamada), que son flex:
     se veían las tres encimadas;
   · y en EL PANEL MISMO, que también es flex — así que `panel.hidden = true`
     no lo escondía y el chat quedaba abierto de entrada en todas las
     páginas. Se veía "cerrado" en el JS y medía 375x715 en pantalla.
   El JS conmuta por `hidden`, así que `hidden` tiene que ganar. El selector
   incluye el panel (sin espacio) y sus descendientes (con espacio). */
.st-panel[hidden],.st-panel [hidden]{display:none !important;}

.st-panel{position:fixed;right:24px;bottom:104px;z-index:960;width:382px;max-width:calc(100vw - 32px);
  height:556px;max-height:calc(100vh - 136px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--papel);border:1px solid var(--linea);border-radius:18px;box-shadow:var(--sombra-3);
  animation:stEntra .24s cubic-bezier(.2,.8,.3,1);}
@keyframes stEntra{from{opacity:0;transform:translateY(16px) scale(.98);}to{opacity:1;transform:none;}}

.st-cab{display:flex;align-items:center;gap:11px;padding:13px 13px 13px 16px;
  background:var(--oscuro);color:#fff;flex-shrink:0;}
.st-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid var(--naranja);}
.st-cab-txt{flex:1;min-width:0;line-height:1.35;}
.st-cab-txt strong{display:block;font-family:'Archivo',sans-serif;font-size:16px;
  font-weight:800;letter-spacing:.02em;}
.st-linea{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#A8BACF;}
.st-linea i{width:7px;height:7px;border-radius:50%;background:#2BD97C;flex-shrink:0;}
.st-x{background:none;border:0;color:#A8BACF;cursor:pointer;padding:8px;border-radius:9px;
  display:flex;transition:background .15s,color .15s;}
.st-x:hover{background:var(--oscuro-3);color:#fff;}
.st-x:focus-visible{outline:2px solid #fff;outline-offset:1px;}

.st-hilo{flex:1;overflow-y:auto;padding:18px;background:var(--papel-2);
  display:flex;flex-direction:column;gap:10px;}

.st-msj{max-width:86%;padding:11px 14px;border-radius:15px;font-size:14.5px;line-height:1.55;}
.st-msj p{margin:0;}
.st-msj p + p{margin-top:8px;}
.st-de-santi{align-self:flex-start;background:var(--papel);color:var(--tinta);
  border:1px solid var(--linea);border-bottom-left-radius:5px;}
.st-de-mi{align-self:flex-end;background:var(--naranja);color:#fff;border-bottom-right-radius:5px;}

.st-puntos{display:flex;gap:5px;align-items:center;padding:14px;}
.st-puntos span{width:7px;height:7px;border-radius:50%;background:var(--tinta-4);
  animation:stSalto 1.25s ease-in-out infinite;}
.st-puntos span:nth-child(2){animation-delay:.18s;}
.st-puntos span:nth-child(3){animation-delay:.36s;}
@keyframes stSalto{0%,60%,100%{transform:translateY(0);opacity:.45;}30%{transform:translateY(-5px);opacity:1;}}

.st-wa{align-self:flex-start;background:#25A75B;color:#fff;border-radius:12px;
  padding:10px 15px;font-size:14px;font-weight:600;text-decoration:none;}
.st-wa:hover{background:#1C8A49;}

/* Las tres salidas. En móvil son la parte que más se toca: 46px de alto. */
.st-acciones{display:flex;flex-direction:column;gap:8px;padding:12px;
  background:var(--papel);border-top:1px solid var(--linea);flex-shrink:0;}
/* 19px NO es capricho: blanco sobre el naranja de la marca da 3.13, que no
   pasa AA para texto normal (pide 4.5). A 19px en negrita cuenta como texto
   grande y el mínimo baja a 3.0. Es la misma salida que ya usa .btn en todo
   el sitio, y así el naranja sigue siendo el de CIWS. */
.st-acc{display:flex;align-items:center;justify-content:center;gap:7px;min-height:50px;
  border-radius:12px;font-size:19px;font-weight:700;font-family:inherit;cursor:pointer;
  text-decoration:none;border:1.5px solid transparent;transition:background .16s,border-color .16s;}
.st-acc-1{background:var(--naranja);color:#fff;}
.st-acc-1:hover{background:var(--naranja-2);}
.st-acc-2{background:var(--naranja-10);color:var(--naranja-t);border-color:var(--naranja-20);}
.st-acc-2:hover{background:var(--naranja-20);border-color:var(--naranja);}
.st-acc-3{background:var(--papel);color:var(--verde);border-color:var(--linea-2);}
.st-acc-3:hover{background:var(--verde-10);border-color:var(--verde);}
.st-acc:focus-visible{outline:2px solid var(--tinta);outline-offset:2px;}

.st-forma{display:flex;gap:8px;padding:12px;background:var(--papel);
  border-top:1px solid var(--linea);flex-shrink:0;}
.st-forma input{flex:1;min-width:0;border:1px solid var(--linea-2);border-radius:11px;
  padding:11px 14px;font-size:16px;font-family:inherit;color:var(--tinta);background:var(--papel);}
.st-forma input:focus{outline:none;border-color:var(--naranja);box-shadow:0 0 0 3px var(--naranja-20);}
.st-enviar{flex-shrink:0;width:46px;border:0;border-radius:11px;background:var(--naranja);color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.st-enviar:hover:not(:disabled){background:var(--naranja-2);}
.st-enviar:disabled{background:var(--linea-2);cursor:default;}
.st-enviar:focus-visible{outline:2px solid var(--tinta);outline-offset:2px;}

/* El formulario de «llámame»: dos campos y un botón grande. Nada más, que
   cada campo de más es gente que abandona. */
.st-llamada{display:flex;flex-direction:column;gap:10px;padding:14px 12px 12px;
  background:var(--papel);border-top:1px solid var(--linea);flex-shrink:0;}
.st-campo{display:flex;flex-direction:column;gap:4px;}
.st-campo label{font-size:12.5px;font-weight:700;color:var(--tinta-2);}
.st-campo input{border:1px solid var(--linea-2);border-radius:11px;padding:11px 14px;
  /* 16px: con menos, Safari en iPhone hace zoom al enfocar y descuadra todo */
  font-size:16px;font-family:inherit;color:var(--tinta);background:var(--papel);}
.st-campo input:focus{outline:none;border-color:var(--naranja);box-shadow:0 0 0 3px var(--naranja-20);}
/* La autorización de datos: se tiene que LEER, así que no va en gris
   diminuto. El enlace a la política se subraya para que se note que se
   puede abrir antes de aceptar. */
.st-acepto{display:flex;gap:9px;align-items:flex-start;cursor:pointer;
  font-size:13px;line-height:1.5;color:var(--tinta-2);}
.st-acepto input{width:18px;height:18px;flex-shrink:0;margin:1px 0 0;
  accent-color:var(--naranja);cursor:pointer;}
.st-acepto a{color:var(--naranja-t);font-weight:700;text-decoration:underline;
  text-underline-offset:2px;}
.st-acepto input:focus-visible{outline:2px solid var(--naranja);outline-offset:2px;}

.st-error{margin:0;font-size:13px;color:#B3261E;font-weight:600;}
/* 19px por lo mismo que .st-acc: blanco sobre naranja solo pasa AA como
   texto grande. Y además es el botón que más se pulsa del widget. */
.st-llamar-ya{min-height:52px;border:0;border-radius:12px;background:var(--naranja);color:#fff;
  font-size:19px;font-weight:800;font-family:inherit;cursor:pointer;transition:background .16s;}
.st-llamar-ya:hover:not(:disabled){background:var(--naranja-2);}
.st-llamar-ya:disabled{background:var(--linea-2);cursor:default;}
.st-volver{background:none;border:0;color:var(--tinta-3);font-size:13px;font-family:inherit;
  cursor:pointer;padding:2px;text-decoration:underline;}
.st-volver:hover{color:var(--tinta);}

.st-pie{margin:0;padding:0 14px 13px;background:var(--papel);font-size:12.5px;color:var(--tinta-3);
  text-align:center;flex-shrink:0;}
.st-pie a{color:var(--naranja-t);font-weight:700;}

/* etiqueta que solo leen los lectores de pantalla */
.st-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

@media(max-width:600px){
  .st-lanza{right:16px;bottom:16px;width:62px;height:62px;}
  .st-globo{display:none;}   /* en móvil el rótulo no cabe y tapa contenido */
  /* el mensaje sí se muestra: es la invitación, y va ENCIMA del círculo
     para no montarse sobre el contenido de la derecha */
  .st-globo.st-globo-msj{display:block;right:16px;left:16px;bottom:88px;max-width:none;}
  .st-globo.st-globo-msj::after{right:26px;bottom:-5px;top:auto;}
  /* Hoja completa: el chat ocupa la pantalla y el teclado no lo descuadra,
     porque el hilo es lo único que crece. */
  .st-panel{right:0;left:0;bottom:0;top:auto;width:auto;max-width:none;
    height:88vh;max-height:none;border-radius:18px 18px 0 0;border-bottom:0;}
  .st-msj{max-width:90%;}
  /* El panel ocupa la pantalla, así que el círculo quedaría flotando ENCIMA
     del chat, tapando el campo de escribir. Se esconde: para cerrar está la
     flecha del encabezado, que en móvil además cae donde llega el pulgar. */
  .st-lanza.st-abierto{display:none;}
}
/* Pantallas muy bajas (móvil apaisado): que el hilo no desaparezca. */
@media(max-height:520px){
  .st-panel{height:100vh;border-radius:0;}
}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════ */
@media(max-width:1040px){
  .nav-links,.nav-cta{display:none;}
  .hamburger{display:flex;}
  .port-in{grid-template-columns:1fr;gap:56px;padding:52px 28px 74px;}
  .visor-placa{inset:20px -14px -20px 20px;}
  .visor-dato{left:50%;right:auto;bottom:-28px;}
  .dos,.hard,.inc{grid-template-columns:1fr;}
  .cifras-in{grid-template-columns:1fr 1fr;}
  .fg{grid-template-columns:1fr 1fr;}
  .cierre-caja{padding:58px 38px;border-radius:24px;}
}
@media(max-width:620px){
  body{font-size:16.5px;}
  .sec{padding:68px 0;}
  .env,.nav,.port-in{padding-left:20px;padding-right:20px;}
  .nav-brand{font-size:38px;}
  .cifras-in,.sol-items{grid-template-columns:1fr;}
  .carril{padding-left:0;}
  .carril-riel{display:none;}
  .esta-punto{position:static;width:50px;height:50px;border-radius:16px;margin-bottom:16px;}
  .esta.activa .esta-punto{transform:none;}
  .visor{aspect-ratio:4/3.5;}
  .visor-placa{inset:16px -10px -16px 16px;}
  .visor-dato{position:static;transform:none;margin-top:22px;white-space:normal;}
  .hud-bajo{flex-direction:column;align-items:flex-start;gap:12px;}
  .fg{grid-template-columns:1fr;gap:32px;}
  .port-btns .btn{flex:1 1 100%;}
  .cierre-caja{padding:46px 26px;}
  .cierre-caja::before{display:none;}
}

/* ═══ MENOS MOVIMIENTO SI ASÍ SE PIDE ═════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .barrido{display:none;}
  .tal-barra{transform:rotate(72deg);}
  .sol::before,.cifra::before{transform:scaleX(1) !important;}
  .esta .esta-punto{background:var(--naranja);border-color:var(--naranja);color:#fff;}
  /* el latido del punto de Santi y el salto de los tres puntos de
     "escribiendo" son decorativos: sin ellos se entiende igual */
  /* Lo de Santi que es decorativo: el latido del punto, el saludo del
     círculo y el salto de los tres puntos. Sin eso se entiende igual, y el
     JS ya entrega los mensajes de una en vez de simular que teclea. */
  .st-punto::after{display:none;}
  .st-lanza.st-llama{animation:none;}
  .st-nuevos{animation:none;}
  .st-globo{transition:none;}
  .st-puntos span{opacity:.6;}
}

/* el botón claro no funciona sobre la portada oscura: aquí va en contorno */
.port .btn-s{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28);box-shadow:none;}
.port .btn-s:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.55);}

/* =============================================================================
   COMPONENTES DEL SITIO COMPLETO
   =============================================================================
   Todo lo que sigue lo usan las páginas internas a través de includes/_ui.php.
   ========================================================================== */

/* ═══ MEGAMENÚ ════════════════════════════════════════════════════════════
   El menú viejo era una fila de seis enlaces con nombres internos
   ("Vehicular", "Peatonal", "Kioskos"). Nadie busca así. Ahora son dos
   mundos —vehículos y personas— y al abrirlos aparece el catálogo con el
   nombre que la gente sí escribe en Google. */
.nav-item{position:relative;}
.nav-btn{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:600;
  color:#C7D0DC;padding:10px 15px;border-radius:10px;background:none;border:none;cursor:pointer;
  font-family:inherit;transition:color .2s;}
.nav-btn:hover,.nav-item.abierto .nav-btn{color:#fff;}
.nav-btn svg{width:13px;height:13px;transition:transform .25s;}
.nav-item.abierto .nav-btn svg{transform:rotate(180deg);}
.mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-8px);
  width:min(660px,92vw);background:#fff;border:1px solid var(--linea);border-radius:20px;
  box-shadow:var(--sombra-3);padding:22px;opacity:0;visibility:hidden;
  transition:opacity .22s,transform .22s,visibility .22s;z-index:1001;}
.nav-item.abierto .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.mega-tit{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-4);margin-bottom:14px;}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.mega a{display:flex;gap:13px;padding:13px;border-radius:13px;transition:background .18s;}
.mega a:hover{background:var(--papel-2);}
.mega-ic{width:38px;height:38px;border-radius:11px;background:var(--naranja-10);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mega-ic svg{width:19px;height:19px;color:var(--naranja);}
.mega b{display:block;font-size:15px;font-weight:700;color:var(--tinta);letter-spacing:-.015em;}
.mega span{display:block;font-size:13px;color:var(--tinta-3);line-height:1.4;margin-top:2px;}
.mega-pie{margin-top:16px;padding-top:16px;border-top:1px solid var(--linea);
  display:flex;align-items:center;justify-content:space-between;gap:12px;}
.mega-pie > span{font-size:13.5px;color:var(--tinta-3);}
.mega-pie a{font-size:14px;font-weight:700;color:var(--naranja-t);padding:0;}
.mega-pie a:hover{background:none;}

/* móvil: el megamenú se despliega dentro del menú a pantalla completa */
.mm-grupo{width:100%;border-top:1px solid rgba(255,255,255,.12);padding-top:11px;margin-top:3px;}
.mm-grupo > b{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#7E8DA3;margin-bottom:6px;}
/* EL DEFECTO: .mm-grupo era un div normal y sus <a> son en linea por
   defecto, asi que en el movil salian todos pegados en un parrafo —
   «Software para Parqueaderos Lectura de Placas (LPR) Talanqueras…».
   Se apilan y se separan con una linea fina, que se lee mejor que un | y
   no mete un caracter que el lector de pantalla tendria que leer. */
.mm-grupo{display:flex;flex-direction:column;}
/* 17 px y 11 px de aire arriba y abajo: el área táctil sigue por encima de
   los 44 px que pide Apple, pero el menú completo baja de 900 a unos 700 px
   y cabe de una en un teléfono normal. */
.mobile-menu .mm-grupo a{display:block;font-size:17px;font-weight:700;
  padding:11px 0;color:#C7D0DC;border-bottom:1px solid rgba(255,255,255,.07);
  line-height:1.25;}
.mobile-menu .mm-grupo a:last-child{border-bottom:0;}
.mobile-menu .mm-grupo a:hover{color:#FF7A30;}

/* ═══ MIGAS ═══════════════════════════════════════════════════════════════ */
.migas{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;
  color:var(--tinta-3);margin-bottom:22px;}
.migas a{color:var(--tinta-3);transition:color .18s;}
.migas a:hover{color:var(--naranja-t);}
.migas .actual{color:var(--tinta-2);font-weight:600;}
.migas i{font-style:normal;color:var(--tinta-4);}
.porta .migas,.porta .migas a{color:#93A4BC;}
.porta .migas a:hover{color:#FF7A30;}
.porta .migas .actual{color:#E4EAF2;}

/* ═══ PORTADA DE PÁGINA INTERNA ═══════════════════════════════════════════
   Más baja que la del home: quien llega aquí ya sabe qué busca y quiere el
   contenido. Mismo lenguaje visual, menos altura. Y funciona como página de
   aterrizaje de un anuncio: título, promesa y acción en la primera pantalla. */
.porta{position:relative;overflow:hidden;background:#0A1119;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);}
/* ── EL DEGRADADO QUE RESPIRA ─────────────────────────────────────────
   El fondo de las portadas de producto: sin foto, sin video, sin peso.
   Tres manchas de color en los tonos de la casa que se desplazan muy
   despacio —24 segundos el ciclo— y una rejilla de puntos encima. Da
   movimiento y profundidad sin competir con el visor, que es lo unico
   que tiene que llamar la atencion en esa pantalla.
   Solo se anima la POSICION de los degradados: no hay repintado de
   layout, asi que no cuesta nada en el movil. */
.porta::before{content:'';position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 46% at 18% 28%, rgba(255,90,0,.20) 0%, rgba(255,90,0,0) 70%),
    radial-gradient(34% 42% at 78% 16%, rgba(30,51,80,.85) 0%, rgba(30,51,80,0) 72%),
    radial-gradient(44% 52% at 62% 84%, rgba(255,122,48,.12) 0%, rgba(255,122,48,0) 68%);
  animation:respira 24s ease-in-out infinite alternate;}
@keyframes respira{
  0%  {transform:translate3d(0,0,0) scale(1);}
  50% {transform:translate3d(2.5%,-2%,0) scale(1.06);}
  100%{transform:translate3d(-2%,2.5%,0) scale(1.03);}}
/* la rejilla de puntos, quieta: da textura y disimula el bandeo del
   degradado en pantallas de 8 bits */
.porta::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:22px 22px;}

.porta-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.45) saturate(.85);}
.porta-velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(10,17,25,.95) 0%,rgba(10,17,25,.8) 48%,rgba(10,17,25,.55) 100%),
             radial-gradient(760px 420px at 86% 8%, rgba(255,90,0,.18) 0%, rgba(255,90,0,0) 62%);}
/* Sin foto detrás, el velo oscuro sobra: solo queda el resplandor naranja
   de la esquina, que es lo que amarra el degradado con la marca. */
.porta-degradado .porta-velo{
  background:radial-gradient(760px 420px at 86% 8%, rgba(255,90,0,.14) 0%, rgba(255,90,0,0) 62%);}
@media (prefers-reduced-motion:reduce){.porta::before{animation:none;}}
.porta-rayas{position:absolute;left:0;right:0;bottom:0;height:5px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--naranja) 0 30px,transparent 30px 64px);
  background-size:64px 100%;opacity:.8;animation:corre-carril 2.4s linear infinite;}
.porta-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:44px 28px 62px;}
/* ── PORTADA CON VIDEO AL LADO ────────────────────────────────────────
   Ventana pequeña, no pantalla completa: el video acompaña al titular en
   vez de taparlo. En móvil pasa debajo del texto, porque ahí lo primero
   que se lee tiene que ser el titular. */
.porta-in.porta-2col{display:grid;grid-template-columns:1.05fr .95fr;
  gap:52px;align-items:center;}
.porta-2col .porta-txt h1{max-width:none;}
.porta-2col .porta-txt .entrada{max-width:52ch;}
.porta-vid{position:relative;margin:0;min-width:0;}
.pv-media{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:16px;background:#0A1119;box-shadow:var(--sombra-3);}
/* Marco naranja desplazado: el mismo recurso del resto del sitio, y de
   paso evita que el video quede flotando sobre el fondo oscuro. */
.pv-marco{position:absolute;inset:14px -14px -14px 14px;border:2px solid var(--naranja);
  border-radius:16px;pointer-events:none;z-index:-1;opacity:.62;}
.pv-pie{margin-top:18px;font-size:13px;color:#93A4BC;}

.porta h1{font-size:clamp(33px,4.3vw,55px);margin-bottom:18px;max-width:17em;}
.porta h1 span{color:#FF7A30;}
.porta .entrada{font-size:clamp(17px,1.6vw,19.5px);color:#B6C3D4;max-width:58ch;margin-bottom:28px;}
.porta .btn-s{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28);box-shadow:none;}
.porta .btn-s:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.55);}
.porta .chips{margin:26px 0 0;}
.porta .chip{color:#D4DCE7;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);box-shadow:none;}

/* ═══ FLUJO HORIZONTAL ════════════════════════════════════════════════════
   ENTRA → IDENTIFICAMOS → CONTROLAMOS → COBRAMOS → SALE.
   Se entiende de un vistazo sin leer un párrafo, que es justo lo que se
   pidió: que el sitio se explique haciendo scroll. */
.flujo{display:grid;gap:16px;grid-template-columns:repeat(var(--pasos,5),1fr);align-items:stretch;}
.paso{position:relative;background:#fff;border:1px solid var(--linea);border-radius:18px;
  padding:24px 20px;box-shadow:var(--sombra);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;}
.paso:hover{transform:translateY(-5px);box-shadow:var(--sombra-2);border-color:var(--naranja-20);}
/* la flecha que une un paso con el siguiente */
.paso:not(:last-child)::after{content:'';position:absolute;right:-12px;top:50%;width:13px;height:13px;
  margin-top:-7px;border-top:2.5px solid var(--naranja);border-right:2.5px solid var(--naranja);
  transform:rotate(45deg);z-index:2;}
.paso-n{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:14px;background:var(--naranja-10);color:var(--naranja);margin-bottom:15px;}
.paso-n svg{width:22px;height:22px;}
.paso b{display:block;font-family:'Archivo',sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--naranja-t);margin-bottom:7px;}
.paso h3{font-size:18px;margin-bottom:7px;}
.paso p{font-size:14.5px;color:var(--tinta-2);line-height:1.55;}
.sec-gris .paso{background:#fff;}

/* ═══ BLOQUE ALTERNADO: TEXTO + IMAGEN ════════════════════════════════════ */
.alterna{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.alterna + .alterna{margin-top:76px;}
.alterna.inv .alt-txt{order:2;}
.alterna h3{font-size:clamp(24px,2.6vw,34px);margin-bottom:14px;}
.alterna h3 span{color:var(--naranja-t);}
.alt-txt > p{color:var(--tinta-2);font-size:17px;margin-bottom:24px;}
.alt-lista{display:grid;gap:12px;}
.alt-li{display:flex;align-items:flex-start;gap:13px;font-size:15.5px;}
.alt-li svg{width:21px;height:21px;color:var(--verde);flex-shrink:0;margin-top:2px;}
.alt-li b{font-weight:700;}
.alt-li span{color:var(--tinta-2);}
.alt-img{border-radius:20px;overflow:hidden;border:1px solid var(--linea);background:var(--papel-2);
  box-shadow:var(--sombra-2);}
.alt-img img{width:100%;}
.alt-img figcaption{font-size:13px;color:var(--tinta-3);padding:12px 16px;
  border-top:1px solid var(--linea);background:#fff;}

/* ═══ DISPOSITIVOS — "esto se ve así en cada pantalla" ════════════════════
   El encargo era DEMOSTRAR que la plataforma es responsive, no escribirlo.
   Los marcos son CSS puro: ni una imagen de maqueta que pese de más. */
.disp{position:relative;display:flex;align-items:flex-end;justify-content:center;
  padding:12px 0 0;}
.disp-pc{position:relative;width:min(100%,680px);}
.disp-pc .pantalla{background:#0C1726;border:11px solid #1D2A3C;border-bottom:none;
  border-radius:16px 16px 0 0;overflow:hidden;}
.disp-pc .pantalla img{width:100%;display:block;}
.disp-pc .base{height:14px;background:linear-gradient(180deg,#26344A,#151F2E);border-radius:0 0 9px 9px;}
.disp-pc .pata{width:22%;height:10px;margin:0 auto;background:#1D2A3C;border-radius:0 0 8px 8px;}
.disp-tel{position:relative;width:138px;flex-shrink:0;margin:0 0 26px -52px;z-index:2;}
.disp-tel .pantalla{background:#0C1726;border:7px solid #1D2A3C;border-radius:24px;overflow:hidden;
  box-shadow:var(--sombra-2);}
.disp-tel .pantalla img{width:100%;display:block;}
.disp-tel::before{content:'';position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:40px;height:4px;background:#2C3B52;border-radius:3px;z-index:3;}
.disp-pie{text-align:center;font-size:13.5px;color:var(--tinta-3);margin-top:22px;}

/* ═══ GALERÍA DE PANTALLAS DEL SOFTWARE ═══════════════════════════════════ */
.pantallas{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px;}
.pantalla-card{background:#fff;border:1px solid var(--linea);border-radius:18px;overflow:hidden;
  box-shadow:var(--sombra);transition:transform .3s,box-shadow .3s;}
.pantalla-card:hover{transform:translateY(-4px);box-shadow:var(--sombra-2);}
.pantalla-card img{width:100%;border-bottom:1px solid var(--linea);}
.pantalla-card figcaption{padding:16px 18px;}
.pantalla-card b{display:block;font-size:15.5px;font-weight:700;margin-bottom:4px;}
.pantalla-card span{font-size:13.5px;color:var(--tinta-2);}

/* ═══ REJILLA DE CARACTERÍSTICAS ══════════════════════════════════════════ */
.rasgos{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:22px;}
.rasgo{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:26px;
  box-shadow:var(--sombra);transition:transform .28s,box-shadow .28s,border-color .28s;}
.rasgo:hover{transform:translateY(-4px);box-shadow:var(--sombra-2);border-color:var(--naranja-20);}
.rasgo-ic{width:46px;height:46px;border-radius:14px;background:var(--naranja-10);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.rasgo-ic svg{width:22px;height:22px;color:var(--naranja);}
.rasgo h3{font-size:18.5px;margin-bottom:8px;}
.rasgo p{font-size:15px;color:var(--tinta-2);}

/* ═══ LOS DOS MUNDOS ══════════════════════════════════════════════════════
   El concepto que pidió el cliente: un mundo, dos soluciones, una plataforma.
   Dos tarjetas grandes que convergen en la franja de abajo. */
.mundos{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.mundo{position:relative;border-radius:24px;overflow:hidden;background:#fff;
  border:1px solid var(--linea);box-shadow:var(--sombra-2);display:flex;flex-direction:column;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s;}
.mundo:hover{transform:translateY(-6px);box-shadow:var(--sombra-3);}
.mundo-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--papel-3);}
.mundo-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.mundo:hover .mundo-img img{transform:scale(1.05);}
.mundo-et{position:absolute;left:18px;top:18px;z-index:2;font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(10,17,25,.78);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 15px;}
.mundo-cu{padding:32px;display:flex;flex-direction:column;flex:1;}
.mundo h3{font-size:clamp(24px,2.5vw,30px);margin-bottom:12px;}
.mundo h3 span{color:var(--naranja-t);}
.mundo > .mundo-cu > p{color:var(--tinta-2);font-size:16.5px;margin-bottom:22px;}
.mundo-items{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:26px;}
.mundo-item{background:var(--papel-2);border:1px solid var(--linea);border-radius:12px;
  padding:14px 15px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px;}
.mundo-item svg{width:18px;height:18px;color:var(--naranja);flex-shrink:0;}
.mundo-cta{margin-top:auto;}

/* la franja donde convergen los dos mundos */
.converge{margin-top:30px;border-radius:24px;padding:38px 42px;text-align:center;
  background:linear-gradient(135deg,var(--oscuro) 0%,var(--oscuro-3) 100%);color:#fff;
  box-shadow:var(--sombra-2);position:relative;overflow:hidden;}
.converge::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;
  background:repeating-linear-gradient(90deg,var(--naranja) 0 24px,transparent 24px 46px);}
.converge b{display:block;font-family:'Archivo',sans-serif;font-size:clamp(22px,2.6vw,32px);
  font-weight:900;letter-spacing:-.03em;margin-bottom:10px;}
.converge b span{color:#FF7A30;}
.converge p{color:#B6C4D6;font-size:17px;max-width:62ch;margin:0 auto;}

/* ═══ FORMULARIO ══════════════════════════════════════════════════════════ */
.form-caja{background:#fff;border:1px solid var(--linea);border-radius:22px;padding:34px;
  box-shadow:var(--sombra-2);}
.campo{margin-bottom:18px;}
.campo label{display:block;font-size:14px;font-weight:600;color:var(--tinta-2);margin-bottom:7px;}
.campo input,.campo select,.campo textarea{width:100%;font-family:inherit;font-size:16px;
  padding:14px 16px;border:1px solid var(--linea-2);border-radius:12px;background:#fff;
  color:var(--tinta);transition:border-color .18s,box-shadow .18s;}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;
  border-color:var(--naranja);box-shadow:0 0 0 4px var(--naranja-10);}
.campo textarea{min-height:120px;resize:vertical;}
.campo-dos{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-nota{font-size:13px;color:var(--tinta-3);margin-top:14px;}
.form-ok{background:var(--verde-10);border:1px solid #BFE8D2;border-radius:16px;padding:26px;}
.form-ok b{display:block;font-size:19px;color:var(--verde);margin-bottom:8px;}
.form-error{background:#FDECEC;border:1px solid #F5C2C2;border-radius:12px;padding:14px 16px;
  color:#A32020;font-size:15px;margin-bottom:16px;}

/* ═══ DATOS DE CONTACTO ═══════════════════════════════════════════════════ */
.contacto-lista{display:grid;gap:14px;}
.contacto-fila{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--linea);
  border-radius:16px;padding:20px 22px;box-shadow:var(--sombra);transition:border-color .2s,transform .2s;}
.contacto-fila:hover{border-color:var(--naranja-20);transform:translateY(-2px);}
.contacto-fila .ic{width:46px;height:46px;border-radius:14px;background:var(--naranja-10);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.contacto-fila .ic svg{width:22px;height:22px;color:var(--naranja);}
.contacto-fila .et{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tinta-3);margin-bottom:3px;}
.contacto-fila .vl{font-family:'Archivo',sans-serif;font-size:19px;font-weight:800;
  letter-spacing:-.02em;color:var(--tinta);}

/* El asesor que está de turno esta hora: se marca para que no compita con
   el correo, que es el otro renglón de la lista. */
.contacto-fila.destacada{border-color:var(--naranja-20);box-shadow:var(--sombra-2);}
.contacto-fila.destacada .ic{background:var(--naranja);}
.contacto-fila.destacada .ic svg{color:#fff;}
.contacto-fila.destacada .et{color:var(--naranja-t);}

/* El resto del equipo. Deliberadamente más pequeño: tranquiliza ver que hay
   equipo, pero el que tiene que sonar es el de turno. */
.otros-asesores{margin-top:18px;}
.otros-asesores .et{display:block;font-size:12.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:10px;}
.otros-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:9px;}
.otros-lista a{display:flex;flex-direction:column;gap:1px;background:var(--papel-2);
  border:1px solid var(--linea);border-radius:12px;padding:11px 14px;
  transition:border-color .18s,background .18s;}
.otros-lista a:hover{background:var(--papel);border-color:var(--naranja-20);}
.otros-lista b{font-size:14px;color:var(--tinta);font-weight:700;}
/* --tinta-2 y no --tinta-3: sobre el gris del fondo, el 3 daba 4.34 y AA
   pide 4.5. Y es el número de teléfono — el dato que la persona va a leer
   y marcar; era el último sitio donde ahorrar contraste. */
.otros-lista span{font-size:14px;color:var(--tinta-2);font-variant-numeric:tabular-nums;}

/* Soporte: aparte del canal comercial y visualmente más callado. */
.soporte-caja{margin-top:30px;padding:22px;border-radius:16px;
  background:var(--papel-2);border:1px solid var(--linea);}
.soporte-caja .et{display:block;font-size:12.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--naranja-t);margin-bottom:8px;}
.soporte-caja p{font-size:14.5px;line-height:1.6;color:var(--tinta-2);margin:0 0 16px;}
.soporte-vias{display:flex;gap:10px;flex-wrap:wrap;}
.soporte-vias .btn{margin:0;}

/* ═══ TEXTO LEGAL ═════════════════════════════════════════════════════════ */
.legal{max-width:76ch;}
.legal h2{font-size:clamp(23px,2.4vw,30px);margin:42px 0 14px;}
.legal h3{font-size:19px;margin:28px 0 10px;}
.legal p{color:var(--tinta-2);margin-bottom:16px;}
.legal ul,.legal ol{color:var(--tinta-2);margin:0 0 18px 22px;}
.legal li{margin-bottom:9px;}
.legal strong{color:var(--tinta);}

/* ═══ RESPONSIVE DE LOS COMPONENTES ═══════════════════════════════════════ */
@media(max-width:1040px){
  .mega{display:none;}
  .nav-item{display:none;}
  .alterna{grid-template-columns:1fr;gap:34px;}
  .alterna.inv .alt-txt{order:0;}
  .alterna + .alterna{margin-top:54px;}
  .flujo{grid-template-columns:1fr 1fr;}
  .paso:not(:last-child)::after{display:none;}
  .mundos{grid-template-columns:1fr;}
  .disp-tel{margin-left:-34px;width:118px;}
  .converge{padding:32px 26px;}
}
@media(max-width:620px){
  .flujo{grid-template-columns:1fr;}
  .campo-dos,.mundo-items{grid-template-columns:1fr;}
  .porta-in{padding:32px 20px 48px;}
  .porta-in.porta-2col{grid-template-columns:1fr;gap:34px;}
  .pv-marco{inset:10px -10px -10px 10px;}
  .form-caja{padding:24px;}
  .disp{flex-direction:column;align-items:center;gap:24px;}
  .disp-tel{margin:0;width:156px;}
  .pantallas,.rasgos{grid-template-columns:1fr;}
  .mundo-cu{padding:24px;}
}

/* ═══ DESBORDES DE REJILLA ════════════════════════════════════════════════
   Los hijos de un grid o un flex tienen min-width:auto por defecto, así que
   NO encogen por debajo del ancho de su contenido: un correo largo o una
   tabla empujan la página entera y aparece el scroll horizontal. Es la causa
   número uno de desborde en móvil y se arregla de una vez, aquí. */
.alterna > *,.dos > *,.mundos > *,.hard > *,.inc > *,.flujo > *,
.pantallas > *,.rasgos > *,.cifras-in > *,.fg > *,.port-in > *,.disp > *{min-width:0;}

/* y lo que de verdad no cabe, que parta: correos, URLs y referencias largas */
.contacto-fila .vl,.fc a,.legal a,.mega b,.mega span{overflow-wrap:anywhere;}

/* ═══ EL CELULAR CON LA CONVERSACIÓN ══════════════════════════════════════
   Para la página de soporte: en vez de explicar el proceso con palabras, se
   enseña. Un celular con la charla ocurriendo, mensaje por mensaje.
   El marcado lo pone ui_wa_chat(); el guion lo reproduce scripts.php. */
.wa-fono{display:flex;justify-content:center;min-width:0;}
.wa-marco{position:relative;width:min(100%,318px);background:#0B141A;
  border:9px solid #1D2A3C;border-radius:34px;overflow:hidden;
  box-shadow:var(--sombra-3);display:flex;flex-direction:column;height:520px;}
/* la muesca de arriba */
.wa-marco::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:46px;height:5px;background:#2C3B52;border-radius:3px;z-index:4;}

.wa-cab{display:flex;align-items:center;gap:10px;padding:22px 14px 11px;
  background:#1F2C34;flex-shrink:0;}
.wa-cab img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.wa-cab-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.wa-cab-txt b{font-size:14.5px;font-weight:700;color:#fff;}
.wa-cab-txt i{font-size:11.5px;font-style:normal;color:#8FA3AE;}

/* El fondo de WhatsApp es un patrón; aquí basta un tono cálido apagado que
   se lee como «esto es WhatsApp» sin copiar su papel tapiz. */
.wa-hilo{flex:1;overflow:hidden;padding:14px 11px;display:flex;
  flex-direction:column;gap:8px;justify-content:flex-end;
  background:#0B141A;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:18px 18px;}

.wa-msj{max-width:84%;padding:8px 11px;border-radius:10px;font-size:13.5px;
  line-height:1.45;color:#E9EDEF;animation:waEntra .22s ease-out;}
.wa-msj.de-santi{align-self:flex-start;background:#1F2C34;border-top-left-radius:3px;}
.wa-msj.de-mi{align-self:flex-end;background:#005C4B;border-top-right-radius:3px;}
@keyframes waEntra{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}

.wa-esc{align-self:flex-start;display:flex;gap:4px;align-items:center;
  background:#1F2C34;padding:11px 13px;border-radius:10px;border-top-left-radius:3px;}
.wa-esc span{width:6px;height:6px;border-radius:50%;background:#8FA3AE;
  animation:waSalto 1.2s ease-in-out infinite;}
.wa-esc span:nth-child(2){animation-delay:.16s;}
.wa-esc span:nth-child(3){animation-delay:.32s;}
@keyframes waSalto{0%,60%,100%{transform:translateY(0);opacity:.45;}30%{transform:translateY(-4px);opacity:1;}}

.wa-barra{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px 16px;background:#1F2C34;flex-shrink:0;}
.wa-barra span{font-size:13px;color:#7D8E99;}
.wa-barra svg{width:19px;height:19px;color:#00A884;flex-shrink:0;}

@media(max-width:600px){
  .wa-marco{height:470px;width:min(100%,296px);}
}


/* ── VIDEO DE EMPRESA ──────────────────────────────────────────────────
   Marco 16:9 fijo con aspect-ratio: la página no salta cuando el video
   pasa de póster a imagen ni cuando aparecen los controles nativos.
   Ver ui_video_empresa() en includes/_ui.php. */
.vemp{margin:0 auto;max-width:960px;}
.vemp-marco{position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;
  overflow:hidden;background:#05090E;border:1px solid var(--linea);
  box-shadow:var(--sombra-2);}
.vemp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
/* Con los controles nativos encendidos el video deja de recortarse: se ve
   completo, que es como se ve un video que alguien decidió mirar. */
.vemp-marco.vemp-con-audio .vemp-video{object-fit:contain;background:#000;}

/* El play grande: solo sale si el navegador no dejó arrancar solo. */
.vemp-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:84px;height:84px;border:0;border-radius:50%;cursor:pointer;
  background:var(--naranja);color:#fff;padding:0 0 0 6px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 34px rgba(255,90,0,.45);transition:transform .2s,background .2s;}
.vemp-play:hover{transform:translate(-50%,-50%) scale(1.08);background:#FF7A30;}
.vemp-play[hidden]{display:none;}

/* El botón de sonido: abajo a la derecha, sobre un vidrio oscuro para que
   se lea encima de cualquier cuadro del video. */
.vemp-audio{position:absolute;right:14px;bottom:14px;z-index:2;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;padding:10px 15px;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;
  background:rgba(8,14,22,.62);backdrop-filter:blur(7px);color:#fff;
  font-size:14px;font-weight:700;letter-spacing:-.01em;
  transition:background .2s,border-color .2s;}
.vemp-audio:hover{background:rgba(8,14,22,.86);border-color:rgba(255,255,255,.55);}
.vemp-audio:focus-visible,.vemp-play:focus-visible{outline:3px solid var(--naranja);outline-offset:3px;}
.vemp-ico-on{display:none;}
.vemp-audio[aria-pressed="true"] .vemp-ico-off{display:none;}
.vemp-audio[aria-pressed="true"] .vemp-ico-on{display:block;}
/* Con controles nativos abajo, el botón sube para no taparlos. */
.vemp-marco.vemp-con-audio .vemp-audio{bottom:58px;}
.vemp-pie{margin-top:14px;text-align:center;font-size:14.5px;color:var(--tinta-3);}

@media (max-width:640px){
  .vemp-marco{border-radius:14px;}
  .vemp-play{width:66px;height:66px;}
  .vemp-play svg{width:24px;height:27px;}
  .vemp-audio{right:10px;bottom:10px;padding:9px 13px;font-size:13px;}
  .vemp-marco.vemp-con-audio .vemp-audio{bottom:50px;}
}
@media (prefers-reduced-motion:reduce){
  .vemp-play{transition:none;}
  .vemp-play:hover{transform:translate(-50%,-50%);}
}

/* ── LA URL DEL CLIENTE ────────────────────────────────────────────────
   Barra de navegador de mentira, dibujada con CSS: no es una captura, así
   que no pesa y se lee nítida en cualquier pantalla. Ver ui_url_cliente(). */
.urlc{max-width:560px;margin:26px auto 0;}
.urlc-barra{display:flex;align-items:center;gap:10px;padding:13px 18px;
  border:1px solid var(--linea-2);border-radius:999px;background:var(--papel);
  box-shadow:var(--sombra-2);font-size:clamp(14px,1.8vw,17px);
  overflow-x:auto;white-space:nowrap;}
.urlc-candado{display:flex;color:var(--verde);flex-shrink:0;}
.urlc-txt{color:var(--tinta-3);font-weight:600;letter-spacing:-.01em;}
.urlc-txt b{color:var(--naranja-t);font-weight:800;}
.urlc-pie{margin-top:12px;text-align:center;font-size:14.5px;color:var(--tinta-3);}
.sec-gris .urlc-barra{background:#fff;}

/* ── COMBINACIONES ENTRADA → SALIDA ───────────────────────────────────
   Cuatro tarjetas iguales; lo que cambia entre ellas es el par de fichas
   de arriba, que es justo lo que el cliente tiene que comparar. Por eso el
   par va primero y con más peso visual que el título. Ver ui_combina(). */
.comb{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px;margin-top:8px;}
.comb-c{border:1px solid var(--linea);border-radius:16px;padding:22px 22px 24px;
  background:var(--papel);box-shadow:var(--sombra-2);min-width:0;}
.comb-par{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:15px;}
.comb-t{display:inline-block;padding:7px 13px;border-radius:8px;
  background:var(--tinta);color:#fff;font-weight:800;font-size:12.5px;
  letter-spacing:.055em;text-transform:uppercase;}
.comb-c:nth-child(odd) .comb-t:first-child{background:var(--naranja-t);}
.comb-c:nth-child(even) .comb-par .comb-t:last-child{background:var(--naranja-t);}
.comb-fl{display:flex;color:var(--tinta-4);flex-shrink:0;}
.comb-c h3{font-size:17.5px;margin-bottom:8px;letter-spacing:-.018em;}
.comb-c p{font-size:15px;color:var(--tinta-3);line-height:1.55;}
.sec-gris .comb-c{background:#fff;}

/* ── TÍTULO DE BLOQUE ──────────────────────────────────────────────────
   Un H2 que se ve como los H3 que había antes. Existe porque en /contacto
   la página saltaba de H1 a H3: para un lector de pantalla y para un
   buscador eso es un nivel que falta, no una decisión de diseño. El nivel
   se corrige en el HTML y el tamaño se conserva aquí. */
.h-bloque{font-size:24px;margin-bottom:6px;letter-spacing:-.022em;}
.h-bloque span{color:var(--naranja-t);}

/* ══════════════════════════════════════════════════════════════════════════
   BLOG
   ══════════════════════════════════════════════════════════════════════════
   Misma paleta y misma tipografía que el resto del sitio: el blog no es una
   sección aparte, es el mismo sitio contando cosas. Lo único propio es el
   ancho de la columna de lectura —unos 68 caracteres— porque un texto largo
   a todo lo ancho no se lee: el ojo se pierde al saltar de renglón.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Filtros ─────────────────────────────────────────────────────────── */
.bl-filtros{display:flex;flex-direction:column;gap:18px;margin-bottom:34px;}
.bl-buscar{position:relative;display:flex;gap:10px;max-width:560px;width:100%;}
.bl-buscar input{flex:1;min-width:0;padding:13px 16px 13px 44px;font-size:15.5px;
  border:1px solid var(--linea-2);border-radius:12px;background:var(--papel);color:var(--tinta);}
.bl-buscar input:focus{outline:3px solid var(--naranja);outline-offset:2px;border-color:var(--naranja);}
.bl-buscar .btn{margin:0;flex-shrink:0;}
.bl-lupa{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--tinta-3);
  display:flex;pointer-events:none;}
.bl-cats{display:flex;flex-wrap:wrap;gap:9px;}
.bl-cat{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  border:1px solid var(--linea-2);background:var(--papel);color:var(--tinta-2);
  font-size:14px;font-weight:600;letter-spacing:-.01em;transition:background .18s,color .18s,border-color .18s;}
.bl-cat:hover{border-color:var(--naranja);color:var(--naranja-t);}
.bl-cat.act{background:var(--tinta);border-color:var(--tinta);color:#fff;}
.bl-cat span{font-size:12px;opacity:.65;font-weight:700;}

/* ── Destacado ───────────────────────────────────────────────────────── */
.bl-dest{display:grid;grid-template-columns:1.1fr .9fr;margin-bottom:30px;
  background:var(--papel);border:1px solid var(--linea);border-radius:20px;overflow:hidden;
  box-shadow:var(--sombra-2);}
.bl-dest-img{display:block;position:relative;min-height:300px;background:#0A1119;overflow:hidden;}
.bl-dest-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.bl-dest:hover .bl-dest-img img{transform:scale(1.04);}
.bl-dest-txt{padding:34px 36px;display:flex;flex-direction:column;justify-content:center;min-width:0;}
.bl-dest-txt h2{font-size:clamp(23px,2.5vw,31px);line-height:1.2;margin:0 0 12px;letter-spacing:-.028em;}
.bl-dest-txt h2 a{color:inherit;}
.bl-dest-txt h2 a:hover{color:var(--naranja-t);}
.bl-dest-txt p{font-size:16px;line-height:1.65;color:var(--tinta-3);margin:0 0 18px;}
.bl-leer{font-weight:700;color:var(--naranja-t);font-size:15.5px;align-self:flex-start;}
.bl-leer:hover{text-decoration:underline;}

/* ── Rejilla de tarjetas ─────────────────────────────────────────────── */
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px;}
.bl-card{display:flex;flex-direction:column;background:var(--papel);border:1px solid var(--linea);
  border-radius:16px;overflow:hidden;box-shadow:var(--sombra-2);min-width:0;
  transition:transform .22s,box-shadow .22s;}
.bl-card:hover{transform:translateY(-3px);box-shadow:var(--sombra-3);}
.bl-card-img{display:block;aspect-ratio:16/10;background:#0A1119;overflow:hidden;position:relative;}
.bl-card-img img{width:100%;height:100%;object-fit:cover;display:block;}
.bl-card-sinimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.14);font-weight:800;font-size:38px;letter-spacing:-.04em;}
.bl-card-txt{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1;min-width:0;}
.bl-card-txt h3{font-size:18.5px;line-height:1.3;margin:0;letter-spacing:-.022em;}
.bl-card-txt h3 a{color:inherit;}
.bl-card-txt h3 a:hover{color:var(--naranja-t);}
.bl-card-txt p{font-size:14.5px;line-height:1.6;color:var(--tinta-3);margin:0;flex:1;}
.bl-card-txt time{font-size:13px;color:var(--tinta-4);}

/* ── Metadatos y etiquetas ───────────────────────────────────────────── */
.bl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--tinta-4);}
.bl-meta time{color:var(--tinta-4);}
.bl-chip{display:inline-block;padding:4px 11px;border-radius:999px;
  background:var(--naranja-10);color:var(--naranja-t);font-size:12px;font-weight:800;letter-spacing:.02em;}
.bl-chip-l{font-size:13px;padding:6px 14px;margin-bottom:14px;}
a.bl-chip:hover{background:var(--naranja-20);}

/* ── Estado vacío y paginación ───────────────────────────────────────── */
.bl-vacio{text-align:center;padding:60px 20px;border:1px dashed var(--linea-2);border-radius:18px;
  background:var(--papel);}
.bl-vacio h2{font-size:23px;margin-bottom:10px;}
.bl-vacio p{color:var(--tinta-3);max-width:46ch;margin:0 auto 20px;}
.bl-vacio-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.bl-vacio-btns .btn{margin:0;}
.bl-pag{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:38px;}
.bl-pag a{min-width:42px;padding:10px 14px;text-align:center;border-radius:10px;
  border:1px solid var(--linea-2);background:var(--papel);color:var(--tinta-2);font-weight:600;}
.bl-pag a:hover{border-color:var(--naranja);color:var(--naranja-t);}
.bl-pag a.act{background:var(--tinta);border-color:var(--tinta);color:#fff;}

/* ══ ARTÍCULO ══════════════════════════════════════════════════════════ */
.bl-art-cab{background:#0A1119;color:#fff;padding:34px 0 40px;position:relative;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);}
.bl-art-cab::before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 46% at 18% 28%, rgba(255,90,0,.20) 0%, rgba(255,90,0,0) 70%),
    radial-gradient(34% 42% at 78% 16%, rgba(30,51,80,.85) 0%, rgba(30,51,80,0) 72%);
  animation:respira 24s ease-in-out infinite alternate;}
.bl-art-cab > .env{position:relative;z-index:1;max-width:820px;}
.bl-art-cab h1{font-size:clamp(28px,4vw,44px);line-height:1.15;margin:0 0 16px;max-width:20ch;}
.bl-art-entrada{font-size:clamp(16px,1.8vw,19px);line-height:1.6;color:#B6C3D4;max-width:60ch;margin:0 0 22px;}
.bl-art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:13.5px;color:#93A4BC;}
.bl-autor{display:inline-flex;align-items:center;gap:9px;}
.bl-autor img{border-radius:50%;object-fit:cover;}
.bl-autor b{color:#E4EAF2;font-weight:700;}

.bl-art-cuerpo{max-width:820px;padding-top:36px;padding-bottom:10px;position:relative;}
.bl-compartir{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:26px;
  padding-bottom:18px;border-bottom:1px solid var(--linea);}
.bl-compartir-tit{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tinta-4);margin-right:4px;}
.bl-sh{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:11px;border:1px solid var(--linea-2);background:var(--papel);color:var(--tinta-2);
  cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s;}
.bl-sh:hover{transform:translateY(-2px);color:#fff;}
.bl-sh-whatsapp:hover{background:#25D366;border-color:#25D366;}
.bl-sh-linkedin:hover{background:#0A66C2;border-color:#0A66C2;}
.bl-sh-facebook:hover{background:#1877F2;border-color:#1877F2;}
.bl-sh-x:hover{background:#000;border-color:#000;}
.bl-sh-correo:hover,.bl-sh-copiar:hover,.bl-sh-imprimir:hover{background:var(--tinta);border-color:var(--tinta);}
.bl-sh.copiado{background:var(--verde);border-color:var(--verde);color:#fff;}

/* El texto del artículo. Los estilos van por descendencia porque el HTML
   llega del editor del CRM sin una sola clase: hay que vestir <p>, <h2> y
   <ul> tal como vengan. */
.bl-texto{font-size:17.5px;line-height:1.78;color:var(--tinta-2);}
.bl-texto > *{max-width:68ch;}
.bl-texto p{margin:0 0 20px;}
.bl-texto h2{font-size:clamp(22px,2.6vw,28px);line-height:1.25;margin:38px 0 14px;letter-spacing:-.025em;}
.bl-texto h3{font-size:clamp(19px,2.2vw,22px);line-height:1.3;margin:30px 0 10px;letter-spacing:-.02em;}
.bl-texto h4{font-size:18px;margin:24px 0 8px;}
.bl-texto a{color:var(--naranja-t);text-decoration:underline;text-underline-offset:3px;}
.bl-texto a:hover{color:var(--naranja);}
.bl-texto strong,.bl-texto b{font-weight:800;color:var(--tinta);}
.bl-texto ul,.bl-texto ol{margin:0 0 20px;padding-left:24px;}
.bl-texto li{margin-bottom:9px;}
.bl-texto img{max-width:100%;height:auto;border-radius:14px;margin:8px 0 24px;display:block;}
.bl-texto blockquote{margin:26px 0;padding:18px 24px;border-left:4px solid var(--naranja);
  background:var(--naranja-10);border-radius:0 12px 12px 0;font-size:17px;}
.bl-texto blockquote p:last-child{margin-bottom:0;}
/* Tablas y código: que se desplacen ellos, nunca la página entera. */
.bl-texto table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15.5px;
  display:block;overflow-x:auto;}
.bl-texto th,.bl-texto td{border:1px solid var(--linea-2);padding:10px 13px;text-align:left;}
.bl-texto th{background:var(--papel-2);font-weight:800;}
.bl-texto pre{overflow-x:auto;background:#0F1620;color:#E4EAF2;padding:18px;border-radius:12px;
  font-size:14px;margin:0 0 22px;}
.bl-texto hr{border:0;border-top:1px solid var(--linea);margin:32px 0;}

.bl-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin:34px 0 8px;padding:22px 26px;border-radius:16px;
  background:var(--naranja-10);border:1px solid var(--naranja-20);}
.bl-cta strong{display:block;font-size:17px;margin-bottom:4px;letter-spacing:-.02em;}
.bl-cta span{font-size:14.5px;color:var(--tinta-3);}
.bl-cta .btn{margin:0;flex-shrink:0;}

.bl-tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;}
.bl-tag{padding:5px 12px;border-radius:8px;background:var(--papel-2);color:var(--tinta-3);
  font-size:13px;font-weight:600;}
.bl-compartir-pie{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:30px 0 4px;padding-top:22px;border-top:1px solid var(--linea);}
.bl-compartir-pie > span{font-size:14.5px;font-weight:700;color:var(--tinta-3);margin-right:4px;}
.bl-rel-tit{font-size:clamp(22px,2.6vw,28px);margin-bottom:22px;letter-spacing:-.025em;}

/* ── Comentarios ─────────────────────────────────────────────────────── */
.bl-coment{max-width:820px;}
.bl-coment > h2{font-size:clamp(22px,2.6vw,27px);margin-bottom:22px;letter-spacing:-.025em;}
.bl-coment > h2 span{color:var(--tinta-4);font-weight:600;}
.bl-com-lista{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:16px;}
.bl-com{display:flex;gap:14px;padding:18px 20px;border-radius:14px;background:var(--papel);
  border:1px solid var(--linea);}
.bl-com-ini{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--tinta);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;}
.bl-com-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:5px;}
.bl-com-cab b{font-size:15.5px;letter-spacing:-.015em;}
.bl-com-cab time{font-size:13px;color:var(--tinta-4);}
.bl-com p{font-size:15.5px;line-height:1.65;color:var(--tinta-2);margin:0;}
.bl-com-vacio{color:var(--tinta-3);margin-bottom:26px;}
.bl-com-aviso{padding:13px 17px;border-radius:12px;font-size:15px;margin-bottom:18px;font-weight:600;}
.bl-com-aviso.ok{background:#E8F7EE;color:#16643A;border:1px solid #BBE5CB;}
.bl-com-aviso.mal{background:#FDECEC;color:#8E1F1F;border:1px solid #F5C6C6;}

.bl-com-form{background:var(--papel);border:1px solid var(--linea);border-radius:16px;
  padding:24px 26px;display:flex;flex-direction:column;gap:12px;}
.bl-com-form label{font-size:14px;font-weight:700;color:var(--tinta-2);}
.bl-com-form label em{font-weight:400;color:var(--tinta-4);font-style:normal;}
.bl-com-form input,.bl-com-form textarea{width:100%;padding:12px 14px;font-size:15.5px;
  border:1px solid var(--linea-2);border-radius:11px;background:#fff;color:var(--tinta);font-family:inherit;}
.bl-com-form input:focus,.bl-com-form textarea:focus{outline:3px solid var(--naranja);
  outline-offset:2px;border-color:var(--naranja);}
.bl-com-form textarea{resize:vertical;min-height:110px;}
.bl-com-fila{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.bl-com-fila > div{display:flex;flex-direction:column;gap:6px;min-width:0;}
.bl-com-pie{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:4px;}
.bl-com-pie small{font-size:12.5px;color:var(--tinta-4);line-height:1.5;max-width:46ch;}
.bl-com-pie .btn{margin:0;}
/* El señuelo anti-robot: fuera de pantalla, NO display:none — muchos
   programas de spam saltan lo que está oculto con display. */
.bl-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ══ SUSCRIPCIÓN ═══════════════════════════════════════════════════════ */
.sus{display:grid;grid-template-columns:1fr 1.15fr;gap:30px;align-items:center;
  padding:32px 34px;border-radius:20px;background:var(--tinta);color:#fff;
  position:relative;overflow:hidden;max-width:980px;margin:0 auto;}
.sus::before{content:"";position:absolute;inset:-30%;pointer-events:none;
  background:radial-gradient(40% 50% at 82% 20%, rgba(255,90,0,.30) 0%, rgba(255,90,0,0) 70%);}
.sus > *{position:relative;z-index:1;min-width:0;}
.sus-txt h2{font-size:clamp(21px,2.4vw,27px);line-height:1.25;margin:0 0 9px;letter-spacing:-.025em;}
.sus-txt p{font-size:15px;line-height:1.6;color:#B6C3D4;margin:0;}
.sus-form{display:flex;flex-direction:column;gap:11px;}
.sus-campos{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;}
.sus-campos input{min-width:0;padding:13px 15px;font-size:15px;border-radius:11px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-family:inherit;}
.sus-campos input::placeholder{color:#8FA0B6;}
.sus-campos input:focus{outline:3px solid var(--naranja);outline-offset:2px;
  background:rgba(255,255,255,.14);border-color:var(--naranja);}
.sus-campos .btn{margin:0;white-space:nowrap;}
.sus-acepto{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.5;
  color:#B6C3D4;cursor:pointer;}
.sus-acepto input{margin-top:2px;width:17px;height:17px;accent-color:var(--naranja);
  flex-shrink:0;cursor:pointer;}
.sus-acepto a{color:#FFB98A;text-decoration:underline;}
.sus-letra{font-size:12.5px;color:#8FA0B6;margin:0;}
.sus-aviso{margin:0;padding:11px 15px;border-radius:11px;font-size:14.5px;font-weight:600;
  background:rgba(255,255,255,.12);color:#fff;}
.sus-aviso.mal{background:rgba(229,35,27,.22);color:#FFC9C6;}
.sus-aviso[hidden]{display:none!important;}
.sus-min{grid-template-columns:1fr;padding:26px 24px;}

/* Las pantallas de confirmar y de darse de baja. */
.sus-fin{padding:70px 0 80px;}
.sus-caja{max-width:560px;margin:0 auto;text-align:center;background:var(--papel);
  border:1px solid var(--linea);border-radius:20px;padding:44px 34px;box-shadow:var(--sombra-2);}
.sus-ico{width:64px;height:64px;border-radius:50%;margin:0 auto 20px;display:flex;
  align-items:center;justify-content:center;background:var(--verde);color:#fff;}
.sus-ico-gris{background:var(--linea-2);color:var(--tinta-3);}
.sus-caja h1{font-size:clamp(23px,3vw,30px);margin-bottom:12px;letter-spacing:-.028em;}
.sus-caja p{font-size:16px;line-height:1.65;color:var(--tinta-3);margin:0 auto 12px;max-width:44ch;}
.sus-nota{font-size:14.5px!important;color:var(--tinta-4)!important;}
.sus-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px;}
.sus-btns .btn{margin:0;}

@media(max-width:860px){
  .bl-dest{grid-template-columns:1fr;}
  .bl-dest-img{min-height:210px;aspect-ratio:16/9;}
  .bl-dest-txt{padding:26px 24px;}
  .sus{grid-template-columns:1fr;padding:26px 22px;gap:20px;}
  .sus-campos{grid-template-columns:1fr;}
}
@media(max-width:620px){
  .bl-com-fila{grid-template-columns:1fr;}
  .bl-com-form{padding:20px 18px;}
  .bl-art-cuerpo{padding-top:26px;}
  .bl-texto{font-size:16.5px;}
  .bl-cta{flex-direction:column;align-items:flex-start;}
  .bl-cta .btn{width:100%;}
  .bl-buscar{flex-direction:column;}
  .bl-buscar .btn{width:100%;}
}

/* Al imprimir un artículo solo debe salir el artículo: ni menú, ni chat, ni
   botones de compartir, ni el formulario de comentar. Y los enlaces
   muestran su dirección, porque en papel un enlace azul no lleva a ninguna
   parte. */
@media print{
  .nav,.mobile-menu,.pie,.st-lanza,.st-panel,.st-globo,.bl-compartir,
  .bl-compartir-pie,.bl-cta,.sus,.bl-com-form,.bl-rel,.cierre,.bl-pag{display:none!important;}
  .bl-art-cab{background:#fff!important;color:#000!important;padding:0 0 18px;}
  .bl-art-cab::before{display:none!important;}
  .bl-art-cab h1,.bl-autor b{color:#000!important;}
  .bl-art-entrada,.bl-art-meta{color:#444!important;}
  .bl-texto{font-size:12pt;color:#000;}
  .bl-texto a{color:#000;text-decoration:underline;}
  .bl-texto a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;}
  body{background:#fff;}
}

/* Texto solo para lectores de pantalla. Las etiquetas de los campos de
   buscar y de suscribirse existen aunque no se vean: un campo con solo un
   placeholder no tiene nombre para quien navega con lector de pantalla. */
.visualmente-oculto{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* ── DATOS DE CONTACTO DEL PIE ─────────────────────────────────────────
   El teléfono y el correo NO son enlaces de menú: se separan de la lista
   de páginas con una línea fina, van más pequeños y con su icono. Antes
   estaban intercalados entre «Contacto» y «Soporte» con el mismo aspecto,
   y la columna se leía como una lista de seis cosas sin relación.

   `overflow-wrap:normal` anula aquí la regla general del sitio: el correo
   se partía a mitad de palabra («…ciws.co / m»). El corte permitido lo
   marca el <wbr> del marcado, justo después de la arroba. */
.fc-datos{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.09);
  display:flex;flex-direction:column;gap:2px;}
/* 13 px y 8 px de separación: medido, el correo ocupa 208 px y en la
   columna caben 211. A 13,5 px pedia 216 y se iba a una segunda linea.
   Si algún día una fuente distinta lo empuja, el <wbr> del marcado lo
   parte despues de la arroba y sigue leyendose bien. */
.fc a.fc-dato{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.45;
  color:#8496AE;padding:5px 0;overflow-wrap:normal;word-break:normal;}
.fc a.fc-dato:hover{color:#fff;padding-left:0;}
.fc a.fc-dato svg{color:#5F718B;transition:color .18s;}
.fc a.fc-dato:hover svg{color:var(--naranja);}
.fc a.fc-dato span{min-width:0;}

/* ── PORTAL DE CLIENTES (pie) ──────────────────────────────────────────
   Se ve como un botón y no como un enlace más: no es navegación del sitio,
   es la puerta a otra aplicación. Por eso lleva el candado delante y la
   flecha de «se abre fuera» detrás — las dos señales que hacen que alguien
   entienda a dónde va antes de pulsar. */
.fportal{display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  padding:11px 18px;border-radius:12px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);
  color:#E4EAF2;font-size:14px;font-weight:700;letter-spacing:-.01em;
  transition:background .18s,border-color .18s,color .18s,transform .18s;}
.fportal:hover{background:var(--naranja);border-color:var(--naranja);color:#fff;
  transform:translateY(-2px);}
.fportal:focus-visible{outline:3px solid var(--naranja);outline-offset:3px;}
.fportal-fuera{opacity:.6;}
.fportal:hover .fportal-fuera{opacity:1;}

/* ══ PORTAL DE CLIENTES ════════════════════════════════════════════════
   Dos mitades: a la izquierda qué se puede hacer, a la derecha la puerta.
   El naranja se reserva para la mitad de la derecha —la que tiene el botón—
   para que el ojo caiga ahí; si las dos mitades compitieran en color, no
   quedaría claro dónde se entra.

   El degradado naranja es el mismo del propio portal: quien pulse el botón
   debe reconocer a dónde llegó, no sentir que cambió de empresa. */
.portal{display:grid;grid-template-columns:1.25fr .95fr;gap:0;
  border-radius:22px;overflow:hidden;box-shadow:var(--sombra-2);
  border:1px solid var(--linea);background:var(--papel);}

.portal-txt{padding:36px 38px;min-width:0;}
.portal-et{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--naranja-t);margin-bottom:12px;}
.portal-tit{font-size:clamp(23px,2.6vw,30px);line-height:1.2;margin:0 0 10px;letter-spacing:-.028em;}
.portal-tit span{color:var(--naranja-t);}
.portal-baja{font-size:15.5px;line-height:1.6;color:var(--tinta-3);margin:0 0 24px;max-width:46ch;}

.portal-lista{display:flex;flex-direction:column;gap:16px;}
.portal-item{display:flex;gap:14px;align-items:flex-start;min-width:0;}
.portal-ic{flex-shrink:0;width:40px;height:40px;border-radius:11px;display:flex;
  align-items:center;justify-content:center;background:var(--naranja-10);color:var(--naranja-t);}
.portal-item b{display:block;font-size:16px;letter-spacing:-.018em;margin-bottom:3px;}
.portal-item span{display:block;font-size:14.5px;line-height:1.55;color:var(--tinta-3);}

/* La puerta. */
.portal-caja{position:relative;padding:36px 34px;display:flex;flex-direction:column;
  justify-content:center;min-width:0;color:#fff;
  /* Medido: blanco sobre el extremo mas claro (#C64B00) da 4,76 de
     contraste. Con el naranja de marca (#FF5A00) daba 2,99 y el texto
     pequeno no cumplia AA — se lee, pero mal, y con sol en la pantalla
     no se lee. Sigue siendo el naranja de la casa, mas profundo. */
  background:linear-gradient(150deg,#C64B00 0%,#B03F00 45%,#933300 100%);}
/* El círculo del fondo, el mismo gesto que usa el portal en su pantalla de
   entrada. Decorativo: no lleva contenido y no estorba al texto. */
.portal-caja::before{content:"";position:absolute;top:-70px;right:-60px;width:230px;height:230px;
  border-radius:50%;background:rgba(255,255,255,.10);pointer-events:none;}
.portal-caja > *{position:relative;z-index:1;}
.portal-candado{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.18);margin-bottom:16px;}
.portal-cta-tit{font-size:22px;margin:0 0 9px;letter-spacing:-.025em;color:#fff;}
.portal-caja p{font-size:14.5px;line-height:1.6;color:#fff;margin:0 0 18px;}
.portal-caja p b{color:#fff;}
/* Botón blanco sobre el naranja: el .btn-p del sitio es naranja y aquí
   desaparecería sobre su propio color. */
.portal-btn.btn-p{margin:0;background:#fff!important;color:#933300!important;
  box-shadow:0 6px 22px rgba(0,0,0,.18);align-self:flex-start;}
.portal-btn.btn-p:hover{background:#FFF4EC!important;color:#8E3200!important;}
.portal-libre{font-size:13.5px;margin:16px 0 0!important;color:#fff!important;}
.portal-ayuda{font-size:13.5px;margin:10px 0 0!important;
  padding-top:14px;border-top:1px solid rgba(255,255,255,.28);color:#fff!important;}
.portal-ayuda a{color:#fff;text-decoration:underline;font-weight:700;}

@media(max-width:900px){
  .portal{grid-template-columns:1fr;}
  .portal-txt{padding:28px 24px;}
  .portal-caja{padding:28px 24px;}
  .portal-btn.btn-p{width:100%;text-align:center;align-self:stretch;}
}

/* ── VIDEO DE YOUTUBE SIN SALIDA A YOUTUBE ─────────────────────────────
   Ver ui_video_yt() en includes/_ui.php: allí está explicado POR QUÉ el
   reproductor va tapado. Aquí está el CÓMO.

   La pieza clave es .yt-lamina. Cubre el reproductor entero y, al estar
   después del iframe en el documento, queda encima sin pelear z-index.
   Ningún clic llega al título ni al logo de YouTube — no hay a dónde irse.

   Los controles son los nuestros y viven sobre un vidrio oscuro: blanco
   sobre rgba(6,11,18,.88) da más de 15:1, se lee sobre cualquier cuadro
   del video. La barra aparece al pasar el cursor y se queda fija mientras
   el video esté en pausa, para que nadie pierda de vista cómo seguir. */
.yt{margin:0 auto;max-width:960px;}
.yt-marco{position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;
  overflow:hidden;background:#05090E;border:1px solid var(--linea);
  box-shadow:var(--sombra-2);}

/* La portada se sirve desde este servidor: hasta que no se pulsa
   reproducir, la página no le pide nada a Google. */
.yt-portada,.yt-portada img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;}
.yt-velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,9,14,.10) 0%,rgba(5,9,14,.52) 100%);
  transition:opacity .3s;}
/* OJO: la API de YouTube no mete el iframe DENTRO de este div — lo
   SUSTITUYE por el iframe, conservándole la clase. Por eso las medidas van
   en .yt-player y no en «.yt-player iframe»: ese selector deja de existir
   en cuanto arranca el reproductor, y el iframe se queda en los 640x360 de
   fábrica, flotando dentro del marco. */
.yt-player{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}

/* Una vez arrancado, portada y velo salen de en medio. */
.yt-marco.yt-vivo .yt-portada,
.yt-marco.yt-vivo .yt-velo{opacity:0;pointer-events:none;}

/* LA LÁMINA. Transparente y sin borde: no se ve, pero es la que recibe
   todos los clics. También hace de play/pausa, como en cualquier video. */
.yt-lamina{position:absolute;inset:0;width:100%;height:100%;
  border:0;padding:0;margin:0;background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none;}
.yt-lamina[hidden]{display:none;}
.yt-lamina:focus-visible{outline:3px solid var(--naranja);outline-offset:-4px;}

.yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:84px;height:84px;border:0;border-radius:50%;cursor:pointer;
  background:var(--naranja);color:#fff;padding:0 0 0 6px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 34px rgba(255,90,0,.45);transition:transform .2s,background .2s;}
.yt-play:hover{transform:translate(-50%,-50%) scale(1.08);background:#FF7A30;}
.yt-play[hidden]{display:none;}
.yt-play:focus-visible{outline:3px solid #fff;outline-offset:4px;}

/* El rótulo de la portada: dice qué es el video antes de que arranque.
   Ocupa el lugar donde YouTube pondría SU título con enlace. */
.yt-rotulo{position:absolute;left:22px;right:22px;bottom:20px;color:#fff;
  font-family:'Archivo',sans-serif;font-size:clamp(16px,2vw,21px);font-weight:800;
  letter-spacing:-.02em;line-height:1.3;text-shadow:0 2px 14px rgba(0,0,0,.55);
  pointer-events:none;transition:opacity .3s;}
.yt-marco.yt-vivo .yt-rotulo{opacity:0;}

/* ── LA BARRA DE CONTROLES ── */
.yt-barra{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;gap:10px;padding:10px 13px;
  background:linear-gradient(180deg,rgba(6,11,18,0) 0%,rgba(6,11,18,.88) 55%);
  opacity:0;transform:translateY(6px);transition:opacity .22s,transform .22s;}
.yt-barra[hidden]{display:none;}
/* Se muestra al pasar el cursor, al enfocar con el teclado y siempre que
   el video esté en pausa. */
.yt-marco:hover .yt-barra,
.yt-marco:focus-within .yt-barra,
.yt-marco.yt-pausa .yt-barra{opacity:1;transform:none;}

.yt-b{flex-shrink:0;width:34px;height:34px;border:0;border-radius:9px;cursor:pointer;
  background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .18s;}
.yt-b:hover{background:rgba(255,255,255,.16);}
.yt-b:focus-visible{outline:2px solid var(--naranja);outline-offset:2px;}
.yt-i-play{display:none;}
.yt-marco.yt-pausa .yt-i-play{display:block;}
.yt-marco.yt-pausa .yt-i-pausa{display:none;}
.yt-i-mudo{display:none;}
.yt-marco.yt-mudo .yt-i-mudo{display:block;}
.yt-marco.yt-mudo .yt-i-son{display:none;}

.yt-t{flex-shrink:0;color:#fff;font-size:12.5px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;opacity:.92;}

/* Las dos barras deslizantes. Se estilan a mano porque el aspecto nativo
   cambia con cada navegador y aquí tienen que leerse sobre el video. */
.yt-seek,.yt-vol{-webkit-appearance:none;appearance:none;background:transparent;
  cursor:pointer;height:16px;margin:0;}
.yt-seek{flex:1 1 auto;min-width:0;}
.yt-vol{flex:0 0 72px;width:72px;}
.yt-seek::-webkit-slider-runnable-track,.yt-vol::-webkit-slider-runnable-track{
  height:4px;border-radius:3px;background:rgba(255,255,255,.32);}
.yt-seek::-moz-range-track,.yt-vol::-moz-range-track{
  height:4px;border-radius:3px;background:rgba(255,255,255,.32);}
.yt-seek::-webkit-slider-thumb,.yt-vol::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:13px;height:13px;margin-top:-4.5px;
  border-radius:50%;background:var(--naranja);border:2px solid #fff;
  box-shadow:0 1px 5px rgba(0,0,0,.45);}
.yt-seek::-moz-range-thumb,.yt-vol::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;background:var(--naranja);border:2px solid #fff;}
.yt-seek:focus-visible,.yt-vol:focus-visible{outline:2px solid var(--naranja);outline-offset:3px;}

.yt-pie{margin-top:14px;text-align:center;font-size:14.5px;color:var(--tinta-3);}

@media (max-width:640px){
  .yt-marco{border-radius:14px;}
  .yt-play{width:66px;height:66px;}
  .yt-rotulo{left:16px;right:16px;bottom:16px;}
  /* En un teléfono no hay «pasar el cursor»: la barra se queda visible. */
  .yt-barra{opacity:1;transform:none;padding:8px 9px;gap:7px;}
  /* Y el volumen sobra: el botón físico del aparato manda. */
  .yt-vol{display:none;}
  .yt-b{width:32px;height:32px;}
  .yt-t{font-size:11.5px;}
}