/* ════════════════════════════════════════════════════════════════
   NetOffice 2026 — CSS público (tema "Cockpit IA")
   Consolida: netoffice-brand.css (vars + fuentes Tw Cen MT) +
   p1-cockpit.css (componentes subpáginas) + index.html (home) +
   añadidos propios: dropdown submenú NetOffice + menú móvil.

   Se carga SOLO en páginas públicas (HeadContent de PublicLayout) y
   TODO va prefijado con .no-public para no afectar al admin (MudBlazor)
   ni colisionar con el app.css heredado del CMS.
   CLAUDE.md / spec netOffice2026.
═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600&display=swap');

/* Fuentes Tw Cen MT (globales, pero @font-face solo registra familias: inocuo
   para el admin). NO incluimos el reset global *{font-weight} de fonts.css ni el
   html,body{font-family} de netoffice-brand.css — eso afectaría a MudBlazor;
   esos efectos van scoped bajo .no-public más abajo. */
@font-face { font-family:'Tw Cen MT';      src:url('fonts/TCM_____.TTF') format('truetype'); font-style:normal; }
@font-face { font-family:'Tw Cen MT TCMI'; src:url('fonts/TCMI____.TTF') format('truetype'); font-style:italic; }
@font-face { font-family:'Tw Cen MT TCB';  src:url('fonts/TCB_____.TTF') format('truetype'); font-style:normal; }
@font-face { font-family:'Tw Cen MT TCBI'; src:url('fonts/TCBI____.TTF') format('truetype'); font-style:italic; }
@font-face { font-family:'Tw Cen MT TCCM'; src:url('fonts/TCCM____.TTF') format('truetype'); font-style:normal; }
@font-face { font-family:'Tw Cen MT TCCB'; src:url('fonts/TCCB____.TTF') format('truetype'); font-style:normal; }
@font-face { font-family:'Tw Cen MT TCCEB';src:url('fonts/TCCEB.TTF')    format('truetype'); font-style:normal; }

/* ── Paleta cockpit ── */
.no-public {
  --bg:#070d1c; --bg-2:#0b1428; --line:rgba(255,255,255,.08);
  --txt:#e9edf3; --muted:#8b97aa;
  --primary:#2f78cb; --primary-dark:#1f5896;
  --cian:#19b6c4; --amarillo:#f6a83a; --verde:#2bb673; --rojo:#d94c4c; --purpura:#7a4ec1;
  /* alias usados por el markup del diseño */
  --no-cian:#19b6c4; --no-azul:#2f78cb; --no-azul-deep:#1f4d85;
  --no-amarillo:#f6a83a; --no-verde:#2bb673; --no-rojo:#d94c4c; --no-purpura:#7a4ec1;

  background:var(--bg); color:var(--txt); min-height:100vh;
  font-family:'Tw Cen MT','Segoe UI',Arial,sans-serif; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.no-public *, .no-public *::before, .no-public *::after { box-sizing:border-box; margin:0; padding:0; font-weight:normal !important; }
.no-public a { color:inherit; text-decoration:none; }
.no-public p { font-size:19px; }
.no-public img { max-width:100%; display:block; }
.no-public h1,.no-public h2,.no-public h3,.no-public h4,.no-public h5,.no-public h6 { font-family:'Tw Cen MT','Segoe UI',Arial,sans-serif; }
.no-public .mono { font-family:'JetBrains Mono',monospace; }
.no-public .skip-to-content { position:absolute; left:-9999px; top:0; background:var(--primary); color:#fff; padding:10px 16px; z-index:999; }
.no-public .skip-to-content:focus { left:8px; top:8px; }

/* ════ TOPBAR ════ */
.no-public .topbar { position:fixed; top:0; left:0; right:0; z-index:100; background:transparent; border-bottom:1px solid var(--line); transition:background .25s; }
.no-public > main#main-content { padding-top:72px; }
.no-public .topbar.scrolled { background:rgba(7,13,28,.95); backdrop-filter:blur(14px) saturate(140%); }
.no-public .topbar .wrap { max-width:1400px; margin:0 auto; display:flex; align-items:center; gap:28px; padding:14px 32px; }
.no-public .brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.no-public .brand img { height:28px; width:auto; filter:brightness(0) invert(1); }
.no-public .brand .dot { width:8px; height:8px; border-radius:50%; background:var(--cian); box-shadow:0 0 10px var(--cian); animation:np-pulse 2.4s infinite; }
@keyframes np-pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.85);} }
.no-public nav.main { display:flex; gap:24px; flex:1; font-size:19px; align-items:center; }
.no-public nav.main > a, .no-public nav.main .has-submenu > a { color:var(--muted); transition:color .2s; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; }
.no-public nav.main a:hover, .no-public nav.main a.active { color:#fff; }

/* Dropdown submenú (NetOffice ▸ módulos) */
.no-public nav.main .has-submenu { position:relative; }
.no-public nav.main .has-submenu > a::after { content:"▾"; margin-left:6px; font-size:11px; opacity:.7; }
.no-public .submenu { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(10px); min-width:280px; background:rgba(11,20,40,.98); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:14px; padding:10px; display:grid; grid-template-columns:1fr; gap:4px; opacity:0; visibility:hidden; transition:opacity .2s, transform .2s; box-shadow:0 30px 60px -20px rgba(0,0,0,.7); z-index:120; }
.no-public .has-submenu:hover .submenu, .no-public .has-submenu:focus-within .submenu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(8px); }
.no-public .submenu::before { content:""; position:absolute; top:-8px; left:0; right:0; height:8px; } /* puente hover */
.no-public .submenu a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; color:#cfd6e2; font-size:16px; min-width:225px; }
.no-public .submenu a:hover { background:rgba(255,255,255,.05); color:#fff; }
.no-public .sm-letter { width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:11px; color:#0a0f1c; background:var(--mod,#2f78cb); flex-shrink:0; font-family:'JetBrains Mono',monospace; box-shadow:0 0 0 1px rgba(255,255,255,.08); }

.no-public .topbar .cta { display:flex; gap:10px; align-items:center; flex-shrink:0; }
.no-public .btn { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:8px; font-size:14px; transition:all .2s; cursor:pointer; border:1px solid transparent; font-family:inherit; }
.no-public .btn-ghost { color:#fff; border-color:var(--line); background:transparent; }
.no-public .btn-ghost:hover { border-color:var(--cian); color:var(--cian); }
.no-public .btn-cta { background:linear-gradient(135deg,var(--cian),#0d8b97); color:#fff; box-shadow:0 8px 24px -8px var(--cian); }
.no-public .btn-cta:hover { transform:translateY(-1px); background:linear-gradient(135deg, var(--amarillo), #d18620); box-shadow:0 12px 32px -8px var(--amarillo); }
.no-public .btn-big { padding:15px 28px; font-size:16px; }

/* Hamburguesa + menú móvil (el diseño original no traía) */
.no-public .mobile-toggle { display:none; background:none; border:none; color:#fff; cursor:pointer; padding:6px; margin-left:auto; }
.no-public .mobile-toggle svg { width:26px; height:26px; }
.no-public .mobile-menu { display:none; flex-direction:column; gap:2px; padding:8px 20px 20px; background:rgba(7,13,28,.98); border-bottom:1px solid var(--line); }
.no-public .mobile-menu.open { display:flex; }
.no-public .mobile-menu > a, .no-public .mobile-menu .mm-group > a { padding:12px 8px; color:#cfd6e2; border-bottom:1px solid var(--line); font-size:16px; }
.no-public .mobile-menu a:hover { color:#fff; }
.no-public .mobile-menu .mm-sub { display:flex; flex-direction:column; padding-left:14px; }
.no-public .mobile-menu .mm-sub a { display:flex; align-items:center; gap:10px; padding:10px 8px; font-size:14.5px; color:var(--muted); border-bottom:1px solid var(--line); }
.no-public .mobile-menu .mobile-cta { color:#fff; background:linear-gradient(135deg,var(--cian),#0d8b97); border-radius:8px; text-align:center; margin-top:10px; border:none; }

/* ════ SUBNAV / breadcrumb ════ */
.no-public .subnav { padding:14px 32px; background:rgba(255,255,255,.02); border-bottom:1px solid var(--line); font-family:'JetBrains Mono',monospace; font-size:14px; }
.no-public .subnav .wrap { max-width:1400px; margin:0 auto; display:flex; gap:24px; align-items:center; color:var(--muted); flex-wrap:wrap; }
.no-public .subnav a { color:var(--primary); }
.no-public .subnav a:hover { color:var(--cian); }

/* ════ HERO HOME ════ */
.no-public .hero { position:relative; padding:90px 32px 80px; display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; max-width:1400px; margin:0 auto; }
/* Fondo global fijo — antes vivía en .hero::before, ahora se aplica a toda la web manteniendo la misma posición (esquina superior-derecha del viewport). */
.no-public::before { content:""; position:fixed; top:100px; right:-200px; width:700px; height:700px; background:radial-gradient(circle, rgba(25,182,196,.22), transparent 60%); pointer-events:none; z-index:0; }
.no-public .hero::before { content:""; position:absolute; top:-200px; right:-200px; width:700px; height:700px; pointer-events:none; }
.no-public .hero::after { content:""; position:absolute; bottom:-150px; left:-100px; width:500px; height:500px; background:radial-gradient(circle, rgba(33,112,179,.32), transparent 60%); pointer-events:none; }
.no-public .hero-content { position:relative; z-index:2; }

/* Hero carrusel de fotos (reemplaza el mockup de producto) — fondo con crossfade + capa azul oscuro
   Estructura igual que el carrusel de netoffice.es: .carousel-inner (fotos) + .container dentro
   del overlay (contenido). Fondo/overlay "full-bleed" (100vw) igual que el resto de bandas
   oscuras del sitio, para que no quede encajonado dentro del max-width:1400px del .hero (bug
   visto en preview 2026-07-03: el fondo se quedaba en una caja centrada con márgenes blancos). */
/* app.css (admin, sin prefijo .no-public) trae ".hero { overflow:hidden }" por colisión de
   nombre de clase con el panel admin — recorta el full-bleed de las fotos. Forzar visible aquí. */
.no-public .hero.hero-carousel { grid-template-columns:1fr !important; max-width:1840px; min-height:89vh; padding:0; isolation:isolate; overflow:visible !important; }
.no-public .hero.hero-carousel::before, .no-public .hero.hero-carousel::after { display:none; }
.no-public .hero.hero-carousel .carousel-inner,
.no-public .hero.hero-carousel .hero-carousel-overlay {
  position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; overflow:hidden;
}
.no-public .hero.hero-carousel .carousel-inner { z-index:0; }
.no-public .hero.hero-carousel .carousel-inner .item {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  transition:opacity 1.2s ease;
}
.no-public .hero.hero-carousel .carousel-inner .item.active { opacity:1; }
.no-public .hero.hero-carousel .carousel-inner .hero-carousel-video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.no-public .hero.hero-carousel .hero-carousel-overlay {
  z-index:1;
  display:flex; align-items:center;
}
.no-public .hero.hero-carousel .container.hero-content {
  position:relative; z-index:2; width:100%;
  max-width:1400px; margin:0 auto; padding:120px 32px 100px;
}
.no-public .hero.hero-carousel .container.hero-content .eyebrow-line,
.no-public .hero.hero-carousel .container.hero-content .hero-ctas { max-width:760px; }
/* Botones ocultos de momento — pendiente de reubicar para no tapar el vídeo */
.no-public .hero.hero-carousel .hero-ctas-hidden { display:none; }
.no-public .hero.hero-carousel .container.hero-content .hero-carousel-text-stack { max-width:1300px; }
.no-public .hero.hero-carousel .eyebrow-line { background:transparent; border:1px solid rgba(255,255,255,.45); color:#19b6c4; }
.no-public .hero.hero-carousel h1.mega { color:#ffffff; }
.no-public .hero.hero-carousel p.sub { color:rgba(255,255,255,.85); }

/* Título + subtítulo cambian junto con la foto — mismo patrón de crossfade que .item.
   El wrapper necesita min-height propio porque los dos textos son de longitud distinta
   y están apilados en position:absolute (si no, el CTA de debajo saltaría de sitio). */
.no-public .hero.hero-carousel .hero-carousel-text-stack { position:relative; min-height:280px; }
.no-public .hero.hero-carousel .hero-carousel-text {
  position:absolute; top:0; left:0; width:100%;
  opacity:0; pointer-events:none;
  transition:opacity 1.2s ease;
}
.no-public .hero.hero-carousel .hero-carousel-text.active { opacity:1; pointer-events:auto; }
@media (max-width:600px) { .no-public .hero.hero-carousel .hero-carousel-text-stack { min-height:340px; } }

/* Flechas + puntos de navegación (igual que netoffice.es) */
.no-public .hero.hero-carousel .hero-carousel-control {
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4);
  color:#ffffff; font-size:28px; line-height:1; cursor:pointer;
  transition:background .2s, transform .2s;
}
.no-public .hero.hero-carousel .hero-carousel-control:hover { background:rgba(255,255,255,.28); }
.no-public .hero.hero-carousel .hero-carousel-control.left { left:28px; }
.no-public .hero.hero-carousel .hero-carousel-control.right { right:28px; }
.no-public .hero.hero-carousel .hero-carousel-indicators {
  position:absolute; left:50%; bottom:36px; transform:translateX(-50%);
  z-index:3; display:flex; gap:12px; list-style:none; padding:0; margin:0;
}
.no-public .hero.hero-carousel .hero-carousel-indicators li {
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.6);
  cursor:pointer; transition:background .2s, transform .2s;
}
.no-public .hero.hero-carousel .hero-carousel-indicators li.active { background:#19b6c4; border-color:#19b6c4; transform:scale(1.15); }
@media (max-width:600px) {
  .no-public .hero.hero-carousel .hero-carousel-control { width:40px; height:40px; font-size:22px; }
  .no-public .hero.hero-carousel .hero-carousel-control.left { left:12px; }
  .no-public .hero.hero-carousel .hero-carousel-control.right { right:12px; }
}

/* ── Home hero — rediseño a dos columnas (2026-07-08): CTA a la izquierda, vídeo contenido a la
   derecha (ya no full-bleed). Reemplaza el hero-vídeo-de-fondo anterior; las reglas .hero-carousel
   de arriba (full-bleed, flechas, puntos) se quedan sin usar en el HTML nuevo, no hace falta borrarlas. */
.no-public .hero.hero-carousel.hero-split {
  display:grid; grid-template-columns:1fr 1.15fr !important; gap:60px; align-items:center;
  max-width:1450px; min-height:auto; padding:100px 32px 70px;
  position:relative; isolation:auto; overflow:visible !important;
}
.no-public .hero.hero-carousel.hero-split .hero-split-text { max-width:560px; }
.no-public .hero.hero-carousel.hero-split .hero-split-text .eyebrow-line { background:rgba(25,182,196,.12); border:1px solid rgba(25,182,196,.45); color:#19b6c4; }
.no-public .hero.hero-carousel.hero-split h1.mega { color:#0D3454; }
.no-public .hero.hero-carousel.hero-split p.sub { color:#3a4a61 !important; }
.no-public .hero.hero-carousel.hero-split .hero-split-media { position:relative; }
.no-public .hero.hero-carousel.hero-split .hero-video-frame {
  position:relative; border-radius:20px; overflow:hidden;
  box-shadow:0 40px 80px -28px rgba(13,52,84,.35);
  aspect-ratio:16/9; /* el vídeo fuente es 1818x766 (~2.37:1); 16:9 recorta poco y queda proporcionado junto al texto */
}
.no-public .hero.hero-carousel.hero-split .hero-video-frame video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
@media (max-width:960px) {
  .no-public .hero.hero-carousel.hero-split { grid-template-columns:1fr !important; padding:70px 24px 50px; }
  .no-public .hero.hero-carousel.hero-split .hero-split-text { max-width:none; }
  .no-public .hero.hero-carousel.hero-split .hero-video-frame { aspect-ratio:16/10; }
}

/* (v2) eyebrow-line con estilo chip pill — fondo cian translúcido + borde + texto cian */
.no-public .eyebrow-line { display:inline-block; padding:6px 16px; border-radius:20px; background:rgba(25,182,196,.12); border:1px solid rgba(25,182,196,.45); color:var(--cian); font-size:12px; font-weight:600; letter-spacing:.10em; text-transform:uppercase; margin-bottom:24px; font-family:'JetBrains Mono',monospace; }
.no-public .eyebrow-line::before { content:none; }
.no-public .eyebrow-line.amber { background:rgba(246,168,58,.12); border-color:rgba(246,168,58,.50); color:var(--amarillo); }
.no-public h1.mega { font-size:clamp(44px,5.8vw,84px); line-height:1.0; letter-spacing:-.02em; margin-bottom:24px; }
.no-public h1.mega .accent { background:linear-gradient(120deg, var(--cian), #5ddcea); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.no-public .hero p.sub { font-size:19px; color:var(--muted); line-height:1.55; margin-bottom:36px; max-width:540px; }
.no-public .hero-ctas { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:48px; }
.no-public .hero-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:none; width:100%; padding-top:32px; border-top:1px solid var(--line); }
.no-public .hero-stats .num { font-size:30px; color:#fff; letter-spacing:-.025em; font-family:'JetBrains Mono',monospace; }
.no-public .hero-stats .num small { color:var(--cian); }
.no-public .hero-stats .lbl { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:6px; }

/* ════ COCKPIT MOCK ════ */
.no-public .cockpit { position:relative; perspective:2000px; z-index:2; }
.no-public .cockpit-frame { background:linear-gradient(165deg, #0e1a35 0%, #081225 100%); border:1px solid var(--line); border-radius:14px; padding:14px; transform:rotateY(-6deg) rotateX(3deg); box-shadow:0 40px 80px -20px rgba(0,0,0,.6),0 0 0 1px rgba(25,182,196,.08); }
.no-public .cockpit-top { display:flex; align-items:center; gap:6px; padding-bottom:12px; }
.no-public .cockpit-top .d { width:10px; height:10px; border-radius:50%; background:#33415c; }
.no-public .cockpit-top .d:nth-child(1){background:#ff5f56;} .no-public .cockpit-top .d:nth-child(2){background:#ffbd2e;} .no-public .cockpit-top .d:nth-child(3){background:#27c93f;}
.no-public .cockpit-top .url { margin-left:14px; flex:1; background:#050a16; border-radius:6px; padding:5px 12px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); }
.no-public .cockpit-top .url::before { content:"🔒  "; color:var(--verde); }
.no-public .cockpit-modules { display:flex; gap:4px; margin-bottom:10px; }
.no-public .cm { flex:1; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:6px; padding:8px; font-size:11px; text-align:center; color:var(--muted); display:flex; flex-direction:column; gap:4px; align-items:center; }
.no-public .cm .letter { width:22px; height:22px; border-radius:5px; display:flex; align-items:center; justify-content:center; color:#0a0f1c; font-size:11px; font-family:'JetBrains Mono',monospace; }
.no-public .cm:nth-child(1) .letter{background:var(--rojo);}
.no-public .cm:nth-child(2) .letter{background:var(--verde);}
.no-public .cm:nth-child(3) .letter{background:var(--purpura);}
.no-public .cm:nth-child(4) .letter{background:var(--amarillo);}
.no-public .cm:nth-child(5) .letter{background:#ff8a3a;}
.no-public .cm:nth-child(6) .letter{background:var(--no-azul);}
.no-public .cm:nth-child(7) .letter{background:#e85f9a;}
.no-public .cm:nth-child(8) .letter{background:var(--cian);}
.no-public .cm.active { color:#fff; background:rgba(25,182,196,.1); border-color:var(--cian); }
.no-public .cockpit-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:10px; }
.no-public .cgcell { background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:8px; padding:14px; }
.no-public .cgcell h4 { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:10px; }
.no-public .map-mock { height:170px; border-radius:6px; background:linear-gradient(135deg,#0a1830,#0e2440); position:relative; overflow:hidden; }
.no-public .map-mock::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(25,182,196,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(25,182,196,.08) 1px, transparent 1px); background-size:24px 24px; }
.no-public .truck { position:absolute; font-size:14px; }
.no-public .truck.t1 { top:35%; left:18%; } .no-public .truck.t2 { top:60%; left:55%; } .no-public .truck.t3 { top:25%; left:75%; }
.no-public .route { position:absolute; height:2px; background:linear-gradient(90deg, transparent, var(--cian), transparent); animation:np-flow 3s linear infinite; }
.no-public .route.r1 { top:42%; left:10%; right:30%; } .no-public .route.r2 { top:68%; left:30%; right:15%; animation-delay:1s; }
@keyframes np-flow { 0%{opacity:.2;} 50%{opacity:1;} 100%{opacity:.2;} }
.no-public .kpi-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.no-public .kpi { background:rgba(25,182,196,.06); border:1px solid rgba(25,182,196,.18); border-radius:6px; padding:9px 11px; }
.no-public .kpi .v { font-size:18px; color:#fff; font-family:'JetBrains Mono',monospace; }
.no-public .kpi .v .up { color:var(--verde); font-size:12px; margin-left:4px; } .no-public .kpi .v .down { color:var(--rojo); font-size:12px; margin-left:4px; }
.no-public .kpi .l { font-size:12px; color:var(--muted); }
.no-public .bars { height:60px; display:flex; align-items:flex-end; gap:5px; padding-top:8px; }
.no-public .bars span { flex:1; background:linear-gradient(180deg, var(--cian), rgba(25,182,196,.2)); border-radius:2px 2px 0 0; animation:np-rise 1.2s ease-out; }
@keyframes np-rise { from{height:0;} }
.no-public .ai-pill { position:absolute; top:60px; right:-30px; background:linear-gradient(135deg,#19b6c4,#0d8b97); padding:10px 16px; border-radius:30px; font-size:12px; color:#fff; box-shadow:0 12px 30px -8px var(--cian); display:flex; align-items:center; gap:8px; animation:np-float 4s ease-in-out infinite; z-index:3; }
@keyframes np-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }

/* ════ TRUSTBAR ════ */
.no-public .trustbar { padding:32px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.015); }
.no-public .trustbar .wrap { max-width:1400px; margin:0 auto; display:flex; align-items:center; gap:40px; flex-wrap:wrap; }
.no-public .trustbar .lbl { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.no-public .trustbar .row { display:flex; gap:36px; align-items:center; flex:1; flex-wrap:wrap; opacity:.7; }
.no-public .trustbar .logo-card { padding:10px 16px; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:6px; font-size:13px; color:var(--muted); }

/* ════ SECTIONS ════ */
.no-public section.np { padding:100px 32px; max-width:1400px; margin:0 auto; position:relative; }

/* v2 — banda de fondo para la sección IA Viva (id="ia") — mismo azul sólido que #modulos */
.no-public section.np#ia { isolation:isolate; }
.no-public section.np#ia > * { position:relative; z-index:1; }
.no-public section.np#ia::before {
  content:'';
  position:absolute;
  top:0; bottom:0;
  left:50%; transform:translateX(-50%);
  width:100vw;
  background:#0D3454;
  z-index:0;
}

/* Sección Módulos (id="modulos", home) — banda azul oscuro, mismo patrón que #ia */
.no-public section.np#modulos { isolation:isolate; }
.no-public section.np#modulos > * { position:relative; z-index:1; }
.no-public section.np#modulos::before {
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; background:#0D3454; z-index:0;
}
.no-public section.np#modulos .section-title,
.no-public section.np#modulos .section-head p,
.no-public section.np#modulos .eyebrow-line { color:#ffffff; }
.no-public section.np#modulos .eyebrow-line { background:transparent; border:1px solid rgba(255,255,255,.45); color:#19b6c4; }
.no-public section.np#modulos .section-head p { color:rgba(255,255,255,.75); }
.no-public section.np#modulos .card { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); box-shadow:none; }
.no-public section.np#modulos .card h3 { color:#ffffff; }
.no-public section.np#modulos .card p { color:rgba(255,255,255,.80); }
/* Cada tarjeta de módulo lleva su color en --c inline (igual que los chips de
   arriba), así que el icono va en el color de su módulo en vez de todos cian
   (Ana 2026-09-01). Fondo neutro translúcido: --c es un hex y no se le puede
   dar alfa sin color-mix, que en este CSS se ha evitado a propósito. */
.no-public section.np#modulos .card .ic {
  color:var(--c,#19b6c4);
  background:rgba(255,255,255,.06);
  border:1px solid var(--c,#19b6c4);
  box-shadow:0 0 0 4px rgba(255,255,255,.03);
}
.no-public section.np#modulos .card:hover .ic { background:rgba(255,255,255,.10); }
/* el "Ver más →" también en el color del módulo */
.no-public section.np#modulos .card .card-more { color:var(--c,#19b6c4); }

/* v2 — sección Integraciones (id="integraciones") cards verticales con icono+título+categoría */
.no-public section.np#integraciones .integ-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:18px; }
.no-public section.np#integraciones .integ-card {
  padding:28px 18px 22px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:14px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.no-public section.np#integraciones .integ-card:hover { transform:translateY(-4px); border-color:rgba(25,182,196,.5); box-shadow:0 18px 38px -20px rgba(25,182,196,.45); }
.no-public section.np#integraciones .integ-card .integ-ic {
  width:60px; height:60px; border-radius:14px;
  background:linear-gradient(135deg, rgba(25,182,196,.20), rgba(25,182,196,.06));
  border:1px solid rgba(25,182,196,.40);
  color:var(--cian);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 4px rgba(25,182,196,.06), 0 10px 26px -12px rgba(25,182,196,.7);
}
.no-public section.np#integraciones .integ-card .integ-ic svg { width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* Alternancia de color: pares en naranja, impares en cian (default) */
.no-public section.np#integraciones .integ-card:nth-child(even) .integ-ic {
  background:linear-gradient(135deg, rgba(246,168,58,.22), rgba(246,168,58,.06));
  border-color:rgba(246,168,58,.50);
  color:var(--amarillo);
  box-shadow:0 0 0 4px rgba(246,168,58,.06), 0 10px 26px -12px rgba(246,168,58,.7);
}
.no-public section.np#integraciones .integ-card:nth-child(even):hover { border-color:rgba(246,168,58,.55); box-shadow:0 18px 38px -20px rgba(246,168,58,.45); }
.no-public section.np#integraciones .integ-card h4 { color:#fff; font-size:15.5px; font-weight:600; letter-spacing:-.005em; margin:4px 0 0; }
.no-public section.np#integraciones .integ-card .integ-cat { color:var(--muted); font-size:12.5px; letter-spacing:.04em; }
@media (max-width:1100px) { .no-public section.np#integraciones .integ-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:780px) { .no-public section.np#integraciones .integ-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px) { .no-public section.np#integraciones .integ-grid { grid-template-columns:repeat(2,1fr); } }

/* v2 — variante de contacto-data fuera del contacto-final (página /contacto) — fondo oscuro base */
.no-public .contacto-data--page { list-style:none; padding:0; margin:0 0 24px; display:grid; gap:22px; }
.no-public .contacto-data--page li { display:flex; align-items:center; gap:18px; padding:0; }
.no-public .contacto-data--page li::before { content:none; }
.no-public .contacto-data--page .contacto-ic { width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg, rgba(25,182,196,.18), rgba(25,182,196,.06)); border:1px solid rgba(25,182,196,.35); color:var(--cian); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 0 0 4px rgba(25,182,196,.06), 0 8px 24px -10px rgba(25,182,196,.6); }
.no-public .contacto-data--page .contacto-ic svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .contacto-data--page .contacto-data-text { display:flex; flex-direction:column; gap:3px; }
.no-public .contacto-data--page .contacto-data-text small { font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.10em; font-weight:600; }
.no-public .contacto-data--page .contacto-data-text b { color:#fff; font-size:18px; font-weight:600; }
.no-public .contacto-data--page .contacto-data-text b a { color:inherit; text-decoration:none; }
.no-public .contacto-data--page .contacto-data-text b a:hover { color:var(--cian); }

/* v2 — borde blanco en las tarjetas de "El corazón de tu operativa" (id="capacidades-trafico") */
.no-public section.np#capacidades-trafico .card { position:relative; border-color:rgba(255,255,255,.55); padding-top:32px; }
.no-public section.np#capacidades-trafico .card:hover { border-color:#fff; }
/* Tag pill en esquina superior derecha de cada card */
.no-public section.np#capacidades-trafico .card .card-tag { position:absolute; top:14px; right:14px; padding:4px 12px; border-radius:30px; background:rgba(25,182,196,.12); border:1px solid rgba(25,182,196,.45); color:var(--cian); font-size:11.5px; font-weight:600; letter-spacing:.04em; }
/* Split: imagen + bloque de planificación a la derecha (debajo del grid de cards) */
.no-public section.np#capacidades-trafico .capacidades-split { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; margin-top:120px; }
.no-public section.np#capacidades-trafico .capacidades-media { display:flex; justify-content:center; margin-top:0; }
.no-public section.np#capacidades-trafico .capacidades-media img { max-width:100%; width:100%; height:auto; border-radius:14px; border:1px solid var(--line); box-shadow:0 30px 60px -20px rgba(0,0,0,.55); }
.no-public section.np#capacidades-trafico .planificacion-text .eyebrow-line.orange { background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.50); color:#f59e0b; margin-bottom:14px; }
.no-public section.np#capacidades-trafico .planificacion-text h2.section-title { font-size:clamp(28px,2.6vw,40px); margin-bottom:16px; line-height:1.1; }
.no-public section.np#capacidades-trafico .planificacion-text p { color:#cfd6e2; font-size:15.5px; line-height:1.6; margin-bottom:24px; }
.no-public section.np#capacidades-trafico .planificacion-stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.no-public section.np#capacidades-trafico .pl-stat { padding:18px 20px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:12px; }
.no-public section.np#capacidades-trafico .pl-stat b { display:block; color:#f59e0b; font-size:28px; font-weight:700; line-height:1; margin-bottom:6px; letter-spacing:-.01em; }
.no-public section.np#capacidades-trafico .pl-stat span { color:#cfd6e2; font-size:13.5px; line-height:1.4; }
@media (max-width:960px) {
  .no-public section.np#capacidades-trafico .capacidades-split { grid-template-columns:1fr; gap:36px; }
}
/* Reduce gap entre el hero y los stats (sección anterior) */
.no-public section.np#capacidades-trafico { padding-top:60px; }
.no-public section.hero-page.hero-full + section.std { padding-top:0; }
.no-public section.hero-page.hero-full + section.std .stats-row { padding-top:24px; border-top:none; }

/* v2 — sección "Control en tiempo real" con banda full-width azul oscuro #032854 */
.no-public section.np.tracking-section { isolation:isolate; }
.no-public section.np.tracking-section > * { position:relative; z-index:1; }
.no-public section.np.tracking-section::before {
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; background:#0D3454; z-index:0;
}
.no-public section.np.tracking-section .tracking-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; }

/* Visual mock de tracking */
.no-public .tracking-mock { display:flex; flex-direction:column; align-items:center; gap:28px; }
.no-public .tracking-mock .tm-frame { width:100%; max-width:560px; background:linear-gradient(160deg, #062f5e, #021e44); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:18px; box-shadow:0 30px 60px -24px rgba(0,0,0,.55); }
.no-public .tracking-mock .tm-bar { display:flex; align-items:center; justify-content:space-between; padding:6px 8px 14px; color:#cfd6e2; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.10em; border-bottom:1px solid rgba(255,255,255,.06); }
.no-public .tracking-mock .tm-dot { width:8px; height:8px; border-radius:50%; background:#19b6c4; box-shadow:0 0 0 3px rgba(25,182,196,.20); }
.no-public .tracking-mock .tm-content { display:grid; grid-template-columns:1.4fr 1fr; gap:12px; padding:14px 8px; }
.no-public .tracking-mock .tm-map { background:linear-gradient(180deg, #061d3d, #021630); border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:8px; min-height:200px; display:flex; align-items:center; justify-content:center; }
.no-public .tracking-mock .tm-map svg { width:100%; height:auto; }
.no-public .tracking-mock .tm-tiles { display:grid; grid-template-rows:repeat(4,1fr); gap:6px; }
.no-public .tracking-mock .tm-tile { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:8px 10px; display:flex; flex-direction:column; gap:2px; }
.no-public .tracking-mock .tm-tile small { color:#7a8aa0; font-size:9.5px; text-transform:uppercase; letter-spacing:.10em; font-family:'JetBrains Mono',monospace; }
.no-public .tracking-mock .tm-tile b { color:#fff; font-size:13px; font-weight:600; }
.no-public .tracking-mock .tm-footer { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; padding:0 8px; }
.no-public .tracking-mock .tm-kpi { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.no-public .tracking-mock .tm-kpi small { color:#7a8aa0; font-size:10px; text-transform:uppercase; letter-spacing:.10em; font-family:'JetBrains Mono',monospace; }
.no-public .tracking-mock .tm-kpi b { color:#fff; font-size:20px; font-weight:700; }
.no-public .tracking-mock .tm-kpi b span { font-size:11px; font-weight:400; color:#7a8aa0; margin-left:4px; }

/* Texto + lista a la derecha */
.no-public .tracking-section .tracking-text h2.section-title { margin-bottom:18px; }
.no-public .tracking-section .tracking-text p { color:#cfd6e2; font-size:16.5px; line-height:1.6; margin-bottom:28px; }
.no-public .tracking-list { list-style:none; padding:0; margin:0 0 22px; display:grid; gap:12px; }
.no-public .tracking-list li { position:relative; padding:14px 16px 14px 22px; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.06); border-radius:10px; }
.no-public .tracking-list li::before { content:''; position:absolute; top:8px; bottom:8px; left:6px; width:3px; border-radius:3px; background:#19b6c4; }
.no-public .tracking-list li.bar-pink::before { background:#e879a4; }
.no-public .tracking-list li.bar-red::before { background:#d94c4c; }
.no-public .tracking-list li.bar-cyan::before { background:#19b6c4; }
.no-public .tracking-list li.bar-purple::before { background:#9b6cf0; }
.no-public .tracking-list li b { display:block; color:#fff; font-size:15.5px; font-weight:600; margin-bottom:3px; letter-spacing:-.005em; }
.no-public .tracking-list li span { color:#a4b3c8; font-size:13.5px; line-height:1.5; }

.no-public .tracking-badge { display:inline-flex; align-items:center; gap:10px; padding:10px 18px; background:rgba(25,182,196,.10); border:1px solid rgba(25,182,196,.40); border-radius:30px; color:#a4ecef; font-size:14px; font-weight:500; margin-bottom:24px; }
.no-public .tracking-badge .tb-check { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:#19b6c4; color:#012444; font-size:12px; font-weight:800; }

.no-public .tracking-brand img { max-width:340px; width:100%; height:auto; opacity:.95; }

@media (max-width:960px) {
  .no-public section.np.tracking-section .tracking-grid { grid-template-columns:1fr; gap:36px; }
}

/* v2 — sección "Portal de clientes / proveedores" en /netoffice/transporte */
.no-public section.np#portales .section-head { margin-bottom:44px; }
.no-public .portales-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.no-public .portal-card { padding:36px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08); border-radius:16px; transition:transform .2s, border-color .2s, box-shadow .2s; }
.no-public .portal-card:hover { transform:translateY(-3px); border-color:rgba(25,182,196,.45); box-shadow:0 18px 38px -20px rgba(25,182,196,.35); }
.no-public .portal-card .portal-ic { display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:12px; background:linear-gradient(135deg, rgba(25,182,196,.20), rgba(25,182,196,.06)); border:1px solid rgba(25,182,196,.40); color:var(--cian); margin-bottom:22px; box-shadow:0 0 0 4px rgba(25,182,196,.06), 0 8px 24px -10px rgba(25,182,196,.6); }
.no-public .portal-card .portal-ic svg { width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .portal-card h3 { color:#fff; font-size:22px; font-weight:700; margin-bottom:16px; letter-spacing:-.01em; }
.no-public .portal-card ul { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.no-public .portal-card ul li { position:relative; padding:6px 0 6px 26px; color:#cfd6e2; font-size:15px; line-height:1.4; }
.no-public .portal-card ul li::before { content:'✓'; position:absolute; left:0; top:6px; color:var(--cian); font-weight:700; }
@media (max-width:780px) { .no-public .portales-grid { grid-template-columns:1fr; } }

/* v2 — sección eCMR (id="ecmr") en /app-driver, caja con fondo claro */
.no-public section.np#ecmr { padding-top:60px; padding-bottom:60px; }
.no-public .ecmr-box { background:linear-gradient(160deg, #f3f6fb 0%, #e8eef7 100%); border:1px solid #d8e1ec; border-radius:24px; padding:50px; box-shadow:0 30px 60px -28px rgba(13,52,84,.15); }
.no-public .ecmr-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:center; }

/* Visual: tablet + phone overlapping */
.no-public .ecmr-media { position:relative; min-height:420px; }
.no-public .ecmr-media .ecmr-tablet { position:absolute; left:0; top:50%; transform:translateY(-50%) rotate(-3deg); width:80%; max-width:420px; border-radius:18px; box-shadow:0 30px 60px -22px rgba(13,52,84,.40); }
.no-public .ecmr-media .ecmr-phone { position:absolute; right:0; top:50%; transform:translateY(-50%) translateY(20px) rotate(5deg); width:38%; max-width:200px; border-radius:18px; box-shadow:0 30px 60px -22px rgba(13,52,84,.45); z-index:2; }

/* Texto + cards a la derecha */
.no-public .ecmr-text h2.section-title { color:#0D3454; margin-bottom:18px; }
.no-public .ecmr-text p { color:#4a5b73; font-size:17px; line-height:1.6; margin-bottom:30px; }
.no-public .ecmr-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.no-public .ecmr-card { padding:22px 16px; background:#fff; border:1px solid #e4eaf2; border-radius:14px; text-align:center; box-shadow:0 8px 22px -14px rgba(13,52,84,.15); display:flex; flex-direction:column; align-items:center; gap:8px; }
.no-public .ecmr-card .ecmr-ic { width:48px; height:48px; border-radius:12px; background:#e3f0fc; color:#2170B3; display:inline-flex; align-items:center; justify-content:center; margin-bottom:6px; }
.no-public .ecmr-card .ecmr-ic svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .ecmr-card b { color:#0D3454; font-size:15px; font-weight:700; }
.no-public .ecmr-card span { color:#4a5b73; font-size:13px; line-height:1.45; }
@media (max-width:960px) {
  .no-public .ecmr-box { padding:32px; }
  .no-public .ecmr-grid { grid-template-columns:1fr; gap:32px; }
  .no-public .ecmr-cards { grid-template-columns:1fr; }
  .no-public .ecmr-media { min-height:360px; }
}

/* v2 — sección NetOffice Timer en /netoffice/personal */
.no-public section.np#nf-timer { padding-top:60px; padding-bottom:60px; }
.no-public .timer-box { background:linear-gradient(140deg, #2170B3 0%, #0D3454 55%, #0D3454 100%); border:1px solid rgba(255,255,255,.14); border-radius:24px; padding:50px; box-shadow:0 30px 60px -28px rgba(0,0,0,.40); }
.no-public .timer-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:54px; align-items:center; }
.no-public .timer-text .timer-logo { margin-bottom:20px; }
.no-public .timer-text .timer-logo img { max-height:54px; width:auto; }
.no-public .timer-text .eyebrow-line.orange { background:rgba(246,168,58,.14); border-color:rgba(246,168,58,.55); color:#f6a83a; margin-bottom:14px; }
.no-public .timer-text h2.section-title { color:#fff; margin-bottom:18px; }
.no-public .timer-text p { color:#dbe5f2; font-size:17.5px; line-height:1.6; margin-bottom:28px; }
.no-public .timer-text p strong { color:#fff; }
.no-public .timer-list { list-style:none; padding:0; margin:0; display:grid; gap:18px; }
.no-public .timer-list li { padding:14px 18px 14px 22px; position:relative; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); border-radius:10px; }
.no-public .timer-list li::before { content:''; position:absolute; top:8px; bottom:8px; left:6px; width:3px; border-radius:3px; background:#f6a83a; }
.no-public .timer-list li b { display:block; color:#fff; font-size:16px; font-weight:600; margin-bottom:3px; }
.no-public .timer-list li span { color:#cfdbe9; font-size:14.5px; line-height:1.5; }
.no-public .timer-media { display:flex; justify-content:center; }
.no-public .timer-media img { max-width:100%; max-height:580px; width:auto; height:auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.50)); }
@media (max-width:960px) {
  .no-public .timer-box { padding:32px; }
  .no-public .timer-grid { grid-template-columns:1fr; gap:32px; }
}

/* v2 — /netoffice/laso-sl — diseño corporativo LASO */

/* Split: logo LASO a la izquierda + cards 2x2 a la derecha */
.no-public section.np#laso-quienes .quienes-split { display:grid; grid-template-columns:.9fr 1.4fr; gap:60px; align-items:center; }
.no-public section.np#laso-quienes .quienes-cards { display:grid; grid-template-columns:1fr 1fr; gap:18px; order:2; }
.no-public section.np#laso-quienes .quienes-logo { display:flex; align-items:center; justify-content:center; order:1; }
.no-public section.np#laso-quienes .quienes-logo img { max-width:100%; max-height:280px; height:auto; width:auto; filter:drop-shadow(0 12px 30px rgba(25,182,196,.25)); }
@media (max-width:980px) {
  .no-public section.np#laso-quienes .quienes-split { grid-template-columns:1fr; gap:36px; }
  .no-public section.np#laso-quienes .quienes-cards { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .no-public section.np#laso-quienes .quienes-cards { grid-template-columns:1fr; }
}

/* Departamentos — grid 3 cols */
.no-public section.np#laso-profesionales .dpto-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.no-public .dpto-card { position:relative; padding:36px 28px 32px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.10); border-radius:18px; transition:transform .2s, border-color .2s; }
.no-public .dpto-card:hover { transform:translateY(-3px); border-color:rgba(25,182,196,.45); }
.no-public .dpto-card .dpto-num { position:absolute; top:18px; right:24px; color:rgba(25,182,196,.45); font-family:'JetBrains Mono', monospace; font-size:14px; font-weight:700; letter-spacing:.05em; }
.no-public .dpto-card .dpto-ic { width:54px; height:54px; border-radius:14px; background:rgba(25,182,196,.16); border:1px solid rgba(25,182,196,.40); color:#19b6c4; display:inline-flex; align-items:center; justify-content:center; margin-bottom:20px; }
.no-public .dpto-card .dpto-ic svg { width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .dpto-card h3 { color:#fff; font-size:21px; font-weight:700; margin-bottom:14px; letter-spacing:-.01em; }
.no-public .dpto-card p { color:#cfd6e2; font-size:14.5px; line-height:1.65; }
.no-public .dpto-card p strong { color:#fff; }
/* Texto ilegible detectado 2026-07-20: estas tarjetas viven en fondo blanco (override light-theme
   más abajo en el fichero) pero el párrafo seguía en gris muy claro pensado para fondo oscuro. */
.no-public .dpto-card p { color:#000000 !important; }

@media (max-width:1000px) { .no-public section.np#laso-profesionales .dpto-grid { grid-template-columns:1fr; } }

/* Otros servicios — grid 2x2 */
.no-public section.np#laso-servicios .serv-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.no-public .serv-card { padding:32px 28px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.10); border-radius:18px; display:flex; gap:22px; align-items:flex-start; transition:transform .2s, border-color .2s; }
.no-public .serv-card:hover { transform:translateY(-3px); border-color:rgba(25,182,196,.45); }
.no-public .serv-card .serv-ic { flex-shrink:0; width:54px; height:54px; border-radius:14px; background:rgba(25,182,196,.16); border:1px solid rgba(25,182,196,.40); color:#19b6c4; display:inline-flex; align-items:center; justify-content:center; }
.no-public .serv-card .serv-ic svg { width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .serv-card h3 { color:#fff; font-size:20px; font-weight:700; margin-bottom:8px; letter-spacing:-.01em; }
.no-public .serv-card p { color:#cfd6e2; font-size:14.5px; line-height:1.6; }

@media (max-width:780px) { .no-public section.np#laso-servicios .serv-grid { grid-template-columns:1fr; } }

/* Panel oscuro contenido para "Otros servicios" (2026-07-20) — .serv-card ya estaba pensada para
   fondo oscuro (fondo translúcido blanco, texto #cfd6e2), solo hacía falta volver a envolverla en uno. */
.no-public section.np#laso-servicios .laso-servicios-panel {
  background:linear-gradient(140deg, #2170B3 0%, #0D3454 55%, #0D3454 100%);
  border:1px solid rgba(255,255,255,.14); border-radius:24px;
  padding:40px 44px; margin-top:32px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.40);
}
.no-public section.np#laso-servicios .laso-servicios-panel .serv-grid { margin-top:0; }
.no-public section.np#laso-servicios .laso-servicios-panel .serv-card { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); box-shadow:none; }
.no-public section.np#laso-servicios .laso-servicios-panel .serv-card h3 { color:#ffffff; }
@media (max-width:680px) { .no-public section.np#laso-servicios .laso-servicios-panel { padding:28px 22px; } }

/* /netoffice/laso-sl — stats-row reutilizado como 3 frases sin número (2026-07-20) */
.no-public .laso-stats .stats-row { grid-template-columns:repeat(3,1fr); max-width:960px; margin:0 auto; }
.no-public .laso-stats .stat { display:flex; flex-direction:column; align-items:center; gap:16px; padding:30px 22px; }
.no-public .laso-stats .stat-ic {
  width:52px; height:52px; border-radius:14px;
  background:rgba(25,182,196,.12); border:1px solid rgba(25,182,196,.40); color:#19b6c4;
  display:flex; align-items:center; justify-content:center;
}
.no-public .laso-stats .stat-ic svg { width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .laso-stats .stat .v { font-size:18px; font-family:inherit; font-weight:700; letter-spacing:-.005em; color:#0D3454; }
@media (max-width:700px) { .no-public .laso-stats .stats-row { grid-template-columns:1fr; } }

/* /netoffice/laso-sl — párrafo de misión/visión, centrado, debajo del stats-row (2026-07-20) */
.no-public .laso-mission { max-width:820px; margin:0 auto; padding:4px 32px 44px; text-align:center; }
.no-public .laso-mission-text { font-size:18px; line-height:1.65; color:#3a4a61; }

/* /netoffice/laso-sl — hero: el párrafo .sub en BLANCO (Ana 2026-08-13; antes negro) */
.no-public .hero-page.laso-hero p.sub { color:#ffffff; }
/* laso-stats: el tema claro pone .stat blanca (#fff); en oscuro → tarjeta translúcida (texto .v blanco ya no se pierde) */
.no-public:has(.page-dark) .laso-stats .stat { background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.10); border-radius:16px; box-shadow:none; }

/* ── /power-bi (2026-07-20) ── */

/* Sección 1: los 3 informes de tráfico — vuelta al panel oscuro contenido original (Ana aclaró que
   el diseño que no le convencía era el de la sección con el ordenador, no esta). */
.no-public #power-bi-informes .pbi-panel {
  background:linear-gradient(140deg, #2170B3 0%, #0D3454 55%, #0D3454 100%);
  border:1px solid rgba(255,255,255,.14); border-radius:24px;
  padding:40px 44px; box-shadow:0 30px 60px -28px rgba(0,0,0,.40);
}
.no-public #power-bi-informes .pbi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.no-public #power-bi-informes .pbi-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:28px 26px; }
.no-public #power-bi-informes .pbi-card h3 { color:#ffffff; font-size:19px; font-weight:700; margin-bottom:10px; letter-spacing:-.01em; }
.no-public #power-bi-informes .pbi-card p { color:rgba(255,255,255,.78); font-size:14.5px; line-height:1.6; }
@media (max-width:900px) { .no-public #power-bi-informes .pbi-grid { grid-template-columns:1fr; } }
@media (max-width:680px) { .no-public #power-bi-informes .pbi-panel { padding:28px 22px; } }

/* Sección "Potencia la gestión..." (id="powerbi", reutiliza el componente de /netoffice) — variante
   propia .powerbi-solo para /power-bi: fondo azul sólido del menú (no el degradado navy original de
   este componente, que solo se usa en /netoffice) y el ordenador centrado con las 4 tarjetas alrededor
   en vez del layout de 2 columnas texto+media. No se toca la regla base .powerbi-* (sigue usándola
   /netoffice tal cual) — todo lo de abajo va scoped a .powerbi-solo. */
.no-public section.np#powerbi.powerbi-solo::before { background:#0D3454; }
.no-public section.np#powerbi.powerbi-solo .powerbi-text.powerbi-intro { text-align:center; max-width:760px; margin:0 auto 40px; }
.no-public section.np#powerbi.powerbi-solo .powerbi-surround {
  display:grid;
  grid-template-columns:260px 1fr 260px;
  grid-template-areas:
    "tl media tr"
    "bl media br";
  gap:24px; align-items:center;
  max-width:1300px; margin:0 auto 36px;
}
.no-public section.np#powerbi.powerbi-solo .pbs-tl { grid-area:tl; }
.no-public section.np#powerbi.powerbi-solo .pbs-tr { grid-area:tr; }
.no-public section.np#powerbi.powerbi-solo .pbs-bl { grid-area:bl; }
.no-public section.np#powerbi.powerbi-solo .pbs-br { grid-area:br; }
.no-public section.np#powerbi.powerbi-solo .powerbi-media { grid-area:media; display:flex; flex-direction:column; align-items:center; }
.no-public section.np#powerbi.powerbi-solo .powerbi-solo-cta { text-align:center; }
@media (max-width:1100px) {
  .no-public section.np#powerbi.powerbi-solo .powerbi-surround {
    grid-template-columns:1fr 1fr;
    grid-template-areas: "tl tr" "media media" "bl br";
  }
}
@media (max-width:640px) {
  .no-public section.np#powerbi.powerbi-solo .powerbi-surround {
    grid-template-columns:1fr;
    grid-template-areas: "tl" "tr" "media" "bl" "br";
  }
}

/* Panel 2: gestión contable (lista de capacidades financieras) */
.no-public #power-bi-contable .pbi-fin-panel {
  background:linear-gradient(140deg, #2170B3 0%, #0D3454 55%, #0D3454 100%);
  border:1px solid rgba(255,255,255,.14); border-radius:24px;
  padding:40px 44px; box-shadow:0 30px 60px -28px rgba(0,0,0,.40);
  max-width:900px; margin:0 auto;
}
.no-public #power-bi-contable .pbi-fin-list { list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.no-public #power-bi-contable .pbi-fin-list li { padding:18px 22px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:12px; }
.no-public #power-bi-contable .pbi-fin-list li b { display:block; color:#ffffff; font-size:16px; font-weight:700; margin-bottom:4px; }
.no-public #power-bi-contable .pbi-fin-list li span { color:rgba(255,255,255,.78); font-size:14.5px; line-height:1.5; }
@media (max-width:680px) { .no-public #power-bi-contable .pbi-fin-panel { padding:28px 22px; } }

/* Panel 3: beneficios reales (checklist de 2 columnas) */
.no-public #power-bi-beneficios .pbi-benefits-panel {
  background:linear-gradient(140deg, #2170B3 0%, #0D3454 55%, #0D3454 100%);
  border:1px solid rgba(255,255,255,.14); border-radius:24px;
  padding:40px 44px; box-shadow:0 30px 60px -28px rgba(0,0,0,.40);
  max-width:1000px; margin:0 auto;
}
.no-public #power-bi-beneficios .pbi-benefits-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; }
.no-public #power-bi-beneficios .pbi-benefits-list li { display:flex; align-items:flex-start; gap:14px; }
.no-public #power-bi-beneficios .pbi-benefits-list li svg { flex-shrink:0; width:22px; height:22px; stroke:#19b6c4; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; margin-top:2px; }
.no-public #power-bi-beneficios .pbi-benefits-list li span { color:#ffffff; font-size:16px; font-weight:600; line-height:1.5; }
@media (max-width:700px) {
  .no-public #power-bi-beneficios .pbi-benefits-list { grid-template-columns:1fr; }
  .no-public #power-bi-beneficios .pbi-benefits-panel { padding:28px 22px; }
}

/* Timeline vertical con tarjetas alternadas izq/der */
.no-public section.np#laso-trayectoria .laso-timeline { position:relative; max-width:1000px; margin:0 auto; padding:40px 0; }
.no-public .laso-timeline .lt-line { position:absolute; top:0; bottom:0; left:50%; width:2px; background:linear-gradient(180deg, transparent 0%, rgba(25,182,196,.6) 12%, rgba(25,182,196,.6) 88%, transparent 100%); transform:translateX(-50%); }
.no-public .laso-timeline .lt-item { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; margin-bottom:34px; align-items:center; }
.no-public .laso-timeline .lt-item:nth-child(odd) .lt-card { grid-column:1; margin-right:40px; text-align:right; }
.no-public .laso-timeline .lt-item:nth-child(odd) .lt-card .lt-year { right:auto; left:auto; align-self:flex-end; }
.no-public .laso-timeline .lt-item:nth-child(even) .lt-card { grid-column:2; margin-left:40px; }
.no-public .laso-timeline .lt-dot { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:18px; height:18px; border-radius:50%; background:#19b6c4; box-shadow:0 0 0 5px rgba(25,182,196,.18), 0 0 0 10px rgba(25,182,196,.06); z-index:2; }
.no-public .laso-timeline .lt-dot.lt-dot-future { background:#f6a83a; box-shadow:0 0 0 5px rgba(246,168,58,.20), 0 0 0 10px rgba(246,168,58,.08); }
.no-public .laso-timeline .lt-card { padding:22px 24px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.10); border-radius:14px; position:relative; }
.no-public .laso-timeline .lt-year { display:inline-block; padding:3px 12px; border-radius:30px; background:rgba(25,182,196,.14); border:1px solid rgba(25,182,196,.45); color:#19b6c4; font-family:'JetBrains Mono', monospace; font-size:12.5px; font-weight:700; letter-spacing:.05em; margin-bottom:8px; }
.no-public .laso-timeline .lt-year-future { background:rgba(246,168,58,.14); border-color:rgba(246,168,58,.50); color:#f6a83a; }
.no-public .laso-timeline .lt-card h4 { color:#fff; font-size:18px; font-weight:700; margin-bottom:6px; letter-spacing:-.01em; }
.no-public .laso-timeline .lt-card p { color:#cfd6e2; font-size:14px; line-height:1.5; }
.no-public .laso-timeline .lt-highlight .lt-card { background:linear-gradient(160deg, rgba(246,168,58,.12), rgba(246,168,58,.03)); border-color:rgba(246,168,58,.40); }

@media (max-width:780px) {
  .no-public .laso-timeline .lt-line { left:18px; }
  .no-public .laso-timeline .lt-item { grid-template-columns:1fr; }
  .no-public .laso-timeline .lt-item:nth-child(odd) .lt-card,
  .no-public .laso-timeline .lt-item:nth-child(even) .lt-card { grid-column:1; margin:0 0 0 50px; text-align:left; }
  .no-public .laso-timeline .lt-dot { left:18px; transform:translate(-50%,-50%); }
}

/* v2 — /netoffice/almacen — diseño logístico/warehouse */

.no-public .eyebrow-line.emerald { background:rgba(25,182,196,.12); border-color:rgba(25,182,196,.50); color:#19b6c4; }

/* Pipeline horizontal: 5 etapas conectadas por flechas */
.no-public section.np#almacen-pipeline .pipeline-track { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap:14px; align-items:stretch; }
.no-public .pipe-step { padding:24px 18px 22px; background:linear-gradient(180deg, rgba(25,182,196,.06), rgba(25,182,196,.02)); border:1px solid rgba(25,182,196,.30); border-radius:14px; position:relative; }
.no-public .pipe-step .pipe-stage { position:absolute; top:14px; right:16px; font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:700; color:#19b6c4; letter-spacing:.06em; opacity:.7; }
.no-public .pipe-step .pipe-ic { width:44px; height:44px; border-radius:12px; background:rgba(25,182,196,.18); border:1px solid rgba(25,182,196,.40); color:#19b6c4; display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; }
.no-public .pipe-step .pipe-ic svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .pipe-step h4 { color:#fff; font-size:17px; font-weight:700; margin-bottom:8px; letter-spacing:-.005em; }
.no-public .pipe-step p { color:#cfd6e2; font-size:13.5px; line-height:1.5; }
.no-public .pipe-arrow { display:inline-flex; align-items:center; justify-content:center; color:#19b6c4; opacity:.7; align-self:center; }
.no-public .pipe-arrow svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }

@media (max-width:1100px) {
  .no-public section.np#almacen-pipeline .pipeline-track { grid-template-columns:1fr 1fr; }
  .no-public .pipe-arrow { display:none; }
}
@media (max-width:600px)  { .no-public section.np#almacen-pipeline .pipeline-track { grid-template-columns:1fr; } }

/* Zonas — 3 columnas verticales con pill + lista de funciones */
.no-public section.np#almacen-zonas .zonas-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.no-public .zona-card { padding:32px 28px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.10); border-radius:18px; position:relative; }
.no-public .zona-card .zona-head { margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.10); }
.no-public .zona-card .zona-pill { display:inline-block; padding:4px 14px; background:rgba(25,182,196,.16); border:1px solid rgba(25,182,196,.45); color:#19b6c4; border-radius:30px; font-size:11px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; margin-bottom:14px; font-family:'JetBrains Mono', monospace; }
.no-public .zona-card .zona-head h3 { color:#fff; font-size:22px; font-weight:700; letter-spacing:-.01em; }
.no-public .zona-list { list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.no-public .zona-list li { padding-left:24px; position:relative; }
.no-public .zona-list li::before { content:''; position:absolute; left:0; top:8px; width:10px; height:10px; border:2px solid #19b6c4; border-radius:3px; }
.no-public .zona-list li b { display:block; color:#fff; font-size:15.5px; font-weight:600; margin-bottom:2px; }
.no-public .zona-list li span { color:#cfd6e2; font-size:13.5px; line-height:1.5; }

@media (max-width:900px) { .no-public section.np#almacen-zonas .zonas-grid { grid-template-columns:1fr; } }

/* Conexión con ERP — caja con núcleo central + 4 nodos satélite */
.no-public section.np#almacen-conexion { padding-top:40px; padding-bottom:60px; }
.no-public .conexion-box { background:linear-gradient(160deg, rgba(25,182,196,.08), rgba(25,182,196,.02)); border:2px solid rgba(25,182,196,.40); border-radius:24px; padding:50px; }
.no-public .conexion-head { text-align:center; margin-bottom:48px; max-width:780px; margin-left:auto; margin-right:auto; }
.no-public .conexion-head .eyebrow-line { margin-bottom:14px; }
.no-public .conexion-head h2 { color:#fff; margin-bottom:14px; }
.no-public .conexion-head p { color:#cfd6e2; font-size:16.5px; line-height:1.6; }

.no-public .conexion-net { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:880px; margin:0 auto; padding-top:60px; }
.no-public .conn-center { position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:120px; border-radius:50%; background:#19b6c4; color:#03261a; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; box-shadow:0 0 0 8px rgba(25,182,196,.18), 0 10px 30px -8px rgba(25,182,196,.5); z-index:2; }
.no-public .conn-center .cc-label { padding:0 8px; text-align:center; }
.no-public .conn-node { padding:24px 22px 22px; background:rgba(255,255,255,.05); border:1px solid rgba(25,182,196,.30); border-radius:14px; position:relative; }
.no-public .conn-node .cn-ic { width:38px; height:38px; border-radius:10px; background:rgba(25,182,196,.18); border:1px solid rgba(25,182,196,.40); color:#19b6c4; display:inline-flex; align-items:center; justify-content:center; margin-bottom:12px; }
.no-public .conn-node .cn-ic svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .conn-node b { display:block; color:#fff; font-size:17px; font-weight:700; margin-bottom:6px; }
.no-public .conn-node span { color:#cfd6e2; font-size:13.5px; line-height:1.5; }

@media (max-width:780px) {
  .no-public .conexion-box { padding:32px 22px; }
  .no-public .conexion-net { grid-template-columns:1fr; padding-top:140px; }
}

/* v2 — /netoffice/contabilidad — layouts únicos */

.no-public .eyebrow-line.amber { background:rgba(246,168,58,.12); border-color:rgba(246,168,58,.50); color:#f6a83a; }

/* Overview — grid 4 cols con 7 áreas + 1 bonus */
.no-public section.np#conta-overview .conta-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.no-public .conta-card { position:relative; padding:26px 22px 24px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.10); border-radius:14px; transition:transform .2s, border-color .2s; overflow:hidden; }
.no-public .conta-card:hover { transform:translateY(-3px); border-color:rgba(246,168,58,.55); }
.no-public .conta-card .cc-num { position:absolute; top:14px; right:18px; color:rgba(246,168,58,.45); font-family:'JetBrains Mono', monospace; font-size:14px; font-weight:700; letter-spacing:.05em; }
.no-public .conta-card .cc-ic { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:11px; background:rgba(246,168,58,.14); border:1px solid rgba(246,168,58,.40); color:#f6a83a; margin-bottom:16px; }
.no-public .conta-card .cc-ic svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .conta-card h3 { color:#fff; font-size:17px; font-weight:700; margin-bottom:8px; letter-spacing:-.005em; }
.no-public .conta-card p { color:#3a4a61; font-size:14.5px; line-height:1.55; }
/* Card bonus diferenciada */
.no-public .conta-card.conta-bonus { background-color:#ffffff; background-image:linear-gradient(160deg, rgba(246,168,58,.10), rgba(246,168,58,.02)); border-color:rgba(246,168,58,.40); }
.no-public .conta-card.conta-bonus .cc-num-bonus { font-size:22px; color:#f6a83a; opacity:.85; }

@media (max-width:1050px) { .no-public section.np#conta-overview .conta-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:580px)  { .no-public section.np#conta-overview .conta-grid { grid-template-columns:1fr; } }

/* Panel oscuro contenido (banner) para "Todo lo que cubre", sin oscurecer toda la sección */
.no-public section.np#conta-overview .conta-panel {
  background:linear-gradient(140deg, #2170B3 0%, #0D3454 55%, #0D3454 100%);
  border:1px solid rgba(255,255,255,.14); border-radius:24px;
  padding:40px 36px; margin-top:32px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.40);
}
.no-public section.np#conta-overview .conta-panel .conta-grid { margin-top:0; }
.no-public section.np#conta-overview .conta-panel .conta-card:not(.conta-bonus) { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); box-shadow:none; }
.no-public section.np#conta-overview .conta-panel .conta-card:not(.conta-bonus) h3 { color:#ffffff; }
.no-public section.np#conta-overview .conta-panel .conta-card:not(.conta-bonus) p { color:rgba(255,255,255,.75); }
@media (max-width:680px) { .no-public section.np#conta-overview .conta-panel { padding:28px 22px; } }

/* Cumplimiento normativo — caja destacada */
.no-public section.np#cumplimiento { padding-top:60px; padding-bottom:60px; }
.no-public .cumplimiento-box { background:linear-gradient(140deg, rgba(246,168,58,.10) 0%, rgba(246,168,58,.04) 55%, rgba(246,168,58,.02) 100%); border:2px solid rgba(246,168,58,.50); border-radius:24px; padding:50px; }
.no-public .cumplimiento-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.no-public .cump-text h2.section-title { color:#fff; margin-bottom:18px; }
.no-public .cump-text p { color:#dbe5f2; font-size:16.5px; line-height:1.6; margin-bottom:24px; }
.no-public .cump-list { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.no-public .cump-list li { padding:14px 18px 14px 22px; position:relative; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:10px; }
.no-public .cump-list li::before { content:''; position:absolute; top:8px; bottom:8px; left:6px; width:3px; border-radius:3px; background:#f6a83a; }
.no-public .cump-list li b { display:block; color:#fff; font-size:15.5px; font-weight:700; margin-bottom:2px; }
.no-public .cump-list li span { color:#cfdbe9; font-size:14px; line-height:1.5; }

.no-public .cump-badges { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.no-public .cb-tile { padding:24px 18px; min-height:140px; background:rgba(255,255,255,.05); border:1px solid rgba(246,168,58,.40); border-radius:14px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; transition:transform .2s; }
.no-public .cb-tile:hover { transform:translateY(-3px); }
.no-public .cb-tile .cb-icon { font-size:30px; line-height:1; }
.no-public .cb-tile .cb-logo { max-height:48px; max-width:140px; width:auto; height:auto; object-fit:contain; }
.no-public .cb-tile .cb-text { color:#fff; font-size:20px; font-weight:700; letter-spacing:-.005em; }
.no-public .cb-tile b { color:#fff; font-size:17px; font-weight:700; }
.no-public .cb-tile .cb-st { display:inline-block; padding:3px 10px; border-radius:30px; background:rgba(25,182,196,.18); border:1px solid rgba(25,182,196,.45); color:#52d199; font-size:11px; font-weight:600; letter-spacing:.04em; }

@media (max-width:900px) {
  .no-public .cumplimiento-box { padding:32px; }
  .no-public .cumplimiento-grid { grid-template-columns:1fr; gap:32px; }
}

/* v2 — /netoffice/taller — layouts únicos para este módulo */

/* Chip coral (modulo Taller) */
.no-public .eyebrow-line.coral { background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.50); color:#f87171; }

/* Sección razones — 3 cards horizontales con número grande */
.no-public section.np#taller-razones .razones-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.no-public .razon-card { padding:36px 30px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.10); border-radius:18px; position:relative; }
.no-public .razon-card .razon-num { font-family:'JetBrains Mono', monospace; font-size:48px; font-weight:800; color:#f87171; line-height:1; margin-bottom:18px; opacity:.85; }
.no-public .razon-card h3 { color:#fff; font-size:20px; font-weight:700; margin-bottom:10px; letter-spacing:-.01em; }
.no-public .razon-card p { color:#cfd6e2; font-size:15px; line-height:1.55; }
@media (max-width:900px) { .no-public section.np#taller-razones .razones-grid { grid-template-columns:1fr; } }

/* Panel oscuro contenido (banner) para destacar "por qué importa", sin oscurecer toda la sección */
.no-public section.np#taller-razones .razones-panel {
  background:linear-gradient(140deg, #2170B3 0%, #0D3454 55%, #0D3454 100%);
  border:1px solid rgba(255,255,255,.14); border-radius:24px;
  padding:40px 36px; margin-top:32px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.40);
}
.no-public section.np#taller-razones .razones-panel .razones-grid { margin-top:0; }
.no-public section.np#taller-razones .razones-panel .razon-card { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); box-shadow:none; }
.no-public section.np#taller-razones .razones-panel .razon-card h3 { color:#ffffff; }
.no-public section.np#taller-razones .razones-panel .razon-card p { color:rgba(255,255,255,.75) !important; }
@media (max-width:680px) { .no-public section.np#taller-razones .razones-panel { padding:28px 22px; } }

/* Flujo del taller — 4 pasos horizontales con número y línea conectora */
.no-public section.np#taller-flujo .flujo-track { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; padding-top:20px; }
.no-public .flujo-step { padding:24px 18px 0; position:relative; }
.no-public .flujo-step .fs-num { width:48px; height:48px; border-radius:50%; background:#f87171; color:#1a0a0a; display:inline-flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; box-shadow:0 0 0 6px rgba(248,113,113,.12); margin-bottom:14px; position:relative; z-index:2; }
.no-public .flujo-step .fs-line { position:absolute; top:48px; left:48px; right:-12px; height:2px; background:linear-gradient(90deg, rgba(248,113,113,.5), rgba(248,113,113,.1)); z-index:1; }
.no-public .flujo-step .fs-line.last { display:none; }
.no-public .flujo-step h4 { color:#fff; font-size:17px; font-weight:700; margin-bottom:10px; letter-spacing:-.005em; }
.no-public .flujo-step p { color:#cfd6e2; font-size:17px; line-height:1.55; }
@media (max-width:900px) {
  .no-public section.np#taller-flujo .flujo-track { grid-template-columns:1fr; }
  .no-public .flujo-step .fs-line { display:none; }
}

/* Funcionalidades destacadas — bloques alternados */
.no-public section.np#taller-features .feat-row { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:50px 0; border-top:1px solid var(--line); }
.no-public section.np#taller-features .feat-row:first-of-type { border-top:none; }
.no-public section.np#taller-features .feat-row.reverse .feat-text { order:2; }
.no-public .feat-text .feat-tag { display:inline-block; padding:5px 14px; border-radius:30px; background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.50); color:#f87171; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; margin-bottom:16px; }
.no-public .feat-text h3 { color:#fff; font-size:30px; font-weight:700; margin-bottom:14px; letter-spacing:-.015em; line-height:1.15; }
.no-public .feat-text p { color:#cfd6e2; font-size:16px; line-height:1.6; margin-bottom:18px; }
.no-public .feat-text ul { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.no-public .feat-text ul li { position:relative; padding:4px 0 4px 24px; color:#cfd6e2; font-size:14.5px; }
.no-public .feat-text ul li::before { content:'✓'; position:absolute; left:0; top:4px; color:#f87171; font-weight:700; }

/* Mock cards de funcionalidades */
.no-public .feat-mock { display:flex; justify-content:center; }
.no-public .mock-card { width:100%; max-width:440px; background:linear-gradient(165deg, #0e1a35, #081225); border:1px solid var(--line); border-radius:14px; padding:22px; box-shadow:0 30px 60px -22px rgba(0,0,0,.55); font-family:'JetBrains Mono', monospace; }
.no-public .mock-card .mock-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.no-public .mock-card .mock-head b { color:#fff; font-size:14px; font-weight:600; letter-spacing:-.005em; }
.no-public .mock-card .mock-head span { color:#7a8aa0; font-size:11px; text-transform:uppercase; letter-spacing:.10em; }
/* Próximas revisiones */
.no-public .mock-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.no-public .mock-list li { display:flex; align-items:center; gap:10px; padding:8px 10px; background:rgba(255,255,255,.04); border-radius:8px; font-size:12.5px; color:#cfd6e2; }
.no-public .mock-list li b { margin-left:auto; color:#f87171; font-size:11.5px; font-weight:600; }
.no-public .mock-pill { display:inline-block; padding:2px 8px; background:rgba(248,113,113,.18); border:1px solid rgba(248,113,113,.40); color:#f87171; border-radius:5px; font-size:10.5px; font-weight:600; letter-spacing:.04em; flex-shrink:0; }
/* Stock */
.no-public .mock-stock { display:grid; gap:11px; }
.no-public .ms-row { display:grid; grid-template-columns:1fr 1.4fr auto; align-items:center; gap:12px; font-size:12.5px; color:#cfd6e2; }
.no-public .ms-row b { color:#fff; font-size:12px; font-weight:600; }
.no-public .ms-row.low b { color:#f87171; }
.no-public .ms-bar { height:6px; background:rgba(255,255,255,.06); border-radius:3px; overflow:hidden; }
.no-public .ms-bar i { display:block; height:100%; background:#19b6c4; border-radius:3px; }
/* Coste por vehículo */
.no-public .mock-cost { display:grid; gap:8px; }
.no-public .mc-row { display:flex; justify-content:space-between; padding:6px 10px; background:rgba(255,255,255,.03); border-radius:6px; font-size:12.5px; color:#cfd6e2; }
.no-public .mc-row b { color:#fff; font-weight:600; }
.no-public .mc-row.mc-warn { background:rgba(248,113,113,.10); border:1px solid rgba(248,113,113,.30); }
.no-public .mc-row.mc-warn b { color:#f87171; }
.no-public .mock-foot { display:flex; justify-content:space-between; padding:10px 12px 0; margin-top:8px; border-top:1px solid var(--line); font-size:13px; color:#cfd6e2; }
.no-public .mock-foot b { color:#fff; font-weight:700; }

@media (max-width:900px) {
  .no-public section.np#taller-features .feat-row { grid-template-columns:1fr; gap:30px; padding:32px 0; }
  .no-public section.np#taller-features .feat-row.reverse .feat-text { order:0; }
}

/* v2 — caja "Conecta oficina y conductor" (driver-box) en /netoffice/transporte */
.no-public .driver-box-section { padding-top:60px; padding-bottom:60px; }
.no-public .driver-box { background:transparent; border:3px solid #0D3454; border-radius:24px; padding:50px; box-shadow:none; }
.no-public .driver-box-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:54px; align-items:center; }
.no-public .driver-box-media { position:relative; min-height:480px; }
.no-public .driver-box-media .driver-box-main { position:absolute; left:0; top:50%; transform:translateY(-50%) rotate(-3deg); width:78%; max-width:380px; border-radius:28px; filter:drop-shadow(0 30px 60px rgba(0,0,0,.55)); }
.no-public .driver-box-media .driver-box-aux { position:absolute; right:0; top:50%; transform:translate(0,-50%) translateY(20px) rotate(5deg); width:44%; max-width:200px; border-radius:24px; filter:drop-shadow(0 28px 50px rgba(0,0,0,.65)); z-index:2; }
.no-public .driver-box-text .eyebrow-line { margin-bottom:18px; font-size:14px; }
.no-public .driver-box-text h2.section-title { color:#fff; margin-bottom:18px; }
.no-public .driver-box-text p { color:#dbe5f2; font-size:19px; line-height:1.6; margin-bottom:34px; }
.no-public .driver-box-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:24px 36px; }
.no-public .driver-box-list li { display:flex; align-items:flex-start; gap:16px; color:#fff; font-size:17px; line-height:1.45; font-weight:500; }
.no-public .driver-box-list li .dbl-ic { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:11px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); color:#f59e0b; flex-shrink:0; }
.no-public .driver-box-list li .dbl-ic svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:960px) {
  .no-public .driver-box { padding:32px; }
  .no-public .driver-box-grid { grid-template-columns:1fr; gap:32px; }
  .no-public .driver-box-list { grid-template-columns:1fr; }
  .no-public .driver-box-media { min-height:380px; }
}

/* v2 — Herramientas de inteligencia (Power BI + OCR) en /netoffice */
.no-public section.np#herramientas-ia .eyebrow-line .eb-chip-ic { margin-right:4px; }
.no-public .herramientas-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.no-public .tool-card { padding:36px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.10); border-radius:18px; }
.no-public .tool-card .tool-head { display:flex; align-items:flex-start; gap:18px; margin-bottom:18px; }
.no-public .tool-card .tool-ic { flex-shrink:0; width:54px; height:54px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; }
.no-public .tool-card .tool-ic svg { width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .tool-card .tool-titlewrap { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.no-public .tool-card h3 { color:#fff; font-size:26px; font-weight:700; margin:0; letter-spacing:-.01em; }
.no-public .tool-card .tool-tag { padding:5px 14px; border-radius:30px; background:rgba(246,168,58,.18); border:1px solid rgba(246,168,58,.55); color:#f6a83a; font-size:13.5px; font-weight:600; letter-spacing:.03em; }
.no-public .tool-card .tool-tag.tool-tag-cian { background:rgba(25,182,196,.18); border-color:rgba(25,182,196,.55); color:#19b6c4; }
.no-public .tool-card p { color:#cfd6e2; font-size:17px; line-height:1.6; margin-bottom:26px; }
.no-public .tool-card ul { list-style:none; padding:0; margin:0 0 26px; display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; }
.no-public .tool-card ul li { color:#e9edf3; font-size:16px; line-height:1.45; display:flex; align-items:center; gap:10px; font-weight:500; }
.no-public .tool-card ul li .tool-check { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; font-size:18px; }
.no-public .tool-card .tool-more { display:inline-flex; align-items:center; gap:6px; color:#f6a83a; font-size:16px; font-weight:600; text-decoration:none; }
.no-public .tool-card .tool-more.tool-more-cian { color:#19b6c4; }
/* Colores específicos del icono cuadrado de cada tarjeta */
.no-public .tool-card.tool-amber .tool-ic { background:#f6a83a; color:#0c2447; }
.no-public .tool-card.tool-amber ul li .tool-check { color:#f6a83a; }
.no-public .tool-card.tool-cian .tool-ic { background:#19b6c4; color:#0c2447; }
.no-public .tool-card.tool-cian ul li .tool-check { color:#19b6c4; }
.no-public .tool-card.tool-cian .tool-tag { background:rgba(25,182,196,.18); border-color:rgba(25,182,196,.55); color:#19b6c4; }

@media (max-width:900px) {
  .no-public .herramientas-grid { grid-template-columns:1fr; }
  .no-public .tool-card ul { grid-template-columns:1fr; }
}

/* v2 — Módulos principales en /netoffice — grid 2-arriba 3-abajo */
.no-public section.np#modulos-principales .modulos-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:22px; }
.no-public .modulo-card { grid-column:span 2; position:relative; padding:32px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08); border-radius:18px; text-decoration:none; color:inherit; transition:transform .2s, border-color .2s, box-shadow .2s; }
.no-public .modulo-card.mc-wide { grid-column:span 3; }
.no-public .modulo-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--mc, var(--cian)); border-radius:18px 18px 0 0; }
.no-public .modulo-card:hover { transform:translateY(-4px); border-color:var(--mc, var(--cian)); box-shadow:0 18px 38px -22px rgba(0,0,0,.55); }
.no-public .modulo-card .mc-tag { position:absolute; top:18px; right:18px; padding:5px 12px; border-radius:30px; background:color-mix(in srgb, var(--mc, var(--cian)) 18%, transparent); border:1px solid color-mix(in srgb, var(--mc, var(--cian)) 50%, transparent); color:var(--mc, var(--cian)); font-size:11.5px; font-weight:600; letter-spacing:.05em; }
.no-public .modulo-card .mc-ic { width:48px; height:48px; border-radius:12px; background:color-mix(in srgb, var(--mc, var(--cian)) 20%, transparent); color:var(--mc, var(--cian)); display:inline-flex; align-items:center; justify-content:center; margin-bottom:18px; border:1px solid color-mix(in srgb, var(--mc, var(--cian)) 30%, transparent); }
.no-public .modulo-card .mc-ic svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .modulo-card h3 { color:#fff; font-size:22px; font-weight:700; margin-bottom:10px; letter-spacing:-.01em; }
.no-public .modulo-card p { color:#cfd6e2; font-size:14.5px; line-height:1.55; margin-bottom:18px; }
.no-public .modulo-card ul { list-style:none; padding:0; margin:0 0 18px; display:grid; gap:8px; }
.no-public .modulo-card ul li { position:relative; padding:2px 0 2px 22px; color:#cfd6e2; font-size:13.5px; line-height:1.5; }
.no-public .modulo-card ul li::before { content:'✓'; position:absolute; left:0; top:2px; color:var(--mc, var(--cian)); font-weight:700; }
.no-public .modulo-card .mc-more { display:inline-flex; align-items:center; gap:6px; color:var(--mc, var(--cian)); font-size:13.5px; font-weight:600; }
/* Colores por módulo */
.no-public .modulo-card.mc-cian  { --mc:#19b6c4; }
.no-public .modulo-card.mc-amber { --mc:#f6a83a; }
.no-public .modulo-card.mc-blue  { --mc:#2f78cb; }
.no-public .modulo-card.mc-lime  { --mc:#f6a83a; }

@media (max-width:980px) {
  .no-public section.np#modulos-principales .modulos-grid { grid-template-columns:1fr; }
  .no-public .modulo-card, .no-public .modulo-card.mc-wide { grid-column:auto; }
}

/* Variante centrada del rich-content (sin media al lado) */
.no-public .rich-content.rich-centered { max-width:none; width:100%; margin:0; text-align:left; }
.no-public .rich-content.rich-centered h2 { font-size:34px; }
.no-public section.std.std-tight { padding-top:20px; padding-bottom:70px; }
.no-public section.std.std-tight + section.std.std-tight { padding-top:0; }
.no-public section.std.std-tight .features-row { padding-top:24px; border-top:none; }

/* v2 — Hero de /netoffice (split: título + portátil) */
.no-public section.netoffice-hero { padding-bottom:40px; }
.no-public .netoffice-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.no-public .netoffice-hero-text h1 { font-size:clamp(38px,4.4vw,60px); line-height:1.05; letter-spacing:-.02em; }
.no-public .netoffice-hero-media { display:flex; justify-content:center; }
.no-public .netoffice-hero-media .laptop-frame { width:100%; max-width:640px; }
.no-public .netoffice-hero-media .laptop-screen { background:#0a0f1c; border:14px solid #1a2235; border-bottom-width:18px; border-radius:14px 14px 6px 6px; box-shadow:0 30px 60px -22px rgba(0,0,0,.65); overflow:hidden; position:relative; }
.no-public .netoffice-hero-media .laptop-screen::before { content:''; position:absolute; top:5px; left:50%; transform:translateX(-50%); width:46px; height:5px; background:#2a3550; border-radius:0 0 6px 6px; z-index:2; }
.no-public .netoffice-hero-media .laptop-screen img { display:block; width:100%; height:auto; }
.no-public .netoffice-hero-media .laptop-base { position:relative; left:-3%; width:106%; height:14px; background:linear-gradient(180deg,#cdd3dd 0%,#9aa3b1 55%,#7b8492 100%); border-radius:0 0 14px 14px; clip-path:polygon(4% 0,96% 0,100% 100%,0 100%); box-shadow:0 10px 16px -7px rgba(0,0,0,.55); margin-top:-2px; }
.no-public .netoffice-hero-media .laptop-base::after { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:80px; height:4px; background:#7b8492; border-radius:0 0 6px 6px; }
@media (max-width:960px) {
  .no-public .netoffice-hero-grid { grid-template-columns:1fr; gap:32px; }
}

/* v2 — sección Power BI en /netoffice */
.no-public section.np#powerbi { isolation:isolate; padding-top:80px; padding-bottom:80px; }
.no-public section.np#powerbi > * { position:relative; z-index:1; }
.no-public section.np#powerbi::before {
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; background:linear-gradient(160deg, #0c2447 0%, #0f2f5d 55%, #112c4f 100%); z-index:0;
}
.no-public section.np#powerbi .powerbi-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:54px; align-items:center; }
.no-public section.np#powerbi .powerbi-text .eyebrow-line.orange { background:rgba(246,168,58,.12); border-color:rgba(246,168,58,.45); color:#f6a83a; }
.no-public section.np#powerbi .powerbi-text h2.section-title { font-size:clamp(34px,3.6vw,52px); line-height:1.05; margin-bottom:20px; }
.no-public section.np#powerbi .powerbi-text p { color:#cfd6e2; font-size:17px; line-height:1.6; margin-bottom:30px; }
.no-public section.np#powerbi .powerbi-stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:28px; }
.no-public section.np#powerbi .pb-stat { padding:20px 22px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; }
.no-public section.np#powerbi .pb-stat b { display:block; color:#f6a83a; font-size:26px; font-weight:700; line-height:1; margin-bottom:8px; letter-spacing:-.01em; }
.no-public section.np#powerbi .pb-stat span { color:#cfd6e2; font-size:13.5px; line-height:1.4; }
.no-public section.np#powerbi .btn.btn-cta.btn-orange { background:linear-gradient(135deg, #f6a83a, #d18620); color:#fff; box-shadow:0 8px 24px -8px rgba(246,168,58,.55); }
.no-public section.np#powerbi .btn.btn-cta.btn-orange:hover { background:linear-gradient(135deg, #f6a83a, #d18620); }
.no-public section.np#powerbi .powerbi-media { position:relative; display:flex; flex-direction:column; align-items:center; }

/* Laptop frame */
.no-public section.np#powerbi .laptop-frame { position:relative; width:100%; max-width:680px; }
.no-public section.np#powerbi .laptop-screen { position:relative; background:#0a0f1c; border:14px solid #1a2235; border-bottom-width:18px; border-radius:14px 14px 6px 6px; box-shadow:0 30px 60px -22px rgba(0,0,0,.65); overflow:hidden; }
.no-public section.np#powerbi .laptop-screen::before { content:''; position:absolute; top:5px; left:50%; transform:translateX(-50%); width:46px; height:5px; background:#2a3550; border-radius:0 0 6px 6px; z-index:2; }
.no-public section.np#powerbi .laptop-screen img { display:block; width:100%; height:auto; border-radius:2px; }
.no-public section.np#powerbi .laptop-base { position:relative; left:-3%; width:106%; height:14px; background:linear-gradient(180deg,#cdd3dd 0%,#9aa3b1 55%,#7b8492 100%); border-radius:0 0 14px 14px; clip-path:polygon(4% 0,96% 0,100% 100%,0 100%); box-shadow:0 10px 16px -7px rgba(0,0,0,.55); margin-top:-2px; }
.no-public section.np#powerbi .laptop-base::after { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:80px; height:4px; background:#7b8492; border-radius:0 0 6px 6px; }
.no-public section.np#powerbi .powerbi-pill { position:absolute; top:-18px; left:18px; z-index:3; display:inline-flex; align-items:center; gap:12px; padding:10px 18px; background:#0c2447; border:1px solid rgba(246,168,58,.55); border-radius:14px; color:#fff; box-shadow:0 14px 32px -8px rgba(0,0,0,.6); }
.no-public section.np#powerbi .powerbi-pill .pb-bolt { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; background:#f6a83a; color:#0c2447; font-size:18px; font-weight:800; }
.no-public section.np#powerbi .powerbi-pill small { display:block; font-size:11px; color:#f6a83a; text-transform:uppercase; letter-spacing:.10em; font-weight:700; line-height:1.2; }
.no-public section.np#powerbi .powerbi-pill b { display:block; font-size:14.5px; color:#fff; font-weight:600; line-height:1.25; margin-top:2px; }
@media (max-width:960px) {
  .no-public section.np#powerbi .powerbi-grid { grid-template-columns:1fr; gap:36px; }
  .no-public section.np#powerbi .powerbi-stats { grid-template-columns:1fr; }
}

/* v2 — sección Contacto final (id="contacto-final") banda oscura, formulario intacto (fondo propio) */
.no-public section.np#contacto-final { isolation:isolate; position:relative; z-index:1; }
.no-public section.np#contacto-final > * { position:relative; z-index:1; }
.no-public section.np#contacto-final::before {
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; background:#0D3454; z-index:0;
}
.no-public section.np#contacto-final .contacto-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:start; max-width:1200px; margin:0 auto; }
.no-public section.np#contacto-final .contacto-chip { display:inline-block; padding:6px 16px; border-radius:20px; background:rgba(25,182,196,.12); border:1px solid rgba(25,182,196,.45); color:var(--cian); font-size:12px; font-weight:600; letter-spacing:.10em; text-transform:uppercase; font-family:'JetBrains Mono',monospace; margin-bottom:22px; }
.no-public section.np#contacto-final .contacto-title { color:#ffffff; font-size:clamp(40px,4vw,54px); letter-spacing:-.02em; line-height:1.1; margin-bottom:20px; }
.no-public section.np#contacto-final .contacto-text { color:rgba(255,255,255,.75); font-size:18.5px; line-height:1.6; margin-bottom:40px; max-width:520px; }
.no-public section.np#contacto-final .contacto-data { list-style:none; padding:0; margin:0; display:grid; gap:22px; }
.no-public section.np#contacto-final .contacto-data li { display:flex; align-items:center; gap:18px; }
.no-public section.np#contacto-final .contacto-ic { width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg, rgba(25,182,196,.18), rgba(25,182,196,.06)); border:1px solid rgba(25,182,196,.35); color:var(--cian); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 0 0 4px rgba(25,182,196,.06), 0 8px 24px -10px rgba(25,182,196,.6); }
.no-public section.np#contacto-final .contacto-ic svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public section.np#contacto-final .contacto-data-text { display:flex; flex-direction:column; gap:3px; }
.no-public section.np#contacto-final .contacto-data-text small { font-size:14px; color:#9fb3cc; text-transform:uppercase; letter-spacing:.10em; font-weight:600; }
.no-public section.np#contacto-final .contacto-data-text b { color:#ffffff; font-size:18px; font-weight:600; }

/* Formulario */
.no-public section.np#contacto-final .contacto-form-wrap { background:#eef2f7; border:1px solid #d8e1ec; border-radius:18px; padding:34px; }
.no-public section.np#contacto-final .contacto-form h3 { color:#0D3454; font-size:22px; margin-bottom:22px; letter-spacing:-.005em; }
.no-public section.np#contacto-final .cf-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; margin-bottom:22px; }
.no-public section.np#contacto-final .cf-field { display:flex; flex-direction:column; gap:6px; }
.no-public section.np#contacto-final .cf-field.full { grid-column:1/-1; }
.no-public section.np#contacto-final .cf-field label { font-size:13px; color:#0D3454; text-transform:uppercase; letter-spacing:.10em; font-weight:600; }
.no-public section.np#contacto-final .cf-field input,
.no-public section.np#contacto-final .cf-field select,
.no-public section.np#contacto-final .cf-field textarea {
  width:100%; padding:12px 14px; border-radius:8px; border:1px solid #cdd6e2;
  background:#fff; color:#0D3454; font-size:16px; font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
  box-sizing:border-box;
}
.no-public section.np#contacto-final .cf-field textarea { resize:vertical; min-height:96px; }
.no-public section.np#contacto-final .cf-field input::placeholder,
.no-public section.np#contacto-final .cf-field textarea::placeholder { color:#9aa6b5; }
.no-public section.np#contacto-final .cf-field input:focus,
.no-public section.np#contacto-final .cf-field select:focus,
.no-public section.np#contacto-final .cf-field textarea:focus {
  outline:none; border-color:#2170b3; box-shadow:0 0 0 3px rgba(33,112,179,.15);
}
.no-public section.np#contacto-final .cf-submit {
  width:100%; padding:14px 18px; border:none; border-radius:9px;
  background:#2170B3; color:#fff; font-size:16.5px; font-weight:600;
  cursor:pointer; transition:background .15s, transform .15s;
  font-family:inherit;
}
.no-public section.np#contacto-final .cf-submit:hover { background:#0D3454; transform:translateY(-1px); }
.no-public section.np#contacto-final .cf-disclaimer { text-align:center; color:#52627a; font-size:14px; margin-top:14px; }
.no-public section.np#contacto-final .cf-disclaimer a { color:#2170b3; text-decoration:underline; }
@media (max-width:900px) {
  .no-public section.np#contacto-final .contacto-grid { grid-template-columns:1fr; gap:36px; }
  .no-public section.np#contacto-final .cf-grid { grid-template-columns:1fr; }
}

/* v3 — sección «Por qué y para quién» (id="why") fusionada, fondo azul oscuro */
.no-public section.np#why { isolation:isolate; padding:90px 32px; }
.no-public section.np#why > * { position:relative; z-index:1; }
.no-public section.np#why::before {
  content:'';
  position:absolute;
  top:0; bottom:0;
  left:50%; transform:translateX(-50%);
  width:100vw;
  background:#0D3454;
  z-index:0;
}
.no-public section.np#why h2.section-title { color:#ffffff; }
.no-public section.np#why .section-head p { color:rgba(255,255,255,.75); }
.no-public section.np#why .eyebrow-line { background:transparent; border:1px solid rgba(255,255,255,.45); color:#19b6c4; }
/* 4 diferenciadores (.why-pillars) sobre fondo oscuro */
.no-public section.np#why .why-pillars { border-top:1px solid rgba(255,255,255,.16); border-bottom:1px solid rgba(255,255,255,.16); }
.no-public section.np#why .why-pillar { border-left:1px solid rgba(255,255,255,.16); }
.no-public section.np#why .why-pillar:first-child { border-left:none; }
.no-public section.np#why .why-pillar:hover { background:rgba(255,255,255,.04); }
.no-public section.np#why .why-pillar .wp-ic { color:#19b6c4; }
.no-public section.np#why .why-pillar h3 { color:#ffffff; }
.no-public section.np#why .why-pillar p { color:rgba(255,255,255,.78); }
@media (max-width:980px){ .no-public section.np#why .why-pillar:nth-child(3) { border-left:none; } }
@media (max-width:560px){ .no-public section.np#why .why-pillar { border-left:none; border-top:1px solid rgba(255,255,255,.14); } .no-public section.np#why .why-pillar:first-child { border-top:none; } }

/* Variante "círculos" para .why-pillars (2026-07-20) — a petición de Ana, para que se vea distinto
   al nuevo diseño sin caja de "Modalidades de transporte" justo debajo. Sustituye las líneas
   verticales por icono en círculo grande, centrado, sin número. */
.no-public section.np#why .why-pillars.why-circles { border-top:none; border-bottom:none; gap:8px; }
.no-public section.np#why .why-pillars.why-circles .why-pillar {
  border-left:none; align-items:center; text-align:center; padding:12px 20px; transition:transform .2s;
}
.no-public section.np#why .why-pillars.why-circles .why-pillar:hover { background:none; transform:translateY(-4px); }
.no-public section.np#why .why-pillars.why-circles .why-pillar .wp-num { display:none; }
.no-public section.np#why .why-pillars.why-circles .why-pillar .wp-ic {
  width:92px; height:92px; border-radius:50%;
  background:rgba(25,182,196,.12); border:2px solid rgba(25,182,196,.45);
  display:flex; align-items:center; justify-content:center; margin-bottom:10px;
  transition:border-color .2s;
}
.no-public section.np#why .why-pillars.why-circles .why-pillar:hover .wp-ic { border-color:#19b6c4; }
.no-public section.np#why .why-pillars.why-circles .why-pillar .wp-ic svg { width:38px; height:38px; }
@media (max-width:980px){ .no-public section.np#why .why-pillars.why-circles .why-pillar:nth-child(3) { border-left:none; } }
@media (max-width:560px){ .no-public section.np#why .why-pillars.why-circles .why-pillar { border-top:none; } }

/* Home — bloque "why-circles" reubicado tras el hero-intro, antes de #modulos (2026-08-11, petición Ana).
   Replica el look oscuro + círculos que tenía dentro de #why, ahora que vive en su propia banda.
   Banda oscura full-bleed #0D3454 (igual que hero-intro-band y #modulos) para que quede continuo. */
.no-public section.np.why-band { position:relative; isolation:isolate; padding:24px 32px 32px; }
.no-public section.np.why-band > * { position:relative; z-index:1; }
.no-public section.np.why-band::before {
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; background:#0D3454; z-index:0;
}
.no-public section.np.why-band .why-pillars.why-circles { margin-top:0; border-top:none; border-bottom:none; gap:8px; }
.no-public section.np.why-band .why-pillar { border-left:none; align-items:center; text-align:center; padding:12px 20px; transition:transform .2s; }
.no-public section.np.why-band .why-pillar:hover { background:none; transform:translateY(-4px); }
.no-public section.np.why-band .why-pillar .wp-num { display:none; }
.no-public section.np.why-band .why-pillar .wp-ic {
  width:92px; height:92px; border-radius:50%;
  background:rgba(25,182,196,.12); border:2px solid rgba(25,182,196,.45);
  display:flex; align-items:center; justify-content:center; margin-bottom:10px;
  color:#19b6c4; transition:border-color .2s;
}
.no-public section.np.why-band .why-pillar:hover .wp-ic { border-color:#19b6c4; }
.no-public section.np.why-band .why-pillar .wp-ic svg { width:38px; height:38px; }
.no-public section.np.why-band .why-pillar h3 { color:#ffffff; }
.no-public section.np.why-band .why-pillar p { color:rgba(255,255,255,.78); }
@media (max-width:980px){ .no-public section.np.why-band .why-pillar:nth-child(3) { border-left:none; } }
@media (max-width:560px){ .no-public section.np.why-band .why-pillar { border-top:none; } }
/* Divisor "Modalidades de transporte" entre los diferenciadores y el bloque para quién */
.no-public section.np#why .para-quien-kicker {
  display:flex; align-items:center; gap:18px; max-width:640px; margin:64px auto 34px;
  color:rgba(255,255,255,.55); font-family:'JetBrains Mono',monospace; font-size:13.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; text-align:center; justify-content:center;
}
.no-public section.np#why .para-quien-kicker::before,
.no-public section.np#why .para-quien-kicker::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.18); }
/* Modalidades de transporte (2026-07-20, v2) — sin tarjeta/caja esta vez (Ana: "siempre el mismo
   diseño"): fila editorial sin fondo ni borde de card, un color de acento distinto por modalidad
   (tomados de la paleta de marca en vez del cian uniforme de siempre), separadas por líneas finas. */
.no-public section.np#why .modalidad-row {
  display:flex; flex-wrap:wrap; margin-top:32px;
  border-top:1px solid rgba(255,255,255,.16); border-bottom:1px solid rgba(255,255,255,.16);
}
.no-public section.np#why .modalidad-item {
  flex:1 1 0; min-width:180px; display:flex; flex-direction:column; gap:12px;
  padding:30px 24px; border-left:1px solid rgba(255,255,255,.16);
}
.no-public section.np#why .modalidad-item:first-child { border-left:none; }
.no-public section.np#why .modalidad-item .mod-ic { color:var(--c, #19b6c4); }
.no-public section.np#why .modalidad-item .mod-ic svg { width:30px; height:30px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.no-public section.np#why .modalidad-item b { display:block; color:#ffffff; font-size:17px; font-weight:700; letter-spacing:-.005em; line-height:1.3; }
.no-public section.np#why .modalidad-item span { color:rgba(255,255,255,.72); font-size:15.5px; line-height:1.5; }
@media (max-width:900px) {
  .no-public section.np#why .modalidad-item { flex:1 1 45%; border-left:none; border-top:1px solid rgba(255,255,255,.14); }
  .no-public section.np#why .modalidad-item:nth-child(-n+2) { border-top:none; }
}
@media (max-width:560px) {
  .no-public section.np#why .modalidad-item { flex:1 1 100%; }
  .no-public section.np#why .modalidad-item:first-child { border-top:none; }
}
.no-public section.np#why .split-media img { border-color:rgba(255,255,255,.18); }
.no-public section.np#why .why-grid { display:grid; grid-template-columns:1fr 1fr; gap:36px 60px; max-width:1100px; margin:60px auto 0; }
.no-public section.np#why .why-card { display:flex; gap:20px; align-items:flex-start; }
.no-public section.np#why .why-ic { width:46px; height:46px; border-radius:10px; background:#e3f0fc; color:#2170b3; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.no-public section.np#why .why-ic svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public section.np#why .why-text h3 { color:#0D3454; font-size:22px; font-weight:700; margin-bottom:10px; letter-spacing:-.005em; }
.no-public section.np#why .why-text p { color:#3a4a61; line-height:1.6; font-size:17px; }
@media (max-width:780px) { .no-public section.np#why .why-grid { grid-template-columns:1fr; } }
.no-public .section-head { max-width:780px; margin-bottom:56px; }
.no-public .section-head.full { max-width:none; width:100%; }
.no-public .section-head .section-head-media { margin-top:40px; display:flex; justify-content:center; }
.no-public .section-head .section-head-media img { max-width:780px; width:100%; height:auto; border-radius:14px; border:1px solid var(--line); box-shadow:0 30px 60px -20px rgba(0,0,0,.55); }
.no-public .section-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.no-public h2.section-title { font-size:clamp(32px,3.6vw,52px); letter-spacing:-.025em; line-height:1.1; margin-bottom:18px; color:#fff; }
.no-public h2.section-title .grad, .no-public .grad { background:linear-gradient(120deg,var(--primary),var(--cian)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.no-public .section-head p { font-size:18px; color:var(--muted); line-height:1.55; }

/* ════ MÓDULOS ════ */
.no-public .modulos { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.no-public .modulo { position:relative; padding:28px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.025), transparent); transition:all .25s; overflow:hidden; display:block; }
.no-public .modulo::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--c,var(--cian)); transform-origin:left; transform:scaleX(.4); transition:transform .3s; }
.no-public .modulo:hover { transform:translateY(-4px); border-color:var(--c,var(--cian)); }
.no-public .modulo:hover::before { transform:scaleX(1); }
.no-public .modulo .icon { width:48px; height:48px; border-radius:10px; background:var(--c,var(--cian)); display:flex; align-items:center; justify-content:center; color:#0a0f1c; font-size:16px; margin-bottom:18px; font-family:'JetBrains Mono',monospace; }
.no-public .modulo h3 { font-size:20px; margin-bottom:8px; letter-spacing:-.01em; color:#fff; }
.no-public .modulo p { font-size:16px; color:var(--muted); line-height:1.55; }

/* ════ IA VIVA ════ */
.no-public .ia-section { background:transparent; }
.no-public .ia-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.no-public .ia-card { padding:32px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg, rgba(25,182,196,.04), rgba(255,255,255,.01)); position:relative; overflow:hidden; }
.no-public .ia-card .badge-ai { position:absolute; top:18px; right:18px; padding:5px 10px; border-radius:20px; background:rgba(25,182,196,.15); color:var(--cian); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.no-public .ia-card h3 { font-size:22px; margin-bottom:12px; letter-spacing:-.015em; color:#fff; }
.no-public .ia-card p { color:var(--muted); line-height:1.6; font-size:14.5px; }
.no-public .ia-card .visual { margin-top:18px; padding:14px; background:rgba(0,0,0,.25); border-radius:10px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--cian); border:1px solid var(--line); line-height:1.85; }

/* ════ CARD ICON (v2 — todas las tarjetas .card adoptan el estilo IA: círculo cian + SVG line-art) ════ */
.no-public .card .ic {
  width:56px; height:56px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(25,182,196,.18), rgba(25,182,196,.06));
  border:1px solid rgba(25,182,196,.35);
  color:var(--cian);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  font-size:0; /* anular tamaño de emoji legacy si quedara */
  box-shadow:0 0 0 4px rgba(25,182,196,.06), 0 8px 24px -10px rgba(25,182,196,.6);
}
.no-public .card .ic svg { width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* ia-feature mantiene compatibilidad (mismo aspecto) */
.no-public .card.ia-feature .ic { /* hereda lo anterior */ }

/* why-card icon en banda clara → versión azul sobre fondo claro */
.no-public section.np#why .why-ic {
  width:50px; height:50px;
  border-radius:50%;
  background:#e3f0fc;
  border:1px solid #b8d3ea;
  color:#2170B3;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:0 0 0 3px rgba(33,112,179,.06);
}
.no-public section.np#why .why-ic svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ════ DRIVER BANNER ════ */
.no-public .driver-banner { background:transparent; }
/* Fondo oscuro + nebulosa blanca tras los móviles (2026-07-06) */
.no-public section.np.driver-banner { position:relative; isolation:isolate; }
.no-public section.np.driver-banner > * { position:relative; z-index:1; }
.no-public section.np.driver-banner::before {
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; background:#0D3454; z-index:0;
}
.no-public section.np.driver-banner .eyebrow-line { background:transparent; border:1px solid rgba(255,255,255,.45); color:#19b6c4; }
.no-public section.np.driver-banner .driver-text h2 { color:#ffffff; }
.no-public section.np.driver-banner .driver-text h2 .accent { color:#19b6c4; }
.no-public section.np.driver-banner .driver-text .sub { color:rgba(255,255,255,.80); }
.no-public section.np.driver-banner .driver-list li { color:rgba(255,255,255,.80); }
.no-public section.np.driver-banner .driver-list li span { color:rgba(255,255,255,.75); }
.no-public section.np.driver-banner .driver-list li b { color:#ffffff; }
.no-public section.np.driver-banner .driver-phones::before {
  background: radial-gradient(ellipse at center, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 62%);
  opacity:1;
  filter:blur(40px);
}
.no-public .driver-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:center; }
.no-public .driver-media { display:flex; justify-content:center; }
.no-public .driver-phones { position:relative; width:100%; max-width:520px; aspect-ratio: 1 / 1; }
.no-public .driver-phones::before {
  content:'';
  position:absolute;
  top:-8%; left:-10%; right:-10%; bottom:-8%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.55) 0%, #2170b3 60%);
  border-radius:24px;
  transform:rotate(1deg);
  filter:blur(55px);
  opacity:.40;
  z-index:0;
  pointer-events:none;
}
.no-public .driver-phones::before {
  content:'';
  position:absolute;
  top:-8%; left:-10%; right:-10%; bottom:-8%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.55) 0%, #2170b3 60%);
  border-radius:24px;
  transform:rotate(1deg);
  filter:blur(55px);
  opacity:.72;
  z-index:0;
  pointer-events:none;
}
.no-public .driver-phones .ph { position:absolute; max-height:none; height:auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.45)); }
.no-public .driver-phones .ph-back  { left:0;  top:8%;  width:58%; transform:rotate(-8deg); z-index:1; }
.no-public .driver-phones .ph-front { right:0; top:0;   width:58%; transform:rotate(8deg);  z-index:2; }
.no-public .driver-text h2 { font-size:42px; line-height:1.1; letter-spacing:-.02em; margin:14px 0 18px; color:#fff; }
.no-public .driver-text h2 .accent { color:var(--cian); font-weight:800; }
.no-public .driver-text .sub { color:var(--muted); font-size:17px; line-height:1.6; margin-bottom:24px; }
.no-public .driver-list { list-style:none; padding:0; margin:0 0 28px; display:grid; gap:16px; }
.no-public .driver-list li { padding-left:34px; position:relative; color:#cfd6e2; font-size:16px; line-height:1.55; }
.no-public .driver-list li::before { content:""; position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:50%; background:var(--cian); }
.no-public .driver-list li::after { content:"✓"; position:absolute; left:6px; top:1px; color:#0a0f1c; font-weight:700; font-size:13px; }
.no-public .driver-list li b { display:block; color:#fff; font-size:17px; margin-bottom:2px; letter-spacing:-.005em; }
.no-public .driver-list li span { color:var(--muted); }
@media (max-width:960px) {
  .no-public .driver-grid { grid-template-columns:1fr; gap:32px; }
  .no-public .driver-text h2 { font-size:32px; }
}

/* ════ DESPLIEGUE ════ */
.no-public .deploy { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.no-public .deploy-card { padding:42px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005)); position:relative; }
/* (v2) iconos de deploy-card unificados al estilo IA Viva — círculo cian + SVG line-art */
.no-public .deploy-card.cloud::before, .no-public .deploy-card.onprem::before { content:none; }
.no-public .deploy-card .deploy-icon {
  position:absolute;
  top:32px; right:32px;
  width:56px; height:56px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(25,182,196,.18), rgba(25,182,196,.06));
  border:1px solid rgba(25,182,196,.35);
  color:var(--cian);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 4px rgba(25,182,196,.06), 0 8px 24px -10px rgba(25,182,196,.6);
}
.no-public .deploy-card.onprem .deploy-icon { color:var(--amarillo); background:linear-gradient(135deg, rgba(246,168,58,.18), rgba(246,168,58,.06)); border-color:rgba(246,168,58,.40); box-shadow:0 0 0 4px rgba(246,168,58,.06), 0 8px 24px -10px rgba(246,168,58,.6); }
.no-public .deploy-card .deploy-icon svg { width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .deploy-card h3 { font-size:24px; margin-bottom:6px; letter-spacing:-.015em; color:#fff; }
.no-public .deploy-card .tag { font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--cian); margin-bottom:18px; display:block; }
.no-public .deploy-card.onprem .tag { color:var(--amarillo); }
.no-public .deploy-card p { color:var(--muted); line-height:1.65; margin-bottom:20px; font-size:14.5px; }
.no-public .deploy-card ul { list-style:none; }
.no-public .deploy-card li { padding:8px 0 8px 24px; font-size:13.5px; color:#cfd6e2; position:relative; }
.no-public .deploy-card li::before { content:"✓"; position:absolute; left:0; color:var(--cian); }
.no-public .deploy-card.onprem li::before { color:var(--amarillo); }

/* ════ LOGOS MARQUEE (carrusel de integraciones) ════ */
.no-public .integraciones-section { overflow:hidden; }
.no-public .logos-marquee { position:relative; overflow:hidden; padding:32px 0; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.no-public .logos-track { display:flex; gap:72px; width:max-content; animation:np-marquee 55s linear infinite; will-change:transform; }   /* 90s eran 18px/s: parecía parado (Ana 2026-10-08) */
/* Se quita la pausa al pasar el cursor: bastaba con dejar el ratón apoyado
   sobre la franja —algo que uno hace sin darse cuenta mientras mira— para que
   el carrusel se quedase quieto y pareciese roto. El realce de cada logo al
   señalarlo (.logo-item:hover) se mantiene, que es lo que sí aporta. */
.no-public .logo-item { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; height:60px; opacity:.7; filter:grayscale(1) brightness(1.6) contrast(.9); transition:filter .25s, opacity .25s, transform .25s; }
.no-public .logo-item img { max-height:100%; width:auto; max-width:180px; object-fit:contain; display:block; }
.no-public .logo-item:hover { opacity:1; filter:grayscale(0) brightness(1) contrast(1); transform:scale(1.06); }
@keyframes np-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
/* AQUÍ ESTABA EL CULPABLE (Ana, 2026-10-08). Este bloque paraba el carrusel
   cuando el sistema pide movimiento reducido —y Ana lo tiene activado en
   Windows: se vio porque le aparecía la barra de desplazamiento que añadía la
   regla de debajo—. Dos intentos buscando el fallo en la velocidad y en la
   pausa al pasar el cursor, y era esto.
   Decisión de Ana: el carrusel de logos se mueve siempre. Es un desfile lento
   y lateral de logos, no un efecto que maree. Las otras 13 animaciones que sí
   pueden molestar (apariciones, pulsos, el punto que recorre la ruta) SIGUEN
   respetando la preferencia, cada una en su bloque. */

/* ════ ROADMAP ════ */
.no-public .roadmap-timeline { position:relative; padding:40px 0; }
.no-public .roadmap-timeline::before { content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:linear-gradient(90deg, var(--amarillo), var(--cian), var(--verde)); }
.no-public .roadmap-points { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; position:relative; }
.no-public .rp { position:relative; padding:28px; background:var(--bg-2); border:1px solid var(--line); border-radius:14px; }
.no-public .rp .marker { position:absolute; top:-12px; left:28px; width:22px; height:22px; border-radius:50%; background:var(--c,var(--cian)); border:4px solid var(--bg); }
.no-public .rp .date { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--c,var(--cian)); margin-bottom:8px; padding-top:12px; }
.no-public .rp h4 { font-size:18px; margin-bottom:8px; letter-spacing:-.01em; color:#fff; }
.no-public .rp p { color:var(--muted); font-size:13.5px; line-height:1.55; }

/* ════ VIDEO ════ */
.no-public .video-block { padding:0 32px 100px; max-width:1400px; margin:0 auto; }
.no-public .video-wrap { position:relative; border-radius:18px; overflow:hidden; aspect-ratio:16/9; border:1px solid var(--line); box-shadow:0 30px 80px -20px rgba(0,0,0,.7); }
.no-public .video-wrap video { width:100%; height:100%; object-fit:cover; }
.no-public .video-wrap .overlay { position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(7,13,28,.9)); display:flex; flex-direction:column; justify-content:flex-end; padding:40px; pointer-events:none; }
.no-public .video-wrap .overlay h3 { font-size:32px; letter-spacing:-.02em; margin-bottom:8px; }
.no-public .video-wrap .overlay p { color:var(--muted); max-width:600px; }

/* ════ INTEGRACIONES ════ */
.no-public .integ-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; align-items:stretch; }
.no-public .integ-card { padding:24px 14px; border:1px solid var(--line); border-radius:10px; text-align:center; font-size:12px; color:var(--muted); background:rgba(255,255,255,.02); transition:all .2s; }
.no-public .integ-card:hover { color:#fff; border-color:var(--cian); }
/* Iconos de integración con look isométrico: el glifo sobre un tile-cubo en rombo */
.no-public .integ-card .ic {
    position:relative; width:60px; height:56px; margin:6px auto 18px;
    display:flex; align-items:center; justify-content:center;
    font-size:24px; z-index:1;
    filter:drop-shadow(0 5px 5px rgba(0,0,0,.45));
    transition:transform .3s ease;
}
.no-public .integ-card .ic::before {
    content:""; position:absolute; left:50%; top:50%;
    width:40px; height:40px; margin:-20px 0 0 -20px;
    background:linear-gradient(135deg, rgba(25,182,196,.34), rgba(47,120,203,.14));
    border:1px solid rgba(25,182,196,.5);
    border-radius:9px;
    transform:rotate(45deg) scaleY(.6);
    box-shadow:0 9px 0 rgba(10,20,40,.6), 0 20px 26px -10px rgba(0,0,0,.65);
    z-index:-1;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.no-public .integ-card:hover .ic { transform:translateY(-4px); }
.no-public .integ-card:hover .ic::before {
    transform:rotate(45deg) scaleY(.6) translateY(-4px);
    box-shadow:0 13px 0 rgba(10,20,40,.6), 0 28px 32px -10px rgba(25,182,196,.45);
    border-color:var(--cian);
}
/* Iconos SVG de línea (sustituyen a los emojis): stroke/fill heredados por las formas hijas. */
.no-public .integ-card .ic svg { width:26px; height:26px; fill:none; stroke:#e9fbff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.no-public .integ-card:hover .ic svg { stroke:#fff; }

/* ════ TESTIMONIO ════ */
.no-public .testimonio { padding:60px 48px; background:linear-gradient(135deg, rgba(25,182,196,.06), rgba(33,112,179,.06)); border:1px solid var(--line); border-radius:24px; text-align:center; max-width:1000px; margin:0 auto; }

/* ════ VERIFACTU CARD ════ */
.no-public .verifactu-card { display:grid; grid-template-columns:280px 1fr; gap:48px; align-items:center; padding:48px; max-width:1100px; margin:0 auto; background:linear-gradient(135deg, rgba(25,182,196,.06), rgba(33,112,179,.06)); border:1px solid var(--line); border-radius:24px; }
.no-public .verifactu-logo { display:flex; justify-content:center; align-items:center; }
.no-public .verifactu-logo img { max-width:100%; max-height:200px; height:auto; filter:drop-shadow(0 12px 30px rgba(0,0,0,.35)); }
.no-public .verifactu-body .eyebrow-line { margin-bottom:14px; }
.no-public .verifactu-body h2.section-title { margin-bottom:14px; }
.no-public .verifactu-body p { color:var(--muted); line-height:1.65; font-size:16.5px; margin-bottom:24px; }
@media (max-width:780px) {
  .no-public .verifactu-card { grid-template-columns:1fr; gap:28px; padding:32px; text-align:center; }
  .no-public .verifactu-logo img { max-height:140px; }
}

/* Home — variante oscura de la tarjeta Verifactu, para que sea más cromática con el resto del inicio */
.no-public .verifactu-card.verifactu-dark {
  background:linear-gradient(140deg, #2170B3 0%, #1a5285 55%, #164a76 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.40);
}
.no-public .verifactu-card.verifactu-dark .verifactu-body .eyebrow-line { color:#19b6c4 !important; }
.no-public .verifactu-card.verifactu-dark .verifactu-body h2.section-title { color:#ffffff; }
.no-public .verifactu-card.verifactu-dark .verifactu-body p { color:rgba(255,255,255,.78); }
/* Home — Verifactu como BANDA OSCURA full-bleed (no tarjeta), encima de Integraciones (2026-08-11, petición Ana).
   Reutiliza la rejilla de .verifactu-card pero le quita el fondo/borde/sombra de tarjeta. */
.no-public section.np.verifactu-band { position:relative; isolation:isolate; padding:56px 32px; }
.no-public section.np.verifactu-band > * { position:relative; z-index:1; }
.no-public section.np.verifactu-band::before {
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; background:#0D3454; z-index:0;
}
.no-public section.np.verifactu-band .verifactu-card { background:none; border:none; box-shadow:none; border-radius:0; padding:0; }
.no-public section.np.verifactu-band .verifactu-body .eyebrow-line { background:transparent; border:1px solid rgba(255,255,255,.45); color:#19b6c4 !important; }
.no-public section.np.verifactu-band .verifactu-body h2.section-title { color:#ffffff; }
.no-public section.np.verifactu-band .verifactu-body p { color:rgba(255,255,255,.78); }
/* Logo Verifactu más grande (Ana 2026-08-11): columna más ancha + más alto. */
/* El titular "NetOffice cumple con el sistema Verifactu" necesita 695px y la
   columna de texto tenía 624: se partía en dos líneas. Se ensancha la tarjeta
   y se recorta un poco la columna del logo → 764px, con holgura de sobra para
   que no se parta en otras pantallas (Ana 2026-10-08). */
.no-public section.np.verifactu-band .verifactu-card { grid-template-columns:380px 1fr; gap:56px; max-width:1200px; }
.no-public section.np.verifactu-band .verifactu-body p { max-width:680px; }
.no-public section.np.verifactu-band .verifactu-logo img { max-height:320px; max-width:100%; }
@media (max-width:780px) {
  .no-public section.np.verifactu-band .verifactu-card { grid-template-columns:1fr; gap:28px; text-align:center; }
  .no-public section.np.verifactu-band .verifactu-logo img { max-height:220px; }
}
/* Home — Integraciones sobre banda oscura #0D3454 (prueba: web hacia fondo oscuro global) (Ana 2026-08-11). */
.no-public section.np#integraciones { position:relative; isolation:isolate; }
.no-public section.np#integraciones > * { position:relative; z-index:1; }
.no-public section.np#integraciones::before {
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; background:#0D3454; z-index:0;
}
.no-public section.np#integraciones .section-title { color:#ffffff; }
.no-public section.np#integraciones .section-head p { color:rgba(255,255,255,.75); }
.no-public section.np#integraciones .eyebrow-line { background:transparent; border:1px solid rgba(255,255,255,.45); color:#19b6c4; }
.no-public section.np#integraciones .logo-item { filter:grayscale(1) brightness(0) invert(1); opacity:.72; }
.no-public section.np#integraciones .logo-item:hover { filter:none; opacity:1; }
/* Home — fondo base OSCURO #0D3454 (Ana 2026-08-11): que el oscuro sea el COLOR de la home, no franjas.
   Scope solo a la home vía .home-root (envuelve todo el Content). El héroe (vídeo + stats) mantiene su fondo claro propio. */
.no-public:has(.home-root) { background:#0D3454; }
.no-public .home-root { background:#0D3454; }

/* Páginas en tema OSCURO reutilizable vía .page-dark (Ana 2026-08-11, empezando por /netoffice).
   Fondo base #0D3454 + re-forzar textos claros donde el override de tema claro los dejó oscuros.
   NOTA: #modulos-principales se deja como está (banda azul clara #D6E7F6 + tarjetas de texto oscuro). */
.no-public:has(.page-dark) { background:#0D3454; }
.no-public .page-dark { background:#0D3454; }
/* Hero (BD) */
.no-public:has(.page-dark) .netoffice-hero-text h1 { color:#ffffff; }
/* Bloques de texto rich-content (BD std-tight + "dónde vive") → claros */
.no-public:has(.page-dark) .rich-content h2,
.no-public:has(.page-dark) .rich-content h3,
.no-public:has(.page-dark) .rich-content h4,
.no-public:has(.page-dark) .rich-content strong { color:#ffffff; }
.no-public:has(.page-dark) .rich-content p,
.no-public:has(.page-dark) .rich-content li { color:#cfd6e2; }
/* Herramientas IA + Integraciones GPS: cabeceras sobre fondo oscuro → claras */
.no-public:has(.page-dark) section.np#herramientas-ia .section-title,
.no-public:has(.page-dark) section.np#integraciones-gps .section-title { color:#ffffff; }
.no-public:has(.page-dark) section.np#herramientas-ia .section-head p,
.no-public:has(.page-dark) section.np#integraciones-gps .section-head p { color:rgba(255,255,255,.78); }
/* Integraciones GPS: logos en silueta blanca (como home), color al hover */
.no-public:has(.page-dark) section.np#integraciones-gps .logo-item { filter:grayscale(1) brightness(0) invert(1); opacity:.72; }
.no-public:has(.page-dark) section.np#integraciones-gps .logo-item:hover { filter:none; opacity:1; }
/* CTA final sobre fondo oscuro */
.no-public:has(.page-dark) .cta-band p { color:#cfd6e2; }
/* CTA final en páginas oscuras: título en blanco + línea superior más gruesa/destacada */
.no-public:has(.page-dark) .cta-band > h2, .no-public:has(.home-root) .cta-band > h2 { color:#ffffff; }
.no-public:has(.page-dark) .cta-band, .no-public:has(.home-root) .cta-band { border-top:3px solid rgba(25,182,196,.45); }

/* --- /netoffice ajustes finos (Ana 2026-08-11 · 2ª/3ª ronda) --- */
/* (subnav se deja en su color claro por defecto, a petición de Ana) */
/* Hero netoffice: fondo OSCURO (antes se pintaba claro con .hero-page::before) */
.no-public:has(.page-dark) .hero-page::before { background:linear-gradient(180deg, #0f2a4e 0%, #0D3454 100%); }
/* Padding inferior del hero (espacio con la sección siguiente) */
.no-public:has(.page-dark) section.netoffice-hero { padding-bottom:72px; }
/* features-row features-dark: sin panel azul, que se vea el fondo de la página */
.no-public:has(.page-dark) .features-row.features-dark { background:none; border:none; box-shadow:none; }
/* Glow decorativo (.no-public::before) crea un "corte" sobre fondo oscuro → ocultarlo en páginas oscuras */
.no-public:has(.page-dark)::before, .no-public:has(.home-root)::before { display:none; }
/* Breadcrumb (subnav) en oscuro con letras claras (Ana 2026-08-11) */
.no-public:has(.page-dark) .subnav { background:transparent; border-bottom:1px solid rgba(255,255,255,.10); }
.no-public:has(.page-dark) .subnav .wrap { color:rgba(255,255,255,.5); }
.no-public:has(.page-dark) .subnav a { color:#19b6c4; }
.no-public:has(.page-dark) .subnav span { color:rgba(255,255,255,.85); }
.no-public:has(.page-dark) .subnav a:hover { color:#19b6c4; }
/* === Tema oscuro: legibilidad genérica de textos (app-driver y siguientes) === */
.no-public:has(.page-dark) .section-title { color:#ffffff; }
.no-public:has(.page-dark) .section-head p { color:rgba(255,255,255,.78); }
.no-public:has(.page-dark) .hero-page h1 { color:#ffffff; }
.no-public:has(.page-dark) .hero-page .sub { color:#dbe5f2; }
.no-public:has(.page-dark) .hero-page .eyebrow { color:#19b6c4; }
/* Contenedor DeCA en OSCURO (Ana: quitar el fondo claro y dejar todo oscuro) */
.no-public:has(.page-dark) .deca-box { background:linear-gradient(140deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.14); box-shadow:0 24px 48px -28px rgba(0,0,0,.5); }
.no-public:has(.page-dark) .deca-box .section-title { color:#ffffff; }
.no-public:has(.page-dark) .deca-text > p { color:#dbe5f2; }
.no-public:has(.page-dark) .deca-text > p b { color:#ffffff; }
.no-public:has(.page-dark) .deca-points li b { color:#ffffff; }
.no-public:has(.page-dark) .deca-points li span { color:#cfd6e2; }
.no-public:has(.page-dark) .deca-qr-label { color:rgba(255,255,255,.72); }
.no-public:has(.page-dark) .deca-download { background:linear-gradient(135deg,#19b6c4,#0d8b97); }
.no-public:has(.page-dark) .deca-download:hover { background:linear-gradient(135deg,#22c7d6,#0f9aa8); }
/* Mini-mockup de un DeCA (documento ficticio de ejemplo) — sustituye al QR (Ana 2026-08-11) */
.no-public .deca-doc { width:100%; max-width:280px; margin:0 auto; background:#ffffff; color:#1a2433; border-radius:10px; box-shadow:0 26px 54px -22px rgba(0,0,0,.6); padding:14px; border:1px solid rgba(0,0,0,.06); font-size:8px; line-height:1.4; }
.no-public .deca-doc .dd-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; border-bottom:2px solid #2170B3; padding-bottom:8px; }
.no-public .deca-doc .dd-brand { font-weight:800; color:#0D3454; font-size:10.5px; letter-spacing:-.01em; }
.no-public .deca-doc .dd-qr { width:34px; height:34px; flex:0 0 auto; }
.no-public .deca-doc .dd-qr svg { width:100%; height:100%; display:block; }
.no-public .deca-doc .dd-title { text-align:center; font-size:9px; font-weight:700; color:#0D3454; margin-top:8px; line-height:1.25; }
.no-public .deca-doc .dd-sub { text-align:center; font-size:6.5px; color:#6b7a90; margin-top:2px; }
.no-public .deca-doc .dd-meta { display:flex; justify-content:space-between; gap:8px; font-size:7.5px; color:#3a4a61; border-top:1px dashed rgba(33,112,179,.35); border-bottom:1px dashed rgba(33,112,179,.35); padding:6px 0; margin:8px 0; }
.no-public .deca-doc .dd-meta b { color:#0D3454; }
.no-public .deca-doc .dd-bar { background:#2170B3; color:#ffffff; font-size:6.5px; font-weight:700; letter-spacing:.08em; padding:3px 7px; border-radius:3px; margin:8px 0 5px; }
.no-public .deca-doc .dd-two { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.no-public .deca-doc .dd-cell { border:1px solid rgba(33,112,179,.20); border-radius:5px; padding:5px 6px; }
.no-public .deca-doc .dd-lbl { display:block; font-size:6px; font-weight:700; letter-spacing:.06em; color:#2170B3; margin-bottom:2px; }
.no-public .deca-doc .dd-val { font-size:8px; color:#0D3454; font-weight:600; line-height:1.3; }
.no-public .deca-doc .dd-line { font-size:7.5px; color:#1a2433; padding:3px 0; border-bottom:1px solid rgba(33,112,179,.10); }
.no-public .deca-doc .dd-line b { color:#0D3454; }
.no-public .deca-doc .dd-foot { font-size:6px; color:#8a97a8; border-top:1px solid rgba(33,112,179,.15); margin-top:8px; padding-top:5px; text-align:center; }
.no-public .deca-doc-label { display:block; text-align:center; margin-top:12px; color:rgba(255,255,255,.72); font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
/* /netoffice/personal en oscuro (Ana 2026-08-11) */
/* Quitar el contenedor de la lista 01-06 (dejar el fondo de página directamente; se mantienen los divisores de los li) */
.no-public:has(.page-dark) section.np#capacidades-personal .personal-panel { background:none; border:none; box-shadow:none; padding:0; }
/* Sección nueva "El equipo": rejilla de 4 tarjetas en 2 columnas */
/* (el layout 2x2 de #equipo-rrhh se retiró con el rediseño a .eq-grid del 2026-08-31) */
/* Timer-box: su override de tema claro dejaba texto blanco invisible → oscuro para que se lea */
.no-public:has(.page-dark) .timer-box { background:none; border:none; box-shadow:none; padding:0; }
.no-public:has(.page-dark) .timer-text h2.section-title { color:#ffffff; }
.no-public:has(.page-dark) .timer-text p { color:#dbe5f2; }
.no-public:has(.page-dark) .timer-text p strong { color:#ffffff; }
.no-public:has(.page-dark) .timer-text .eyebrow-line.orange { color:#f6a83a !important; }
.no-public:has(.page-dark) .timer-list li b { color:#ffffff; }
.no-public:has(.page-dark) .timer-list li span { color:#cfdbe9; }
/* "El equipo": tarjetas en BLANCO con texto negro (Ana: mejor negro) */
/* #equipo-rrhh: las 4 tarjetas eran BLANCAS aquí a propósito; Ana pidió el 2026-08-31 que se fundan con el fondo → ahora usan .eq-grid/.eq-card (bloque al final del fichero) y estas reglas se retiraron. */
/* /netoffice/taller (Ana 2026-08-11): ocultar imagen del hero (temporal) + legibilidad del flujo */
.no-public .hero-driver.hero-noimg { grid-template-columns:1fr; }
.no-public .hero-noimg .hero-driver-media { display:none; }
.no-public:has(.page-dark) .flujo-step h4 { color:#ffffff; }
.no-public:has(.page-dark) .flujo-step p { color:#cfd6e2 !important; }
/* Tema oscuro: párrafos que el tema claro fuerza a #3a4a61 !important quedan invisibles → a claro (Ana: legibilidad SIEMPRE) */
.no-public:has(.page-dark) .feat-text p,
.no-public:has(.page-dark) .feat-text ul li,
.no-public:has(.page-dark) .zona-list li span,
.no-public:has(.page-dark) .zona-card p,
.no-public:has(.page-dark) .conn-node span,
.no-public:has(.page-dark) .laso-timeline .lt-card p { color:#cfd6e2 !important; }
/* Mock-cards (widgets de UI): el tema claro los pone blancos y su texto blanco queda invisible → restaurar oscuro */
.no-public:has(.page-dark) .mock-card { background:linear-gradient(165deg, #0e1a35, #081225); border:1px solid rgba(255,255,255,.10); color:#cfd6e2; box-shadow:0 30px 60px -22px rgba(0,0,0,.55); }

/* ===== /netoffice/contabilidad — secciones nuevas con diseños variados (Ana 2026-08-11) ===== */
/* Fix legibilidad: tarjeta "Conectado al ERP" (conta-bonus) era blanca con título blanco */
.no-public:has(.page-dark) section.np#conta-overview .conta-panel .conta-card.conta-bonus { background:linear-gradient(160deg, rgba(246,168,58,.16), rgba(246,168,58,.04)); border-color:rgba(246,168,58,.45); }
.no-public:has(.page-dark) .conta-card.conta-bonus h3 { color:#ffffff; }
.no-public:has(.page-dark) .conta-card.conta-bonus p { color:rgba(255,255,255,.8); }
/* S1 · cadena "es el mismo dato" */
.no-public .conta-cadena { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin-top:36px; }
.no-public .cadena-node { flex:1 1 180px; max-width:230px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:24px 18px; text-align:center; }
.no-public .cadena-node .cn-ic { width:46px; height:46px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:rgba(246,168,58,.16); border:1px solid rgba(246,168,58,.4); color:#f6a83a; margin-bottom:12px; }
.no-public .cadena-node .cn-ic svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .cadena-node b { display:block; color:#fff; font-size:15.5px; margin-bottom:3px; }
.no-public .cadena-node span { color:#cfd6e2; font-size:12.5px; line-height:1.4; }
.no-public .cadena-arrow { color:#f6a83a; font-size:24px; font-weight:700; flex:0 0 auto; }
@media (max-width:800px){ .no-public .conta-cadena{ flex-direction:column; } .no-public .cadena-node{ max-width:none; width:100%; } .no-public .cadena-arrow{ transform:rotate(90deg); } }
/* S2 · pilares editoriales */
.no-public .conta-pilares { display:grid; grid-template-columns:repeat(3,1fr); margin-top:40px; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); }
.no-public .conta-pilar { padding:34px 30px; border-left:1px solid rgba(255,255,255,.12); }
.no-public .conta-pilar:first-child { border-left:none; }
.no-public .conta-pilar .cp-ic { width:52px; height:52px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; background:rgba(246,168,58,.14); border:1px solid rgba(246,168,58,.4); color:#f6a83a; margin-bottom:16px; }
.no-public .conta-pilar .cp-ic svg { width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .conta-pilar h3 { color:#fff; font-size:20px; font-weight:700; margin:0 0 6px; letter-spacing:-.01em; }
.no-public .conta-pilar ul { list-style:none; padding:0; margin:12px 0 0; }
.no-public .conta-pilar li { color:#cfd6e2; font-size:14.5px; line-height:1.5; padding:6px 0 6px 18px; position:relative; }
.no-public .conta-pilar li::before { content:''; position:absolute; left:0; top:12px; width:6px; height:6px; border-radius:50%; background:#f6a83a; }
@media (max-width:820px){ .no-public .conta-pilares{ grid-template-columns:1fr; } .no-public .conta-pilar{ border-left:none; border-top:1px solid rgba(255,255,255,.12); } .no-public .conta-pilar:first-child{ border-top:none; } }
/* S3 · analítica: split + capas dimensionales + pasos */
.no-public .analitica-split { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; margin-top:16px; }
.no-public .analitica-split .as-text p { color:#cfd6e2; font-size:16.5px; line-height:1.7; margin:0; }
.no-public .analitica-split .as-text strong { color:#fff; }
.no-public .analitica-layers { display:flex; flex-direction:column; gap:10px; }
.no-public .alayer { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-left:4px solid #f6a83a; border-radius:10px; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.no-public .alayer b { color:#fff; font-size:14.5px; } .no-public .alayer span { color:#9fb3cc; font-size:12.5px; font-family:'JetBrains Mono',monospace; }
.no-public .alayer:nth-child(2){ margin-left:22px; } .no-public .alayer:nth-child(3){ margin-left:44px; } .no-public .alayer:nth-child(4){ margin-left:66px; border-left-color:#19b6c4; }
.no-public .analitica-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:44px; }
.no-public .astep { position:relative; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:22px; }
.no-public .astep b { display:block; color:#f6a83a; font-size:15px; margin-bottom:5px; } .no-public .astep span { color:#cfd6e2; font-size:13.5px; line-height:1.5; }
.no-public .astep:not(:last-child)::after { content:'→'; position:absolute; right:-11px; top:50%; transform:translateY(-50%); color:#f6a83a; font-weight:700; z-index:2; }
@media (max-width:820px){ .no-public .analitica-split{ grid-template-columns:1fr; gap:28px; } .no-public .analitica-steps{ grid-template-columns:1fr; } .no-public .astep:not(:last-child)::after{ content:'↓'; right:auto; left:50%; top:auto; bottom:-16px; transform:translateX(-50%); } .no-public .alayer{ margin-left:0 !important; } }
/* S4 · facturación: flujo + filas editoriales */
.no-public .factu-flow { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin-top:8px; margin-bottom:36px; }
.no-public .factu-flow .ff-step { background:rgba(25,182,196,.10); border:1px solid rgba(25,182,196,.35); color:#cfeef2; border-radius:30px; padding:8px 18px; font-size:13.5px; font-weight:600; }
.no-public .factu-flow .ff-arrow { color:#19b6c4; font-weight:700; }
.no-public .factu-rows { display:grid; gap:14px; }
.no-public .factu-row { display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:start; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-left:4px solid #f6a83a; border-radius:12px; padding:22px 26px; }
.no-public .factu-row h3 { color:#fff; font-size:19px; margin:0; letter-spacing:-.01em; }
.no-public .factu-row p { color:#cfd6e2; font-size:15px; line-height:1.6; margin:0; }
@media (max-width:720px){ .no-public .factu-row{ grid-template-columns:1fr; gap:8px; } }
/* S5 · escandallo: split texto + recibo desglosado */
.no-public .escandallo-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-top:24px; }
.no-public .esc-points { list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.no-public .esc-points li { color:#cfd6e2; font-size:15.5px; line-height:1.55; padding-left:26px; position:relative; }
.no-public .esc-points li b { color:#fff; }
.no-public .esc-points li::before { content:''; position:absolute; left:0; top:7px; width:9px; height:9px; border-radius:50%; background:#f6a83a; box-shadow:0 0 0 4px rgba(246,168,58,.15); }
.no-public .esc-receipt { background:linear-gradient(165deg,#0e1a35,#081225); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:26px; box-shadow:0 30px 60px -24px rgba(0,0,0,.6); font-family:'JetBrains Mono',monospace; }
.no-public .esc-receipt .er-head { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:12px; margin-bottom:14px; }
.no-public .esc-receipt .er-head b { color:#fff; font-size:14px; } .no-public .esc-receipt .er-head span { color:#7a8aa0; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.no-public .esc-line { display:grid; grid-template-columns:1.1fr 1fr 54px; align-items:center; gap:12px; padding:6px 0; font-size:12.5px; color:#cfd6e2; }
.no-public .esc-line .el-track { height:6px; background:rgba(255,255,255,.08); border-radius:3px; }
.no-public .esc-line .el-bar { display:block; height:6px; background:#f6a83a; border-radius:3px; }
.no-public .esc-line .el-val { text-align:right; color:#fff; }
.no-public .esc-total { display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid rgba(255,255,255,.16); margin-top:12px; padding-top:12px; color:#dbe5f2; font-size:14px; }
.no-public .esc-total b { color:#f6a83a; font-size:18px; }
@media (max-width:820px){ .no-public .escandallo-grid{ grid-template-columns:1fr; gap:28px; } }
/* S6 · candado callout */
.no-public .candado-band { display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center; background:linear-gradient(140deg, rgba(246,168,58,.12), rgba(246,168,58,.03)); border:1px solid rgba(246,168,58,.35); border-radius:20px; padding:38px 40px; margin-top:8px; }
.no-public .candado-ic { width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(246,168,58,.16); border:1px solid rgba(246,168,58,.45); color:#f6a83a; flex:0 0 auto; }
.no-public .candado-ic svg { width:38px; height:38px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .candado-band h3 { color:#fff; font-size:22px; margin:0 0 8px; letter-spacing:-.01em; }
.no-public .candado-band p { color:#dbe5f2; font-size:16px; line-height:1.6; margin:0; }
@media (max-width:640px){ .no-public .candado-band{ grid-template-columns:1fr; text-align:center; } .no-public .candado-ic{ margin:0 auto; } }

/* ===== /ia-viva — rediseño por capacidades, con animaciones (Ana 2026-08-11) ===== */
.no-public .card-grid.card-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1000px){ .no-public .card-grid.card-grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .no-public .card-grid.card-grid-4 { grid-template-columns:1fr; } }
/* Cadena de 6 puntos con pulso animado */
.no-public .ia-chain { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:36px; position:relative; }
.no-public .ia-chain::before { content:''; position:absolute; top:25px; left:9%; right:9%; height:2px; background:linear-gradient(90deg, rgba(25,182,196,.12), rgba(25,182,196,.55), rgba(25,182,196,.12)); z-index:0; }
.no-public .ia-cnode { position:relative; z-index:1; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:18px 14px; text-align:center; }
.no-public .ia-cnode .icn-dot { display:block; width:16px; height:16px; border-radius:50%; background:#19b6c4; margin:0 auto 14px; animation:iaPulse 2.4s ease-in-out infinite; }
.no-public .ia-cnode:nth-child(2) .icn-dot{ animation-delay:.3s; } .no-public .ia-cnode:nth-child(3) .icn-dot{ animation-delay:.6s; } .no-public .ia-cnode:nth-child(4) .icn-dot{ animation-delay:.9s; } .no-public .ia-cnode:nth-child(5) .icn-dot{ animation-delay:1.2s; } .no-public .ia-cnode:nth-child(6) .icn-dot{ animation-delay:1.5s; }
.no-public .ia-cnode .icn-ey { display:block; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:#19b6c4; margin-bottom:6px; }
.no-public .ia-cnode b { display:block; color:#fff; font-size:15px; margin-bottom:5px; }
.no-public .ia-cnode span { color:#cfd6e2; font-size:12.5px; line-height:1.4; }
@keyframes iaPulse { 0%,100%{ box-shadow:0 0 0 4px rgba(25,182,196,.10); } 50%{ box-shadow:0 0 0 9px rgba(25,182,196,.30); } }
@media (max-width:900px){ .no-public .ia-chain{ grid-template-columns:repeat(2,1fr); } .no-public .ia-chain::before{ display:none; } }
@media (max-width:520px){ .no-public .ia-chain{ grid-template-columns:1fr; } }
/* Criterio de uso — callout cian */
.no-public .criterio-band { display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; background:linear-gradient(140deg, rgba(25,182,196,.12), rgba(25,182,196,.03)); border:1px solid rgba(25,182,196,.35); border-radius:20px; padding:30px 34px; margin-top:40px; }
.no-public .criterio-tag { align-self:start; font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:#19b6c4; border:1px solid rgba(25,182,196,.45); border-radius:20px; padding:6px 14px; white-space:nowrap; }
.no-public .criterio-band p { color:#dbe5f2; font-size:16px; line-height:1.65; margin:0; }
.no-public .criterio-band p strong { color:#fff; }
.no-public .criterio-band.criterio-orange { background:linear-gradient(140deg, rgba(246,168,58,.13), rgba(246,168,58,.03)); border-color:rgba(246,168,58,.4); }
.no-public .criterio-band.criterio-orange .criterio-tag { color:#f6a83a; border-color:rgba(246,168,58,.5); }
@media (max-width:640px){ .no-public .criterio-band{ grid-template-columns:1fr; } }
/* Módulo IA: split texto + hueco de captura */
.no-public .ia-module { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-top:28px; }
.no-public .ia-module.reverse .iam-media { order:-1; }
.no-public .iam-text p { color:#cfd6e2; font-size:16.5px; line-height:1.7; }
.no-public .iam-text p strong { color:#fff; }
.no-public .shot-frame { position:relative; border:1.5px dashed rgba(25,182,196,.4); border-radius:16px; background:linear-gradient(160deg, rgba(25,182,196,.06), rgba(255,255,255,.02)); min-height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:24px; }
.no-public .shot-frame .sf-ic { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(25,182,196,.14); border:1px solid rgba(25,182,196,.4); color:#19b6c4; }
.no-public .shot-frame .sf-ic svg { width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.no-public .shot-frame b { color:#dbe5f2; font-size:14px; } .no-public .shot-frame span { font-size:12px; color:#8a97a8; }
@media (max-width:820px){ .no-public .ia-module{ grid-template-columns:1fr; gap:28px; } .no-public .ia-module.reverse .iam-media{ order:0; } }
/* Lo que le puedes preguntar — chat/preguntas con "escribiendo" */
.no-public .ask-list { display:grid; gap:10px; margin-top:8px; }
.no-public .ask-item { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:12px 12px 12px 4px; padding:12px 16px 12px 40px; color:#e9edf3; font-size:14.5px; position:relative; }
.no-public .ask-item::before { content:'?'; position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#19b6c4; font-weight:700; font-family:'JetBrains Mono',monospace; }
.no-public .ask-typing { display:inline-flex; gap:5px; align-items:center; margin-top:14px; color:#8a97a8; font-size:12.5px; }
.no-public .ask-typing i { width:7px; height:7px; border-radius:50%; background:#19b6c4; display:inline-block; animation:askDot 1.2s infinite; }
.no-public .ask-typing i:nth-child(2){ animation-delay:.2s; } .no-public .ask-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes askDot { 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }
/* Naranja como co-acento a lo largo de /ia-viva (Ana 2026-08-11) */
.no-public #ia-cadena .ia-cnode:nth-child(2n) .icn-dot { background:#f6a83a; animation-name:iaPulseAmber; }
.no-public #ia-cadena .ia-cnode:nth-child(2n) .icn-ey { color:#f6a83a; }
@keyframes iaPulseAmber { 0%,100%{ box-shadow:0 0 0 4px rgba(246,168,58,.10); } 50%{ box-shadow:0 0 0 9px rgba(246,168,58,.30); } }
.no-public #ia-cadena .card-grid .card:nth-child(2n) .ic,
.no-public #ia-facturas .card-grid .card:nth-child(2n) .ic { color:#f6a83a; background:rgba(246,168,58,.16); border-color:rgba(246,168,58,.4); }
.no-public #ia-facturas .shot-frame { border-color:rgba(246,168,58,.4); background:linear-gradient(160deg, rgba(246,168,58,.06), rgba(255,255,255,.02)); }
.no-public #ia-facturas .shot-frame .sf-ic { background:rgba(246,168,58,.16); border-color:rgba(246,168,58,.4); color:#f6a83a; }
/* Bloque contraste (ad-vs) — textos claros sobre fondo oscuro */
.no-public:has(.page-dark) .ad-vs-col > p { color:#dbe5f2; font-size:18px; line-height:1.65; }
.no-public:has(.page-dark) .ad-vs-list li { color:#eaf1f8; font-size:17px; }
/* Vídeo demo — textos claros */
.no-public:has(.page-dark) .vv-text p { color:#dbe5f2; }
.no-public:has(.page-dark) .vv-list li { color:#e9edf3; }
/* Logos de integraciones a silueta blanca en cualquier marquee de página oscura */
.no-public:has(.page-dark) .logo-item { filter:grayscale(1) brightness(0) invert(1); opacity:.72; }
.no-public:has(.page-dark) .logo-item:hover { filter:none; opacity:1; }
/* Beneficios rediseñados: captura de la app en el centro, beneficios a los lados */
.no-public .benefits-orbit { display:grid; grid-template-columns:1fr minmax(320px,420px) 1fr; gap:44px 44px; align-items:center; margin-top:36px; }
.no-public .benefits-orbit .benefits-col { display:flex; flex-direction:column; gap:34px; }
.no-public .benefits-phone { display:flex; justify-content:center; }
.no-public .benefits-phone img { width:100%; max-width:400px; height:auto; border-radius:30px; box-shadow:0 34px 70px -24px rgba(0,0,0,.65); }
@media (max-width:900px){ .no-public .benefits-orbit { grid-template-columns:1fr; gap:30px; } .no-public .benefits-phone { order:-1; } .no-public .benefits-phone img { max-width:320px; } }
/* Funcionalidades (.card) en OSCURO en páginas .page-dark (Ana: como la captura del dosier, con brillo en la esquina sup. derecha) */
.no-public:has(.page-dark) .card { background:radial-gradient(130% 90% at 100% 0%, rgba(25,182,196,.16), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.12); box-shadow:none; }
.no-public:has(.page-dark) .card h3 { color:#ffffff; }
.no-public:has(.page-dark) .card p { color:#cfd6e2; }
.no-public:has(.page-dark) .card .ic { color:#19b6c4; background:rgba(25,182,196,.18); border:1px solid rgba(25,182,196,.40); }
/* Vídeo demo: el marco tipo móvil era #0D3454 y se fundía con el fondo oscuro → color de dispositivo que contraste */
.no-public:has(.page-dark) .vv-media { border-color:#1a2235; background:#0a0f1c; box-shadow:0 40px 80px -28px rgba(0,0,0,.6); }
.no-public:has(.page-dark) .vv-media video { background:#0a0f1c; }
/* Botón "volver arriba" en cian (como los botones) para que se vea sobre el fondo oscuro */
.no-public .scroll-top-fab { background:linear-gradient(135deg, #19b6c4, #0d8b97); color:#ffffff; box-shadow:0 10px 26px -8px rgba(25,182,196,.65); }
.no-public .scroll-top-fab:hover { background:linear-gradient(135deg, #22c7d6, #0f9aa8); }
/* Texto de las tarjetas de características un poco más grande */
.no-public .features-row.features-dark .feature-item .feature-lbl { font-size:19px; }
/* Módulos principales también en oscuro (antes banda azul clara #D6E7F6) */
.no-public:has(.page-dark) section.np#modulos-principales::before { background:#0D3454; }
.no-public:has(.page-dark) section.np#modulos-principales .section-title { color:#ffffff; }
.no-public:has(.page-dark) section.np#modulos-principales .section-head p { color:rgba(255,255,255,.78); }
.no-public:has(.page-dark) .modulo-card { background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.10); box-shadow:none; }
.no-public:has(.page-dark) .modulo-card h3 { color:#ffffff; }
.no-public:has(.page-dark) .modulo-card p, .no-public:has(.page-dark) .modulo-card ul li { color:#cfd6e2; }
.no-public:has(.page-dark) .modulo-card .mc-more { color:var(--mc, #19b6c4); }
/* Herramientas IA: tarjetas también oscuras (coherencia) + textos más grandes */
.no-public:has(.page-dark) .tool-card { background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.12); box-shadow:none; }
.no-public:has(.page-dark) .tool-card h3 { color:#ffffff; }
.no-public:has(.page-dark) .tool-card p, .no-public:has(.page-dark) .tool-card li { color:#cfd6e2; }
.no-public .herramientas-grid .tool-card h3 { font-size:30px; }
.no-public .herramientas-grid .tool-card p { font-size:19px; line-height:1.6; }
.no-public .herramientas-grid .tool-card ul li { font-size:18px; }
.no-public .herramientas-grid .tool-card .tool-more { font-size:18px; }
/* Hero mockup: mostrar la imagen completa, sin recorte 16/10 */
.no-public .netoffice-hero-media .laptop-screen img { aspect-ratio:auto; object-fit:contain; }
/* "Dónde vive el sistema" como features-dark de 2 columnas con subtexto */
.no-public .features-row.features-2 { grid-template-columns:repeat(2,1fr); max-width:920px; margin-left:auto; margin-right:auto; }
.no-public .feature-item .feature-sub { color:rgba(255,255,255,.72); font-size:14.5px; line-height:1.5; margin-top:2px; }
@media (max-width:700px){ .no-public .features-row.features-2 { grid-template-columns:1fr; } }

.no-public .testimonio .quote-mark { font-size:64px; color:var(--cian); line-height:.5; opacity:.5; }
.no-public .testimonio q { font-size:26px; line-height:1.45; letter-spacing:-.01em; display:block; margin-bottom:24px; }
.no-public .testimonio .author { color:var(--muted); font-size:14px; }
.no-public .testimonio .author strong { color:#fff; }

/* ════ CTA FINAL ════ */
.no-public .cta-final { padding:110px 32px; text-align:center; }
.no-public .cta-final h2 { font-size:clamp(36px,4.5vw,64px); letter-spacing:-.03em; line-height:1.05; margin-bottom:20px; max-width:900px; margin-left:auto; margin-right:auto; }
.no-public .cta-final p { font-size:19px; color:var(--muted); max-width:600px; margin:0 auto 36px; }
.no-public .cta-final .btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ════ HERO genérico subpáginas ════ */
.no-public .hero-page { padding:60px 32px 40px; max-width:1400px; margin:0 auto; position:relative; isolation:isolate; }
.no-public .hero-page > * { position:relative; z-index:1; }
.no-public .hero-page .eyebrow { display:inline-flex; gap:10px; align-items:center; color:var(--primary); font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px; font-family:'JetBrains Mono',monospace; }
.no-public .hero-page .eyebrow::before { content:""; width:32px; height:1px; background:var(--primary); }
.no-public .hero-page h1 { font-size:clamp(38px,5vw,72px); letter-spacing:-.025em; line-height:1.02; margin-bottom:22px; }
.no-public .hero-page p.sub { font-size:19px; color:var(--muted); line-height:1.55; margin-bottom:28px; max-width:780px; }
.no-public .hero-page.hero-full p.sub { max-width:none; width:100%; font-size:22px; }
/* /app-driver y /ia-viva — mismo tamaño de .sub que las heroes "hero-full" */
.no-public .hero-page.hero-driver:not(.hero-full) p.sub,
.no-public .hero-page.hero-with-media p.sub { font-size:22px; }
/* Quitar el check ✓ que .deep-row li::before mete a los <li> de la lista de contacto */
.no-public .deep-row .contacto-data--page li::before,
.no-public .contacto-data--page li::before { content:none !important; padding:0 !important; }
.no-public .contacto-data--page li { padding-left:0 !important; }

/* ════ HERO DRIVER (split: texto + mockup móvil) ════ */
.no-public .hero-driver { display:grid; grid-template-columns:1.3fr .7fr; gap:60px; align-items:center; }   /* el mockup mide 320px fijos y le sobraba sitio: se le da al texto (Ana 2026-10-08) */
/* 18px de separación con líneas de 34px: los párrafos se pegaban entre sí y
   no se veía dónde acababa uno y empezaba el siguiente. */
.no-public .hero-driver-text p.sub { margin-bottom:30px; line-height:1.68; }
.no-public .hero-driver-text p.sub:last-child { margin-bottom:0; }
.no-public .hero-driver-platforms { display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.no-public .platform-chip { display:inline-flex; align-items:center; gap:12px; padding:10px 18px 10px 14px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); }
.no-public .platform-chip .platform-ic { width:26px; height:26px; fill:#fff; flex-shrink:0; }
.no-public .platform-chip .platform-meta { display:flex; flex-direction:column; line-height:1.15; }
.no-public .platform-chip .platform-meta small { font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.no-public .platform-chip .platform-meta b { font-size:16px; color:#fff; letter-spacing:-.005em; }
.no-public .hero-driver-media { display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }
.no-public .hero-driver-media .driver-pill { position:absolute; top:18px; right:18px; bottom:auto; left:auto; transform:none; white-space:nowrap; z-index:3; }
.no-public .hero-driver-media img { max-width:100%; max-height:640px; width:auto; height:auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.45)); }
@media (max-width:960px) {
  .no-public .hero-driver { grid-template-columns:1fr; gap:32px; }
  .no-public .hero-driver-media img { max-height:520px; }
}

/* ════ STD section + card grid (subpáginas) ════ */
.no-public section.std { padding:80px 32px; max-width:1400px; margin:0 auto; }
.no-public .card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.no-public .card { padding:28px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005)); border:1px solid var(--line); border-radius:14px; transition:all .2s; display:block; }
.no-public .card:hover { transform:translateY(-3px); border-color:var(--primary); }
/* (v2) estilo .card .ic gestionado arriba — círculo cian con SVG line-art */
.no-public .card h3 { font-size:18px; margin-bottom:8px; color:#fff; }
.no-public .card p { font-size:16.5px; color:var(--muted); line-height:1.6; }

/* ════ Features row (lista horizontal con icono + texto) ════ */
.no-public .features-row { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; padding:48px 0; }
.no-public .feature-item { display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; padding:28px 20px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005)); border:1px solid var(--line); border-radius:14px; transition:transform .2s, border-color .2s; }
.no-public .feature-item:hover { transform:translateY(-3px); border-color:var(--primary); }
.no-public .feature-item .feature-ic { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg, rgba(25,182,196,.18), rgba(25,182,196,.06)); border:1px solid rgba(25,182,196,.35); color:var(--cian); box-shadow:0 0 0 4px rgba(25,182,196,.06), 0 8px 24px -10px rgba(25,182,196,.6); }
.no-public .feature-item .feature-ic svg { width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .feature-item .feature-lbl { color:#fff; font-size:17px; line-height:1.45; letter-spacing:-.005em; }
@media (max-width:960px) { .no-public .features-row { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .no-public .features-row { grid-template-columns:1fr; } }

/* /netoffice — variante oscura de features-row (azul-a-navy suavizado para que siga siendo legible) */
.no-public .features-row.features-dark {
  background:linear-gradient(140deg, #2170B3 0%, #164876 100%);
  border:1px solid rgba(255,255,255,.14); border-radius:24px;
  padding:40px 36px;
  box-shadow:0 24px 48px -26px rgba(0,0,0,.35);
}
.no-public .features-row.features-dark .feature-item { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }
.no-public .features-row.features-dark .feature-item .feature-lbl { color:#ffffff; }

/* ════ Stats row + deep row ════ */
.no-public .stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:48px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.no-public .stat { text-align:center; }
.no-public .stat .v { font-size:48px; color:#fff; font-family:'JetBrains Mono',monospace; line-height:1; letter-spacing:-.025em; }
.no-public .stat .v small { color:var(--cian); font-size:24px; }
.no-public .stat .l { margin-top:10px; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
/* /netoffice/taller — solo 3 stats, la rejilla de 4 columnas los dejaba pegados a la izquierda */
.no-public .taller-stats .stats-row { grid-template-columns:repeat(3,1fr); max-width:900px; margin:0 auto; }
@media (max-width:700px) { .no-public .taller-stats .stats-row { grid-template-columns:1fr; } }
.no-public .deep-row { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding:48px 0; border-top:1px solid var(--line); align-items:center; }
.no-public .deep-row.reverse > div:first-child { order:2; }
.no-public .deep-row .badge { display:inline-block; padding:5px 12px; background:rgba(47,120,203,.15); color:#2170B3; border-radius:5px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; }
.no-public .deep-row h3 { font-size:32px; letter-spacing:-.015em; line-height:1.1; margin-bottom:14px; color:#fff; }
.no-public .deep-row p { font-size:16px; color:var(--muted); line-height:1.65; margin-bottom:18px; }
.no-public .deep-row strong { color:#fff; }
.no-public .deep-row ul { list-style:none; }
.no-public .deep-row li { padding:8px 0 8px 28px; position:relative; font-size:14.5px; color:#cfd6e2; }
.no-public .deep-row li::before { content:"✓"; position:absolute; left:0; color:var(--cian); }
.no-public .deep-visual { background:linear-gradient(165deg, #0e1a35, #081225); border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:0 30px 60px -20px rgba(0,0,0,.5); font-family:'JetBrains Mono',monospace; font-size:13px; line-height:1.85; color:#cdd5e0; }
.no-public .deep-visual .c { color:var(--cian); }
.no-public .deep-visual .g { color:#52d199; }
.no-public .deep-visual .y { color:#ffb756; }
.no-public .deep-visual .r { color:#ff7373; }
.no-public .deep-visual .label-mini { display:inline-block; padding:3px 10px; background:rgba(47,120,203,.18); color:#2170B3; border-radius:4px; font-size:12px; margin-bottom:14px; text-transform:uppercase; letter-spacing:.06em; }

/* v2 — captura de pantalla dentro de un deep-row (sustituye al deep-visual de texto) */
.no-public .deep-shot { position:relative; display:flex; justify-content:center; align-items:center; }
.no-public .deep-shot img { max-width:100%; height:auto; border-radius:14px; border:1px solid var(--line); box-shadow:0 30px 60px -20px rgba(0,0,0,.55); }
.no-public .deep-shot .ws-pill { position:absolute; top:18px; right:18px; bottom:auto; left:auto; width:auto; white-space:nowrap; }

/* v2 — deep-row con banda clara (modifier .light-band) */
.no-public .deep-row.light-band { position:relative; isolation:isolate; padding:60px 32px; border-top:none; }
.no-public .deep-row.light-band > * { position:relative; z-index:1; }
.no-public .deep-row.light-band::before {
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; background:#f4f7fb; z-index:0;
}
.no-public .deep-row.light-band h3 { color:#0D3454; }
.no-public .deep-row.light-band p { color:#4a5b73; }
.no-public .deep-row.light-band strong { color:#0D3454; }
.no-public .deep-row.light-band li { color:#4a5b73; }
.no-public .deep-row.light-band .badge { background:#e3f0fc; color:#2170b3; }
.no-public .deep-row.light-band .deep-visual { background:#fff; border-color:#e4eaf2; color:#0D3454; box-shadow:0 10px 30px -12px rgba(13,52,84,.18); }
.no-public .deep-row.light-band .deep-visual .label-mini { background:#e3f0fc; color:#2170b3; }

/* ════ CTA band (subpáginas) ════ */
.no-public .cta-band { padding:90px 32px; text-align:center; border-top:1px solid var(--line); max-width:1400px; margin:0 auto; }
.no-public .cta-band h2 { font-size:48px; letter-spacing:-.025em; margin-bottom:18px; }
.no-public .cta-band p { font-size:18px; color:var(--muted); margin-bottom:28px; }

/* ════ FOOTER ════ */
.no-public footer.site { border-top:1px solid var(--line); padding:60px 32px 32px; background:#050a16; }
.no-public footer.site .wrap { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px; }
.no-public footer.site .f-brand img { height:36px; filter:brightness(0) invert(1); margin-bottom:16px; }
.no-public footer.site .f-brand p { color:var(--muted); font-size:14px; line-height:1.6; max-width:300px; }
.no-public footer.site h5 { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:16px; }
.no-public footer.site ul { list-style:none; }
.no-public footer.site li { margin-bottom:10px; font-size:13.5px; color:#cfd6e2; }
.no-public footer.site li a:hover { color:var(--cian); }
.no-public footer.site .legal { max-width:1400px; margin:48px auto 0; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:20px; color:var(--muted); }
.no-public footer.site .legal a:hover { color:var(--cian); }

/* ════ RESPONSIVE ════ */
/* El menú tiene 9 entradas: a 19px caben hasta ~1233px. Entre 1100 y 1260px
   compactamos tipografía y espaciado para que no se desborden tras el CTA
   (síntoma "no sale siempre el menú"). Por encima de 1260px se conservan los 19px. */
@media (max-width:1260px) {
  .no-public .topbar .wrap { gap:18px; padding:14px 22px; }
  .no-public nav.main { gap:15px; font-size:16.5px; }
  .no-public nav.main .has-submenu > a::after { margin-left:4px; }
}
/* Por debajo de 1100px ni compactando caben: menú hamburguesa. */
@media (max-width:1100px) {
  .no-public nav.main, .no-public .topbar .cta { display:none; }
  .no-public .mobile-toggle { display:inline-flex; }
}
@media (max-width:1024px) {
  .no-public .hero { grid-template-columns:1fr; padding-top:60px; }
  .no-public .hero-stats { grid-template-columns:repeat(2,1fr); }
  .no-public .modulos { grid-template-columns:repeat(2,1fr); }
  .no-public .ia-grid, .no-public .deploy, .no-public .deep-row, .no-public .card-grid, .no-public .stats-row { grid-template-columns:1fr; }
  .no-public .deep-row.reverse > div:first-child { order:0; }
  .no-public .roadmap-timeline::before { display:none; }
  .no-public .roadmap-points { grid-template-columns:1fr; }
  .no-public .integ-grid { grid-template-columns:repeat(3,1fr); }
  .no-public footer.site .wrap { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .no-public .hero-stats, .no-public .modulos, .no-public .integ-grid, .no-public footer.site .wrap { grid-template-columns:1fr; }
  .no-public .topbar .wrap, .no-public section.np, .no-public section.std { padding-left:20px; padding-right:20px; }
}

/* ════════════════ Páginas internas (ContentPage / SectionPage / Blog / Contacto) ════════════════ */

/* Loader */
.no-public .page-loader { display:flex; justify-content:center; align-items:center; min-height:50vh; }
.no-public .page-loader-spinner { width:42px; height:42px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--cian); animation:np-spin .8s linear infinite; }
@keyframes np-spin { to { transform:rotate(360deg); } }

/* Rich content (Page.Content HTML) */
.no-public .rich-content { font-size:16.5px; color:#cfd6e2; line-height:1.75; max-width:none; width:100%; }

/* ════ Split row (rich-content + media en 2 columnas) ════ */
.no-public .split-row { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.no-public .split-media { display:flex; justify-content:center; position:relative; }
.no-public .split-media::before {
  content:'';
  position:absolute;
  top:-8%; left:-10%; right:-10%; bottom:-8%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.55) 0%, #2170b3 60%);
  border-radius:24px;
  transform:rotate(1deg);
  filter:blur(55px);
  opacity:.35;
  z-index:0;
  pointer-events:none;
}
.no-public .split-media img { position:relative; z-index:1; max-width:100%; height:auto; border-radius:14px; border:1px solid var(--line); box-shadow:0 30px 60px -20px rgba(0,0,0,.55); }
@media (max-width:960px) {
  .no-public .split-row { grid-template-columns:1fr; gap:28px; }
}

.no-public .rich-content > * + * { margin-top:1.1em; }
.no-public .rich-content h2 { font-size:30px; color:#fff; letter-spacing:-.02em; margin-top:1.6em; margin-bottom:.4em; }
.no-public .rich-content h2 + p, .no-public .rich-content h2 + ul, .no-public .rich-content h2 + ol, .no-public .rich-content h2 + blockquote { margin-top:.4em; }
.no-public .rich-content h2:first-child { margin-top:0; }
.no-public .rich-content h3 { font-size:22px; color:#fff; letter-spacing:-.01em; margin-top:1.4em; }
.no-public .rich-content h4 { font-size:18px; color:#fff; margin-top:1.2em; }
.no-public .rich-content p { color:#cfd6e2; }
.no-public .rich-content strong { color:#fff; }
.no-public .rich-content a { color:var(--cian); text-decoration:underline; text-underline-offset:3px; }
.no-public .rich-content ul, .no-public .rich-content ol { padding-left:0; list-style:none; }
.no-public .rich-content ul li { position:relative; padding:6px 0 6px 26px; }
.no-public .rich-content ul li::before { content:"✓"; position:absolute; left:0; color:var(--cian); }
.no-public .rich-content ol { counter-reset:np; }
.no-public .rich-content ol li { position:relative; padding:6px 0 6px 30px; counter-increment:np; }
.no-public .rich-content ol li::before { content:counter(np); position:absolute; left:0; color:var(--cian); font-family:'JetBrains Mono',monospace; }
.no-public .rich-content blockquote { border-left:3px solid var(--cian); padding:6px 0 6px 20px; color:#fff; font-size:20px; font-style:italic; }
.no-public .rich-content code { background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:5px; padding:2px 7px; font-family:'JetBrains Mono',monospace; font-size:13.5px; color:var(--cian); }
.no-public .rich-content img { border-radius:12px; border:1px solid var(--line); margin:1.4em 0; }
.no-public .rich-content table { width:100%; border-collapse:collapse; font-size:14px; }
.no-public .rich-content th, .no-public .rich-content td { border:1px solid var(--line); padding:10px 12px; text-align:left; }
.no-public .rich-content th { background:rgba(255,255,255,.04); color:#fff; }

/* 404 */
.no-public .not-found { text-align:center; padding:80px 0; max-width:680px; margin:0 auto; }
.no-public .not-found-code { font-size:96px; font-family:'JetBrains Mono',monospace; color:var(--cian); line-height:1; opacity:.6; }
.no-public .not-found h1 { font-size:34px; margin:12px 0 14px; color:#fff; }
.no-public .not-found-lead { color:var(--muted); margin-bottom:24px; }
.no-public .not-found-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* Sub-page cards (hub /netoffice, /legal…) — usa .card-grid/.card; variante con acento de color */
.no-public .card.accent { position:relative; overflow:hidden; }
.no-public .card.accent::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--c,var(--cian)); }
.no-public .card .card-letter { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#0a0f1c; font-family:'JetBrains Mono',monospace; font-size:15px; margin-bottom:14px; background:var(--c,var(--cian)); }
.no-public .card .card-more { display:inline-flex; align-items:center; gap:6px; color:var(--cian); font-size:14.5px; margin-top:14px; }

/* ════ Blog ════ */
.no-public .blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.no-public .post-card { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.025), transparent); transition:all .2s; }
.no-public .post-card:hover { transform:translateY(-4px); border-color:var(--cian); }
.no-public .post-card .pc-cover { aspect-ratio:16/9; background:linear-gradient(135deg,#0e1a35,#0a2740); object-fit:cover; width:100%; }
.no-public .post-card .pc-body { padding:20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.no-public .post-card .pc-cat { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--cian); font-family:'JetBrains Mono',monospace; }
.no-public .post-card .pc-date { font-size:12px; color:var(--muted); }
.no-public .post-card h3 { font-size:18px; color:#fff; letter-spacing:-.01em; line-height:1.25; }
.no-public .post-card p { font-size:14px; color:var(--muted); line-height:1.55; flex:1; }
.no-public .post-card .pc-more { color:var(--cian); font-size:13px; margin-top:6px; }
.no-public .filter-bar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; align-items:center; }
.no-public .fchip { padding:7px 16px; border-radius:50px; border:1px solid var(--line); color:var(--muted); font-size:13px; cursor:pointer; background:transparent; transition:all .2s; text-decoration:none; }
.no-public .fchip:hover, .no-public .fchip.on { color:#fff; border-color:var(--cian); background:rgba(25,182,196,.1); }

/* ════ Post (artículo) ════ */
.no-public .post-article { max-width:820px; margin:0 auto; padding:40px 32px 0; }
.no-public .post-article .post-meta { display:flex; gap:16px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:13px; font-family:'JetBrains Mono',monospace; margin-bottom:18px; }
.no-public .post-article .post-meta .cat { color:var(--cian); }
.no-public .post-article h1 { font-size:clamp(32px,4vw,52px); letter-spacing:-.025em; line-height:1.08; color:#fff; margin-bottom:18px; }
.no-public .post-article .lede { font-size:20px; color:#cfd6e2; line-height:1.5; margin-bottom:28px; }
.no-public .post-cover { max-width:1100px; margin:0 auto 36px; padding:0 32px; }
.no-public .post-cover img { width:100%; border-radius:16px; border:1px solid var(--line); }

/* ════ Formulario (FormRenderer) ════ */
.no-public .contact-form { display:flex; flex-direction:column; gap:16px; max-width:680px; }
.no-public .contact-form-row { display:flex; gap:16px; }
.no-public .contact-form-col { flex:1; }
.no-public .form-input, .no-public .form-textarea { width:100%; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:9px; padding:13px 15px; color:#fff; font-family:inherit; font-size:15px; transition:border-color .2s, box-shadow .2s; }
.no-public .form-input::placeholder, .no-public .form-textarea::placeholder { color:var(--muted); }
.no-public .form-input:focus, .no-public .form-textarea:focus { outline:none; border-color:var(--cian); box-shadow:0 0 0 3px rgba(25,182,196,.15); }
.no-public .form-textarea { resize:vertical; min-height:130px; }
.no-public .form-checkbox { display:flex; align-items:flex-start; gap:10px; color:#cfd6e2; font-size:14px; }
.no-public .form-error { color:#ff8a8a; font-size:14px; }
.no-public .form-success { color:var(--verde); font-size:16px; padding:24px; border:1px solid rgba(43,182,115,.3); border-radius:12px; background:rgba(43,182,115,.06); }
.no-public .gdpr-block { border:1px solid var(--line); border-radius:10px; padding:16px; background:rgba(255,255,255,.02); }
.no-public .gdpr-info-title { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:10px; }
.no-public .gdpr-table { width:100%; border-collapse:collapse; font-size:12.5px; color:var(--muted); }
.no-public .gdpr-table td { padding:5px 8px; vertical-align:top; border-bottom:1px solid var(--line); }
.no-public .gdpr-table strong { color:#cfd6e2; }
.no-public .gdpr-table a { color:var(--cian); }
.no-public .gdpr-checkbox { display:flex; align-items:flex-start; gap:10px; color:#cfd6e2; font-size:13.5px; }
.no-public .btn-primary { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:14px 26px; border-radius:9px; border:none; cursor:pointer; font-family:inherit; font-size:16px; background:linear-gradient(135deg,var(--cian),#0d8b97); color:#fff; box-shadow:0 8px 24px -8px var(--cian); transition:transform .2s; }
.no-public .btn-primary:hover:not(:disabled) { transform:translateY(-1px); }
.no-public .btn-primary:disabled { opacity:.5; cursor:not-allowed; }

/* Info cards (contacto) */
.no-public .info-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.no-public .info-card { border:1px solid var(--line); border-radius:12px; padding:22px; background:rgba(255,255,255,.02); }
.no-public .info-card .ic-ic { font-size:22px; margin-bottom:10px; }
.no-public .info-card h4 { color:#fff; font-size:15px; margin-bottom:6px; }
.no-public .info-card p, .no-public .info-card a { color:var(--muted); font-size:14px; }
.no-public .info-card a:hover { color:var(--cian); }

@media (max-width:1024px) {
  .no-public .blog-grid { grid-template-columns:repeat(2,1fr); }
  .no-public .info-cards { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .no-public .blog-grid { grid-template-columns:1fr; }
  .no-public .contact-form-row { flex-direction:column; }
}

/* ════ Showcase "Tu operativa en una sola pantalla" (home) ════ */
.no-public .showcase { padding-top:60px; padding-bottom:60px; }
.no-public .showcase-grid { display:grid; grid-template-columns:0.95fr 1.05fr; gap:56px; align-items:center; }
.no-public .showcase-text .eyebrow-line { margin-bottom:18px; }
.no-public .showcase-text h2 { font-size:clamp(30px,3.6vw,48px); letter-spacing:-.025em; line-height:1.08; color:#fff; margin-bottom:18px; }
.no-public .showcase-text .lead { font-size:18.5px; color:#cfd6e2; line-height:1.6; margin-bottom:22px; }
.no-public .showcase-text ul { list-style:none; margin-bottom:28px; }
.no-public .showcase-text li { position:relative; padding:8px 0 8px 30px; color:#cfd6e2; font-size:15.5px; }
.no-public .showcase-text li::before { content:"✓"; position:absolute; left:0; top:8px; color:var(--cian); font-weight:bold; }
/* Escena de escritorio moderno: portátil de pantalla grande con la captura
   principal + 2 pantallas flotantes con las otras capturas. */
.no-public .showcase-media { position:relative; }
/* "Tu operativa, en una sola pantalla": maqueta de WORKSPACE NetOffice — barra lateral de
   módulos + 4 widgets (planificación tipo gantt, eCMR+OCR, cartera y Power BI). Composición
   distinta del cockpit del hero, misma estética oscura/cian. */
.no-public .workspace-mock { position:relative; }
.no-public .ws-frame { background:linear-gradient(165deg,#0e1a35 0%,#081225 100%); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 36px 72px -26px rgba(0,0,0,.6), 0 0 0 1px rgba(25,182,196,.12); }
.no-public .ws-bar { display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02); }
.no-public .ws-dot { width:10px; height:10px; border-radius:50%; }
.no-public .ws-dot.r{background:#ff5f56;} .no-public .ws-dot.a{background:#ffbd2e;} .no-public .ws-dot.g{background:#27c93f;}
.no-public .ws-title { margin-left:8px; font-size:12px; color:var(--muted); font-family:'JetBrains Mono',monospace; }
.no-public .ws-ai { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--cian); border:1px solid rgba(25,182,196,.35); border-radius:20px; padding:3px 10px; background:rgba(25,182,196,.08); }
.no-public .ws-body { display:flex; }
.no-public .ws-side { display:flex; flex-direction:column; gap:8px; padding:14px 11px; border-right:1px solid var(--line); background:rgba(0,0,0,.18); }
.no-public .ws-ico { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; color:#0a0f1c; background:var(--c); opacity:.5; transition:opacity .2s,transform .2s,box-shadow .2s; }
.no-public .ws-ico.active { opacity:1; box-shadow:0 0 0 2px rgba(25,182,196,.55), 0 6px 14px -4px var(--c); transform:translateX(2px); }
.no-public .ws-main { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px; }
.no-public .ws-card { background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:10px; padding:12px; min-height:120px; }
.no-public .ws-card h5 { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:0 0 10px; }
.no-public .ws-gantt { display:flex; flex-direction:column; gap:7px; }
.no-public .g-row { display:flex; align-items:center; gap:8px; }
.no-public .g-lbl { width:62px; font-size:10px; color:#9fb0c8; font-family:'JetBrains Mono',monospace; flex-shrink:0; }
.no-public .g-track { position:relative; flex:1; height:11px; background:rgba(255,255,255,.04); border-radius:4px; }
.no-public .g-bar { position:absolute; top:0; height:11px; border-radius:4px; }
.no-public .g-bar.c1{background:#f59e0b;} .no-public .g-bar.c2{background:#19b6c4;} .no-public .g-bar.c3{background:#c084fc;} .no-public .g-bar.c4{background:#22d3ee;}
.no-public .ws-doc { display:flex; gap:12px; }
.no-public .doc-thumb { width:52px; height:70px; border-radius:5px; background:linear-gradient(160deg,#13233f,#0c1830); border:1px solid var(--line); position:relative; overflow:hidden; flex-shrink:0; }
.no-public .doc-thumb::before { content:""; position:absolute; left:7px; right:7px; top:9px; height:2px; background:rgba(159,176,200,.4); box-shadow:0 6px 0 rgba(159,176,200,.3),0 12px 0 rgba(159,176,200,.24),0 18px 0 rgba(159,176,200,.18),0 24px 0 rgba(159,176,200,.13),0 30px 0 rgba(159,176,200,.1); }
.no-public .doc-thumb .scan { position:absolute; left:0; right:0; height:14px; background:linear-gradient(180deg, rgba(25,182,196,.55), transparent); animation:ws-scan 2.6s ease-in-out infinite; }
@keyframes ws-scan { 0%{top:-14px;} 50%{top:56px;} 100%{top:-14px;} }
.no-public .doc-fields { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.no-public .doc-fields li { font-size:11px; color:#cfd6e2; }
.no-public .doc-fields b { color:var(--verde); margin-right:5px; }
.no-public .ws-cartera { display:flex; flex-direction:column; gap:7px; }
.no-public .c-line { display:flex; justify-content:space-between; align-items:center; font-size:11.5px; color:var(--muted); }
.no-public .c-line b { font-family:'JetBrains Mono',monospace; color:#fff; font-size:12px; font-weight:600; }
.no-public .c-line b.up { color:var(--verde); } .no-public .c-line b.down { color:var(--rojo); }
.no-public .c-prog { height:7px; border-radius:4px; background:rgba(255,255,255,.06); overflow:hidden; margin-top:4px; }
.no-public .c-prog i { display:block; height:100%; background:linear-gradient(90deg,var(--cian),#19b6c4); }
.no-public .ws-chart { height:74px; }
.no-public .ws-chart svg { width:100%; height:100%; display:block; }
.no-public .ws-pill { position:absolute; bottom:-16px; right:18px; display:inline-flex; align-items:center; gap:7px; background:linear-gradient(135deg,#19b6c4,#0d8b97); padding:9px 15px; border-radius:30px; font-size:12px; color:#fff; box-shadow:0 12px 30px -8px var(--cian); animation:np-float 4s ease-in-out infinite; }
@media (max-width:560px) { .no-public .ws-main { grid-template-columns:1fr; } }
.no-public .desk-scene { position:relative; padding:24px 4% 42px; }
.no-public .desk-scene::after { content:""; position:absolute; top:-50px; right:-20px; width:320px; height:320px; background:radial-gradient(circle, rgba(25,182,196,.16), transparent 62%); pointer-events:none; z-index:0; }
.no-public .laptop { position:relative; width:84%; margin:0 auto; z-index:2; filter:drop-shadow(0 42px 48px rgba(0,0,0,.55)); }
.no-public .laptop-screen { position:relative; background:#0e1626; border:2px solid #243352; border-radius:14px 14px 5px 5px; padding:9px; }
.no-public .laptop-screen img { width:100%; display:block; border-radius:5px; aspect-ratio:16/10; object-fit:cover; background:#0a1830; }
.no-public .laptop-base { position:relative; left:-9%; width:118%; height:17px; background:linear-gradient(180deg,#cdd3dd 0%,#9aa3b1 55%,#7b8492 100%); border-radius:0 0 11px 11px; clip-path:polygon(4% 0,96% 0,100% 100%,0 100%); box-shadow:0 10px 16px -7px rgba(0,0,0,.55); }
.no-public .laptop-base::before { content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:15%; height:6px; background:#737d8c; border-radius:0 0 7px 7px; }
.no-public .float-screen { position:absolute; aspect-ratio:16/10; border-radius:10px; overflow:hidden; border:1px solid var(--line); box-shadow:0 26px 42px -16px rgba(0,0,0,.62); z-index:3; background:#0a1830; transition:transform .3s ease; }
.no-public .float-screen img { width:100%; height:100%; object-fit:cover; display:block; }
.no-public .float-screen.fs-1 { width:40%; bottom:14px; left:-3%; transform:rotate(-4deg); }
.no-public .float-screen.fs-2 { width:34%; top:-8px; right:-2%; transform:rotate(4deg); }
.no-public .desk-scene:hover .float-screen.fs-1 { transform:rotate(-4deg) translateY(-4px); }
.no-public .desk-scene:hover .float-screen.fs-2 { transform:rotate(4deg) translateY(-4px); }
@media (max-width:600px) {
  .no-public .laptop { width:100%; }
  .no-public .float-screen { display:none; }
}
@media (max-width:1024px) {
  .no-public .showcase-grid { grid-template-columns:1fr; gap:32px; }
}

/* ════════════════════════════════════════════════════════════════
   v3 — LIGHT THEME OVERRIDE
   Paleta: #19b6c4 (cian), #f6a83a (naranja), #2170B3 (azul oscuro)
   Fondo blanco + bandas suaves; banners de acento en azul oscuro.
   Ordenado por bloques (paleta · layout · topbar · hero · cards ·
   secciones específicas · banners · footer · botones).
═══════════════════════════════════════════════════════════════════ */

/* ── paleta oficial NetOffice (5 colores + neutros) ── */
.no-public {
  /* Colores oficiales */
  --no-deep:#0D3454;       /* Azul profundo — fondos oscuros, h1 */
  --no-blue:#2170B3;       /* Azul NetOffice — links, eyebrows, acento principal */
  --no-cian:#19b6c4;       /* Cian — CTAs, badges, hover */
  --no-orange:#f6a83a;     /* Naranja — acentos h2, números */
  --no-sky:#EEF4FA;        /* Cielo — fondos suaves, bandas */
  /* Neutros */
  --no-ink:#0D3454;        /* Headings */
  --no-text:#1a2433;       /* Texto cuerpo */
  --no-text-2:#3a4a61;     /* Texto secundario */
  --no-muted:#6b7a90;      /* Labels, captions */
  --no-line:rgba(33,112,179,.14);
  /* Aliases legacy (se mantienen para no romper, mapean a la paleta) */
  --bg:#ffffff; --bg-2:var(--no-sky); --line:var(--no-line);
  --txt:var(--no-text); --muted:var(--no-muted);
  --primary:var(--no-blue); --primary-dark:var(--no-deep);
  --no-azul:var(--no-blue); --no-azul-deep:var(--no-deep);
  background:#ffffff; color:var(--no-text);
}
.no-public p { color:#3a4a61; }
.no-public h1, .no-public h2, .no-public h3, .no-public h4, .no-public h5, .no-public h6 { color:#2170B3; }

/* ── topbar / logo / nav ── (fondo azul oscuro NetOffice) */
.no-public .topbar { background:#0D3454; border-bottom:1px solid rgba(255,255,255,.10); }
.no-public .topbar.scrolled { background:#0D3454; backdrop-filter:none; box-shadow:0 6px 22px -16px rgba(0,0,0,.45); }
.no-public .brand img { filter:brightness(0) invert(1); }
.no-public nav.main > a, .no-public nav.main .has-submenu > a { color:#ffffff; }
.no-public nav.main a:hover, .no-public nav.main a.active { color:#19b6c4; }
.no-public .submenu { background:#0D3454; border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 40px -16px rgba(0,0,0,.5); }
.no-public .submenu a { color:#ffffff; }
.no-public .submenu a:hover { background:rgba(255,255,255,.08); color:#19b6c4; }
.no-public .btn-ghost { color:#ffffff; border:1px solid rgba(255,255,255,.35); background:transparent; }
.no-public .btn-ghost:hover { background:rgba(255,255,255,.08); }
.no-public .mobile-toggle { color:#ffffff; }
.no-public .mobile-menu { background:#0D3454; }
.no-public .mobile-menu a { color:#ffffff; }
.no-public .mobile-menu a:hover { color:#19b6c4; }

/* ── breadcrumb / subnav ── */
.no-public .subnav { background:#f4f7fb; border-bottom:1px solid rgba(33,112,179,.08); }
.no-public .subnav a, .no-public .subnav span { color:#6b7a90; }
.no-public .subnav a:hover { color:#2170B3; }

/* ── hero ── */
.no-public .hero-page::before {
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; background:linear-gradient(180deg, #f8fbff 0%, #fafcfe 35%, #fdfeff 65%, #ffffff 100%); z-index:0;
}
.no-public .hero-page h1 { color:#0D3454; }
.no-public .hero-page .sub { color:#3a4a61; max-width:none !important; }
.no-public .hero-page .eyebrow { color:#19b6c4; }
.no-public .hero-stats .num { color:#2170B3; }
.no-public .hero-stats .lbl { color:#6b7a90; }

/* ── tipografía utilitaria ── (eyebrow texto plano azul NetOffice, sin píldora) */
.no-public .eyebrow-line,
.no-public .eyebrow-line.orange,
.no-public .eyebrow-line.amber,
.no-public .eyebrow-line.emerald,
.no-public section.np#capacidades-trafico .planificacion-text .eyebrow-line.orange,
.no-public .timer-text .eyebrow-line.orange,
.no-public section.np#powerbi .powerbi-text .eyebrow-line.orange,
.no-public .hero-page .eyebrow,
.no-public section.np#contacto-final .contacto-chip { background:transparent !important; border:none !important; padding:0 !important; color:#2170B3 !important; font-size:15px !important; letter-spacing:.12em !important; }
/* todas las variantes ahora en azul NetOffice (uniforme en toda la web) */
.no-public .section-title { color:#0D3454; }
.no-public .section-head p { color:#3a4a61; }

/* ── stats-row ── */
.no-public .stats-row { background:transparent; }
.no-public .stat { background:#ffffff; border:1px solid rgba(33,112,179,.12); border-radius:14px; box-shadow:0 8px 22px -16px rgba(13,52,84,.15); }
.no-public .stat .v { color:#2170B3; }
.no-public .stat .v small { color:#f6a83a; }
.no-public .stat .l { color:#6b7a90; }

/* ── cards genéricas (card-grid) ── */
.no-public .card { background:#ffffff; border:1px solid rgba(33,112,179,.12); box-shadow:0 10px 26px -18px rgba(13,52,84,.15); }
.no-public .card h3 { color:#0D3454; }
.no-public .card p { color:#4a5b73; }
.no-public .card .ic { color:#2170B3; }
.no-public .card .card-tag { background:rgba(25,182,196,.12); color:#0e7a85; border:1px solid rgba(25,182,196,.30); }
.no-public .card .card-more { color:#2170B3; }

/* ── cards "modulo" (hub /netoffice) ── */
.no-public .modulo-card { background:#ffffff; border:1px solid rgba(33,112,179,.12); box-shadow:0 16px 38px -22px rgba(13,52,84,.18); }
.no-public .modulo-card h3 { color:#0D3454; }
.no-public .modulo-card p, .no-public .modulo-card ul li { color:#4a5b73; }
.no-public .modulo-card .mc-more { color:#2170B3; }

/* ── deep-row (OCR / algoritmo / power BI) ── */
.no-public .deep-row h3 { color:#0D3454; }
.no-public .deep-row p { color:#4a5b73; }
.no-public .ia-doc-section .deep-row li { color:#000000; font-size:17.5px; }
.no-public .deep-row .badge { background:rgba(33,112,179,.10); color:#2170B3; border:1px solid rgba(33,112,179,.20); }
/* visual mono: lo dejo como acento azul oscuro (banner) para romper monotonía */
.no-public .deep-visual { background:linear-gradient(165deg, #2170B3 0%, #0D3454 100%); border:1px solid rgba(33,112,179,.4); color:#dbe5f2; box-shadow:0 20px 42px -22px rgba(33,112,179,.45); }
.no-public .deep-row.light-band { background:#f4f7fb; border-radius:18px; padding:36px; }
.no-public .deep-row.light-band .deep-visual { background:#ffffff; border-color:rgba(33,112,179,.14); color:#2170B3; box-shadow:0 10px 30px -14px rgba(13,52,84,.15); }

/* ── tool-card (herramientas) ── */
.no-public .tool-card { background:#ffffff; border:1px solid rgba(33,112,179,.12); box-shadow:0 14px 32px -20px rgba(13,52,84,.18); }
.no-public .tool-card h3 { color:#0D3454; }
.no-public .tool-card p, .no-public .tool-card li { color:#4a5b73; }
.no-public .tool-card .tool-tag { background:rgba(246,168,58,.18); color:#a35c00; border:1px solid rgba(246,168,58,.45); }
.no-public .tool-card .tool-tag.tool-tag-cian { color:#0e7a85; }

/* ── driver-box (App conductor en /netoffice/transporte) ── */
/* lo convertimos a banner banco con borde de acento — mantiene el "marco" visual */
.no-public .driver-box { background:linear-gradient(160deg, #ffffff 0%, #f4f7fb 100%); border:1px solid rgba(33,112,179,.12); border-radius:24px; box-shadow:0 30px 60px -28px rgba(13,52,84,.15); }
.no-public .driver-box-text h2.section-title { color:#0D3454; }
.no-public .driver-box-text p { color:#4a5b73; }
.no-public .driver-box-list li { color:#1a2433; }
.no-public .driver-box-list li .dbl-ic { background:rgba(33,112,179,.08); border:1px solid rgba(33,112,179,.22); color:#f6a83a; }

/* ── ecmr-box ya era light, sólo ajustes finos ── */
.no-public .ecmr-box { background:linear-gradient(160deg, #ffffff 0%, #f4f7fb 100%); border:1px solid rgba(33,112,179,.12); }

/* Móviles eCMR: sombra siguiendo silueta del PNG (no el bounding box → desaparece el "marco" rectangular) */
.no-public .ecmr-media .ecmr-tablet,
.no-public .ecmr-media .ecmr-phone { box-shadow:none !important; border-radius:0 !important; filter:drop-shadow(0 22px 36px rgba(13,52,84,.32)); }

/* Cards (.card-grid > .card): borde más visible en azul oscuro
   Nota: section.np#capacidades-trafico .card tiene mayor especificidad y forzaba border-color blanco translúcido */
.no-public .card-grid .card,
.no-public section.np#capacidades-trafico .card { border:1.5px solid rgba(33,112,179,.28) !important; box-shadow:0 14px 30px -20px rgba(13,52,84,.20); }
.no-public .card-grid .card:hover,
.no-public section.np#capacidades-trafico .card:hover { border-color:#2170B3 !important; box-shadow:0 20px 40px -22px rgba(33,112,179,.30); transform:translateY(-2px); }

/* pl-stat (stats de "Planificación automática"): visible sobre fondo claro */
.no-public section.np#capacidades-trafico .pl-stat { background:#ffffff; border:1.5px solid rgba(33,112,179,.28); box-shadow:0 10px 22px -16px rgba(13,52,84,.18); }
.no-public section.np#capacidades-trafico .pl-stat b { color:#f6a83a; }
.no-public section.np#capacidades-trafico .pl-stat span { color:#4a5b73; }

/* Portal-card: items de lista visibles sobre fondo blanco */
.no-public .portal-card ul li { color:#1a2433; font-weight:500; }
.no-public .portal-card ul li::before { color:#19b6c4; }

/* ── Home hero: botones más grandes y "Conoce NetOffice" en azul oscuro ── */
.no-public .btn-xl { padding:18px 36px !important; font-size:19px !important; }
.no-public .hero-ctas .btn-secondary {
  background:#2170B3; color:#ffffff; border:1px solid #2170B3;
  padding:18px 36px; font-size:19px; border-radius:10px;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .2s, transform .15s;
}
.no-public .hero-ctas .btn-secondary:hover { background:#0D3454; transform:translateY(-1px); }
.no-public .hero-ctas { gap:18px; }

/* Párrafos del hero — ocupan todo el ancho de la columna + tipografía mayor */
.no-public .hero p.sub { font-size:22px !important; max-width:none !important; line-height:1.55; }
.no-public .hero p.sub-extra { font-size:20px; line-height:1.6; max-width:none; margin-top:-12px; margin-bottom:36px; color:#4a5b73; }

/* ── Banda de stats ancho completo, pegada a los botones ── */
.no-public .hero { /* padding:0 32px !important; */ }
.no-public .hero::after { background:none !important; }
.no-public .hero-ctas { margin-bottom:0 !important; }
/* Banda de stats del hero — AZUL OSCURO #0D3454 (Ana 2026-08-31: unificar la home).
   Antes era #f3f7fd porque el vídeo viejo (netoffice-cabecera-hero.mp4) tenía fondo
   claro; el nuevo "Cabecera Azul" tiene fondo azul oscuro (medido: rgb(16,58,93) en
   sus filas inferiores), así que ahora el vídeo, la banda y el resto de la home
   comparten fondo y no se ve ningún corte. */
.no-public .hero-stats-band { position:relative; isolation:isolate; padding:18px 32px 56px; border-top:none; max-width:1400px; margin:0 auto; }
.no-public .hero-stats-band::before {
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; background:#0D3454; z-index:0;
}
.no-public .hero-stats-band > * { position:relative; z-index:1; }
.no-public .hero-stats--wide { display:grid; grid-template-columns:repeat(4,1fr); gap:40px; padding-top:0; border-top:none; width:100%; max-width:none; text-align:center; }
.no-public .hero-stats--wide > div { padding:14px 8px; }
.no-public .hero-stats--wide .num { font-size:54px; color:#ffffff !important; font-weight:700; letter-spacing:-.025em; font-family:'JetBrains Mono',monospace; line-height:1; }
.no-public .hero-stats--wide .num small { color:#f6a83a !important; font-size:.55em; }
.no-public .hero-stats--wide .lbl { font-size:15.5px; color:#cfd6e2 !important; text-transform:uppercase; letter-spacing:.10em; margin-top:14px; font-weight:600; }
@media (max-width:760px) {
  .no-public .hero-stats--wide { grid-template-columns:repeat(2,1fr); gap:28px; }
  .no-public .hero-stats--wide .num { font-size:42px; }
}

/* ── timer-box (banner azul claro — degradado entre Azul Acero y Cielo) ── */
.no-public .timer-box { background:linear-gradient(140deg, #D6E7F6 0%, #E8EFF7 50%, #EEF4FA 100%); border:1px solid rgba(33,112,179,.16); box-shadow:0 24px 48px -28px rgba(33,112,179,.20); }
.no-public .timer-text p { color:#2170B3; }
.no-public .timer-text p strong { color:#0D3454; }
.no-public .timer-list li { background:rgba(255,255,255,.55); border:1px solid rgba(33,112,179,.18); }
.no-public .timer-list li b { color:#0D3454; }
.no-public .timer-list li span { color:#3a4a61; }
.no-public .timer-text .eyebrow-line.orange { color:#2170B3 !important; }
/* sus textos blancos siguen valiendo */

/* ── dpto-card / serv-card / razon-card / flujo-step / conta-card / zona-card / cump-text / portal-card / pipe-step / conexion ── */
.no-public .dpto-card, .no-public .serv-card, .no-public .razon-card, .no-public .conta-card, .no-public .zona-card, .no-public .portal-card { background:#ffffff; border:1px solid rgba(33,112,179,.12); box-shadow:0 12px 28px -18px rgba(13,52,84,.16); }
.no-public .dpto-card h3, .no-public .serv-card h3, .no-public .razon-card h3, .no-public .conta-card h3, .no-public .portal-card h3, .no-public .zona-card .zona-head h3, .no-public .flujo-step h4, .no-public .pipe-step h4, .no-public .laso-timeline .lt-card h4, .no-public .conexion-head h2, .no-public .timer-text h2.section-title, .no-public .cump-text h2.section-title { color:#0D3454; }
.no-public .dpto-card p strong, .no-public .serv-card p strong, .no-public .razon-card p strong, .no-public .timer-text p strong { color:#2170B3; }
.no-public .timer-list li b, .no-public .cump-list li b, .no-public .tracking-list li b, .no-public .zona-list li b, .no-public .conn-node b, .no-public .cb-tile b { color:#0D3454; }
.no-public .cb-tile .cb-text { color:#2170B3; }
.no-public .dpto-card .dpto-ic, .no-public .serv-card .serv-ic { background:rgba(25,182,196,.10); border:1px solid rgba(25,182,196,.35); color:#19b6c4; }

/* ── cockpit-frame & mock-card (mocks de pantalla) → banner azul oscuro ── */
.no-public .cockpit-frame { background:linear-gradient(165deg, #2170B3 0%, #0D3454 100%); border:1px solid rgba(33,112,179,.40); box-shadow:0 30px 60px -20px rgba(33,112,179,.45); }
.no-public .cockpit-top .url { background:rgba(255,255,255,.10); color:#dbe5f2; }
.no-public .map-mock { background:linear-gradient(135deg, #0D3454, #0D3454); }
.no-public .mock-card { background:#ffffff; border:1px solid rgba(33,112,179,.14); color:#1a2433; box-shadow:0 18px 38px -22px rgba(13,52,84,.20); }

/* ── tracking-mock (banner azul oscuro como acento) ── */
.no-public .tracking-mock .tm-frame { background:linear-gradient(160deg, #2170B3, #0D3454); border:1px solid rgba(255,255,255,.10); }
.no-public .tracking-mock .tm-map { background:linear-gradient(180deg, #0D3454, #0D3454); }

/* ── stack cards (icono color naranja sobre fondo claro) ── */
.no-public .modulo .icon { color:#ffffff; background:var(--c, #19b6c4); }

/* ── integraciones cards ── */
.no-public section.np#integraciones .integ-card h4 { color:#0D3454; }

/* ── netoffice-hero-media / laptop frames → mantenemos pantallas oscuras (es un marco de portátil real) ── */
/* No tocar laptop-screen — la pantalla simula un monitor real */

/* ── powerbi pill ── */
.no-public section.np#powerbi .powerbi-pill { background:#2170B3; border:1px solid rgba(246,168,58,.55); color:#ffffff; }

/* ── ws-frame / ws-pill ── */
.no-public .ws-frame { background:linear-gradient(165deg, #ffffff 0%, #f4f7fb 100%); border:1px solid rgba(33,112,179,.14); box-shadow:0 30px 60px -28px rgba(13,52,84,.20); }
.no-public .doc-thumb { background:linear-gradient(160deg, #e8eef7, #d8e1ec); border:1px solid rgba(33,112,179,.14); }

/* ── cta-band: cierre slim en línea — sin bloque coloreado, integrado con el resto ── */
.no-public .cta-band {
  background:transparent; color:#0D3454;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  text-align:left; gap:28px;
  padding:32px 32px; max-width:1100px; margin:0 auto;
  border-top:1px solid rgba(33,112,179,.14);
}
.no-public .cta-band > h2 {
  color:#0D3454;
  font-size:32px; font-weight:600; letter-spacing:-.005em; line-height:1.3;
  margin:0; max-width:none;
}
.no-public .cta-band > p { display:none; }
.no-public .cta-band > a {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px; font-size:16.5px; font-weight:600;
  background:linear-gradient(135deg, #19b6c4, #0d8b97); color:#ffffff; border:none; border-radius:8px;
  box-shadow:0 8px 20px -10px rgba(25,182,196,.45);
  transition:filter .2s, transform .15s;
  margin-left:auto;
}
.no-public .cta-band > a:hover { filter:brightness(1.08); transform:translateY(-1px); }
@media (max-width:640px) {
  .no-public .cta-band { flex-direction:column; text-align:center; padding:28px 24px; }
  .no-public .cta-band > a { margin-left:0; }
}

/* ── Icono LinkedIn en el topbar (separado del botón, en el extremo derecho) ── */
.no-public .cta { display:flex; align-items:center; gap:0; }
.no-public .topbar-social {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:8px;
  color:#ffffff; background:transparent; border:1px solid rgba(255,255,255,.22);
  margin-left:64px;
  transition:background .2s, color .2s, border-color .2s, transform .15s;
}
.no-public .topbar-social svg { width:18px; height:18px; }
.no-public .topbar-social:hover { background:#0A66C2; color:#ffffff; border-color:#0A66C2; transform:translateY(-1px); }

/* ── botones ── */
.no-public .btn-cta { background:linear-gradient(135deg, #19b6c4, #0d8b97); color:#ffffff; }
.no-public .btn-cta.btn-orange { background:linear-gradient(135deg, #f6a83a, #d8851a); }
.no-public .btn-primary { background:linear-gradient(135deg, #19b6c4, #0d8b97); color:#ffffff; }

/* ── footer ── */
.no-public footer.site { background:#0D3454; color:#dbe5f2; border-top:none; position:relative; z-index:1; }
.no-public footer.site a { color:#dbe5f2; }
.no-public footer.site a:hover { color:#19b6c4; }

/* ── 404 / not-found ── */
.no-public .not-found h1 { color:#0D3454; }
.no-public .not-found-lead { color:#4a5b73; }

/* ── otros textos blancos sueltos ── */
.no-public .contacto-data--page .contacto-data-text b { color:#0D3454; }

/* ── form contacto ── */
.no-public section.np#contacto-final .cf-submit { background:#2170B3; }
.no-public section.np#contacto-final .cf-submit:hover { background:#0D3454; }

/* ── pill flotante (ai-pill / ws-pill) — accent naranja como segundo color ── */
.no-public .ai-pill { background:linear-gradient(135deg, #f6a83a, #d8851a); box-shadow:0 12px 30px -8px rgba(246,168,58,.55); }

/* ── PASADA EXHAUSTIVA: todo texto que quedaba en blanco sobre fondo claro ── */
/* Títulos de cards / listas (driver-list, deploy-card, rp, ia-card, modulo, feat-text, etc.) */
.no-public h2.section-title,
.no-public .driver-text h2,
.no-public .driver-text h2 .accent,
.no-public .driver-list li b,
.no-public .deploy-card h3,
.no-public .rp h4,
.no-public .feat-text h3,
.no-public .ia-card h3,
.no-public .modulo h3,
.no-public .feature-item .feature-lbl,
.no-public .platform-chip .platform-meta b,
.no-public .testimonio .author strong,
.no-public .deep-row strong,
.no-public .driver-box-text strong,
.no-public .showcase-text h2,
.no-public .post-card h3,
.no-public .post-article h1,
.no-public .info-card h4,
.no-public .deep-row h3,
.no-public .stat .v,
.no-public .hero-stats .num { color:#0D3454; }

/* Acento cian para spans/destacados que iban en var(--cian) y siguen valiendo */
.no-public .driver-text h2 .accent { color:#19b6c4; }

/* Descripciones / labels secundarios — texto medio-gris */
.no-public .driver-list li,
.no-public .driver-list li span,
.no-public .driver-text .sub,
.no-public .testimonio,
.no-public .info-card p { color:#4a5b73; }

/* driver-list: items alineados (icono + título + descripción en columna) */
.no-public .driver-list li { padding-left:36px; }
.no-public .driver-list li::before { background:#19b6c4; }
.no-public .driver-list li::after { color:#ffffff; }

/* Rich-content (cuerpo de páginas largas tipo blog) */
.no-public .rich-content h2,
.no-public .rich-content h3,
.no-public .rich-content h4 { color:#0D3454; }
.no-public .rich-content strong { color:#2170B3; }
.no-public .rich-content blockquote { color:#1a2433; border-left:3px solid #19b6c4; }
.no-public .rich-content th { background:rgba(33,112,179,.06); color:#2170B3; }
.no-public .rich-content p, .no-public .rich-content li { color:#3a4a61; }

/* Tracking-mock está dentro de un banner azul oscuro — sus textos blancos quedan correctos, NO se cambian */

/* Formularios: inputs blancos sobre fondo claro */
.no-public .form-input, .no-public .form-textarea { background:#ffffff; border:1px solid rgba(33,112,179,.18); color:#1a2433; }
.no-public .form-input:focus, .no-public .form-textarea:focus { border-color:#19b6c4; }

/* 404 */
.no-public .not-found h1 { color:#0D3454; }

/* Chip de filtros (blog) */
.no-public .fchip:hover, .no-public .fchip.on { color:#2170B3; border-color:#19b6c4; background:rgba(25,182,196,.10); }

/* Card-grid h3 (regla genérica en línea 1062) */
.no-public .card h3 { color:#0D3454; }

/* deploy-card fondo + texto legible sobre fondo claro */
.no-public .deploy-card { background:#ffffff; border:1px solid rgba(33,112,179,.12); box-shadow:0 12px 28px -18px rgba(13,52,84,.16); }
.no-public .deploy-card p { color:#3a4a61 !important; font-size:16px !important; }
.no-public .deploy-card li { color:#1a2433 !important; font-size:15.5px !important; font-weight:500; }
.no-public .deploy-card li::before { color:#19b6c4 !important; font-weight:700; }
.no-public .deploy-card.onprem li::before { color:#19b6c4 !important; }

/* Variante recommended (Cloud Azure) — misma tarjeta clara que onprem, el tag la distingue */
.no-public .deploy-card.recommended { background:#ffffff !important; border:1px solid rgba(33,112,179,.12) !important; box-shadow:0 12px 28px -18px rgba(13,52,84,.16) !important; }
.no-public .deploy-card.recommended .tag {
  display:inline-block; padding:6px 14px; border-radius:30px;
  background:rgba(25,182,196,.22); border:1px solid rgba(25,182,196,.55);
  color:#19b6c4 !important; font-size:12.5px; font-weight:600; letter-spacing:.10em; text-transform:uppercase;
  margin-bottom:20px;
}
/* On-premise (clara) usa el mismo estilo de chip pero gris/azul oscuro para diferenciar */
.no-public .deploy-card.onprem .tag {
  display:inline-block; padding:6px 14px; border-radius:30px;
  background:rgba(33,112,179,.08); border:1px solid rgba(33,112,179,.22);
  color:#2170B3 !important; font-size:12.5px; font-weight:600; letter-spacing:.10em; text-transform:uppercase;
  margin-bottom:20px;
}

/* ── Sección "Despliegue flexible" (home) — fondo oscuro full-bleed, tarjetas claras encima ── */
.no-public section.np#despliegue { isolation:isolate; }
.no-public section.np#despliegue > * { position:relative; z-index:1; }
.no-public section.np#despliegue::before {
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; background:#0D3454; z-index:0;
}
.no-public section.np#despliegue .section-title,
.no-public section.np#despliegue .section-head p { color:#ffffff; }
.no-public section.np#despliegue .section-head p { color:rgba(255,255,255,.75); }

/* ── Banner IA (section#ia) — se MANTIENE como banner oscuro de acento ── */
.no-public section.np#ia .section-title,
.no-public section.np#ia .section-head p,
.no-public section.np#ia .eyebrow-line { color:#ffffff; }
.no-public section.np#ia .eyebrow-line { background:transparent; border:1px solid rgba(255,255,255,.45); padding:6px 14px; border-radius:30px; display:inline-block; color:#19b6c4; }
.no-public section.np#ia .section-head p { color:rgba(255,255,255,.75); }
/* Cards dentro del banner IA: pueden quedar oscuros para que contrasten con el fondo azul */
.no-public section.np#ia .ia-card { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.no-public section.np#ia .ia-card h3 { color:#ffffff; }
.no-public section.np#ia .ia-card p { color:rgba(255,255,255,.80); }
.no-public section.np#ia .card { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); box-shadow:none; }
.no-public section.np#ia .card h3 { color:#ffffff; }
.no-public section.np#ia .card p { color:rgba(255,255,255,.80); }
.no-public section.np#ia .card .ic { color:#19b6c4; background:rgba(25,182,196,.18); border:1px solid rgba(25,182,196,.40); }
/* Lista editorial numerada — variante oscura para #ia (alternativa al card-grid) */
.no-public section.np#ia .features-editorial { max-width:1020px; }
.no-public section.np#ia .features-editorial li { border-top:1px solid rgba(255,255,255,.14); }
.no-public section.np#ia .features-editorial li:last-child { border-bottom:1px solid rgba(255,255,255,.14); }
.no-public section.np#ia .features-editorial .fe-num { color:#19b6c4; }
.no-public section.np#ia .features-editorial .fe-ic { background:rgba(25,182,196,.18); border:1px solid rgba(25,182,196,.40); color:#19b6c4; }
.no-public section.np#ia .features-editorial .fe-body h3 { color:#ffffff; }
.no-public section.np#ia .features-editorial .fe-body p { color:rgba(255,255,255,.78); }

/* ── Tool-card list items: subir contraste ── */
.no-public .tool-card p { color:#3a4a61; }
.no-public .tool-card ul li { color:#1a2433; }

/* Cualquier otra section.np con ::before oscuro (powerbi) — texto blanco */
.no-public section.np#powerbi .section-title,
.no-public section.np#powerbi .powerbi-text h2,
.no-public section.np#powerbi .powerbi-text p { color:#ffffff; }
.no-public section.np#powerbi .powerbi-text .eyebrow-line { color:#f6a83a; }
.no-public section.np#powerbi .powerbi-stats .pb-stat b { color:#ffffff; }
.no-public section.np#powerbi .powerbi-stats .pb-stat span { color:rgba(255,255,255,.75); }

/* ── /netoffice/transporte: swap de fondos entre TMS Inteligente y Control en tiempo real ── */
/* (a) Tracking-section (Control en tiempo real): quitar el banner #0D3454, fondo normal */
.no-public section.np.tracking-section::before { background:transparent !important; }
.no-public section.np.tracking-section .tracking-text h2.section-title { color:#0D3454 !important; }
.no-public section.np.tracking-section .tracking-text p { color:#3a4a61 !important; }
.no-public section.np.tracking-section .tracking-text .eyebrow-line { color:#2170B3 !important; }
.no-public section.np.tracking-section .tracking-list li b { color:#0D3454 !important; }
.no-public section.np.tracking-section .tracking-list li { background:rgba(33,112,179,.06); border:1px solid rgba(33,112,179,.18); color:#3a4a61; }
.no-public section.np.tracking-section .tracking-list li::before { background:#19b6c4; }
.no-public section.np.tracking-section .tracking-badge { background:rgba(25,182,196,.12); color:#0e7a85; border:1px solid rgba(25,182,196,.40); }
.no-public section.np.tracking-section .tracking-brand img { filter:invert(.85) hue-rotate(180deg); opacity:.55; }

/* (b) Sub-bloque "Planificación automática" dentro de capacidades-trafico: banner #0D3454 ancho completo */
.no-public section.np#capacidades-trafico .capacidades-split { position:relative; isolation:isolate; padding:80px 32px; }
.no-public section.np#capacidades-trafico .capacidades-split > * { position:relative; z-index:1; }
.no-public section.np#capacidades-trafico .capacidades-split::before {
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; background:#0D3454; z-index:0;
}
.no-public section.np#capacidades-trafico .capacidades-split .section-title { color:#ffffff !important; }
.no-public section.np#capacidades-trafico .capacidades-split .planificacion-text p { color:rgba(255,255,255,.82) !important; }
.no-public section.np#capacidades-trafico .capacidades-split .eyebrow-line.orange { color:#f6a83a !important; }
/* Stats cards: ahora sobre fondo oscuro — fondo translúcido claro + texto blanco */
.no-public section.np#capacidades-trafico .capacidades-split .pl-stat { background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.16) !important; box-shadow:none !important; }
.no-public section.np#capacidades-trafico .capacidades-split .pl-stat b { color:#f6a83a !important; }
.no-public section.np#capacidades-trafico .capacidades-split .pl-stat span { color:rgba(255,255,255,.78) !important; }

/* ── /app-driver platform-chip (DISPONIBLE PARA Android / iOS): iconos visibles sobre fondo claro ── */
.no-public .platform-chip { background:#ffffff !important; border:1px solid rgba(33,112,179,.18) !important; box-shadow:0 8px 22px -16px rgba(13,52,84,.18); }
.no-public .platform-chip .platform-ic { fill:#2170B3 !important; }
.no-public .platform-chip .platform-meta small { color:#2170B3 !important; font-weight:600; }
.no-public .platform-chip .platform-meta b { color:#0D3454 !important; }

/* ════════ /ia-viva — diseño diferenciado ════════ */

/* (A) Bento asimétrico — "Lo que la IA hace hoy por ti" */
.no-public .ia-bento-section .section-head { margin-bottom:40px; }
.no-public .ia-bento {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:minmax(180px, auto);
  gap:18px;
}
.no-public .ia-bento-item {
  position:relative; padding:28px 26px;
  background:#ffffff; border:1px solid rgba(33,112,179,.14); border-radius:18px;
  box-shadow:0 12px 28px -20px rgba(13,52,84,.18);
  overflow:hidden;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.no-public .ia-bento-item:hover { transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(13,52,84,.28); border-color:var(--accent, #19b6c4); }
.no-public .ia-bento-item::before {
  content:''; position:absolute; top:0; left:0; bottom:0; width:4px; background:var(--accent, #19b6c4); border-radius:18px 0 0 18px;
}
.no-public .ia-bento-feat { grid-column:span 2; }
.no-public .ia-bento .ib-ic {
  width:46px; height:46px; border-radius:12px;
  background:color-mix(in srgb, var(--accent, #19b6c4) 12%, transparent);
  color:var(--accent, #19b6c4);
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.no-public .ia-bento .ib-ic svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .ia-bento-item h3 { color:#0D3454; font-size:20px; font-weight:700; margin-bottom:10px; letter-spacing:-.005em; }
.no-public .ia-bento-feat h3 { font-size:24px; }
.no-public .ia-bento-item p { color:#3a4a61; font-size:15.5px; line-height:1.6; }
@media (max-width:960px) {
  .no-public .ia-bento { grid-template-columns:repeat(2, 1fr); }
  .no-public .ia-bento-feat { grid-column:span 2; }
}
@media (max-width:560px) {
  .no-public .ia-bento { grid-template-columns:1fr; }
  .no-public .ia-bento-feat { grid-column:span 1; }
}

/* (B) Flujo numerado dentro de panel oscuro contenido — "La IA transforma tu planificador" */
.no-public section.np.ia-flow-section { padding-top:70px; padding-bottom:70px; }
.no-public .ia-flow-section .ia-flow-panel {
  background:linear-gradient(140deg, #2170B3 0%, #0D3454 55%, #0D3454 100%);
  border:1px solid rgba(255,255,255,.14); border-radius:24px;
  padding:44px 40px; margin-top:44px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.40);
}
.no-public .ia-flow {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
  position:relative; margin-top:0;
}
.no-public .ia-flow-item { position:relative; padding:24px 22px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:16px; }
.no-public .ia-flow-item .ifn {
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-size:14px; letter-spacing:.18em; font-weight:700;
  color:#f6a83a;
  margin-bottom:10px;
}
.no-public .ia-flow-item .ifi {
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:14px;
  background:rgba(25,182,196,.15); border:1px solid rgba(25,182,196,.40); color:#19b6c4;
  margin-bottom:18px;
}
.no-public .ia-flow-item .ifi svg { width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .ia-flow-item h3 { color:#ffffff; font-size:21px; font-weight:700; margin-bottom:10px; letter-spacing:-.005em; }
.no-public .ia-flow-item p { color:rgba(255,255,255,.78); font-size:15.5px; line-height:1.6; }
@media (max-width:900px) {
  .no-public .ia-flow { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px) {
  .no-public .ia-flow { grid-template-columns:1fr; }
}

/* ════════ FASE 1: jerarquía + microinteracciones ════════ */

/* Jerarquía de H2 — define "primary" (la principal de la página) y "secondary" (sub-secciones) */
.no-public h2.section-title { font-size:clamp(32px, 3.4vw, 44px); line-height:1.1; letter-spacing:-.02em; }
.no-public .section-primary h2.section-title { font-size:clamp(40px, 4.8vw, 60px); }
.no-public .section-secondary h2.section-title { font-size:clamp(26px, 2.4vw, 34px); }
/* Hero H1 unificado y mayor */
.no-public .hero h1, .no-public .hero h1.mega { font-size:clamp(48px, 6vw, 80px); line-height:0.75; letter-spacing:-.025em; color:#0D3454; }

/* Microinteracciones — hover sutil en cards (cualquier card-grid) */
.no-public .card-grid > .card, .no-public .modulo-card, .no-public .tool-card,
.no-public .deploy-card, .no-public .dpto-card, .no-public .serv-card,
.no-public .razon-card, .no-public .conta-card, .no-public .portal-card,
.no-public .ia-bento-item, .no-public .stat { transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }

/* Fade-in al entrar en viewport — clase .reveal aplicada por JS */
.no-public .reveal { opacity:0; transform:translateY(18px); transition:opacity .55s ease-out, transform .55s ease-out; }
.no-public .reveal.is-visible { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .no-public .reveal { opacity:1; transform:none; transition:none; }
}

/* Pulso sutil en CTAs principales */
.no-public .btn-cta { position:relative; }

/* ════════ Layouts variados (rompen el patrón card-grid) ════════ */

/* Banner full-bleed con imagen de fondo + texto encima */
.no-public .image-band {
  position:relative;
  min-height:380px;
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
  isolation:isolate; overflow:hidden;
  margin:60px 0;
}
.no-public .image-band::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,52,84,.65) 0%, rgba(13,52,84,.45) 100%);
  z-index:1;
}
.no-public .image-band-inner { position:relative; z-index:2; max-width:880px; padding:64px 32px; text-align:center; color:#ffffff; }
.no-public .image-band-inner .eyebrow-line { color:#19b6c4 !important; margin-bottom:16px; }
.no-public .image-band-inner h2 { color:#ffffff !important; font-size:clamp(32px, 4vw, 50px); margin-bottom:16px; letter-spacing:-.02em; line-height:1.1; }
.no-public .image-band-inner p { color:rgba(255,255,255,.88); font-size:20px; line-height:1.55; }

/* Split-screen: imagen a un lado, texto al otro */
.no-public .split-band { padding:80px 32px; max-width:1400px; margin:0 auto; }
.no-public .split-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.no-public .split-grid.reverse { grid-template-columns:1fr 1fr; }
.no-public .split-grid.reverse .split-media { order:2; }
.no-public .split-media img { width:100%; height:auto; border-radius:16px; box-shadow:0 30px 60px -28px rgba(13,52,84,.30); }
.no-public .split-text .section-title { margin-bottom:18px; }
.no-public .split-text p { color:#3a4a61; font-size:18px; line-height:1.6; margin-bottom:24px; }
@media (max-width:900px) {
  .no-public .split-grid, .no-public .split-grid.reverse { grid-template-columns:1fr; gap:36px; }
  .no-public .split-grid.reverse .split-media { order:0; }
}

/* ════════ Hero — captura real dentro de un monitor de escritorio ════════ */
.no-public .hero-product { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.no-public .hd-monitor { background:#0D3454; border-radius:14px; padding:10px; box-shadow:0 40px 80px -28px rgba(13,52,84,.55); width:100%; }
.no-public .hd-bar { display:flex; align-items:center; gap:6px; padding:4px 10px 10px; }
.no-public .hd-bar > span { width:10px; height:10px; border-radius:50%; background:#33415c; }
.no-public .hd-bar > span:nth-child(1){background:#ff5f56;}
.no-public .hd-bar > span:nth-child(2){background:#ffbd2e;}
.no-public .hd-bar > span:nth-child(3){background:#27c93f;}
.no-public .hd-url { margin-left:14px; flex:1; background:rgba(255,255,255,.10); border-radius:6px; padding:4px 12px; font-family:'JetBrains Mono',monospace; font-size:12px; color:rgba(255,255,255,.75); }
.no-public .hd-screen { border-radius:6px; overflow:hidden; background:#ffffff; }
.no-public .hd-screen img { width:100%; height:auto; display:block; }
.no-public .hd-stand { width:28%; height:28px; background:linear-gradient(180deg, #0D3454, #1a4567); clip-path:polygon(20% 0, 80% 0, 90% 100%, 10% 100%); }
.no-public .hd-base { width:44%; height:8px; border-radius:8px; background:#0D3454; box-shadow:0 6px 18px -8px rgba(13,52,84,.45); }
.no-public .hero-product .hp-pill { position:absolute; top:24px; right:-16px; background:linear-gradient(135deg, #f6a83a, #d8851a); padding:10px 18px; border-radius:30px; font-size:13px; font-weight:600; color:#ffffff; box-shadow:0 12px 30px -8px rgba(246,168,58,.55); display:inline-flex; align-items:center; gap:8px; z-index:3; }
.no-public .hero-product .hp-spark { font-size:14px; }

/* Botones del hero: tipografía normal (sentence case), no uppercase como el resto de CTAs */
.no-public .hero-ctas .btn-cta.btn-xl,
.no-public .hero-ctas .btn-secondary { text-transform:none !important; letter-spacing:.005em !important; }

/* Acercar las 3 secciones del hero (botones → stats → intro) */
.no-public .hero-stats-band { padding:100px !important; margin-top:-8px; }
.no-public .hero-stats--wide { gap:24px !important; }
.no-public .hero-stats--wide > div { padding:0 4px !important; }
.no-public .hero-stats--wide .lbl { margin-top:6px !important; }

/* Sección intro debajo del hero — bajada del antiguo sub-extra */
.no-public .hero-intro-band { position:relative; isolation:isolate; padding:8px 32px 24px; max-width:1100px; margin:0 auto; }
.no-public .hero-intro-band::before {
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; background:#0D3454; z-index:0;
}
.no-public .hero-intro-band > * { position:relative; z-index:1; }
.no-public .hero-intro-inner { text-align:center; }
.no-public .hero-intro-inner p { color:rgba(255,255,255,.85) !important; font-size:22px; line-height:1.6; margin:0 0 20px; }
.no-public .hero-intro-inner p:last-child { margin-bottom:0; }

/* ════════ CTAs que llevan a otra pantalla → MAYÚSCULAS ════════ */
.no-public .btn-cta,
.no-public .btn-secondary,
.no-public .hero-ctas .btn-secondary,
.no-public .driver-cross-cta,
.no-public .tool-more,
.no-public .modulo-card .mc-more,
.no-public .card .card-more,
.no-public .cta-band > a,
.no-public .deca-download,
.no-public .extranet-section .btn-cta { text-transform:uppercase; letter-spacing:.10em; }

/* ════════ Cockpit hero — más grande y textos blancos ════════ */
.no-public .hero { grid-template-columns:1fr 1.15fr !important; }
.no-public .cockpit-frame { padding:18px !important; }
.no-public .cm { color:#ffffff !important; font-size:12px !important; padding:10px 6px !important; }
.no-public .cm.active { color:#ffffff !important; }
.no-public .cgcell h4 { color:#ffffff !important; font-size:13px !important; }
.no-public .kpi .l { color:rgba(255,255,255,.85) !important; font-weight:500; }
.no-public .kpi .v { color:#ffffff !important; font-size:22px !important; }
.no-public .map-mock { height:200px !important; }
.no-public .bars { height:70px !important; }
@media (max-width:1200px){
  .no-public .hero { grid-template-columns:1fr !important; }
}

/* ════════ BARRIDO: todos los textos descriptivos en gris claro → gris medio legible ════════
   Excepción: dentro de bandas oscuras (capacidades-split, tracking-mock, mock-card, deep-visual,
   cockpit-frame, timer-box*, footer, section#ia, section#powerbi) los textos siguen siendo claros. */
.no-public .zona-list li span,
.no-public .zona-card p,
.no-public .conn-node span,
.no-public .laso-timeline .lt-card p,
.no-public .feat-text p,
.no-public .feat-text ul li,
.no-public .razon-card p,
.no-public .flujo-step p { color:#3a4a61 !important; }

/* Secciones donde el title + texto deben ocupar todo el ancho */
.no-public .deca-flow-section .section-head,
.no-public .extranet-section .section-head,
.no-public section.np.integraciones-section .section-head { max-width:none; }
.no-public .deca-flow-section .section-head p,
.no-public .extranet-section .section-head p,
.no-public section.np.integraciones-section .section-head p { max-width:none; }

/* ── /app-driver Beneficios: grid 2x3 con icono azul oscuro + titular + apoyo ── */
.no-public .benefits-section { padding:60px 32px; max-width:1300px; margin:0 auto; isolation:isolate; }
.no-public .benefits-section > * { position:relative; z-index:1; }
.no-public .benefits-section::before {
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; background:#0D3454; z-index:0;
}
.no-public .benefits-section .eyebrow-line { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.30); color:#19b6c4; }
.no-public .benefits-section .section-title { color:#ffffff; }
.no-public .benefits-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:48px 36px; margin-top:32px; }
.no-public .benefit-item { display:flex; gap:18px; align-items:flex-start; }
.no-public .benefit-item .b-ic {
  width:56px; height:56px; border-radius:14px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.25); color:#19b6c4;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
.no-public .benefit-item .b-ic svg { width:26px; height:26px; }
.no-public .benefit-item > div:not(.b-ic), .no-public .benefit-item .b-text { flex:1; min-width:0; }
.no-public .benefit-item h3 { color:#ffffff; font-size:18px; font-weight:700; margin:6px 0 6px; letter-spacing:-.005em; line-height:1.25; }
.no-public .benefit-item p { color:#dbe5f2; font-size:15px; line-height:1.55; margin:0; }
@media (max-width:900px){ .no-public .benefits-grid { grid-template-columns:repeat(2,1fr); gap:36px 24px; } }
@media (max-width:560px){ .no-public .benefits-grid { grid-template-columns:1fr; gap:28px; } }

/* Demo animada de la app (crossfade entre 4 capturas reales) — usada en el hero de /app-driver */
.no-public .driver-app-demo { position:relative; width:100%; max-width:320px; aspect-ratio:640/1000; }
.no-public .driver-app-demo img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 30px 60px rgba(0,0,0,.45)); }
.no-public .driver-app-demo .da-1, .no-public .driver-app-demo-caption .da-1 { animation-name:driverDemoF1; }
.no-public .driver-app-demo .da-2, .no-public .driver-app-demo-caption .da-2 { animation-name:driverDemoF2; }
.no-public .driver-app-demo .da-3, .no-public .driver-app-demo-caption .da-3 { animation-name:driverDemoF3; }
.no-public .driver-app-demo .da-4, .no-public .driver-app-demo-caption .da-4 { animation-name:driverDemoF4; }
.no-public .driver-app-demo img, .no-public .driver-app-demo-caption span { animation-duration:12s; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
@keyframes driverDemoF1 { 0%,22%{ opacity:1; } 25%,97%{ opacity:0; } 100%{ opacity:1; } }
@keyframes driverDemoF2 { 0%,22%{ opacity:0; } 25%,47%{ opacity:1; } 50%,100%{ opacity:0; } }
@keyframes driverDemoF3 { 0%,47%{ opacity:0; } 50%,72%{ opacity:1; } 75%,100%{ opacity:0; } }
@keyframes driverDemoF4 { 0%,72%{ opacity:0; } 75%,97%{ opacity:1; } 100%{ opacity:0; } }
.no-public .driver-app-demo-caption { position:relative; width:100%; margin-top:16px; height:18px; text-align:center; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.04em; color:#19b6c4; }
.no-public .driver-app-demo-caption span { position:absolute; left:0; right:0; }
@media (max-width:900px) {
  .no-public .driver-app-demo { max-width:220px; }
}

/* Hero /netoffice/contabilidad — texto + crossfade de capturas del módulo (3 imágenes) */
.no-public .hero-conta-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.no-public .conta-demo { position:relative; width:100%; aspect-ratio:1915/873; border-radius:16px; overflow:hidden; box-shadow:0 30px 60px -24px rgba(13,52,84,.35); }
.no-public .conta-demo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation-duration:12s; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
.no-public .conta-demo .cd-1 { animation-name:contaDemoF1; }
.no-public .conta-demo .cd-2 { animation-name:contaDemoF2; }
.no-public .conta-demo .cd-3 { animation-name:contaDemoF3; }
@keyframes contaDemoF1 { 0%,30% { opacity:1; } 33%,97% { opacity:0; } 100% { opacity:1; } }
@keyframes contaDemoF2 { 0%,30% { opacity:0; } 33%,63% { opacity:1; } 66%,100% { opacity:0; } }
@keyframes contaDemoF3 { 0%,63% { opacity:0; } 66%,97% { opacity:1; } 100% { opacity:0; } }
@media (max-width:900px) {
  .no-public .hero-conta-grid { grid-template-columns:1fr; gap:32px; }
}

/* ── /ia-viva — sección vídeo IA en acción (placeholder + beneficios) ── */
.no-public .ia-video-section { padding:80px 32px; max-width:1300px; margin:0 auto; }
.no-public .iav-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; }
.no-public .iav-media { width:100%; }
.no-public .iav-frame {
  position:relative; width:100%; aspect-ratio:16/9;
  background:linear-gradient(135deg, #0D3454 0%, #14335b 60%, #2170B3 100%);
  border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  box-shadow:0 30px 60px -24px rgba(13,52,84,.40);
}
.no-public .iav-frame::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 30%, rgba(25,182,196,.25), transparent 60%),
             radial-gradient(circle at 70% 70%, rgba(246,168,58,.18), transparent 55%);
  pointer-events:none;
}
.no-public .iav-frame .iav-play {
  width:84px; height:84px; color:#ffffff;
  background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.42); border-radius:50%;
  padding:18px 14px 18px 22px; position:relative;
  transition:transform .25s;
}
.no-public .iav-frame:hover .iav-play { transform:scale(1.06); }
.no-public .iav-pending {
  position:relative;
  font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.82);
  padding:8px 16px; border:1px solid rgba(255,255,255,.30); border-radius:20px;
  background:rgba(255,255,255,.05);
}
.no-public .iav-text .section-title { margin-bottom:14px; }
.no-public .iav-text > p { color:#3a4a61; font-size:17px; line-height:1.6; margin-bottom:22px; }
.no-public .iav-list { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.no-public .iav-list li { padding-left:24px; position:relative; }
.no-public .iav-list li::before {
  content:''; position:absolute; left:0; top:8px;
  width:10px; height:10px; border-radius:50%;
  background:#19b6c4; box-shadow:0 0 0 3px rgba(25,182,196,.20);
}
.no-public .iav-list li b { display:block; color:#0D3454; font-size:16px; font-weight:700; margin-bottom:2px; letter-spacing:-.005em; }
.no-public .iav-list li span { color:#3a4a61; font-size:14.5px; line-height:1.5; }
@media (max-width:880px){
  .no-public .iav-grid { grid-template-columns:1fr; gap:36px; }
}

/* ── Política de cookies: botones aceptar/rechazar inline ── */
.no-public .cookie-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:14px 0 24px; }
.no-public .cookie-btn {
  display:inline-flex; align-items:center;
  padding:10px 22px; border-radius:10px;
  font-family:inherit; font-size:14.5px; font-weight:600; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, transform .15s;
}
.no-public .cookie-btn.cookie-accept { background:#19b6c4; color:#ffffff; border:1.5px solid #19b6c4; }
.no-public .cookie-btn.cookie-accept:hover { background:#0d8b97; border-color:#0d8b97; transform:translateY(-1px); }
.no-public .cookie-btn.cookie-reject { background:#ffffff; color:#0D3454; border:1.5px solid rgba(33,112,179,.45); }
.no-public .cookie-btn.cookie-reject:hover { background:#0D3454; color:#ffffff; border-color:#0D3454; transform:translateY(-1px); }
.no-public .cookie-status { color:#0d8b97; font-size:14px; font-weight:600; opacity:0; transition:opacity .25s; }
.no-public .cookie-status.is-visible { opacity:1; }

/* ── Why pillars (home "Por qué NetOffice") — 4 columnas verticales con hairlines ── */
.no-public .why-pillars {
  display:grid; grid-template-columns:repeat(4, 1fr);
  margin-top:48px;
  border-top:1px solid rgba(33,112,179,.18);
  border-bottom:1px solid rgba(33,112,179,.18);
}
.no-public .why-pillar {
  padding:36px 28px;
  position:relative;
  border-left:1px solid rgba(33,112,179,.18);
  display:flex; flex-direction:column; gap:14px;
  transition:background .25s;
}
.no-public .why-pillar:first-child { border-left:none; }
.no-public .why-pillar:hover { background:rgba(33,112,179,.04); }
.no-public .why-pillar .wp-num {
  font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:700;
  color:#19b6c4; letter-spacing:.14em;
}
.no-public .why-pillar .wp-ic {
  width:48px; height:48px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#0D3454;
}
.no-public .why-pillar .wp-ic svg { width:36px; height:36px; }
.no-public .why-pillar h3 { color:#0D3454; font-size:18px; font-weight:700; margin:0; letter-spacing:-.005em; line-height:1.3; }
.no-public .why-pillar p { color:#3a4a61; font-size:16.5px; line-height:1.55; margin:0; }
@media (max-width:980px){
  .no-public .why-pillars { grid-template-columns:repeat(2, 1fr); }
  .no-public .why-pillar:nth-child(3) { border-left:none; }
}
@media (max-width:560px){
  .no-public .why-pillars { grid-template-columns:1fr; }
  .no-public .why-pillar { border-left:none; border-top:1px solid rgba(33,112,179,.14); padding:28px 16px; }
  .no-public .why-pillar:first-child { border-top:none; }
  .no-public .why-pillar:nth-child(3) { border-left:none; }
}

/* ── Fiscal board (cumplimiento normativo) — filas tipo "status dashboard" ── */
.no-public .fiscal-board-section { padding:60px 32px; max-width:1100px; margin:0 auto; }
.no-public .fiscal-board { display:grid; gap:14px; margin-top:32px; }
.no-public .fb-row {
  display:grid; grid-template-columns:120px 1fr auto; gap:24px; align-items:center;
  padding:20px 24px;
  background:#ffffff; border:1px solid rgba(33,112,179,.14); border-radius:14px;
  box-shadow:0 10px 24px -18px rgba(13,52,84,.15);
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.no-public .fb-row:hover { transform:translateY(-2px); border-color:#19b6c4; box-shadow:0 16px 32px -20px rgba(25,182,196,.25); }
.no-public .fb-logo { display:flex; align-items:center; justify-content:center; height:60px; }
.no-public .fb-logo img { max-height:54px; max-width:100%; object-fit:contain; }
.no-public .fb-logo.fb-logo-text { background:rgba(33,112,179,.06); border-radius:10px; height:60px; }
.no-public .fb-logo.fb-logo-text span { color:#0D3454; font-weight:700; font-size:18px; letter-spacing:-.005em; }
.no-public .fb-body h3 { color:#0D3454; font-size:18.5px; font-weight:700; margin:0 0 4px; letter-spacing:-.005em; }
.no-public .fb-body p { color:#3a4a61; font-size:18.5px; line-height:1.5; margin:0; }
.no-public .fb-status {
  padding:6px 14px; border-radius:30px;
  font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
  white-space:nowrap;
}
.no-public .fb-status.active { background:rgba(25,182,196,.14); color:#0e7a85; border:1px solid rgba(25,182,196,.45); }
.no-public .fb-status.ready  { background:rgba(246,168,58,.14); color:#a35c00; border:1px solid rgba(246,168,58,.50); }
@media (max-width:680px) {
  .no-public .fb-row { grid-template-columns:80px 1fr; gap:14px; padding:16px; }
  .no-public .fb-logo { height:48px; }
  .no-public .fb-logo img { max-height:42px; }
  .no-public .fb-status { grid-column:1 / -1; justify-self:start; }
}

/* ── /netoffice/transporte — efecto "escaneo IA" sobre la captura TMS ── */
.no-public section.np#capacidades-trafico .capacidades-media {
  position:relative; overflow:hidden; border-radius:14px;
  isolation:isolate;
}
/* Línea de escaneo cian, recorre top→bottom */
.no-public section.np#capacidades-trafico .capacidades-media::before {
  content:''; position:absolute; left:0; right:0; top:0;
  height:120px; pointer-events:none; z-index:3;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(25,182,196,.05) 30%,
    rgba(25,182,196,.18) 70%,
    rgba(25,182,196,.55) 96%,
    rgba(25,182,196,.95) 100%);
  animation:tms-scan 3.5s cubic-bezier(.55,0,.45,1) infinite;
  mix-blend-mode:screen;
}
/* Línea fina brillante en el borde inferior del haz */
.no-public section.np#capacidades-trafico .capacidades-media::after {
  content:''; position:absolute; left:0; right:0; top:0;
  height:2px; pointer-events:none; z-index:4;
  background:rgba(25,182,196,1);
  box-shadow:0 0 18px 4px rgba(25,182,196,.7), 0 0 6px 2px rgba(25,182,196,1);
  animation:tms-scan-line 3.5s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes tms-scan {
  0%   { transform:translateY(-120px); opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { transform:translateY(100%); opacity:0; }
}
@keyframes tms-scan-line {
  0%   { transform:translateY(0); opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { transform:translateY(100%); opacity:0; }
}
/* Pastilla flotante "IA analizando" con punto pulsante */
.no-public section.np#capacidades-trafico .capacidades-media .tms-ai-pill {
  position:absolute; top:14px; right:14px; z-index:5;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:30px;
  background:rgba(13,52,84,.78); backdrop-filter:blur(4px);
  border:1px solid rgba(25,182,196,.55);
  color:#ffffff; font-family:'JetBrains Mono', monospace; font-size:13px; letter-spacing:.10em; text-transform:uppercase; font-weight:600;
}
.no-public section.np#capacidades-trafico .capacidades-media .tms-ai-pill::before {
  content:''; width:8px; height:8px; border-radius:50%;
  background:#19b6c4; box-shadow:0 0 8px #19b6c4;
  animation:tms-ai-pulse 1.2s ease-in-out infinite;
}
@keyframes tms-ai-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.45; transform:scale(.7); }
}


/* ── Lista editorial numerada (alternativa al card-grid) ── */
.no-public .features-editorial { list-style:none; padding:0; margin:32px 0 0; max-width:980px; margin-left:auto; margin-right:auto; }
.no-public .features-editorial li {
  display:grid; grid-template-columns:auto auto 1fr; gap:28px;
  align-items:flex-start;
  padding:28px 8px;
  border-top:1px solid rgba(33,112,179,.16);
}
.no-public .features-editorial li:last-child { border-bottom:1px solid rgba(33,112,179,.16); }
.no-public .features-editorial .fe-num {
  font-family:'JetBrains Mono', monospace;
  font-size:32px; font-weight:700; line-height:1;
  color:#19b6c4; letter-spacing:-.02em;
  min-width:48px;
}
.no-public .features-editorial .fe-ic {
  width:48px; height:48px; border-radius:12px;
  background:rgba(13,52,84,.06); border:1px solid rgba(13,52,84,.18); color:#0D3454;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.no-public .features-editorial .fe-ic svg { width:22px; height:22px; }
.no-public .features-editorial .fe-body h3 { color:#0D3454; font-size:20px; font-weight:700; margin:4px 0 6px; letter-spacing:-.005em; }
.no-public .features-editorial .fe-body p { color:#3a4a61; font-size:16px; line-height:1.6; margin:0; }
@media (max-width:680px) {
  .no-public .features-editorial li { grid-template-columns:auto 1fr; gap:18px; padding:22px 4px; }
  .no-public .features-editorial .fe-ic { grid-row:1; }
  .no-public .features-editorial .fe-num { grid-column:1; grid-row:1; font-size:24px; }
  .no-public .features-editorial .fe-body { grid-column:1 / -1; }
}

/* ── News modal centrado (DeCA) ── */
.no-public .news-banner {
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,52,84,.55); padding:24px;
  opacity:0; transition:opacity .35s ease-out;
  font-family:inherit;
}
.no-public .news-banner.is-visible { opacity:1; }
.no-public .news-banner[hidden] { display:none; }
.no-public .news-banner .nb-card {
  position:relative;
  background:#ffffff; border-radius:18px; overflow:hidden;
  max-width:560px; width:100%;
  box-shadow:0 30px 60px -16px rgba(0,0,0,.40);
  transform:scale(.96); transition:transform .35s ease-out;
}
.no-public .news-banner.is-visible .nb-card { transform:scale(1); }
.no-public .news-banner .nb-close {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.92); border:none; color:#0D3454; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s, transform .15s;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.25);
}
.no-public .news-banner .nb-close:hover { background:#ffffff; transform:scale(1.06); }
.no-public .news-banner .nb-close svg { width:18px; height:18px; }
.no-public .news-banner .nb-img { width:100%; height:auto; display:block; aspect-ratio:1890/1050; object-fit:cover; background:#0D3454; }
.no-public .news-banner .nb-body { padding:26px 30px 32px; }
.no-public .news-banner .nb-tag {
  display:inline-block; padding:4px 12px; border-radius:30px;
  background:rgba(246,168,58,.15); color:#a36400; border:1px solid rgba(246,168,58,.45);
  font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:12px;
}
.no-public .news-banner h4 { color:#0D3454; font-size:20px; font-weight:700; margin:0 0 10px; line-height:1.25; letter-spacing:-.005em; }
.no-public .news-banner p { color:#3a4a61; font-size:15px; line-height:1.55; margin:0 0 20px; }
.no-public .news-banner .nb-cta {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px; border-radius:10px;
  background:linear-gradient(135deg, #19b6c4, #0d8b97); color:#ffffff;
  font-size:15px; font-weight:600; text-decoration:none;
  text-transform:uppercase; letter-spacing:.08em;
  box-shadow:0 12px 26px -12px rgba(25,182,196,.55);
  transition:filter .2s, transform .15s;
}
.no-public .news-banner .nb-cta:hover { filter:brightness(1.08); transform:translateY(-1px); }
@media (max-width:520px) {
  .no-public .news-banner .nb-body { padding:22px 22px 26px; }
  .no-public .news-banner h4 { font-size:18px; }
}

/* ── /erp-transporte — comparativa "ERP genérico" vs. "NetOffice nativo" ── */
.no-public .native-compare {
  display:grid; grid-template-columns:1fr auto 1fr; gap:28px; align-items:stretch;
  max-width:1100px; margin:40px auto 8px;
}
.no-public .nc-col { border-radius:18px; padding:32px 30px; }
.no-public .nc-generic { background:#f4f6f9; border:1px solid #e2e8f0; }
.no-public .nc-native { background:#ffffff; border:1.5px solid #19b6c4; box-shadow:0 20px 40px -24px rgba(25,182,196,.35); position:relative; }
.no-public .nc-tag {
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:11.5px;
  letter-spacing:.10em; text-transform:uppercase; font-weight:700;
  padding:6px 14px; border-radius:20px; margin-bottom:20px;
}
.no-public .nc-generic .nc-tag { background:#e2e8f0; color:#6b7a90; }
.no-public .nc-native .nc-tag { background:rgba(25,182,196,.14); color:#0e7a85; border:1px solid rgba(25,182,196,.4); }
.no-public .nc-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.no-public .nc-col li { padding-left:28px; position:relative; font-size:16px; line-height:1.5; }
.no-public .nc-generic li { color:#5a6b83; }
.no-public .nc-generic li::before { content:"–"; position:absolute; left:4px; color:#9aa6b5; font-weight:700; }
.no-public .nc-native li { color:#12253f; font-weight:500; }
.no-public .nc-native li::before { content:"✓"; position:absolute; left:0; color:#19b6c4; font-weight:700; }
.no-public .nc-vs {
  align-self:center; width:44px; height:44px; border-radius:50%;
  background:#0D3454; color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; letter-spacing:.05em;
  box-shadow:0 8px 20px -8px rgba(13,52,84,.5);
}
@media (max-width:760px) {
  .no-public .native-compare { grid-template-columns:1fr; }
  .no-public .nc-vs { justify-self:center; }
}

/* /erp-transporte — números de la banda de stats en degradado azul-a-navy */
.no-public .erp-stats .stat .v {
  background:linear-gradient(135deg, #2170B3, #0D3454);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* /erp-transporte — rejilla de tarjetas restante, centrada tras quitar una tarjeta */
@media (min-width:1025px) {
  .no-public .card-grid.card-grid-centered { grid-template-columns:repeat(4, minmax(220px,260px)); justify-content:center; }
}

/* Panel oscuro contenido (banner) para "Qué cubre", sin oscurecer toda la sección */
.no-public section.np#que-cubre .cubre-panel {
  background:linear-gradient(140deg, #2170B3 0%, #0D3454 55%, #0D3454 100%);
  border:1px solid rgba(255,255,255,.14); border-radius:24px;
  padding:40px 36px; margin-top:32px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.40);
}
.no-public section.np#que-cubre .cubre-panel .card-grid { margin-top:0; }
.no-public section.np#que-cubre .cubre-panel .card { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); box-shadow:none; }
.no-public section.np#que-cubre .cubre-panel .card h3 { color:#ffffff; }
.no-public section.np#que-cubre .cubre-panel .card p { color:rgba(255,255,255,.75); }
.no-public section.np#que-cubre .cubre-panel .card .ic { color:#19b6c4; background:rgba(25,182,196,.18); border:1px solid rgba(25,182,196,.40); }
@media (max-width:680px) { .no-public section.np#que-cubre .cubre-panel { padding:28px 22px; } }

/* ── Divisor "ruta con puntos IA" — franja decorativa entre secciones, sugiere optimización de rutas con IA sin dibujar un camión literal (primer uso: /erp-transporte, reutilizable) ── */
.no-public .route-divider { padding:36px 32px 30px; max-width:1000px; margin:0 auto; }
.no-public .route-divider-inner { position:relative; height:16px; }
.no-public .route-divider-inner svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.no-public .route-divider-inner svg line { stroke:rgba(33,112,179,.30); stroke-width:2; stroke-dasharray:2 10; stroke-linecap:round; }
.no-public .route-stop {
  position:absolute; top:50%; width:9px; height:9px; border-radius:50%;
  background:#ffffff; border:2px solid rgba(33,112,179,.35);
  transform:translate(-50%,-50%); z-index:1;
}
.no-public .route-stop::after {
  content:''; position:absolute; inset:-6px; border-radius:50%;
  background:rgba(25,182,196,.55); opacity:0; transform:scale(.4);
  animation:route-stop-glow 6s ease-in-out infinite;
}
.no-public .route-stop.rs-1::after { animation-delay:.1s; }
.no-public .route-stop.rs-2::after { animation-delay:1.42s; }
.no-public .route-stop.rs-3::after { animation-delay:2.8s; }
.no-public .route-stop.rs-4::after { animation-delay:4.18s; }
.no-public .route-stop.rs-5::after { animation-delay:5.5s; }
.no-public .route-dot {
  position:absolute; top:50%; left:0; width:11px; height:11px; border-radius:50%;
  background:#19b6c4; box-shadow:0 0 0 4px rgba(25,182,196,.18), 0 0 14px 2px rgba(25,182,196,.85);
  transform:translate(-50%,-50%); z-index:2;
  animation:route-travel 6s linear infinite;
}
@keyframes route-travel {
  0%   { left:0%; }
  100% { left:100%; }
}
@keyframes route-stop-glow {
  0%, 92%, 100% { opacity:0; transform:scale(.4); }
  4%            { opacity:1; transform:scale(1.5); }
  14%           { opacity:0; transform:scale(.4); }
}
.no-public .route-caption {
  text-align:center; margin:14px 0 0;
  font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:#8494a8;
}

@media (max-width:560px) { .no-public .route-divider { padding:26px 22px 22px; } }

/* Variante: elemento viajero como icono (camión, móvil…) en vez de punto simple — mismos SVG line-art que el resto de la web */
.no-public .route-dot.route-dot-icon {
  width:24px; height:24px; border-radius:0; background:none; box-shadow:none;
  color:#19b6c4; display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 2px 6px rgba(25,182,196,.55));
}
.no-public .route-dot.route-dot-icon svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* Segundo vehículo en la misma ruta, desfasado medio ciclo — sensación de flota en movimiento (/netoffice) */
.no-public .route-dot.route-dot-b { animation-delay:-3s; }
/* Anillo de "conectado" pulsante alrededor del icono viajero (variante conductor, /app-driver) */
.no-public .route-dot-icon.route-dot-ping { position:absolute; }
.no-public .route-dot-icon.route-dot-ping::after {
  content:''; position:absolute; inset:-9px; border-radius:50%;
  border:1.5px solid rgba(25,182,196,.55);
  animation:route-ping 2s ease-out infinite;
}
@keyframes route-ping {
  0%   { transform:scale(.6); opacity:.9; }
  100% { transform:scale(1.7); opacity:0; }
}


/* ── Divisor "red de nodos IA" — mecánica distinta al route-divider: sin elemento único viajero,
   una red de nodos dispersos (no en línea recta) que se van iluminando en cadena, como una señal
   propagándose por la red (primer uso: /netoffice/transporte) ── */
.no-public .node-network-divider { padding:40px 32px 30px; max-width:1000px; margin:0 auto; }
.no-public .node-network-inner { position:relative; height:80px; }
.no-public .node-network-inner svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.no-public .node-network-inner svg line { stroke:rgba(33,112,179,.22); stroke-width:1.3; vector-effect:non-scaling-stroke; }
.no-public .node-network-inner svg line.nn-pulse {
  stroke:#19b6c4; stroke-width:1.6; opacity:0;
  animation:nn-line-glow 4.8s ease-in-out infinite;
  filter:drop-shadow(0 0 3px rgba(25,182,196,.8));
}
.no-public .nn-node {
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:#ffffff; border:2px solid rgba(33,112,179,.35);
  transform:translate(-50%,-50%); z-index:1;
}
.no-public .nn-node::after {
  content:''; position:absolute; inset:-7px; border-radius:50%;
  background:rgba(25,182,196,.55); opacity:0; transform:scale(.4);
  animation:nn-node-glow 4.8s ease-in-out infinite;
}
.no-public .nn-node.nn-1::after { animation-delay:.1s; }
.no-public .nn-node.nn-2::after { animation-delay:.6s; }
.no-public .nn-node.nn-3::after { animation-delay:1.1s; }
.no-public .nn-node.nn-4::after { animation-delay:1.6s; }
.no-public .nn-node.nn-5::after { animation-delay:2.1s; }
.no-public .nn-node.nn-6::after { animation-delay:2.6s; }
.no-public .node-network-inner svg line.nn-pulse.nn-l1 { animation-delay:.35s; }
.no-public .node-network-inner svg line.nn-pulse.nn-l2 { animation-delay:.85s; }
.no-public .node-network-inner svg line.nn-pulse.nn-l3 { animation-delay:1.35s; }
.no-public .node-network-inner svg line.nn-pulse.nn-l4 { animation-delay:1.85s; }
.no-public .node-network-inner svg line.nn-pulse.nn-l5 { animation-delay:2.35s; }
@keyframes nn-node-glow {
  0%, 90%, 100% { opacity:0; transform:scale(.4); }
  4%            { opacity:1; transform:scale(1.6); }
  16%           { opacity:0; transform:scale(.4); }
}
@keyframes nn-line-glow {
  0%, 88%, 100% { opacity:0; }
  6%            { opacity:1; }
  20%           { opacity:0; }
}

@media (max-width:560px) {
  .no-public .node-network-divider { padding:28px 22px 22px; }
  .no-public .node-network-inner { height:64px; }
}

/* ── Divisor "oficina → carretera → conductor" — dos iconos ancla (pantalla de oficina y móvil del
   conductor) unidos por una carretera con pulsos viajando entre ambos. Tercera mecánica de divisor,
   más literal que las otras dos (primer uso: /netoffice/transporte) ── */
.no-public .screen-road-divider { padding:36px 32px 30px; max-width:900px; margin:0 auto; }
.no-public .screen-road-inner { display:flex; align-items:center; gap:18px; }
.no-public .sr-icon {
  flex:0 0 auto; width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(25,182,196,.10); border:1px solid rgba(25,182,196,.35); color:#19b6c4;
}
.no-public .sr-icon svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .sr-road { position:relative; flex:1 1 auto; height:14px; }
.no-public .sr-road svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.no-public .sr-road svg line { stroke:rgba(33,112,179,.30); stroke-width:2; stroke-dasharray:14 10; stroke-linecap:round; }
.no-public .sr-pulse {
  position:absolute; top:50%; left:0; width:9px; height:9px; border-radius:50%;
  background:#19b6c4; box-shadow:0 0 0 4px rgba(25,182,196,.18), 0 0 12px 2px rgba(25,182,196,.85);
  transform:translate(-50%,-50%);
  animation:sr-travel 3.2s linear infinite;
}
.no-public .sr-pulse.sr-pulse-b { animation-delay:-1.6s; }
@keyframes sr-travel {
  0%   { left:0%; opacity:0; }
  8%   { opacity:1; }
  92%  { opacity:1; }
  100% { left:100%; opacity:0; }
}

@media (max-width:560px) {
  .no-public .screen-road-inner { gap:10px; }
  .no-public .sr-icon { width:34px; height:34px; }
  .no-public .sr-icon svg { width:18px; height:18px; }
}

/* ── Divisor "portal converge" — 4 trámites del empleado convergiendo hacia un portal central,
   en vez de un elemento viajero sobre una línea. Cuarta mecánica de divisor, radial en vez de
   lineal (primer uso: /netoffice/personal) ── */
.no-public .portal-divider { padding:40px 32px 34px; max-width:900px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:16px; }
.no-public .portal-orbit { position:relative; width:150px; height:150px; }
.no-public .portal-hub {
  position:absolute; top:52px; left:52px; width:46px; height:46px; border-radius:14px;
  background:rgba(25,182,196,.12); border:1.5px solid rgba(25,182,196,.45);
  display:flex; align-items:center; justify-content:center; color:#19b6c4;
  animation:portal-hub-glow 4s ease-in-out infinite;
}
.no-public .portal-hub svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .portal-sat {
  position:absolute; width:34px; height:34px; border-radius:10px;
  background:#ffffff; border:1.5px solid rgba(33,112,179,.30);
  display:flex; align-items:center; justify-content:center; color:#2170B3;
  animation:portal-converge 4s ease-in-out infinite;
}
.no-public .portal-sat svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .portal-sat.ps-top    { top:0px;   left:58px;  --dx:0px;   --dy:58px;  animation-delay:0s; }
.no-public .portal-sat.ps-right  { top:58px;  left:116px; --dx:-58px; --dy:0px;   animation-delay:.15s; }
.no-public .portal-sat.ps-bottom { top:116px; left:58px;  --dx:0px;   --dy:-58px; animation-delay:.3s; }
.no-public .portal-sat.ps-left   { top:58px;  left:0px;   --dx:58px;  --dy:0px;   animation-delay:.45s; }
@keyframes portal-converge {
  0%, 38%  { transform:translate(0,0) scale(1); opacity:1; }
  52%      { transform:translate(var(--dx), var(--dy)) scale(.25); opacity:0; }
  53%, 90% { transform:translate(0,0) scale(1); opacity:0; }
  100%     { transform:translate(0,0) scale(1); opacity:1; }
}
@keyframes portal-hub-glow {
  0%, 50%  { box-shadow:0 0 0 0 rgba(25,182,196,0); }
  58%      { box-shadow:0 0 0 10px rgba(25,182,196,.22), 0 0 24px 4px rgba(25,182,196,.6); }
  75%,100% { box-shadow:0 0 0 0 rgba(25,182,196,0); }
}

@media (max-width:560px) {
  .no-public .portal-orbit { width:130px; height:130px; }
  .no-public .portal-hub { top:42px; left:42px; width:42px; height:42px; }
  .no-public .portal-sat { width:30px; height:30px; }
  .no-public .portal-sat.ps-top    { left:50px; }
  .no-public .portal-sat.ps-right  { top:50px; left:100px; }
  .no-public .portal-sat.ps-bottom { top:100px; left:50px; }
  .no-public .portal-sat.ps-left   { top:50px; }
}

/* ── Stats strip (panel oscuro contenido, números grandes y separadores verticales) ── */
.no-public section.np.stats-band-sky { padding:20px 32px 60px; max-width:1300px; margin:0 auto; }
.no-public section.np.stats-band-sky .stats-panel {
  background:linear-gradient(140deg, #2170B3 0%, #0D3454 55%, #0D3454 100%);
  border:1px solid rgba(255,255,255,.14); border-radius:24px;
  padding:44px 36px; box-shadow:0 30px 60px -28px rgba(0,0,0,.40);
}
.no-public .stats-strip { display:grid; grid-template-columns:repeat(3, 1fr); gap:0; max-width:1100px; margin:0 auto; }
.no-public .ss-item { text-align:center; padding:8px 28px; position:relative; }
.no-public .ss-item + .ss-item::before {
  content:''; position:absolute; left:0; top:14%; bottom:14%; width:1px;
  background:rgba(255,255,255,.18);
}
.no-public .ss-num { font-family:'JetBrains Mono', monospace; font-size:56px; font-weight:700; color:#f6a83a; letter-spacing:-.025em; line-height:1; }
.no-public .ss-num small { font-size:.55em; margin-left:2px; }
.no-public .ss-lbl { color:rgba(255,255,255,.85); font-size:18px; margin-top:16px; font-weight:600; letter-spacing:.02em; line-height:1.45; }
@media (max-width:680px) { .no-public section.np.stats-band-sky .stats-panel { padding:28px 22px; } }
@media (max-width:760px){
  .no-public .stats-strip { grid-template-columns:1fr; gap:32px; }
  .no-public .ss-item + .ss-item::before { display:none; }
}

/* /netoffice/almacen — pipe-step contraste: texto legible sobre fondo claro */
.no-public .pipe-step { background:#ffffff !important; border:1.5px solid rgba(25,182,196,.30) !important; box-shadow:0 12px 26px -22px rgba(13,52,84,.18); }
.no-public .pipe-step p { color:#3a4a61 !important; font-size:14px; }
.no-public .pipe-step .pipe-stage { color:#19b6c4 !important; opacity:1; font-size:13px; }

/* Sección split con ilustración almacenaje */
.no-public .almacen-intro-split { padding:40px 32px 20px; max-width:1300px; margin:0 auto; }
.no-public .almacen-intro-split .ais-grid { display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:center; }
.no-public .almacen-intro-split .ais-media { width:320px; max-width:100%; }
.no-public .almacen-intro-split .ais-media img { width:100%; height:auto; display:block; filter:drop-shadow(0 24px 48px rgba(25,182,196,.20)); }
.no-public .almacen-intro-split .ais-text .eyebrow-line { margin-bottom:10px; }
.no-public .almacen-intro-split .ais-text h2 { color:#0D3454; font-size:clamp(26px, 2.6vw, 36px); margin-bottom:14px; letter-spacing:-.01em; line-height:1.15; }
.no-public .almacen-intro-split .ais-text p { color:#3a4a61; font-size:17px; line-height:1.6; }
@media (max-width:760px) {
  .no-public .almacen-intro-split .ais-grid { grid-template-columns:1fr; gap:24px; justify-items:center; text-align:center; }
}

/* /netoffice/almacen — Integración nativa: fila simple de 4 cards */
.no-public .almacen-conexion-v2 { padding:60px 32px; max-width:1300px; margin:0 auto; }
.no-public .conex-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:32px; }
.no-public .conex-card { background:#ffffff; border:1px solid rgba(33,112,179,.14); border-radius:14px; padding:24px 22px; text-align:left; box-shadow:0 12px 28px -22px rgba(13,52,84,.18); transition:transform .2s, border-color .2s, box-shadow .2s; }
.no-public .conex-card:hover { transform:translateY(-3px); border-color:#19b6c4; box-shadow:0 18px 36px -22px rgba(25,182,196,.25); }
.no-public .conex-card .cx-ic { width:44px; height:44px; border-radius:11px; background:rgba(25,182,196,.14); border:1px solid rgba(25,182,196,.40); color:#19b6c4; display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; }
.no-public .conex-card .cx-ic svg { width:22px; height:22px; }
.no-public .conex-card h3 { color:#0D3454; font-size:17px; font-weight:700; margin-bottom:6px; letter-spacing:-.005em; }
.no-public .conex-card p { color:#3a4a61; font-size:14.5px; line-height:1.5; margin:0; }
@media (max-width:900px) { .no-public .conex-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .no-public .conex-grid { grid-template-columns:1fr; } }

/* Panel oscuro contenido (banner) para destacar la integración, sin oscurecer toda la sección */
.no-public .almacen-conexion-v2 .conex-panel {
  background:linear-gradient(140deg, #2170B3 0%, #0D3454 55%, #0D3454 100%);
  border:1px solid rgba(255,255,255,.14); border-radius:24px;
  padding:40px 36px; margin-top:32px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.40);
}
.no-public .almacen-conexion-v2 .conex-panel .conex-grid { margin-top:0; }
.no-public .almacen-conexion-v2 .conex-panel .conex-card { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); box-shadow:none; }
.no-public .almacen-conexion-v2 .conex-panel .conex-card:hover { border-color:#19b6c4; box-shadow:0 18px 36px -22px rgba(0,0,0,.35); }
.no-public .almacen-conexion-v2 .conex-panel .conex-card h3 { color:#ffffff; }
.no-public .almacen-conexion-v2 .conex-panel .conex-card p { color:rgba(255,255,255,.75); }
@media (max-width:680px) { .no-public .almacen-conexion-v2 .conex-panel { padding:28px 22px; } }

/* CTA debajo de la sección IA en home → /ia-viva */
.no-public .ia-section-cta { display:flex; justify-content:center; margin-top:36px; }
.no-public .btn-ia-more {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border-radius:30px;
  background:rgba(25,182,196,.18); border:1.5px solid rgba(25,182,196,.55); color:#ffffff;
  font-size:15px; font-weight:600; text-decoration:none;
  text-transform:uppercase; letter-spacing:.10em;
  transition:background .2s, transform .15s;
}
.no-public .btn-ia-more:hover { background:rgba(25,182,196,.32); transform:translateY(-1px); }
.no-public .btn-ia-more span { font-size:18px; }

/* ── Driver cross-sell (en /netoffice/transporte): un móvil + 3 puntos + CTA ── */
.no-public .driver-cross-section { padding:60px 32px; max-width:1300px; margin:0 auto; }
.no-public .driver-cross { display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center; }
.no-public .driver-cross-text { order:1; }
.no-public .driver-cross-media { order:2; display:flex; align-items:center; gap:18px; }
.no-public .driver-cross-media > img { order:2; }
.no-public .driver-cross-media { position:relative; display:flex; justify-content:center; }
.no-public .driver-cross-media img { max-width:100%; max-height:520px; width:auto; filter:drop-shadow(0 30px 60px rgba(13,52,84,.30)); }
.no-public .driver-cross-media .dcr-tag {
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  padding:6px 14px; border-radius:30px; background:#0D3454; color:#ffffff;
  font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:.10em; text-transform:uppercase; font-weight:600;
  white-space:nowrap;
}
/* Dos chips Android / iOS al lateral del móvil — apilados verticalmente y compactos */
.no-public .driver-cross-media .platform-chips-mini { display:inline-flex; flex-direction:column; gap:12px; align-self:center; order:1; }
.no-public .driver-cross-media .platform-chips-mini .platform-chip {
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:12px;
  background:#ffffff !important; border:1.5px solid rgba(33,112,179,.20) !important;
  box-shadow:0 10px 22px -16px rgba(13,52,84,.20);
  width:auto !important; max-width:max-content;
}
.no-public .driver-cross-media .platform-chips-mini .platform-ic { width:26px; height:26px; flex-shrink:0; }
.no-public .driver-cross-media .platform-chips-mini .platform-meta { line-height:1.1; }
.no-public .driver-cross-media .platform-chips-mini .platform-meta small { font-size:11px; }
.no-public .driver-cross-media .platform-chips-mini .platform-meta b { font-size:14.5px; }
.no-public .driver-cross-text .section-title { margin-bottom:14px; font-size:clamp(28px, 2.8vw, 38px); }
.no-public .driver-cross-text > p { color:#3a4a61; font-size:17px; line-height:1.6; margin-bottom:20px; }
.no-public .driver-cross-list { list-style:none; padding:0; margin:0 0 28px; display:grid; gap:14px; }
.no-public .driver-cross-list li { padding-left:24px; position:relative; }
.no-public .driver-cross-list li::before { content:''; position:absolute; left:0; top:8px; width:10px; height:10px; border-radius:50%; background:#19b6c4; box-shadow:0 0 0 3px rgba(25,182,196,.20); }
.no-public .driver-cross-list li b { display:block; color:#0D3454; font-size:15.5px; font-weight:700; }
.no-public .driver-cross-list li span { color:#3a4a61; font-size:14.5px; line-height:1.5; }
.no-public .driver-cross-cta {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:10px;
  background:linear-gradient(135deg, #19b6c4, #0d8b97); color:#ffffff; font-size:16px; font-weight:600;
  text-decoration:none;
  box-shadow:0 12px 28px -14px rgba(25,182,196,.55);
  transition:filter .2s, transform .15s;
}
.no-public .driver-cross-cta:hover { filter:brightness(1.08); transform:translateY(-1px); }
@media (max-width:760px) {
  .no-public .driver-cross { grid-template-columns:1fr; gap:36px; justify-items:center; text-align:center; }
  .no-public .driver-cross-list { text-align:left; }
}

/* ── Extranet split (captura + dos tabs compactos) ── */
.no-public .extranet-section { padding:60px 32px; max-width:1300px; margin:0 auto; }
.no-public .extranet-split { display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:center; margin-top:32px; }
/* Monitor escritorio: frame + barra + pantalla + soporte */
.no-public .extranet-shot { display:flex; flex-direction:column; align-items:center; }
.no-public .extranet-shot .desktop-frame { background:#0D3454; border-radius:14px; padding:10px; box-shadow:0 40px 80px -28px rgba(13,52,84,.45); width:100%; }
.no-public .extranet-shot .desktop-bar { display:flex; align-items:center; gap:6px; padding:4px 10px 10px; }
.no-public .extranet-shot .desktop-bar > span { width:10px; height:10px; border-radius:50%; background:#33415c; }
.no-public .extranet-shot .desktop-bar > span:nth-child(1){background:#ff5f56;}
.no-public .extranet-shot .desktop-bar > span:nth-child(2){background:#ffbd2e;}
.no-public .extranet-shot .desktop-bar > span:nth-child(3){background:#27c93f;}
.no-public .extranet-shot .desktop-url { margin-left:14px; flex:1; background:rgba(255,255,255,.10); border-radius:6px; padding:4px 12px; font-family:'JetBrains Mono',monospace; font-size:12px; color:rgba(255,255,255,.75); }
.no-public .extranet-shot .desktop-screen { border-radius:6px; overflow:hidden; background:#ffffff; }
.no-public .extranet-shot .desktop-screen img { width:100%; height:auto; display:block; }
.no-public .extranet-shot .desktop-stand { width:28%; height:24px; background:linear-gradient(180deg, #0D3454, #1a4567); clip-path:polygon(20% 0, 80% 0, 90% 100%, 10% 100%); }
.no-public .extranet-shot .desktop-base { width:42%; height:6px; border-radius:6px; background:#0D3454; box-shadow:0 6px 18px -8px rgba(13,52,84,.45); }
/* Tabs */
.no-public .extranet-tabs { display:grid; gap:18px; }
.no-public .extranet-tab { background:#ffffff; border:1px solid rgba(33,112,179,.16); border-radius:14px; padding:22px 24px; box-shadow:0 12px 28px -22px rgba(13,52,84,.20); transition:transform .2s, box-shadow .2s, border-color .2s; }
.no-public .extranet-tab:hover { transform:translateY(-3px); border-color:#19b6c4; box-shadow:0 20px 38px -22px rgba(25,182,196,.30); }
.no-public .extranet-tab .ext-head { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.no-public .extranet-tab .ext-ic { width:44px; height:44px; border-radius:11px; background:rgba(25,182,196,.14); border:1px solid rgba(25,182,196,.40); color:#19b6c4; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.no-public .extranet-tab .ext-ic.ext-ic-amber { background:rgba(246,168,58,.14); border-color:rgba(246,168,58,.45); color:#f6a83a; }
.no-public .extranet-tab .ext-ic svg { width:22px; height:22px; }
.no-public .extranet-tab h3 { color:#0D3454; font-size:18px; font-weight:700; margin:0; letter-spacing:-.005em; }
.no-public .extranet-tab ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.no-public .extranet-tab li { padding-left:22px; position:relative; color:#1a2433; font-size:14.5px; line-height:1.5; }
.no-public .extranet-tab li::before { content:'✓'; position:absolute; left:0; top:0; color:#19b6c4; font-weight:700; }
.no-public .extranet-tab:nth-child(2) li::before { color:#f6a83a; }
@media (max-width:960px) {
  .no-public .extranet-split { grid-template-columns:1fr; gap:36px; }
}

/* ── DeCA flow (/netoffice/transporte): 3 pasos horizontales con QR como output ── */
.no-public .deca-flow-section { padding:70px 32px; max-width:1300px; margin:0 auto; }
.no-public .deca-flow-section .section-head { margin-bottom:48px; }
.no-public .deca-flow { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; position:relative; }
.no-public .dfs-step {
  position:relative; padding:32px 28px; border-radius:18px;
  background:#ffffff; border:1px solid rgba(33,112,179,.14);
  box-shadow:0 14px 32px -22px rgba(13,52,84,.18);
}
.no-public .dfs-step .dfs-num {
  position:absolute; top:18px; right:22px;
  font-family:'JetBrains Mono', monospace; font-size:13px; letter-spacing:.16em; font-weight:700;
  color:rgba(33,112,179,.45);
}
.no-public .dfs-step .dfs-ic {
  width:56px; height:56px; border-radius:14px;
  background:rgba(25,182,196,.14); border:1px solid rgba(25,182,196,.40); color:#19b6c4;
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.no-public .dfs-step .dfs-ic svg { width:26px; height:26px; }
.no-public .dfs-step h3 { color:#0D3454; font-size:20px; font-weight:700; margin-bottom:8px; letter-spacing:-.005em; }
.no-public .dfs-step p { color:#3a4a61; font-size:15px; line-height:1.55; }
/* Tercer step: el QR ocupa el lugar del icono */
.no-public .dfs-final { background:linear-gradient(160deg, #ffffff, #EEF4FA); border-color:#19b6c4; }
.no-public .dfs-qr { width:78px; height:78px; padding:6px; background:#ffffff; border:2px solid #0D3454; border-radius:10px; margin-bottom:18px; }
.no-public .dfs-qr svg { width:100%; height:100%; display:block; }
/* Flechas entre pasos (escritorio) */
.no-public .dfs-step:not(:last-child)::after {
  content:''; position:absolute; right:-18px; top:50%; transform:translateY(-50%);
  width:0; height:0; border-left:12px solid #19b6c4; border-top:8px solid transparent; border-bottom:8px solid transparent; z-index:2;
}
.no-public .deca-flow-cta { display:flex; justify-content:center; margin-top:36px; }
@media (max-width:900px) {
  .no-public .deca-flow { grid-template-columns:1fr; gap:18px; }
  .no-public .dfs-step:not(:last-child)::after {
    right:auto; left:50%; top:auto; bottom:-14px; transform:translateX(-50%) rotate(90deg);
  }
}

/* Panel oscuro contenido (banner) para destacar el DeCA, sin oscurecer toda la sección */
.no-public .deca-flow-section .deca-panel {
  background:linear-gradient(140deg, #2170B3 0%, #0D3454 55%, #0D3454 100%);
  border:1px solid rgba(255,255,255,.14); border-radius:24px;
  padding:40px 36px; box-shadow:0 30px 60px -28px rgba(0,0,0,.40);
}
.no-public .deca-flow-section .deca-panel .dfs-step { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); box-shadow:none; }
.no-public .deca-flow-section .deca-panel .dfs-step .dfs-num { color:rgba(255,255,255,.45); }
.no-public .deca-flow-section .deca-panel .dfs-step h3 { color:#ffffff; }
.no-public .deca-flow-section .deca-panel .dfs-step p { color:rgba(255,255,255,.75); }
.no-public .deca-flow-section .deca-panel .dfs-final { background:rgba(255,255,255,.10); border-color:#19b6c4; }
.no-public .deca-flow-section .deca-panel .dfs-qr { border-color:#19b6c4; }
@media (max-width:680px) { .no-public .deca-flow-section .deca-panel { padding:28px 22px; } }

/* ── DeCA section (/app-driver): QR + texto + descarga dossier ── */
.no-public .deca-section { padding:60px 32px; max-width:1300px; margin:0 auto; }
.no-public .deca-box { background:linear-gradient(140deg, #D6E7F6 0%, #E8EFF7 50%, #EEF4FA 100%); border:1px solid rgba(33,112,179,.16); border-radius:24px; padding:56px; box-shadow:0 24px 48px -28px rgba(33,112,179,.20); }
.no-public .deca-grid { display:grid; grid-template-columns:280px 1fr; gap:64px; align-items:center; }
/* La columna izquierda ya no lleva un documento dibujado sino la captura real
   de la app (932x1532, fondo transparente y sombra propia): es como lo ve el
   conductor. Algo más de ancho para que se lea el QR y el número de documento
   (Ana 2026-10-08). */
.no-public .deca-section .deca-grid { grid-template-columns:340px 1fr; }
.no-public .deca-app { display:block; width:100%; max-width:340px; height:auto; margin:0 auto; }
@media (max-width:480px) { .no-public .deca-app { max-width:280px; } }   /* a 390px de pantalla, 340 dejaban el móvil pegado a los bordes */
.no-public .deca-qr { display:flex; flex-direction:column; align-items:center; gap:14px; }
.no-public .deca-qr-frame { width:240px; height:240px; padding:18px; background:#ffffff; border:2px solid #0D3454; border-radius:18px; box-shadow:0 16px 36px -20px rgba(13,52,84,.30); }
.no-public .deca-qr-frame svg { width:100%; height:100%; display:block; }
.no-public .deca-qr-label { color:#0D3454; font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.no-public .deca-text .section-title { margin-bottom:14px; font-size:clamp(28px, 2.6vw, 36px); }
.no-public .deca-text > p { color:#3a4a61; font-size:18px; line-height:1.6; margin-bottom:14px; }
.no-public .deca-text > p b { color:#0D3454; font-weight:700; }
.no-public .deca-points { list-style:none; padding:0; margin:18px 0 28px; display:grid; gap:12px; }
.no-public .deca-points li { padding-left:24px; position:relative; }
.no-public .deca-points li::before { content:''; position:absolute; left:0; top:8px; width:10px; height:10px; border-radius:50%; background:#19b6c4; box-shadow:0 0 0 3px rgba(25,182,196,.20); }
.no-public .deca-points li b { display:block; color:#0D3454; font-size:18px; font-weight:700; }
.no-public .deca-points li span { color:#3a4a61; font-size:18px; line-height:1.5; }
.no-public .deca-download {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border-radius:10px;
  background:#0D3454; color:#ffffff; font-size:15.5px; font-weight:600;
  border:none; text-decoration:none;
  box-shadow:0 12px 28px -14px rgba(13,52,84,.5);
  transition:background .2s, transform .15s;
}
.no-public .deca-download:hover { background:#143f63; transform:translateY(-1px); }
.no-public .deca-download svg { width:18px; height:18px; }
@media (max-width:760px) {
  .no-public .deca-box { padding:32px; }
  .no-public .deca-grid { grid-template-columns:1fr; gap:32px; }
  .no-public .deca-qr { order:0; }
}

/* Lista "Para quién" — items compactos con título + descripción corta */
.no-public .para-quien-list { list-style:none; padding:0; margin:8px 0 0; column-count:2; column-gap:32px; }
.no-public .para-quien-list li { position:relative; padding-left:22px; break-inside:avoid; margin-bottom:14px; -webkit-column-break-inside:avoid; page-break-inside:avoid; }
.no-public .para-quien-list li:last-child { margin-bottom:0; }
.no-public .para-quien-list li::before { content:''; position:absolute; left:0; top:8px; width:10px; height:10px; border-radius:50%; background:#19b6c4; box-shadow:0 0 0 3px rgba(25,182,196,.18); }
.no-public .para-quien-list li b { display:block; color:#0D3454; font-size:18px; font-weight:700; margin-bottom:4px; letter-spacing:-.005em; }
.no-public .para-quien-list li span { color:#3a4a61; font-size:16px; line-height:1.55; }
@media (max-width:560px) {
  .no-public .para-quien-list { grid-template-columns:1fr; }
}

/* Vídeo vertical (formato móvil) en split-screen con texto */
.no-public .video-vertical { padding:80px 32px; max-width:1200px; margin:0 auto; }
.no-public .vv-grid { display:grid; grid-template-columns:auto 1fr; gap:56px; align-items:center; }
.no-public .vv-media { width:380px; max-width:100%; aspect-ratio:9/16; border-radius:36px; overflow:hidden; background:#0D3454; box-shadow:0 40px 80px -28px rgba(13,52,84,.45); border:8px solid #0D3454; }
.no-public .vv-media video { width:100%; height:100%; display:block; object-fit:contain; background:#0D3454; }
.no-public .vv-text .section-title { margin-bottom:14px; }
.no-public .vv-text p { color:#3a4a61; font-size:18px; line-height:1.6; margin-bottom:24px; }
.no-public .vv-list { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.no-public .vv-list li { padding-left:28px; position:relative; color:#1a2433; font-size:16px; line-height:1.45; }
.no-public .vv-list li::before { content:'✓'; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%; background:#19b6c4; color:#ffffff; text-align:center; font-weight:700; font-size:13px; line-height:20px; }
@media (max-width:760px) {
  .no-public .vv-grid { grid-template-columns:1fr; gap:32px; justify-items:center; }
  .no-public .vv-text { text-align:center; }
  .no-public .vv-text .vv-list { text-align:left; max-width:380px; margin:0 auto; }
}

/* Module-chips: accesos directos a cada módulo desde la home */
.no-public .module-chips { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:32px 0 16px; }
.no-public .module-chip {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border-radius:40px;
  background:#ffffff; border:2px solid color-mix(in srgb, var(--c, #19b6c4) 50%, transparent);
  color:#0D3454; font-size:18px; font-weight:600; letter-spacing:.01em;
  transition:background .2s, color .2s, transform .15s, box-shadow .2s;
  text-decoration:none;
}
.no-public .module-chip::before {
  content:''; display:inline-block; width:10px; height:10px; border-radius:50%;
  background:var(--c, #19b6c4);
}
.no-public .module-chip:hover {
  background:var(--c, #19b6c4); color:#ffffff; transform:translateY(-2px);
  box-shadow:0 10px 24px -12px color-mix(in srgb, var(--c, #19b6c4) 60%, transparent);
}
.no-public .module-chip:hover::before { background:#ffffff; }

/* /ia-viva cierre suave */
.no-public .ia-closing { padding-top:60px; padding-bottom:60px; }
.no-public .ia-closing-inner { max-width:780px; margin:0 auto; text-align:center; }
.no-public .ia-closing .section-title { font-size:clamp(28px, 3.2vw, 42px); margin-bottom:14px; }
.no-public .ia-closing p { color:#3a4a61; font-size:17.5px; line-height:1.6; }

/* ── Cumplimiento normativo: fondo igual al banner de Documentación digital (ecmr-box) ── */
.no-public .cumplimiento-box { background:linear-gradient(160deg, #ffffff 0%, #f4f7fb 100%) !important; border:1px solid rgba(33,112,179,.12) !important; }
.no-public .cump-text p { color:#3a4a61 !important; }
.no-public .cump-text .eyebrow-line.amber, .no-public .cump-text .eyebrow-line { color:#2170B3 !important; }
.no-public .cump-list li { background:#ffffff !important; border:1px solid rgba(33,112,179,.16) !important; }
.no-public .cump-list li::before { background:#2170B3 !important; }
.no-public .cump-list li b { color:#0D3454 !important; }
.no-public .cump-list li span { color:#3a4a61 !important; }

/* Marquee de logos: el brightness(1.6) original se diseñó para fondo oscuro — en claro lava los logos */
.no-public .logo-item { filter:grayscale(1); opacity:.65; }
.no-public .logo-item:hover { filter:none; opacity:1; }

/* Filtros tipo chip encima del marquee — pill grande con punto de color */
.no-public .marquee-filters { display:flex; gap:16px; justify-content:center; margin:24px 0 32px; flex-wrap:wrap; }
.no-public .marquee-chip {
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 32px; border-radius:40px;
  background:#ffffff; border:2px solid var(--chip-c, #19b6c4);
  color:#0D3454; font-size:17px; font-weight:600; letter-spacing:.01em;
  cursor:pointer; font-family:inherit;
  transition:background .2s, color .2s, transform .15s, box-shadow .2s;
}
.no-public .marquee-chip::before {
  content:''; display:inline-block; width:10px; height:10px; border-radius:50%;
  background:var(--chip-c, #19b6c4);
  transition:background .2s;
}
.no-public .marquee-chip[data-filter="localizadores"] { --chip-c:#19b6c4; }
.no-public .marquee-chip[data-filter="fiscales"]      { --chip-c:#f6a83a; }
.no-public .marquee-chip:hover {
  background:var(--chip-c, #19b6c4); color:#ffffff; transform:translateY(-2px);
  box-shadow:0 12px 26px -12px color-mix(in srgb, var(--chip-c, #19b6c4) 60%, transparent);
}
.no-public .marquee-chip:hover::before { background:#ffffff; }
.no-public .marquee-chip.active { background:var(--chip-c, #19b6c4); color:#ffffff; }
.no-public .marquee-chip.active::before { background:#ffffff; }

/* Cuando hay un filtro activo, ocultar los logos no coincidentes */
.no-public .logos-marquee[data-filter="localizadores"] .logo-item:not([data-cat="localizadores"]) { display:none; }
.no-public .logos-marquee[data-filter="fiscales"] .logo-item:not([data-cat="fiscales"]) { display:none; }

/* ── Formulario /contacto: emular el diseño del form de la home (.cf-grid / .cf-field / .cf-submit) ── */
.no-public .contacto-form-wrap { background:#eef2f7; border:1px solid #d8e1ec; border-radius:18px; padding:34px; }
.no-public .contacto-form-wrap h3 { color:#0D3454; font-size:22px; margin-bottom:22px; letter-spacing:-.005em; }
.no-public .contacto-form-wrap form.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.no-public .contacto-form-wrap .contact-form-row { display:contents; }
.no-public .contacto-form-wrap .contact-form-col { display:flex; flex-direction:column; gap:6px; }
/* Campos sueltos (sin row wrapper) van full-width */
.no-public .contacto-form-wrap form.contact-form > .form-label,
.no-public .contacto-form-wrap form.contact-form > .form-input,
.no-public .contacto-form-wrap form.contact-form > .form-textarea,
.no-public .contacto-form-wrap form.contact-form > select.form-input,
.no-public .contacto-form-wrap form.contact-form > .gdpr-block,
.no-public .contacto-form-wrap form.contact-form > label.form-checkbox,
.no-public .contacto-form-wrap form.contact-form > .btn-primary,
.no-public .contacto-form-wrap form.contact-form > p { grid-column:1 / -1; }
.no-public .contacto-form-wrap .form-label { font-size:11.5px; color:#0D3454; text-transform:uppercase; letter-spacing:.10em; font-weight:600; display:block; margin-bottom:6px; }
.no-public .contacto-form-wrap .form-input,
.no-public .contacto-form-wrap .form-textarea,
.no-public .contacto-form-wrap select.form-input {
  width:100%; background:#ffffff; border:1px solid #cfd7e3; border-radius:10px;
  padding:11px 14px; color:#0D3454; font-family:inherit; font-size:14.5px; transition:border-color .2s, box-shadow .2s;
}
.no-public .contacto-form-wrap .form-textarea { resize:vertical; min-height:110px; }
.no-public .contacto-form-wrap .form-input::placeholder,
.no-public .contacto-form-wrap .form-textarea::placeholder { color:#9aa6b5; }
.no-public .contacto-form-wrap .form-input:focus,
.no-public .contacto-form-wrap .form-textarea:focus { outline:none; border-color:#2170B3; box-shadow:0 0 0 3px rgba(33,112,179,.18); }
.no-public .contacto-form-wrap .btn-primary {
  width:100%; padding:14px 20px; border:none; border-radius:10px; cursor:pointer;
  background:#2170B3; color:#ffffff; font-family:inherit; font-size:15.5px; font-weight:600; transition:background .2s, transform .15s;
  margin-top:12px;
}
.no-public .contacto-form-wrap .btn-primary:hover:not([disabled]) { background:#0D3454; transform:translateY(-1px); }
.no-public .contacto-form-wrap .btn-primary[disabled] { opacity:.55; cursor:not-allowed; }
/* GDPR / checkbox / disclaimer */
.no-public .contacto-form-wrap .gdpr-block { background:#ffffff; border:1px solid #d8e1ec; border-radius:10px; padding:14px 16px; font-size:12.5px; color:#4a5b73; margin-top:6px; }
.no-public .contacto-form-wrap .gdpr-info-title { font-weight:600; color:#0D3454; margin-bottom:6px; }
.no-public .contacto-form-wrap .gdpr-table { width:100%; border-collapse:collapse; font-size:12px; }
.no-public .contacto-form-wrap .gdpr-table td { padding:4px 8px; vertical-align:top; }
.no-public .contacto-form-wrap .form-checkbox { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:#4a5b73; margin-top:8px; }
.no-public .contacto-form-wrap .form-error { color:#d94c4c; font-size:13px; }
.no-public .contacto-form-wrap .form-success { color:#0f5a3a; background:#e3f5ec; border:1px solid #b6e2c8; padding:14px 16px; border-radius:10px; }
@media (max-width:640px) {
  .no-public .contacto-form-wrap form.contact-form { grid-template-columns:1fr; }
}

/* ── /contacto: pegar el hero a la sección de datos+formulario ── */
.no-public .hero-page + section.std { padding-top:0; }
.no-public .hero-page + section.std > .deep-row { padding-top:0; border-top:none; }
/* compactar también el hero en /contacto */
body .no-public .hero-page { padding-bottom:16px; }

/* ── /netoffice: banda cielo #D6E7F6 detrás de los módulos principales ── */
.no-public section.np#modulos-principales { isolation:isolate; }
.no-public section.np#modulos-principales > * { position:relative; z-index:1; }
.no-public section.np#modulos-principales::before {
  content:'';
  position:absolute; top:0; bottom:0;
  left:50%; transform:translateX(-50%);
  width:100vw;
  background:#D6E7F6;
  z-index:0;
}
/* tarjetas de módulos más grandes / legibles */
.no-public section.np#modulos-principales .modulo-card { padding:40px; border-radius:22px; }
.no-public section.np#modulos-principales .modulo-card .mc-ic { width:60px; height:60px; border-radius:14px; margin-bottom:22px; }
.no-public section.np#modulos-principales .modulo-card .mc-ic svg { width:30px; height:30px; }
.no-public section.np#modulos-principales .modulo-card .mc-tag { padding:6px 14px; font-size:13px; }
.no-public section.np#modulos-principales .modulo-card h3 { font-size:28px; margin-bottom:14px; }
.no-public section.np#modulos-principales .modulo-card p { font-size:17px; line-height:1.6; margin-bottom:22px; }
.no-public section.np#modulos-principales .modulo-card ul { gap:10px; margin-bottom:22px; }
.no-public section.np#modulos-principales .modulo-card ul li { font-size:16px; padding-left:26px; line-height:1.55; }
.no-public section.np#modulos-principales .modulo-card ul li::before { font-size:15px; top:3px; }
.no-public section.np#modulos-principales .modulo-card .mc-more { font-size:16px; }

/* ════ IA viva — hero con demo animada "lectura de DNI → ficha" ════ */
.no-public .hero-page.hero-with-media { display:grid; grid-template-columns:1.15fr .95fr; gap:56px; align-items:center; }
@media (max-width:960px) {
  .no-public .hero-page.hero-with-media { grid-template-columns:1fr; }
  .no-public .hero-media.dni-scan-demo { margin-top:8px; }
}
.no-public .hero-media.dni-scan-demo { display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }

.no-public .dni-card { position:relative; width:230px; flex-shrink:0; border-radius:16px; padding:18px; overflow:hidden; background:linear-gradient(145deg,#1f5896,#12365e); box-shadow:0 25px 50px -20px rgba(15,42,78,.55); }
.no-public .dni-card-top { display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.no-public .dni-chip { width:26px; height:19px; border-radius:4px; background:linear-gradient(135deg,#f6d37a,#d8a83a); }
.no-public .dni-label { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; color:rgba(255,255,255,.7); text-transform:uppercase; }
.no-public .dni-card-body { display:flex; gap:14px; align-items:flex-start; }
.no-public .dni-photo { width:52px; height:64px; border-radius:8px; background:rgba(255,255,255,.16); flex-shrink:0; position:relative; }
.no-public .dni-photo::after { content:""; position:absolute; left:50%; top:38%; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.3); transform:translate(-50%,-50%); }
.no-public .dni-lines { flex:1; padding-top:4px; }
.no-public .dni-line { height:7px; border-radius:4px; background:rgba(255,255,255,.28); margin-bottom:9px; }
.no-public .dni-line.w-70 { width:70%; }
.no-public .dni-line.w-50 { width:50%; }
.no-public .dni-line.w-60 { width:60%; }
.no-public .dni-line.w-40 { width:40%; margin-bottom:0; }
.no-public .dni-scanline { position:absolute; left:6px; right:6px; height:3px; border-radius:2px; top:6%; background:linear-gradient(90deg,transparent,#19b6c4,transparent); box-shadow:0 0 14px 3px rgba(25,182,196,.85); animation:dniScan 2.8s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes dniScan { 0%{top:6%; opacity:0;} 6%{opacity:1;} 46%{top:92%; opacity:1;} 54%{opacity:0;} 100%{top:92%; opacity:0;} }

.no-public .dni-flow { display:flex; flex-direction:column; gap:7px; }
.no-public .dni-flow span { width:6px; height:6px; border-radius:50%; background:#19b6c4; opacity:.25; display:block; animation:dniFlow 2.8s ease-in-out infinite; }
.no-public .dni-flow span:nth-child(2) { animation-delay:.15s; }
.no-public .dni-flow span:nth-child(3) { animation-delay:.3s; }
@keyframes dniFlow { 0%,40%{opacity:.25; transform:translateX(0);} 50%{opacity:1; transform:translateX(4px);} 60%,100%{opacity:.25; transform:translateX(0);} }

.no-public .dni-ficha { width:220px; flex-shrink:0; background:#0b1428; border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:18px 20px; }
.no-public .dni-ficha h4 { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#19b6c4; margin-bottom:14px; font-weight:600; }
.no-public .dni-ficha .field { display:flex; flex-direction:column; gap:2px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.07); opacity:0; transform:translateX(6px); animation:dniFieldIn 2.8s ease infinite; }
.no-public .dni-ficha .field:last-child { border-bottom:none; }
.no-public .dni-ficha .field span { font-size:10.5px; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.06em; }
.no-public .dni-ficha .field b { font-size:14px; color:#fff; font-weight:600; }
.no-public .dni-ficha .field.f1 { animation-delay:0s; }
.no-public .dni-ficha .field.f2 { animation-delay:.2s; }
.no-public .dni-ficha .field.f3 { animation-delay:.4s; }
.no-public .dni-ficha .field.f4 { animation-delay:.6s; }
@keyframes dniFieldIn { 0%,50%{opacity:0; transform:translateX(6px);} 60%,88%{opacity:1; transform:translateX(0);} 100%{opacity:0; transform:translateX(6px);} }

/* ════ /contacto — versión oscura (el formulario NO se toca) ════ */
.no-public .hero-page.contacto-dark { position:relative; isolation:isolate; }
.no-public .hero-page.contacto-dark > * { position:relative; z-index:1; }
.no-public .hero-page.contacto-dark::before {
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; background:linear-gradient(180deg, #0f2a4e 0%, #0D3454 100%); z-index:0;
}
.no-public .hero-page.contacto-dark h1 { color:#ffffff; }
.no-public .hero-page.contacto-dark .sub { color:#dbe5f2; }
.no-public .hero-page.contacto-dark .eyebrow { color:#19b6c4; }
.no-public .hero-page.contacto-dark .eyebrow::before { background:#19b6c4; }

/* ════ /netoffice/personal — hero ════ */
.no-public .hero-page.hero-full.hero-personal-pad { padding-bottom:62px; }

.no-public .hero-page.personal-dark { position:relative; isolation:isolate; }
.no-public .hero-page.personal-dark > * { position:relative; z-index:1; }
.no-public .hero-page.personal-dark::before {
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; background:linear-gradient(180deg, #0f2a4e 0%, #0D3454 100%); z-index:0;
}
.no-public .hero-page.personal-dark h1 { color:#ffffff; }
.no-public .hero-page.personal-dark .sub { color:rgba(255,255,255,.85); }
.no-public .hero-page.personal-dark .eyebrow-line { background:transparent; border:1px solid rgba(255,255,255,.45); color:#19b6c4; }

/* Panel oscuro contenido (banner) para "Qué puede hacer el empleado", sin oscurecer toda la sección */
.no-public section.np#capacidades-personal .personal-panel {
  background:linear-gradient(140deg, #2170B3 0%, #0D3454 55%, #0D3454 100%);
  border:1px solid rgba(255,255,255,.14); border-radius:24px;
  padding:40px 44px; margin-top:32px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.40);
}
.no-public section.np#capacidades-personal .personal-panel .features-editorial { margin-top:0; }
.no-public section.np#capacidades-personal .personal-panel .features-editorial li { border-top:1px solid rgba(255,255,255,.14); }
.no-public section.np#capacidades-personal .personal-panel .features-editorial li:last-child { border-bottom:1px solid rgba(255,255,255,.14); }
.no-public section.np#capacidades-personal .personal-panel .features-editorial .fe-num { color:#19b6c4; }
.no-public section.np#capacidades-personal .personal-panel .features-editorial .fe-ic { background:rgba(25,182,196,.18); border:1px solid rgba(25,182,196,.40); color:#19b6c4; }
.no-public section.np#capacidades-personal .personal-panel .features-editorial .fe-body h3 { color:#ffffff; }
.no-public section.np#capacidades-personal .personal-panel .features-editorial .fe-body p { color:rgba(255,255,255,.78); }
@media (max-width:680px) { .no-public section.np#capacidades-personal .personal-panel { padding:28px 22px; } }

/* /netoffice/personal — NetOffice Timer vuelve al diseño claro de siempre (2026-07-08): con el panel
   oscuro de "capacidades-personal" justo encima, dos fondos oscuros seguidos se veían iguales/redundantes */

.no-public section.std.contacto-dark { position:relative; isolation:isolate; }
.no-public section.std.contacto-dark > * { position:relative; z-index:1; }
.no-public section.std.contacto-dark::before {
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; background:#0D3454; z-index:0;
}
.no-public section.std.contacto-dark .contacto-data--page .contacto-data-text b { color:#ffffff; }
.no-public section.std.contacto-dark .contacto-data--page .contacto-data-text small { color:#9fb3cc; }
.no-public section.std.contacto-dark .contacto-data--page .contacto-ic { background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border-color:rgba(255,255,255,.30); color:#19b6c4; }

/* ── Mockup portátil (header Personal) — muestra la captura completa sin recortar ── */
.no-public .hero-driver-media .emp-laptop { position:relative; width:100%; max-width:620px; margin:0 auto; z-index:2; filter:drop-shadow(0 42px 48px rgba(0,0,0,.45)); }
.no-public .hero-driver-media .emp-laptop-screen { position:relative; background:#0e1626; border:12px solid #1a2235; border-bottom-width:14px; border-radius:14px 14px 5px 5px; box-shadow:0 30px 60px -22px rgba(0,0,0,.65); overflow:hidden; }
.no-public .hero-driver-media .emp-laptop-screen::before { content:''; position:absolute; top:4px; left:50%; transform:translateX(-50%); width:44px; height:5px; background:#2a3550; border-radius:0 0 6px 6px; z-index:2; }
.no-public .hero-driver-media .emp-laptop-screen img { width:100%; height:auto; max-height:none; display:block; filter:none; border-radius:2px; }
.no-public .hero-driver-media .emp-laptop-base { position:relative; left:-9%; width:118%; height:16px; margin-top:-2px; background:linear-gradient(180deg,#cdd3dd 0%,#9aa3b1 55%,#7b8492 100%); border-radius:0 0 11px 11px; clip-path:polygon(4% 0,96% 0,100% 100%,0 100%); box-shadow:0 10px 16px -7px rgba(0,0,0,.55); }
.no-public .hero-driver-media .emp-laptop-base::before { content:''; position:absolute; left:50%; top:0; transform:translateX(-50%); width:15%; height:6px; background:#737d8c; border-radius:0 0 7px 7px; }

/* ── Hero de vídeo a pantalla completa (home) ── */
.no-public .hero-video-full { position:relative; width:100%; aspect-ratio:1920/820; overflow:hidden; background:#0D3454; }   /* 1920/820: recorta por arriba el margen vacío del propio vídeo (Ana 2026-09-09) */
.no-public .hero-video-full video { display:block; width:100%; height:100%; object-fit:cover; object-position:center bottom; pointer-events:none; }
.no-public .hero-video-full::after { content:''; position:absolute; left:0; right:0; bottom:0; height:110px; background:linear-gradient(to bottom, rgba(13,52,84,0), #0D3454); pointer-events:none; z-index:2; }

/* ===== Página "Para quién" — hero partido + soluciones editoriales alternas ===== */
.no-public .pq-hero .pq-hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; max-width:1200px; margin:0 auto; text-align:left; }
.no-public .pq-hero-media { display:flex; justify-content:center; }
.no-public .pq-hero-media img { width:100%; max-width:380px; height:auto; filter:drop-shadow(0 24px 48px rgba(13,52,84,.18)); }
.no-public .pq-solutions .pq-list { max-width:1060px; margin:0 auto; }
.no-public .pq-row { display:flex; align-items:center; gap:52px; padding:46px 0; border-bottom:1px solid rgba(33,112,179,.40); }
.no-public .pq-row:last-child { border-bottom:none; }
.no-public .pq-row:nth-child(even) { flex-direction:row-reverse; }
.no-public .pq-row:nth-child(even) .pq-body { text-align:right; }
.no-public .pq-aside { flex:0 0 180px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.no-public .pq-num { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:60px; line-height:1; letter-spacing:-.04em; color:#2170B3; opacity:.20; }
.no-public .pq-ic { width:72px; height:72px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:32px; background:linear-gradient(135deg,#e3f0fc,#f3f7fd); border:1px solid rgba(33,112,179,.18); box-shadow:0 12px 30px -16px rgba(33,112,179,.55); }
.no-public .pq-body { flex:1; }
.no-public .pq-body h2 { color:#0D3454; font-size:27px; font-weight:700; letter-spacing:-.01em; margin:0 0 12px; }
.no-public .pq-body p { color:#3a4a61; font-size:17px; line-height:1.72; margin:0; }
.no-public .pq-closing-band { text-align:center; }
.no-public .pq-closing { max-width:760px; margin:0 auto; }
.no-public .pq-closing p { color:#3a4a61; font-size:19px; line-height:1.7; margin:0 0 26px; }
@media (max-width:860px){
  .no-public .pq-hero .pq-hero-grid { grid-template-columns:1fr; text-align:center; gap:32px; }
  .no-public .pq-hero-media { order:-1; }
  .no-public .pq-hero-media img { max-width:300px; }
  .no-public .pq-row, .no-public .pq-row:nth-child(even){ flex-direction:column; text-align:center; gap:20px; padding:34px 0; }
  .no-public .pq-row:nth-child(even) .pq-body{ text-align:center; }
  .no-public .pq-aside{ flex:0 0 auto; flex-direction:row; justify-content:center; gap:20px; }
  .no-public .pq-num{ font-size:48px; }
}

/* ===== /app-driver — contraste "sin/con" + hub ERP (diseño nuevo) ===== */
.no-public .ad-vs { display:grid; grid-template-columns:1fr 1fr; gap:26px; max-width:1000px; margin:0 auto; }
.no-public .ad-vs-col { border-radius:18px; padding:32px 30px; }
.no-public .ad-vs-before { background:rgba(217,76,76,.06); border:1px solid rgba(217,76,76,.22); }
.no-public .ad-vs-after { background:rgba(25,182,196,.07); border:1px solid rgba(25,182,196,.30); }
.no-public .ad-vs-tag { display:inline-block; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.10em; text-transform:uppercase; font-weight:600; padding:6px 14px; border-radius:20px; margin-bottom:16px; }
.no-public .ad-vs-before .ad-vs-tag { color:#d94c4c; background:rgba(217,76,76,.12); }
.no-public .ad-vs-after .ad-vs-tag { color:#0d8b97; background:rgba(25,182,196,.14); }
.no-public .ad-vs-col > p { color:#3a4a61; font-size:16px; line-height:1.7; margin:0 0 18px; }
.no-public .ad-vs-list { list-style:none; display:flex; flex-direction:column; gap:11px; margin:0; padding:0; }
.no-public .ad-vs-list li { position:relative; padding-left:28px; font-size:15px; color:#0D3454; font-weight:600; }
.no-public .ad-vs-list li::before { position:absolute; left:0; font-weight:700; }
.no-public .ad-vs-list.bad li::before { content:'\2715'; color:#d94c4c; }
.no-public .ad-vs-list.good li::before { content:'\2713'; color:#2bb673; }
.no-public .ad-erp-flow { display:flex; flex-direction:column; align-items:center; max-width:920px; margin:8px auto 0; }
.no-public .ad-erp-core { display:inline-flex; align-items:center; gap:10px; padding:16px 30px; border-radius:16px; background:linear-gradient(135deg,#2170B3,#19b6c4); color:#fff; font-weight:700; font-size:18px; box-shadow:0 18px 36px -16px rgba(33,112,179,.6); }
.no-public .ad-erp-line { width:2px; height:34px; background:linear-gradient(to bottom,#19b6c4,rgba(25,182,196,.15)); }
.no-public .ad-erp-mods { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.no-public .ad-erp-mods span { padding:13px 22px; border-radius:12px; background:#fff; border:1px solid rgba(33,112,179,.18); color:#0D3454; font-weight:600; font-size:15px; box-shadow:0 12px 26px -18px rgba(13,52,84,.3); }
@media (max-width:760px){ .no-public .ad-vs { grid-template-columns:1fr; } }

/* ===== /netoffice/personal — "El portal por dentro" (menú de áreas) ===== */
.no-public .pdp-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:1040px; margin:0 auto; }
.no-public .pdp-item { display:flex; gap:16px; align-items:flex-start; padding:22px 24px; border-radius:14px; background:#fff; border:1px solid rgba(33,112,179,.14); box-shadow:0 14px 30px -22px rgba(13,52,84,.28); transition:transform .2s, box-shadow .2s; }
.no-public .pdp-item:hover { transform:translateY(-3px); box-shadow:0 20px 40px -22px rgba(13,52,84,.32); }
.no-public .pdp-ic { flex:0 0 46px; width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; background:linear-gradient(135deg,#e3f0fc,#f3f7fd); border:1px solid rgba(33,112,179,.18); }
.no-public .pdp-tx b { display:block; color:#0D3454; font-size:16.5px; font-weight:700; margin-bottom:5px; }
.no-public .pdp-tx span { display:block; color:#3a4a61; font-size:14.5px; line-height:1.55; }
@media (max-width:760px){ .no-public .pdp-grid { grid-template-columns:1fr; } }

/* ===== /modulos — paneles de módulo apilados con acento de color ===== */
.no-public .mod-list { max-width:980px; margin:0 auto; display:flex; flex-direction:column; gap:20px; }
.no-public .mod-panel { display:block; text-decoration:none; padding:28px 32px; border-radius:16px; background:#fff; border:1px solid rgba(33,112,179,.12); border-left:5px solid var(--mc,#19b6c4); box-shadow:0 16px 34px -24px rgba(13,52,84,.28); transition:transform .2s, box-shadow .2s; }
.no-public .mod-panel:hover { transform:translateY(-3px); box-shadow:0 24px 44px -24px rgba(13,52,84,.34); }
.no-public .mod-head { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.no-public .mod-panel .mod-ic { width:50px; height:50px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--mc,#19b6c4); flex-shrink:0; }
.no-public .mod-panel .mod-ic svg { width:26px; height:26px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.no-public .mod-head h3 { color:#0D3454; font-size:23px; font-weight:700; letter-spacing:-.01em; margin:0; }
.no-public .mod-lead { color:var(--mc,#2170B3); font-weight:600; font-size:15px; margin:0 0 10px; }
.no-public .mod-panel > p:not(.mod-lead) { color:#3a4a61; font-size:16px; line-height:1.7; margin:0 0 16px; }
.no-public .mod-more { display:inline-flex; align-items:center; gap:6px; color:var(--mc,#2170B3); font-weight:600; font-size:15px; transition:gap .2s; }
.no-public .mod-panel:hover .mod-more { gap:11px; }

/* ===== /netoffice/gestion-documental — flujo de proceso (diseño alternativo) ===== */
.no-public .gd-intro { max-width:820px; margin:0 auto; text-align:center; }
.no-public .gd-intro .gd-lead { font-size:20px; color:#0D3454; font-weight:600; line-height:1.6; margin:0 0 18px; }
.no-public .gd-intro p { color:#3a4a61; font-size:16.5px; line-height:1.7; margin:0 0 14px; }
.no-public .gd-flow { max-width:1120px; margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr); gap:20px; position:relative; }
.no-public .gd-flow::before { content:''; position:absolute; top:34px; left:9%; right:9%; height:2px; background:linear-gradient(90deg, rgba(33,112,179,.30), rgba(25,182,196,.30)); z-index:0; }
.no-public .gd-step { position:relative; z-index:1; text-align:center; }
.no-public .gd-step .n { width:68px; height:68px; margin:0 auto 16px; border-radius:50%; background:#fff; border:2px solid #19b6c4; color:#19b6c4; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:22px; box-shadow:0 12px 26px -14px rgba(25,182,196,.5); }
.no-public .gd-step h3 { color:#0D3454; font-size:16px; font-weight:700; margin:0 0 6px; }
.no-public .gd-step p { color:#3a4a61; font-size:13.5px; line-height:1.5; margin:0; }
@media(max-width:820px){
  .no-public .gd-flow { grid-template-columns:1fr; gap:22px; }
  .no-public .gd-flow::before { display:none; }
  .no-public .gd-step { display:grid; grid-template-columns:68px 1fr; gap:16px; text-align:left; align-items:center; }
  .no-public .gd-step .n { margin:0; }
}
/* gestion-documental: solución 2-col + animación OCR + capacidades */
.no-public .gd-solucion { max-width:none; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.no-public .gd-solucion .gd-txt p { color:#3a4a61; font-size:16.5px; line-height:1.72; margin:0 0 16px; }
.no-public .gd-solucion .gd-txt p.gd-lead { font-size:19px; color:#0D3454; font-weight:600; }
@media(max-width:900px){ .no-public .gd-solucion { grid-template-columns:1fr; gap:32px; } }
.no-public .ocr-anim { position:relative; display:grid; grid-template-columns:1fr 44px 1fr; align-items:center; gap:0; }
.no-public .ocr-card { background:linear-gradient(160deg,#0e1a35,#0b1428); border:1px solid rgba(25,182,196,.22); border-radius:16px; padding:14px; box-shadow:0 30px 60px -28px rgba(0,0,0,.55); position:relative; overflow:hidden; min-height:214px; }
.no-public .ocr-bar { display:flex; align-items:center; gap:6px; margin-bottom:12px; }
.no-public .ocr-bar .d { width:9px; height:9px; border-radius:50%; background:#33415c; }
.no-public .ocr-bar .d.r{background:#ff5f56;} .no-public .ocr-bar .d.y{background:#ffbd2e;} .no-public .ocr-bar .d.g{background:#27c93f;}
.no-public .ocr-bar .lbl { margin-left:6px; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:rgba(255,255,255,.72); letter-spacing:.03em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.no-public .ocr-doc { position:relative; background:#f3f6fb; border-radius:8px; padding:14px; overflow:hidden; }
.no-public .ocr-doc .ln { height:8px; border-radius:4px; background:#d5deea; margin-bottom:9px; }
.no-public .ocr-doc .ln.s{ width:58%; } .no-public .ocr-doc .ln.m{ width:82%; } .no-public .ocr-doc .ln.l{ width:100%; }
.no-public .ocr-scan { position:absolute; left:0; right:0; top:0; height:40px; background:linear-gradient(180deg, transparent, rgba(25,182,196,.35) 80%, rgba(25,182,196,.9)); box-shadow:0 6px 16px rgba(25,182,196,.5); animation:ocr-scan 5s cubic-bezier(.55,0,.45,1) infinite; }
@keyframes ocr-scan { 0%{transform:translateY(-40px); opacity:0;} 8%{opacity:1;} 44%{transform:translateY(190px); opacity:.9;} 52%,100%{opacity:0; transform:translateY(190px);} }
.no-public .ocr-pill { position:absolute; top:12px; right:12px; z-index:3; display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:20px; background:rgba(13,52,84,.82); border:1px solid rgba(25,182,196,.55); color:#fff; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.07em; text-transform:uppercase; font-weight:600; }
.no-public .ocr-pill::before { content:''; width:7px; height:7px; border-radius:50%; background:#19b6c4; box-shadow:0 0 8px #19b6c4; animation:tms-ai-pulse 1.2s ease-in-out infinite; }
.no-public .ocr-fields { display:flex; flex-direction:column; gap:9px; }
.no-public .ocr-field { display:flex; justify-content:space-between; align-items:center; gap:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:8px 12px; }
.no-public .ocr-field .k { font-family:'JetBrains Mono',monospace; font-size:11px; color:#8aa0c0; letter-spacing:.02em; }
.no-public .ocr-field .v { font-size:13px; color:#eaf2fb; font-weight:600; opacity:0; transform:translateX(10px); animation:ocr-val 5s ease infinite; }
.no-public .ocr-field:nth-child(1) .v{animation-delay:1.1s;} .no-public .ocr-field:nth-child(2) .v{animation-delay:1.5s;} .no-public .ocr-field:nth-child(3) .v{animation-delay:1.9s;} .no-public .ocr-field:nth-child(4) .v{animation-delay:2.3s;} .no-public .ocr-field:nth-child(5) .v{animation-delay:2.7s;} .no-public .ocr-field:nth-child(6) .v{animation-delay:3.1s;}
@keyframes ocr-val { 0%{opacity:0; transform:translateX(10px);} 7%{opacity:1; transform:none;} 90%{opacity:1;} 97%,100%{opacity:0;} }
.no-public .ocr-arrow { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.no-public .ocr-arrow .fd { width:7px; height:7px; border-radius:50%; background:#19b6c4; animation:np-flow 1.4s ease-in-out infinite; }
.no-public .ocr-arrow .fd:nth-child(2){animation-delay:.2s;} .no-public .ocr-arrow .fd:nth-child(3){animation-delay:.4s;}
.no-public .gd-checks { max-width:960px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:14px; list-style:none; padding:0; }
.no-public .gd-checks li { position:relative; padding:14px 16px 14px 44px; background:#fff; border:1px solid rgba(33,112,179,.12); border-radius:12px; color:#3a4a61; font-size:15px; line-height:1.5; box-shadow:0 12px 26px -20px rgba(13,52,84,.22); }
.no-public .gd-checks li::before { content:'✓'; position:absolute; left:16px; top:14px; color:#2bb673; font-weight:700; }
@media(max-width:900px){ .no-public .ocr-anim { grid-template-columns:1fr; } .no-public .ocr-arrow { flex-direction:row; padding:10px 0; } }
@media(max-width:760px){ .no-public .gd-checks { grid-template-columns:1fr; } }


/* ===================================================================== */
/* /netoffice/transporte (Gestión de tráfico) — oscuro + secciones dosier */
/* (Ana 2026-08-13). Acento del módulo tráfico = cian #19b6c4              */
/* ===================================================================== */

/* --- Overrides de legibilidad en las secciones que se conservan --- */
/* Marco del monitor de la Extranet: era #0D3454 y se fundía con el fondo oscuro → tono dispositivo */
.no-public:has(.page-dark) .extranet-shot .desktop-frame { background:#1a2235; border:1px solid rgba(255,255,255,.10); }
/* Driver cross-sell: textos pensados para fondo claro (#0D3454/#3a4a61) → a claros */
.no-public:has(.page-dark) .driver-cross-text > p { color:#dbe5f2; }
.no-public:has(.page-dark) .driver-cross-list li b { color:#ffffff; }
.no-public:has(.page-dark) .driver-cross-list li span { color:#cfd6e2; }
/* Intro "operativas" y encabezados de sección centrados sobre fondo oscuro */
.no-public:has(.page-dark) #capacidades-trafico .section-head p,
.no-public:has(.page-dark) #operativa-rutas .section-head p,
.no-public:has(.page-dark) #seguimiento-viaje .section-head p,
.no-public:has(.page-dark) #planning-semanal .section-head p,
.no-public:has(.page-dark) #frigorificos .section-head p { color:rgba(255,255,255,.80); }

/* --- Mesa del gestor: captura grande + 6 puntos numerados --- */
.no-public #operativa-rutas .gestor-split { display:grid; grid-template-columns:1.18fr .82fr; gap:48px; align-items:center; margin-top:20px; }
.no-public #operativa-rutas .gestor-shot img { width:100%; height:auto; border-radius:14px; border:1px solid rgba(255,255,255,.14); box-shadow:0 34px 70px -26px rgba(0,0,0,.65); display:block; }
.no-public #operativa-rutas .gestor-points { display:grid; gap:2px; }
.no-public #operativa-rutas .gp-item { display:grid; grid-template-columns:auto 1fr; gap:15px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.no-public #operativa-rutas .gp-item:last-child { border-bottom:none; }
.no-public #operativa-rutas .gp-num { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(25,182,196,.16); border:1px solid rgba(25,182,196,.5); color:#19b6c4; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12.5px; flex:0 0 auto; }
.no-public #operativa-rutas .gp-item b { display:block; color:#fff; font-size:15px; margin-bottom:2px; letter-spacing:-.01em; }
.no-public #operativa-rutas .gp-item span { color:#cfd6e2; font-size:13.5px; line-height:1.5; }
@media (max-width:900px){ .no-public #operativa-rutas .gestor-split { grid-template-columns:1fr; gap:30px; } }

/* Encabezado "cada operativa con sus reglas" */
.no-public #operativa-rutas .operativas-head { text-align:center; max-width:720px; margin:64px auto 28px; }
.no-public #operativa-rutas .operativas-head p { color:rgba(255,255,255,.78); font-size:16px; line-height:1.6; margin:0; }
/* Tarjetas de operativa (reutilizan .card en oscuro) */
.no-public .operativa-card .oc-tag { display:block; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#19b6c4; font-weight:700; margin-bottom:10px; }
.no-public .operativa-card h3 { color:#fff; font-size:17px; margin:0 0 8px; letter-spacing:-.01em; }
.no-public .operativa-card p { color:#cfd6e2; font-size:13.5px; line-height:1.55; margin:0; }

/* --- Teaser de Planificación / TMS (diferido a su página) --- */
.no-public #planificacion-teaser { padding-top:8px; }
.no-public .tms-teaser { display:grid; grid-template-columns:1fr auto; gap:34px; align-items:center; background:linear-gradient(140deg, rgba(25,182,196,.12), rgba(25,182,196,.03)); border:1px solid rgba(25,182,196,.35); border-radius:22px; padding:36px 40px; }
.no-public .tms-teaser .tt-body .eyebrow-line { margin-bottom:14px; }
.no-public .tms-teaser .tt-body h3 { color:#fff; font-size:clamp(22px,2.2vw,28px); margin:0 0 10px; letter-spacing:-.015em; }
.no-public .tms-teaser .tt-body p { color:#dbe5f2; font-size:17px; line-height:1.65; margin:0 0 16px; }
.no-public .tms-engines { display:flex; flex-wrap:wrap; gap:8px; }
.no-public .tms-engines span { font-size:14px; font-weight:600; color:#cfeef2; background:rgba(25,182,196,.10); border:1px solid rgba(25,182,196,.35); border-radius:24px; padding:7px 16px; }
.no-public .tms-teaser .tt-soon { flex:0 0 auto; text-align:center; padding-left:34px; border-left:1px solid rgba(255,255,255,.14); }
.no-public .tms-teaser .tt-soon b { display:block; color:#19b6c4; font-size:15px; font-family:'JetBrains Mono',monospace; letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px; }
.no-public .tms-teaser .tt-soon .tt-soon-sub { color:rgba(255,255,255,.7); font-size:14.5px; }
.no-public .tms-teaser .tt-soon .tms-soon-cta { display:inline-block; background:linear-gradient(135deg,#19b6c4,#0d8b97); color:#fff; font-weight:700; font-size:15.5px; text-decoration:none; border-radius:24px; padding:10px 20px; margin-bottom:8px; transition:filter .2s; white-space:nowrap; }
.no-public .tms-teaser .tt-soon .tms-soon-cta:hover { filter:brightness(1.08); }
@media (max-width:760px){ .no-public .tms-teaser { grid-template-columns:1fr; gap:22px; } .no-public .tms-teaser .tt-soon { padding-left:0; border-left:none; border-top:1px solid rgba(255,255,255,.14); padding-top:20px; } }

/* --- Seguimiento del viaje: split + timeline segmentado --- */
.no-public #seguimiento-viaje .segui-split { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; margin-top:8px; }
.no-public #seguimiento-viaje .segui-shot img { width:100%; height:auto; border-radius:14px; border:1px solid rgba(255,255,255,.14); box-shadow:0 34px 70px -26px rgba(0,0,0,.65); display:block; }
.no-public .segui-list { list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.no-public .segui-list li { color:#cfd6e2; font-size:15px; line-height:1.55; padding-left:26px; position:relative; }
.no-public .segui-list li b { color:#fff; }
.no-public .segui-list li::before { content:''; position:absolute; left:0; top:7px; width:9px; height:9px; border-radius:50%; background:#19b6c4; box-shadow:0 0 0 4px rgba(25,182,196,.15); }
@media (max-width:860px){ .no-public #seguimiento-viaje .segui-split { grid-template-columns:1fr; gap:28px; } }
/* Barra de tiempo del trayecto */
.no-public .trip-timeline { margin-top:48px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:26px 28px; }
.no-public .trip-timeline .tt-head { display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:12px; color:#9fb3cc; margin-bottom:14px; }
.no-public .trip-timeline .tt-head b { color:#fff; }
.no-public .trip-timeline .tt-track { display:flex; height:36px; border-radius:8px; overflow:hidden; }
.no-public .trip-timeline .tt-seg { display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#08131f; white-space:nowrap; overflow:hidden; padding:0 4px; border-right:1px solid rgba(8,19,31,.25); }
.no-public .trip-timeline .tt-seg:last-child { border-right:none; }
.no-public .trip-timeline .tt-seg.cyan { background:#19b6c4; color:#04252a; }
.no-public .trip-timeline .tt-seg.load { background:#37c26b; }
.no-public .trip-timeline .tt-seg.wait { background:#f6a83a; }
.no-public .trip-timeline .tt-seg.rest { background:repeating-linear-gradient(45deg,#4a5b73,#4a5b73 5px,#2b3850 5px,#2b3850 10px); color:#dbe5f2; }
.no-public .trip-timeline .tt-seg.empty { background:repeating-linear-gradient(45deg,#3a4a61,#3a4a61 5px,#20304a 5px,#20304a 10px); color:#dbe5f2; }
.no-public .trip-timeline .tt-legend { display:flex; flex-wrap:wrap; gap:20px; margin-top:16px; font-size:12px; color:#cfd6e2; }
.no-public .trip-timeline .tt-legend i { display:inline-block; width:13px; height:13px; border-radius:3px; margin-right:7px; vertical-align:-2px; }
.no-public #seguimiento-viaje .segui-notes { margin-top:24px; }
@media (max-width:560px){ .no-public .trip-timeline .tt-seg { font-size:0; } }

/* --- Planning semanal: rejilla de días --- */
.no-public .week-grid { margin-top:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:20px; overflow-x:auto; }
.no-public .week-row { display:grid; grid-template-columns:150px repeat(5,minmax(120px,1fr)); gap:8px; align-items:stretch; }
.no-public .week-row + .week-row { margin-top:8px; }
.no-public .week-head > div { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#9fb3cc; padding:4px 10px; }
.no-public .wk-veh { background:rgba(25,182,196,.10); border:1px solid rgba(25,182,196,.30); border-radius:8px; padding:12px; color:#fff; font-size:12.5px; font-weight:600; display:flex; align-items:center; }
.no-public .wk-cell { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:9px 11px; min-height:54px; font-size:11.5px; color:#cfd6e2; line-height:1.4; }
.no-public .wk-cell.filled { background:rgba(55,194,107,.12); border-color:rgba(55,194,107,.38); color:#dbe5f2; }
.no-public .wk-cell.free { background:rgba(246,168,58,.10); border-color:rgba(246,168,58,.38); color:#f6d9a8; font-style:italic; display:flex; align-items:center; }
.no-public .wk-cell b { display:block; color:#fff; font-size:11.5px; font-weight:700; margin-bottom:1px; }
@media (max-width:820px){ .no-public .week-row { grid-template-columns:110px repeat(5,minmax(100px,1fr)); } }

/* --- Frigoríficos: gráfica de temperatura mock --- */
.no-public #frigorificos .temp-split { display:grid; grid-template-columns:1.02fr .98fr; gap:44px; align-items:center; margin-top:8px; }
.no-public .temp-chart { background:linear-gradient(165deg,#0e1a35,#081225); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:22px 24px; box-shadow:0 30px 60px -24px rgba(0,0,0,.6); }
.no-public .temp-chart .tc-head { font-family:'JetBrains Mono',monospace; font-size:12px; color:#9fb3cc; margin-bottom:6px; }
.no-public .temp-chart .tc-head b { color:#fff; }
.no-public .temp-chart .tc-svg { width:100%; height:auto; display:block; }
.no-public .temp-chart .tc-incident { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:12px; color:#f6d9a8; background:rgba(246,168,58,.10); border:1px solid rgba(246,168,58,.32); border-radius:10px; padding:8px 12px; }
.no-public .temp-chart .tc-incident .tc-dot { width:9px; height:9px; border-radius:50%; background:#f6a83a; flex:0 0 auto; }
@media (max-width:860px){ .no-public #frigorificos .temp-split { grid-template-columns:1fr; gap:28px; } }

/* ===================================================================== */
/* /netoffice/tms — página dedicada al TMS (Ana 2026-08-13). Cian #19b6c4  */
/* ===================================================================== */

/* --- 3 motores encadenados --- */
.no-public .tms-motors { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:10px; margin-top:20px; }
.no-public .motor-node { position:relative; background:radial-gradient(130% 90% at 100% 0%, rgba(25,182,196,.16), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:30px 26px 26px; }
.no-public .motor-node .motor-num { position:absolute; top:18px; right:20px; font-family:'JetBrains Mono',monospace; font-size:38px; font-weight:700; color:rgba(25,182,196,.28); line-height:1; }
.no-public .motor-node .motor-ic { width:54px; height:54px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; background:rgba(25,182,196,.16); border:1px solid rgba(25,182,196,.42); color:#19b6c4; margin-bottom:16px; }
.no-public .motor-node .motor-ic svg { width:27px; height:27px; }
.no-public .motor-node .motor-tag { display:block; font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.10em; text-transform:uppercase; color:#19b6c4; font-weight:700; margin-bottom:6px; }
.no-public .motor-node h3 { color:#fff; font-size:19px; margin:0 0 10px; letter-spacing:-.01em; }
.no-public .motor-node p { color:#cfd6e2; font-size:16px; line-height:1.55; margin:0; }
.no-public .motor-arrow { display:flex; align-items:center; justify-content:center; color:#19b6c4; font-size:34px; font-weight:700; }
@media (max-width:900px){ .no-public .tms-motors { grid-template-columns:1fr; } .no-public .motor-arrow { transform:rotate(90deg); padding:2px 0; } }

/* --- Descarta: tarjetas con ✕ rojo (reutilizan .card en oscuro) --- */
.no-public .card.descarta-card { border-color:rgba(248,113,113,.30); }
.no-public .card.descarta-card .dc-x { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(248,113,113,.14); border:1px solid rgba(248,113,113,.42); color:#f87171; font-size:18px; font-weight:700; margin-bottom:14px; }
.no-public .card.descarta-card h3 { color:#fff; font-size:16.5px; margin:0 0 7px; }
.no-public .card.descarta-card p { color:#cfd6e2; font-size:16px; line-height:1.55; margin:0; }

/* --- Puntúa: lista con barra de peso --- */
.no-public .puntua-list { list-style:none; padding:0; margin:24px auto 0; max-width:860px; display:grid; gap:14px; }
.no-public .puntua-list li { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-left:4px solid #19b6c4; border-radius:12px; padding:16px 20px; display:grid; grid-template-columns:1fr 200px; align-items:center; gap:20px; }
.no-public .puntua-list .pl-top b { color:#fff; font-size:16px; margin-right:8px; }
.no-public .puntua-list .pl-top span { color:#9fb3cc; font-size:15.5px; }
.no-public .puntua-list .pl-bar { display:block; height:8px; border-radius:4px; background:rgba(255,255,255,.08); position:relative; overflow:hidden; }
.no-public .puntua-list .pl-bar::before { content:''; position:absolute; left:0; top:0; bottom:0; width:var(--w,70%); background:linear-gradient(90deg,#0d8b97,#19b6c4); border-radius:4px; }
@media (max-width:640px){ .no-public .puntua-list li { grid-template-columns:1fr; gap:10px; } .no-public .puntua-list .pl-bar { width:100%; } }

/* --- Propuestas de carga --- */
.no-public .propuesta-head { text-align:center; color:rgba(255,255,255,.78); font-size:16.5px; margin:8px 0 22px; font-family:'JetBrains Mono',monospace; letter-spacing:.02em; }
.no-public .propuesta-head b { color:#19b6c4; font-weight:700; }
.no-public .propuesta-list { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.no-public .propuesta { position:relative; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:24px 22px; }
.no-public .propuesta.best { border-color:rgba(25,182,196,.5); background:linear-gradient(160deg, rgba(25,182,196,.12), rgba(25,182,196,.02)); box-shadow:0 24px 50px -30px rgba(25,182,196,.5); }
.no-public .propuesta .pr-rank { font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:#9fb3cc; margin-bottom:10px; }
.no-public .propuesta.best .pr-rank { color:#19b6c4; font-weight:700; }
.no-public .propuesta .pr-route { font-size:18px; color:#fff; font-weight:700; letter-spacing:-.01em; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.no-public .propuesta .pr-route span { color:#19b6c4; }
.no-public .propuesta .pr-saving { display:flex; gap:8px; margin:14px 0; flex-wrap:wrap; }
.no-public .propuesta .pr-km { font-size:14.5px; font-weight:700; color:#8fe4c4; background:rgba(55,194,107,.12); border:1px solid rgba(55,194,107,.35); border-radius:20px; padding:5px 12px; }
.no-public .propuesta .pr-eur { font-size:14.5px; font-weight:700; color:#cfeef2; background:rgba(25,182,196,.12); border:1px solid rgba(25,182,196,.35); border-radius:20px; padding:5px 12px; }
.no-public .propuesta .pr-why { color:#cfd6e2; font-size:15.5px; line-height:1.55; margin:0; }
@media (max-width:820px){ .no-public .propuesta-list { grid-template-columns:1fr; } }

/* ===================================================================== */
/* /netoffice/tms — stats rediseñadas + operativas por tipo (Ana 2026-08-13)*/
/* Cada .op-section fija --op = color de la operativa.                     */
/* ===================================================================== */

/* Stats rediseñadas (sustituyen a la banda azul stats-band-sky) */
.no-public #tms-cifras { padding-top:8px; }
.no-public .tms-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1040px; margin:0 auto; }
.no-public .tms-stat { position:relative; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:30px 28px 26px; }
.no-public .tms-stat::before { content:''; position:absolute; top:0; right:0; width:150px; height:150px; background:radial-gradient(circle at 100% 0%, rgba(25,182,196,.20), transparent 62%); pointer-events:none; }
.no-public .tms-stat .ts-ic { position:relative; width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(25,182,196,.14); border:1px solid rgba(25,182,196,.42); color:#19b6c4; margin-bottom:18px; }
.no-public .tms-stat .ts-ic svg { width:23px; height:23px; }
.no-public .tms-stat .ts-num { position:relative; font-family:'JetBrains Mono',monospace; font-size:50px; font-weight:700; color:#19b6c4; line-height:1; letter-spacing:-.03em; }
.no-public .tms-stat .ts-num small { font-size:.5em; margin-left:1px; }
.no-public .tms-stat .ts-lbl { position:relative; color:#fff; font-size:17px; font-weight:600; margin-top:14px; line-height:1.35; }
.no-public .tms-stat .ts-ctx { position:relative; color:#9fb3cc; font-size:15px; line-height:1.45; margin-top:8px; }
@media (max-width:760px){ .no-public .tms-stats { grid-template-columns:1fr; } }

/* Chips de las 6 operativas */
.no-public .op-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:10px; }
.no-public .op-chips span { font-size:15.5px; font-weight:600; color:#dbe5f2; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); border-radius:26px; padding:9px 20px; }

/* --- Sección de operativa (accent = --op) --- */
.no-public .op-section .op-head { display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:end; margin-bottom:38px; }
.no-public .op-section .op-head .section-title { text-align:left; margin:10px 0 0; }
.no-public .op-section .op-lead { color:rgba(255,255,255,.82); font-size:16.5px; line-height:1.65; margin:0; }
.no-public .op-section .op-lead strong { color:#fff; }
.no-public .op-sub-eyebrow { font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--op,#19b6c4); font-weight:700; margin:0 0 16px; display:flex; align-items:center; gap:10px; }
.no-public .op-sub-eyebrow::before { content:''; width:24px; height:2px; background:var(--op,#19b6c4); display:inline-block; flex:0 0 auto; }
.no-public .eyebrow-line.eyebrow-line-op { color:var(--op,#19b6c4); border-color:var(--op,#19b6c4); background:transparent; }
@media (max-width:860px){ .no-public .op-section .op-head { grid-template-columns:1fr; gap:16px; align-items:start; } }

/* Tarjetas de operativa con borde-izq de color */
.no-public .op-cards { display:grid; gap:14px; }
.no-public .op-cards-4 { grid-template-columns:repeat(4,1fr); }
.no-public .op-cards-3 { grid-template-columns:repeat(3,1fr); }
.no-public .op-cards-2 { grid-template-columns:repeat(2,1fr); }
.no-public .op-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-left:4px solid var(--op,#19b6c4); border-radius:12px; padding:22px; }
.no-public .op-card h3 { color:#fff; font-size:17px; margin:0 0 8px; letter-spacing:-.01em; }
.no-public .op-card p { color:#cfd6e2; font-size:16px; line-height:1.55; margin:0; }
.no-public .op-cards-tight .op-card { padding:16px 18px; }
.no-public .op-cards-tight .op-card h3 { font-size:17px; margin-bottom:5px; }
.no-public .op-cards-tight .op-card p { font-size:15px; }
@media (max-width:900px){ .no-public .op-cards-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){ .no-public .op-cards-3, .no-public .op-cards-2 { grid-template-columns:1fr; } }
@media (max-width:520px){ .no-public .op-cards-4 { grid-template-columns:1fr; } }

/* Flujo de nodos (contenedores import/export · especiales 4 pasos · torre entradas/salidas) */
.no-public .op-flow { display:flex; align-items:stretch; gap:8px; }
.no-public .op-node { flex:1; position:relative; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:12px; padding:18px 16px; }
.no-public .op-node b { display:block; color:#fff; font-size:17px; margin-bottom:5px; letter-spacing:-.01em; }
.no-public .op-node span { color:#cfd6e2; font-size:14.5px; line-height:1.45; }
.no-public .op-node .on-num { position:absolute; top:14px; right:14px; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:700; color:var(--op,#19b6c4); background:rgba(255,255,255,.06); border:1px solid var(--op,#19b6c4); }
.no-public .op-arrow { display:flex; align-items:center; justify-content:center; color:var(--op,#19b6c4); font-size:26px; font-weight:700; flex:0 0 auto; }
@media (max-width:820px){ .no-public .op-flow { flex-direction:column; } .no-public .op-arrow { transform:rotate(90deg); } }

/* Dos columnas dentro de una op-section */
.no-public .op-two { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:36px; align-items:start; }
.no-public .op-two-flows { gap:32px; margin-top:6px; }
@media (max-width:860px){ .no-public .op-two { grid-template-columns:1fr; gap:28px; } }

/* Lista con viñeta de color */
.no-public .op-list { list-style:none; padding:0; margin:0; display:grid; gap:13px; }
.no-public .op-list li { color:#cfd6e2; font-size:16.5px; line-height:1.55; padding-left:24px; position:relative; }
.no-public .op-list li b { color:#fff; }
.no-public .op-list li::before { content:''; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:50%; background:var(--op,#19b6c4); }

.no-public .op-note { color:#9fb3cc; font-size:15.5px; line-height:1.5; margin:14px 0 0; }

/* Callout dentro de operativa */
.no-public .op-callout { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:24px 26px; }
.no-public .op-callout-strong { background:linear-gradient(150deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
.no-public .op-callout-strong p { color:#dbe5f2; font-size:16.5px; line-height:1.6; margin:0 0 12px; }
.no-public .op-callout-strong p:last-child { margin-bottom:0; }
.no-public .op-callout-strong strong { color:#fff; }

/* ===================================================================== */
/* /netoffice/tms — animaciones, mockups y color extra (Ana 2026-08-13)   */
/* ===================================================================== */

/* Hero split con mockup animado */
.no-public .tms-hero.hero-page { display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:center; }
.no-public .tms-hero .tms-hero-text { min-width:0; text-align:left; }
.no-public .tms-hero .tms-hero-media { min-width:0; }
@media (max-width:960px){ .no-public .tms-hero.hero-page { grid-template-columns:1fr; gap:34px; } }

/* Mockup tipo navegador con captura + escaneo IA (reutiliza keyframes tms-scan) */
.no-public .shot-mock { border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background:#0b1220; box-shadow:0 44px 90px -34px rgba(0,0,0,.75); }
.no-public .shot-mock.shot-float { animation:np-float 6.5s ease-in-out infinite; }
.no-public .shot-mock.shot-wide { max-width:1000px; margin:0 auto 30px; }
.no-public .shot-bar { display:flex; align-items:center; gap:7px; padding:11px 15px; background:#0a1120; border-bottom:1px solid rgba(255,255,255,.08); }
.no-public .shot-bar > span { width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.18); flex:0 0 auto; }
.no-public .shot-bar > span:nth-child(1){ background:#ff5f57; } .no-public .shot-bar > span:nth-child(2){ background:#febc2e; } .no-public .shot-bar > span:nth-child(3){ background:#28c840; }
.no-public .shot-bar em { margin-left:10px; font-style:normal; font-family:'JetBrains Mono',monospace; font-size:11px; color:rgba(255,255,255,.5); letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.no-public .shot-scan { position:relative; overflow:hidden; isolation:isolate; }
.no-public .shot-scan img { display:block; width:100%; height:auto; }
.no-public .shot-scan::before { content:''; position:absolute; left:0; right:0; top:0; height:120px; pointer-events:none; z-index:3; background:linear-gradient(180deg, transparent 0%, rgba(25,182,196,.05) 30%, rgba(25,182,196,.18) 70%, rgba(25,182,196,.5) 96%, rgba(25,182,196,.9) 100%); mix-blend-mode:screen; animation:tms-scan 4s cubic-bezier(.55,0,.45,1) infinite; }
.no-public .shot-scan::after { content:''; position:absolute; left:0; right:0; top:0; height:2px; pointer-events:none; z-index:4; background:rgba(25,182,196,1); box-shadow:0 0 18px 4px rgba(25,182,196,.7); animation:tms-scan-line 4s cubic-bezier(.55,0,.45,1) infinite; }
.no-public .shot-scan.shot-scan-amber::before { background:linear-gradient(180deg, transparent 0%, rgba(246,168,58,.05) 30%, rgba(246,168,58,.18) 70%, rgba(246,168,58,.5) 96%, rgba(246,168,58,.9) 100%); }
.no-public .shot-scan.shot-scan-amber::after { background:rgba(246,168,58,1); box-shadow:0 0 18px 4px rgba(246,168,58,.7); }
.no-public .shot-pill { position:absolute; top:14px; right:14px; z-index:5; display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:30px; background:rgba(13,52,84,.8); backdrop-filter:blur(4px); border:1px solid rgba(25,182,196,.55); color:#fff; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.09em; text-transform:uppercase; font-weight:600; }
.no-public .shot-pill::before { content:''; width:8px; height:8px; border-radius:50%; background:#19b6c4; box-shadow:0 0 8px #19b6c4; animation:tms-ai-pulse 1.2s ease-in-out infinite; }
.no-public .shot-pill.shot-pill-amber { border-color:rgba(246,168,58,.55); }
.no-public .shot-pill.shot-pill-amber::before { background:#f6a83a; box-shadow:0 0 8px #f6a83a; }
@media (max-width:560px){ .no-public .shot-pill { font-size:9.5px; padding:6px 10px; } .no-public .shot-bar em { display:none; } }

/* Motores color-coded (cian/ámbar/verde) + icono con pulso + flechas animadas */
.no-public .motor-node.motor-amber .motor-num { color:rgba(246,168,58,.30); }
.no-public .motor-node.motor-amber .motor-ic { background:rgba(246,168,58,.16); border-color:rgba(246,168,58,.42); color:#f6a83a; animation:motorPulseA 2.6s ease-in-out infinite; }
.no-public .motor-node.motor-amber .motor-tag { color:#f6a83a; }
.no-public .motor-node.motor-green .motor-num { color:rgba(43,182,115,.32); }
.no-public .motor-node.motor-green .motor-ic { background:rgba(43,182,115,.16); border-color:rgba(43,182,115,.42); color:#2bb673; animation:motorPulseG 2.6s ease-in-out infinite; }
.no-public .motor-node.motor-green .motor-tag { color:#2bb673; }
.no-public .motor-node.motor-cyan .motor-ic { animation:motorPulseC 2.6s ease-in-out infinite; }
@keyframes motorPulseC { 0%,100%{ box-shadow:0 0 0 0 rgba(25,182,196,.35);} 60%{ box-shadow:0 0 0 11px rgba(25,182,196,0);} }
@keyframes motorPulseA { 0%,100%{ box-shadow:0 0 0 0 rgba(246,168,58,.35);} 60%{ box-shadow:0 0 0 11px rgba(246,168,58,0);} }
@keyframes motorPulseG { 0%,100%{ box-shadow:0 0 0 0 rgba(43,182,115,.35);} 60%{ box-shadow:0 0 0 11px rgba(43,182,115,0);} }
.no-public .tms-motors .motor-arrow { animation:motorArrow 1.9s ease-in-out infinite; }
.no-public .tms-motors .motor-arrow:nth-of-type(4){ animation-delay:.35s; }
@keyframes motorArrow { 0%,100%{ opacity:.4; transform:translateX(0);} 50%{ opacity:1; transform:translateX(5px);} }

/* Puntúa en verde (positivo, frente al rojo de "descarta") */
.no-public .puntua-list.puntua-green li { border-left-color:#2bb673; }
.no-public .puntua-list.puntua-green .pl-bar::before { background:linear-gradient(90deg,#1f9d5f,#37c26b); }


/* ===================================================================== */
/* /netoffice/almacen — oscuro + automatización animada (Ana 2026-08-13)  */
/* ===================================================================== */

/* pipe-step: en oscuro restaurar look cian translúcido (el blanco !important es para la página clara) */
.no-public:has(.page-dark) .pipe-step { background:linear-gradient(180deg, rgba(25,182,196,.08), rgba(25,182,196,.02)) !important; border:1px solid rgba(25,182,196,.30) !important; box-shadow:none !important; }
.no-public:has(.page-dark) .pipe-step h4 { color:#fff !important; }
.no-public:has(.page-dark) .pipe-step p { color:#cfd6e2 !important; }
.no-public:has(.page-dark) .pipe-arrow { color:#19b6c4; animation:motorArrow 1.9s ease-in-out infinite; }

/* Lista de regímenes a 2 columnas */
.no-public .op-list.op-list-2 { grid-template-columns:1fr 1fr; gap:14px 34px; max-width:1000px; margin:24px auto 0; }
@media (max-width:760px){ .no-public .op-list.op-list-2 { grid-template-columns:1fr; } }

/* Almacén automatizado: split texto + demo animada */
.no-public .almacen-auto-split { display:grid; grid-template-columns:1.02fr .98fr; gap:48px; align-items:center; }
.no-public .almacen-auto-split .wms-text .eyebrow-line { margin-bottom:14px; }
.no-public .almacen-auto-split .wms-text p { color:#cfd6e2; font-size:16px; line-height:1.65; margin:0 0 14px; }
.no-public .almacen-auto-split .wms-text p strong { color:#fff; }
@media (max-width:900px){ .no-public .almacen-auto-split { grid-template-columns:1fr; gap:30px; } .no-public .wms-demo { order:2; } }

/* Escena WMS: estanterías + barrido de inventario + AGV con palet */
.no-public .wms-demo { position:relative; overflow:hidden; isolation:isolate; background:linear-gradient(165deg,#0e1a35,#081225); border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:26px 26px 22px; box-shadow:0 30px 60px -24px rgba(0,0,0,.6); }
.no-public .wms-tag { position:absolute; top:16px; right:16px; z-index:6; display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:30px; background:rgba(13,52,84,.82); border:1px solid rgba(25,182,196,.55); color:#fff; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.no-public .wms-tag::before { content:''; width:8px; height:8px; border-radius:50%; background:#19b6c4; box-shadow:0 0 8px #19b6c4; animation:tms-ai-pulse 1.2s ease-in-out infinite; }
.no-public .wms-shelf { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.no-public .wms-slot { aspect-ratio:1.5/1; border:1px solid rgba(255,255,255,.12); border-radius:7px; background:rgba(255,255,255,.02); position:relative; overflow:hidden; }
.no-public .wms-slot.full { border-color:rgba(246,168,58,.30); }
.no-public .wms-slot .pal { position:absolute; left:16%; right:16%; bottom:14%; height:44%; border-radius:3px; background:linear-gradient(180deg,#f6a83a,#cf8526); box-shadow:0 2px 0 rgba(0,0,0,.25); }
.no-public .wms-slot .pal::after { content:''; position:absolute; left:8%; right:8%; top:42%; height:2px; background:rgba(0,0,0,.28); }
.no-public .wms-sweep { position:absolute; left:26px; right:26px; top:26px; height:62%; z-index:5; pointer-events:none; }
.no-public .wms-sweep::before { content:''; position:absolute; left:0; right:0; top:0; height:46px; background:linear-gradient(180deg, transparent, rgba(25,182,196,.16) 70%, rgba(25,182,196,.5) 100%); animation:wmsSweep 3.6s cubic-bezier(.55,0,.45,1) infinite; }
.no-public .wms-sweep::after { content:''; position:absolute; left:0; right:0; top:0; height:2px; background:rgba(25,182,196,.95); box-shadow:0 0 14px 3px rgba(25,182,196,.6); animation:wmsSweep 3.6s cubic-bezier(.55,0,.45,1) infinite; }
@keyframes wmsSweep { 0%{ transform:translateY(-46px); opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ transform:translateY(180px); opacity:0; } }
.no-public .wms-floor { position:relative; height:36px; margin-top:16px; border-top:1px dashed rgba(255,255,255,.16); }
.no-public .wms-agv { position:absolute; bottom:3px; left:2%; width:46px; height:20px; border-radius:5px; background:linear-gradient(180deg,#3a4a61,#26324a); border:1px solid rgba(255,255,255,.18); animation:wmsAgv 5.5s ease-in-out infinite; }
.no-public .wms-agv::before, .no-public .wms-agv::after { content:''; position:absolute; bottom:-4px; width:8px; height:8px; border-radius:50%; background:#0b1220; border:1.5px solid rgba(255,255,255,.35); }
.no-public .wms-agv::before { left:5px; } .no-public .wms-agv::after { right:5px; }
.no-public .wms-agv .agv-pal { position:absolute; top:-11px; left:8px; right:8px; height:10px; border-radius:2px; background:linear-gradient(180deg,#f6a83a,#cf8526); box-shadow:0 0 10px rgba(246,168,58,.4); }
@keyframes wmsAgv { 0%{ left:2%; } 44%{ left:calc(100% - 50px); } 52%{ left:calc(100% - 50px); } 96%,100%{ left:2%; } }


/* /contacto — subnav (breadcrumb) oscuro como en las páginas .page-dark (Ana 2026-08-13).
   La página usa .contacto-dark (no .page-dark), por eso el subnav quedaba en claro (#f4f7fb). */
.no-public:has(.contacto-dark) .subnav { background:#0D3454; border-bottom:1px solid rgba(255,255,255,.10); }
.no-public:has(.contacto-dark) .subnav .wrap { color:rgba(255,255,255,.5); }
.no-public:has(.contacto-dark) .subnav a { color:#19b6c4; }
.no-public:has(.contacto-dark) .subnav span { color:rgba(255,255,255,.85); }
.no-public:has(.contacto-dark) .subnav a:hover { color:#19b6c4; }

/* ===================================================================== */
/* /blog, /para-quien, /netoffice/laso-sl a oscuro (Ana 2026-08-13)       */
/* ===================================================================== */

/* --- Blog: tarjetas y filtros legibles en oscuro --- */
.no-public:has(.page-dark) .post-card p, .no-public:has(.page-dark) .post-card .pc-date { color:#9fb3cc; }
.no-public:has(.page-dark) .fchip { border-color:rgba(255,255,255,.18); color:#cfd6e2; }
.no-public:has(.page-dark) .fchip.on, .no-public:has(.page-dark) .fchip:hover { color:#fff; border-color:#19b6c4; background:rgba(25,182,196,.12); }

/* --- laso-sl: legibilidad en oscuro --- */
.no-public:has(.page-dark) .laso-stats .stat .v { color:#fff; }
.no-public:has(.page-dark) .laso-mission-text { color:#cfd6e2; }
.no-public:has(.page-dark) .hero-driver-text h1 { color:#fff; }
.no-public:has(.page-dark) .hero-driver-text .sub { color:#dbe5f2; }

/* laso-sl "Otros servicios" REDISEÑO: 4 tarjetas con color por servicio (--sc) */
.no-public .laso-serv2 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px; }
.no-public .laso-serv2-card { position:relative; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.10); border-top:3px solid var(--sc,#19b6c4); border-radius:14px; padding:26px 22px 24px; transition:transform .2s, border-color .2s, box-shadow .2s; }
.no-public .laso-serv2-card:hover { transform:translateY(-4px); border-color:var(--sc,#19b6c4); box-shadow:0 22px 44px -26px var(--sc,#19b6c4); }
.no-public .laso-serv2-card .s2-ic { width:52px; height:52px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); border:1px solid var(--sc,#19b6c4); color:var(--sc,#19b6c4); margin-bottom:16px; }
.no-public .laso-serv2-card .s2-ic svg { width:26px; height:26px; }
.no-public .laso-serv2-card .s2-tag { display:block; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--sc,#19b6c4); font-weight:700; margin-bottom:8px; }
.no-public .laso-serv2-card h3 { color:#fff; font-size:18px; font-weight:700; margin:0 0 9px; letter-spacing:-.01em; }
.no-public .laso-serv2-card p { color:#cfd6e2; font-size:14px; line-height:1.6; margin:0; }
@media (max-width:980px){ .no-public .laso-serv2 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .no-public .laso-serv2 { grid-template-columns:1fr; } }

/* --- para-quien: filas editoriales legibles en oscuro --- */
.no-public:has(.page-dark) .pq-body h2 { color:#f6a83a; }
.no-public:has(.page-dark) .pq-body p { color:#cfd6e2; }
.no-public:has(.page-dark) .pq-num { color:#19b6c4; opacity:.35; }
.no-public:has(.page-dark) .pq-row { border-bottom-color:rgba(255,255,255,.12); }

/* ===================================================================== */
/* /netoffice/laso-sl — banner "Dónde estamos / Cómo llegar" (Ana 2026-08-13) */
/* ===================================================================== */
.no-public .laso-map { display:grid; grid-template-columns:1.15fr .85fr; gap:0; background:linear-gradient(150deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); border-radius:20px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.6); }
.no-public .laso-map .lm-map { position:relative; min-height:340px; }
.no-public .laso-map .lm-map iframe { position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.2) contrast(1.05); }
.no-public .laso-map .lm-info { padding:40px 42px; display:flex; flex-direction:column; justify-content:center; gap:6px; }
.no-public .laso-map .lm-info .eyebrow-line { margin-bottom:12px; }
.no-public .laso-map .lm-info h3 { color:#fff; font-size:24px; font-weight:700; letter-spacing:-.01em; margin:0 0 14px; }
.no-public .laso-map .lm-row { display:flex; align-items:flex-start; gap:12px; color:#cfd6e2; font-size:15px; line-height:1.5; margin-bottom:10px; }
.no-public .laso-map .lm-row .lm-ic { flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(25,182,196,.14); border:1px solid rgba(25,182,196,.40); color:#19b6c4; }
.no-public .laso-map .lm-row .lm-ic svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .laso-map .lm-row b { color:#fff; font-weight:600; display:block; }
.no-public .laso-map .lm-row a { color:#cfd6e2; text-decoration:none; }
.no-public .laso-map .lm-row a:hover { color:#19b6c4; }
.no-public .laso-map .lm-cta { display:inline-flex; align-items:center; gap:9px; align-self:flex-start; margin-top:16px; padding:13px 24px; border-radius:30px; background:linear-gradient(135deg,#19b6c4,#0d8b97); color:#fff; font-weight:700; font-size:15px; text-decoration:none; transition:filter .2s, transform .15s; }
.no-public .laso-map .lm-cta:hover { filter:brightness(1.08); transform:translateY(-1px); }
.no-public .laso-map .lm-cta svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:820px){ .no-public .laso-map { grid-template-columns:1fr; } .no-public .laso-map .lm-map { min-height:240px; order:2; } }

/* ===================================================================== */
/* /erp-transporte — oscuro + "nueva generación" (Ana 2026-08-13)         */
/* ===================================================================== */
/* erp-stats: en oscuro, tarjeta translúcida (el tema claro pone .stat #fff) y números en gradiente CLARO (el original era azul→navy, invisible en oscuro) */
.no-public:has(.page-dark) .erp-stats .stat { background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.10); border-radius:16px; box-shadow:none; }
.no-public:has(.page-dark) .erp-stats .stat .v { background:linear-gradient(135deg,#4fd1e0,#19b6c4); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.no-public:has(.page-dark) .erp-stats .stat .l { color:#9fb3cc; }

/* "La nueva generación" — split texto+bullets / mockup web */
.no-public #erp-nueva-gen .erp-gen-split { display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:center; }
.no-public #erp-nueva-gen .erp-gen-text .eyebrow-line { margin-bottom:14px; }
.no-public #erp-nueva-gen .erp-gen-lead { color:#dbe5f2; font-size:16.5px; line-height:1.7; margin:0 0 22px; }
.no-public #erp-nueva-gen .erp-gen-lead strong { color:#fff; }
.no-public #erp-nueva-gen .erp-gen-media .route-caption { margin-top:16px; }
@media (max-width:920px){ .no-public #erp-nueva-gen .erp-gen-split { grid-template-columns:1fr; gap:32px; } }

/* ===================================================================== */
/* /power-bi — oscuro, sin contenedores, KPIs + rediseño (Ana 2026-08-13) */
/* ===================================================================== */
/* Restaurar el naranja del eyebrow en oscuro (el tema claro lo fuerza a azul !important) */
.no-public:has(.page-dark) .eyebrow-line.orange { color:#f6a83a !important; background:rgba(246,168,58,.12) !important; border:1px solid rgba(246,168,58,.45) !important; }

/* KPI tiles (cuadro de mando) */
.no-public .pbi-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.no-public .pbi-kpis .kpi { background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.10); border-top:3px solid var(--k,#19b6c4); border-radius:14px; padding:22px 22px 20px; display:flex; flex-direction:column; }
.no-public .pbi-kpis .k-lbl { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--k,#19b6c4); font-weight:700; }
.no-public .pbi-kpis .k-val { font-family:'JetBrains Mono',monospace; font-size:33px; font-weight:700; color:#fff; letter-spacing:-.02em; line-height:1.05; margin-top:8px; }
.no-public .pbi-kpis .k-val small { font-size:.5em; color:#9fb3cc; font-weight:600; }
.no-public .pbi-kpis .k-obj { font-size:12px; color:#9fb3cc; margin-top:8px; }
.no-public .pbi-kpis .k-obj b { font-weight:700; }
@media (max-width:820px){ .no-public .pbi-kpis { grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .no-public .pbi-kpis { grid-template-columns:1fr; } }

/* Beneficios — rejilla de 5 con check (sin contenedor) */
.no-public .pbi-bene { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.no-public .pbi-bene-item { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:22px 18px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; color:#dbe5f2; font-size:14.5px; line-height:1.45; font-weight:600; }
.no-public .pbi-bene-item .pb-check { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(246,168,58,.14); border:1px solid rgba(246,168,58,.42); color:#f6a83a; flex:0 0 auto; }
.no-public .pbi-bene-item .pb-check svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:1000px){ .no-public .pbi-bene { grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .no-public .pbi-bene { grid-template-columns:1fr; } .no-public .pbi-bene-item { flex-direction:row; align-items:center; } }


/* ══════════════════════════════════════════════════════════════════
   Páginas legales en OSCURO (aviso-legal / privacidad / cookies)
   (Ana 2026-08-31) — el contenido de BD va envuelto en .page-dark;
   los textos de .rich-content ya tienen override oscuro (línea ~1447).
   Aquí solo lo que quedaba ilegible sobre #0D3454.
   ══════════════════════════════════════════════════════════════════ */
/* El eyebrow del hero estaba forzado a azul #2170B3 !important por el
   grupo de uniformidad de tema claro → contraste 2.5:1 sobre el fondo
   oscuro. En páginas .page-dark vuelve al cian (contraste 5.2:1). */
.no-public:has(.page-dark) .hero-page .eyebrow { color:#19b6c4 !important; }
/* Estado "✓ Cookies aceptadas / ✕ Cookies rechazadas" de la política de
   cookies: el verde-teal oscuro #0d8b97 no se leía sobre el fondo. */
.no-public:has(.page-dark) .cookie-status { color:#4fd1e0; }
/* Botón "Rechazar cookies": blanco sobre oscuro, se refuerza el borde. */
.no-public:has(.page-dark) .cookie-btn.cookie-reject { border-color:rgba(255,255,255,.55); }

/* ══════════════════════════════════════════════════════════════════
   Banner de consentimiento de cookies — propio, sin terceros
   (Ana 2026-08-31). El markup lo inyecta reveal.js (cookieConsent());
   la preferencia se guarda en localStorage['cookies-pref'] =
   'accept' | 'reject', la MISMA clave que usan los botones inline de
   /legal/politica-de-cookies, así que ambos sitios están sincronizados.
   ══════════════════════════════════════════════════════════════════ */
.no-public .cc-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:1100;
  display:flex; justify-content:center; padding:18px;
  pointer-events:none;
  transform:translateY(130%); transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.no-public .cc-bar.is-visible { transform:none; }
.no-public .cc-card {
  pointer-events:auto; width:100%; max-width:1180px;
  display:flex; align-items:center; gap:28px; padding:20px 26px;
  background:#0b2c4a; border:1px solid rgba(25,182,196,.38); border-top:3px solid #19b6c4;
  border-radius:16px; box-shadow:0 26px 60px -18px rgba(0,0,0,.60);
}
.no-public .cc-text { flex:1 1 auto; min-width:0; }
.no-public .cc-text h4 { margin:0 0 6px; color:#ffffff; font-size:16.5px; font-weight:700; letter-spacing:-.005em; }
.no-public .cc-text p { margin:0; color:#cfd6e2; font-size:14px; line-height:1.55; }
.no-public .cc-text a { color:#4fd1e0; text-decoration:underline; text-underline-offset:3px; }
.no-public .cc-text a:hover { color:#19b6c4; }
.no-public .cc-actions { flex:0 0 auto; display:flex; flex-wrap:wrap; gap:12px; }
.no-public .cc-btn {
  cursor:pointer; border-radius:10px; padding:12px 22px;
  font-family:inherit; font-size:14px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
  transition:background .18s, border-color .18s, color .18s, transform .15s, filter .18s;
}
.no-public .cc-btn:hover { transform:translateY(-1px); }
.no-public .cc-btn:focus-visible { outline:3px solid #4fd1e0; outline-offset:3px; }
.no-public .cc-btn-accept { background:linear-gradient(135deg,#19b6c4,#0d8b97); color:#ffffff; border:1.5px solid transparent; }
.no-public .cc-btn-accept:hover { filter:brightness(1.08); }
.no-public .cc-btn-reject { background:transparent; color:#ffffff; border:1.5px solid rgba(255,255,255,.55); }
.no-public .cc-btn-reject:hover { background:rgba(255,255,255,.10); border-color:#ffffff; }
@media (max-width:900px) {
  .no-public .cc-card { flex-direction:column; align-items:stretch; gap:18px; padding:20px; }
  .no-public .cc-actions { justify-content:stretch; }
  .no-public .cc-btn { flex:1 1 auto; text-align:center; }
}
/* Mientras el banner está abierto, el FAB de "volver arriba" no debe taparlo.
   reveal.js publica la altura real de la barra en --cc-h (varía mucho entre
   escritorio y móvil, donde los botones se apilan). */
.no-public.cc-open .scroll-top-fab { bottom:calc(var(--cc-h, 112px) + 20px); }
/* El modal de novedades convive con la barra de cookies (Ana 2026-10-09):
   se centra en el hueco que deja la barra y, si no cabe, hace scroll por dentro. */
.no-public.cc-open .news-banner { padding-bottom:calc(var(--cc-h, 112px) + 12px); transition:opacity .35s ease-out, padding .45s cubic-bezier(.2,.8,.2,1); }
.no-public .news-banner .nb-card { max-height:100%; overflow-y:auto; overscroll-behavior:contain; }
/* (el enlace "Preferencias de cookies" del pie se retiró el 2026-08-31 a peticion
   de Ana: la revocación se hace con los botones de /legal/politica-de-cookies,
   que ya está enlazada en el pie como "Cookies". window.netofficeCookiePrefs()
   sigue disponible por si se quiere volver a abrir la barra desde algún sitio.) */

/* ══════════════════════════════════════════════════════════════════
   /netoffice/personal — rediseño de las dos rejillas que eran tarjetas
   BLANCAS sobre el fondo oscuro (Ana 2026-08-31). Clases nuevas para no
   heredar las reglas de tema claro de .card/.card-grid (que además
   fuerzan el borde azul con !important) ni las de .pdp-*.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1) "El equipo, dentro de la misma herramienta": 4 tarjetas de cristal
      con acento de color por tarjeta (el color va inline en --ac). ── */
.no-public .eq-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; max-width:1160px; margin:0 auto; }
.no-public .eq-card {
  position:relative; overflow:hidden; padding:26px 24px 28px; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.10);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* filete superior del color de la tarjeta */
.no-public .eq-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ac,#19b6c4); }
/* halo del color en la esquina superior derecha — mismo trazado que el brillo
   de .card en páginas oscuras (radial 130% 90% at 100% 0%), para que las dos
   familias de tarjeta de la web se vean del mismo material. */
.no-public .eq-card::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 85% at 100% 0%, var(--ac,#19b6c4), transparent 58%);
  opacity:.10;
}
.no-public .eq-card > * { position:relative; z-index:1; }
.no-public .eq-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.22); box-shadow:0 26px 46px -26px rgba(0,0,0,.6); }
.no-public .eq-ic {
  width:48px; height:48px; border-radius:13px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ac,#19b6c4); background:rgba(255,255,255,.06); border:1px solid var(--ac,#19b6c4);
}
.no-public .eq-ic svg { width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .eq-card h3 { margin:0 0 8px; color:#ffffff; font-size:17.5px; font-weight:700; letter-spacing:-.005em; }
.no-public .eq-card p { margin:0; color:#cfd6e2; font-size:14.5px; line-height:1.6; }
@media (max-width:1040px){ .no-public .eq-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .no-public .eq-grid { grid-template-columns:1fr; } }

/* ── 2) "El portal por dentro": SIN contenedores — lista a dos columnas
      separada por filetes, para que se funda con el fondo de la web. ── */
.no-public .prt-list { display:grid; grid-template-columns:1fr 1fr; gap:0 48px; max-width:1060px; margin:0 auto; }
.no-public .prt-item {
  display:flex; gap:18px; align-items:flex-start; padding:22px 2px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.no-public .prt-ic {
  flex:0 0 46px; width:46px; height:46px; border-radius:13px;
  display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1;
  background:rgba(255,255,255,.06); border:1px solid rgba(25,182,196,.35);
  transition:background .2s, border-color .2s;
}
.no-public .prt-item:hover .prt-ic { background:rgba(25,182,196,.14); border-color:#19b6c4; }
.no-public .prt-tx b { display:block; color:#ffffff; font-size:16.5px; font-weight:700; margin-bottom:5px; }
.no-public .prt-tx span { display:block; color:#cfd6e2; font-size:14.5px; line-height:1.6; }
/* la última fila no lleva filete (2 columnas → los dos últimos ítems) */
.no-public .prt-item:nth-last-child(-n+2) { border-bottom:none; }
@media (max-width:760px){
  .no-public .prt-list { grid-template-columns:1fr; gap:0; }
  .no-public .prt-item:nth-last-child(2) { border-bottom:1px solid rgba(255,255,255,.10); }
  .no-public .prt-item:last-child { border-bottom:none; }
}

/* ── 3) BUG: las tarjetas de la lista de NetOffice Timer salían gris lavanda
      con el texto blanco encima (el tema claro pone background:rgba(255,255,255,.55)
      en .timer-list li y en oscuro solo se corregían los colores de texto). ── */
.no-public:has(.page-dark) .timer-list li { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); }

/* ══════════════════════════════════════════════════════════════════
   Eyebrows legibles en las páginas oscuras (Ana 2026-08-31)
   El grupo de uniformidad de tema claro (línea ~2158) fuerza TODOS los
   .eyebrow-line a azul #2170B3 !important, que sobre #0D3454 da 2,5:1
   (apenas se lee: "PERSONAS · RRHH · CONTROL DE JORNADA", "EL PORTAL POR
   DENTRO"…). En .page-dark vuelven al cian (5,2:1) y las variantes de
   color recuperan el suyo. Comprobado: en las 15 páginas oscuras estos
   eyebrows viven en bloques de texto sobre el fondo (section-head,
   op-head, tms-teaser, hero-driver-text, lm-info…), nunca dentro de una
   tarjeta clara, así que aclararlos es siempre correcto.
   ══════════════════════════════════════════════════════════════════ */
/* La HOME no es .page-dark (usa .home-root) y se quedó fuera del arreglo:
   6 de sus 7 eyebrows seguían en azul #2170B3 a 2,3:1 sobre el fondo. */
.no-public:has(.page-dark) .eyebrow-line,
.no-public:has(.home-root) .eyebrow-line { color:#19b6c4 !important; }
.no-public:has(.page-dark) .eyebrow-line.orange,
.no-public:has(.page-dark) .eyebrow-line.amber,
.no-public:has(.home-root) .eyebrow-line.orange,
.no-public:has(.home-root) .eyebrow-line.amber { color:#f6a83a !important; }
.no-public:has(.page-dark) .eyebrow-line.emerald,
.no-public:has(.home-root) .eyebrow-line.emerald { color:#2bb673 !important; }

/* Emoji de .prt-ic: si el sistema no tiene fuente de emoji en color, el
   glifo se pinta con `color` — que heredaba un tono oscuro invisible. */
.no-public .prt-ic { color:#e8eef7; }

/* ══════════════════════════════════════════════════════════════════
   Títulos que quedaban INVISIBLES en páginas oscuras (Ana 2026-08-31)
   La "PASADA EXHAUSTIVA" de tema claro (línea ~2378) mete .feat-text h3
   y .post-card h3 en el grupo que pasa a #0D3454, y ese grupo va DESPUÉS
   de sus reglas originales en #fff con la misma especificidad → sobre
   #0D3454 quedaban navy sobre navy (contraste 1:1, texto literalmente
   invisible). Afectaba a los títulos de las tarjetas del /blog y al
   "Anticipar es ahorrar" de /netoffice/taller.
   ══════════════════════════════════════════════════════════════════ */
.no-public:has(.page-dark) .feat-text h3,
.no-public:has(.page-dark) .post-card h3 { color:#ffffff; }

/* ══════════════════════════════════════════════════════════════════
   Más tarjetas blancas que Ana pidió fundir con el fondo (2026-08-31)
   (en /modulos se DEJAN blancas a propósito — decisión de Ana)
   ══════════════════════════════════════════════════════════════════ */

/* ── /netoffice/taller: las 3 stats (−32% / −18% / 100%) eran blancas.
   Mismo tratamiento que ya tenían .laso-stats y .erp-stats en oscuro.
   El coral #f87171 de los números va inline en la BD y se mantiene
   (es el color de "reducción" de esta página): 4,4:1 sobre el fondo. ── */
.no-public:has(.page-dark) .taller-stats .stat {
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.10); border-radius:16px; box-shadow:none;
  padding:28px 22px;
}
.no-public:has(.page-dark) .taller-stats .stat .l { color:#9fb3cc; }

/* ── /netoffice/laso-sl: las 3 .dpto-card (Desarrollo / Formación /
   Sistemas). Su diseño ORIGINAL (línea ~505) ya era de cristal oscuro;
   lo tapaba el bloque de tema claro (línea ~2281 fondo #fff, ~2282 h3
   #0D3454) más un parche `.dpto-card p { color:#000 !important }`.
   Aquí se restaura el diseño original sobre el fondo oscuro. ── */
.no-public:has(.page-dark) .dpto-card {
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.10); box-shadow:none;
}
.no-public:has(.page-dark) .dpto-card:hover { border-color:rgba(25,182,196,.45); }
.no-public:has(.page-dark) .dpto-card h3 { color:#ffffff; }
.no-public:has(.page-dark) .dpto-card p { color:#cfd6e2 !important; }
.no-public:has(.page-dark) .dpto-card p strong { color:#ffffff; }
/* el número decorativo estaba a rgba(cian,.45): sobre oscuro se perdía */
.no-public:has(.page-dark) .dpto-card .dpto-num { color:rgba(79,209,224,.70); }

/* ══════════════════════════════════════════════════════════════════
   Home · sección #ia rediseñada (Ana 2026-08-31)
   Antes era una lista `features-editorial` que CONTABA lo que hace la
   IA; ahora DEMUESTRA la cadena real correo → lectura → pedido asignado
   con una demo animada, y las 3 capacidades quedan debajo como apoyo.
   Todas las animaciones comparten un ciclo de 12 s y las ventanas van
   dentro de los keyframes (mismo patrón que driverDemo* / contaDemo*),
   así van sincronizadas sin depender de delays acumulados:
     0–4 s  → paso 1 (correo)   = 0–33,3 %
     4–8 s  → paso 2 (lectura)  = 33,3–66,6 %
     8–12 s → paso 3 (pedido)   = 66,6–100 %
   Solo arrancan cuando la sección entra en pantalla (.is-visible lo pone
   reveal.js) y se desactivan con prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════ */
.no-public .iah-flow {
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:16px;
  max-width:1120px; margin:38px auto 0;
}
.no-public .iah-step { display:flex; flex-direction:column; gap:12px; opacity:.42; transition:opacity .4s; }
.no-public .iah-head {
  display:flex; align-items:center; gap:9px;
  font-family:"JetBrains Mono",monospace; font-size:12.5px; letter-spacing:.10em;
  text-transform:uppercase; color:#9fb3cc; white-space:nowrap;
}
.no-public .iah-hdot { width:7px; height:7px; border-radius:50%; background:#19b6c4; flex:0 0 auto; }
.no-public .iah-card {
  position:relative; overflow:hidden; flex:1;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.10); border-radius:14px;
  padding:16px 16px 18px; min-height:176px;
  display:flex; flex-direction:column; gap:9px;
}

/* ── paso 1: el correo que entra ── */
.no-public .iah-mrow { display:grid; grid-template-columns:60px 1fr; gap:10px; align-items:baseline; font-size:14px; line-height:1.45; }
.no-public .iah-mrow b { font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:#93a7c0; font-weight:600; }
.no-public .iah-mrow span { color:#dbe5f2; }
.no-public .iah-attach {
  margin-top:auto; display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  padding:7px 12px; border-radius:9px; background:rgba(25,182,196,.12);
  border:1px solid rgba(25,182,196,.38); color:#4fd1e0; font-size:12.5px; font-weight:600;
}
.no-public .iah-attach svg { width:14px; height:14px; flex:0 0 auto; }

/* ── paso 2: el documento que la IA lee ── */
.no-public .iah-doc { justify-content:center; gap:11px; }
.no-public .iah-doc .iah-line { display:block; height:7px; border-radius:4px; background:rgba(255,255,255,.16); }
.no-public .iah-scan {
  position:absolute; left:0; right:0; height:2px; top:-10%; opacity:0; z-index:2;
  background:linear-gradient(90deg, transparent, #4fd1e0, transparent);
  box-shadow:0 0 18px 5px rgba(79,209,224,.45);
}
.no-public .iah-pill {
  position:absolute; right:12px; bottom:12px; z-index:3; opacity:0;
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px; border-radius:20px; background:rgba(13,52,84,.92);
  border:1px solid rgba(79,209,224,.55); color:#4fd1e0;
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.06em;
}
.no-public .iah-pdot { width:6px; height:6px; border-radius:50%; background:#4fd1e0; }

/* ── paso 3: el pedido que sale ── */
.no-public .iah-field { display:grid; grid-template-columns:78px 1fr; gap:10px; align-items:baseline; font-size:14px; line-height:1.4; opacity:0; }
.no-public .iah-field b { font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:#93a7c0; font-weight:600; }
.no-public .iah-field span { color:#ffffff; font-weight:600; }
.no-public .iah-badge {
  margin-top:auto; opacity:0; display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:10px; background:rgba(43,182,115,.14);
  border:1px solid rgba(43,182,115,.45); color:#5fd39a;
  font-size:12.5px; font-weight:700; line-height:1.3;
}
.no-public .iah-badge svg { width:15px; height:15px; flex:0 0 auto; }

/* ── flechas entre pasos ── */
.no-public .iah-arrow { display:flex; align-items:center; justify-content:center; color:#19b6c4; opacity:.25; }
.no-public .iah-arrow svg { width:22px; height:22px; }

/* ── pie de la demo ── */
.no-public .iah-caption { max-width:900px; margin:22px auto 0; text-align:center; color:#cfd6e2; font-size:16.5px; line-height:1.6; }

/* ── las 3 capacidades, debajo ── */
.no-public .iah-caps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1120px; margin:44px auto 0; }
.no-public .iah-cap {
  position:relative; padding:24px 22px 26px; border-radius:14px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.10);
  border-top:2px solid rgba(25,182,196,.55);
  transition:border-color .2s, transform .2s, background .2s;
}
.no-public .iah-cap:hover { transform:translateY(-3px); background:rgba(255,255,255,.05); border-color:rgba(25,182,196,.35); }
.no-public .iah-cap-n { display:block; font-family:"JetBrains Mono",monospace; font-size:26px; font-weight:700; color:#19b6c4; line-height:1; margin-bottom:12px; }
.no-public .iah-cap h3 { color:#ffffff; font-size:18.5px; font-weight:700; margin:0 0 8px; letter-spacing:-.005em; line-height:1.3; }
.no-public .iah-cap p { color:#cfd6e2; font-size:16px; line-height:1.6; margin:0; }

/* ══ coreografía (ciclo compartido de 12 s) ══ */
.no-public .iah-flow.is-visible .iah-s1 { animation:iahOn1 12s ease-in-out infinite; }
.no-public .iah-flow.is-visible .iah-s2 { animation:iahOn2 12s ease-in-out infinite; }
.no-public .iah-flow.is-visible .iah-s3 { animation:iahOn3 12s ease-in-out infinite; }
@keyframes iahOn1 { 0%,1%{opacity:.42;} 5%,30%{opacity:1;} 34%,100%{opacity:.42;} }
@keyframes iahOn2 { 0%,33%{opacity:.42;} 38%,63%{opacity:1;} 67%,100%{opacity:.42;} }
@keyframes iahOn3 { 0%,66%{opacity:.42;} 71%,97%{opacity:1;} 100%{opacity:.42;} }

.no-public .iah-flow.is-visible .iah-a1 { animation:iahArrow1 12s ease-in-out infinite; }
.no-public .iah-flow.is-visible .iah-a2 { animation:iahArrow2 12s ease-in-out infinite; }
@keyframes iahArrow1 { 0%,27%{opacity:.25; transform:translateX(0);} 32%{opacity:1; transform:translateX(4px);} 37%,100%{opacity:.25; transform:translateX(0);} }
@keyframes iahArrow2 { 0%,60%{opacity:.25; transform:translateX(0);} 65%{opacity:1; transform:translateX(4px);} 70%,100%{opacity:.25; transform:translateX(0);} }

/* el haz recorre el documento dentro de la ventana del paso 2 */
.no-public .iah-flow.is-visible .iah-scan { animation:iahScan 12s linear infinite; }
@keyframes iahScan {
  0%,34%   { top:-10%; opacity:0; }
  37%      { opacity:1; }
  60%      { top:100%; opacity:1; }
  63%,100% { top:100%; opacity:0; }
}
/* las líneas del documento se encienden al paso del haz */
.no-public .iah-flow.is-visible .iah-doc .iah-line:nth-of-type(1) { animation:iahLineA 12s ease-in-out infinite; }
.no-public .iah-flow.is-visible .iah-doc .iah-line:nth-of-type(2) { animation:iahLineB 12s ease-in-out infinite; }
.no-public .iah-flow.is-visible .iah-doc .iah-line:nth-of-type(3) { animation:iahLineC 12s ease-in-out infinite; }
.no-public .iah-flow.is-visible .iah-doc .iah-line:nth-of-type(4) { animation:iahLineD 12s ease-in-out infinite; }
.no-public .iah-flow.is-visible .iah-doc .iah-line:nth-of-type(5) { animation:iahLineE 12s ease-in-out infinite; }
.no-public .iah-flow.is-visible .iah-doc .iah-line:nth-of-type(6) { animation:iahLineF 12s ease-in-out infinite; }
@keyframes iahLineA { 0%,37%{background:rgba(255,255,255,.16);} 41%,62%{background:rgba(79,209,224,.55);} 66%,100%{background:rgba(255,255,255,.16);} }
@keyframes iahLineB { 0%,40%{background:rgba(255,255,255,.16);} 44%,62%{background:rgba(79,209,224,.55);} 66%,100%{background:rgba(255,255,255,.16);} }
@keyframes iahLineC { 0%,43%{background:rgba(255,255,255,.16);} 47%,62%{background:rgba(79,209,224,.55);} 66%,100%{background:rgba(255,255,255,.16);} }
@keyframes iahLineD { 0%,46%{background:rgba(255,255,255,.16);} 50%,62%{background:rgba(79,209,224,.55);} 66%,100%{background:rgba(255,255,255,.16);} }
@keyframes iahLineE { 0%,49%{background:rgba(255,255,255,.16);} 53%,62%{background:rgba(79,209,224,.55);} 66%,100%{background:rgba(255,255,255,.16);} }
@keyframes iahLineF { 0%,52%{background:rgba(255,255,255,.16);} 56%,62%{background:rgba(79,209,224,.55);} 66%,100%{background:rgba(255,255,255,.16);} }

.no-public .iah-flow.is-visible .iah-pill { animation:iahPill 12s ease-in-out infinite; }
@keyframes iahPill { 0%,34%{opacity:0;} 38%,62%{opacity:1;} 66%,100%{opacity:0;} }
.no-public .iah-flow.is-visible .iah-pdot { animation:iahPdot 1.4s ease-in-out infinite; }
@keyframes iahPdot { 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.35; transform:scale(.7);} }

/* los campos del pedido se rellenan uno a uno */
.no-public .iah-flow.is-visible .iah-f1 { animation:iahF1 12s ease-out infinite; }
.no-public .iah-flow.is-visible .iah-f2 { animation:iahF2 12s ease-out infinite; }
.no-public .iah-flow.is-visible .iah-f3 { animation:iahF3 12s ease-out infinite; }
.no-public .iah-flow.is-visible .iah-f4 { animation:iahF4 12s ease-out infinite; }
@keyframes iahF1 { 0%,67%{opacity:0; transform:translateX(8px);} 71%,97%{opacity:1; transform:none;} 100%{opacity:0; transform:translateX(8px);} }
@keyframes iahF2 { 0%,70%{opacity:0; transform:translateX(8px);} 74%,97%{opacity:1; transform:none;} 100%{opacity:0; transform:translateX(8px);} }
@keyframes iahF3 { 0%,73%{opacity:0; transform:translateX(8px);} 77%,97%{opacity:1; transform:none;} 100%{opacity:0; transform:translateX(8px);} }
@keyframes iahF4 { 0%,76%{opacity:0; transform:translateX(8px);} 80%,97%{opacity:1; transform:none;} 100%{opacity:0; transform:translateX(8px);} }
.no-public .iah-flow.is-visible .iah-badge { animation:iahBadge 12s ease-out infinite; }
@keyframes iahBadge { 0%,84%{opacity:0; transform:scale(.94);} 88%,97%{opacity:1; transform:none;} 100%{opacity:0; transform:scale(.94);} }

/* ── responsive: en columna, con las flechas girando 90° ── */
@media (max-width:1040px) {
  .no-public .iah-caps { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .no-public .iah-flow { grid-template-columns:1fr; gap:12px; }
  .no-public .iah-arrow { transform:rotate(90deg); }
  .no-public .iah-card { min-height:0; }
  /* En columna el visitante ve los pasos de uno en uno al hacer scroll, así que
     NO se atenúan ni se ocultan campos: todo visible y solo se mantiene el haz
     de lectura de la IA, que es la pista visual y no esconde contenido. */
  .no-public .iah-step { opacity:1; }
  .no-public .iah-flow.is-visible .iah-s1,
  .no-public .iah-flow.is-visible .iah-s2,
  .no-public .iah-flow.is-visible .iah-s3,
  .no-public .iah-flow.is-visible .iah-a1,
  .no-public .iah-flow.is-visible .iah-a2,
  .no-public .iah-flow.is-visible .iah-f1,
  .no-public .iah-flow.is-visible .iah-f2,
  .no-public .iah-flow.is-visible .iah-f3,
  .no-public .iah-flow.is-visible .iah-f4,
  .no-public .iah-flow.is-visible .iah-badge { animation:none; }
  .no-public .iah-arrow { opacity:.5; }
  .no-public .iah-field, .no-public .iah-badge { opacity:1; transform:none; }
  .no-public .iah-flow.is-visible .iah-pill { animation:none; opacity:1; }
}

/* ── sin movimiento: todo en su estado final ── */


/* BUG de fondo: `.features-editorial .fe-ic svg` no fijaba fill/stroke, así que
   los iconos de línea sin atributos inline se pintaban como manchas NEGRAS
   (se veía en esta misma sección de la home antes del rediseño). */
.no-public .features-editorial .fe-ic svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ══════════════════════════════════════════════════════════════════
   Home · #ia — color y separación de las secciones vecinas
   (Ana 2026-08-31: "todo sale en el mismo azul y no se diferencia")
   Las secciones contiguas (hero-intro-band, why-band, #modulos,
   driver-banner) son todas #0D3454 PLANO, así que la sección se fundía.
   Dos medidas: (a) banda propia con degradado + resplandores cian y
   naranja y filetes cian arriba/abajo; (b) un color por paso del relato,
   que se propaga con --sc: naranja = entra el correo, cian = la IA lo
   lee, verde = pedido creado. Entrada → proceso → resultado.
   ══════════════════════════════════════════════════════════════════ */
.no-public section.np#ia { position:relative; isolation:isolate; }
.no-public section.np#ia > * { position:relative; z-index:1; }
.no-public section.np#ia::before {
  content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; z-index:0;
  /* SIN corte: el degradado ARRANCA y TERMINA exactamente en #0D3454, el color
     del resto de la home, así que los bordes de la banda son invisibles; solo
     el centro se aclara. Y fuera los filetes cian de 1px, que eran una línea
     literal a lo ancho de la pantalla (Ana 2026-09-01). Los resplandores
     radiales acaban en transparente, así que tampoco marcan borde. */
  background:
    radial-gradient(110% 90% at 14% 18%, rgba(25,182,196,.13), transparent 62%),
    radial-gradient(100% 85% at 90% 84%, rgba(246,168,58,.09), transparent 64%),
    linear-gradient(180deg, #0D3454 0%, #0f3760 50%, #0D3454 100%);
  /* Máscara vertical: la banda ENTERA (degradado y resplandores) se desvanece a
     transparente en los 120px de arriba y de abajo, así que por mucho que se
     toque el fondo NUNCA puede aparecer una línea en la unión con las secciones
     vecinas. Los resplandores, además, se centran ya dentro de la banda. */
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
}

/* ── un color por paso ── */
.no-public .iah-s1 { --sc:#f6a83a; }
.no-public .iah-s2 { --sc:#19b6c4; }
.no-public .iah-s3 { --sc:#2bb673; }
.no-public .iah-head { color:var(--sc,#9fb3cc); }
.no-public .iah-hdot { background:var(--sc,#19b6c4); box-shadow:0 0 0 3px rgba(255,255,255,.05); }
/* resplandor del color del paso en la esquina superior derecha de su tarjeta */
.no-public .iah-card::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(115% 85% at 100% 0%, var(--sc,#19b6c4), transparent 58%);
  opacity:.11;
}
.no-public .iah-card > * { position:relative; z-index:1; }
/* el adjunto del correo y la pastilla de la IA toman el color de su paso */
.no-public .iah-attach { background:rgba(255,255,255,.06); border-color:var(--sc,#19b6c4); color:var(--sc,#4fd1e0); }
.no-public .iah-pill { border-color:var(--sc,#4fd1e0); color:var(--sc,#4fd1e0); }
.no-public .iah-pdot { background:var(--sc,#4fd1e0); }
.no-public .iah-badge { background:rgba(43,182,115,.14); border-color:var(--sc,#2bb673); color:#5fd39a; }
/* cada flecha lleva el color del paso al que conduce */
.no-public .iah-a1 { color:#19b6c4; }
.no-public .iah-a2 { color:#2bb673; }

/* ── las 3 capacidades: repiten la paleta en vez de tres cian iguales ── */
.no-public .iah-cap:nth-child(1) { --cc:#19b6c4; }
.no-public .iah-cap:nth-child(2) { --cc:#f6a83a; }
.no-public .iah-cap:nth-child(3) { --cc:#2bb673; }
.no-public .iah-cap { border-top:2px solid var(--cc,#19b6c4); }
.no-public .iah-cap:hover { border-color:rgba(255,255,255,.16); border-top-color:var(--cc,#19b6c4); }
.no-public .iah-cap-n { color:var(--cc,#19b6c4); }

/* el haz de lectura mantiene el cian del paso 2 (es el color de la IA) */
.no-public .iah-scan { background:linear-gradient(90deg, transparent, #4fd1e0, transparent); }

/* ══════════════════════════════════════════════════════════════════
   /app-driver · sección de funcionalidades rediseñada (Ana 2026-09-01)
   El brief: la rejilla de 9 tarjetas describía funciones pero no
   convencía. La empresa tiene que ver que la app es NECESARIA y que
   sustituye la comunicación que hoy hacen por WhatsApp y llamadas.
   Ahora: el hilo de chat típico como gancho + las 9 funcionalidades
   agrupadas por el trabajo de comunicación que resuelven (--g da el
   color de cada grupo). La sección 2 (.ad-contrast) sigue haciendo el
   antes/después argumental; esta lo DEMUESTRA, no lo repite.
   ══════════════════════════════════════════════════════════════════ */
.no-public .adw-split {
  display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:44px;
  align-items:start; max-width:1120px; margin:40px auto 0;
}

/* ── el hilo de chat ── */
.no-public .adw-chat {
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:hidden;
  box-shadow:0 26px 54px -30px rgba(0,0,0,.6);
}
.no-public .adw-chat-head {
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.10);
}
.no-public .adw-ch-av {
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:rgba(25,182,196,.18); border:1px solid rgba(25,182,196,.40);
  color:#4fd1e0; font-family:"JetBrains Mono",monospace; font-size:12.5px; font-weight:700;
}
.no-public .adw-chat-head b { display:block; color:#ffffff; font-size:14.5px; font-weight:700; line-height:1.2; }
.no-public .adw-chat-head span { display:block; color:#93a7c0; font-size:12px; margin-top:2px; }
.no-public .adw-chat-body { padding:16px 16px 8px; display:flex; flex-direction:column; gap:10px; }
.no-public .adw-msg {
  position:relative; align-self:flex-start; max-width:88%;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);
  border-radius:14px 14px 14px 4px; padding:10px 13px 8px;
}
.no-public .adw-msg p { margin:0; color:#dbe5f2; font-size:14px; line-height:1.5; }
.no-public .adw-msg time { display:block; text-align:right; margin-top:4px; color:#7f94b0; font-size:11px; font-family:"JetBrains Mono",monospace; }
/* el último mensaje es el del día siguiente: se marca aparte */
.no-public .adw-msg:last-child { border-color:rgba(248,113,113,.38); background:rgba(248,113,113,.08); }
.no-public .adw-msg:last-child p { color:#ffd9d9; }
.no-public .adw-chat-foot {
  padding:14px 16px 16px; color:#f8a0a0; font-size:13px; line-height:1.5;
  border-top:1px solid rgba(255,255,255,.08); background:rgba(248,113,113,.06);
}

/* ── la columna del "por qué falla" ── */
.no-public .adw-why-tag {
  display:inline-block; padding:5px 12px; border-radius:20px; margin-bottom:16px;
  background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.42); color:#f8a0a0;
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.10em; text-transform:uppercase;
}
.no-public .adw-why-lead { color:#dbe5f2; font-size:16.5px; line-height:1.6; margin:0 0 20px; }
.no-public .adw-why-lead b { color:#ffffff; }
.no-public .adw-why-list { list-style:none; padding:0; margin:0 0 24px; display:grid; gap:12px; }
.no-public .adw-why-list li {
  position:relative; padding:0 0 0 26px; color:#cfd6e2; font-size:14.5px; line-height:1.55;
}
.no-public .adw-why-list li::before {
  content:''; position:absolute; left:0; top:7px; width:10px; height:10px; border-radius:3px;
  background:rgba(248,113,113,.22); border:1px solid rgba(248,113,113,.55);
}
.no-public .adw-why-list li b { color:#ffffff; }
.no-public .adw-why-cta {
  padding:16px 18px; border-radius:14px;
  background:rgba(25,182,196,.10); border:1px solid rgba(25,182,196,.38);
  color:#dbe5f2; font-size:15px; line-height:1.55;
}
.no-public .adw-why-cta b { color:#4fd1e0; font-weight:700; }

/* ── los 3 grupos de funcionalidades ── */
.no-public .adw-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; max-width:1120px; margin:52px auto 0; }
.no-public .adw-group {
  position:relative; padding:26px 24px 28px; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.10); border-top:3px solid var(--g,#19b6c4);
}
.no-public .adw-g-head { display:flex; align-items:baseline; gap:12px; margin-bottom:10px; }
.no-public .adw-g-n { font-family:"JetBrains Mono",monospace; font-size:22px; font-weight:700; color:var(--g,#19b6c4); line-height:1; }
.no-public .adw-group h3 { margin:0; color:#ffffff; font-size:18px; font-weight:700; letter-spacing:-.005em; line-height:1.25; }
.no-public .adw-g-sub { margin:0 0 20px; color:var(--g,#19b6c4); font-size:14px; line-height:1.55; }
.no-public .adw-feats { list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.no-public .adw-feats li { display:grid; grid-template-columns:38px 1fr; gap:13px; align-items:start; }
.no-public .adw-f-ic {
  width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex:0 0 38px;
  background:rgba(255,255,255,.06); border:1px solid var(--g,#19b6c4); color:var(--g,#19b6c4);
}
.no-public .adw-f-ic svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.no-public .adw-feats li b { display:block; color:#ffffff; font-size:15px; font-weight:700; margin-bottom:4px; line-height:1.3; }
/* OJO: el icono también es un <span> dentro del <li>, así que la regla del texto
   descriptivo debe apuntar SOLO al span de dentro del div; si no, le gana en
   especificidad a .adw-f-ic y le quita el centrado (display:block) y el color. */
.no-public .adw-feats li > div > span { display:block; color:#cfd6e2; font-size:13.5px; line-height:1.55; }

/* ── responsive ── */
@media (max-width:1040px) {
  .no-public .adw-split { grid-template-columns:1fr; gap:32px; max-width:680px; }
  .no-public .adw-groups { grid-template-columns:1fr; max-width:680px; }
}
@media (max-width:520px) {
  .no-public .adw-msg { max-width:100%; }
}

/* El ajuste óptico de logos de reveal.js (logoFit) recorta el margen vacío de
   cada fichero con márgenes negativos: la placa tiene que ocultar lo que sobra. */
.no-public .intg-plate { overflow:hidden; }

/* ══════════════════════════════════════════════════════════════════
   Icono de la aplicación en la cabecera de #modulos (Ana 2026-09-03)
   OJO: el relleno del icono es #0D3454, EXACTAMENTE el fondo de la web,
   y sus esquinas son transparentes (trae su propia forma redondeada).
   Por eso NO lleva contenedor ni borde (habría que adivinar su radio y
   se vería el desajuste): la separación la da un drop-shadow de 0 de
   desplazamiento, que dibuja un halo claro siguiendo su silueta exacta,
   más una sombra de profundidad. Así se despega del fondo sin marco.
   ══════════════════════════════════════════════════════════════════ */
.no-public .app-mark {
  display:block; width:76px; height:76px; margin:0 0 20px;
  filter:drop-shadow(0 0 1.5px rgba(255,255,255,.55)) drop-shadow(0 14px 26px rgba(0,0,0,.55));
}
@media (max-width:760px){ .no-public .app-mark { width:62px; height:62px; margin-bottom:16px; } }

/* ══════════════════════════════════════════════════════════════════
   /netoffice/transporte — dos rediseños (Ana 2026-09-03)
   1) "El corazón de tu operativa": eran 6 tarjetas idénticas con el
      MISMO icono de check las seis, de ahí la monotonía. Ahora cada
      una tiene su icono propio, su número y acento alterno ámbar/cian
      (ámbar = color del módulo Tráfico, cian = el técnico del sitio):
      en rejilla de 3 el resultado es un tablero, no una repetición.
   2) El teaser del TMS pasa a ser el bloque protagonista de la página,
      con la captura del planning y una llamada a la acción clara.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1) las 6 capacidades ── */
.no-public .trf-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.no-public .trf-card {
  position:relative; overflow:hidden; padding:30px 26px 30px; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.10);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* filete superior y resplandor del acento en la esquina (lenguaje del sitio) */
.no-public .trf-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--t,#f59e0b); }
.no-public .trf-card::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 85% at 100% 0%, var(--t,#f59e0b), transparent 58%); opacity:.10;
}
.no-public .trf-card > * { position:relative; z-index:1; }
.no-public .trf-card:hover { transform:translateY(-5px); border-color:rgba(255,255,255,.22); box-shadow:0 28px 52px -28px rgba(0,0,0,.6); }
/* el número, como filigrana en la esquina */
.no-public .trf-n {
  position:absolute; top:16px; right:22px;
  font-family:"JetBrains Mono",monospace; font-size:40px; font-weight:700; line-height:1;
  color:var(--t,#f59e0b); opacity:.20;
}
.no-public .trf-ic {
  width:52px; height:52px; border-radius:14px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid var(--t,#f59e0b); color:var(--t,#f59e0b);
}
.no-public .trf-ic svg { width:26px; height:26px; display:block; }
.no-public .trf-tag {
  display:inline-block; margin-bottom:14px; padding:5px 12px; border-radius:30px;
  background:rgba(255,255,255,.05); border:1px solid var(--t,#f59e0b); color:var(--t,#f59e0b);
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.10em; text-transform:uppercase;
}
.no-public .trf-card h3 { color:#ffffff; font-size:18.5px; font-weight:700; margin:0 0 10px; letter-spacing:-.01em; line-height:1.3; }
.no-public .trf-card p { color:#cfd6e2; font-size:14.5px; line-height:1.65; margin:0; }
@media (max-width:1040px){ .no-public .trf-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px){ .no-public .trf-grid { grid-template-columns:1fr; } .no-public .trf-n { font-size:32px; } }

/* ── 2) el TMS como bloque protagonista ── */
.no-public .tms-star {
  position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:44px; align-items:center; padding:44px 46px; border-radius:24px;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(245,158,11,.16), transparent 62%),
    radial-gradient(90% 120% at 100% 100%, rgba(25,182,196,.14), transparent 62%),
    linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(245,158,11,.38);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.6);
}
.no-public .tms-star > * { position:relative; z-index:1; }
.no-public .tms-star-badge {
  display:inline-flex; align-items:center; gap:9px; margin-bottom:16px;
  padding:6px 14px; border-radius:30px;
  background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.50); color:#f6b556;
  font-family:"JetBrains Mono",monospace; font-size:12.5px; letter-spacing:.10em; text-transform:uppercase;
}
.no-public .tms-star-dot { width:7px; height:7px; border-radius:50%; background:#f59e0b; animation:tmsStarDot 1.8s ease-in-out infinite; }
@keyframes tmsStarDot { 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.35; transform:scale(.65);} }
.no-public .tms-star h2 { color:#ffffff; font-size:clamp(26px,2.6vw,36px); font-weight:700; letter-spacing:-.02em; line-height:1.15; margin:0 0 14px; }
.no-public .tms-star h2 span { color:#f59e0b; }
.no-public .tms-star-body > p { color:#dbe5f2; font-size:16px; line-height:1.65; margin:0 0 24px; }
/* los tres motores, numerados */
.no-public .tms-star-engines { list-style:none; padding:0; margin:0 0 28px; display:grid; gap:14px; }
.no-public .tms-star-engines li { display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:start; }
.no-public .tse-n {
  width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.45); color:#f6b556;
  font-family:"JetBrains Mono",monospace; font-size:14px; font-weight:700;
}
.no-public .tms-star-engines li b { display:block; color:#ffffff; font-size:17px; font-weight:700; margin-bottom:3px; }
.no-public .tms-star-engines li div > span { display:block; color:#cfd6e2; font-size:15.5px; line-height:1.55; }
/* la llamada a la acción, con peso */
.no-public .tms-star-foot { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.no-public .tms-star-cta {
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border-radius:12px; text-decoration:none;
  background:linear-gradient(135deg,#f59e0b,#d97706); color:#1a1206;
  font-size:17px; font-weight:800; letter-spacing:.01em;
  box-shadow:0 16px 34px -14px rgba(245,158,11,.65);
  transition:filter .2s, transform .15s, box-shadow .2s;
}
.no-public .tms-star-cta:hover { filter:brightness(1.07); transform:translateY(-2px); box-shadow:0 20px 40px -14px rgba(245,158,11,.75); }
.no-public .tms-star-cta span { font-size:18px; }
.no-public .tms-star-note { color:#9fb3cc; font-size:15.5px; }
.no-public .tms-star-media .shot-mock { margin:0; }
@media (max-width:1040px){
  .no-public .tms-star { grid-template-columns:1fr; gap:32px; padding:34px 28px; }
  .no-public .tms-star-media { order:-1; }
}

/* ══════════════════════════════════════════════════════════════════
   /transporte · "Extranet 24/7" — los dos portales (Ana 2026-09-07)
   Fuera el mockup del portátil (además llevaba `empleado-nuevo.png`,
   que es la captura del portal del EMPLEADO, no la de la extranet).
   Quedan solo las dos tarjetas y con OTRO diseño, para que no se
   confundan con las `.trf-card` de arriba: en vez de panel plano con
   número y filete, cada portal se dibuja como una VENTANA con su
   barra de título y su dirección — que es literalmente lo que son,
   un acceso web propio. Sin filigrana numérica, sin resplandor de
   esquina, y la información en lista en vez de en párrafo.
   Solo dos colores aquí: cian para clientes, ámbar para proveedores.
   ══════════════════════════════════════════════════════════════════ */
.no-public .ext-portals { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; max-width:1040px; margin:40px auto 0; }
.no-public .ext-portal {
  overflow:hidden; border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 26px 54px -30px rgba(0,0,0,.6);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.no-public .ext-portal:hover { transform:translateY(-4px); border-color:var(--p,#19b6c4); box-shadow:0 32px 60px -30px rgba(0,0,0,.7); }
/* la barra de la ventana */
.no-public .ext-portal-bar {
  display:flex; align-items:center; gap:7px; padding:11px 15px;
  background:rgba(0,0,0,.28); border-bottom:1px solid rgba(255,255,255,.10);
}
.no-public .ext-portal-bar span { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.20); flex:0 0 auto; }
.no-public .ext-portal-bar span:first-child { background:var(--p,#19b6c4); }
.no-public .ext-portal-bar em {
  margin-left:8px; font-style:normal; color:#93a7c0;
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.02em;
}
/* el cuerpo */
.no-public .ext-portal-body { padding:24px 26px 26px; }
.no-public .ext-portal-head { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.no-public .ext-portal-ic {
  width:46px; height:46px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid var(--p,#19b6c4); color:var(--p,#19b6c4);
}
.no-public .ext-portal-ic svg { width:23px; height:23px; display:block; }
.no-public .ext-portal-head b { display:block; color:#ffffff; font-size:19px; font-weight:700; letter-spacing:-.01em; line-height:1.25; }
.no-public .ext-portal-head > div > span { display:block; color:var(--p,#19b6c4); font-size:13.5px; margin-top:3px; }
/* la lista, con su línea de separación */
.no-public .ext-portal-body ul { list-style:none; padding:0; margin:0; }
.no-public .ext-portal-body li {
  position:relative; padding:11px 0 11px 26px; color:#cfd6e2; font-size:14.5px; line-height:1.5;
  border-top:1px solid rgba(255,255,255,.08);
}
.no-public .ext-portal-body li:first-child { border-top:none; padding-top:0; }
.no-public .ext-portal-body li:last-child { padding-bottom:0; }
.no-public .ext-portal-body li::before {
  content:''; position:absolute; left:2px; top:17px; width:9px; height:9px; border-radius:2px;
  border:1.5px solid var(--p,#19b6c4);
}
.no-public .ext-portal-body li:first-child::before { top:6px; }
@media (max-width:860px){ .no-public .ext-portals { grid-template-columns:1fr; max-width:560px; } }

/* ══════════════════════════════════════════════════════════════════════
   /netoffice/tms — bloques nuevos (Ana 2026-09-07)
   La página nueva se había escrito de cero y perdió 22 de los 23 bloques
   de texto que POSICIONAN en netoffice.es/modulos/gestion-de-trafico/tms.
   Se recuperan verbatim y se ordenan como decide un jefe de transporte
   que está evaluando cambiar de TMS: el problema → qué gana su empresa →
   qué resultados da → (detalle técnico que ya existía) → qué pasa con lo
   que ya tiene montado.
   Color con significado: coral = el problema · cian = cómo funciona ·
   verde = los resultados.
   ══════════════════════════════════════════════════════════════════════ */

/* ── el hero: H1 + reclamo + botones ── */
.no-public .tms-hero-claim {
  color:#19b6c4; font-size:clamp(19px,1.9vw,24px); font-weight:600;
  letter-spacing:-.01em; margin:6px 0 18px;
}
.no-public .tms-hero-cta { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:28px; }
.no-public .tms-hero-cta2 {
  color:#dbe5f2; font-size:16px; font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.30); padding-bottom:2px; transition:color .2s, border-color .2s;
}
.no-public .tms-hero-cta2:hover { color:#19b6c4; border-color:#19b6c4; }

/* ── 1) [SIN USO 2026-09-07: Ana eliminó la sección #tms-reto; los dos
      párrafos verbatim viven ahora en .tms-intro. Se conserva el CSS por
      si se quiere recuperar la maqueta.] el reto y la respuesta ── */
.no-public .reto-split { display:grid; grid-template-columns:1.15fr 1fr; gap:24px; max-width:1120px; margin:0 auto; align-items:stretch; }
.no-public .reto-problema, .no-public .reto-respuesta { padding:30px 32px; border-radius:18px; }
.no-public .reto-problema {
  background:linear-gradient(160deg, rgba(248,113,113,.10), rgba(248,113,113,.02));
  border:1px solid rgba(248,113,113,.34);
}
.no-public .reto-respuesta {
  background:linear-gradient(160deg, rgba(25,182,196,.12), rgba(25,182,196,.03));
  border:1px solid rgba(25,182,196,.38);
}
.no-public .reto-tag {
  display:inline-block; margin-bottom:16px; padding:6px 14px; border-radius:30px;
  background:rgba(248,113,113,.14); border:1px solid rgba(248,113,113,.46); color:#f8a0a0;
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.10em; text-transform:uppercase;
}
.no-public .reto-tag-ok { background:rgba(25,182,196,.14); border-color:rgba(25,182,196,.50); color:#4fd1e0; }
.no-public .reto-problema p, .no-public .reto-respuesta p { color:#dbe5f2; font-size:16px; line-height:1.7; margin:0; }
.no-public .reto-problema p b { color:#ffd9d9; }
.no-public .reto-respuesta p b { color:#ffffff; }
.no-public .reto-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.no-public .reto-chips span {
  padding:7px 14px; border-radius:24px; background:rgba(255,255,255,.05);
  border:1px solid rgba(248,113,113,.40); color:#f8a0a0; font-size:13px; font-weight:600;
}
@media (max-width:940px){ .no-public .reto-split { grid-template-columns:1fr; max-width:680px; } }

/* ── 2) los 7 beneficios (el bloque que posiciona) ── */
.no-public .ayuda-list {
  list-style:none; padding:0; margin:0 auto; max-width:1120px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 26px; counter-reset:none;
}
.no-public .ayuda-list li {
  display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:center;
  padding:18px 22px; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.10);
  transition:border-color .2s, transform .2s;
}
.no-public .ayuda-list li:hover { border-color:rgba(25,182,196,.45); transform:translateY(-2px); }
.no-public .ay-n {
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(25,182,196,.14); border:1px solid rgba(25,182,196,.42); color:#4fd1e0;
  font-family:"JetBrains Mono",monospace; font-size:15px; font-weight:700;
}
.no-public .ayuda-list li p { margin:0; color:#dbe5f2; font-size:17px; line-height:1.55; }
/* el séptimo ocupa las dos columnas para que no quede un hueco */
.no-public .ayuda-list li:last-child:nth-child(odd) { grid-column:1 / -1; }
.no-public .ayuda-notas { max-width:1120px; margin:30px auto 0; display:grid; gap:12px; }
.no-public .ayuda-notas p {
  margin:0; padding:16px 20px; border-radius:12px;
  background:rgba(25,182,196,.06); border-left:3px solid rgba(25,182,196,.55);
  color:#cfd6e2; font-size:16.5px; line-height:1.6;
}
.no-public .ayuda-notas p b { color:#ffffff; }
@media (max-width:940px){ .no-public .ayuda-list { grid-template-columns:1fr; max-width:680px; } }

/* ── 3) el caso real: el bloque que convence a un jefe ── */
.no-public .caso-box {
  max-width:1120px; margin:0 auto; padding:34px 36px; border-radius:22px;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(43,182,115,.16), transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(43,182,115,.40);
  box-shadow:0 30px 64px -32px rgba(0,0,0,.6);
}
.no-public .caso-cabecera { display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; padding-bottom:26px; margin-bottom:26px; border-bottom:1px solid rgba(255,255,255,.12); }
.no-public .caso-flota { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.no-public .caso-flota-num {
  font-family:"JetBrains Mono",monospace; font-size:clamp(44px,4.4vw,64px); font-weight:700;
  color:#2bb673; line-height:1; letter-spacing:-.03em;
}
.no-public .caso-flota-lbl { color:#9fb3cc; font-size:14.5px; line-height:1.3; text-transform:uppercase; letter-spacing:.06em; }
.no-public .caso-cabecera > p { margin:0; color:#dbe5f2; font-size:18px; line-height:1.65; }
.no-public .caso-cabecera > p b { color:#ffffff; }
.no-public .caso-logros { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; }
.no-public .caso-logro { padding:20px 18px; border-radius:14px; background:rgba(255,255,255,.04); border-top:2px solid rgba(43,182,115,.6); }
.no-public .caso-logro b {
  display:block; color:#5fd39a; font-size:22px; font-weight:800; line-height:1.1; letter-spacing:-.02em;
  font-family:"JetBrains Mono",monospace;
}
.no-public .caso-logro > span { display:block; color:#9fb3cc; font-size:14px; margin:6px 0 12px; line-height:1.35; }
.no-public .caso-logro p { margin:0; color:#cfd6e2; font-size:15.5px; line-height:1.55; }
.no-public .tms-cierre {
  max-width:1000px; margin:34px auto 0; text-align:center;
  color:#cfd6e2; font-size:17.5px; line-height:1.7;
}
.no-public .tms-cierre b { color:#ffffff; }
@media (max-width:1100px){ .no-public .caso-logros { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px){
  .no-public .caso-box { padding:26px 22px; }
  .no-public .caso-cabecera { grid-template-columns:1fr; gap:16px; }
  .no-public .caso-logros { grid-template-columns:1fr; }
}

/* ── 4) el cierre: qué pasa con lo que ya tienes montado ── */
.no-public .cambio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; max-width:1120px; margin:0 auto; }
.no-public .cambio-card {
  padding:28px 26px; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.10); border-left:3px solid var(--k,#19b6c4);
  transition:transform .2s, border-color .2s;
}
.no-public .cambio-card:hover { transform:translateY(-4px); }
.no-public .cambio-card h3 { margin:0 0 10px; color:#ffffff; font-size:18.5px; font-weight:700; letter-spacing:-.01em; }
.no-public .cambio-card p { margin:0 0 16px; color:#cfd6e2; font-size:16px; line-height:1.6; }
.no-public .cambio-card a { color:var(--k,#19b6c4); font-size:15.5px; font-weight:700; text-decoration:none; }
.no-public .cambio-card a:hover { text-decoration:underline; text-underline-offset:3px; }
@media (max-width:940px){ .no-public .cambio-grid { grid-template-columns:1fr; max-width:600px; } }

/* ── /netoffice/tms · el planteamiento, a modo de texto (Ana 2026-09-07) ── */
.no-public section.np.tms-intro { padding-top:40px; padding-bottom:18px; }
.no-public .tms-intro p {
  max-width:1120px; margin:0 auto; color:#dbe5f2;
  font-size:clamp(17.5px,1.45vw,20px); line-height:1.72; letter-spacing:-.005em;
}
.no-public .tms-intro p + p { margin-top:22px; }
.no-public .tms-intro p b { color:#ffffff; font-weight:600; }

/* ══════════════════════════════════════════════════════════════════════
   HOME · "Despliegue flexible" — fuera el fondo blanco (Ana 2026-09-07)
   Eran las últimas tarjetas blancas de la home. Ahora toman el fondo del
   sitio, pero NO se dibujan como otra fila de `.card`: son DOS OPCIONES
   entre las que hay que elegir, así que cada una lleva su filete de color
   arriba, su icono y el ✓ de su lista en SU color — cian = cloud gestionado,
   ámbar = on-premise. Esa distinción existía en el diseño original y la
   versión clara la había aplanado (los dos ✓ en cian).
   La recomendada va con aro y resplandor cian para que se lea como tal.
   /novedades sigue siendo página clara y usa las mismas clases, por eso
   todo va acotado con :has(.home-root) / :has(.page-dark).
   ══════════════════════════════════════════════════════════════════════ */
.no-public:has(.home-root) section.np#despliegue::before,
.no-public:has(.page-dark) section.np#despliegue::before { content:none; }

.no-public:has(.home-root) .deploy-card,
.no-public:has(.page-dark) .deploy-card {
  background:linear-gradient(168deg, rgba(255,255,255,.055), rgba(255,255,255,.015)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-top:3px solid var(--d,#19b6c4) !important;
  border-radius:18px;
  box-shadow:0 26px 56px -34px rgba(0,0,0,.55) !important;
  padding:38px 38px 34px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.no-public:has(.home-root) .deploy-card.onprem,
.no-public:has(.page-dark) .deploy-card.onprem { --d:#f6a83a; }
.no-public:has(.home-root) .deploy-card:hover,
.no-public:has(.page-dark) .deploy-card:hover { transform:translateY(-4px); box-shadow:0 34px 64px -34px rgba(0,0,0,.68) !important; }

/* la recomendada: aro + resplandor, para que se vea que es la recomendación */
.no-public:has(.home-root) .deploy-card.recommended,
.no-public:has(.page-dark) .deploy-card.recommended {
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(25,182,196,.16), transparent 62%),
    linear-gradient(168deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) !important;
  border:1px solid rgba(25,182,196,.34) !important;
  border-top:3px solid #19b6c4 !important;
  box-shadow:0 26px 56px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(25,182,196,.18) !important;
}

/* la etiqueta, en el color de su modalidad */
.no-public:has(.home-root) .deploy-card .tag,
.no-public:has(.page-dark) .deploy-card .tag,
.no-public:has(.home-root) .deploy-card.recommended .tag,
.no-public:has(.page-dark) .deploy-card.recommended .tag,
.no-public:has(.home-root) .deploy-card.onprem .tag,
.no-public:has(.page-dark) .deploy-card.onprem .tag {
  display:inline-block; margin:0 0 20px; padding:7px 15px; border-radius:30px;
  background:rgba(25,182,196,.14) !important; border:1px solid rgba(25,182,196,.48) !important;
  color:#4fd1e0 !important;
  font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
}
.no-public:has(.home-root) .deploy-card.onprem .tag,
.no-public:has(.page-dark) .deploy-card.onprem .tag {
  background:rgba(246,168,58,.14) !important; border-color:rgba(246,168,58,.50) !important; color:#f6a83a !important;
}

/* textos */
.no-public:has(.home-root) .deploy-card h3,
.no-public:has(.page-dark) .deploy-card h3 { color:#ffffff; font-size:25px; margin:0 0 10px; letter-spacing:-.015em; }
.no-public:has(.home-root) .deploy-card p,
.no-public:has(.page-dark) .deploy-card p { color:#cfd6e2 !important; font-size:16.5px !important; line-height:1.65; margin:0 0 24px; }
.no-public:has(.home-root) .deploy-card ul,
.no-public:has(.page-dark) .deploy-card ul { list-style:none; padding:0; margin:0; }
.no-public:has(.home-root) .deploy-card li,
.no-public:has(.page-dark) .deploy-card li {
  position:relative; padding:12px 0 12px 30px; font-size:16px !important; font-weight:400;
  color:#dbe5f2 !important; line-height:1.5; border-top:1px solid rgba(255,255,255,.08);
}
.no-public:has(.home-root) .deploy-card li:first-child,
.no-public:has(.page-dark) .deploy-card li:first-child { border-top:none; padding-top:0; }
.no-public:has(.home-root) .deploy-card li:last-child,
.no-public:has(.page-dark) .deploy-card li:last-child { padding-bottom:0; }
.no-public:has(.home-root) .deploy-card li::before,
.no-public:has(.page-dark) .deploy-card li::before,
.no-public:has(.home-root) .deploy-card.onprem li::before,
.no-public:has(.page-dark) .deploy-card.onprem li::before {
  content:"✓"; position:absolute; left:2px; top:12px;
  color:var(--d,#19b6c4) !important; font-weight:700; font-size:14px;
}
.no-public:has(.home-root) .deploy-card li:first-child::before,
.no-public:has(.page-dark) .deploy-card li:first-child::before { top:0; }

/* el icono no debe pisar la etiqueta en pantallas medias */
@media (max-width:1180px){
  .no-public:has(.home-root) .deploy-card .deploy-icon,
  .no-public:has(.page-dark) .deploy-card .deploy-icon { position:static; margin-bottom:20px; }
}
@media (max-width:520px){
  .no-public:has(.home-root) .deploy-card,
  .no-public:has(.page-dark) .deploy-card { padding:28px 24px 26px; }
}

/* el chip "CONTACTO" quedaba en #2170B3 sobre el azul oscuro de la home (2,46:1) */
.no-public:has(.home-root) section.np#contacto-final .contacto-chip,
.no-public:has(.page-dark) section.np#contacto-final .contacto-chip { color:#19b6c4 !important; }


/* ── la banda de cifras del hero en móvil (Ana 2026-09-07) ──
   El padding de 100px !important dejaba 175px útiles en un móvil de 375
   y las cuatro cifras se salían de la banda (53px de desborde, ya de antes;
   al subir el tamaño de las etiquetas se notaba más). Se hace responsive. */
@media (max-width:760px){
  .no-public .hero-stats-band { padding:26px 20px 38px !important; }
  .no-public .hero-stats--wide { grid-template-columns:repeat(2,1fr); gap:20px !important; }
  .no-public .hero-stats--wide .num { font-size:36px; }
  .no-public .hero-stats--wide .lbl { font-size:13px; letter-spacing:.05em; }
}
@media (max-width:430px){
  .no-public .hero-stats--wide { grid-template-columns:1fr; gap:24px !important; }
  .no-public .hero-stats--wide .num { font-size:42px; }
  .no-public .hero-stats--wide .lbl { font-size:14px; }
}

/* ── etiqueta de sección que además es enlace (Ana 2026-09-07) ──
   Se usa en la home, en la sección de integraciones, para que la propia
   etiqueta lleve a /netoffice/integraciones además del botón. */
.no-public a.eyebrow-line { text-decoration:none; cursor:pointer; transition:color .2s, border-color .2s, background .2s; }
.no-public a.eyebrow-line:hover { color:#ffffff !important; border-color:rgba(25,182,196,.85); background:rgba(25,182,196,.22); }

/* ══════════════════════════════════════════════════════════════════
   .logo-duo — logo con dos versiones: silueta blanca en reposo y la
   marca real al pasar el cursor (Ana 2026-09-08).
   Hace falta para los logos cuyo fondo macizo ES parte de la marca:
   Sherlog es un logotipo BLANCO dentro de una píldora azul, así que la
   versión mono no puede llevar color y el filtro del carrusel tampoco
   puede exceptuarse por elemento (el filtro va en el <a>, y un filtro
   del padre se aplica igual a los hijos). Solución: se le quita el
   filtro al <a> y se pone en el <img> mono, para que el <img> de color
   quede libre.
   ══════════════════════════════════════════════════════════════════ */
.no-public .logo-item.logo-duo,
.no-public:has(.page-dark) .logo-item.logo-duo,
.no-public:has(.home-root) .logo-item.logo-duo,
.no-public section.np#integraciones .logo-item.logo-duo,
.no-public:has(.page-dark) section.np#integraciones-gps .logo-item.logo-duo {
  filter:none; opacity:1; position:relative;
}
.no-public .logo-duo .lg-mono {
  filter:grayscale(1) brightness(0) invert(1); opacity:.72;
  transition:opacity .25s ease;
}
.no-public .logo-duo .lg-color {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  opacity:0; transition:opacity .25s ease; pointer-events:none;
  /* la píldora es más cuadrada que el logotipo suelto: si se ajusta al alto
     de la caja sale un 22% más estrecha y el cambio canta. Al 126% del alto
     ocupa el mismo ancho que el texto en reposo, así la píldora parece
     aparecer ALREDEDOR de las letras en vez de sustituirlas. Los 9px que
     sobresalen por arriba y por abajo caben en el padding de 32px de la
     marquesina, así que no se recorta. */
  height:126%; width:auto; max-width:none; max-height:none;
}
.no-public .logo-duo:hover .lg-mono { opacity:0; }
.no-public .logo-duo:hover .lg-color { opacity:1; }


/* ══════════════════════════════════════════════════════════════════
   Artículos importados del blog de WordPress (Ana 2026-09-08).
   Dos piezas que el diseño no tenía porque los 9 de muestra no las
   usaban: el pie de foto y el vídeo incrustado de YouTube.
   ══════════════════════════════════════════════════════════════════ */
.no-public .rich-content .rc-cap {
  margin-top:-.6em; color:#9fb3cc; font-size:14.5px; line-height:1.5; font-style:italic;
}
.no-public .rich-content .rc-video {
  position:relative; aspect-ratio:16 / 9; margin:1.6em 0;
  border-radius:12px; overflow:hidden; border:1px solid var(--line);
  background:rgba(0,0,0,.35);
}
.no-public .rich-content .rc-video iframe {
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}

/* ══════════════════════════════════════════════════════════════════
   Blog · página del artículo en oscuro (Ana 2026-09-08)
   Los artículos no llevaban envoltorio .page-dark, así que salían con
   el tema CLARO: fondo blanco, y el .lede (#cfd6e2) a 1,6:1. Ya se les
   ha puesto el envoltorio, pero sobre fondo oscuro quedaban dos restos
   del bloque de "uniformidad" claro:
     · el H1 del artículo en #0D3454 sobre #0D3454  → 1,0:1, INVISIBLE.
       Era el título de TODOS los artículos del blog.
     · la línea de fecha/autor (--muted) a 2,94:1.
   ══════════════════════════════════════════════════════════════════ */
.no-public:has(.page-dark) .post-article h1 { color:#ffffff; }
.no-public:has(.page-dark) .post-article .post-meta { color:#9fb3cc; }
.no-public:has(.page-dark) .post-article .post-meta .cat { color:#19b6c4; }
.no-public:has(.page-dark) .post-article .lede { color:#dbe5f2; }

/* ══════════════════════════════════════════════════════════════════════════
   BLOG · filtro que funciona, paginación y tipografía del listado
   (Ana 2026-09-08, al entrar los 176 artículos de WordPress)

   · Los chips pasan de <span> decorativo a <button> real, así que necesitan
     el reseteo de botón (heredar la fuente, quitar el borde del navegador).
   · Tarjetas: el título estaba en 18px y el "Leer artículo" en 13px, y con
     el fondo oscuro apenas se leían. Suben a 21 y 15,5.
   · La paginación es nueva: no existía porque con 9 artículos no hacía falta.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── los chips, ahora botones ── */
.no-public .fchip {
  font-family:inherit; font-size:14.5px; font-weight:500; line-height:1.2;
  padding:9px 17px; display:inline-flex; align-items:center; gap:8px;
  appearance:none; -webkit-appearance:none;
}
.no-public .fchip .fchip-n {
  font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:600;
  padding:2px 7px; border-radius:20px;
  background:rgba(255,255,255,.08); color:#9fb3cc;
  transition:background .2s, color .2s;
}
.no-public:has(.page-dark) .fchip.on .fchip-n,
.no-public:has(.page-dark) .fchip:hover .fchip-n {
  background:rgba(25,182,196,.22); color:#4fd1e0;
}
.no-public .fchip.on { font-weight:600; }
.no-public .filter-bar { gap:11px; margin-bottom:40px; }

/* ── tarjetas: título y enlace legibles ── */
.no-public .post-card h3 { font-size:21px; line-height:1.28; }
.no-public .post-card p { font-size:15.5px; line-height:1.6; }
.no-public .post-card .pc-date { font-size:13.5px; letter-spacing:.02em; }
.no-public .post-card .pc-more { font-size:15.5px; font-weight:600; margin-top:10px; }
.no-public .post-card .pc-body { padding:22px 22px 24px; gap:9px; }
/* el enlace de la tarjeta se subraya al pasar por encima: es la llamada */
.no-public .post-card:hover .pc-more { text-decoration:underline; text-underline-offset:4px; }

/* ── paginación ── */
.no-public .blog-pager {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:8px; margin:48px auto 0;
}
.no-public .blog-pager button {
  font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:600;
  min-width:44px; height:44px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:11px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14);
  color:#cfd6e2; appearance:none; -webkit-appearance:none;
  transition:background .2s, border-color .2s, color .2s, transform .15s;
}
.no-public .blog-pager button:hover:not(:disabled) {
  color:#ffffff; border-color:rgba(25,182,196,.55); background:rgba(25,182,196,.14);
  transform:translateY(-2px);
}
.no-public .blog-pager button.on {
  color:#062430; background:#19b6c4; border-color:#19b6c4; cursor:default;
}
.no-public .blog-pager button.on:hover { transform:none; }
.no-public .blog-pager button:disabled { opacity:.32; cursor:not-allowed; }
.no-public .blog-pager .pg-gap {
  color:#9fb3cc; padding:0 4px; font-family:'JetBrains Mono',monospace; font-size:15px;
}
.no-public .blog-pager-info {
  text-align:center; margin:18px auto 0; color:#9fb3cc; font-size:14.5px;
}
.no-public .blog-vacio { color:#cfd6e2; text-align:center; padding:3rem 0; font-size:17px; }

@media (max-width:560px) {
  .no-public .blog-pager button { min-width:40px; height:40px; font-size:14px; }
  .no-public .fchip { font-size:13.5px; padding:8px 14px; }
}

/* ── /blog: pegar los chips a la cabecera (Ana 2026-09-08) ──
   Había 124px de aire entre el subtítulo y los filtros: 28 del margen del
   .sub + 16 del hero + 80 del padding de section.std. Los chips son parte
   del bloque de cabecera, no una sección nueva, así que se recorta a ~50.
   Se acota con :has(.filter-bar) para no tocar el resto de las secciones. */
.no-public section.std:has(.filter-bar) { padding-top:22px; }
.no-public .page-dark:has(+ section.std .filter-bar) .hero-page { padding-bottom:0; }

/* ══════════════════════════════════════════════════════════════════════════
   BLOG · la cabecera del artículo, al ancho del cuerpo (Ana 2026-09-08)

   Cabecera y cuerpo iban por raíles distintos y no coincidían:
     · .post-article  →  820px centrado  (el texto empezaba en x=385)
     · .rich-content  →  1336px          (el texto empezaba en x=127)
   De ahí el escalón que se veía entre el h1 y el primer párrafo.

   Se iguala llevando la CABECERA al raíl del cuerpo: mismo ancho máximo y
   mismo padding que `section.std`, así el h1, la entradilla y los párrafos
   arrancan todos en el mismo punto y ocupan lo mismo. El cuerpo se queda
   exactamente como estaba.
   ══════════════════════════════════════════════════════════════════════════ */
.no-public .post-article { max-width:1400px; }

/* Al quitar la foto de portada quedaban 108px de vacío entre la entradilla y
   el primer párrafo (28 del margen de la entradilla + 80 del padding de la
   sección). El cuerpo es continuación de la entradilla, no una sección nueva. */
.no-public .post-article ~ section.std { padding-top:10px; }

/* En móvil la sección baja a 20px de padding y la cabecera se quedaba en 32:
   el h1 salía 12px desplazado respecto al texto. */
@media (max-width:600px) {
  .no-public .post-article { padding-left:20px; padding-right:20px; }
}

/* ══════════════════════════════════════════════════════════════════════
   /contacto · textos del bloque RGPD sobre la tarjeta CLARA del formulario
   (Ana 2026-09-08)

   El bloque claro del formulario arregló .form-checkbox, pero el HTML usa
   .gdpr-checkbox, así que la casilla de consentimiento se quedaba con el
   color del tema oscuro (#cfd6e2) sobre la tarjeta clara (#eef2f7):
   **1,30:1, es decir invisible**. Es el texto legal de aceptación del
   formulario, justo el que tiene que leerse. Lo mismo con los <strong> y
   los enlaces de la tabla de información RGPD.
   ══════════════════════════════════════════════════════════════════════ */
.no-public .contacto-form-wrap .gdpr-checkbox { color:#4a5b73; }
.no-public .contacto-form-wrap .gdpr-checkbox a { color:#2170B3; }
.no-public .contacto-form-wrap .gdpr-table { color:#4a5b73; }
.no-public .contacto-form-wrap .gdpr-table strong { color:#0D3454; }
.no-public .contacto-form-wrap .gdpr-table a { color:#2170B3; }
.no-public .contacto-form-wrap .gdpr-table td { border-bottom:1px solid #e4eaf2; }

/* ══════════════════════════════════════════════════════════════════════════
   MONTAJE PROVISIONAL — franja de contacto sobre la topbar
   (Ana 2026-09-08, para enseñarlo al equipo)

   Al lado del icono de LinkedIn no cabía: el menú ocupa 702px y el bloque
   del botón + LinkedIn 287px, así que en el raíl de 1400px quedan 159px
   libres —y solo 39px a 1280px—, cuando el teléfono y el correo como texto
   piden unos 293px. Además dos textos junto al botón de demo le quitan
   fuerza a la acción principal. Por eso van en una franja propia encima.

   La franja la inyecta reveal.js en <body>, fuera del árbol de Blazor.
   El desplazamiento va con :has(): si la franja desaparece, la topbar y el
   contenido vuelven solos a su posición, sin tocar nada más.

   PARA RETIRARLO: borrar este bloque y la función contactoTopbar() de
   reveal.js. Lo definitivo es ponerlo en PublicHeader.razor leyendo
   Phone y ContactEmail de SiteSettings.
   ══════════════════════════════════════════════════════════════════════════ */
.topbar-contacto {
  position: fixed; top: 0; left: 0; right: 0; z-index: 101;
  height: 34px;
  background: #0a2a44;                      /* un tono por debajo del #0D3454 de la topbar */
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.topbar-contacto .tc-wrap {
  max-width: 1400px; margin: 0 auto; height: 100%;
  padding: 0 32px;
  display: flex; align-items: center; justify-content: flex-end; gap: 18px;
}
.topbar-contacto .tc-item {
  display: inline-flex; align-items: center; gap: 8px;
  color: #b8c7da; font-size: 13.5px; font-weight: 500; text-decoration: none;
  transition: color .2s;
}
.topbar-contacto .tc-item svg { width: 15px; height: 15px; flex: 0 0 auto; color: #19b6c4; transition: color .2s; }
.topbar-contacto .tc-item:hover { color: #ffffff; }
.topbar-contacto .tc-item:hover svg { color: #4fd1e0; }
.topbar-contacto .tc-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .18); }

/* la topbar baja lo que mide la franja, y el contenido con ella */
body:has(.topbar-contacto) .no-public .topbar { top: 34px; }
body:has(.topbar-contacto) .no-public > main#main-content { padding-top: 106px; }

/* En móvil se oculta: no hay sitio y el menú ya lleva "Contacto".
   Al ocultarla hay que devolver la topbar y el contenido a su posición. */
@media (max-width: 760px) {
  .topbar-contacto { display: none; }
  body:has(.topbar-contacto) .no-public .topbar { top: 0; }
  body:has(.topbar-contacto) .no-public > main#main-content { padding-top: 72px; }
}

/* ── home · la foto de la app, ya montada (Ana 2026-09-08) ──
   'app-viaje-1.png' trae los dos móviles con su inclinación y sus sombras
   sobre fondo transparente, así que sustituye a las dos imágenes que antes
   se colocaban y giraban con CSS (.ph-back / .ph-front). Ya no hacen falta
   ni posición absoluta ni transform ni drop-shadow: la sombra viene en la
   propia imagen y duplicarla la ensuciaría.
   El resplandor de fondo (.driver-phones::before) se mantiene. ── */
.no-public .driver-phones-uno { aspect-ratio:auto; }
.no-public .driver-phones-uno .ph-uno {
  position:relative; z-index:2;
  display:block; width:100%; height:auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   Ampliar los pantallazos al pulsarlos (equipo NetOffice, 2026-09-09)

   Los pantallazos del ERP están a ~1900x950 y en la página se ven a unos
   600-700px: los datos no se leen. Al pulsarlos se abren a pantalla casi
   completa. reveal.js marca con `.con-lupa` solo las imágenes que tienen
   detalle de sobra (>=900px de ancho real) y que no son logos ni portadas.

   La pista visual importa: si no se ve que la imagen es pulsable, nadie la
   pulsa. De ahí el cursor de lupa, el aro al pasar por encima y la insignia
   con el icono en la esquina.
   ══════════════════════════════════════════════════════════════════════════ */
.no-public img.con-lupa {
  cursor: zoom-in;
  transition: filter .2s ease, box-shadow .2s ease;
}
.no-public img.con-lupa:hover,
.no-public img.con-lupa:focus-visible {
  filter: brightness(1.04);
  box-shadow: 0 0 0 2px rgba(25, 182, 196, .75), 0 18px 44px -18px rgba(0, 0, 0, .6);
  outline: none;
}

/* insignia de lupa sobre la esquina de la imagen. Va en el contenedor, que
   es quien puede posicionarla: la imagen sola no admite ::after. */
/* La clase la pone reveal.js, y solo en los contenedores cuyo ::after está
   libre: `.shot-scan` lo usa para su línea de barrido y no se le puede
   pisar. `lupa-rel` solo se añade si el contenedor era `static`, para no
   cambiarle el posicionamiento a nadie. */
.no-public .lupa-rel { position: relative; }
.no-public .lupa-cont::after {
  content: '⤢';
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7, 26, 43, .72); border: 1px solid rgba(255, 255, 255, .28);
  color: #ffffff; font-size: 17px; line-height: 1;
  backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.no-public .lupa-cont:hover::after { opacity: 1; transform: translateY(0); }

/* ── la ventana ── */
.lupa {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  background: rgba(4, 16, 28, .92);
  backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .2s ease;
  cursor: zoom-out;
}
.lupa.visible { opacity: 1; }
.lupa-marco {
  margin: 0; max-width: 95vw; max-height: 92vh;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  cursor: default;
}
.lupa-marco img {
  /* se dimensiona sola: su tamaño real, topado por el viewport y por el
     ancho natural (que llega en --lupa-nat) para no verla borrosa */
  display: block; width: auto; height: auto;
  max-width: min(95vw, var(--lupa-nat, 95vw));
  max-height: 84vh;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
  background: #0D3454;
}
.lupa-marco figcaption {
  color: #cfd6e2; font-family: Inter, system-ui, sans-serif;
  font-size: 15px; line-height: 1.5; text-align: center; max-width: 760px;
}
.lupa-cerrar {
  position: absolute; top: 20px; right: 24px; z-index: 2;
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .26);
  color: #ffffff; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.lupa-cerrar:hover { background: rgba(25, 182, 196, .28); border-color: #19b6c4; }
.lupa-cerrar svg { width: 20px; height: 20px; }

/* con la ventana abierta, la página no se desplaza por detrás */
body.lupa-abierta { overflow: hidden; }

@media (max-width: 640px) {
  .lupa { padding: 14px; }
  .lupa-marco img { max-height: 76vh; }
  .lupa-cerrar { top: 12px; right: 12px; }
  /* en móvil no hay hover: la insignia se queda visible para que se vea que amplía */
  .no-public .lupa-cont::after { opacity: .9; transform: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Titular de texto de la home (Ana, 2026-09-09)

   La cabecera de la home es un vídeo con el título dentro, así que la página
   no tenía ningún <h1>: era la única del sitio sin él, y la zona de más peso
   para buscadores no decía nada en texto. Este renglón lo pone en texto real,
   entre el vídeo y la banda de cifras. El vídeo se queda igual, con sus
   títulos sincronizados.

   Pinta su propio fondo a todo lo ancho, como hacen `.hero-intro-band` y
   `.benefits-section`, para que empalme sin costura con el vídeo de arriba y
   con las cifras de abajo sea cual sea el fondo base de la página.
   ══════════════════════════════════════════════════════════════════════════ */
.no-public .home-h1-band {
  position: relative; isolation: isolate;
  padding: 20px 32px 16px; max-width: 1180px; margin: 0 auto;
  text-align: center;
}
.no-public .home-h1-band::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; background: #0D3454; z-index: 0;
}
.no-public .home-h1-band > * { position: relative; z-index: 1; }

/* Tres cosas lo separan de los h2 de sección, que estaban en
   clamp(32px,3.6vw,52px) con el cian plano:
     · tamaño de titular de verdad, por encima de cualquier h2;
     · el acento en degradado cian→celeste en vez de color plano;
     · un filete corto con brillo debajo, que no lleva ningún otro título.
   El color explícito es obligatorio: el por defecto de los encabezados es
   #2170B3, que sobre este azul no se leería. */
.no-public .home-h1-band h1 {
  margin: 0; color: #ffffff; font-weight: 700;
  font-size: clamp(34px, 5vw, 66px); line-height: 1.06; letter-spacing: -.03em;
  text-wrap: balance;   /* en pantallas estrechas reparte las líneas en vez de dejar una palabra sola */
}
.no-public .home-h1-band h1 span {
  display: block; width: fit-content; margin-inline: auto;
  background: linear-gradient(120deg, #19b6c4, #5ddcea);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* si el navegador no sabe recortar el fondo al texto, el cian en línea del
   contenido sigue mandando y el acento se ve igual */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .no-public .home-h1-band h1 span { -webkit-text-fill-color: currentColor; }
}
.no-public .home-h1-band h1::after {
  content: ''; display: block; width: 88px; height: 3px; margin: 26px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(25,182,196,0), #19b6c4 28%, #5ddcea 72%, rgba(25,182,196,0));
  box-shadow: 0 0 18px rgba(25,182,196,.55);
}

@media (max-width: 700px) {
  .no-public .home-h1-band { padding: 30px 20px 10px; }
  .no-public .home-h1-band h1 { line-height: 1.12; letter-spacing: -.02em; }
  .no-public .home-h1-band h1::after { width: 64px; margin-top: 18px; }
}

/* En el móvil la cabecera usa el vídeo vertical (1080x1350): la composición
   ancha a 390px de ancho se ve al 20% y no se lee. La proporción es la exacta
   del fichero, así que no se recorta nada; sus márgenes propios son 108px
   arriba y 58 abajo (medidos), que a esa escala son 39 y 21 px. El degradado
   de fundido se acorta, porque 110px sobre una franja de 487 le comían el
   tercio inferior a la composición. Qué fichero se carga lo decide reveal.js:
   con CSS se descargarían los dos. */
@media (max-width: 780px) {
  .no-public .hero-video-full { aspect-ratio: 1080/1350; }
  .no-public .hero-video-full::after { height: 60px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Sección "El conductor lleva su oficina en el móvil" (Ana, 2026-09-29)

   Primero se probó con una tarjeta a la izquierda listando lo que el conductor
   lleva encima. Ana la retiró: repetía lo que ya cuentan los tres bloques de
   funcionalidades de debajo. Así que el argumento se queda solo, centrado y a
   tres columnas, que es lo que había que destacar.
   ══════════════════════════════════════════════════════════════════════════ */
.no-public .adw-arg { max-width: 1040px; margin: 34px auto 0; text-align: center; }
.no-public .adw-arg .adw-why-lead { max-width: 840px; margin: 0 auto 26px; }
.no-public .adw-arg .adw-why-list {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  text-align: left; margin-bottom: 28px;
}
.no-public .adw-arg .adw-why-cta { display: inline-block; max-width: 720px; }

/* El bloque suma en vez de restar, así que va en cian y no en el rojo con el
   que se señalaba el problema del chat. */
.no-public .adw-pos .adw-why-tag {
  background: rgba(25,182,196,.12); border-color: rgba(25,182,196,.42); color: #4fd1e0;
}
.no-public .adw-pos .adw-why-list li::before {
  background: rgba(25,182,196,.22); border-color: rgba(25,182,196,.55);
}

@media (max-width: 860px) {
  .no-public .adw-arg .adw-why-list { grid-template-columns: 1fr; gap: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   La banda de entrada de App Driver, destacada (Ana, 2026-09-29)

   El párrafo iba a 22px, centrado y a 1100px de ancho: más de 100 caracteres
   por línea, blanco al 85% y sin nada alrededor. Ana: "apenas se lee, se
   pierde". Ahora es un panel con su marco, con la línea de lectura cortada a
   la mitad y las dos cifras en cian, que es lo que se quiere que se quede.
   ══════════════════════════════════════════════════════════════════════════ */
/* Ana lo quiere alineado con el resto de la página, no flotando más estrecho
   en el centro: la banda pasa al mismo carril que la cabecera (1400px). */
.no-public .hero-intro-band.intro-destacada { padding: 26px 32px 44px; max-width: 1400px; }
.no-public .intro-destacada .hero-intro-inner {
  max-width: none; margin: 0; text-align: left;
  padding: 32px 38px 32px 40px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(25,182,196,.10), rgba(25,182,196,.035));
  border: 1px solid rgba(25,182,196,.30);
  border-left: 3px solid #19b6c4;
  box-shadow: 0 24px 50px -32px rgba(0,0,0,.7);
}
.no-public .intro-destacada .hero-intro-inner p {
  font-size: 19px !important; line-height: 1.65; color: #e3ebf5 !important; margin: 0;
}
.no-public .intro-destacada .hero-intro-inner b { color: #4fd1e0; font-weight: 700; }

@media (max-width: 700px) {
  .no-public .intro-destacada .hero-intro-inner { padding: 20px 18px 20px 20px; }
  .no-public .intro-destacada .hero-intro-inner p { font-size: 17px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   App Driver: el cuerpo de texto, más grande (Ana, 2026-09-29)

   La página mezclaba 22px en la cabecera con 13,5-15px en casi todo lo demás:
   las viñetas a 14,5, los subtítulos de los bloques a 14 y las descripciones
   de las funcionalidades a 13,5. Eso es lo que se veía pequeño.

   Se suben solo las piezas que existen únicamente en esta página —.adw-*,
   .benefits-section y la banda destacada—, así que ninguna otra página de la
   web cambia. Nada baja de 15px y lo que se lee seguido queda en 16,5-21.
   ══════════════════════════════════════════════════════════════════════════ */
.no-public .intro-destacada .hero-intro-inner p { font-size: 21px !important; line-height: 1.75; }   /* sin tope: si el panel ocupa todo el carril, el texto también (Ana) */

.no-public .adw-arg .adw-why-lead { font-size: 18.5px; line-height: 1.6; }
.no-public .adw-arg .adw-why-list li { font-size: 16.5px; line-height: 1.55; }
.no-public .adw-arg .adw-why-cta { font-size: 17px; line-height: 1.55; }

.no-public .adw-g-sub { font-size: 15.5px; }
.no-public .adw-feats li b { font-size: 16.5px; }
.no-public .adw-feats li > div > span { font-size: 15px; line-height: 1.55; }

.no-public .benefits-section .benefit-item h3 { font-size: 19px; }
.no-public .benefits-section .benefit-item p { font-size: 16.5px; line-height: 1.55; }

@media (max-width: 700px) {
  .no-public .intro-destacada .hero-intro-inner p { font-size: 18.5px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   El pie: la línea legal más pequeña y el texto de marca más grande
   (Ana, 2026-10-06)

   La línea del © estaba en 20px, más grande que los propios enlaces del pie
   (13,5px) y que los títulos de columna (12px): cantaba en todas las páginas.
   Baja a 13px, en línea con el resto del pie.

   El párrafo de marca iba al revés: 14px y cortado a 300px cuando es la
   columna más ancha del pie (1.5fr). Sube a 16,5px y se le da sitio, porque
   además pasa a contar lo que es NetOffice y no solo una frase.
   ══════════════════════════════════════════════════════════════════════════ */
.no-public footer.site .legal { font-size: 13px; color: #93a7c0; }
/* los enlaces legales, algo mayores que la línea del copyright */
.no-public footer.site .legal > div:last-child { font-size: 14.5px; }
.no-public footer.site .f-brand p {
  font-size: 15.5px; line-height: 1.65; max-width: 400px; color: #cfd6e2;
}
/* las cifras, que es lo que interesa que se quede */
.no-public footer.site .f-brand p b { color: #4fd1e0; font-weight: 700; }

@media (max-width: 860px) {
  .no-public footer.site .f-brand p { font-size: 15px; max-width: none; }
  .no-public footer.site .legal > div:last-child { font-size: 13.5px; }
  .no-public footer.site .legal { font-size: 12.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   /netoffice/tms — la entradilla, en dos piezas (Ana, 2026-10-08)

   Eran dos párrafos seguidos a todo lo ancho y Ana no los quería así. Lo que
   cuentan es un antes y un después —el problema del sector y la respuesta de
   NetOffice—, así que se montan como dos tarjetas: la del reto en tono
   apagado y la de la respuesta con el acento cian y su resplandor. Entre las
   dos, una flecha, igual que en el recorrido del DeCA.
   ══════════════════════════════════════════════════════════════════════════ */
.no-public section.np.tms-intro { padding-top: 34px; padding-bottom: 26px; }
.no-public .tms-duo {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px;
  align-items: stretch; max-width: 1180px; margin: 0 auto;
}
.no-public .tms-duo-card {
  position: relative; padding: 28px 30px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.12);
}
.no-public .tms-duo-card p { margin: 0; color: #cfd6e2; font-size: 17px; line-height: 1.68; }
.no-public .tms-duo-card p b { color: #ffffff; font-weight: 700; }
.no-public .tms-duo-tag {
  display: inline-block; margin-bottom: 14px; padding: 5px 13px; border-radius: 20px;
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .10em; text-transform: uppercase;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22); color: #93a7c0;
}
/* la respuesta pesa más que el problema */
.no-public .tms-duo-resp {
  background: linear-gradient(180deg, rgba(25,182,196,.12), rgba(25,182,196,.04));
  border-color: rgba(25,182,196,.38);
  box-shadow: 0 26px 54px -34px rgba(25,182,196,.55);
}
.no-public .tms-duo-resp .tms-duo-tag { background: rgba(25,182,196,.14); border-color: rgba(25,182,196,.45); color: #4fd1e0; }
.no-public .tms-duo-resp p { color: #dbe5f2; }
.no-public .tms-duo-flecha {
  align-self: center; color: #19b6c4; font-size: 26px; line-height: 1; opacity: .9;
}
@media (max-width: 900px) {
  .no-public .tms-duo { grid-template-columns: 1fr; gap: 14px; }
  .no-public .tms-duo-flecha { transform: rotate(90deg); margin: 0 auto; }
}

/* ── Los chips de operativas, cada uno con su color ──
   Antes eran seis pastillas grises iguales. Cada operativa ya tiene su color
   en su sección (--op), así que el chip lo lleva en el punto y en el borde. */
.no-public .op-chips span {
  position: relative; padding-left: 36px; color: #ffffff;
  border-color: var(--chip, rgba(255,255,255,.16));
  background: rgba(255,255,255,.05);
}
.no-public .op-chips span::before {
  content: ''; position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--chip, #19b6c4); box-shadow: 0 0 10px var(--chip, #19b6c4);
}
.no-public .op-chips-cta { display: flex; justify-content: center; margin-top: 30px; }

/* Franja de pilares de la home con 3 en vez de 4 (Ana 2026-10-09: se quitó
   "En la nube, desde cualquier sitio" porque chocaba con la opción on-premise). */
.no-public section.np.why-band .why-pillars { grid-template-columns:repeat(3, 1fr); max-width:1080px; margin-left:auto; margin-right:auto; }
@media (max-width:760px){ .no-public section.np.why-band .why-pillars { grid-template-columns:1fr; } }

/* Vídeo de cabecera "Centro" (Ana 2026-10-13): el título y la etiqueta
   "Impulsado por IA" empiezan a 64px del borde superior del vídeo, así que el
   recorte de 100px del 1920/820 los cortaba. Solo escritorio: en móvil manda
   la regla de 1080/1350 con el vídeo vertical. */
@media (min-width:781px){ .no-public .hero-video-full { aspect-ratio:1920/900; } }

/* /netoffice: franja de 5 ventajas (Ana 2026-10-13). Sustituye a las 5 cajas
   iguales (.features-row) por UNA franja con divisiones; cada columna con su
   acento (--c, y --cb = el mismo a 15 %) en el icono y la rayita superior. */
.no-public .feat-strip {
  display:grid; grid-template-columns:repeat(5, 1fr);
  border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
}
.no-public .feat-strip .fs-item { position:relative; padding:30px 24px 32px; border-left:1px solid rgba(255,255,255,.09); transition:background .25s; }
.no-public .feat-strip .fs-item:first-child { border-left:none; }
.no-public .feat-strip .fs-item::before { content:''; position:absolute; top:0; left:24px; width:36px; height:3px; border-radius:0 0 3px 3px; background:var(--c); }
.no-public .feat-strip .fs-item:hover { background:rgba(255,255,255,.035); }
.no-public .feat-strip .fs-ic { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:18px; color:var(--c); background:var(--cb); transition:transform .25s; }
.no-public .feat-strip .fs-item:hover .fs-ic { transform:translateY(-3px); }
.no-public .feat-strip .fs-ic svg { width:24px; height:24px; }
.no-public .feat-strip .fs-t { color:#ffffff; font-size:17px; font-weight:700; line-height:1.3; margin:0 0 8px; letter-spacing:-.005em; }
.no-public .feat-strip .fs-d { color:rgba(255,255,255,.74); font-size:14.5px; line-height:1.55; margin:0; }
@media (max-width:1100px){
  .no-public .feat-strip { grid-template-columns:1fr; }
  .no-public .feat-strip .fs-item { display:grid; grid-template-columns:46px 1fr; column-gap:18px; align-items:start; padding:22px 22px 22px 24px; border-left:none; border-top:1px solid rgba(255,255,255,.09); }
  .no-public .feat-strip .fs-item:first-child { border-top:none; }
  .no-public .feat-strip .fs-item::before { top:22px; left:0; width:3px; height:36px; border-radius:0 3px 3px 0; }
  .no-public .feat-strip .fs-ic { grid-row:span 2; margin-bottom:0; }
  .no-public .feat-strip .fs-t { margin-top:2px; }
}

/* /netoffice: secuencia de pantallas dentro del portátil del hero (Ana 2026-10-13).
   5 capturas (tráfico, flota, planificación, contabilidad, personal), 3 s cada
   una (ciclo 15 s). La nueva entra BARRIENDO de derecha a izquierda (clip-path)
   por encima de la anterior, con su rótulo y un punto de progreso sincronizados.
   Sin JS. Si se añade o quita una captura: duración = n × 3 s, tramo = 100/n %,
   barrido 0,6 s = 60/duración %, y recalcular retardos ((i-1)×3 − 1 s).
   OJO: NO parar la secuencia con prefers-reduced-motion — Ana tiene desactivados
   los efectos de animación de Windows y no veía cambiar nada; con esa opción
   solo se quita el barrido (cambio seco). */
.no-public .ns-slides { position:relative; aspect-ratio:1910/968; background:#0a0f1c; overflow:hidden; }
.no-public .netoffice-hero-media .laptop-screen .ns-slides img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:left top; aspect-ratio:auto;
}
/* opacidad y animación con selector CORTO a propósito: así los retardos por
   .ns-N (más específicos) no quedan pisados por el shorthand */
.no-public .ns-slides img { opacity:0; animation:nsSlide 15s linear infinite; }
.no-public .ns-caps { position:relative; height:34px; margin-top:22px; }
.no-public .ns-caps span {
  position:absolute; left:50%; top:0; transform:translateX(-50%); white-space:nowrap;
  padding:7px 16px; border-radius:999px; font-size:14px; line-height:20px;
  color:#cfe3f5; background:rgba(255,255,255,.06); border:1px solid rgba(25,182,196,.45);
  opacity:0; animation:nsCap 15s linear infinite;
}
.no-public .ns-caps b { color:#19b6c4; font-weight:700; }
.no-public .ns-dots { display:flex; justify-content:center; gap:7px; margin-top:12px; }
.no-public .ns-dots i { display:block; width:7px; height:7px; border-radius:999px; background:rgba(255,255,255,.22); animation:nsDot 15s linear infinite; }
.no-public .ns-slides .ns-1, .no-public .ns-caps .ns-1, .no-public .ns-dots .ns-1 { animation-delay:-1s; }
.no-public .ns-slides .ns-2, .no-public .ns-caps .ns-2, .no-public .ns-dots .ns-2 { animation-delay:2s; }
.no-public .ns-slides .ns-3, .no-public .ns-caps .ns-3, .no-public .ns-dots .ns-3 { animation-delay:5s; }
.no-public .ns-slides .ns-4, .no-public .ns-caps .ns-4, .no-public .ns-dots .ns-4 { animation-delay:8s; }
.no-public .ns-slides .ns-5, .no-public .ns-caps .ns-5, .no-public .ns-dots .ns-5 { animation-delay:11s; }
/* retardo negativo en la 1ª: al cargar la página ya está a mitad de su turno.
   Tramo = 20 %; barrido = 4 %. La que entra va encima (z-index 2) y la anterior
   sigue debajo hasta que el barrido termina. */
@keyframes nsSlide {
  0%      { opacity:1; z-index:2; clip-path:inset(0 0 0 100%); animation-timing-function:cubic-bezier(.65,0,.35,1); }
  4%      { clip-path:inset(0 0 0 0); }
  19.99%  { z-index:2; }
  20%     { z-index:1; }
  23.99%  { opacity:1; }
  24%     { opacity:0; }
  100%    { opacity:0; z-index:1; clip-path:inset(0 0 0 0); }
}
@keyframes nsSlideCut { 0% { opacity:1; z-index:2; } 19.99% { opacity:1; z-index:2; } 20% { opacity:0; z-index:1; } 100% { opacity:0; z-index:1; } }
@keyframes nsCap { 0% { opacity:0; } 1.2% { opacity:0; } 4.8% { opacity:1; } 18.6% { opacity:1; } 19.9% { opacity:0; } 100% { opacity:0; } }
@keyframes nsDot { 0% { background:#19b6c4; width:20px; } 19.9% { background:#19b6c4; width:20px; } 20% { background:rgba(255,255,255,.22); width:7px; } 100% { background:rgba(255,255,255,.22); width:7px; } }
@media (prefers-reduced-motion:reduce){
  .no-public .ns-slides img[class] { animation-name:nsSlideCut; }
}
@media (max-width:520px){ .no-public .ns-caps span { font-size:13px; padding:6px 13px; } }