/* ============================================================
   PIL · Manual de marca (sep 2026) · capa de marca sobre main.css
   Tokens: Tech blue #0002FF · Pale blue #124EF5 · Dark blue #0000B3
           Tinta #0D1B2A · Lavanda #F4F7FF · Dark #0F0F0F · White #F2F2F2
   Acentos por unidad: Pink #FC59F4 · Orange #FF7900 · Green #2EE57B · Yellow #EFD90C
   ============================================================ */
:root {
  --pil-blue: #0002ff;
  --pil-blue-pale: #124ef5;
  --pil-blue-dark: #0000b3;
  --pil-ink: #0d1b2a;
  --pil-lavender: #f4f7ff;
  --pil-dark: #0f0f0f;
  --pil-white: #f2f2f2;
  --pil-pink: #fc59f4;
  --pil-orange: #ff7900;
  --pil-green: #2ee57b;
  --pil-yellow: #efd90c;
  --tj-color-theme-primary: var(--pil-blue);
  --tj-color-text-body: var(--pil-ink);
  --tj-color-theme-dark: var(--pil-ink);
  --tj-color-heading-primary: var(--pil-ink);
}

/* Titulares en dos pesos: Regular en la entrada, Bold solo en el remate (lámina 15).
   El remate se marca con <span> (convención de los archivos lang/) o con <b>/<strong>. */
/* .sec-title repetido tres veces: gana a las reglas de dos clases del _head.php (.clientes-heading .sec-title, etc.) */
html body .sec-title.sec-title.sec-title:has(span), html body .sec-title.sec-title.sec-title:has(b), html body .sec-title.sec-title.sec-title:has(strong),
html body .about-hero-title:has(span), html body .int-hero-title:has(span), html body .srv-hero-title:has(span),
html body .tj-slider-item .slider-content .slider-title:has(span),
html body .industrias-heading h2:has(span), html body .vida-proctek-content h2:has(span),
html body .home-news-header h2:has(span), html body .mr-head h2:has(span) {
  font-weight: 400 !important;
}
html body .sec-title.sec-title.sec-title span, html body .sec-title.sec-title.sec-title b, html body .sec-title.sec-title.sec-title strong,
html body .about-hero-title span, html body .int-hero-title span, html body .srv-hero-title span,
html body .slider-title span,
html body .industrias-heading h2 span, html body .vida-proctek-content h2 span,
html body .home-news-header h2 span, html body .mr-head h2 span {
  font-weight: 700 !important;
  color: inherit !important;
}

/* Logo móvil: versión vertical sin descriptor, mínimo 90 px (lámina 8) */
.site_logo .logo-mobile img {
  width: 90px !important;
  height: auto !important;
}

/* Hover de botones y enlaces primarios: Dark blue */
.tj-primary-btn:hover,
.tj-btn-primary:hover,
.btn-primary:hover {
  background-color: var(--pil-blue-dark) !important;
  border-color: var(--pil-blue-dark) !important;
}

/* ── Sección "Parte de Grupo Proctek" (home): patrón de la lámina 14 ──
   Fondo Tech blue, tarjeta de cifras translúcida en blanco, mapa y marcadores en blanco. */
@media (min-width: 992px) {
  html body .tj-about-section.h6-about {
    background-color: var(--pil-blue) !important;
    border-radius: 20px !important;
  }
  html body .h6-about .sec-title,
  html body .h6-about .about-content-area .sec-heading .sec-title { color: #ffffff !important; }
  html body .h6-about .about-content-area .desc { color: rgba(255,255,255,0.82) !important; }
  html body .h6-about-funfact-wrapper {
    background-color: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    border-radius: 20px !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
  html body .h6-about-funfact-wrapper .countup-number,
  html body .h6-about-funfact-wrapper .count-plus,
  html body .h6-about-funfact-wrapper .inline-content,
  html body .h6-about-funfact-wrapper .inline-content span { color: #ffffff !important; }
  html body .h6-about-funfact-wrapper .count-text { color: rgba(255,255,255,0.80) !important; }
  html body .h6-about-funfact-wrapper .count-separator,
  html body .h6-about-funfact .countup-item + .countup-item { border-color: rgba(255,255,255,0.18) !important; }
  html body .h6-about-funfact-shape { display: none !important; }
  /* Mapa más grande: columna de texto 36 % / mapa 64 %, y el mapa desborda un poco hacia la izquierda */
  html body .tj-about-section.h6-about .col-lg-5 { flex: 0 0 36% !important; max-width: 36% !important; }
  html body .tj-about-section.h6-about .col-lg-7 { flex: 0 0 64% !important; max-width: 64% !important; }
  html body .tj-about-section.h6-about .about-map-area { width: 118% !important; margin-left: -10% !important; }
  html body .hm-wrap .hm-dot {
    background: #ffffff !important;
    border-color: rgba(255,255,255,0.45) !important;
    box-shadow: 0 0 8px rgba(255,255,255,0.55) !important;
  }
  html body .hm-wrap .hm-dot:hover,
  html body .hm-wrap .hm-dot.is-active {
    box-shadow: 0 0 18px rgba(255,255,255,0.9), 0 0 36px rgba(255,255,255,0.3) !important;
  }
}
/* Botón flotante: borde blanco para que no se funda con fondos Tech blue */
html body .fcw-btn { box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 8px 24px rgba(0,0,0,0.18) !important; }

/* ── Manual v2 · lámina 13 · secundarios para series de datos ── */
:root {
  --pil-data-1: #0002ff;  /* Azul PIL */
  --pil-data-2: #00aeef;  /* Light blue */
  --pil-data-3: #825fff;  /* Tech purple */
  --pil-data-4: #51ffde;  /* Mint */
  --pil-data-5: #f72d89;  /* Hot pink */
}

/* ── Manual v2 · lámina 20 · componentes de interfaz ──
   Radio total en controles de acción, 16 px en campos de entrada. */
html body .tj-primary-btn,
html body .pil-btn-primary {
  background-color: var(--pil-blue) !important;
  color: #ffffff !important;
  border: 2px solid var(--pil-blue) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
html body .tj-primary-btn:hover,
html body .pil-btn-primary:hover {
  background-color: var(--pil-blue-dark) !important;
  border-color: var(--pil-blue-dark) !important;
  color: #ffffff !important;
}
html body .pil-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 26px; font-size: 15px; line-height: 1.2; text-decoration: none;
}
html body .pil-btn-secondary,
html body .btn-secondary:not(.btn-close) {
  background: transparent !important;
  color: var(--pil-blue) !important;
  border: 2px solid var(--pil-blue) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
html body .pil-link-arrow {
  color: var(--pil-blue) !important; font-weight: 600; text-decoration: none;
}
html body .pil-link-arrow:hover { text-decoration: underline; }
html body .srv-unit-cta {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(13,27,42,.08);
}
html body .ct-input,
html body .ct-form-wrap input:not([type=checkbox]):not([type=radio]),
html body .ct-form-wrap select,
html body .ct-form-wrap textarea,
html body .fcw-field input,
html body .fcw-field select,
html body .fcw-field textarea {
  border-radius: 16px !important;
  border: 1px solid rgba(13,27,42,.14) !important;
}
html body .ct-input:focus,
html body .ct-form-wrap input:focus,
html body .ct-form-wrap select:focus,
html body .ct-form-wrap textarea:focus,
html body .fcw-field input:focus,
html body .fcw-field textarea:focus {
  border-color: var(--pil-blue) !important;
  box-shadow: 0 0 0 3px rgba(0,2,255,.12) !important;
  outline: none !important;
}
html body .ct-filter-btn,
html body .emp-filter-btn,
html body .not-filter-btn {
  border-radius: 999px !important;
}
html body .ct-office-card,
html body .ct-form-wrap { border-radius: 20px !important; }

/* ── Manual v2 · lámina 18 · ícono sobre el cuadrado de color ──
   Contenedor en el color de la unidad con ícono blanco; inactivo = blanco con filete. */
html body .submenu-up-ic { border-radius: 22% !important; }
html body .submenu-up-ic img { filter: brightness(0) invert(1); }
html body .srv-area-icon-wrap {
  width: 34px !important; height: 34px !important;
  border-radius: 22% !important;
  border: 1px solid rgba(13,27,42,.14) !important;
}
html body .srv-area-btn.is-active .srv-area-icon-wrap { background: var(--up-color, #0002ff) !important; border-color: transparent !important; }
html body .srv-area-btn.is-active .srv-area-icon-wrap img { filter: brightness(0) invert(1); }
html body .srv-area-btn:not(.is-active) .srv-area-icon-wrap { background: #ffffff !important; }
html body .srv-area-btn:not(.is-active) .srv-area-icon-wrap img { filter: grayscale(1) opacity(.55); }